|
|
|
|
@ -1,58 +1,108 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div id="videos">
|
|
|
|
|
|
|
|
|
|
<a-button type="primary" @click="full" v-if="!isFullscreen"> 全屏<a-icon type="right" /> </a-button>
|
|
|
|
|
<a-button type="primary" @click="full" v-if="isFullscreen"><a-icon type="left" /> 退出全屏 </a-button>
|
|
|
|
|
<a-row v-for='rowIndex in row' :key='rowIndex'>
|
|
|
|
|
<a-col v-for='colIndex in column' :key='colIndex' :span="24/column" :style="{height: videoHeight}" >
|
|
|
|
|
<video class="camera" :id="rowIndex+'-'+colIndex" autoplay muted :style="{'height': '100%',width:'100%','object-fit':'fill'}" ></video>
|
|
|
|
|
|
|
|
|
|
<a-button
|
|
|
|
|
type="primary"
|
|
|
|
|
@click="full"
|
|
|
|
|
v-if="!isFullscreen"
|
|
|
|
|
> 全屏<a-icon type="right" /> </a-button>
|
|
|
|
|
<a-button
|
|
|
|
|
type="primary"
|
|
|
|
|
@click="full"
|
|
|
|
|
v-if="isFullscreen"
|
|
|
|
|
><a-icon type="left" /> 退出全屏 </a-button>
|
|
|
|
|
|
|
|
|
|
<a-button
|
|
|
|
|
type="primary"
|
|
|
|
|
@click="countVideo(2)"
|
|
|
|
|
> <a-icon type="appstore" /></a-button>
|
|
|
|
|
<a-button
|
|
|
|
|
type="primary"
|
|
|
|
|
@click="countVideo(3)"
|
|
|
|
|
> <a-icon type="number" /></a-button>
|
|
|
|
|
|
|
|
|
|
<a-tabs
|
|
|
|
|
:activeKey="activeKey"
|
|
|
|
|
default-active-key="1"
|
|
|
|
|
@edit="onEdit"
|
|
|
|
|
@change="onTabClick"
|
|
|
|
|
>
|
|
|
|
|
<a-tab-pane
|
|
|
|
|
v-for="pane in panes"
|
|
|
|
|
:key="pane.key"
|
|
|
|
|
:tab="pane.title"
|
|
|
|
|
>
|
|
|
|
|
|
|
|
|
|
</a-tab-pane>
|
|
|
|
|
</a-tabs>
|
|
|
|
|
|
|
|
|
|
<a-row
|
|
|
|
|
v-for='rowIndex in row'
|
|
|
|
|
:key='rowIndex'
|
|
|
|
|
>
|
|
|
|
|
<a-col
|
|
|
|
|
v-for='colIndex in column'
|
|
|
|
|
:key='colIndex'
|
|
|
|
|
:span="24/column"
|
|
|
|
|
:style="{height: videoHeight}"
|
|
|
|
|
>
|
|
|
|
|
<video
|
|
|
|
|
class="camera"
|
|
|
|
|
:id="rowIndex+'-'+colIndex"
|
|
|
|
|
autoplay
|
|
|
|
|
muted
|
|
|
|
|
:style="{'height': '100%',width:'100%','object-fit':'fill'}"
|
|
|
|
|
></video>
|
|
|
|
|
</a-col>
|
|
|
|
|
</a-row>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import WebRtcPlayer from "../../../public/static/webrtcplayer"
|
|
|
|
|
import WebRtcPlayer from "../../../public/static/webrtcplayer";
|
|
|
|
|
export default {
|
|
|
|
|
name: 'top',
|
|
|
|
|
name: "top",
|
|
|
|
|
components: {},
|
|
|
|
|
props: {
|
|
|
|
|
id: {
|
|
|
|
|
type: String,
|
|
|
|
|
default () {
|
|
|
|
|
return ''
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
default() {
|
|
|
|
|
return "";
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
data () {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
row : 0,
|
|
|
|
|
column : 0,
|
|
|
|
|
row: 0,
|
|
|
|
|
column: 0,
|
|
|
|
|
a: 0,
|
|
|
|
|
clientHeight: 0,
|
|
|
|
|
panes: [],
|
|
|
|
|
activeKey: 0, //当前页，当前页id，从零开始
|
|
|
|
|
videoH: 0,
|
|
|
|
|
isFullscreen: false,
|
|
|
|
|
originHeight: 0,
|
|
|
|
|
fullHeight: 0,
|
|
|
|
|
players: []
|
|
|
|
|
}
|
|
|
|
|
players: [],
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
//watch: {},
|
|
|
|
|
computed: {
|
|
|
|
|
videoHeight() {
|
|
|
|
|
return( this.clientHeight/ this.row ) + 'px';
|
|
|
|
|
}
|
|
|
|
|
return (this.clientHeight / this.row )+ "px";
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
destroyed() {
|
|
|
|
|
this.destory()
|
|
|
|
|
this.destory();
|
|
|
|
|
},
|
|
|
|
|
mounted () {
|
|
|
|
|
mounted() {
|
|
|
|
|
this.getWallStyle();
|
|
|
|
|
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
this.getAllCameras()
|
|
|
|
|
console.log("DOM已更新完成");
|
|
|
|
|
|
|
|
|
|
this.playPageCameras();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
let isFullscreen =
|
|
|
|
|
document.fullscreenElement ||
|
|
|
|
|
document.mozFullScreenElement ||
|
|
|
|
|
@ -61,7 +111,7 @@ export default {
|
|
|
|
|
document.mozFullScreen ||
|
|
|
|
|
document.webkitIsFullScreen;
|
|
|
|
|
this.isFullscreen = !!isFullscreen;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let that = this;
|
|
|
|
|
document.addEventListener("fullscreenchange", () => {
|
|
|
|
|
that.isFullscreen = !that.isFullscreen;
|
|
|
|
|
@ -76,128 +126,190 @@ export default {
|
|
|
|
|
that.isFullscreen = !that.isFullscreen;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
updated() {},
|
|
|
|
|
methods: {
|
|
|
|
|
|
|
|
|
|
getWallStyle(){
|
|
|
|
|
this.$api.httpApi.getWallStyle({
|
|
|
|
|
data: {}
|
|
|
|
|
}).then(res => {
|
|
|
|
|
if(res.code == 200) {
|
|
|
|
|
this.row = res.data[0];
|
|
|
|
|
this.column = res.data[1];
|
|
|
|
|
this.getClientHeight();
|
|
|
|
|
sessionStorage.setItem('originHeight', this.clientHeight)
|
|
|
|
|
}
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
console.log(err)
|
|
|
|
|
})
|
|
|
|
|
getWallStyle() {
|
|
|
|
|
this.$api.httpApi
|
|
|
|
|
.getWallStyle({
|
|
|
|
|
data: {},
|
|
|
|
|
})
|
|
|
|
|
.then((res) => {
|
|
|
|
|
if (res.code == 200) {
|
|
|
|
|
this.row = res.data[0];
|
|
|
|
|
this.column = res.data[1];
|
|
|
|
|
this.getClientHeight();
|
|
|
|
|
sessionStorage.setItem(
|
|
|
|
|
"originHeight",
|
|
|
|
|
this.clientHeight
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.catch((err) => {
|
|
|
|
|
console.log(err);
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
getClientHeight() {
|
|
|
|
|
this.clientHeight = this.$el.clientHeight-40;
|
|
|
|
|
|
|
|
|
|
console.log("clientHeight:"+this.clientHeight)
|
|
|
|
|
this.clientHeight = this.$el.clientHeight - 40;
|
|
|
|
|
|
|
|
|
|
console.log("clientHeight:" + this.clientHeight);
|
|
|
|
|
},
|
|
|
|
|
getAllCameras(){
|
|
|
|
|
this.$api.httpApi.getAllCameras1({
|
|
|
|
|
data: {}
|
|
|
|
|
}).then(res => {
|
|
|
|
|
if(res.code == 200) {
|
|
|
|
|
let cameras = res.data;
|
|
|
|
|
for(let i = 1;i<=cameras.length;i++){
|
|
|
|
|
let rowIndex = Math.floor((i-1) / this.column) + 1;
|
|
|
|
|
if(rowIndex > this.row){
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
let columnIndex = i % this.column;
|
|
|
|
|
if(columnIndex == 0){
|
|
|
|
|
columnIndex = this.column;
|
|
|
|
|
onEdit(targetKey, action) {
|
|
|
|
|
const index = this.panes.findIndex(
|
|
|
|
|
(pane) => pane.key === targetKey
|
|
|
|
|
);
|
|
|
|
|
if (index !== -1) {
|
|
|
|
|
this.panes.splice(index, 1);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
//一页个数
|
|
|
|
|
countVideo(i) {
|
|
|
|
|
this.row = i;
|
|
|
|
|
this.column = i;
|
|
|
|
|
|
|
|
|
|
this.activeKey = 0;
|
|
|
|
|
this.playPageCameras();
|
|
|
|
|
},
|
|
|
|
|
//墙信息
|
|
|
|
|
pageInfo(cameras) {
|
|
|
|
|
var page = Math.ceil(cameras.length / (this.row * this.column));
|
|
|
|
|
this.panes = [];
|
|
|
|
|
for (var i = 1; i <= page; i++) {
|
|
|
|
|
this.panes.push({
|
|
|
|
|
title: "视频墙 " + i,
|
|
|
|
|
content: "Content of Tab " + i,
|
|
|
|
|
key: i - 1,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
changeTab(key) {
|
|
|
|
|
console.log(key);
|
|
|
|
|
},
|
|
|
|
|
onTabClick(key) {
|
|
|
|
|
this.destory();
|
|
|
|
|
|
|
|
|
|
console.log(key);
|
|
|
|
|
this.activeKey = key;
|
|
|
|
|
this.playPageCameras();
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
playPageCameras() {
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
this.$api.httpApi
|
|
|
|
|
.getAllCameras({
|
|
|
|
|
data: {},
|
|
|
|
|
})
|
|
|
|
|
.then((res) => {
|
|
|
|
|
if (res.code == 200) {
|
|
|
|
|
let cameras = res.data;
|
|
|
|
|
this.pageInfo(cameras);
|
|
|
|
|
var pageSize = this.row * this.column;
|
|
|
|
|
var camerasPage = cameras.slice(
|
|
|
|
|
this.activeKey * pageSize,
|
|
|
|
|
(this.activeKey + 1) * pageSize
|
|
|
|
|
);
|
|
|
|
|
console.log(camerasPage);
|
|
|
|
|
this.players = [];
|
|
|
|
|
for (let i = 1; i <= camerasPage.length; i++) {
|
|
|
|
|
let rowIndex =
|
|
|
|
|
Math.floor((i - 1) / this.column) + 1;
|
|
|
|
|
if (rowIndex > this.row) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
let columnIndex = i % this.column;
|
|
|
|
|
if (columnIndex == 0) {
|
|
|
|
|
columnIndex = this.column;
|
|
|
|
|
}
|
|
|
|
|
let idName = rowIndex + "-" + columnIndex;
|
|
|
|
|
console.log("idName:" + idName);
|
|
|
|
|
let server =
|
|
|
|
|
camerasPage[i - 1].rtcServer +
|
|
|
|
|
":" +
|
|
|
|
|
camerasPage[i - 1].rtcServerPort;
|
|
|
|
|
let video = document.getElementById(idName);
|
|
|
|
|
console.log(video);
|
|
|
|
|
let player = new WebRtcPlayer(
|
|
|
|
|
server,
|
|
|
|
|
video,
|
|
|
|
|
"camera" + camerasPage[i - 1].id
|
|
|
|
|
);
|
|
|
|
|
this.players.push(player);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
let idName = rowIndex + "-" + columnIndex;
|
|
|
|
|
console.log("idName:"+idName);
|
|
|
|
|
let server = cameras[i-1].rtcServer+":"+ cameras[i-1].rtcServerPort
|
|
|
|
|
let video = document.getElementById(idName);
|
|
|
|
|
let player = new WebRtcPlayer(server,video,"camera"+cameras[i-1].id);
|
|
|
|
|
this.players.push(player);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
console.log(err)
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
.catch((err) => {
|
|
|
|
|
console.log(err);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
destory(){
|
|
|
|
|
for(let player of this.players){
|
|
|
|
|
console.log("stop")
|
|
|
|
|
player.destroy()
|
|
|
|
|
destory() {
|
|
|
|
|
for (let player of this.players) {
|
|
|
|
|
console.log("stop");
|
|
|
|
|
player.destroy();
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
full () {
|
|
|
|
|
if(this.isFullscreen){
|
|
|
|
|
this.exitfullscreen()
|
|
|
|
|
}else{
|
|
|
|
|
this.enterfullscreen()
|
|
|
|
|
|
|
|
|
|
full() {
|
|
|
|
|
if (this.isFullscreen) {
|
|
|
|
|
this.exitfullscreen();
|
|
|
|
|
} else {
|
|
|
|
|
this.enterfullscreen();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
//控制全屏
|
|
|
|
|
enterfullscreen () { //进入全屏
|
|
|
|
|
var docElm = document.getElementById('videos') // 指定容器id
|
|
|
|
|
enterfullscreen() {
|
|
|
|
|
//进入全屏
|
|
|
|
|
var docElm = document.getElementById("videos"); // 指定容器id
|
|
|
|
|
//W3C
|
|
|
|
|
if (docElm.requestFullscreen) {
|
|
|
|
|
docElm.requestFullscreen()
|
|
|
|
|
docElm.requestFullscreen();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//FireFox
|
|
|
|
|
else if (docElm.mozRequestFullScreen) {
|
|
|
|
|
docElm.mozRequestFullScreen()
|
|
|
|
|
docElm.mozRequestFullScreen();
|
|
|
|
|
}
|
|
|
|
|
//Chrome等
|
|
|
|
|
else if (docElm.webkitRequestFullScreen) {
|
|
|
|
|
docElm.webkitRequestFullScreen()
|
|
|
|
|
docElm.webkitRequestFullScreen();
|
|
|
|
|
}
|
|
|
|
|
//IE11
|
|
|
|
|
else if (elem.msRequestFullscreen) {
|
|
|
|
|
elem.msRequestFullscreen()
|
|
|
|
|
elem.msRequestFullscreen();
|
|
|
|
|
}
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
this.clientHeight = document.body.clientHeight;
|
|
|
|
|
console.log("full:"+document.body.clientHeight)
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
console.log("full:" + document.body.clientHeight);
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
//退出全屏
|
|
|
|
|
exitfullscreen () {
|
|
|
|
|
exitfullscreen() {
|
|
|
|
|
console.log("tuichu");
|
|
|
|
|
if (document.exitFullscreen) {
|
|
|
|
|
document.exitFullscreen()
|
|
|
|
|
document.exitFullscreen();
|
|
|
|
|
} else if (document.mozCancelFullScreen) {
|
|
|
|
|
document.mozCancelFullScreen()
|
|
|
|
|
document.mozCancelFullScreen();
|
|
|
|
|
} else if (document.webkitCancelFullScreen) {
|
|
|
|
|
document.webkitCancelFullScreen()
|
|
|
|
|
document.webkitCancelFullScreen();
|
|
|
|
|
} else if (document.msExitFullscreen) {
|
|
|
|
|
document.msExitFullscreen()
|
|
|
|
|
document.msExitFullscreen();
|
|
|
|
|
}
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
let origin = sessionStorage.getItem('originHeight');
|
|
|
|
|
if(origin){
|
|
|
|
|
let origin = sessionStorage.getItem("originHeight");
|
|
|
|
|
if (origin) {
|
|
|
|
|
this.clientHeight = origin;
|
|
|
|
|
}else{
|
|
|
|
|
} else {
|
|
|
|
|
this.getClientHeight();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style>
|
|
|
|
|
|
|
|
|
|
/* #videos > .ant-row {
|
|
|
|
|
/* #videos > .ant-row {
|
|
|
|
|
height: calc(100% / 8);
|
|
|
|
|
}
|
|
|
|
|
#videos > .ant-row > .ant-col{
|
|
|
|
|
height: calc(100% / 8);
|
|
|
|
|
} */
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
</style>
|
LAPTOP-S9HJSOEB\昊天
1 year ago