diff --git a/src/index.html b/src/index.html index 096ceee..bf49711 100644 --- a/src/index.html +++ b/src/index.html @@ -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; /* 确保在头像下方 */ } diff --git a/src/index.js b/src/index.js index 0daf054..5b77647 100644 --- a/src/index.js +++ b/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 { - this.logMessage(`开始切换视频: ${videoFile} (${type})`, 'info'); + if (this.interactionVideo === videoFile) { + // 确保缓冲视频已经准备好并且可见 + // 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)) { - newVideoStream = this.precreatedStreams.get(videoFile); - isUsingPrecreated = true; - 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; + // 延迟隐藏下层视频,确保无缝切换 + // setTimeout(() => { + // this.recordedVideoBuffer.style.opacity = "0"; + // }, 100); } }