【m】禁用视频功能接入

WebApp/client/public/onebyone/renderer.js

@@ -234,39 +234,80 @@ class UIRenderer {
     // 渲染远程视频流
     renderRemoteStream(stream) {
         if (this.elements.remoteVideo && stream) {
-            this.elements.remoteVideo.srcObject = stream;
-            this.elements.remoteVideo.autoplay = true;
+            console.log('Rendering remote stream:', stream);
 
-            // 关键设置：启用硬件加速和最佳质量渲染
-            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);
+            // 即使流对象相同，也要重新设置，确保视频元素能够识别轨道变化
+            this.elements.remoteVideo.srcObject = null;
 
-            // 隐藏断开连接覆盖层
-            if (this.elements.disconnectedOverlay) {
-                this.elements.disconnectedOverlay.classList.add('hidden');
-            }
+            // 延迟设置srcObject，确保视频元素能够正确处理
+            setTimeout(() => {
+                this.elements.remoteVideo.srcObject = stream;
+                console.log('Remote stream reset successfully:', stream);
 
-            // 隐藏占位背景
-            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);
+                // 确保视频元素的属性正确设置
+                this.elements.remoteVideo.autoplay = true;
+                this.elements.remoteVideo.playsinline = true;
+                this.elements.remoteVideo.muted = true;
 
-                // 监听轨道变化，处理分辨率调整
-                videoTracks[0].addEventListener('resize', () => {
-                    const newResolution = this.getVideoResolution(videoTracks[0]);
-                    this.adjustVideoSize(this.elements.remoteVideo, newResolution);
+                // 关键设置：启用硬件加速和最佳质量渲染
+                this.elements.remoteVideo.style.transform = 'translateZ(0)'; // 启用硬件加速
+                this.elements.remoteVideo.style.imageRendering = 'pixelated'; // 保持像素清晰
+                this.elements.remoteVideo.style.objectFit = 'contain'; // 保持比例
+
+                // 隐藏断开连接覆盖层
+                if (this.elements.disconnectedOverlay) {
+                    this.elements.disconnectedOverlay.classList.add('hidden');
+                }
+
+                // 隐藏占位背景
+                if (this.elements.remoteVideoPlaceholder) {
+                    this.elements.remoteVideoPlaceholder.classList.add('hidden');
+                }
+
+                // 获取视频轨道并处理分辨率
+                const videoTracks = stream.getVideoTracks();
+                console.log('Remote video tracks:', videoTracks);
+
+                // 检查是否有有效的视频轨道
+                const hasValidVideoTrack = videoTracks.length > 0 && videoTracks.some(track => {
+                    // 检查轨道是否已停止或被禁用
+                    return track.readyState === 'live';
                 });
-            }
+
+                console.log('Has valid video track:', hasValidVideoTrack);
+
+                if (hasValidVideoTrack) {
+                    console.log('Found valid video tracks, updating resolution');
+                    const activeVideoTrack = videoTracks.find(track => track.readyState === 'live');
+                    if (activeVideoTrack) {
+                        const resolution = this.getVideoResolution(activeVideoTrack);
+                        this.adjustVideoSize(this.elements.remoteVideo, resolution);
+
+                        // 监听轨道变化，处理分辨率调整
+                        activeVideoTrack.addEventListener('resize', () => {
+                            const newResolution = this.getVideoResolution(activeVideoTrack);
+                            this.adjustVideoSize(this.elements.remoteVideo, newResolution);
+                        });
+                    }
+                } else {
+                    console.log('No valid video tracks in remote stream');
+                    // 清空视频元素的源
+                    this.elements.remoteVideo.srcObject = null;
+
+                    // 显示占位背景
+                    if (this.elements.remoteVideoPlaceholder) {
+                        this.elements.remoteVideoPlaceholder.classList.remove('hidden');
+                    }
+                }
+            }, 50); // 增加延迟时间，确保视频元素有足够的时间处理
         } else {
             console.error('Either remoteVideo element or stream is missing');
 
+            // 清空视频元素的源
+            if (this.elements.remoteVideo) {
+                this.elements.remoteVideo.srcObject = null;
+            }
+
             // 显示占位背景
             if (this.elements.remoteVideoPlaceholder) {
                 this.elements.remoteVideoPlaceholder.classList.remove('hidden');

WebApp/client/public/onebyone/store.js

@@ -120,16 +120,69 @@ class CallStateManager {
         // 如果是开启视频，重新获取摄像头资源
         if (mediaType === 'video' && value) {
             if (this.state.localStream) {
+                // 停止当前的媒体流
+                if (this.state.localStream) {
+                    this.state.localStream.getTracks().forEach(track => track.stop());
+                }
                 this.state.localStream = null;
             }
-            //if(this.state.localStream.getVideoTracks().length==0){
             // 请求摄像头权限并获取媒体流
             this.state.localStream = await navigator.mediaDevices.getUserMedia({
                 video: true,
                 audio: true
             });
-            // }
             await this.getLocalStream();
+
+            // 更新WebRTC连接中的视频轨道
+            if (this.renderstreaming) {
+                console.log('Updating video track in WebRTC connection');
+
+                // 获取所有收发器
+                const transceivers = this.renderstreaming.getTransceivers();
+                console.log('All transceivers:', transceivers);
+
+                // 查找现有的视频收发器
+                const videoTransceivers = transceivers.filter(t => {
+                    return t.sender && t.sender.track && t.sender.track.kind === 'video';
+                });
+                console.log('Found video transceivers:', videoTransceivers);
+
+                // 获取新的视频轨道
+                const videoTracks = this.state.localStream.getVideoTracks();
+                console.log('New video tracks:', videoTracks);
+
+                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(() => {
+                        this.setCodecPreferences();
+                    }, 100);
+                }
+            }
         } else {
             // 直接更新媒体状态
             this.state.session.localUser.mediaState[mediaType] = value;
@@ -231,9 +284,23 @@ class CallStateManager {
                 if (this.state.remoteStream == null) {
                     this.state.remoteStream = new MediaStream();
                 }
+
+                // 检查是否已经有相同类型的轨道
+                const existingTracks = this.state.remoteStream.getTracks().filter(track => track.kind === data.track.kind);
+
+                // 移除旧的轨道
+                existingTracks.forEach(track => {
+                    this.state.remoteStream.removeTrack(track);
+                    console.log('Removed old track:', track.kind);
+                });
+
+                // 添加新的轨道
                 this.state.remoteStream.addTrack(data.track);
+                console.log('Added new track:', data.track.kind);
+
                 // 通知UI远程流已更新
                 this.notify({ type: 'REMOTE_STREAM_OBTAINED', stream: this.state.remoteStream });
+                console.log('Notified UI about remote stream update');
 
                 // 如果是音频轨道，启动远程音频活动检测
                 if (data.track.kind === 'audio') {