【m】修改渲染顺序

WebApp/client/public/onebyone/main.js

@@ -157,7 +157,7 @@ window.addEventListener('DOMContentLoaded', async () => {
         //await store.init();
 
         // 初始化渲染器
-        new UIRenderer(store);
+        const renderer = new UIRenderer(store);
 
         // 加入通话
         await store.joinCall(connectionId);
@@ -165,6 +165,8 @@ window.addEventListener('DOMContentLoaded', async () => {
         // 设置WebRTC连接
         await store.setUp(connectionId);
 
+        renderer.renderHeaderTitle();
+
         // 绑定DOM事件
         bindDomEvents();
 

WebApp/client/public/onebyone/renderer.js

@@ -5,6 +5,7 @@
 import { formatTime, formatTimestamp, toggleElement, toggleButtonState } from './utils.js';
 import { mockCallSession } from './models.js';
 import chatMessage from './chatmessage.js';
+import store from './store.js';
 class UIRenderer {
     constructor(stateManager) {
         this.stateManager = stateManager;
@@ -103,60 +104,74 @@ class UIRenderer {
     }
 
 
-    // 渲染状态变化
+    /**
+     * 渲染方法 - 根据状态变化更新UI
+     * @param {Object} state - 当前应用状态
+     * @param {Object} changes - 状态变化对象
+     */
     render(state, changes) {
+        // 根据变化类型执行不同的渲染操作
         switch (changes.type) {
             case 'INIT':
-                this.renderHeader(state.session);
-                this.renderRemoteVideo(state.session.remoteUser);
-                this.renderLocalVideo(state.session.localUser, state.localStream);
-                this.renderControlButtons(state.session.localUser.mediaState);
-                this.renderChatMessages(chatMessage.getMessageState().messages);
-                this.renderUserList(state.session.localUser, state.session.remoteUser);
-
+                // 初始化渲染 - 渲染所有UI元素
+                this.renderRemoteVideo(state.session.remoteUser); // 渲染远程视频
+                this.renderLocalVideo(state.session.localUser, state.localStream); // 渲染本地视频
+                this.renderControlButtons(state.session.localUser.mediaState); // 渲染控制按钮
+                this.renderChatMessages(chatMessage.getMessageState().messages); // 渲染聊天消息
+                this.renderUserList(state.session.localUser, state.session.remoteUser); // 渲染用户列表
+                this.renderHeader(state.session);               // 渲染头部信息
                 // 初始化时检查远程流状态，显示或隐藏占位背景
                 if (this.elements.remoteVideoPlaceholder) {
                     if (state.remoteStream) {
-                        this.elements.remoteVideoPlaceholder.classList.add('hidden');
+                        this.elements.remoteVideoPlaceholder.classList.add('hidden'); // 有远程流时隐藏占位背景
                     } else {
-                        this.elements.remoteVideoPlaceholder.classList.remove('hidden');
+                        this.elements.remoteVideoPlaceholder.classList.remove('hidden'); // 无远程流时显示占位背景
                     }
                 }
                 break;
             case 'DURATION_UPDATE':
+                // 通话时长更新 - 渲染通话时长
                 this.renderCallDuration(changes.duration);
                 break;
             case 'LOCAL_MEDIA_CHANGE':
-                this.renderControlButtons(state.session.localUser.mediaState);
-                this.renderLocalVideo(state.session.localUser, state.localStream);
-                this.renderLocalUserStatus(state.session.localUser);
-                this.renderUserList(state.session.localUser, state.session.remoteUser);
+                // 本地媒体状态变化 - 更新相关UI
+                this.renderControlButtons(state.session.localUser.mediaState); // 渲染控制按钮
+                this.renderLocalVideo(state.session.localUser, state.localStream); // 渲染本地视频
+                this.renderLocalUserStatus(state.session.localUser); // 渲染本地用户状态
+                this.renderUserList(state.session.localUser, state.session.remoteUser); // 渲染用户列表
                 break;
             case 'LOCAL_STREAM_OBTAINED':
-                this.renderLocalStream(state.localStream);
-                this.renderLocalVideo(state.session.localUser, state.localStream);
+                // 本地流获取成功 - 更新本地视频显示
+                this.renderLocalStream(state.localStream); // 渲染本地流
+                this.renderLocalVideo(state.session.localUser, state.localStream); // 渲染本地视频
                 break;
             case 'REMOTE_STREAM_OBTAINED':
-                this.renderRemoteStream(state.remoteStream);
+                // 远程流获取成功 - 更新远程视频显示
+                this.renderRemoteStream(state.remoteStream); // 渲染远程流
                 // 当获取到远程流时，隐藏连接中提示
                 if (this.elements.connectingOverlay) {
                     this.elements.connectingOverlay.classList.add('hidden');
                 }
                 break;
             case 'REMOTE_MEDIA_CHANGE':
-                this.renderRemoteVideo(state.session.remoteUser);
-                this.renderUserList(state.session.localUser, state.session.remoteUser);
+                // 远程媒体状态变化 - 更新远程视频和用户列表
+                this.renderRemoteVideo(state.session.remoteUser); // 渲染远程视频
+                this.renderUserList(state.session.localUser, state.session.remoteUser); // 渲染用户列表
                 break;
             case 'USER_LIST_UPDATE':
+                // 用户列表更新 - 重新渲染用户列表
                 this.renderUserList(changes.localUser, changes.remoteUser);
                 break;
             case 'NETWORK_CHANGE':
+                // 网络状态变化 - 渲染网络状态
                 this.renderNetworkStatus(changes.quality);
                 break;
             case 'CALL_STATUS_CHANGE':
+                // 通话状态变化 - 渲染通话状态
                 this.renderCallStatus(changes.status);
                 break;
             case 'CALL_ENDED':
+                // 通话结束 - 渲染通话结束界面
                 this.renderCallEnded();
                 break;
         }
@@ -175,15 +190,8 @@ class UIRenderer {
 
     // 渲染头部
     renderHeader(session) {
-        if (this.elements.headerTitle) {
-            // 未连接时不显示红框部分
-            if (session.status === 'idle' || session.status === 'connecting') {
-                this.elements.headerTitle.textContent = '通话';
-            } else {
-                this.elements.headerTitle.textContent = `与 ${session.remoteUser.name} 的通话`;
-            }
-        }
 
+        this.renderHeaderTitle();
         if (this.elements.encryptionBadge) {
             toggleElement(this.elements.encryptionBadge, session.isEncrypted);
         }
@@ -198,6 +206,14 @@ class UIRenderer {
 
         this.renderCallDuration(session.duration);
     }
+    renderHeaderTitle() {
+        if (this.elements.headerTitle) {
+            const connectionId = store.getConnectionId() || '';
+            // 未连接时不显示红框部分
+            this.elements.headerTitle.textContent = `通话 (${connectionId})`;
+
+        }
+    }
 
     // 渲染通话时长
     renderCallDuration(duration) {

WebApp/client/public/onebyone/store.js

@@ -182,33 +182,6 @@ class CallStateManager {
                 const audioTracks = this.state.localStream.getAudioTracks();
                 console.log('New audio tracks:', audioTracks);
 
-                // 更新视频轨道
-                if (videoTracks.length > 0) {
-                    const newVideoTrack = videoTracks[0];
-                    console.log('Using new video track:', newVideoTrack);
-
-                    if (videoTransceivers.length > 0) {
-                        // 替换现有的视频轨道
-                        for (const transceiver of videoTransceivers) {
-                            try {
-                                console.log('Replacing video track in transceiver:', transceiver);
-                                await transceiver.sender.replaceTrack(newVideoTrack);
-                                console.log('Successfully replaced video track');
-                            } catch (error) {
-                                console.error('Error replacing video track:', error);
-                            }
-                        }
-                    } else {
-                        // 添加新的视频收发器
-                        try {
-                            console.log('Adding new video transceiver');
-                            const transceiver = this.renderstreaming.addTransceiver(newVideoTrack, { direction: 'sendonly' });
-                            console.log('Added new video transceiver:', transceiver);
-                        } catch (error) {
-                            console.error('Error adding new video transceiver:', error);
-                        }
-                    }
-                }
 
                                 // 更新音频轨道
                 if (audioTracks.length > 0) {
@@ -237,6 +210,35 @@ class CallStateManager {
                         }
                     }
                 }
+                // 更新视频轨道
+                if (videoTracks.length > 0) {
+                    const newVideoTrack = videoTracks[0];
+                    console.log('Using new video track:', newVideoTrack);
+
+                    if (videoTransceivers.length > 0) {
+                        // 替换现有的视频轨道
+                        for (const transceiver of videoTransceivers) {
+                            try {
+                                console.log('Replacing video track in transceiver:', transceiver);
+                                await transceiver.sender.replaceTrack(newVideoTrack);
+                                console.log('Successfully replaced video track');
+                            } catch (error) {
+                                console.error('Error replacing video track:', error);
+                            }
+                        }
+                    } else {
+                        // 添加新的视频收发器
+                        try {
+                            console.log('Adding new video transceiver');
+                            const transceiver = this.renderstreaming.addTransceiver(newVideoTrack, { direction: 'sendonly' });
+                            console.log('Added new video transceiver:', transceiver);
+                        } catch (error) {
+                            console.error('Error adding new video transceiver:', error);
+                        }
+                    }
+                }
+
+
 
                 // 延迟设置编解码器偏好，确保收发器已完全创建
                 setTimeout(() => {
@@ -294,6 +296,7 @@ class CallStateManager {
         // 设置状态为连接中
         this.state.session.status = 'connecting';
         this.notify({ type: 'CALL_STATUS_CHANGE', status: 'connecting' });
+
         // 确保本地流已经初始化
         if (!this.state.localStream) {
             console.log('Local stream not available, waiting for initialization...');