src/page/Meeting/index.module.scss

@@ -105,45 +105,17 @@
     top: 0;
     z-index: 3000;
 
-    .meetingAbsoluteVideoView {
+    .meetingAbsoluteLoading {
+      background: black;
       position: absolute;
-      z-index: 1;
-      width: 100%;
       left: 0;
       top: 0;
-
+      width: 100%;
-      >div {
+      height: 100%;
-        height: 160px;
+      display: flex;
-        position: relative;
+      justify-content: center;
-
+      align-items: center;
-        .meetingAbsoluteUser {
+      z-index: 1;
-          position: absolute;
-          left: 0;
-          bottom: 0;
-          font-size: 13px;
-          color: #EEEEEE;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-          overflow: hidden;
-          background-color: rgba(0, 0, 0, 0.62);
-          z-index: 1;
-          padding: 2px 4px;
-          box-sizing: border-box;
-          width: 100%;
-        }
-
-        .meetingAbsoluteLoading {
-          background: black;
-          position: absolute;
-          left: 0;
-          top: 0;
-          width: 100%;
-          height: 100%;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-        }
-      }
     }
 
     .meetingAbsoluteText {
@@ -262,6 +234,7 @@
 
         #videoView {
           position: relative;
+          border: 1px red solid;
         }
 
         .standardModeIcon {
@@ -636,7 +609,7 @@
         height: 100%;
 
         .meetingUserList {
-          width: 340px;
+          width: 300px;
           height: 100%;
           padding: 10px 0 20px;
           box-sizing: border-box;
@@ -682,18 +655,11 @@
                 align-items: center;
 
                 >span {
+                  font-size: 14px;
                   color: #F3F3F5;
                   margin-left: 4px;
                   display: flex;
-                  flex-direction: column;
+                  align-items: center;
-
-                  >span:nth-child(1) {
-                    font-size: 13px;
-                  }
-
-                  >span:nth-child(2) {
-                    font-size: 12px;
-                  }
                 }
 
                 >div {

src/page/Meeting/index.tsx

@@ -1164,26 +1164,13 @@ const Meeting: React.FC = () => {
 
   useEffect(() => {
     if (isScreenCapture) {
-      roomUserList
+      agora.setupLocalVideo({
-        .filter((item: any) => item.isRoom && item.isAdmin).forEach(async (item: any) => {
+        uid: Number(user.uid),
-          if (user.uid === item.uid) {
+        view: document.getElementById(`meetingAbsoluteVideo`) as HTMLElement,
-            await agora.setupLocalVideo({
+        channelId: state.channelId,
-              uid: Number(user.uid),
+        sourceType: VideoSourceType.VideoSourceCameraPrimary,
-              view: document.getElementById(`meeting-absolute-video-${item.uid}`),
+        type: true
-              channelId: state.channelId,
+      })
-              sourceType: VideoSourceType.VideoSourceCameraPrimary,
-              type: true
-            })
-          } else {
-            await agora.setupRemoteVideoJoin({
-              uid: Number(item.uid),
-              view: document.getElementById(`meeting-absolute-video-${item.uid}`),
-              channelId: state.channelId,
-              renderMode: RenderModeType.RenderModeHidden,
-              type: true
-            })
-          }
-        });
     }
   }, [isScreenCapture]);
 
@@ -1296,27 +1283,26 @@ const Meeting: React.FC = () => {
   }, [applyUserList]);
 
   useEffect(() => {
-    const className = isScreenCapture ? '.intersectionAbsoluteObserver-view' : '.intersectionObserver-view';
+    const elements = document.querySelectorAll('.intersectionObserver-view');
-    const rootId = isScreenCapture ? 'meetingAbsoluteVideoView' : 'videoView';
+    if (elements.length && currentVideoId) {
-    const rootElement = document.getElementById(rootId);
+      elements.forEach(element => {
-    const elements = document.querySelectorAll(className);
+        observer?.unobserve(element);
-    elements.forEach(element => {
+      });
-      observer?.unobserve(element);
+      const observerObject = new IntersectionObserver(async (entries: IntersectionObserverEntry[], _observer: IntersectionObserver) => {
-    });
+        setIsScreenCapture((bool: boolean) => {
-    observer?.disconnect();
+          entries.forEach(async (entry) => {
-    if (elements.length && currentVideoId && rootElement) {
+            if (entry.target.id !== user.uid) {
-      const observerObject = new IntersectionObserver(
+              await agora.muteRemoteVideoStreamEx(Number(entry.target.id), bool ? true : !entry.isIntersecting)
-        (entries: IntersectionObserverEntry[]) => {
-          entries.forEach(entry => {
-            const dataUid = (entry.target as HTMLElement).getAttribute('data-uid');
-            if (dataUid !== user.uid) {
-              agora.muteRemoteVideoStreamEx(Number(dataUid), !entry.isIntersecting);
             }
           });
-        },
+          return bool
-        { threshold: 0, root: rootElement }
+        })
-      );
+        setIsScreenCapture((bool: boolean) => {
-      setObserver(observerObject);
+          agora.muteRemoteVideoStreamEx(Number(currentVideoId), bool)
+          return bool
+        })
+      }, { threshold: 0, root: document.getElementById('videoView') });
+      setObserver(observerObject)
       elements.forEach(element => {
         observerObject.observe(element);
       });
@@ -1348,7 +1334,7 @@ const Meeting: React.FC = () => {
       });
       observer?.disconnect();
     }
-  }, [roomUserList, currentVideoId, footerList, isScreenCapture]);
+  }, [roomUserList, currentVideoId, footerList]);
 
   // 声网初始化
   const agoraInit = async () => {
@@ -1411,18 +1397,6 @@ const Meeting: React.FC = () => {
                 return res
               })
             }, 1000);
-            setIsScreenCapture(bool => {
-              if (bool) {
-                agora.setupRemoteVideoJoin({
-                  uid: Number(remoteUid),
-                  view: document.getElementById(`meeting-absolute-video-${remoteUid}`),
-                  channelId: connection.channelId,
-                  renderMode: RenderModeType.RenderModeHidden,
-                  type: true
-                })
-              }
-              return bool
-            })
           }
         }
       },
@@ -2166,7 +2140,6 @@ const Meeting: React.FC = () => {
         const isOpen = await getKeyOpenChildWindow('shareScreenWindow')
         setIsScreenCapture(true)
         if (!isOpen) {
-          setIsExpand(false)
           window.electron.createChildWindow('show')
           setKeyOpenChildWindow('shareScreenWindow', true)
           window.electron.setMainWindowSize({
@@ -2232,9 +2205,7 @@ const Meeting: React.FC = () => {
   }
   // 停止共享
   const stopScreenCapture = async (): Promise<void> => {
-    roomUserList.forEach(async (item: any) => {
+    await agora.destroyRendererByView(`meetingAbsoluteVideo`)
-      await agora.destroyRendererByConfig(Number(item.uid), state.channelId)
-    });
     const footerListTemplate = [...footerList]
     await agora.leaveChannelEx(userInfo.screenShareId)
     agora.stopScreenCapture()
@@ -2728,36 +2699,18 @@ const Meeting: React.FC = () => {
         }
         setIsNetworkQuality(false)
       }}>
-        {isScreenCapture ? <div className={`${styles.meetingAbsolute}`}>
+        {isScreenCapture ? <div className={`${styles.meetingAbsolute}`} id='meetingAbsoluteVideo'>
           <div style={{ top: '0px' }} className={`${styles.meetingAbsoluteText}`}>{currentSpeakUser.length ? '正在说话:' + currentSpeakUser.join(';') : '正在说话:'}</div>
-          <div
+          {footerList[0][1].active ? <div className={styles.meetingAbsoluteLoading}>
-            className={`${styles.meetingAbsoluteVideoView}`}
+            <Avatar name={user.userName} />
-            id='meetingAbsoluteVideoView'
+          </div> : null}
-            style={{
-              overflowY: roomUserList.filter((item: any) => item.isRoom).length > 4 && isExpand ? 'auto' : 'hidden',
-              height: isExpand ? `calc((4 * 160px) + 15px)` : '100%'
-            }}>
-            {roomUserList
-              .filter((item: any) => item.isRoom && item.isAdmin)
-              .map((item: any) => (
-                <div id={`meeting-absolute-video-${item.uid}`} style={{
-                  margin: !isExpand ? '0' : '0 auto 5px',
-                  width: !isExpand ? '100%' : '96%',
-                }} data-uid={item.uid} className={`intersectionAbsoluteObserver-view`}>
-                  {isExpand ? <div className={styles.meetingAbsoluteUser}>{item.userName}</div> : null}
-                  {item.enableCamera ? null : <div className={styles.meetingAbsoluteLoading}>
-                    <Avatar name={item.userName} />
-                  </div>}
-                </div>
-              ))}
-          </div>
           <div style={{ bottom: '0px' }} className={`${styles.meetingAbsoluteText} drag`} onClick={() => {
             setIsExpand(!isExpand)
             window.electron.setChildWindow({
-              height: !isExpand ? 4 * 160 + (15 + 20) : 160,
+              height: isExpand ? 160 : 40,
               key: 'main'
             })
-          }}><span>{isExpand ? '收起' : '查看参会者'}</span></div>
+          }}><span>{isExpand ? '展开' : '收起'}</span></div>
         </div> : null}
         {contextMenu ? <div className={styles.meetingContentSwiperCardPopover} style={
           {
@@ -2966,7 +2919,7 @@ const Meeting: React.FC = () => {
               <div className={getMeetingContentBodyLeftModeClass(isAdmin)} id='videoView' style={meetingMode === 'SpeakerMode' && isVideoFullScreen ? { width: '0' } : {}}>
                 {roomUserList.map((item: any, index: number) => {
                   return (item.isRoom && item.isAdmin ? <div
-                    data-uid={item.uid}
+                    id={item.uid}
                     className={`${styles.meetingContentSwiperCard} intersectionObserver-view`}
                     key={index}
                     onClick={() => {