屏幕共享优化

src/page/Meeting/index.tsx

@@ -3,7 +3,7 @@ import { useEffect, useRef, useState } from "react";
 import Operation from '@/components/Operation';
 import SpeakerModeModal from '@/components/SpeakerModeModal';
 import InvitingPersonnelModal from '@/components/InvitingPersonnelModal';
-import { Button, Input, Popover, Modal, Checkbox, message } from "antd";
+import { Button, Input, Popover, Modal, Checkbox, message, Popconfirm } from "antd";
 import { SearchOutlined } from '@ant-design/icons';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { thumbImageBufferToBase64 } from '@/utils/package/base64'
@@ -119,7 +119,9 @@ const Meeting: React.FC = () => {
   const [currentLookUserAccount, setCurrentLookUserAccount] = useState<any>('')
   const [recorder, setRecorder] = useState<any>('')
   const [mediaStream, setMediaStream] = useState<any>('')
-  const [isShare, setIsShare] = useState<any>(false)
+  const [isShare, setIsShare] = useState<any>(null)
+  const [isSharePopConfirm, setIsSharePopConfirm] = useState<any>(false)
+  const [isShareUser, setIsShareUser] = useState<any>(null)
   const [currentLookUserStatus, setCurrentLookUserStatus] = useState<1 | 2 | 3 | 4>(1)
   let userInfo = JSON.parse(storage.getItem('user') as string)
   useEffect(() => {
@@ -160,7 +162,7 @@ const Meeting: React.FC = () => {
       },
       onUserJoined: async (info: any, remoteUid: any, _elapsed: any) => {
         if (String(remoteUid).length === 9) {
-          setIsShare(true)
+          setIsShare(remoteUid)
         } else {
           await getRoomUser()
           setTimeout(async () => {
@@ -178,7 +180,7 @@ const Meeting: React.FC = () => {
       },
       onUserOffline: async (info: any, remoteUid: any, _reason: any) => {
         if (String(remoteUid).length === 9) {
-          setIsShare(false)
+          setIsShare(null)
         }
         await agora.setupRemoteVideo({
           uid: Number(remoteUid),
@@ -250,6 +252,13 @@ const Meeting: React.FC = () => {
     }
   }, [currentVideoId]);
 
+  useEffect(() => {
+    if (isShare) {
+      const item = roomUserList.find((item: any) => item.screenShareId === String(isShare))
+      setIsShareUser(item || null)
+    }
+  }, [isShare, roomUserList]);
+
   useEffect(() => {
     onSignalr(async (item: any) => {
       switch (item.key) {
@@ -277,6 +286,7 @@ const Meeting: React.FC = () => {
           // 1:全员退出会议
           // 2:设置取消管理员
           // 3:踢出房间
+          // 4:屏幕共享
           switch (item.type) {
             case 1:
               leaveChannel()
@@ -285,6 +295,9 @@ const Meeting: React.FC = () => {
             case 3:
               getRoomUser()
               break;
+            case 4:
+              console.log(isShareUser, user);
+              break;
           }
           break;
         case 'ForceExitRoom':
@@ -743,6 +756,20 @@ const Meeting: React.FC = () => {
     }
     return ''
   }
+
+  // 是否有人分享屏幕确认框
+  const handleOpenChange = (newOpen: boolean): void => {
+    if (newOpen) {
+      if (isShare) {
+        setIsSharePopConfirm(true)
+      } else {
+        clickSharedScreen()
+        setIsSharePopConfirm(false)
+      }
+    } else {
+      setIsSharePopConfirm(false)
+    }
+  };
   return (
     <>
       <div className={styles.meeting} onClick={() => {
@@ -1092,8 +1119,28 @@ const Meeting: React.FC = () => {
               }} checked={isFluencyPriority}>流畅度优先</Checkbox>
             </div>
             <div>
-              <Button type="primary" onClick={() => { setIsSharedScreenModal(false) }} style={{ backgroundColor: '#31353A', marginRight: '14px' }}>取消</Button>
-              <Button type="primary" className='m-ant-btn' onClick={() => clickSharedScreen()}>共享</Button>
+              <Button type="primary" onClick={() => {
+                setIsSharedScreenModal(false)
+                setIsSharePopConfirm(false)
+              }} style={{ backgroundColor: '#31353A', marginRight: '14px' }}>取消</Button>
+              <Popconfirm
+                title="提示"
+                description={`用户${isShareUser?.userName}正在屏幕，是否继续共享？`}
+                open={isSharePopConfirm}
+                onOpenChange={handleOpenChange}
+                onConfirm={async () => {
+                  await onInvoke('sendOper', {
+                    roomNum: state.channelId,
+                    type: 4,
+                  })
+                  clickSharedScreen()
+                }}
+                onCancel={() => { }}
+                okText="是"
+                cancelText="否"
+              >
+                <Button type="primary" className='m-ant-btn'>共享</Button>
+              </Popconfirm>
             </div>
           </div>
         </div>

src/utils/package/signalr.ts

@@ -106,6 +106,7 @@ export const onInvoke = async (str: string, data: any) => {
       // 1:全员退出会议
       // 2:设置取消管理员
       // 3:踢出房间
+      // 4:屏幕共享
       await connection.invoke(str, data.roomNum, data.type)
       break;
   }