【m】远端占位背景添加

WebApp/client/public/onebyone/renderer.js

@@ -3,7 +3,7 @@
  * 负责将状态映射到DOM，与状态管理解耦
  */
 import { formatTime, formatTimestamp, toggleElement, toggleButtonState } from './utils.js';
-import {mockCallSession } from './models.js';
+import { mockCallSession } from './models.js';
 class UIRenderer {
     constructor(stateManager) {
         this.stateManager = stateManager;
@@ -22,6 +22,7 @@ class UIRenderer {
 
             // 远端视频
             remoteVideo: document.getElementById('remoteVideo'),
+            remoteVideoPlaceholder: document.getElementById('remoteVideoPlaceholder'),
             remoteAvatar: document.getElementById('remoteAvatar'),
             remoteName: document.getElementById('remoteName'),
             remoteStatus: document.getElementById('remoteStatus'),
@@ -57,6 +58,17 @@ class UIRenderer {
         this.unsubscribe = stateManager.subscribe(this.render.bind(this));
         // 初始化渲染
         this.render(this.stateManager.getState(), { type: 'INIT' });
+
+        window.addEventListener('resize', () => {
+            if (this.elements.remoteVideo && this.elements.remoteVideo.srcObject) {
+                const stream = this.elements.remoteVideo.srcObject;
+                const videoTracks = stream.getVideoTracks();
+                if (videoTracks.length > 0) {
+                    const resolution = this.getVideoResolution(videoTracks[0]);
+                    this.adjustVideoSize(this.elements.remoteVideo, resolution);
+                }
+            }
+        });
     }
 
     // 绑定事件监听器
@@ -75,6 +87,15 @@ class UIRenderer {
                 this.renderControlButtons(state.session.localUser.mediaState);
                 this.renderChatMessages(state.messages);
                 this.renderUserList(state.session.localUser, state.session.remoteUser);
+
+                // 初始化时检查远程流状态，显示或隐藏占位背景
+                if (this.elements.remoteVideoPlaceholder) {
+                    if (state.remoteStream) {
+                        this.elements.remoteVideoPlaceholder.classList.add('hidden');
+                    } else {
+                        this.elements.remoteVideoPlaceholder.classList.remove('hidden');
+                    }
+                }
                 break;
             case 'DURATION_UPDATE':
                 this.renderCallDuration(changes.duration);
@@ -215,14 +236,41 @@ class UIRenderer {
         if (this.elements.remoteVideo && stream) {
             this.elements.remoteVideo.srcObject = stream;
             this.elements.remoteVideo.autoplay = true;
+
+            // 关键设置：启用硬件加速和最佳质量渲染
+            this.elements.remoteVideo.style.transform = 'translateZ(0)'; // 启用硬件加速
+            this.elements.remoteVideo.style.imageRendering = 'pixelated'; // 保持像素清晰
+            this.elements.remoteVideo.style.objectFit = 'contain'; // 保持比例
             console.log('Remote stream set successfully:', this.elements.remoteVideo.srcObject);
 
             // 隐藏断开连接覆盖层
             if (this.elements.disconnectedOverlay) {
                 this.elements.disconnectedOverlay.classList.add('hidden');
             }
+
+            // 隐藏占位背景
+            if (this.elements.remoteVideoPlaceholder) {
+                this.elements.remoteVideoPlaceholder.classList.add('hidden');
+            }
+            // 获取视频轨道并处理分辨率
+            const videoTracks = stream.getVideoTracks();
+            if (videoTracks.length > 0) {
+                const resolution = this.getVideoResolution(videoTracks[0]);
+                this.adjustVideoSize(this.elements.remoteVideo, resolution);
+
+                // 监听轨道变化，处理分辨率调整
+                videoTracks[0].addEventListener('resize', () => {
+                    const newResolution = this.getVideoResolution(videoTracks[0]);
+                    this.adjustVideoSize(this.elements.remoteVideo, newResolution);
+                });
+            }
         } else {
             console.error('Either remoteVideo element or stream is missing');
+
+            // 显示占位背景
+            if (this.elements.remoteVideoPlaceholder) {
+                this.elements.remoteVideoPlaceholder.classList.remove('hidden');
+            }
         }
     }
 
@@ -287,7 +335,44 @@ class UIRenderer {
             }
         }
     }
+    // 在renderer.js中添加方法
+    // 获取视频流分辨率
+    getVideoResolution(track) {
+        if (track && track.getSettings) {
+            const settings = track.getSettings();
+            return {
+                width: settings.width || 640,
+                height: settings.height || 480
+            };
+        }
+        return { width: 640, height: 480 }; // 默认值
+    }
 
+    // 调整视频元素大小并居中显示
+    adjustVideoSize(videoElement, resolution) {
+        if (!videoElement) return;
+
+        const { width, height } = resolution;
+        const aspectRatio = width / height;
+
+        // 根据容器大小和视频宽高比调整视频显示
+        const container = videoElement.parentElement;
+        const containerWidth = container.clientWidth;
+        const containerHeight = container.clientHeight;
+        // 启用硬件加速
+        videoElement.style.transform = 'translateZ(0)';
+        videoElement.style.willChange = 'transform';
+        // 设置容器为flex布局，使视频居中
+        container.style.display = 'flex';
+        container.style.alignItems = 'center';
+        container.style.justifyContent = 'center';
+        // 优化图像渲染
+        videoElement.style.imageRendering = 'pixelated';
+        // 确保视频元素在容器内正确显示
+        videoElement.style.maxWidth = '100%';
+        videoElement.style.maxHeight = '100%';
+        videoElement.style.objectFit = 'contain';
+    }
     // 渲染控制按钮
     renderControlButtons(mediaState) {
         if (this.elements.micBtn) {