视频墙
qiushui
4 years ago
parent
84dd6cbf88
commit
03beee4a1d
@ -0,0 +1,9 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<module type="WEB_MODULE" version="4">
|
||||||
|
<component name="NewModuleRootManager" inherit-compiler-output="true">
|
||||||
|
<exclude-output />
|
||||||
|
<content url="file://$MODULE_DIR$" />
|
||||||
|
<orderEntry type="inheritedJdk" />
|
||||||
|
<orderEntry type="sourceFolder" forTests="false" />
|
||||||
|
</component>
|
||||||
|
</module>
|
||||||
@ -0,0 +1,123 @@
|
|||||||
|
class WebRtcPlayer {
|
||||||
|
static server = '127.0.0.1:8083';
|
||||||
|
webrtc = null;
|
||||||
|
video = null;
|
||||||
|
server = null;
|
||||||
|
codecLink = null;
|
||||||
|
rsdpLink = null;
|
||||||
|
stream = new MediaStream();
|
||||||
|
uuid = null;
|
||||||
|
options={
|
||||||
|
onStatusChange:null
|
||||||
|
};
|
||||||
|
|
||||||
|
constructor(video1, uuid, options={}) {
|
||||||
|
console.log("new uuid:"+uuid)
|
||||||
|
this.server = WebRtcPlayer.server;
|
||||||
|
//this.video = document.getElementById(id);
|
||||||
|
this.video = video1
|
||||||
|
this.uuid = uuid;
|
||||||
|
Object.assign(this.options, options);
|
||||||
|
this.createLinks();
|
||||||
|
this.play();
|
||||||
|
}
|
||||||
|
|
||||||
|
createLinks() {
|
||||||
|
this.codecLink = "//" + this.server + "/stream/codec/" + this.uuid
|
||||||
|
this.rsdpLink = "//" + this.server + "/stream/receiver/" + this.uuid
|
||||||
|
}
|
||||||
|
|
||||||
|
play() {
|
||||||
|
this.webrtc = new RTCPeerConnection({
|
||||||
|
iceServers: [{
|
||||||
|
urls: ["stun:stun.l.google.com:19302"]
|
||||||
|
}]
|
||||||
|
});
|
||||||
|
if(this.webrtc){
|
||||||
|
|
||||||
|
}else{
|
||||||
|
console.log("no")
|
||||||
|
}
|
||||||
|
this.webrtc.onnegotiationneeded = this.handleNegotiationNeeded.bind(this);
|
||||||
|
this.webrtc.ontrack = this.onTrack.bind(this);
|
||||||
|
fetch(this.codecLink)
|
||||||
|
.then((response) => {
|
||||||
|
response.json().then((data) => {
|
||||||
|
data.forEach((item, i) => {
|
||||||
|
this.webrtc.addTransceiver(item.Type, {
|
||||||
|
'direction': 'sendrecv'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.log(error);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.webrtc.onconnectionstatechange = () => {
|
||||||
|
if(this.webrtc.connectionState == 'connected' || this.webrtc.connectionState == 'connecting'){
|
||||||
|
console.log("uuid:"+this.uuid+" status:" + this.webrtc.connectionState)
|
||||||
|
}else{
|
||||||
|
console.log(this.webrtc.connectionState)
|
||||||
|
this.load(this.uuid);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async handleNegotiationNeeded() {
|
||||||
|
let offer = await this.webrtc.createOffer();
|
||||||
|
await this.webrtc.setLocalDescription(offer);
|
||||||
|
let formData = new FormData();
|
||||||
|
formData.append('suuid', this.uuid);
|
||||||
|
formData.append('data', btoa(this.webrtc.localDescription.sdp));
|
||||||
|
fetch(this.rsdpLink, {
|
||||||
|
method: 'POST',
|
||||||
|
body: formData
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
response.text().then((data) => {
|
||||||
|
this.webrtc.setRemoteDescription(new RTCSessionDescription({
|
||||||
|
type: 'answer',
|
||||||
|
sdp: atob(data)
|
||||||
|
}))
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((err) => {})
|
||||||
|
}
|
||||||
|
|
||||||
|
onTrack(event) {
|
||||||
|
this.stream.addTrack(event.track);
|
||||||
|
this.video.srcObject = this.stream;
|
||||||
|
this.video.play();
|
||||||
|
}
|
||||||
|
|
||||||
|
load(uuid) {
|
||||||
|
this.destroy();
|
||||||
|
this.uuid = uuid;
|
||||||
|
this.createLinks();
|
||||||
|
this.play();
|
||||||
|
}
|
||||||
|
|
||||||
|
destroy() {
|
||||||
|
console.log("destroy uuid:"+this.uuid)
|
||||||
|
this.webrtc.close();
|
||||||
|
this.webrtc = null;
|
||||||
|
this.video.srcObject = null;
|
||||||
|
this.stream = new MediaStream();
|
||||||
|
}
|
||||||
|
|
||||||
|
getImageUrl() {
|
||||||
|
let canvas = document.createElement("canvas");
|
||||||
|
canvas.width = this.video.videoWidth;
|
||||||
|
canvas.height = this.video.videoHeight;
|
||||||
|
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
|
||||||
|
let dataURL = canvas.toDataURL();
|
||||||
|
canvas.remove();
|
||||||
|
return dataURL;
|
||||||
|
}
|
||||||
|
|
||||||
|
static setServer(serv) {
|
||||||
|
this.server = serv;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export default WebRtcPlayer;
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB |
@ -1,12 +0,0 @@
|
|||||||
{
|
|
||||||
"program": {
|
|
||||||
"portable": {
|
|
||||||
"pnacl-translate": {
|
|
||||||
"url": "media_player.pexe"
|
|
||||||
},
|
|
||||||
"pnacl-debug": {
|
|
||||||
"url": "media_player_unstripped.bc"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,123 +0,0 @@
|
|||||||
class WebRtcPlayer {
|
|
||||||
static server = '127.0.0.1:8083';
|
|
||||||
webrtc = null;
|
|
||||||
video = null;
|
|
||||||
server = null;
|
|
||||||
codecLink = null;
|
|
||||||
rsdpLink = null;
|
|
||||||
stream = new MediaStream();
|
|
||||||
uuid = null;
|
|
||||||
options={
|
|
||||||
onStatusChange:null
|
|
||||||
};
|
|
||||||
|
|
||||||
constructor(video1, uuid, options={}) {
|
|
||||||
console.log("new uuid:"+uuid)
|
|
||||||
this.server = WebRtcPlayer.server;
|
|
||||||
//this.video = document.getElementById(id);
|
|
||||||
this.video = video1
|
|
||||||
this.uuid = uuid;
|
|
||||||
Object.assign(this.options, options);
|
|
||||||
this.createLinks();
|
|
||||||
this.play();
|
|
||||||
}
|
|
||||||
|
|
||||||
createLinks() {
|
|
||||||
this.codecLink = "//" + this.server + "/stream/codec/" + this.uuid
|
|
||||||
this.rsdpLink = "//" + this.server + "/stream/receiver/" + this.uuid
|
|
||||||
}
|
|
||||||
|
|
||||||
play() {
|
|
||||||
this.webrtc = new RTCPeerConnection({
|
|
||||||
iceServers: [{
|
|
||||||
urls: ["stun:stun.l.google.com:19302"]
|
|
||||||
}]
|
|
||||||
});
|
|
||||||
if(this.webrtc){
|
|
||||||
|
|
||||||
}else{
|
|
||||||
console.log("no")
|
|
||||||
}
|
|
||||||
this.webrtc.onnegotiationneeded = this.handleNegotiationNeeded.bind(this);
|
|
||||||
this.webrtc.ontrack = this.onTrack.bind(this);
|
|
||||||
fetch(this.codecLink)
|
|
||||||
.then((response) => {
|
|
||||||
response.json().then((data) => {
|
|
||||||
data.forEach((item, i) => {
|
|
||||||
this.webrtc.addTransceiver(item.Type, {
|
|
||||||
'direction': 'sendrecv'
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch((error) => {
|
|
||||||
console.log(error);
|
|
||||||
});
|
|
||||||
|
|
||||||
this.webrtc.onconnectionstatechange = () => {
|
|
||||||
if(this.webrtc.connectionState == 'connected' || this.webrtc.connectionState == 'connecting'){
|
|
||||||
console.log("uuid:"+this.uuid+" status:" + this.webrtc.connectionState)
|
|
||||||
}else{
|
|
||||||
console.log(this.webrtc.connectionState)
|
|
||||||
this.load(this.uuid);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async handleNegotiationNeeded() {
|
|
||||||
let offer = await this.webrtc.createOffer();
|
|
||||||
await this.webrtc.setLocalDescription(offer);
|
|
||||||
let formData = new FormData();
|
|
||||||
formData.append('suuid', this.uuid);
|
|
||||||
formData.append('data', btoa(this.webrtc.localDescription.sdp));
|
|
||||||
fetch(this.rsdpLink, {
|
|
||||||
method: 'POST',
|
|
||||||
body: formData
|
|
||||||
})
|
|
||||||
.then((response) => {
|
|
||||||
response.text().then((data) => {
|
|
||||||
this.webrtc.setRemoteDescription(new RTCSessionDescription({
|
|
||||||
type: 'answer',
|
|
||||||
sdp: atob(data)
|
|
||||||
}))
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch((err) => {})
|
|
||||||
}
|
|
||||||
|
|
||||||
onTrack(event) {
|
|
||||||
this.stream.addTrack(event.track);
|
|
||||||
this.video.srcObject = this.stream;
|
|
||||||
this.video.play();
|
|
||||||
}
|
|
||||||
|
|
||||||
load(uuid) {
|
|
||||||
this.destroy();
|
|
||||||
this.uuid = uuid;
|
|
||||||
this.createLinks();
|
|
||||||
this.play();
|
|
||||||
}
|
|
||||||
|
|
||||||
destroy() {
|
|
||||||
console.log("destroy uuid:"+this.uuid)
|
|
||||||
this.webrtc.close();
|
|
||||||
this.webrtc = null;
|
|
||||||
this.video.srcObject = null;
|
|
||||||
this.stream = new MediaStream();
|
|
||||||
}
|
|
||||||
|
|
||||||
getImageUrl() {
|
|
||||||
let canvas = document.createElement("canvas");
|
|
||||||
canvas.width = this.video.videoWidth;
|
|
||||||
canvas.height = this.video.videoHeight;
|
|
||||||
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
|
|
||||||
let dataURL = canvas.toDataURL();
|
|
||||||
canvas.remove();
|
|
||||||
return dataURL;
|
|
||||||
}
|
|
||||||
|
|
||||||
static setServer(serv) {
|
|
||||||
this.server = serv;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
export default WebRtcPlayer;
|
|
||||||
@ -1,123 +0,0 @@
|
|||||||
class WebRtcPlayer {
|
|
||||||
static server = '127.0.0.1:8083';
|
|
||||||
webrtc = null;
|
|
||||||
video = null;
|
|
||||||
server = null;
|
|
||||||
codecLink = null;
|
|
||||||
rsdpLink = null;
|
|
||||||
stream = new MediaStream();
|
|
||||||
uuid = null;
|
|
||||||
options={
|
|
||||||
onStatusChange:null
|
|
||||||
};
|
|
||||||
|
|
||||||
constructor(video1, uuid, options={}) {
|
|
||||||
console.log("new uuid:"+uuid)
|
|
||||||
this.server = WebRtcPlayer.server;
|
|
||||||
//this.video = document.getElementById(id);
|
|
||||||
this.video = video1
|
|
||||||
this.uuid = uuid;
|
|
||||||
Object.assign(this.options, options);
|
|
||||||
this.createLinks();
|
|
||||||
this.play();
|
|
||||||
}
|
|
||||||
|
|
||||||
createLinks() {
|
|
||||||
this.codecLink = "//" + this.server + "/stream/codec/" + this.uuid
|
|
||||||
this.rsdpLink = "//" + this.server + "/stream/receiver/" + this.uuid
|
|
||||||
}
|
|
||||||
|
|
||||||
play() {
|
|
||||||
this.webrtc = new RTCPeerConnection({
|
|
||||||
iceServers: [{
|
|
||||||
urls: ["stun:stun.l.google.com:19302"]
|
|
||||||
}]
|
|
||||||
});
|
|
||||||
if(this.webrtc){
|
|
||||||
|
|
||||||
}else{
|
|
||||||
console.log("no")
|
|
||||||
}
|
|
||||||
this.webrtc.onnegotiationneeded = this.handleNegotiationNeeded.bind(this);
|
|
||||||
this.webrtc.ontrack = this.onTrack.bind(this);
|
|
||||||
fetch(this.codecLink)
|
|
||||||
.then((response) => {
|
|
||||||
response.json().then((data) => {
|
|
||||||
data.forEach((item, i) => {
|
|
||||||
this.webrtc.addTransceiver(item.Type, {
|
|
||||||
'direction': 'sendrecv'
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch((error) => {
|
|
||||||
console.log(error);
|
|
||||||
});
|
|
||||||
|
|
||||||
this.webrtc.onconnectionstatechange = () => {
|
|
||||||
if(this.webrtc.connectionState == 'connected' || this.webrtc.connectionState == 'connecting'){
|
|
||||||
console.log("uuid:"+this.uuid+" status:" + this.webrtc.connectionState)
|
|
||||||
}else{
|
|
||||||
console.log(this.webrtc.connectionState)
|
|
||||||
this.load(this.uuid);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async handleNegotiationNeeded() {
|
|
||||||
let offer = await this.webrtc.createOffer();
|
|
||||||
await this.webrtc.setLocalDescription(offer);
|
|
||||||
let formData = new FormData();
|
|
||||||
formData.append('suuid', this.uuid);
|
|
||||||
formData.append('data', btoa(this.webrtc.localDescription.sdp));
|
|
||||||
fetch(this.rsdpLink, {
|
|
||||||
method: 'POST',
|
|
||||||
body: formData
|
|
||||||
})
|
|
||||||
.then((response) => {
|
|
||||||
response.text().then((data) => {
|
|
||||||
this.webrtc.setRemoteDescription(new RTCSessionDescription({
|
|
||||||
type: 'answer',
|
|
||||||
sdp: atob(data)
|
|
||||||
}))
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch((err) => {})
|
|
||||||
}
|
|
||||||
|
|
||||||
onTrack(event) {
|
|
||||||
this.stream.addTrack(event.track);
|
|
||||||
this.video.srcObject = this.stream;
|
|
||||||
this.video.play();
|
|
||||||
}
|
|
||||||
|
|
||||||
load(uuid) {
|
|
||||||
this.destroy();
|
|
||||||
this.uuid = uuid;
|
|
||||||
this.createLinks();
|
|
||||||
this.play();
|
|
||||||
}
|
|
||||||
|
|
||||||
destroy() {
|
|
||||||
console.log("destroy uuid:"+this.uuid)
|
|
||||||
this.webrtc.close();
|
|
||||||
this.webrtc = null;
|
|
||||||
this.video.srcObject = null;
|
|
||||||
this.stream = new MediaStream();
|
|
||||||
}
|
|
||||||
|
|
||||||
getImageUrl() {
|
|
||||||
let canvas = document.createElement("canvas");
|
|
||||||
canvas.width = this.video.videoWidth;
|
|
||||||
canvas.height = this.video.videoHeight;
|
|
||||||
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
|
|
||||||
let dataURL = canvas.toDataURL();
|
|
||||||
canvas.remove();
|
|
||||||
return dataURL;
|
|
||||||
}
|
|
||||||
|
|
||||||
static setServer(serv) {
|
|
||||||
this.server = serv;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
export default WebRtcPlayer;
|
|
||||||
@ -0,0 +1,192 @@
|
|||||||
|
<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 controls :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
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//watch: {},
|
||||||
|
computed: {
|
||||||
|
videoHeight() {
|
||||||
|
return( this.clientHeight/ this.row ) + 'px';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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.getAllCameras({
|
||||||
|
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 video = document.getElementById(idName);
|
||||||
|
let player = new WebRtcPlayer(video,"camera"+cameras[i].id);
|
||||||
|
player.play('camera'+cameras[i].id);
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}).catch(err => {
|
||||||
|
console.log(err)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
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