wvp-gb28181-pro/web_src/src/components/dialog/rtcPlayer.vue

<template>
    <div id="rtcPlayer">
        <video id='webRtcPlayerBox' controls autoplay style="text-align:left;">
            Your browser is too old which doesn't support HTML5 video.
          </video>
    </div>
</template>

<script>
let webrtcPlayer = null;
export default {
    name: 'rtcPlayer',
    data() {
        return {
            timer: null
        };
    },
    props: ['videoUrl', 'error', 'hasaudio'],
    mounted () {
      let paramUrl = decodeURIComponent(this.$route.params.url)
       this.$nextTick(() =>{
         if (typeof (this.videoUrl) == "undefined") {
           this.videoUrl = paramUrl;
         }
         console.log("初始化时的地址为: " + this.videoUrl)
         this.play(this.videoUrl)
        })
    },
    watch:{
        videoUrl(newData, oldData){
            this.pause();
            this.play(newData);
        },
        immediate:true
    },
    methods: {
        play: function (url) {
            webrtcPlayer = new ZLMRTCClient.Endpoint({
                element: document.getElementById('webRtcPlayerBox'),// video 标签
                debug: true,// 是否打印日志
                zlmsdpUrl: url,//流地址
                simulecast: false,
                useCamera: false,
                audioEnable: true,
                videoEnable: true,
                recvOnly: true,
                usedatachannel: false,
            })
            webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR,(e)=>{// ICE 协商出错
                console.error('ICE 协商出错')
                this.eventcallbacK("ICE ERROR", "ICE 协商出错")
            });

            webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS,(e)=>{//获取到了远端流，可以播放
                console.log('播放成功',e.streams)
                this.eventcallbacK("playing", "播放成功")
            });

            webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED,(e)=>{// offer anwser 交换失败
                console.error('offer anwser 交换失败',e)
                this.eventcallbacK("OFFER ANSWER ERROR ", "offer anwser 交换失败")
                if (e.code ==-400 && e.msg=="流不存在"){
                    console.log("流不存在")
                    this.timer = setTimeout(()=>{
                        this.webrtcPlayer.close();
                        this.play(url)
                    }, 100)

                }
            });

            webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ON_LOCAL_STREAM,(s)=>{// 获取到了本地流

                // document.getElementById('selfVideo').srcObject=s;
                this.eventcallbacK("LOCAL STREAM", "获取到了本地流")
            });

        },
        pause: function () {
            if (webrtcPlayer != null) {
                webrtcPlayer.close();
                webrtcPlayer = null;
            }

        },
        eventcallbacK: function(type, message) {
            console.log("player 事件回调")
            console.log(type)
            console.log(message)
        }
    },
    destroyed() {
        clearTimeout(this.timer);
    },
}
</script>

<style>
    .LodingTitle {
        min-width: 70px;
    }
    #rtcPlayer{
        width: 100%;
    }
    #webRtcPlayerBox{
        width: 100%;
        max-height: 56vh;
        background-color: #000;
    }
    /* 隐藏logo */
    /* .iconqingxiLOGO {
        display: none !important;
    } */

</style>