完成视频渲染

WebApp/client/public/onebyone/renderer.js

@@ -159,8 +159,12 @@ class UIRenderer {
                 this.renderRemoteVideo(state.session.remoteUser); // 渲染远程视频
                 this.renderUserList(state.session.localUser, state.session.remoteUser, state.participants); // 渲染用户列表
                 // Host端：精准更新发送者participant tile的占位背景
-                if (changes.participantId) {
-                    this.renderParticipantVideoPlaceholder(changes.participantId, !state.session.remoteUser.mediaState.video);
+                // 只有Host端需要处理participantId对应的tile占位符（Participant端没有其他Participant的视频流）
+                if (changes.participantId && state.session.localUser.isHost) {
+                    // 从participants Map中读取该participant的video状态，而非remoteUser（多Participant场景remoteUser不精确）
+                    const pInfo = state.participants[changes.participantId];
+                    const showPlaceholder = pInfo ? !pInfo.mediaState.video : true;
+                    this.renderParticipantVideoPlaceholder(changes.participantId, showPlaceholder);
                 }
                 break;
             case 'USER_LIST_UPDATE':

WebApp/client/public/onebyone/store.js

@@ -559,19 +559,43 @@ class CallStateManager {
             } else if (data.type === 'media-state-changed') {
                 // 处理媒体状态变化
                 console.log('收到媒体状态变化:', data.data, 'from participant:', data.participantId);
-                // Host端：同步更新participants中对应participant的mediaState
-                if (data.participantId && this.role === 'host' && this.state.participants[data.participantId]) {
+                if (this.role === 'host') {
+                    // Host端：按participantId同步更新participants中对应participant的mediaState
+                    if (data.participantId && this.state.participants[data.participantId]) {
                         this.state.participants[data.participantId].mediaState = {
                             ...this.state.participants[data.participantId].mediaState,
                             ...data.data
                         };
                     }
-                // 更新远端媒体状态（兼容Participant端）
+                    // 更新远端媒体状态
                     this.updateRemoteMedia(data.data, data.participantId);
                     // 通知UI更新participants
                     this.notify({ type: 'PARTICIPANTS_UPDATE', participants: this.state.participants });
                     // Host端广播最新成员列表（含媒体状态）给所有Participant
                     this.broadcastParticipantsList();
+                } else {
+                    // Participant端：根据消息来源更新对应条目
+                    if (data.participantId && this.state.participants[data.participantId]) {
+                        // 来自其他Participant的媒体状态变化：仅更新participants中对应条目
+                        // 不调用updateRemoteMedia，因为Participant端没有其他Participant的视频流
+                        this.state.participants[data.participantId].mediaState = {
+                            ...this.state.participants[data.participantId].mediaState,
+                            ...data.data
+                        };
+                        this.notify({ type: 'PARTICIPANTS_UPDATE', participants: this.state.participants });
+                    } else if (!data.participantId) {
+                        // 来自Host的媒体状态变化（无participantId）：
+                        // 更新participants中Host条目 + 更新remoteUser（Host的视频流是本端远端画面）
+                        if (this.state.participants['host']) {
+                            this.state.participants['host'].mediaState = {
+                                ...this.state.participants['host'].mediaState,
+                                ...data.data
+                            };
+                        }
+                        this.updateRemoteMedia(data.data, data.participantId);
+                        this.notify({ type: 'PARTICIPANTS_UPDATE', participants: this.state.participants });
+                    }
+                }
             } else if (data.type === 'user-info') {
                 // 处理用户信息更新
                 console.log('收到用户信息:', data.data, 'from participant:', data.participantId);