From 1ebfd472c476c8f1b8e58d0da38797df9a0344bc Mon Sep 17 00:00:00 2001 From: Song367 <601337784@qq.com> Date: Tue, 29 Jul 2025 15:35:36 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9C=AA=E5=AE=8C=E6=88=90=E8=A7=86=E9=A2=91?= =?UTF-8?q?=E8=A1=94=E6=8E=A5=EF=BC=8C=E5=A2=9E=E5=8A=A0=E8=AF=AD=E5=8F=A5?= =?UTF-8?q?=E9=95=BF=E5=BA=A67=E4=B8=AA=E5=AD=97=E7=AC=A6=E3=80=82?= =?UTF-8?q?=E8=BF=99=E6=A0=B7=E5=8F=AF=E4=BB=A5=E6=8E=A7=E5=88=B6=E7=A1=AE?= =?UTF-8?q?=E4=BF=9D=E4=B8=8B=E4=B8=80=E6=AE=B5=E9=9F=B3=E9=A2=91=E8=83=BD?= =?UTF-8?q?=E5=A4=9F=E7=94=9F=E6=88=90=EF=BC=8C=E4=BF=9D=E8=AF=81=E8=A7=86?= =?UTF-8?q?=E9=A2=91=E6=B5=81=E4=B8=8D=E4=BC=9A=E5=88=87=E6=8D=A2=E8=87=B3?= =?UTF-8?q?default?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- VIDEO_PLAYBACK_FIX.md | 129 ++++++++++++++++++++++++++++++++++++++++ server.js | 12 ++-- src/chat_with_audio.js | 3 +- src/index.html | 1 - src/index.js | 76 +++++++++++++++-------- src/llm_stream.js | 36 +++++++---- src/minimaxi_stream.js | 32 +++++----- src/styles.css | 30 ++-------- src/video_queue_test.js | 89 +++++++++++++++++++++++++++ videos/0-1.mp4 | Bin 0 -> 2118366 bytes videos/0-2.mp4 | Bin 0 -> 3540137 bytes 11 files changed, 325 insertions(+), 83 deletions(-) create mode 100644 VIDEO_PLAYBACK_FIX.md create mode 100644 src/video_queue_test.js create mode 100644 videos/0-1.mp4 create mode 100644 videos/0-2.mp4 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 @@
-

录制视频播放