fix:

1. 修复视频播放异常问题

web_src/src/assets/ZLMRTCClient.js

@@ -7948,7 +7948,8 @@ let ZLMRTCClient = (function (exports) {
 	    }
 
 	    this.pc.createOffer().then(desc => {
-	      // log(this.TAG, 'offer:');
+	      log(this.TAG, 'offer:' + desc.sdp.toString());
+        // console.log(sdp);
         let sdp = this.reWriteAudioCodingSdp(desc.sdp.toString());
 
         // sdp = sdp.replace("a=rtpmap:9 G722/8000","");
@@ -8217,6 +8218,7 @@ let ZLMRTCClient = (function (exports) {
 
     reWriteAudioCodingSdp(sdp){
       // 获取需要修改
+      console.log('change sdp ---------------------------------------------------------');
       console.log(sdp);
       let _sdp = sdp;
       let audioEncodingKeys = Object.keys(audioEncoding);

web_src/src/components/dialog/customPlayer.vue

@@ -45,6 +45,7 @@
 <script>
 import rtcPlayer from '../dialog/rtcPlayer.vue'
 import PtzControl from "@/components/common/ptzControl";
+import {webrtcEvent} from "@/map/eventMap";
 export default {
   name: "customPlayer",
   components: {
@@ -72,7 +73,6 @@ export default {
       activePlayer: "webRTC",
       // 如何你只是用一种播放器，直接注释掉不用的部分即可
       player: {
-        //jessibuca : ["ws_flv", "wss_flv"],
         webRTC: ["rtc", "rtcs"],
       },
       videoHistory: {
@@ -114,13 +114,38 @@ export default {
       showTimeText: "00:00:00",
       streamInfo: null,
       enableDebug: true,
+
     };
   },
+  mounted() {
+    // this.showVideoDialog = true;
+  },
   methods: {
-    playEventHandle(type,message){
+    playEventHandle(type,e){
+      // 添加同类型防抖
+
       if(this.enableDebug){
         console.log('playEventHandle');
-        console.log(type,message);
+        console.log(type,e);
+      }
+      if(type === webrtcEvent.apiFail.code){
+        this.$notify.error({
+          title: 'ZLM连接失败',
+          dangerouslyUseHTMLString: true,
+          message: `<span>连接zlm服务失败${e.message}</span> <br/>
+                        <a href="${this.videoUrl}" target="_blank"><span>手动访问</span></a>`,
+          duration: 0
+        });
+        this.videoError = true;
+        this.videoUrl = '';
+
+      }else if(type === webrtcEvent.played.code){
+        this.$message.success('播放成功');
+      }else if(type === webrtcEvent.sdpFail.code){
+        this.$notify.error({
+          title: 'sdp 交互失败',
+          duration: 4500
+        })
       }
     },
 
@@ -159,16 +184,21 @@ export default {
       this.hasAudio = hasAudio;
       this.isLoging = false;
       // this.videoUrl = streamInfo.rtc;
-      this.videoUrl = this.getUrlByStreamInfo();
+      this.videoUrl = this.getUrlByStreamInfo(streamInfo);
       this.streamId = streamInfo.stream;
       this.app = streamInfo.app;
       this.mediaServerId = streamInfo.mediaServerId;
       this.playFromStreamInfo(false, streamInfo)
     },
-    playFromStreamInfo: function (realHasAudio, streamInfo) {
+    playFromStreamInfo(realHasAudio, streamInfo) {
       this.showVideoDialog = true;
       this.hasaudio = realHasAudio && this.hasaudio;
-      this.$refs[this.activePlayer].play(this.getUrlByStreamInfo(streamInfo),this.enableDebug)
+      this.videoUrl = this.getUrlByStreamInfo(streamInfo);
+      console.log(this.videoUrl);
+      this.$nextTick(()=>{
+        this.$refs[this.activePlayer].play(this.videoUrl,this.enableDebug)
+      });
+
     },
     openDialog: function (tab, deviceId, channelId, param) {
       if (this.showVideoDialog) {
@@ -181,6 +211,7 @@ export default {
       this.mediaServerId = "";
       this.app = "";
       this.videoUrl = ""
+      this.$nextTick(()=>{
       if (!!this.$refs[this.activePlayer]) {
         this.$refs[this.activePlayer].pause();
       }
@@ -203,6 +234,7 @@ export default {
         case "control":
           break;
       }
+      });
     },
     getUrlByStreamInfo(){
       console.log("获取基础拉流地址")
@@ -217,37 +249,40 @@ export default {
 
     },
     coverPlay: function () {
-      var that = this;
+      let that = this;
       this.coverPlaying = true;
-      this.$refs[this.activePlayer].pause()
-      that.$axios({
-        method: 'post',
-        url: '/api/play/convert/' + that.streamId
-      }).then(function (res) {
-        if (res.data.code === 0) {
-          that.convertKey = res.data.key;
-          setTimeout(()=>{
+      this.$nextTick(()=>{
+        this.$refs[this.activePlayer].pause()
+        that.$axios({
+          method: 'post',
+          url: '/api/play/convert/' + that.streamId
+        }).then(function (res) {
+          if (res.data.code === 0) {
+            that.convertKey = res.data.key;
+            setTimeout(()=>{
+              that.isLoging = false;
+              that.playFromStreamInfo(false, res.data.data);
+            }, 2000)
+          } else {
             that.isLoging = false;
-            that.playFromStreamInfo(false, res.data.data);
-          }, 2000)
-        } else {
-          that.isLoging = false;
+            that.coverPlaying = false;
+            that.$message({
+              showClose: true,
+              message: '转码失败',
+              type: 'error'
+            });
+          }
+        }).catch(function (e) {
+          console.log(e)
           that.coverPlaying = false;
           that.$message({
             showClose: true,
-            message: '转码失败',
+            message: '播放错误',
             type: 'error'
           });
-        }
-      }).catch(function (e) {
-        console.log(e)
-        that.coverPlaying = false;
-        that.$message({
-          showClose: true,
-          message: '播放错误',
-          type: 'error'
         });
       });
+
     },
     convertStopClick: function() {
       this.convertStop(()=>{

web_src/src/components/dialog/rtcPlayer.vue

@@ -10,6 +10,7 @@
 import ZLMRTCClient from "@/assets/ZLMRTCClient";
 import {webrtcEvent} from "@/map/eventMap";
 
+
 let webrtcPlayer = null;
 export default {
     name: 'rtcPlayer',
@@ -30,47 +31,47 @@ export default {
          this.play(this.videoUrl)
         })
     },
-    watch:{
-        videoUrl(newData, oldData){
-            this.pause();
-            this.play(newData);
-        },
-        immediate:true
-    },
+    // watch:{
+    //     videoUrl(newData, oldData){
+    //         this.pause();
+    //         this.play(newData);
+    //     },
+    //     immediate:true
+    // },
     methods: {
         play: function (url,enableDebug = false) {
           this.enableDebug = enableDebug;
           if(enableDebug){
-            console.log(url);
+            console.log("播放地址为: " + url);
           }
-
             webrtcPlayer = new ZLMRTCClient.Endpoint({
                 element: document.getElementById('webRtcPlayerBox'),// video 标签
                 debug: enableDebug,// 是否打印日志
                 zlmsdpUrl: url,//流地址
                 simulecast: false,
                 useCamera: false,
-                audioEnable: false,
-                videoEnable: false,
+                audioEnable: true,
+                videoEnable: true,
                 recvOnly: true,
             });
             webrtcPlayer.on(ZLMRTCClient.Events.CONNECT_FAIL, (err) => {
               if(enableDebug){console.log('error', err);}
-                this.eventCallback(webrtcEvent.apiFail, err)
+                this.eventCallback(webrtcEvent.apiFail.code, err)
             });
             webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR,(e)=>{// ICE 协商出错
                 if(enableDebug){console.error('ICE 协商出错')}
-                this.eventCallback("ICE ERROR", "ICE 协商出错")
+                this.eventCallback(webrtcEvent.iceError.code, "ICE 协商出错")
             });
 
             webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS,(e)=>{//获取到了远端流，可以播放
                 if(enableDebug){console.log('播放成功',e.streams)}
-                this.eventCallback("playing", "播放成功")
+                this.eventCallback(webrtcEvent.played.code, "播放成功")
             });
 
             webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED,(e)=>{// offer anwser 交换失败
                 if(enableDebug){console.error('offer anwser 交换失败',e)}
-                this.eventCallback("OFFER ANSWER ERROR ", "offer anwser 交换失败")
+
+                this.eventCallback(webrtcEvent.sdpFail.code, "offer anwser 交换失败")
                 if (e.code ==-400 && e.msg=="流不存在"){
                     if(enableDebug){console.log("流不存在")}
                     this.timer = setTimeout(()=>{
@@ -84,7 +85,7 @@ export default {
             webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ON_LOCAL_STREAM,(s)=>{// 获取到了本地流
 
                 // document.getElementById('selfVideo').srcObject=s;
-                this.eventCallback("LOCAL STREAM", "获取到了本地流")
+                this.eventCallback(webrtcEvent.localStream.code, "获取到了本地流")
             });
 
         },

web_src/src/map/eventMap.js

@@ -4,6 +4,11 @@ export const webrtcEvent = {
         icon: 'connect',
         code: 'icecandidate',
     },
+    localStream: {
+      title: "获取到本地流",
+      icon: 'connect',
+      code: 'localStream',
+    },
     played: {
       title: "播放成功",
       icon: 'played',
@@ -18,5 +23,15 @@ export const webrtcEvent = {
       title: "未找到流",
       icon: '404',
       code: 'notFindStream',
+    },
+    iceError: {
+      title: "ice连接失败",
+      icon: 'fail',
+      code: 'iceError',
+    },
+    sdpFail: {
+      title: "answer sdp 交换失败",
+      icon: 'fail',
+      code: 'sdpFail',
     }
 }