添加未通话时的播放视频
All checks were successful
Gitea Actions Demo / Explore-Gitea-Actions (push) Successful in 3m3s

This commit is contained in:
Song367 2025-08-05 13:29:39 +08:00
parent d293077833
commit fb104034ab
2 changed files with 49 additions and 2 deletions

View File

@ -27,6 +27,9 @@ class WebRTCChat {
this.currentVideo = null; this.currentVideo = null;
this.videoStreams = new Map(); // 存储不同视频的MediaStream this.videoStreams = new Map(); // 存储不同视频的MediaStream
this.currentVideoStream = null; this.currentVideoStream = null;
// 添加通话状态标识
this.isCallActive = false;
// 添加视频相关属性 // 添加视频相关属性
this.videoSender = null; // WebRTC视频发送器 this.videoSender = null; // WebRTC视频发送器
@ -66,6 +69,9 @@ class WebRTCChat {
this.loadVideoList(); this.loadVideoList();
this.loadDefaultVideo(); this.loadDefaultVideo();
this.bindEvents(); this.bindEvents();
// 在未开始通话状态下播放欢迎视频
this.playWelcomeVideo();
// 在初始化完成后预加载常用视频 // 在初始化完成后预加载常用视频
setTimeout(() => { setTimeout(() => {
@ -77,6 +83,33 @@ class WebRTCChat {
window.webrtcApp = this; 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() { initializeElements() {
// 视频元素 // 视频元素
@ -815,6 +848,9 @@ class WebRTCChat {
async startCall() { async startCall() {
try { try {
// 设置通话状态为激活
this.isCallActive = true;
// 切换到通话中图标 // 切换到通话中图标
this.switchToCallingIcon(); this.switchToCallingIcon();
@ -848,17 +884,21 @@ class WebRTCChat {
// 通知服务器通话开始 // 通知服务器通话开始
this.socket.emit('call-started'); this.socket.emit('call-started');
// 开始播放当前场景的默认视频 // 开始播放当前场景的默认视频(替换欢迎视频)
await this.startDefaultVideoStream(); await this.startDefaultVideoStream();
} catch (error) { } catch (error) {
// 如果出错,恢复到默认图标 // 如果出错,恢复通话状态
this.isCallActive = false;
this.switchToDefaultIcon(); this.switchToDefaultIcon();
this.logMessage('无法访问麦克风: ' + error.message, 'error'); this.logMessage('无法访问麦克风: ' + error.message, 'error');
} }
} }
stopCall() { stopCall() {
// 设置通话状态为非激活
this.isCallActive = false;
// 恢复到默认图标 // 恢复到默认图标
this.switchToDefaultIcon(); this.switchToDefaultIcon();
@ -889,6 +929,13 @@ class WebRTCChat {
this.peerConnection = null; this.peerConnection = null;
} }
// 通话结束后重新播放欢迎视频
setTimeout(() => {
if (!this.isCallActive) {
this.playWelcomeVideo();
}
}, 1000);
// 直接刷新页面清除所有缓存 // 直接刷新页面清除所有缓存
console.log('通话已结束,正在刷新页面清除缓存...'); console.log('通话已结束,正在刷新页面清除缓存...');
window.location.reload(); window.location.reload();

BIN
videos/8-5-qc-i.mp4 Normal file

Binary file not shown.