From 9be4e893027b7c437cf8a0ec5d042ea345c325ca Mon Sep 17 00:00:00 2001
From: yj <1336058017@qq.com>
Date: Tue, 6 Aug 2024 17:18:39 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/Meeting/index.tsx | 52 +++++++++++++++++---------------------
 src/utils/package/agora.ts | 33 ++++++++++++------------
 2 files changed, 40 insertions(+), 45 deletions(-)

diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx
index 041d853..7d29f14 100644
--- a/src/page/Meeting/index.tsx
+++ b/src/page/Meeting/index.tsx
@@ -161,10 +161,10 @@ const Meeting: React.FC = () => {
     agora.setCameraCapture()
     agora.setJoinChannel({
       channelId: state.channelId,
-      userid: userInfo.account,
+      uid: userInfo.uid,
       token: state.token,
     })
-    setCurrentVideoId(userInfo.account)
+    setCurrentVideoId(userInfo.uid)
     storage.setItem('noViewChatList', 0)
     window.addEventListener('customStorageChange', handleCustomStorageChange);
     window.addEventListener('online', handleNetworkChange);
@@ -183,7 +183,7 @@ const Meeting: React.FC = () => {
 
   useEffect(() => {
     roomUserList.forEach((item: any) => {
-      if (item.account === user.account) {
+      if (item.uid === user.uid) {
         const footerListTemplate = [...footerList]
         footerListTemplate[0][0].title = item.enableMicr ? '关闭声音' : '开启声音'
         footerListTemplate[0][0].active = !item.enableMicr
@@ -253,18 +253,18 @@ const Meeting: React.FC = () => {
   }, [currentVideoId])
 
   useEffect(() => {
-    const userItem = allUserList.find((item: any) => item.account === currentLookUserAccount)
+    const userItem = allUserList.find((item: any) => item.uid === currentLookUserAccount)
     if (userItem) {
-      if (userItem.account === user.account) {
+      if (userItem.uid === user.uid) {
         // agora.setupLocalVideo({
-        //   account: Number(userItem.account),
+        //   account: Number(userItem.uid),
         //   view: document.getElementById(`look-video`) as HTMLElement,
         //   channelId: state.channelId,
         //   sourceType: VideoSourceType.VideoSourceCameraPrimary,
         // })
       } else {
         // agora.setupRemoteVideoJoin({
-        //   account: Number(userItem.account),
+        //   account: Number(userItem.uid),
         //   view: document.getElementById(`look-video`) as HTMLElement,
         //   channelId: state.channelId,
         //   sourceType: VideoSourceType.VideoSourceCameraPrimary,
@@ -371,7 +371,7 @@ const Meeting: React.FC = () => {
         break;
       case '录制':
         const setting = await JSON.parse(storage.getItem('setting') as string)
-        if (currentVideoId === user.account) {
+        if (currentVideoId === user.uid) {
           message.error('请勿自己录制自己！')
         } else {
           try {
@@ -454,12 +454,14 @@ const Meeting: React.FC = () => {
       if (res[0].code === 200 && res[1].code === 200) {
         setRoomUserList(res[0].data.map((item: any) => {
           return {
+            ...item,
             isShow: true,
-            ...item
+            uid: item.id,
           }
         }))
         res[1].data.items.forEach((item: any) => {
-          const itemUser = res[0].data.find((row: any) => row.account === item.account)
+          item.uid = item.id;
+          const itemUser = res[0].data.find((row: any) => row.id === item.id)
           if (itemUser) {
             item.isRoom = true;
             for (const itemUserKey in itemUser) {
@@ -570,8 +572,8 @@ const Meeting: React.FC = () => {
     return ''
   }
   // 设置单个视频样式
-  const setMeetingContentSwiperCardClass = (account: string, bool: boolean = false): string => {
-    if ((bool || currentVideoId === account) && (meetingMode === 'StandardMode' || meetingMode === 'SpeakerMode')) {
+  const setMeetingContentSwiperCardClass = (uid: string, bool: boolean = false): string => {
+    if ((bool || currentVideoId === uid) && (meetingMode === 'StandardMode' || meetingMode === 'SpeakerMode')) {
       switch (meetingMode) {
         case 'StandardMode':
           return styles.meetingContentSwiperCardStandardMode
@@ -601,7 +603,7 @@ const Meeting: React.FC = () => {
           <div className={styles.meetingContentBody}>
             <div className={`${styles.meetingContentBodyLeft} drag`}>
               <div className={getMeetingContentBodyLeftModeClass()} >
-                {/* ${setMeetingContentSwiperCardClass(item.account)} */}
+                {/* ${setMeetingContentSwiperCardClass(item.uid)} */}
                 {allUserList.map((item: any, index: number) => {
                   return (
                     item.isRoom ?
@@ -612,10 +614,10 @@ const Meeting: React.FC = () => {
                           if (footerList[1][3].active) {
                             return message.error('视频录制中请勿切换，或结束录制再切换！')
                           }
-                          setCurrentVideoId(item.account)
+                          setCurrentVideoId(item.uid)
                         }}
                       >
-                        <div className={`${styles.meetingContentSwiperCardVdeio} ${currentVideoId === item.account ? styles.active : ''}`} id={`video-${item.account}`}>
+                        <div className={`${styles.meetingContentSwiperCardVdeio} ${currentVideoId === item.uid ? styles.active : ''}`} id={`video-${item.uid}`}>
                           <div className={styles.meetingContentSwiperCardVdeioLoading}>
                             <Avatar name={item.userName} />
                           </div>
@@ -626,19 +628,11 @@ const Meeting: React.FC = () => {
                   )
                 }
                 )}
-                {currentLookUserAccount ?
-                  <div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass(currentLookUserAccount)}`}>
-                    <div className={`${styles.meetingContentSwiperCardVdeio}`} id={`look-video`}>
-
-                    </div>
+                <div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass(currentLookUserAccount, true)}`}>
+                  <div className={`${styles.meetingContentSwiperCardVdeio}`} id='look-video'>
+                    <span style={{ color: 'white', position: 'absolute', transform: 'translate(-50%,-50%)', left: '50%', top: '50%' }}>暂无视频</span>
                   </div>
-                  :
-                  <div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass(currentLookUserAccount, true)}`}>
-                    <div className={`${styles.meetingContentSwiperCardVdeio}`} style={{ color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-                      暂无视频
-                    </div>
-                  </div>
-                }
+                </div>
               </div>
             </div>
             {
@@ -702,7 +696,7 @@ const Meeting: React.FC = () => {
                                   postOpenCamera(!item.enableCamera, item.id)
                                 }} title={item.enableCamera ? '关闭视频' : '打开视频'} />
                               </div>
-                              {item.account !== user.account && user.roleId === '1' ? <div className='drag'>
+                              {item.uid !== user.uid && user.roleId === '1' ? <div className='drag'>
                                 {!item.isManager ? <Button
                                   type="primary"
                                   className='m-ant-btn'
@@ -898,7 +892,7 @@ const meetingContentUser = (item: any) => {
 const meetingContentError = (currentVideoId: any, item: any) => {
   return (
     <>
-      <div className={`${styles.meetingContentError} ${currentVideoId === item.account ? styles.active : ''}`}>
+      <div className={`${styles.meetingContentError} ${currentVideoId === item.uid ? styles.active : ''}`}>
         <Avatar name={item.userName} />
       </div>
     </>
diff --git a/src/utils/package/agora.ts b/src/utils/package/agora.ts
index d07920b..8198278 100644
--- a/src/utils/package/agora.ts
+++ b/src/utils/package/agora.ts
@@ -16,7 +16,7 @@ const option: any = {
   appId: 'dcfc466a6ecb4a1f972630065dfb1e75',
   token: '',
   channelId: '',
-  userid: '',
+  uid: ''
 }
 let iMediaRecorder: any = '';
 let rtcEngine: any = '';
@@ -80,7 +80,7 @@ const agora = {
     await rtcEngine.setupLocalVideo({
       renderMode: RenderModeType.RenderModeFit,
       sourceType: item.sourceType,
-      uid: item.account,
+      uid: item.uid,
       view: item.view,
       setupMode: VideoViewSetupMode.VideoViewSetupAdd,
     });
@@ -91,7 +91,7 @@ const agora = {
       {
         renderMode: RenderModeType.RenderModeFit,
         sourceType: VideoSourceType.VideoSourceRemote,
-        uid: item.account,
+        uid: item.uid,
         view: item.view,
         setupMode: VideoViewSetupMode.VideoViewSetupAdd,
       },
@@ -104,7 +104,7 @@ const agora = {
       {
         renderMode: RenderModeType.RenderModeFit,
         sourceType: VideoSourceType.VideoSourceRemote,
-        uid: item.account,
+        uid: item.uid,
         view: item.view,
         setupMode: VideoViewSetupMode.VideoViewSetupRemove,
       },
@@ -126,7 +126,7 @@ const agora = {
   },
   // 加入频道
   joinChannel: () => {
-    rtcEngine.joinChannel(option.token, option.channelId, option.userid, {
+    rtcEngine.joinChannel(option.token, option.channelId, option.uid, {
       autoSubscribeAudio: true,
       autoSubscribeVideo: true,
       publishMicrophoneTrack: true,
@@ -152,8 +152,8 @@ const agora = {
     agora.stopScreenCapture()
     // rtcEngine.destroyRendererByConfig(option.sourceType, option.channelId, option.account)
     agora.setupLocalVideo({
-      account: Number(option.userid),
-      view: document.getElementById(`video-${option.userid}`),
+      account: Number(option.uid),
+      view: document.getElementById(`video-${option.uid}`),
       channelId: option.channelId,
       sourceType: VideoSourceType.VideoSourceCameraPrimary,
     })
@@ -163,7 +163,7 @@ const agora = {
   setJoinChannel: async (data: any) => {
     option.token = data.token;
     option.channelId = data.channelId;
-    option.userid = Number(data.userid);
+    option.uid = Number(data.uid);
     agora.joinChannel()
   },
   // 桌面捕获音频和视频的媒体源的信息
@@ -174,16 +174,10 @@ const agora = {
   setDesktopCapturerVideo: async (targetSource: any) => {
     // await rtcEngine.stopCameraCapture(option.sourceType)
     // rtcEngine.destroyRendererByConfig(option.sourceType, option.channelId, option.account)
-    await agora.setupLocalVideo({
-      account: Number(option.userid),
-      view: document.getElementById(`look-video`),
-      channelId: option.channelId,
-      sourceType: VideoSourceType.VideoSourceScreen,
-    })
-    agora.stopScreenCapture();
+    const user = JSON.parse(storage.getItem('user') as string)
     rtcEngine.joinChannelEx(
       option.token,
-      { channelId: option.channelId, localUid: option.account },
+      { channelId: option.channelId, localUid: Number(user.uid) },
       {
         autoSubscribeAudio: false,
         autoSubscribeVideo: false,
@@ -193,6 +187,13 @@ const agora = {
         publishScreenTrack: true,
       }
     );
+    await agora.setupLocalVideo({
+      account: Number(user.uid),
+      view: document.getElementById(`look-video`),
+      channelId: option.channelId,
+      sourceType: VideoSourceType.VideoSourceScreen,
+    })
+    agora.stopScreenCapture();
     if (
       targetSource.type ===
       ScreenCaptureSourceType.ScreencapturesourcetypeScreen