优化

src/components/UserVideo/index.module.scss

@@ -65,7 +65,7 @@
       height: 0;
 
       .userVideoContentListItem {
-        height: 20%;
+        height: 10%;
         width: calc(100% / 3 - 20px);
         padding: 10px;
 

src/components/UserVideo/index.tsx

@@ -1,15 +1,13 @@
 
 import styles from '@/components/UserVideo/index.module.scss'
 import { GetPolling } from '@/api/Meeting';
-import { storage } from '@/utils';
 import { agora } from '@/utils/package/agora';
 import { Button, Empty, Select, message } from 'antd';
 import { useEffect, useState } from "react";
 import { useLocation } from 'react-router';
+import Avatar from '../Avatar';
 const UserVideo: React.FC = () => {
-  let userInfo = JSON.parse(storage.getItem('user') as string)
   const { state } = useLocation();
-  const [user, setUser] = useState<any>({});
   const [from, setFrom] = useState<any>({
     cycleIntervalList: [
       { value: 30, label: '30秒' },
@@ -31,7 +29,6 @@ const UserVideo: React.FC = () => {
   const [timeStatus, setTimeStatus] = useState(false);
   const [userList, setUserList] = useState([]);
   useEffect(() => {
-    setUser(userInfo)
     window.addEventListener('customStorageChange', handleCustomStorageChange);
     return () => {
       window.removeEventListener('customStorageChange', handleCustomStorageChange);
@@ -65,11 +62,11 @@ const UserVideo: React.FC = () => {
 
   useEffect(() => {
     userList.forEach((item: any) => {
-      // agora.meetingMonitoringSetupRemoteVideoJoin({
-      //   uid: Number('1' + item.screenShareId),
-      //   view: document.getElementById(`video-${item.uid}`),
-      //   channelId: getQueryParameterRegex('channelId'),
-      // })
+      agora.setupRemoteVideoJoin({
+        uid: Number('1' + item.screenShareId),
+        view: document.getElementById(`video-${item.screenShareId}`),
+        channelId: state.channelId,
+      })
     })
   }, [userList])
   // 监听缓存变化
@@ -138,8 +135,8 @@ const UserVideo: React.FC = () => {
             {
               userList.map((item: any, index: number) => {
                 return <div className={styles.userVideoContentListItem} key={index}>
-                  <div className={styles.userVideoContentListItemVideo} id={`video-${item.uid}`}>
-
+                  <div className={styles.userVideoContentListItemVideo} id={`video-${item.screenShareId}`}>
+                    <Avatar name={item.userName} />
                   </div>
                 </div>
               })