优化接流限制

src/page/Meeting/index.tsx

@@ -174,6 +174,7 @@ const Meeting: React.FC = () => {
     }
   });
   const [isVideoFullScreen, setIsVideoFullScreen] = useState<boolean>(false)
+  const [observer, setObserver] = useState<IntersectionObserver>()
   let userInfo = JSON.parse(storage.getItem('user') as string)
   const msgTips = '您不是管理员或发言人，无法开启此功能！'
   useEffect(() => {
@@ -583,6 +584,33 @@ const Meeting: React.FC = () => {
     return () => clearTimeout(timer);
   }, [isClicked]);
 
+  useEffect(() => {
+    const elements = document.querySelectorAll('.intersectionObserver-view');
+    if (elements.length && currentVideoId) {
+      elements.forEach(element => {
+        observer?.unobserve(element);
+      });
+      const observerObject = new IntersectionObserver(async (entries: IntersectionObserverEntry[], _observer: IntersectionObserver) => {
+        entries.forEach(async (entry) => {
+          if (entry.target.id !== user.uid) {
+            await agora.muteRemoteVideoStreamEx(Number(entry.target.id), !entry.isIntersecting)
+          }
+        });
+        await agora.muteRemoteVideoStreamEx(Number(currentVideoId), false)
+      }, { threshold: 0.1, root: document.getElementById('videoView') });
+      setObserver(observerObject)
+      elements.forEach(element => {
+        observerObject.observe(element);
+      });
+    }
+    return () => {
+      elements.forEach(element => {
+        observer?.unobserve(element);
+      });
+      observer?.disconnect();
+    }
+  }, [roomUserList, currentVideoId]);
+
   // 声网初始化
   const agoraInit = async () => {
     await agora.init(true)
@@ -1510,7 +1538,7 @@ const Meeting: React.FC = () => {
                 {roomUserList.map((item: any, index: number) => {
                   return (index <= 19 && item.isRoom && item.isAdmin ? <div
                     id={item.uid}
-                    className={`${styles.meetingContentSwiperCard}`}
+                    className={`${styles.meetingContentSwiperCard} intersectionObserver-view`}
                     key={index}
                     onClick={() => {
                       if (String(isShare) === item.screenShareId) {

src/utils/package/agora.ts

@@ -295,6 +295,10 @@ export const agora = {
     await agora.stopCameraCapture();
     await rtcEngine.leaveChannelEx({ channelId: option.channelId + 'a', localUid: Number('1' + option.screenShareId) })
   },
+  // 停止/恢复接收指定的视频流。
+  muteRemoteVideoStreamEx: async (uid: number, mute: boolean) => {
+    await rtcEngine.muteRemoteVideoStreamEx(uid, mute, { channelId: option.channelId, localUid: Number(option.uid) })
+  },
   // 取消或恢复订阅指定远端用户的音频流
   muteRemoteVideoStream: async (uid: number, mute: boolean) => {
     rtcEngine.muteRemoteVideoStream(uid, mute)