huimv.cloud.client/src/views/common/rtsp-player/index.vue

<template>
    <div>
        <video id="video" style="width: 100%"></video>
        <canvas id="canvas" style="display: none"></canvas>
        <canvas id="draw"  style="display: none"></canvas>
    </div>
</template>

<script>
    import Player from './libs/player'

    export default {
        name: "index",
        props:['rtspData'],
        data(){
            return{
                options:{
                    video:null,
                    canvas: null,
                    drawer: null,
                    wsUrl:null,
                    rtspUrl:null
                },
                player:null
            }
        },
        watch:{
            'rtspData': {
                handler(nv,ov){
                    console.log('新值1->',nv)
                    if(nv != null && nv.rtsp && nv.ws && /rtsp:\/\/.+/.test(nv.rtsp) && /ws:\/\/.+/.test(nv.ws)){
                        console.log('新值2->',nv)
                        this.options.wsUrl = nv.ws
                        this.options.rtspUrl = nv.rtsp

                        if(this.options.video && this.options.wsUrl && this.options.rtspUrl) {
                            console.log('---watch player---')
                            this.createPlayer()
                        }
                    }
                },
                immediate:true
            }
        },
        mounted() {
            console.log('--mounted--')
            this.options.video = document.getElementById('video')
            this.options.canvas = document.getElementById('canvas')
            this.options.drawer = document.getElementById('draw')
            //this.player.connect()
            if(this.options.rtspUrl && this.options.wsUrl){
                console.log('---mounted player---')
                //直接播放
                this.createPlayer()
            }
        },
        destroyed() {
            if(this.player)
                this.player.close()
        },
        methods:{
            createPlayer(){
                if(this.player !=null) this.player.close()
                this.player = new Player(this.options)
                this.player.init(this)
                this.player.on('error', function () {
                    console.log('连接失败')
                })
                this.player.on('noStream', function () {
                    console.log('noStream');
                    this.player.close();
                    this.player = null;
                    this.player = new Player(this.options);
                    this.player.init();
                    this.player.connect();
                })

                this.player.on('canplay', function () {
                    //player.close();
                })

                this.player.on('initialCompleted', function () {
                    // let data = [[
                    //     {x: 2861, y: 4395},
                    //     {x: 6403, y: 4013},
                    //     {x: 3260, y: 7986},
                    //     {x: 640, y: 6252}
                    // ]];
                    // console.log('initialCompleted')
                    // player.setROI(data);
                })

                this.player.on('ROIFinished', function () {
                    console.log('ROIFinished');
                })
                this.player.connect()
            },
            close(){
                player.close()
            }
        }
    }
</script>

<style scoped>

</style>