<template>
    <div>
        <div id="playerBox"></div>
        <div class="msgbox" v-if="showInfo">{{message}}</div>
    </div>
</template>

<script>
    // import JSMpeg from './jsmpeg.min'
    import JSMpeg from '@cycjimmy/jsmpeg-player'
    export default {
        name: "index",
        props:["rtspData"],
        data(){
            return {
                player:null,
                playerBox:null,
                showInfo:false,
                message:'',
                ws:'ws://183.129.98.135:8088/'// 后期会动态生成
            }
        },
        watch: {
            rtspData: {
                handler(nv, ov) {
                    console.log("新值1->", nv);
                    if (
                        nv != null &&
                        nv.rtsp &&
                        /rtsp:\/\/.+/.test(nv.rtsp)
                    ) {
                        this.play()
                    }
                },
                deep:true
            }
        },
        mounted() {
            this.playerBox = this.$refs.playerBox
            console.log(this.$refs.playerBox)
        },
        destroyed() {
            this.stop()
        },
        methods:{
            play(){
                this.stop()
                let url = this.ws+"?rtsp="+encodeURIComponent(this.rtspData.rtsp.trim())+'&videoSize='+this.rtspData.videoSize.trim()
                console.log(url)
                this.player = new JSMpeg.VideoElement('#playerBox',url)//new JSMpeg.Player(url,{canvas:document.getElementById('playerBox')})
                this.player.play()
            },
            stop(){
                if(this.player){
                    this.player.stop()
                    this.player.destroy()
                }
            },
            showMsg(msg){
                this.message = msg
                this.showInfo=true
            },
            hideMsg(){
                this.showInfo=false
            }
        }
    }
</script>

<style scoped>
    .msgbox{
        z-index: 100000;
    }
</style>