|
|
|
@ -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,297 +28,268 @@ |
|
|
|
</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 { |
|
|
|
videoUrl: [''], |
|
|
|
spilt: 1,//分屏 |
|
|
|
playerIdx: 0,//激活播放器 |
|
|
|
|
|
|
|
deviceList: [], //设备列表 |
|
|
|
currentDevice: {}, //当前操作设备对象 |
|
|
|
updateLooper: 0, //数据刷新轮训标志 |
|
|
|
count: 15, |
|
|
|
total: 0, |
|
|
|
|
|
|
|
videoComponentList: [], |
|
|
|
updateLooper: 0, //数据刷新轮训标志 |
|
|
|
currentDeviceChannelsLenth:0, |
|
|
|
winHeight: window.innerHeight - 200, |
|
|
|
currentPage:1, |
|
|
|
count:15, |
|
|
|
total:0, |
|
|
|
getDeviceListLoading: false, |
|
|
|
//channel |
|
|
|
loading: false |
|
|
|
}; |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
|
|
|
|
//channel |
|
|
|
searchSrt: "", |
|
|
|
channelType: "", |
|
|
|
online: "", |
|
|
|
channelTotal:0, |
|
|
|
deviceChannelList:[], |
|
|
|
loading:false |
|
|
|
}; |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.initData(); |
|
|
|
}, |
|
|
|
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%'} |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
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() |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
} |
|
|
|
window.localStorage.setItem('split', newValue) |
|
|
|
}, |
|
|
|
created(){ |
|
|
|
this.checkPlayByParam() |
|
|
|
'$route.fullPath': 'checkPlayByParam' |
|
|
|
}, |
|
|
|
destroyed() { |
|
|
|
clearTimeout(this.updateLooper); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
destroy(idx) { |
|
|
|
console.log(idx); |
|
|
|
this.clear(idx.substring(idx.length - 1)) |
|
|
|
}, |
|
|
|
|
|
|
|
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%'} |
|
|
|
} |
|
|
|
clickEvent: function (data) { |
|
|
|
if (data.channelId && data.subCount == 0) { |
|
|
|
this.sendDevicePush(data) |
|
|
|
} |
|
|
|
}, |
|
|
|
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() |
|
|
|
} |
|
|
|
}) |
|
|
|
contextMenuEvent: function (data) { |
|
|
|
|
|
|
|
} |
|
|
|
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)) |
|
|
|
}, |
|
|
|
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}) |
|
|
|
} |
|
|
|
}, |
|
|
|
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) |
|
|
|
|
|
|
|
}, |
|
|
|
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); |
|
|
|
} |
|
|
|
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) |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
}; |
|
|
|
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)) |
|
|
|
}, |
|
|
|
} |
|
|
|
}; |
|
|
|
</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> |
|
|
|
|
648540858
3 years ago