duoji-frontend/src/views/videoWall/index.vue

<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) {
                    //焦作蜜雪冰城第一页8个球机2，3页四个
                    this.row = 2;
                    this.column = 4;
                    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.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;
                        }
                        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>