diff --git a/src/index.js b/src/index.js index 2ca30d1..80b31d9 100644 --- a/src/index.js +++ b/src/index.js @@ -27,6 +27,9 @@ class WebRTCChat { this.currentVideo = null; this.videoStreams = new Map(); // 存储不同视频的MediaStream this.currentVideoStream = null; + + // 添加通话状态标识 + this.isCallActive = false; // 添加视频相关属性 this.videoSender = null; // WebRTC视频发送器 @@ -66,6 +69,9 @@ class WebRTCChat { this.loadVideoList(); this.loadDefaultVideo(); this.bindEvents(); + + // 在未开始通话状态下播放欢迎视频 + this.playWelcomeVideo(); // 在初始化完成后预加载常用视频 setTimeout(() => { @@ -77,6 +83,33 @@ class WebRTCChat { window.webrtcApp = this; } + + // 添加新方法:播放欢迎视频 + async playWelcomeVideo() { + try { + // 确保页面元素已加载 + if (!this.recordedVideo) { + setTimeout(() => this.playWelcomeVideo(), 100); + return; + } + + const welcomeVideoFile = '8-5-qc-i.mp4'; + this.logMessage(`开始播放欢迎视频: ${welcomeVideoFile}`, 'info'); + + // 直接设置video元素的src,不通过WebRTC + this.recordedVideo.src = `/videos/${welcomeVideoFile}`; + this.recordedVideo.loop = true; + this.recordedVideo.muted = true; + this.recordedVideo.autoplay = true; + + // 开始播放 + await this.recordedVideo.play(); + this.logMessage('欢迎视频播放成功', 'success'); + + } catch (error) { + this.logMessage(`播放欢迎视频失败: ${error.message}`, 'error'); + } + } initializeElements() { // 视频元素 @@ -815,6 +848,9 @@ class WebRTCChat { async startCall() { try { + // 设置通话状态为激活 + this.isCallActive = true; + // 切换到通话中图标 this.switchToCallingIcon(); @@ -848,17 +884,21 @@ class WebRTCChat { // 通知服务器通话开始 this.socket.emit('call-started'); - // 开始播放当前场景的默认视频 + // 开始播放当前场景的默认视频(替换欢迎视频) await this.startDefaultVideoStream(); } catch (error) { - // 如果出错,恢复到默认图标 + // 如果出错,恢复通话状态 + this.isCallActive = false; this.switchToDefaultIcon(); this.logMessage('无法访问麦克风: ' + error.message, 'error'); } } stopCall() { + // 设置通话状态为非激活 + this.isCallActive = false; + // 恢复到默认图标 this.switchToDefaultIcon(); @@ -889,6 +929,13 @@ class WebRTCChat { this.peerConnection = null; } + // 通话结束后重新播放欢迎视频 + setTimeout(() => { + if (!this.isCallActive) { + this.playWelcomeVideo(); + } + }, 1000); + // 直接刷新页面清除所有缓存 console.log('通话已结束,正在刷新页面清除缓存...'); window.location.reload(); diff --git a/videos/8-5-qc-i.mp4 b/videos/8-5-qc-i.mp4 new file mode 100644 index 0000000..a3e0e25 Binary files /dev/null and b/videos/8-5-qc-i.mp4 differ