fajiao
/
wvp-GB28181-pro
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

live页面适配palyer组件的修改

pull/448/head
xiaoxie 2 years ago
parent
44b7f67a20
commit
6e7cd084ee
1 changed files with 271 additions and 267 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 538
      web_src/src/components/live.vue

538
web_src/src/components/live.vue
View File

@ -1,8 +1,8 @@
<template>
<div id="devicePosition" style="width:100vw; height: 91vh">
<el-container v-loading="loading" style="height: 91vh;" element-loading-text="拼命加载中" >
<el-container v-loading="loading" style="height: 91vh;" element-loading-text="拼命加载中">
<el-aside width="300px" style="background-color: #ffffff">
<DeviceTree :clickEvent="clickEvent" :contextMenuEvent="contextMenuEvent" ></DeviceTree>
<DeviceTree :clickEvent="clickEvent" :contextMenuEvent="contextMenuEvent"></DeviceTree>
</el-aside>
<el-container>
<el-header height="5vh" style="text-align: left;font-size: 17px;line-height:5vh">
@ -17,9 +17,8 @@
:style="liveStyle" :class="{redborder:playerIdx == (i-1)}"
@click="playerIdx = (i-1)"
>
<div v-if="!videoUrl[i-1]" style="color: #ffffff;font-size: 30px;font-weight: bold;">{{i}}</div>
<player v-else :ref="'player'+i" :videoUrl="videoUrl[i-1]" fluent autoplay :height="true"
:containerId="'player'+i" @screenshot="shot" @destroy="destroy"></player>
<div v-if="!videoUrl[i-1]" style="color: #ffffff;font-size: 30px;font-weight: bold;">{{ i }}</div>
<player v-else :videoUrl="videoUrl[i-1]" fluent autoplay @screenshot="shot" @destroy="destroy"/>
</div>
</div>
</el-main>
@ -29,296 +28,301 @@
</template>
<script>
import uiHeader from "../layout/UiHeader.vue";
import player from './common/jessibuca.vue'
import DeviceTree from './common/DeviceTree.vue'
import uiHeader from "../layout/UiHeader.vue";
import player from './common/jessibuca.vue'
import DeviceTree from './common/DeviceTree.vue'
export default {
name: "live",
components: {
uiHeader, player, DeviceTree
},
data() {
return {
showVideoDialog: true,
hasAudio: false,
videoUrl:[''],
spilt:1,//分屏
playerIdx:0,//激活播放器
export default {
name: "live",
components: {
uiHeader, player, DeviceTree
},
data() {
return {
showVideoDialog: true,
hasAudio: false,
videoUrl: [''],
spilt: 1,//分屏
playerIdx: 0,//激活播放器
deviceList: [], //设备列表
currentDevice: {}, //当前操作设备对象
deviceList: [], //设备列表
currentDevice: {}, //当前操作设备对象
videoComponentList: [],
updateLooper: 0, //数据刷新轮训标志
currentDeviceChannelsLenth:0,
winHeight: window.innerHeight - 200,
currentPage:1,
count:15,
total:0,
getDeviceListLoading: false,
videoComponentList: [],
updateLooper: 0, //数据刷新轮训标志
currentDeviceChannelsLenth: 0,
winHeight: window.innerHeight - 200,
currentPage: 1,
count: 15,
total: 0,
getDeviceListLoading: false,
//channel
searchSrt: "",
channelType: "",
online: "",
channelTotal:0,
deviceChannelList:[],
loading:false
};
},
mounted() {
//channel
searchSrt: "",
channelType: "",
online: "",
channelTotal: 0,
deviceChannelList: [],
loading: false
};
},
mounted() {
},
created(){
this.checkPlayByParam()
},
},
created() {
this.checkPlayByParam()
},
computed:{
liveStyle(){
if(this.spilt==1){
return {width:'100%',height:'100%'}
}else if(this.spilt==4){
return {width:'49%',height:'49%'}
}else if(this.spilt==9){
return {width:'32%',height:'32%'}
}
computed: {
liveStyle() {
if (this.spilt == 1) {
return {width: '100%', height: '100%'}
} else if (this.spilt == 4) {
return {width: '49%', height: '49%'}
} else if (this.spilt == 9) {
return {width: '32%', height: '32%'}
}
},
watch:{
spilt(newValue){
console.log("切换画幅;"+newValue)
let that = this
for (let i = 1; i <= newValue; i++) {
if(!that.$refs['player'+i]){
continue
}
},
watch: {
spilt(newValue) {
console.log("切换画幅;" + newValue)
let that = this
for (let i = 1; i <= newValue; i++) {
if (!that.$refs['player' + i]) {
continue
}
this.$nextTick(() => {
if (that.$refs['player' + i] instanceof Array) {
that.$refs['player' + i][0].resize()
} else {
that.$refs['player' + i].resize()
}
this.$nextTick(()=>{
if(that.$refs['player'+i] instanceof Array){
that.$refs['player'+i][0].resize()
}else {
that.$refs['player'+i].resize()
}
})
})
}
window.localStorage.setItem('split',newValue)
},
'$route.fullPath':'checkPlayByParam'
}
window.localStorage.setItem('split', newValue)
},
'$route.fullPath': 'checkPlayByParam'
},
destroyed() {
clearTimeout(this.updateLooper);
},
methods: {
destroy(idx) {
console.log(idx);
this.clear(idx.substring(idx.length - 1))
},
destroyed() {
clearTimeout(this.updateLooper);
clickEvent: function (data) {
if (data.channelId && data.subCount == 0) {
this.sendDevicePush(data)
}
},
contextMenuEvent: function (data) {
},
methods: {
destroy(idx) {
console.log(idx);
this.clear(idx.substring(idx.length-1))
},
clickEvent: function (data) {
if (data.channelId && data.subCount == 0) {
this.sendDevicePush(data)
//通知设备上传媒体流
sendDevicePush: function (itemData) {
if (itemData.status === 0) {
this.$message.error('设备离线!');
return
}
this.save(itemData)
let deviceId = itemData.deviceId;
// this.isLoging = true;
let channelId = itemData.channelId;
console.log("通知设备推流1：" + deviceId + " : " + channelId);
let idxTmp = this.playerIdx
let that = this;
this.loading = true
this.$axios({
method: 'get',
url: '/api/play/start/' + deviceId + '/' + channelId
}).then(function (res) {
// that.isLoging = false;
console.log('=====----=====')
console.log(res)
if (res.data.code == 0 && res.data.data) {
itemData.playUrl = res.data.data.httpsFlv
that.setPlayUrl(res.data.data.ws_flv, idxTmp)
} else {
that.$message.error(res.data.msg);
}
},
contextMenuEvent: function (data) {
}).catch(function (e) {
}).finally(() => {
that.loading = false
});
},
setPlayUrl(url, idx) {
this.$set(this.videoUrl, idx, url)
let _this = this
setTimeout(() => {
window.localStorage.setItem('videoUrl', JSON.stringify(_this.videoUrl))
}, 100)
},
//通知设备上传媒体流
sendDevicePush: function (itemData) {
if(itemData.status===0){
this.$message.error('设备离线!');
return
},
checkPlayByParam() {
let {deviceId, channelId} = this.$route.query
if (deviceId && channelId) {
this.sendDevicePush({deviceId, channelId})
}
},
convertImageToCanvas(image) {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext("2d").drawImage(image, 0, 0);
return canvas;
},
shot(e) {
// console.log(e)
// send({code:'image',data:e})
var base64ToBlob = function (code) {
let parts = code.split(';base64,');
let contentType = parts[0].split(':')[1];
let raw = window.atob(parts[1]);
let rawLength = raw.length;
let uInt8Array = new Uint8Array(rawLength);
for (let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
this.save(itemData)
let deviceId = itemData.deviceId;
// this.isLoging = true;
let channelId = itemData.channelId;
console.log("通知设备推流1：" + deviceId + " : " + channelId );
let idxTmp = this.playerIdx
let that = this;
this.loading = true
this.$axios({
method: 'get',
url: '/api/play/start/' + deviceId + '/' + channelId
}).then(function (res) {
// that.isLoging = false;
console.log('=====----=====')
console.log(res)
if (res.data.code == 0 && res.data.data) {
itemData.playUrl = res.data.data.httpsFlv
that.setPlayUrl(res.data.data.ws_flv,idxTmp)
}else {
that.$message.error(res.data.msg);
}
}).catch(function (e) {
}).finally(()=>{
that.loading = false
return new Blob([uInt8Array], {
type: contentType
});
},
setPlayUrl(url,idx){
this.$set(this.videoUrl,idx,url)
let _this = this
setTimeout(()=>{
window.localStorage.setItem('videoUrl',JSON.stringify(_this.videoUrl))
},100)
};
let aLink = document.createElement('a');
let blob = base64ToBlob(e); //new Blob([content]);
let evt = document.createEvent("HTMLEvents");
evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错 事件类型，是否冒泡，是否阻止浏览器的默认行为
aLink.download = '截图';
aLink.href = URL.createObjectURL(blob);
aLink.click();
},
save(item) {
let dataStr = window.localStorage.getItem('playData') || '[]'
let data = JSON.parse(dataStr);
data[this.playerIdx] = item
window.localStorage.setItem('playData', JSON.stringify(data))
},
clear(idx) {
let dataStr = window.localStorage.getItem('playData') || '[]'
let data = JSON.parse(dataStr);
data[idx - 1] = null;
console.log(data);
window.localStorage.setItem('playData', JSON.stringify(data))
},
loadAndPlay() {
let dataStr = window.localStorage.getItem('playData') || '[]'
let data = JSON.parse(dataStr);
},
checkPlayByParam(){
let {deviceId,channelId} = this.$route.query
if(deviceId && channelId){
this.sendDevicePush({deviceId,channelId})
data.forEach((item, i) => {
if (item) {
this.playerIdx = i
this.sendDevicePush(item)
}
},
convertImageToCanvas(image) {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext("2d").drawImage(image, 0, 0);
return canvas;
},
shot(e){
// console.log(e)
// send({code:'image',data:e})
var base64ToBlob = function(code) {
let parts = code.split(';base64,');
let contentType = parts[0].split(':')[1];
let raw = window.atob(parts[1]);
let rawLength = raw.length;
let uInt8Array = new Uint8Array(rawLength);
for(let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], {
type: contentType
});
};
let aLink = document.createElement('a');
let blob = base64ToBlob(e); //new Blob([content]);
let evt = document.createEvent("HTMLEvents");
evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错 事件类型，是否冒泡，是否阻止浏览器的默认行为
aLink.download = '截图';
aLink.href = URL.createObjectURL(blob);
aLink.click();
},
save(item){
let dataStr = window.localStorage.getItem('playData') || '[]'
let data = JSON.parse(dataStr);
data[this.playerIdx] = item
window.localStorage.setItem('playData',JSON.stringify(data))
},
clear(idx) {
let dataStr = window.localStorage.getItem('playData') || '[]'
let data = JSON.parse(dataStr);
data[idx-1] = null;
console.log(data);
window.localStorage.setItem('playData',JSON.stringify(data))
},
loadAndPlay(){
let dataStr = window.localStorage.getItem('playData') || '[]'
let data = JSON.parse(dataStr);
data.forEach((item,i)=>{
if(item){
this.playerIdx = i
this.sendDevicePush(item)
}
})
}
})
}
};
}
};
</script>
<style>
.btn{
margin: 0 10px;
.btn {
margin: 0 10px;
}
.btn:hover{
color: #409EFF;
}
.btn.active{
color: #409EFF;
}
}
.redborder{
border: 2px solid red !important;
}
.play-box{
background-color: #000000;
border: 2px solid #505050;
display: flex;
align-items: center;
justify-content: center;
}
.btn:hover {
color: #409EFF;
}
.btn.active {
color: #409EFF;
}
.redborder {
border: 2px solid red !important;
}
.play-box {
background-color: #000000;
border: 2px solid #505050;
display: flex;
align-items: center;
justify-content: center;
}
</style>
<style>
.videoList {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
.videoList {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
.video-item {
position: relative;
width: 15rem;
height: 10rem;
margin-right: 1rem;
background-color: #000000;
}
.video-item {
position: relative;
width: 15rem;
height: 10rem;
margin-right: 1rem;
background-color: #000000;
}
.video-item-img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100%;
height: 100%;
}
.video-item-img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100%;
height: 100%;
}
.video-item-img:after {
content: "";
display: inline-block;
position: absolute;
z-index: 2;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 3rem;
height: 3rem;
background-image: url("../assets/loading.png");
background-size: cover;
background-color: #000000;
}
.video-item-img:after {
content: "";
display: inline-block;
position: absolute;
z-index: 2;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 3rem;
height: 3rem;
background-image: url("../assets/loading.png");
background-size: cover;
background-color: #000000;
}
.video-item-title {
position: absolute;
bottom: 0;
color: #000000;
background-color: #ffffff;
line-height: 1.5rem;
padding: 0.3rem;
width: 14.4rem;
}
.video-item-title {
position: absolute;
bottom: 0;
color: #000000;
background-color: #ffffff;
line-height: 1.5rem;
padding: 0.3rem;
width: 14.4rem;
}
.baidumap {
width: 100%;
height: 100%;
border: none;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
.baidumap {
width: 100%;
height: 100%;
border: none;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
/* 去除百度地图版权那行字 和 百度logo */
.baidumap > .BMap_cpyCtrl {
display: none !important;
}
.baidumap > .anchorBL {
display: none !important;
}
/* 去除百度地图版权那行字 和 百度logo */
.baidumap > .BMap_cpyCtrl {
display: none !important;
}
.baidumap > .anchorBL {
display: none !important;
}
</style>

Write Preview
Loading…
Cancel
Save