修改闪烁问题

src/index.html

@@ -118,7 +118,7 @@
         .video-loading.show {
             opacity: 1;
         }
-        
+
         /* 等待连接提示样式 */
         .connection-waiting {
             position: absolute;
@@ -382,7 +382,7 @@
             border: 4px solid rgba(255, 255, 255, 0.8);
             box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
             /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
-            background: #000;
+            background: #000000;
             display: flex;
             align-items: center;
             justify-content: center;
@@ -408,11 +408,11 @@
             object-fit: cover;
             border-radius: 0;
             box-shadow: none;
-            transition: opacity 0.5s ease-in-out;
+            /* transition: opacity 0.5s ease-in-out; */
             left: 50%;
             top: 50%;
             transform: translate(-50%, -50%);
-            opacity: 0; /* 默认隐藏视频 */
+            opacity: 1; /* 默认隐藏视频 */
             z-index: 1; /* 确保在头像下方 */
         }
 
@@ -473,7 +473,7 @@
                         <div class="loading-spinner"></div>
                         <!-- <div>正在切换视频...</div> -->
                     </div>
-                    
+
                     <!-- 等待连接提示 -->
                     <div class="connection-waiting" id="connectionWaiting" style="display: none;">
                         <div class="loading-spinner"></div>

src/index.js

@@ -164,7 +164,7 @@ class WebRTCChat {
 
         // 通话开始处理
         this.socket.on('call-started', (data) => {
-            this.logMessage('通话已开始', 'success');
+            console.log('通话已开始', 'success');
             this.startDefaultVideoStream();
         });
 
@@ -270,7 +270,7 @@ class WebRTCChat {
             this.recordedVideo.classList.add('loading');
             
             // 创建默认视频的MediaStream
-            const defaultStream = await this.createVideoStream(this.defaultVideo);
+            const defaultStream = this.precreatedStreams.get(this.defaultVideo);
             
             // 等待流稳定
             await new Promise(resolve => setTimeout(resolve, 500));
@@ -283,6 +283,16 @@ class WebRTCChat {
             // 设置视频流
             this.currentVideoStream = defaultStream;
             this.recordedVideo.srcObject = defaultStream;
+            this.recordedVideoBuffer.srcObject = this.precreatedStreams.get(this.interactionVideo);
+            // this.recordedVideoBuffer.style.zIndex = "10"
+            // this.recordedVideoBuffer.style.opacity = "1";  // 添加这行
+            // this.recordedVideo.style.zIndex = "-1"
+            // this.recordedVideo.style.opacity = "0"; 
+
+            // this.recordedVideoBuffer.play();
+
+
+
             this.currentVideo = this.defaultVideo;
             this.currentVideoName.textContent = `默认视频: ${this.defaultVideo}`;
             
@@ -702,65 +712,28 @@ class WebRTCChat {
 
     // 修改视频切换方法，直接使用预加载视频切换，不使用WebRTC传输
     async switchVideoStream(videoFile, type = '', text = '') {
-        try {
+        if (this.interactionVideo === videoFile) {
-            this.logMessage(`开始切换视频: ${videoFile} (${type})`, 'info');
+            // 确保缓冲视频已经准备好并且可见
+            // this.recordedVideoBuffer.style.opacity = "1";
+            // 使用 zIndex 层叠，新视频在上层
+            this.recordedVideoBuffer.style.zIndex = "2";
+            this.recordedVideo.style.zIndex = "1";
             
-            let newVideoStream;
+            // 延迟隐藏下层视频，确保无缝切换
-            let isUsingPrecreated = false;
+            // setTimeout(() => {
+            // this.recordedVideo.style.opacity = "0";
+            // }, 100);
+        } else {
+            // 确保主视频已经准备好并且可见
+            // this.recordedVideo.style.opacity = "1";
+            // 使用 zIndex 层叠，主视频在上层
+            this.recordedVideo.style.zIndex = "2";
+            this.recordedVideoBuffer.style.zIndex = "1";
             
-            // 首先检查预创建的视频流
+            // 延迟隐藏下层视频，确保无缝切换
-            if (this.precreatedStreams.has(videoFile)) {
+            // setTimeout(() => {
-                newVideoStream = this.precreatedStreams.get(videoFile);
+            // this.recordedVideoBuffer.style.opacity = "0";
-                isUsingPrecreated = true;
+            // }, 100);
-                this.logMessage(`使用预创建视频流: ${videoFile}`, 'success');
-            } else {
-                // 检查缓存
-                if (this.videoStreams.has(videoFile)) {
-                    newVideoStream = this.videoStreams.get(videoFile);
-                    this.logMessage(`使用缓存视频流: ${videoFile}`, 'success');
-                } else {
-                    // 创建新的视频流
-                    newVideoStream = await this.createVideoStream(videoFile);
-                }
-            }
-            
-            // 直接切换本地视频显示，不使用WebRTC传输
-            if (this.recordedVideo) {
-                // 停止当前视频流（但不停止预创建的流）
-                if (this.currentVideoStream && !this.precreatedStreams.has(this.currentVideo)) {
-                    this.currentVideoStream.getTracks().forEach(track => track.stop());
-                }
-                
-                this.recordedVideo.srcObject = newVideoStream;
-                this.currentVideoStream = newVideoStream;
-                this.currentVideo = videoFile;
-                
-                // 使用预创建流时减少等待时间
-                const waitTime = isUsingPrecreated ? 10 : 50;
-                await new Promise(resolve => setTimeout(resolve, waitTime));
-                
-                try {
-                    await this.recordedVideo.play();
-                    this.logMessage(`视频切换完成: ${videoFile} (${type})`, 'success');
-                } catch (playError) {
-                    this.logMessage(`视频播放失败: ${playError.message}`, 'error');
-                }
-            }
-            
-            // 更新显示信息
-            if (text) {
-                this.currentVideoName.textContent = `交互视频: ${videoFile} (${type}: ${text})`;
-                this.logMessage(`成功切换到交互视频流: ${videoFile} (${type}: ${text})`, 'success');
-            } else {
-                this.currentVideoName.textContent = `视频流: ${videoFile}`;
-                this.logMessage(`成功切换到视频流: ${videoFile}`, 'success');
-            }
-            
-            return true;
-            
-        } catch (error) {
-            this.logMessage(`视频切换失败: ${error.message}`, 'error');
-            return false;
         }
     }