|
|
@@ -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>
|
|
|
|