蜜雪冰城三个视频墙
yiming
3 years ago
parent
30c65f3dd1
commit
4003a869ee
@ -0,0 +1,203 @@
|
||||
<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-col>
|
||||
</a-row>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import WebRtcPlayer from "../../../public/static/webrtcplayer"
|
||||
export default {
|
||||
name: 'top',
|
||||
components: {},
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default () {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
row : 0,
|
||||
column : 0,
|
||||
a: 0,
|
||||
clientHeight: 0,
|
||||
videoH: 0,
|
||||
isFullscreen: false,
|
||||
originHeight: 0,
|
||||
fullHeight: 0,
|
||||
players: []
|
||||
}
|
||||
},
|
||||
//watch: {},
|
||||
computed: {
|
||||
videoHeight() {
|
||||
return( this.clientHeight/ this.row ) + 'px';
|
||||
}
|
||||
},
|
||||
destroyed() {
|
||||
this.destory()
|
||||
},
|
||||
mounted () {
|
||||
this.getWallStyle();
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.getAllCameras()
|
||||
});
|
||||
let isFullscreen =
|
||||
document.fullscreenElement ||
|
||||
document.mozFullScreenElement ||
|
||||
document.webkitFullscreenElement ||
|
||||
document.fullScreen ||
|
||||
document.mozFullScreen ||
|
||||
document.webkitIsFullScreen;
|
||||
this.isFullscreen = !!isFullscreen;
|
||||
|
||||
let that = this;
|
||||
document.addEventListener("fullscreenchange", () => {
|
||||
that.isFullscreen = !that.isFullscreen;
|
||||
});
|
||||
document.addEventListener("mozfullscreenchange", () => {
|
||||
that.isFullscreen = !that.isFullscreen;
|
||||
});
|
||||
document.addEventListener("webkitfullscreenchange", () => {
|
||||
that.isFullscreen = !that.isFullscreen;
|
||||
});
|
||||
document.addEventListener("msfullscreenchange", () => {
|
||||
that.isFullscreen = !that.isFullscreen;
|
||||
});
|
||||
},
|
||||
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)
|
||||
})
|
||||
},
|
||||
getClientHeight() {
|
||||
this.clientHeight = this.$el.clientHeight-40;
|
||||
|
||||
console.log("clientHeight:"+this.clientHeight)
|
||||
},
|
||||
getAllCameras(){
|
||||
this.$api.httpApi.getAllCameras2({
|
||||
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;
|
||||
}
|
||||
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)
|
||||
})
|
||||
},
|
||||
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
|
||||
//W3C
|
||||
if (docElm.requestFullscreen) {
|
||||
docElm.requestFullscreen()
|
||||
}
|
||||
|
||||
//FireFox
|
||||
else if (docElm.mozRequestFullScreen) {
|
||||
docElm.mozRequestFullScreen()
|
||||
}
|
||||
//Chrome等
|
||||
else if (docElm.webkitRequestFullScreen) {
|
||||
docElm.webkitRequestFullScreen()
|
||||
}
|
||||
//IE11
|
||||
else if (elem.msRequestFullscreen) {
|
||||
elem.msRequestFullscreen()
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.clientHeight = document.body.clientHeight;
|
||||
console.log("full:"+document.body.clientHeight)
|
||||
})
|
||||
|
||||
},
|
||||
//退出全屏
|
||||
exitfullscreen () {
|
||||
console.log("tuichu");
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen()
|
||||
} else if (document.mozCancelFullScreen) {
|
||||
document.mozCancelFullScreen()
|
||||
} else if (document.webkitCancelFullScreen) {
|
||||
document.webkitCancelFullScreen()
|
||||
} else if (document.msExitFullscreen) {
|
||||
document.msExitFullscreen()
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
let origin = sessionStorage.getItem('originHeight');
|
||||
if(origin){
|
||||
this.clientHeight = origin;
|
||||
}else{
|
||||
this.getClientHeight();
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
<style>
|
||||
|
||||
/* #videos > .ant-row {
|
||||
height: calc(100% / 8);
|
||||
}
|
||||
#videos > .ant-row > .ant-col{
|
||||
height: calc(100% / 8);
|
||||
} */
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,203 @@
|
||||
<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-col>
|
||||
</a-row>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import WebRtcPlayer from "../../../public/static/webrtcplayer"
|
||||
export default {
|
||||
name: 'top',
|
||||
components: {},
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default () {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
row : 0,
|
||||
column : 0,
|
||||
a: 0,
|
||||
clientHeight: 0,
|
||||
videoH: 0,
|
||||
isFullscreen: false,
|
||||
originHeight: 0,
|
||||
fullHeight: 0,
|
||||
players: []
|
||||
}
|
||||
},
|
||||
//watch: {},
|
||||
computed: {
|
||||
videoHeight() {
|
||||
return( this.clientHeight/ this.row ) + 'px';
|
||||
}
|
||||
},
|
||||
destroyed() {
|
||||
this.destory()
|
||||
},
|
||||
mounted () {
|
||||
this.getWallStyle();
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.getAllCameras()
|
||||
});
|
||||
let isFullscreen =
|
||||
document.fullscreenElement ||
|
||||
document.mozFullScreenElement ||
|
||||
document.webkitFullscreenElement ||
|
||||
document.fullScreen ||
|
||||
document.mozFullScreen ||
|
||||
document.webkitIsFullScreen;
|
||||
this.isFullscreen = !!isFullscreen;
|
||||
|
||||
let that = this;
|
||||
document.addEventListener("fullscreenchange", () => {
|
||||
that.isFullscreen = !that.isFullscreen;
|
||||
});
|
||||
document.addEventListener("mozfullscreenchange", () => {
|
||||
that.isFullscreen = !that.isFullscreen;
|
||||
});
|
||||
document.addEventListener("webkitfullscreenchange", () => {
|
||||
that.isFullscreen = !that.isFullscreen;
|
||||
});
|
||||
document.addEventListener("msfullscreenchange", () => {
|
||||
that.isFullscreen = !that.isFullscreen;
|
||||
});
|
||||
},
|
||||
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)
|
||||
})
|
||||
},
|
||||
getClientHeight() {
|
||||
this.clientHeight = this.$el.clientHeight-40;
|
||||
|
||||
console.log("clientHeight:"+this.clientHeight)
|
||||
},
|
||||
getAllCameras(){
|
||||
this.$api.httpApi.getAllCameras3({
|
||||
data: {}
|
||||
}).then(res => {
|
||||
if(res.code == 200) {
|
||||
let cameras = res.data;
|
||||
for(let i = 14;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;
|
||||
}
|
||||
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)
|
||||
})
|
||||
},
|
||||
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
|
||||
//W3C
|
||||
if (docElm.requestFullscreen) {
|
||||
docElm.requestFullscreen()
|
||||
}
|
||||
|
||||
//FireFox
|
||||
else if (docElm.mozRequestFullScreen) {
|
||||
docElm.mozRequestFullScreen()
|
||||
}
|
||||
//Chrome等
|
||||
else if (docElm.webkitRequestFullScreen) {
|
||||
docElm.webkitRequestFullScreen()
|
||||
}
|
||||
//IE11
|
||||
else if (elem.msRequestFullscreen) {
|
||||
elem.msRequestFullscreen()
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.clientHeight = document.body.clientHeight;
|
||||
console.log("full:"+document.body.clientHeight)
|
||||
})
|
||||
|
||||
},
|
||||
//退出全屏
|
||||
exitfullscreen () {
|
||||
console.log("tuichu");
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen()
|
||||
} else if (document.mozCancelFullScreen) {
|
||||
document.mozCancelFullScreen()
|
||||
} else if (document.webkitCancelFullScreen) {
|
||||
document.webkitCancelFullScreen()
|
||||
} else if (document.msExitFullscreen) {
|
||||
document.msExitFullscreen()
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
let origin = sessionStorage.getItem('originHeight');
|
||||
if(origin){
|
||||
this.clientHeight = origin;
|
||||
}else{
|
||||
this.getClientHeight();
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
<style>
|
||||
|
||||
/* #videos > .ant-row {
|
||||
height: calc(100% / 8);
|
||||
}
|
||||
#videos > .ant-row > .ant-col{
|
||||
height: calc(100% / 8);
|
||||
} */
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue