优化

pages/meeting/index.scss

@@ -10,7 +10,7 @@
     border-radius: 4rpx;
     padding: 2rpx;
     bottom: 4rpx;
-    width: calc(100% - 12rpx);
+    max-width: calc(100% - 12rpx);
     box-sizing: border-box;
 
     &-view {

pages/meeting/index.ts

@@ -9,7 +9,6 @@ import dayjs from 'dayjs';
 const computedBehavior = require('miniprogram-computed').behavior;
 let reconnectTime = "" as any;
 let refreshTime = "" as any;
-let isReconnecTimeSetTimeout = "" as any;
 let isAutoApplySpeakTime = "" as any;
 Page({
   behaviors: [computedBehavior],
@@ -104,9 +103,9 @@ Page({
     isFirstShow: true,
     isCurrePage: true,
     isReconnec: false,
-    isReconnecTime: false,
     isAutoApplySpeakDialog: false,
     showScroll: false,
+    reconnecNumber: 0
   },
   watch: {
     'roomUserList.**': function (roomUserList) {
@@ -173,31 +172,9 @@ Page({
         }, 10000);
       }
     },
-    'isReconnecTime': function (isReconnecTime) {
-      if (isReconnecTime) {
-        isReconnecTimeSetTimeout = setTimeout(() => {
-          clearTimeout(isReconnecTimeSetTimeout)
-          this.setData({
-            isReconnec: true,
-            isReconnecTime: false,
-          })
-          isReconnecTimeSetTimeout = ''
-          wx.hideLoading()
-        }, 10000)
-      } else {
-        if (isReconnecTimeSetTimeout) {
-          clearTimeout(isReconnecTimeSetTimeout)
-          isReconnecTimeSetTimeout = ''
-          wx.hideLoading()
-        }
-      }
-    },
     'isCurrePage': function (isCurrePage) {
       if (isCurrePage) {
-        if (refreshTime) {
+        this.clearTimer()
-          clearInterval(refreshTime)
-          refreshTime = ''
-        }
       } else {
         refreshTime = setInterval(() => {
           GetRoomUser(this.data.channelId).then(res => {
@@ -213,8 +190,6 @@ Page({
               });
               this.changeAgoraDevice()
             }
-          }).catch(() => {
-            this.setIsConnectedBack()
           })
         }, 1000 * 30)
       }
@@ -293,7 +268,7 @@ Page({
   onReady() {
     wx.onNetworkStatusChange(this.listener)
   },
-  onShow() {
+  async onShow() {
     wx.setKeepScreenOn({
       keepScreenOn: true,
     });
@@ -305,125 +280,40 @@ Page({
         isFirstShow: false,
       })
     } else {
-      const item = this.data.roomUserList.find(row => row.uid === this.data.user.uid)
+      this.reconnecFun()
-      if (item && !item.isRoomManager) {
+    }
+  },
+  // 隐藏
+  onHide() {
+    this.setData({
+      isCurrePage: true,
+    })
+    this.clearTimer()
+  },
+  // 卸载
+  onUnload() {
+    wx.offNetworkStatusChange(this.listener)
+    this.clearTimer()
+  },
+  async reconnecFun() {
+    wx.hideLoading()
     wx.showLoading({
       title: '重连中',
       mask: true
     })
-        this.setData({
+    if (reconnectTime) {
-          isReconnecTime: true,
+      clearTimeout(reconnectTime)
-        })
+      reconnectTime = ''
+    }
     agora.destroy(() => {
+      this.startReconnec()
       reconnectTime = setInterval(() => {
+        this.startReconnec()
+      }, 3000)
+    })
+  },
+  async startReconnec() {
     if (getSignIr() === signalR.HubConnectionState.Connected) {
-              this.reconnecFun()
-              clearInterval(reconnectTime)
-              reconnectTime = ''
-            }
-          }, 2000)
-        })
-      } else {
-        this.setData({
-          currentUser: '',
-          currentUid: ''
-        }, () => {
-          this.getShowUser()
-        })
-      }
-    }
-  },
-  onHide() {
-    this.setData({
-      isCurrePage: true,
-      isReconnecTime: false
-    })
-    if (reconnectTime) {
-      clearInterval(reconnectTime)
-      reconnectTime = ''
-    }
-    if (isReconnecTimeSetTimeout) {
-      clearInterval(isReconnecTimeSetTimeout)
-      isReconnecTimeSetTimeout = ''
-    }
-    if (refreshTime) {
-      clearInterval(refreshTime)
-      refreshTime = ''
-    }
-  },
-  onUnload() {
-    wx.offNetworkStatusChange(this.listener)
-    if (reconnectTime) {
-      clearInterval(reconnectTime)
-      reconnectTime = ''
-    }
-    if (isReconnecTimeSetTimeout) {
-      clearInterval(isReconnecTimeSetTimeout)
-      isReconnecTimeSetTimeout = ''
-    }
-    if (refreshTime) {
-      clearInterval(refreshTime)
-      refreshTime = ''
-    }
-    if (isAutoApplySpeakTime) {
-      clearTimeout(isAutoApplySpeakTime)
-      isAutoApplySpeakTime = ''
-    }
-  },
-  setIsConnectedBack() {
-    wx.setStorage({
-      key: "isConnected",
-      data: true
-    })
-    wx.disableAlertBeforeUnload({
-      complete: () => {
-        onStop()
-        wx.navigateBack()
-      }
-    })
-  },
-  showInputPopup() {
-    this.setData({
-      inputPopupVisible: true,
-      inputStr: this.data.messageStr,
-      chatPopupVisible: false
-    })
-  },
-  hideInputPopup() {
-    this.setData({
-      inputPopupVisible: false,
-      messageStr: this.data.inputStr,
-      chatPopupVisible: true
-    })
-  },
-  confirmIsAutoApplySpeakDialog() {
-    if (!this.data.isClicked) {
-      GetApplySpeak(this.data.channelId).then(res => {
-        if (res.code === 200) {
-          this.setData({
-            isClicked: true,
-          })
-          this.message('申请发言成功').success()
-        }
-        this.setData({
-          isAutoApplySpeakDialog: false
-        })
-      }).catch(() => {
-        this.setData({
-          isAutoApplySpeakDialog: false
-        })
-      })
-    } else {
-      this.message('申请太频繁了，请稍后重试！').error();
-    }
-  },
-  cancelIsAutoApplySpeakDialog() {
-    this.setData({
-      isAutoApplySpeakDialog: false
-    })
-  },
-  async reconnecFun() {
-    offSignalr()
       await GetRoomRtcToken(this.data.channelId).then(res => {
         if (res.code === 200) {
           agora.reconnecSetOption(res.data, async (bool) => {
@@ -439,8 +329,9 @@ Page({
                 duration: 3000,
                 content: '重连成功',
               });
+              clearTimeout(reconnectTime)
+              reconnectTime = ''
               this.setData({
-              isReconnecTime: false,
                 isReconnec: false
               })
             } else {
@@ -462,8 +353,78 @@ Page({
           isReconnec: true
         })
       })
+    } else {
+      if (this.data.reconnecNumber > 10) {
+        this.setIsConnectedBack()
+      } else {
+        this.setData({
+          reconnecNumber: this.data.reconnecNumber + 1
+        })
+      }
+    }
   },
+  // 清除定时器
+  clearTimer() {
+    if (refreshTime) {
+      clearInterval(refreshTime)
+      refreshTime = ''
+    }
+    if (reconnectTime) {
+      clearInterval(reconnectTime)
+      reconnectTime = ''
+    }
+    if (isAutoApplySpeakTime) {
+      clearTimeout(isAutoApplySpeakTime)
+      isAutoApplySpeakTime = ''
+    }
+  },
+  // 显示聊天输入框
+  showInputPopup() {
+    this.setData({
+      inputPopupVisible: true,
+      inputStr: this.data.messageStr,
+      chatPopupVisible: false
+    })
+  },
+  // 隐藏聊天输入框
+  hideInputPopup() {
+    this.setData({
+      inputPopupVisible: false,
+      messageStr: this.data.inputStr,
+      chatPopupVisible: true
+    })
+  },
+  // 申请发言提示框
+  confirmIsAutoApplySpeakDialog() {
+    if (!this.data.isClicked) {
+      GetApplySpeak(this.data.channelId).then(res => {
+        if (res.code === 200) {
+          this.setData({
+            isClicked: true,
+          })
+          this.message('申请发言成功').success()
+        }
+        this.setData({
+          isAutoApplySpeakDialog: false
+        })
+      }).catch(() => {
+        this.setData({
+          isAutoApplySpeakDialog: false
+        })
+      })
+    } else {
+      this.message('申请太频繁了，请稍后重试！').error();
+    }
+  },
+  // 关闭发言断开弹窗
+  cancelIsAutoApplySpeakDialog() {
+    this.setData({
+      isAutoApplySpeakDialog: false
+    })
+  },
+  // socket监听
   startSignalr() {
+    offSignalr()
     onSignalr(async (item) => {
       if (this.data.isCurrePage) {
         const item = this.data.roomUserList.find(row => row.uid === this.data.user.uid)
@@ -496,12 +457,7 @@ Page({
             key: "isAllLeave",
             data: true
           })
-          wx.disableAlertBeforeUnload({
+          this.closeRoom()
-            complete: () => {
-              onStop()
-              wx.navigateBack()
-            }
-          })
           break;
         // 移出会议
         case 'ForceExitRoom':
@@ -509,12 +465,7 @@ Page({
             key: "isForceExitRoom",
             data: true
           })
-          wx.disableAlertBeforeUnload({
+          this.closeRoom()
-            complete: () => {
-              onStop()
-              wx.navigateBack()
-            }
-          })
           break;
         // 更新视图模式
         case 'RefreshView':
@@ -675,6 +626,7 @@ Page({
       }
     })
   },
+  // 声网监听
   startClientEvent() {
     agora.clientEvent({
       streamAdded: async (url: string, uid: number | string) => {
@@ -722,10 +674,11 @@ Page({
         }
       },
       error: (e) => {
-        this.setIsConnectedBack()
+        this.reconnecFun()
       },
     })
   },
+  // 获取房间用户
   async getRoomUser(): Promise<void> {
     await GetRoomUser(this.data.channelId).then(res => {
       if (res.code === 200) {
@@ -740,6 +693,7 @@ Page({
       }
     })
   },
+  // 成员显示用户名称
   showMultiText(e) {
     Toast({
       context: this,
@@ -747,6 +701,7 @@ Page({
       message: e.currentTarget.dataset.item.userName,
     });
   },
+  // 查看全员观看
   async getShowUser(): Promise<void> {
     await GetShowUser(this.data.channelId).then(async (res) => {
       if (res.code === 200 && res.data) {
@@ -756,6 +711,7 @@ Page({
       }
     })
   },
+  // 首次获取用户信息
   async getRoomInfo(): Promise<void> {
     await GetRoomInfo(this.data.channelId).then(async (res) => {
       if (res.code === 200) {
@@ -765,14 +721,26 @@ Page({
       }
     })
   },
+  // 加入房间
   async joinChannel(): Promise<void> {
+    const item = this.data.roomUserList.find(row => row.uid === this.data.user.uid)
     await onInvoke('joinChannel', {
       roomNum: this.data.channelId,
       enableMicr: this.data.footerList[1].active,
       enableCamera: this.data.footerList[2].active,
+      isRoomManager: item ? item.isRoomManager : false,
     })
-    await agora.joinChannel()
+    agora.joinChannel(item ? item.isRoomManager : false, (url: string) => {
+      const roomUserListTemp = [...this.data.roomUserList]
+      const itemUser = roomUserListTemp.find(row => row.uid == this.data.user.uid)
+      itemUser.src = url
+      this.setData({
+        roomUserList: roomUserListTemp,
+      })
+    })
+    this.changeAgoraDevice()
   },
+  // 用户数据组装
   async setAllUserListData(key: string, item: any, callBack?: Function): Promise<void> {
     const { roomUserList } = this.data;
     const userInfo: any = await getStorage('user')
@@ -858,6 +826,7 @@ Page({
     }
     this.changeAgoraDevice()
   },
+  // 点击底部按钮
   async changeFooterList(e): Promise<void> {
     const userInfo: any = await getStorage('user')
     const { index } = e.currentTarget.dataset;
@@ -960,6 +929,7 @@ Page({
         break;
     }
   },
+  // 开关摄像头
   async postOpenMicrApi(enableMicr: boolean, uid: string, isAll: boolean, isMessage: boolean = false): Promise<void> {
     if (isAll) {
       await PostMuteAll({
@@ -986,6 +956,7 @@ Page({
       this.message('操作成功').success()
     }
   },
+  // 开关摄像头
   async postOpenCameraApi(enableCamera: boolean, uid: string, isMessage: boolean = false): Promise<void> {
     if (enableCamera) {
       // await agora.startCameraCapture()
@@ -1010,6 +981,7 @@ Page({
       this.message('操作成功').success()
     }
   },
+  // 关闭弹窗
   async closeDialog(e) {
     const { type } = e.currentTarget.dataset;
     switch (e.type) {
@@ -1029,7 +1001,6 @@ Page({
           case "leaveDialog":
             wx.disableAlertBeforeUnload({
               complete: () => {
-                onStop()
                 wx.navigateBack()
               }
             })
@@ -1043,12 +1014,7 @@ Page({
         break;
     }
   },
-  playerStateChange(e) {
+  // 音量提示
-
-  },
-  recorderStateChange(e) {
-
-  },
   playerAudioVolumenotify(e) {
     const { uid } = e.currentTarget.dataset;
     const { volume } = e.detail;
@@ -1063,12 +1029,14 @@ Page({
       userVolume: audioListTemp.find(row => row.uid == this.data.user.uid).volume
     })
   },
+  // 切换视频
   clickChangeVideo(e) {
     const { item } = e.currentTarget.dataset;
     this.setData({
       currentUid: item.uid
     })
   },
+  // 悬浮提示
   message(content: string) {
     return {
       success: () => {
@@ -1089,6 +1057,7 @@ Page({
       }
     }
   },
+  // 获取当前用户在房间信息
   async getUserRoomInfo(): Promise<any> {
     const userInfo: any = await getStorage('user')
     return new Promise((resolve, _reject) => {
@@ -1100,6 +1069,7 @@ Page({
       }
     })
   },
+  // 更改数据
   async changeAgoraDevice(): Promise<any> {
     const userInfo: any = await getStorage('user')
     this.data.roomUserList.forEach(async (item: any) => {
@@ -1118,27 +1088,32 @@ Page({
       }
     });
   },
+  // 退出提示
   async back() {
     this.setData({
       leaveDialog: true
     })
   },
+  // 关闭聊天和成员
   onVisibleChange() {
     this.setData({
       userPopupVisible: false,
       chatPopupVisible: false,
     })
   },
+  // 聊天内容输入框赋值
   changeMessageStr(e) {
     this.setData({
       messageStr: e.detail.value
     })
   },
+  // 聊天内容输入框赋值
   changeInputStr(e) {
     this.setData({
       inputStr: e.detail.value
     })
   },
+  // 聊天发送
   async sendMeg(e) {
     if (this.data.messageStr || e.target.dataset.item) {
       await onInvoke('sendChannelMsg', {
@@ -1164,11 +1139,13 @@ Page({
       this.message('请输入文字！').error()
     }
   },
+  // 全屏切换
   changeFullscreen() {
     this.setData({
       isFullscreen: !this.data.isFullscreen
     })
   },
+  // 聊天框位置滚动
   scrollToBottom() {
     wx.createSelectorQuery()
       .select('#chatView')
@@ -1180,27 +1157,38 @@ Page({
         })
       })
   },
+  // 断网退出房间
+  setIsConnectedBack() {
+    wx.setStorage({
+      key: "isConnected",
+      data: true
+    })
+    wx.disableAlertBeforeUnload({
+      complete: () => {
+        wx.navigateBack()
+      }
+    })
+  },
+  // 监听网络变化
   async listener(res) {
     if (res.isConnected && (res.networkType !== 'none' || res.networkType !== 'unknown')) {
 
     } else {
-      this.setIsConnectedBack()
+
     }
   },
+  // 重连失败退出房间
   closeRoom() {
     wx.disableAlertBeforeUnload({
       complete: () => {
         this.setData({
           isReconnec: false
         })
-        onStop()
         wx.navigateBack()
       }
     })
   },
-  scroll() {
+  // 上箭头滚动
-
-  },
   scrollUp() {
     const query = wx.createSelectorQuery()
     query.select('#meeting-content-smallvideo').scrollOffset((res => {
@@ -1210,6 +1198,7 @@ Page({
     }))
     query.exec()
   },
+  // 下箭头滚动
   scrollDown() {
     const query = wx.createSelectorQuery()
     query.select('#meeting-content-smallvideo').scrollOffset((res => {

pages/meeting/index.wxml

@@ -16,10 +16,10 @@
         <t-icon name="fullscreen-2" size="24rpx" data-name="fullscreen-2" wx:else />
       </view>
       <view class="meeting-content-video-canvas" wx:if="{{currentUser.shareSrc}}">
-        <live-player id="player" src="{{currentUser.shareSrc}}" mode="RTC" autoplay="true" bindstatechange="playerStateChange" object-fit="contain" />
+        <live-player id="player" src="{{currentUser.shareSrc}}" mode="RTC" autoplay="true" object-fit="contain" />
       </view>
       <view class="meeting-content-video-canvas" wx:else>
-        <live-player id="player" src="{{currentUser.src}}" mode="RTC" autoplay="true" bindstatechange="playerStateChange" object-fit="contain" muted="{{currentUser.uid === user.uid}}" />
+        <live-player id="player" src="{{currentUser.src}}" mode="RTC" autoplay="true" object-fit="contain" muted="{{currentUser.uid === user.uid}}" />
       </view>
       <view class="meeting-content-video-user">
         <view class="meeting-content-video-user-view" wx:if="{{currentUser.roleId === '1' || currentUser.roleId === '3'}}" style=" background:#FDC229">
@@ -29,7 +29,7 @@
         <text class="meeting-content-video-user-text">{{currentUser.userName}}</text>
       </view>
     </view>
-    <scroll-view scroll-y class="meeting-content-smallvideo" id="meeting-content-smallvideo" style="width: {{isFullscreen ? '0' :'170px'}}" bindscroll='scroll' scroll-top="{{scrollTop}}">
+    <scroll-view scroll-y class="meeting-content-smallvideo" id="meeting-content-smallvideo" style="width: {{isFullscreen ? '0' :'170px'}}" scroll-top="{{scrollTop}}">
       <view class="meeting-content-smallvideo-box" id="video-{{item.uid}}" wx:for="{{roomUserList}}" data-item="{{item}}" wx:key="index" bind:tap="clickChangeVideo" wx:if="{{item.isRoom && item.isAdmin}}">
         <view class="meeting-content-smallvideo-box-view {{item.uid == currentUid  ? 'active' : ''}}">
           <view class="meeting-content-smallvideo-box-view-avatar {{item.uid == currentUid  ? 'active' : ''}}" wx:if="{{!item.enableCamera}}">
@@ -38,8 +38,8 @@
             </view>
           </view>
           <view class="meeting-content-smallvideo-box-view-canvas" wx:if="{{item.src}}">
-            <live-pusher wx:if="{{user.uid === item.uid}}" url="{{item.src}}" mode="RTC" object-fit="contain" bindstatechange="recorderStateChange" background-mute enable-mic="{{footerList[1].active}}" enable-camera max-bitrate="500" min-bitrate="200" autopush enable-agc enable-ans device-position="front" class="meeting-content-smallvideo-box-view-canvas-play" data-uid="{{item.uid}}" bindaudiovolumenotify="playerAudioVolumenotify" beauty='{{9}}' whiteness='{{9}}' />
+            <live-pusher wx:if="{{user.uid === item.uid}}" url="{{item.src}}" mode="RTC" object-fit="contain" background-mute enable-mic="{{footerList[1].active}}" enable-camera max-bitrate="500" min-bitrate="200" autopush enable-agc enable-ans device-position="front" class="meeting-content-smallvideo-box-view-canvas-play" data-uid="{{item.uid}}" bindaudiovolumenotify="playerAudioVolumenotify" beauty='{{9}}' whiteness='{{9}}' />
-            <live-player src="{{item.src}}" class="meeting-content-smallvideo-box-view-canvas-play" mode="RTC" autoplay="true" bindstatechange="playerStateChange" object-fit="contain" data-uid="{{item.uid}}" bindaudiovolumenotify="playerAudioVolumenotify" wx:else />
+            <live-player src="{{item.src}}" class="meeting-content-smallvideo-box-view-canvas-play" mode="RTC" autoplay="true" object-fit="contain" data-uid="{{item.uid}}" bindaudiovolumenotify="playerAudioVolumenotify" wx:else />
           </view>
           <view class="meeting-content-smallvideo-box-view-user">
             <view class="meeting-content-smallvideo-box-view-user-view" wx:if="{{item.roleId === '1' || item.roleId === '3'}}" style=" background:#FDC229">

utils/agora.ts

@@ -22,13 +22,10 @@ export const agora = {
   destroy: async (callback?) => {
     if (client) {
       await client.leave()
-      await client.destroy(() => {
+      await client.destroy()
-        callback?.()
       client = '';
-      })
-    } else {
-      callback?.()
     }
+    callback?.()
   },
   // 设置角色
   setRole: async (isRoomManager: boolean, callBack?: Function) => {
@@ -54,9 +51,11 @@ export const agora = {
     await agora.init(callback)
   },
   // 加入频道
-  joinChannel: () => {
+  joinChannel: async (roleStatus: boolean, callBack: Function) => {
-    client.join(option.token, option.channelId, option.uid, () => {
+    await client.join(option.token, option.channelId, option.uid, () => {
-      agora.setRole(false)
+      agora.setRole(roleStatus, (url) => {
+        callBack(url)
+      })
     })
   },
   // 刷新token