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`',
meta: {
icon: 'desktop',
name: '视频墙1'
name: '视频墙'
},
component: () => import('@/views/videoWall/index'),
},
{
path: 'videoWall2',
name: 'videoWall2',
meta: {
icon: 'desktop',
name: '视频墙2'
},
component: () => import('@/views/videoWall2/index'),
},
{
path: 'videoWall3',
name: 'videoWall3',
meta: {
icon: 'desktop',
name: '视频墙3'
},
component: () => import('@/views/videoWall3/index'),
},
// {
// path: 'videoWall2',
// name: 'videoWall2',
// meta: {
// icon: 'desktop',
// name: '视频墙2'
// },
// component: () => import('@/views/videoWall2/index'),
// },
// {
// path: 'videoWall3',
// name: 'videoWall3',
// meta: {
// icon: 'desktop',
// name: '视频墙3'
// },
// component: () => import('@/views/videoWall3/index'),
// },
{
path: 'realTimeMonitoring',
name: 'realTimeMonitoring',

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

@ -1,57 +1,104 @@
<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-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>
</a-tab-pane>
</a-tabs>
</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()
this.playPageCameras();
});
let isFullscreen =
document.fullscreenElement ||
@ -77,127 +124,217 @@ export default {
});
},
methods: {
getWallStyle(){
this.$api.httpApi.getWallStyle({
data: {}
}).then(res => {
if(res.code == 200) {
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)
sessionStorage.setItem(
"originHeight",
this.clientHeight
);
}
}).catch(err => {
console.log(err)
})
.catch((err) => {
console.log(err);
});
},
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(){
this.$api.httpApi.getAllCameras1({
data: {}
}).then(res => {
if(res.code == 200) {
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
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){
if (columnIndex == 0) {
columnIndex = this.column;
}
let idName = rowIndex + "-" + columnIndex;
console.log("idName:"+idName);
let server = cameras[i-1].rtcServer+":"+ cameras[i-1].rtcServerPort
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);
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()
//一页个数
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();
},
full () {
if(this.isFullscreen){
this.exitfullscreen()
}else{
this.enterfullscreen()
playPageCameras() {
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);
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 () { //进入全屏
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>
Write Preview
Loading…
Cancel
Save