节流

pages/meeting/index.ts

@@ -105,6 +105,7 @@ Page({
           }
         })
       })
+      this.scroll()
     },
     'footerList.**': function (footerList) {
       const footerListTemplate = [...footerList];
@@ -389,7 +390,7 @@ Page({
       if (res.code === 200 && res.data) {
         const currentUser = this.data.roomUserList.find(row => row.uid == res.data || row.screenShareId == res.data)
         this.setData({
-          currentUid: res.data,
+          currentUid: currentUser.uid,
           currentUser,
         })
       }
@@ -789,4 +790,21 @@ Page({
       })
     }
   },
+  scroll() {
+    const query = wx.createSelectorQuery().in(this);
+    query.select('#meeting-content-smallvideo').boundingClientRect()
+    query.selectAll('.meeting-content-smallvideo-box').boundingClientRect()
+    query.exec((res) => {
+      const listItemRects = res[1];
+      listItemRects.forEach(rect => {
+        if (rect.top < res[0].height && rect.top + rect.height > 0) {
+          agora.unmute(Number(rect.dataset.item.uid), 'video')
+        } else {
+          if (rect.dataset.item.uid != this.data.currentUid) {
+            agora.mute(Number(rect.dataset.item.uid), 'video')
+          }
+        }
+      });
+    })
+  },
 })

pages/meeting/index.wxml

@@ -29,10 +29,10 @@
         <text class="meeting-content-video-user-text">{{currentUser.userName}}</text>
       </view>
     </view>
-    <view class="meeting-content-smallvideo" style="width: {{isFullscreen ? '0' :'20%'}}">
+    <scroll-view scroll-y class="meeting-content-smallvideo" id="meeting-content-smallvideo" style="width: {{isFullscreen ? '0' :'20%'}}" bindscroll='scroll'>
       <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 || item.screenShareId == currentUid ? 'active' : ''}}">
-          <view class="meeting-content-smallvideo-box-view-avatar {{item.uid == currentUid || item.screenShareId == currentUid ? 'active' : ''}}" wx:if="{{!item.enableCamera}}">
+        <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}}">
             <view style="transform:scale(0.4);">
               <t-avatar size="small">{{item.avatarName}}</t-avatar>
             </view>
@@ -59,7 +59,7 @@
           </view>
         </view>
       </view>
-    </view>
+    </scroll-view>
   </view>
   <view class="meeting-footer" wx:if="{{!isFullscreen}}">
     <view class="meeting-footer-left">`

utils/agora.ts

@@ -74,5 +74,13 @@ export const agora = {
   // 设置订阅的视频流类型。  0 大流   1 小流
   setRemoteVideoStreamType: async (uid: number, streamType: 0 | 1) => {
     await client.setRemoteVideoStreamType(uid, streamType)
-  }
+  },
+  // 停止接收远端用户的音视频流。
+  mute: async (uid: number, target: string) => {
+    await client.mute(uid, target)
+  },
+  // 恢复接收远端用户的音视频流。
+  unmute: async (uid: number, target: string) => {
+    await client.unmute(uid, target)
+  },
 }