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);
}
}