jiang
2022-08-04 d09d8f11f06ee6eeeb4c7f9bd6d35e6fbd49e05f
web_src/src/components/dialog/rtcPlayer.vue
@@ -7,18 +7,23 @@
</template>
<script>
let webrtcPlayer = null;
export default {
    name: 'rtcPlayer',
    data() {
        return {
            webrtcPlayer: null
            timer: null
        };
    },
    props: ['videoUrl', 'error', 'hasaudio'],
    mounted () {
      let paramUrl = decodeURIComponent(this.$route.params.url)
       this.$nextTick(() =>{
           console.log("初始化时的地址为: " + this.videoUrl)
            this.play(this.videoUrl)
         if (typeof (this.videoUrl) == "undefined") {
           this.videoUrl = paramUrl;
         }
         console.log("初始化时的地址为: " + this.videoUrl)
         this.play(this.videoUrl)
        })
    },
    watch:{
@@ -30,7 +35,7 @@
    },
    methods: {
        play: function (url) {
            this.webrtcPlayer = new ZLMRTCClient.Endpoint({
            webrtcPlayer = new ZLMRTCClient.Endpoint({
                element: document.getElementById('webRtcPlayerBox'),// video 标签
                debug: true,// 是否打印日志
                zlmsdpUrl: url,//流地址
@@ -40,48 +45,51 @@
                videoEnable: false,
                recvOnly: true,
            })
            this.webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR,(e)=>{// ICE 协商出错
            webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR,(e)=>{// ICE 协商出错
                console.error('ICE 协商出错')
                this.eventcallbacK("ICE ERROR", "ICE 协商出错")
            });
            this.webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS,(e)=>{//获取到了远端流,可以播放
            webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS,(e)=>{//获取到了远端流,可以播放
                console.error('播放成功',e.streams)
                this.eventcallbacK("playing", "播放成功")
            });
            this.webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED,(e)=>{// offer anwser 交换失败
            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("111111")
                    setTimeout(()=>{
                    this.timer = setTimeout(()=>{
                        this.webrtcPlayer.close();
                        this.play(url)
                    }, 100)
                }
            });
            this.webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ON_LOCAL_STREAM,(s)=>{// 获取到了本地流
            webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ON_LOCAL_STREAM,(s)=>{// 获取到了本地流
                // document.getElementById('selfVideo').srcObject=s;
                this.eventcallbacK("LOCAL STREAM", "获取到了本地流")
            });
        },
        pause: function () {
            if (this.webrtcPlayer != null) {
                this.webrtcPlayer.close();
                this.webrtcPlayer = null;
            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>
@@ -102,5 +110,5 @@
    /* .iconqingxiLOGO {
        display: none !important;
    } */
</style>
</style>