3.6 KiB
3.6 KiB
默认视频播放问题修复
问题描述
在性能优化过程中,发现默认视频 d-3s.mp4 和 s-1.mp4 没有正常播放的问题。
问题原因
- 缓存策略过于激进: 将缓存数量从3个减少到2个,导致重要视频被过早清理
- 缺少默认视频启动调用: 在
startCall()方法中没有调用startDefaultVideoStream() - 重要视频保护不足: 没有区分重要视频和普通视频的清理策略
修复措施
1. 优化缓存策略
// 修复前
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. 添加默认视频启动调用
async startCall() {
// ... 其他代码 ...
// 启动默认视频流
await this.startDefaultVideoStream();
// 通知服务器通话开始
this.socket.emit('call-started');
}
3. 改进预加载策略
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. 优化性能监控清理
// 如果缓存过多,清理一些(但保护重要视频)
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. 调整性能测试阈值
// 检查视频流数量
if (testResults.metrics.videoStreamsCount > 5) { // 从3增加到5
// 报告问题
}
// 检查动画帧数量
if (testResults.metrics.animationFramesCount > 3) { // 从2增加到3
// 报告问题
}
重要视频列表
以下视频被标记为重要视频,不会被自动清理:
d-3s.mp4- 默认视频s-1.mp4- 常用视频- 当前默认视频(
this.defaultVideo)
测试功能
添加了测试功能来验证默认视频播放:
- 测试按钮: "测试默认视频" 按钮
- 测试方法:
testDefaultVideoPlayback() - 测试流程:
- 检查默认视频文件是否存在
- 创建默认视频流
- 设置到视频元素并播放
- 5秒后自动停止测试
验证步骤
- 启动应用
- 点击"开始音频通话"
- 观察默认视频是否开始播放
- 点击"测试默认视频"按钮验证功能
- 查看性能监控面板确认视频流数量
预期效果
修复后,默认视频应该能够:
- 正常播放: 通话开始时自动播放默认视频
- 不被清理: 重要视频不会被自动清理机制删除
- 快速切换: 预加载确保切换时响应迅速
- 稳定运行: 性能监控不会误报重要视频为问题
监控指标
- 视频流数量: 正常范围 1-5 个
- 重要视频保护: 确保
d-3s.mp4和s-1.mp4不被清理 - 默认视频状态: 通话开始时应该显示默认视频