upright
/
duoji-frontend
mirror of https://gitlab.hzleaper.com:81/duoji/duoji-frontend.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

视频墙采用单墙模式

Browse Source
bozhou-古井贡酒
LAPTOP-S9HJSOEB\昊天 2 years ago
parent 49f2a3f703
commit 657fba01ca
2 changed files with 260 additions and 123 deletions
Show Stats Download Patch File Download Diff File

38
src/router/index.js
Unescape Escape View File

@ -34,28 +34,28 @@ const routes = [{
name: 'videoWall1`', name: 'videoWall1`',
meta: { meta: {
icon: 'desktop', icon: 'desktop',
name: '视频墙1' name: '视频墙'
}, },
component: () => import('@/views/videoWall/index'), component: () => import('@/views/videoWall/index'),
}, },
{ // {
path: 'videoWall2', // path: 'videoWall2',
name: 'videoWall2', // name: 'videoWall2',
meta: { // meta: {
icon: 'desktop', // icon: 'desktop',
name: '视频墙2' // name: '视频墙2'
}, // },
component: () => import('@/views/videoWall2/index'), // component: () => import('@/views/videoWall2/index'),
}, // },
{ // {
path: 'videoWall3', // path: 'videoWall3',
name: 'videoWall3', // name: 'videoWall3',
meta: { // meta: {
icon: 'desktop', // icon: 'desktop',
name: '视频墙3' // name: '视频墙3'
}, // },
component: () => import('@/views/videoWall3/index'), // component: () => import('@/views/videoWall3/index'),
}, // },
{ {
path: 'realTimeMonitoring', path: 'realTimeMonitoring',
name: 'realTimeMonitoring', name: 'realTimeMonitoring',

303
src/views/videoWall/index.vue
Unescape Escape View File

@ -1,57 +1,104 @@
<template> <template>
<div id="videos"> <div id="videos">
<a-button type="primary" @click="full" v-if="!isFullscreen"> 全屏<a-icon type="right" /> </a-button> <a-button
<a-button type="primary" @click="full" v-if="isFullscreen"><a-icon type="left" /> 退出全屏 </a-button> type="primary"
<a-row v-for='rowIndex in row' :key='rowIndex'> @click="full"
<a-col v-for='colIndex in column' :key='colIndex' :span="24/column" :style="{height: videoHeight}" > v-if="!isFullscreen"
<video class="camera" :id="rowIndex+'-'+colIndex" autoplay muted :style="{'height': '100%',width:'100%','object-fit':'fill'}" ></video> > 全屏<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-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-col>
</a-row> </a-row>
</a-tab-pane>
</a-tabs>
</div> </div>
</template> </template>
<script> <script>
import WebRtcPlayer from "../../../public/static/webrtcplayer" import WebRtcPlayer from "../../../public/static/webrtcplayer";
export default { export default {
name: 'top', name: "top",
components: {}, components: {},
props: { props: {
id: { id: {
type: String, type: String,
default () { default() {
return '' return "";
}
}
}, },
data () { },
},
data() {
return { return {
row : 0, row: 0,
column : 0, column: 0,
a: 0, a: 0,
clientHeight: 0, clientHeight: 0,
panes: [ ],
activeKey: 0,//当前页，当前页id，从零开始
videoH: 0, videoH: 0,
isFullscreen: false, isFullscreen: false,
originHeight: 0, originHeight: 0,
fullHeight: 0, fullHeight: 0,
players: [] players: [],
} };
}, },
//watch: {}, //watch: {},
computed: { computed: {
videoHeight() { videoHeight() {
return( this.clientHeight/ this.row ) + 'px'; return this.clientHeight / this.row + "px";
} },
}, },
destroyed() { destroyed() {
this.destory() this.destory();
}, },
mounted () { mounted() {
this.getWallStyle(); this.getWallStyle();
this.$nextTick(() => { this.$nextTick(() => {
this.getAllCameras() this.playPageCameras();
}); });
let isFullscreen = let isFullscreen =
document.fullscreenElement || document.fullscreenElement ||
@ -77,127 +124,217 @@ export default {
}); });
}, },
methods: { methods: {
getWallStyle() {
getWallStyle(){ this.$api.httpApi
this.$api.httpApi.getWallStyle({ .getWallStyle({
data: {} data: {},
}).then(res => { })
if(res.code == 200) { .then((res) => {
if (res.code == 200) {
this.row = res.data[0]; this.row = res.data[0];
this.column = res.data[1]; this.column = res.data[1];
this.getClientHeight(); this.getClientHeight();
sessionStorage.setItem('originHeight', this.clientHeight) sessionStorage.setItem(
"originHeight",
this.clientHeight
);
} }
}).catch(err => {
console.log(err)
}) })
.catch((err) => {
console.log(err);
});
}, },
getClientHeight() { getClientHeight() {
this.clientHeight = this.$el.clientHeight-40; this.clientHeight = this.$el.clientHeight - 40;
console.log("clientHeight:"+this.clientHeight) console.log("clientHeight:" + this.clientHeight);
},
onEdit(targetKey, action) {
const index = this.panes.findIndex((pane) => pane.key === targetKey);
if (index !== -1) {
this.panes.splice(index, 1);
}
}, },
getAllCameras(){ getAllCameras() {
this.$api.httpApi.getAllCameras1({ this.$api.httpApi
data: {} .getAllCameras1({
}).then(res => { data: {},
if(res.code == 200) { })
.then((res) => {
if (res.code == 200) {
let cameras = res.data; let cameras = res.data;
for(let i = 1;i<=cameras.length;i++){ for (let i = 1; i <= cameras.length; i++) {
let rowIndex = Math.floor((i-1) / this.column) + 1; let rowIndex =
if(rowIndex > this.row){ Math.floor((i - 1) / this.column) + 1;
return if (rowIndex > this.row) {
return;
} }
let columnIndex = i % this.column; let columnIndex = i % this.column;
if(columnIndex == 0){ if (columnIndex == 0) {
columnIndex = this.column; columnIndex = this.column;
} }
let idName = rowIndex + "-" + columnIndex; let idName = rowIndex + "-" + columnIndex;
console.log("idName:"+idName); console.log("idName:" + idName);
let server = cameras[i-1].rtcServer+":"+ cameras[i-1].rtcServerPort let server =
cameras[i - 1].rtcServer +
":" +
cameras[i - 1].rtcServerPort;
let video = document.getElementById(idName); let video = document.getElementById(idName);
let player = new WebRtcPlayer(server,video,"camera"+cameras[i-1].id); let player = new WebRtcPlayer(
server,
video,
"camera" + cameras[i - 1].id
);
this.players.push(player); this.players.push(player);
} }
} }
}).catch(err => {
console.log(err)
}) })
.catch((err) => {
console.log(err);
});
}, },
destory(){ //一页个数
for(let player of this.players){ countVideo(i){
console.log("stop")
player.destroy() 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();
},
full () { playPageCameras() {
if(this.isFullscreen){
this.exitfullscreen() this.$api.httpApi
}else{ .getAllCameras({
this.enterfullscreen() 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);
let player = new WebRtcPlayer(
server,
video,
"camera" + camerasPage[i - 1].id
);
this.players.push(player);
}
}
})
.catch((err) => {
console.log(err);
});
},
destory() {
for (let player of this.players) {
console.log("stop");
player.destroy();
}
},
full() {
if (this.isFullscreen) {
this.exitfullscreen();
} else {
this.enterfullscreen();
}
}, },
//控制全屏 //控制全屏
enterfullscreen () { //进入全屏 enterfullscreen() {
var docElm = document.getElementById('videos') // 指定容器id //进入全屏
var docElm = document.getElementById("videos"); // 指定容器id
//W3C //W3C
if (docElm.requestFullscreen) { if (docElm.requestFullscreen) {
docElm.requestFullscreen() docElm.requestFullscreen();
} }
//FireFox //FireFox
else if (docElm.mozRequestFullScreen) { else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen() docElm.mozRequestFullScreen();
} }
//Chrome等 //Chrome等
else if (docElm.webkitRequestFullScreen) { else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen() docElm.webkitRequestFullScreen();
} }
//IE11 //IE11
else if (elem.msRequestFullscreen) { else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen() elem.msRequestFullscreen();
} }
this.$nextTick(() => { this.$nextTick(() => {
this.clientHeight = document.body.clientHeight; this.clientHeight = document.body.clientHeight;
console.log("full:"+document.body.clientHeight) console.log("full:" + document.body.clientHeight);
}) });
}, },
//退出全屏 //退出全屏
exitfullscreen () { exitfullscreen() {
console.log("tuichu"); console.log("tuichu");
if (document.exitFullscreen) { if (document.exitFullscreen) {
document.exitFullscreen() document.exitFullscreen();
} else if (document.mozCancelFullScreen) { } else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen() document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) { } else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen() document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) { } else if (document.msExitFullscreen) {
document.msExitFullscreen() document.msExitFullscreen();
} }
this.$nextTick(() => { this.$nextTick(() => {
let origin = sessionStorage.getItem('originHeight'); let origin = sessionStorage.getItem("originHeight");
if(origin){ if (origin) {
this.clientHeight = origin; this.clientHeight = origin;
}else{ } else {
this.getClientHeight(); this.getClientHeight();
} }
});
}) },
} },
} };
}
</script> </script>
<style> <style>
/* #videos > .ant-row {
/* #videos > .ant-row {
height: calc(100% / 8); height: calc(100% / 8);
} }
#videos > .ant-row > .ant-col{ #videos > .ant-row > .ant-col{
height: calc(100% / 8); height: calc(100% / 8);
} */ } */
</style>
</style>
Write Preview
Loading…
Cancel
Save