Просмотр исходного кода

添加了音频和屏幕分享的独立状态管理
实现了音频和屏幕分享的单独开关功能
在UI中添加了对应的控制按钮
所有功能都可以独立控制且互不影响

yourname 9 месяцев назад
Родитель
Сommit
8880755c20
1 измененных файлов с 54 добавлено и 6 удалено
  1. 54 6
      client/mobile/pages_classroom.tsx

+ 54 - 6
client/mobile/pages_classroom.tsx

@@ -150,6 +150,8 @@ export const ClassroomPage = () => {
   // 状态管理
   const [userId, setUserId] = useState<string>('');
   const [isCameraOn, setIsCameraOn] = useState<boolean>(false);
+  const [isAudioOn, setIsAudioOn] = useState<boolean>(false);
+  const [isScreenSharing, setIsScreenSharing] = useState<boolean>(false);
   const [className, setClassName] = useState<string>('');
   const [role, setRole] = useState<Role>(Role.Student);
   const [classId, setClassId] = useState<string>('');
@@ -761,6 +763,38 @@ export const ClassroomPage = () => {
     }
   };
 
+  // 切换音频状态
+  const toggleAudio = async () => {
+    try {
+      await leaveRtcChannel();
+      await joinRtcChannel(classId, {
+        publishVideo: isCameraOn,
+        publishAudio: !isAudioOn,
+        publishScreen: isScreenSharing
+      });
+      setIsAudioOn(!isAudioOn);
+    } catch (err) {
+      console.error('切换音频状态失败:', err);
+      showToast('error', '切换音频失败');
+    }
+  };
+
+  // 切换屏幕分享状态
+  const toggleScreenShare = async () => {
+    try {
+      await leaveRtcChannel();
+      await joinRtcChannel(classId, {
+        publishVideo: isCameraOn,
+        publishAudio: isAudioOn,
+        publishScreen: !isScreenSharing
+      });
+      setIsScreenSharing(!isScreenSharing);
+    } catch (err) {
+      console.error('切换屏幕分享失败:', err);
+      showToast('error', '切换屏幕分享失败');
+    }
+  };
+
   // 清理资源
   useEffect(() => {
     return () => {
@@ -1142,12 +1176,26 @@ export const ClassroomPage = () => {
                   muted
                   className="w-full h-48 bg-black"
                 ></video>
-                <button
-                  onClick={toggleCamera}
-                  className="absolute bottom-2 right-2 px-3 py-1 bg-blue-600 text-white rounded-md"
-                >
-                  {isCameraOn ? '关闭摄像头' : '开启摄像头'}
-                </button>
+                <div className="absolute bottom-2 right-2 flex space-x-2">
+                  <button
+                    onClick={toggleCamera}
+                    className={`px-3 py-1 rounded-md ${isCameraOn ? 'bg-red-600' : 'bg-blue-600'} text-white`}
+                  >
+                    {isCameraOn ? '关闭摄像头' : '开启摄像头'}
+                  </button>
+                  <button
+                    onClick={toggleAudio}
+                    className={`px-3 py-1 rounded-md ${isAudioOn ? 'bg-red-600' : 'bg-blue-600'} text-white`}
+                  >
+                    {isAudioOn ? '关闭麦克风' : '开启麦克风'}
+                  </button>
+                  <button
+                    onClick={toggleScreenShare}
+                    className={`px-3 py-1 rounded-md ${isScreenSharing ? 'bg-red-600' : 'bg-blue-600'} text-white`}
+                  >
+                    {isScreenSharing ? '停止分享' : '分享屏幕'}
+                  </button>
+                </div>
               </div>
             </div>