diff --git a/VIDEO_PLAYBACK_FIX.md b/VIDEO_PLAYBACK_FIX.md new file mode 100644 index 0000000..36731c9 --- /dev/null +++ b/VIDEO_PLAYBACK_FIX.md @@ -0,0 +1,129 @@ +# 默认视频播放问题修复 + +## 问题描述 + +在性能优化过程中，发现默认视频 `d-3s.mp4` 和 `s-1.mp4` 没有正常播放的问题。 + +## 问题原因 + +1. **缓存策略过于激进**: 将缓存数量从3个减少到2个，导致重要视频被过早清理 +2. **缺少默认视频启动调用**: 在 `startCall()` 方法中没有调用 `startDefaultVideoStream()` +3. **重要视频保护不足**: 没有区分重要视频和普通视频的清理策略 + +## 修复措施 + +### 1. 优化缓存策略 +```javascript +// 修复前 +if (this.videoStreams.size >= 2) { // 缓存数量过少 + const firstKey = this.videoStreams.keys().next().value; + // 直接清理第一个视频，可能包括重要视频 +} + +// 修复后 +if (this.videoStreams.size >= 4) { // 增加缓存数量 + const importantVideos = [this.defaultVideo, 's-1.mp4', 'd-3s.mp4']; + const videoToRemove = cachedVideos.find(video => !importantVideos.includes(video)); + // 只清理非重要视频 +} +``` + +### 2. 添加默认视频启动调用 +```javascript +async startCall() { + // ... 其他代码 ... + + // 启动默认视频流 + await this.startDefaultVideoStream(); + + // 通知服务器通话开始 + this.socket.emit('call-started'); +} +``` + +### 3. 改进预加载策略 +```javascript +async preloadCommonVideos() { + const videosToPreload = new Set([]); + + // 添加重要视频（默认视频和常用视频） + videosToPreload.add(this.defaultVideo); // 默认视频 + videosToPreload.add('s-1.mp4'); // 常用视频 + videosToPreload.add('d-3s.mp4'); // 默认视频的另一个版本 + + // 添加视频映射中的所有视频 + Object.values(this.videoMapping).forEach(video => { + videosToPreload.add(video); + }); +} +``` + +### 4. 优化性能监控清理 +```javascript +// 如果缓存过多，清理一些（但保护重要视频） +if (this.videoStreams.size > 5) { + const importantVideos = [this.defaultVideo, 's-1.mp4', 'd-3s.mp4']; + + // 只清理非重要视频 + const videosToRemove = cachedVideos.filter(video => !importantVideos.includes(video)); + videosToRemove.slice(0, 2).forEach(key => { + this.cleanupVideoResources(key); + }); +} +``` + +### 5. 调整性能测试阈值 +```javascript +// 检查视频流数量 +if (testResults.metrics.videoStreamsCount > 5) { // 从3增加到5 + // 报告问题 +} + +// 检查动画帧数量 +if (testResults.metrics.animationFramesCount > 3) { // 从2增加到3 + // 报告问题 +} +``` + +## 重要视频列表 + +以下视频被标记为重要视频，不会被自动清理： + +- `d-3s.mp4` - 默认视频 +- `s-1.mp4` - 常用视频 +- 当前默认视频（`this.defaultVideo`） + +## 测试功能 + +添加了测试功能来验证默认视频播放： + +1. **测试按钮**: "测试默认视频" 按钮 +2. **测试方法**: `testDefaultVideoPlayback()` +3. **测试流程**: + - 检查默认视频文件是否存在 + - 创建默认视频流 + - 设置到视频元素并播放 + - 5秒后自动停止测试 + +## 验证步骤 + +1. 启动应用 +2. 点击"开始音频通话" +3. 观察默认视频是否开始播放 +4. 点击"测试默认视频"按钮验证功能 +5. 查看性能监控面板确认视频流数量 + +## 预期效果 + +修复后，默认视频应该能够： + +1. **正常播放**: 通话开始时自动播放默认视频 +2. **不被清理**: 重要视频不会被自动清理机制删除 +3. **快速切换**: 预加载确保切换时响应迅速 +4. **稳定运行**: 性能监控不会误报重要视频为问题 + +## 监控指标 + +- **视频流数量**: 正常范围 1-5 个 +- **重要视频保护**: 确保 `d-3s.mp4` 和 `s-1.mp4` 不被清理 +- **默认视频状态**: 通话开始时应该显示默认视频 \ No newline at end of file diff --git a/server.js b/server.js index 023e787..506d47d 100644 --- a/server.js +++ b/server.js @@ -87,16 +87,16 @@ const connectedClients = new Map(); // 视频映射配置 const videoMapping = { - 'say-6s-m-e': '1-m.mp4', - 'default': '0.mp4', - 'say-5s-amplitude': '2.mp4', - 'say-5s-m-e': '4.mp4', + // 'say-6s-m-e': '1-m.mp4', + 'default': '0-2.mp4', + // 'say-5s-amplitude': '2.mp4', + // 'say-5s-m-e': '4.mp4', 'say-5s-m-sw': '5.mp4', - 'say-3s-m-sw': '6.mp4', + // 'say-3s-m-sw': '6.mp4', }; // 默认视频流配置 -const DEFAULT_VIDEO = '0.mp4'; +const DEFAULT_VIDEO = '0-2.mp4'; const INTERACTION_TIMEOUT = 10000; // 10秒后回到默认视频 // 获取视频列表 diff --git a/src/chat_with_audio.js b/src/chat_with_audio.js index a8149df..c4dfa70 100644 --- a/src/chat_with_audio.js +++ b/src/chat_with_audio.js @@ -115,7 +115,7 @@ async function chatWithAudioStream(userInput) { audioQueue = []; // 定义段落处理函数 - const handleSegment = async (segment) => { + const handleSegment = async (segment, textPlay) => { console.log('\n=== 处理文本段落 ==='); console.log('段落内容:', segment); @@ -134,6 +134,7 @@ async function chatWithAudioStream(userInput) { audio_setting: audioConfig.audioSetting, }, stream: true, + textPlay: textPlay }); // 将音频添加到播放队列 diff --git a/src/index.html b/src/index.html index 728e9ea..bc582a3 100644 --- a/src/index.html +++ b/src/index.html @@ -23,7 +23,6 @@
-

录制视频播放