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

live页面适配palyer组件的修改

pull/448/head
xiaoxie 3 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
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 188
      web_src/src/components/live.vue

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

@ -1,8 +1,8 @@
<template> <template>
<div id="devicePosition" style="width:100vw; height: 91vh"> <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"> <el-aside width="300px" style="background-color: #ffffff">
<DeviceTree :clickEvent="clickEvent" :contextMenuEvent="contextMenuEvent" ></DeviceTree> <DeviceTree :clickEvent="clickEvent" :contextMenuEvent="contextMenuEvent"></DeviceTree>
</el-aside> </el-aside>
<el-container> <el-container>
<el-header height="5vh" style="text-align: left;font-size: 17px;line-height:5vh"> <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)}" :style="liveStyle" :class="{redborder:playerIdx == (i-1)}"
@click="playerIdx = (i-1)" @click="playerIdx = (i-1)"
> >
<div v-if="!videoUrl[i-1]" style="color: #ffffff;font-size: 30px;font-weight: bold;">{{i}}</div> <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" <player v-else :videoUrl="videoUrl[i-1]" fluent autoplay @screenshot="shot" @destroy="destroy"/>
:containerId="'player'+i" @screenshot="shot" @destroy="destroy"></player>
</div> </div>
</div> </div>
</el-main> </el-main>
@ -29,11 +28,11 @@
</template> </template>
<script> <script>
import uiHeader from "../layout/UiHeader.vue"; import uiHeader from "../layout/UiHeader.vue";
import player from './common/jessibuca.vue' import player from './common/jessibuca.vue'
import DeviceTree from './common/DeviceTree.vue' import DeviceTree from './common/DeviceTree.vue'
export default { export default {
name: "live", name: "live",
components: { components: {
uiHeader, player, DeviceTree uiHeader, player, DeviceTree
@ -42,69 +41,69 @@
return { return {
showVideoDialog: true, showVideoDialog: true,
hasAudio: false, hasAudio: false,
videoUrl:[''], videoUrl: [''],
spilt:1,//分屏 spilt: 1,//分屏
playerIdx:0,//激活播放器 playerIdx: 0,//激活播放器
deviceList: [], //设备列表 deviceList: [], //设备列表
currentDevice: {}, //当前操作设备对象 currentDevice: {}, //当前操作设备对象
videoComponentList: [], videoComponentList: [],
updateLooper: 0, //数据刷新轮训标志 updateLooper: 0, //数据刷新轮训标志
currentDeviceChannelsLenth:0, currentDeviceChannelsLenth: 0,
winHeight: window.innerHeight - 200, winHeight: window.innerHeight - 200,
currentPage:1, currentPage: 1,
count:15, count: 15,
total:0, total: 0,
getDeviceListLoading: false, getDeviceListLoading: false,
//channel //channel
searchSrt: "", searchSrt: "",
channelType: "", channelType: "",
online: "", online: "",
channelTotal:0, channelTotal: 0,
deviceChannelList:[], deviceChannelList: [],
loading:false loading: false
}; };
}, },
mounted() { mounted() {
}, },
created(){ created() {
this.checkPlayByParam() this.checkPlayByParam()
}, },
computed:{ computed: {
liveStyle(){ liveStyle() {
if(this.spilt==1){ if (this.spilt == 1) {
return {width:'100%',height:'100%'} return {width: '100%', height: '100%'}
}else if(this.spilt==4){ } else if (this.spilt == 4) {
return {width:'49%',height:'49%'} return {width: '49%', height: '49%'}
}else if(this.spilt==9){ } else if (this.spilt == 9) {
return {width:'32%',height:'32%'} return {width: '32%', height: '32%'}
} }
} }
}, },
watch:{ watch: {
spilt(newValue){ spilt(newValue) {
console.log("切换画幅;"+newValue) console.log("切换画幅;" + newValue)
let that = this let that = this
for (let i = 1; i <= newValue; i++) { for (let i = 1; i <= newValue; i++) {
if(!that.$refs['player'+i]){ if (!that.$refs['player' + i]) {
continue continue
} }
this.$nextTick(()=>{ this.$nextTick(() => {
if(that.$refs['player'+i] instanceof Array){ if (that.$refs['player' + i] instanceof Array) {
that.$refs['player'+i][0].resize() that.$refs['player' + i][0].resize()
}else { } else {
that.$refs['player'+i].resize() that.$refs['player' + i].resize()
} }
}) })
} }
window.localStorage.setItem('split',newValue) window.localStorage.setItem('split', newValue)
}, },
'$route.fullPath':'checkPlayByParam' '$route.fullPath': 'checkPlayByParam'
}, },
destroyed() { destroyed() {
clearTimeout(this.updateLooper); clearTimeout(this.updateLooper);
@ -112,7 +111,7 @@
methods: { methods: {
destroy(idx) { destroy(idx) {
console.log(idx); console.log(idx);
this.clear(idx.substring(idx.length-1)) this.clear(idx.substring(idx.length - 1))
}, },
clickEvent: function (data) { clickEvent: function (data) {
if (data.channelId && data.subCount == 0) { if (data.channelId && data.subCount == 0) {
@ -124,7 +123,7 @@
}, },
//通知设备上传媒体流 //通知设备上传媒体流
sendDevicePush: function (itemData) { sendDevicePush: function (itemData) {
if(itemData.status===0){ if (itemData.status === 0) {
this.$message.error('设备离线!'); this.$message.error('设备离线!');
return return
} }
@ -132,7 +131,7 @@
let deviceId = itemData.deviceId; let deviceId = itemData.deviceId;
// this.isLoging = true; // this.isLoging = true;
let channelId = itemData.channelId; let channelId = itemData.channelId;
console.log("通知设备推流1：" + deviceId + " : " + channelId ); console.log("通知设备推流1：" + deviceId + " : " + channelId);
let idxTmp = this.playerIdx let idxTmp = this.playerIdx
let that = this; let that = this;
this.loading = true this.loading = true
@ -145,27 +144,27 @@
console.log(res) console.log(res)
if (res.data.code == 0 && res.data.data) { if (res.data.code == 0 && res.data.data) {
itemData.playUrl = res.data.data.httpsFlv itemData.playUrl = res.data.data.httpsFlv
that.setPlayUrl(res.data.data.ws_flv,idxTmp) that.setPlayUrl(res.data.data.ws_flv, idxTmp)
}else { } else {
that.$message.error(res.data.msg); that.$message.error(res.data.msg);
} }
}).catch(function (e) { }).catch(function (e) {
}).finally(()=>{ }).finally(() => {
that.loading = false that.loading = false
}); });
}, },
setPlayUrl(url,idx){ setPlayUrl(url, idx) {
this.$set(this.videoUrl,idx,url) this.$set(this.videoUrl, idx, url)
let _this = this let _this = this
setTimeout(()=>{ setTimeout(() => {
window.localStorage.setItem('videoUrl',JSON.stringify(_this.videoUrl)) window.localStorage.setItem('videoUrl', JSON.stringify(_this.videoUrl))
},100) }, 100)
}, },
checkPlayByParam(){ checkPlayByParam() {
let {deviceId,channelId} = this.$route.query let {deviceId, channelId} = this.$route.query
if(deviceId && channelId){ if (deviceId && channelId) {
this.sendDevicePush({deviceId,channelId}) this.sendDevicePush({deviceId, channelId})
} }
}, },
convertImageToCanvas(image) { convertImageToCanvas(image) {
@ -175,16 +174,16 @@
canvas.getContext("2d").drawImage(image, 0, 0); canvas.getContext("2d").drawImage(image, 0, 0);
return canvas; return canvas;
}, },
shot(e){ shot(e) {
// console.log(e) // console.log(e)
// send({code:'image',data:e}) // send({code:'image',data:e})
var base64ToBlob = function(code) { var base64ToBlob = function (code) {
let parts = code.split(';base64,'); let parts = code.split(';base64,');
let contentType = parts[0].split(':')[1]; let contentType = parts[0].split(':')[1];
let raw = window.atob(parts[1]); let raw = window.atob(parts[1]);
let rawLength = raw.length; let rawLength = raw.length;
let uInt8Array = new Uint8Array(rawLength); let uInt8Array = new Uint8Array(rawLength);
for(let i = 0; i < rawLength; ++i) { for (let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i); uInt8Array[i] = raw.charCodeAt(i);
} }
return new Blob([uInt8Array], { return new Blob([uInt8Array], {
@ -199,72 +198,76 @@
aLink.href = URL.createObjectURL(blob); aLink.href = URL.createObjectURL(blob);
aLink.click(); aLink.click();
}, },
save(item){ save(item) {
let dataStr = window.localStorage.getItem('playData') || '[]' let dataStr = window.localStorage.getItem('playData') || '[]'
let data = JSON.parse(dataStr); let data = JSON.parse(dataStr);
data[this.playerIdx] = item data[this.playerIdx] = item
window.localStorage.setItem('playData',JSON.stringify(data)) window.localStorage.setItem('playData', JSON.stringify(data))
}, },
clear(idx) { clear(idx) {
let dataStr = window.localStorage.getItem('playData') || '[]' let dataStr = window.localStorage.getItem('playData') || '[]'
let data = JSON.parse(dataStr); let data = JSON.parse(dataStr);
data[idx-1] = null; data[idx - 1] = null;
console.log(data); console.log(data);
window.localStorage.setItem('playData',JSON.stringify(data)) window.localStorage.setItem('playData', JSON.stringify(data))
}, },
loadAndPlay(){ loadAndPlay() {
let dataStr = window.localStorage.getItem('playData') || '[]' let dataStr = window.localStorage.getItem('playData') || '[]'
let data = JSON.parse(dataStr); let data = JSON.parse(dataStr);
data.forEach((item,i)=>{ data.forEach((item, i) => {
if(item){ if (item) {
this.playerIdx = i this.playerIdx = i
this.sendDevicePush(item) this.sendDevicePush(item)
} }
}) })
} }
} }
}; };
</script> </script>
<style> <style>
.btn{ .btn {
margin: 0 10px; margin: 0 10px;
} }
.btn:hover{
.btn:hover {
color: #409EFF; color: #409EFF;
} }
.btn.active{
.btn.active {
color: #409EFF; color: #409EFF;
} }
.redborder{
.redborder {
border: 2px solid red !important; border: 2px solid red !important;
} }
.play-box{
.play-box {
background-color: #000000; background-color: #000000;
border: 2px solid #505050; border: 2px solid #505050;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
</style> </style>
<style> <style>
.videoList { .videoList {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-content: flex-start; align-content: flex-start;
} }
.video-item { .video-item {
position: relative; position: relative;
width: 15rem; width: 15rem;
height: 10rem; height: 10rem;
margin-right: 1rem; margin-right: 1rem;
background-color: #000000; background-color: #000000;
} }
.video-item-img { .video-item-img {
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
@ -273,9 +276,9 @@
margin: auto; margin: auto;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.video-item-img:after { .video-item-img:after {
content: ""; content: "";
display: inline-block; display: inline-block;
position: absolute; position: absolute;
@ -290,9 +293,9 @@
background-image: url("../assets/loading.png"); background-image: url("../assets/loading.png");
background-size: cover; background-size: cover;
background-color: #000000; background-color: #000000;
} }
.video-item-title { .video-item-title {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
color: #000000; color: #000000;
@ -300,9 +303,9 @@
line-height: 1.5rem; line-height: 1.5rem;
padding: 0.3rem; padding: 0.3rem;
width: 14.4rem; width: 14.4rem;
} }
.baidumap { .baidumap {
width: 100%; width: 100%;
height: 100%; height: 100%;
border: none; border: none;
@ -312,13 +315,14 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
margin: auto; margin: auto;
} }
/* 去除百度地图版权那行字 和 百度logo */ /* 去除百度地图版权那行字 和 百度logo */
.baidumap > .BMap_cpyCtrl { .baidumap > .BMap_cpyCtrl {
display: none !important; display: none !important;
} }
.baidumap > .anchorBL {
.baidumap > .anchorBL {
display: none !important; display: none !important;
} }
</style> </style>

Write Preview
Loading…
Cancel
Save