订阅状态变化的三种处理情况

需要使用的关键SDK定义和方法
参考现有视频流控制的实现方式
明确的完成标准

client/mobile/pages_classroom.tsx

@@ -389,7 +389,59 @@ export const ClassroomPage = () => {
       channel: string
     ) => {
       console.log(`屏幕分享订阅状态变更：uid=${userId}, oldState=${oldState}, newState=${newState}`);
-    })
+
+      switch(newState) {
+        case 3: // 订阅成功
+          try {
+            console.log('开始创建屏幕分享视频元素');
+            
+            // 检查是否已有该用户的屏幕分享元素
+            if (remoteVideoElMap.current[`screen_${userId}`]) {
+              console.log(`用户 ${userId} 的屏幕分享元素已存在`);
+              return;
+            }
+            
+            const video = document.createElement('video');
+            video.autoplay = true;
+            video.playsInline = true;
+            video.className = 'w-80 h-45 mr-2 mb-2 bg-black';
+            
+            if (!remoteVideoContainer.current) {
+              console.error('远程视频容器未找到');
+              return;
+            }
+            
+            remoteVideoContainer.current.appendChild(video);
+            remoteVideoElMap.current[`screen_${userId}`] = video;
+            
+            // 设置远程视图配置
+            aliRtcEngine.current!.setRemoteViewConfig(
+              video,
+              userId,
+              AliRtcVideoTrack.AliRtcVideoTrackScreen
+            );
+            
+            console.log(`已订阅用户 ${userId} 的屏幕分享流`);
+            showMessage(`已显示用户 ${userId} 的屏幕分享`);
+          } catch (err) {
+            console.error(`订阅用户 ${userId} 屏幕分享流失败:`, err);
+            showMessage(`订阅用户 ${userId} 屏幕分享流失败`);
+          }
+          break;
+          
+        case 1: // 取消订阅
+          console.log(`取消订阅用户 ${userId} 的屏幕分享流`);
+          removeRemoteVideo(userId, 'screen');
+          break;
+          
+        case 2: // 订阅中
+          console.log(`正在订阅用户 ${userId} 的屏幕分享流...`);
+          break;
+          
+        default:
+          console.warn(`未知屏幕分享订阅状态: ${newState}`);
+      }
+    });
   };
 
   // 获取学生列表
@@ -488,9 +540,7 @@ export const ClassroomPage = () => {
       listenMessageEvents();
 
       // 加入RTC频道
-      await joinRtcChannel(classId, {
-        publishVideo:false
-      });
+      await joinRtcChannel(classId);
 
       setIsJoinedClass(true);
       setErrorMessage('');
@@ -665,15 +715,6 @@ export const ClassroomPage = () => {
         
         // 加入RTC频道
         await joinRtcChannel(response.groupId);
-        // try {
-        //   await joinRtcChannel(response.groupId);
-        // } catch (err: any) {
-        //   showToast('error', `加入RTC频道失败: ${err.message}`);
-        //   // 回滚IM状态
-        //   await groupManager.leaveGroup(response.groupId);
-        //   setIsJoinedClass(false);
-        //   throw new Error(`创建成功但加入RTC失败: ${err.message}`);
-        // }
         
         // 记录创建时间
         const createTime = new Date();
@@ -755,7 +796,7 @@ export const ClassroomPage = () => {
           publishAudio: isAudioOn,
           publishScreen: isScreenSharing
         });
-        aliRtcEngine.current?.setLocalViewConfig('localPreviewer', AliRtcVideoTrack.AliRtcVideoTrackCamera);
+        await aliRtcEngine.current?.setLocalViewConfig('localPreviewer', AliRtcVideoTrack.AliRtcVideoTrackCamera);
         await aliRtcEngine.current?.startPreview();
       }
       setIsCameraOn(!isCameraOn);
@@ -785,30 +826,31 @@ export const ClassroomPage = () => {
   const toggleScreenShare = async () => {
     try {
       if (isScreenSharing) {
-        await aliRtcEngine.current?.stopPreviewScreen();
         await leaveRtcChannel();
         await joinRtcChannel(classId, {
           publishVideo: isCameraOn,
           publishAudio: isAudioOn,
           publishScreen: false
         });
+        await aliRtcEngine.current?.stopPreviewScreen();
       } else {
         await leaveRtcChannel();
         // 设置屏幕分享预览视图
-        aliRtcEngine.current?.setLocalViewConfig(
-          'screenPreviewer',
-          AliRtcVideoTrack.AliRtcVideoTrackScreen
-        );
-        await aliRtcEngine.current?.startPreviewScreen({
-          audio: isAudioOn,  // 根据音频状态决定是否共享音频
-          videoTrack: undefined,  // 使用默认视频轨道
-          audioTrack: undefined   // 使用默认音频轨道
-        });
         await joinRtcChannel(classId, {
           publishVideo: isCameraOn,
           publishAudio: isAudioOn,
           publishScreen: true
         });
+        await aliRtcEngine.current?.setLocalViewConfig(
+          'screenPreviewer',
+          AliRtcVideoTrack.AliRtcVideoTrackScreen
+        );
+        // await aliRtcEngine.current?.startPreviewScreen({
+        //   audio: isAudioOn,  // 根据音频状态决定是否共享音频
+        //   videoTrack: undefined,  // 使用默认视频轨道
+        //   audioTrack: undefined   // 使用默认音频轨道
+        // });
+        await aliRtcEngine.current?.startPreviewScreen()
       }
       setIsScreenSharing(!isScreenSharing);
     } catch (err) {
@@ -1221,7 +1263,7 @@ export const ClassroomPage = () => {
                 <video
                   id="screenPreviewer"
                   muted
-                  className="w-full h-48 bg-black hidden"
+                  className="w-full h-48 bg-black"
                 ></video>
                 <div className="absolute bottom-2 right-2">
                   <button