rongyun api md

src/features/invigilation/WainingManage/WainingDetail.vue

@@ -32,12 +32,8 @@
           </div>
           <div class="student-video">
             <div class="student-video-item">
-              <video
-                src=""
-                ref="FirstViewVideo"
-                v-show="firstViewVideoReady"
-              ></video>
-              <div class="student-video-none" v-show="!firstViewVideoReady">
+              <video ref="FirstViewVideo" v-if="firstViewVideoReady"></video>
+              <div class="student-video-none" v-else>
                 <i class="el-icon-video-camera-solid"></i>
               </div>
             </div>
@@ -155,16 +151,19 @@ export default {
         stdName: "张龙龙",
         subjectName: "大学英语",
         subjectCode: "10006",
-        liveUrlFirst: "",
+        liveUrlFirst:
+          "F7XLyBeoubx0mK+pY9TmqnPWqaI5x6SmcN2+qjnWpKUtjfvIBIT8+jmH8+Ygg+X6Jobx/CeF8/gWtcvIFbWHiVbWs4VT1ryFQ9b4iVTvspEmjL+RJo34kX3Ro4ZD+6eFffj+hlP0vJFD8LGReuT5kXrg+ZFt3rORbeemhnr4+5JG9I6FffSyhVb09sgix6iXetaU/3WCqv0k0Pn7LoH7+HaE+Kpzg6mtIdby+XSBrf50ga6XRdqlr1TZpL1z55+LSITLyBe1ZHVxu8v9ZdaUpXTq/Kog1P77cof48SOF+6kmhqmsIdeu/nSM+qsj0/2rI9CUmnjbrIt72r6sReGIlye1y8gXfsxCoA==",
         liveUrlThree: "",
-        roomId: "1",
+        roomId: "8888",
       },
       firstViewVideoReady: false,
       threeViewVideoReady: false,
       // communication
       durationTime: "00:10:23",
       token:
-        "iy7OAXkkr+ooBirzYIT8BC7ePbpkBY7eRygkv+h3Iok=@tlem.cn.rongnav.com;tlem.cn.rongcfg.com",
+        "R2wA227fM5guGJjIUQiOFy7ePbpkBY7e/88fWPXjr+k=@tlem.cn.rongnav.com;tlem.cn.rongcfg.com",
+      // token:
+      //   "iy7OAXkkr+ooBirzYIT8BC7ePbpkBY7eRygkv+h3Iok=@tlem.cn.rongnav.com;tlem.cn.rongcfg.com",
       rongUserId: null,
       rongRTC: null,
       room: null,
@@ -176,6 +175,9 @@ export default {
       dialogVisible: false,
     };
   },
+  mounted() {
+    this.initRong();
+  },
   methods: {
     async initRong() {
       this.rongUserId = await connectIM(this.token).catch((error) => {
@@ -185,47 +187,58 @@ export default {
         this.$message.error("初始化错误！");
         return;
       }
+
+      this.initVideo();
+    },
+    async initVideo() {
       const { Mode, ROLE } = window.RongRTC;
       this.rongRTC = initRongRTC({
-        debug: true,
+        debug: false,
         mode: Mode.LIVE,
-        liveRole: ROLE.ANCHOR,
+        liveRole: ROLE.AUDIENCE,
       });
-    },
-    initVideo() {
       const { Stream } = this.rongRTC;
+
       // 初始化stream
       this.stream = new Stream({
         published: (user) => {
           console.log(user);
         },
         unpublished: (user) => {
-          this.stream.unsubscribe(user);
+          console.log(user);
         },
       });
 
-      this.stream.subscribe({ liveUrl: this.liveUrlFirst }).then((user) => {
-        let {
-          stream: { mediaStream },
-        } = user;
-        this.$refs.FirstViewVideo.srcObject = mediaStream;
-        this.$refs.FirstViewVideo.autoplay = true;
+      const { mediaStream } = await this.stream
+        .subscribe({ liveUrl: this.curStudent.liveUrlFirst })
+        .catch((error) => {
+          console.log(error);
+        });
+      console.log(mediaStream);
+
+      if (mediaStream) {
         this.firstViewVideoReady = true;
-      });
+        this.$nextTick(() => {
+          this.$refs.FirstViewVideo.srcObject = mediaStream;
+          this.$refs.FirstViewVideo.autoplay = true;
+        });
+      }
 
-      this.stream.subscribe({ liveUrl: this.liveUrlThree }).then((user) => {
-        let {
-          stream: { mediaStream },
-        } = user;
-        this.$refs.ThreeViewVideo.srcObject = mediaStream;
-        this.$refs.ThreeViewVideo.autoplay = true;
-        this.threeViewVideoReady = true;
-      });
+      // this.stream.subscribe({ liveUrl: this.curStudent.liveUrlThree }).then((user) => {
+      //   let {
+      //     stream: { mediaStream },
+      //   } = user;
+      //   this.$refs.ThreeViewVideo.srcObject = mediaStream;
+      //   this.$refs.ThreeViewVideo.autoplay = true;
+      //   this.threeViewVideoReady = true;
+      // });
     },
     closeVideo() {
-      this.stream.unsubscribe({ liveUrl: this.liveUrlFirst });
-      this.stream.unsubscribe({ liveUrl: this.liveUrlThree });
+      this.stream.unsubscribe({ liveUrl: this.curStudent.liveUrlFirst });
+      this.stream.unsubscribe({ liveUrl: this.curStudent.liveUrlThree });
       this.stream = null;
+      this.rongRTC.destroy();
+      this.rongRTC = null;
       this.firstViewVideoReady = false;
       this.threeViewVideoReady = false;
     },
@@ -233,6 +246,13 @@ export default {
       this.closeVideo();
       this.dialogVisible = true;
 
+      const { Mode, ROLE } = window.RongRTC;
+      this.rongRTC = initRongRTC({
+        debug: false,
+        mode: Mode.LIVE,
+        liveRole: ROLE.ANCHOR,
+      });
+
       const { Room, Stream, StreamType } = this.rongRTC;
       // 初始化房间
       this.room = new Room({
@@ -326,6 +346,8 @@ export default {
       this.curStreamType = null;
       this.videoHostReady = false;
       this.videoGuestReady = false;
+      this.rongRTC.destroy();
+      this.rongRTC = null;
       this.initVideo();
     },
   },

src/plugins/RongIM.js

@@ -2,9 +2,22 @@ window.RongIMLib.RongIMClient.init("3argexb63s9ie");
 // 连接状态监听器
 window.RongIMClient.setConnectionStatusListener({
   onChanged: function (status) {
-    console.log(status);
+    console.log("status changed", status);
+    switch (status) {
+      case window.RongIMLib.ConnectionStatus.CONNECTING:
+        break;
+      case window.RongIMLib.ConnectionStatus.DISCONNECTED:
+        break;
+      case window.RongIMLib.ConnectionStatus.KICKED_OFFLINE_BY_OTHER_CLIENT:
+      case window.RongIMLib.ConnectionStatus.DOMAIN_INCORRECT:
+      case window.RongIMLib.ConnectionStatus.NETWORK_UNAVAILABLE:
+        reconnect();
+        // callbacks.error(status);
+        break;
+    }
   },
 });
+
 // 消息监听器
 window.RongIMClient.setOnReceiveMessageListener({
   onReceived: function (message) {
@@ -12,6 +25,26 @@ window.RongIMClient.setOnReceiveMessageListener({
   },
 });
 
+function reconnect() {
+  var callback = {
+    onSuccess: function (userId) {
+      console.log("reconnect success. " + userId);
+    },
+    onTokenIncorrect: function () {
+      console.log("token 无效");
+    },
+    onError: function () {
+      reconnect();
+    },
+  };
+  var config = {
+    auto: true,
+    url: "cdn.ronghub.com/RongIMLib-2.2.6.min.js?d=" + Date.now(),
+    rate: [100, 1000, 3000, 6000, 10000],
+  };
+  window.RongIMClient.reconnect(callback, config);
+}
+
 export const initRongRTC = (options) => {
   return new window.RongRTC({
     RongIMLib: window.RongIMLib,