优化视频聊天

src/utils/live/index.js

@@ -29,7 +29,19 @@ export const countDown = (endtime) => {
   } else {
     return '时间已到'
   }
- 
+}
+
+export const laseTime = (endtime) => {
+  let nowtime = new Date();  //获取当前时间
+  let time = endtime - nowtime.getTime();  //距离结束时间的毫秒数
+  let lefth = Math.floor(time / (1000 * 60 * 60) % 24); //计算小时数
+  let leftm = Math.floor(time / (1000 * 60) % 60);  //计算分钟数
+  let lefts = Math.floor(time / 1000 % 60);  //计算秒数
+  return {
+    lefth,
+    leftm,
+    lefts
+  }
 }
 
 function listCompare(property, way) {

src/utils/live/rtc-client.js

@@ -30,6 +30,7 @@ class RtcClient {
       this.handleEvents();
     } catch (error) {
       console.log('创建client失败', error)
+      this.vueInstance.reloadfn()
     }
   }
 
@@ -56,6 +57,7 @@ class RtcClient {
       this.startRTC()
     } catch (e) {
       console.error('加入房间失败 ' + e);
+      this.vueInstance.reloadfn()
     }
   }
 
@@ -127,6 +129,7 @@ class RtcClient {
     }).catch(error => {
       console.log('本地流发布失败')
       this.isPublished_ = false;
+      this.vueInstance.reloadfn()
     });
   }
 
@@ -267,9 +270,6 @@ class RtcClient {
 
     // 在订阅远程流时触发
     this.client_.on('stream-subscribed', evt => {
-      console.log('==============evt======================');
-      console.log(evt);
-      console.log('====================================');
       const remoteStream = evt.stream;
       const id = remoteStream.getId();
       const uid = remoteStream.userId_;
@@ -304,6 +304,15 @@ class RtcClient {
         this.vueInstance.addNewMember(uid)
         
         setTimeout(() => {
+          //  避免其他乱入视频
+          let index = this.viewslist.findIndex((item => {
+            return item.userId == uid
+          }))
+          if (index < 0) {
+            return
+          }
+
+          // 播放视频
           remoteStream.play(id);
           if (!remoteStream.hasVideo()) {
             this.changeView(id, 'mask', true)
@@ -403,7 +412,7 @@ class RtcClient {
   
   add(id, uid, isMask) {
     this.vueInstance.memberList.forEach((ele,index) => {
-      if (ele.id == uid) {
+      if (ele.accId == uid) {
         this.viewslist[index] = { id: id, userId: uid, nick: uid, mask: isMask, vioce: true }
       }
     });

src/views/IM/diagnosis-admin/diagnosis-live.vue

@@ -5,8 +5,8 @@
                 <h1 class="title">{{title}}</h1>
                 <div class="time-message">
                     <p>设定时长: 30分钟</p>
-                    <p>总时长: {{useTime}}</p>
-                    <p>剩余时长: {{loseTime}}</p>
+                    <p v-if="startTime && endTime">总时长: {{useTime}}</p>
+                    <p v-if="startTime && endTime">剩余时长: {{loseTime}}</p>
                 </div>
             </div>
             <div class="top-right">
@@ -15,9 +15,10 @@
             </div>
         </div>
         <div class="main">
-            <div class="viedo-wrapper" v-for="(item,index) of memberList" :key="item.id">
+            <div class="viedo-wrapper" v-for="(item,index) of memberList" :key="index">
                 <div class="text">
-                    <p>{{item.role == 1 ? '问诊医生' : '接诊医生'}} {{item.name}}</p>
+                    <p>{{item.name}}</p>
+                    <p>{{item.role == 1 ? '问诊医生' : '接诊医生'}}:</p>
                 </div>
                 <div class="viedo">
                     <div :id="rtc.viewslist[index].id" v-if="rtc && rtc.viewslist[index]">
@@ -45,7 +46,7 @@
 </template>
 <script>
 import RtcClient from '@/utils/live/rtc-client.js'
-import { getLiveTimeText, countDown, getBroswer } from '@/utils/live'
+import { getLiveTimeText, countDown, getBroswer, laseTime } from '@/utils/live'
 import { openLoading, closeLoading } from "@/utils/utils";
 import alert from '@/components/common/alert.vue'
 export default {
@@ -62,10 +63,10 @@ export default {
             noCameraImg: require('../../../assets/image/live/no-camera.png'),
             roleAnchor: 'anchor', // 主播
             rtc: null,
-            roomId: 100000437,
+            roomId: '',
             sdkAppId: '',
             userSig: "",
-            userId: "1000000018-1-1-100000437",
+            userId: "",
             viedoParams: null,
             isMicOn: false,
             askTime: 0, // 问诊医生接入时长
@@ -77,28 +78,9 @@ export default {
             useTimeFn:null,
             loseTimeFn:null,
             type: 2, // 1: 语音 2: 视频
-            startTime: 1617784742,
-            endTime: 1617791942000,
-            memberList: [
-                {
-                    accId: '',
-                    avatarImageUrl: '',
-                    id: '1000005449-1-2-100000436',
-                    name: '',
-                    role: 1, //在当前群组中的角色 1: 问诊医生 2: 接诊医生 3: 居民 4: 其他
-                    type: '',
-                    status: 1, //等待连接还是已经下麦 1为等待 2为进行中 3为下麦
-                },
-                {
-                    accId: '',
-                    avatarImageUrl: '',
-                    id: '1000005449-1-2-100000437',
-                    name: '',
-                    role: 2, //在当前群组中的角色 1: 问诊医生 2: 接诊医生 3: 居民 4: 其他
-                    type: '',
-                    status: 1
-                }
-            ],
+            startTime: 0,
+            endTime: 0,
+            memberList: [],
             tid: '', // 群id
             diagnoseLogId: '' //问诊id
         }
@@ -145,12 +127,14 @@ export default {
                     if (liveInfo) {
                         this.startTime = liveInfo.startTimestamp
                         this.endTime = liveInfo.endTimestamp
-                        this.roomId = liveInfo.roomId
+                        this.roomId = Number(liveInfo.roomId)
                         this.type = liveInfo.liveType
                     }
-                    if (memberList) {
+                    if (memberList && memberList.length) {
                         memberList.forEach((item) => {
-                            if (item.role == 1) {
+                             //在当前群组中的角色 1: 问诊医生 2: 接诊医生 3: 居民 4: 其他
+                            if (item.role == 1) {  
+                                //等待连接还是已经下麦 1为等待 2为进行中 3为下麦
                                 this.memberList[0] = Object.assign(item,{status: 1})
                             }
                             if (item.role == 2) {
@@ -311,7 +295,7 @@ export default {
         // 用户上线
         addNewMember(id) {
             this.memberList.forEach(item => {
-                if (item.id == id) {
+                if (item.accId == id) {
                     item.status = 2
                     this.setTime(item.role)
                 }
@@ -320,7 +304,7 @@ export default {
         // 用户下线
         removeMember(id) {
             this.memberList.forEach(item => {
-                if (item.id == id) {
+                if (item.accId == id) {
                     item.status = 3
                 }
             })
@@ -357,6 +341,19 @@ export default {
                 this.setTime(3)
                 this.loseTimeFn = setInterval(() => {
                     this.loseTime = countDown(this.endTime)
+                    let timeObj = laseTime(this.endTime)
+                    if ((timeObj.leftm == 5 || timeObj.leftm == 3 || timeObj.leftm == 1) && timeObj.lefts == 0 && timeObj.lefth == 0) {
+                        this.$nextTick(() => {
+                            this.$refs.alert.init({
+                                confirmTxt: '我知道了',
+                                title:  `距离会诊结束还剩不足${timeObj.leftm}分钟`
+                            })
+                            .then(() => {
+                            })
+                            .catch((err) => {
+                            })
+                        })
+                    }
                 }, 1000);
             } else if (new Date() < this.startTime){
                 let t = setInterval(() => {
@@ -421,6 +418,20 @@ export default {
                     this.$router.go(-1)
                 })
             })
+        },
+        reloadfn(msg) {
+            this.$nextTick(() => {
+                this.$refs.alert.init({
+                    confirmTxt: '我知道了',
+                    title:  `加入房间失败，重新加入`
+                })
+                .then(() => {
+                    location.reload();
+                })
+                .catch((err) => {
+                    location.reload();
+                })
+            })
         }
     },
     destroyed() {