jessibuca/packages/demuxer/src/debug-progress.md

a h5 live stream player

# HLS Player Debug Progress

## 2023-07-15: 初始问题
- 基本时间轴显示不正确，总时长和当前时间显示为 00:00:20
- 需要在 `hlsv7.ts` 中添加获取总时长和当前时间的方法

## 2023-07-16: 添加时长计算
- 在 `hlsv7.ts` 中添加了 `totalDuration` 属性
- 修改了 `setCurrentPlaylist` 方法，计算总时长
- 实现了 `getTotalDuration`、`getCurrentTime` 和 `getProgress` 方法
- 更新了 `HLSPlayer.ts` 中的 `updateProgress` 方法，使用新的时长计算

## 2023-07-17: 调试时间显示
- 添加了详细的日志，记录片段持续时间、当前播放状态和总时长计算
- 修复了 `HLSPlayer.ts` 中的 `handleSeek` 方法
- 添加了 `formatTime()` 方法，改进时间显示格式

## 2023-07-18: UI 更新
- 修改了 `UI.vue`，添加了 `onMounted` 生命周期钩子，自动加载视频 URL
- 更新了组件选项，改进播放控制

## 2023-07-19: 进一步调试
- 增强了 `updateProgress()` 方法中的日志记录
- 确保在显示时间前进行有效的时长检查
- 修复了 `hlsv7.ts` 中的总时长计算

## 2023-07-20: Seek 操作优化
- 改进了 `HLSPlayer.ts` 中的 `seek` 方法
- 增强了 `HLSv7Demuxer` 中的 `seek` 支持
- 添加了缓冲区清除和片段加载的详细日志

## 2023-07-21: Seek 后视频卡住问题
- 发现 seek 操作后视频会卡住，显示"缓冲中"
- 日志显示 seek 操作执行正确，但视频不更新
- 添加了更多日志，减少了不必要的日志输出

## 2023-07-22: 修复 Seek 操作
- 完全重写了 `hlsv7.ts` 中的 `seek` 方法
  - 改进了缓冲区清除逻辑
  - 添加了目标片段索引验证
  - 预加载下一个片段以确保连续播放
  - 添加了 MediaSource 状态检查和恢复机制
- 改进了 `appendBuffer` 方法
  - 添加了 MediaSource 状态检查
  - 处理 'ended' 状态的 MediaSource
  - 改进了错误处理和恢复机制
- 更新了 `HLSPlayer.ts` 中的 `seek` 方法
  - 添加了加载指示器
  - 延长了恢复播放的延迟时间
  - 使用 Promise 链确保异步执行

## 2023-07-23: 修复时间轴渲染问题
- 发现 seek 后基本时间轴没有正确渲染
- 修改了 `HLSPlayer.ts` 中的 `seek` 方法
  - 添加了多次强制更新进度显示的代码
  - 在 seek 完成后立即更新进度条
  - 在播放恢复后再次更新进度条
- 增强了 `updateProgress` 和 `updateProgressDisplay` 方法
  - 添加了详细的日志记录
  - 确保时间轴渲染使用正确的时间值
- 修复了 `container` 属性的类型定义

## 2023-07-24: 修复界面卡死和日志重复输出问题
- 发现界面卡死，日志不断重复输出相同内容
- 修改了 `HLSPlayer.ts` 中的日志输出机制
  - 添加了静态属性 `lastProgressLogTime` 和 `lastTimelineLogTime` 记录上次日志输出时间
  - 确保日志输出有足够的时间间隔（进度日志 5 秒，时间轴日志 10 秒）
- 优化了 `seek` 方法
  - 减少了不必要的进度更新调用
  - 移除了可能导致循环调用的代码
  - 简化了播放恢复后的进度更新逻辑

## 2023-07-25: 修复 seek 后画面静止和时间轴不更新问题
- 发现 seek 后画面静止，时间轴也没有更新
- 修改了 `HLSPlayer.ts` 中的 `seek` 方法
  - 添加了 `logBufferState` 方法，记录缓冲区状态
  - 确保视频时间被正确设置，添加了多次检查和设置机制
  - 增加了播放恢复的延迟时间，确保缓冲区已准备好
  - 添加了多次尝试恢复播放的机制
- 添加了 `forceUpdateProgress` 方法
  - 强制更新进度显示
  - 触发 timeupdate 事件，确保 UI 更新
  - 在关键时刻调用此方法，确保时间轴正确更新
- 修改了 `hlsv7.ts` 中的 `seek` 方法
  - 增加了等待时间，确保缓冲区已准备好
  - 添加了验证时间是否被正确设置的机制
  - 触发 timeupdate 事件，确保 UI 更新

## 2023-07-26: 修复时间轴显示不正确问题
- 发现画面更新了，但时间轴没有更新到正确的效果
- 修改了 `HLSPlayer.ts` 中的 `updateProgress` 和 `updateProgressDisplay` 方法
  - 直接从视频元素获取当前时间，而不是从 demuxer 获取
  - 确保时间显示和时间轴渲染使用相同的时间源
  - 添加了更详细的日志，记录视频元素时间和 demuxer 时间的差异
- 修改了 `forceUpdateProgress` 方法
  - 使用视频元素的当前时间进行日志记录
  - 同时记录 demuxer 时间，便于比较
- 修改了 `seek` 方法
  - 在调用 demuxer.seek 之前先设置视频元素的当前时间
  - 立即强制更新进度显示，确保时间轴立即更新
  - 这样即使 demuxer 处理需要时间，UI 也能立即响应

## 2023-07-27: 添加进度信息标签
- 为了更好地观察和调试时间轴问题，添加了详细的进度信息标签
- 修改了 `HLSPlayer.ts` 中的 `createUI` 方法
  - 添加了 `progressInfoLabel` 元素，显示在时间轴上方
  - 设置了适当的样式，确保信息清晰可见
- 修改了 `updateProgress` 方法
  - 在每次更新时，同时更新进度信息标签的内容
  - 显示当前时间、demuxer 时间、总时长、进度百分比、缓冲区信息等
  - 这些信息有助于诊断时间轴不更新的问题
- 修改了 `forceUpdateProgress` 方法
  - 在强制更新时，添加特殊标记并改变标签颜色
  - 使强制更新操作更加明显，便于观察
- 修改了 `seek` 方法
  - 在 seek 操作开始和完成时，更新进度信息标签
  - 使用不同颜色标识 seek 的不同阶段（开始、完成、失败）
  - 这有助于跟踪 seek 操作的整个过程

## 2023-07-28: 修复时间轴左侧标签显示问题
- 发现时间轴左侧的标签始终显示 00:00:00，无法正确显示当前播放进度
- 修改了 `formatTime` 方法
  - 添加了详细的调试日志，记录传入的秒数和格式化后的时间
  - 增强了对无效时间值的处理，确保始终返回有效的时间格式
  - 确保传入的秒数是数字类型，避免格式化错误
- 修改了 `updateProgress` 方法
  - 确保传递给 `formatTime` 的时间值是有效的数字
  - 添加了更多日志，记录格式化前后的时间值
  - 分别处理标准模式和时间范围模式下的时间显示
- 修改了 `createUI` 方法
  - 设置进度条的初始最大值为 100，避免初始化问题
  - 确保初始时间显示正确，使用 `formatTime` 方法格式化初始时间
- 修改了 `forceUpdateProgress` 方法
  - 直接更新时间显示，确保强制更新时也使用正确的时间格式
  - 添加了日志，记录强制更新时的时间显示

## 2023-07-29: 修复 Vue 组件中的时间轴显示问题
- 发现 Vue 组件中使用的 BasicTimeline 组件左侧标签始终显示 00:00:00
- 修改了 `BasicTimeline.tsx` 中的 `formatTime` 方法
  - 添加了详细的调试日志，记录传入的秒数和格式化后的时间
  - 增强了对无效时间值的处理，确保始终返回有效的时间格式
  - 确保传入的秒数是数字类型，避免格式化错误
- 修改了 `timelineStyles` 计算属性
  - 确保当前位置计算正确，防止 NaN 或无效值
  - 限制进度值在 0-100% 范围内
  - 添加了日志，记录计算过程
- 修改了 `HLSPlayerVue.tsx` 中的 `updateProgress` 方法
  - 确保当前时间和总时长是有效的数字
  - 添加了更多日志，记录时间更新过程
  - 记录时间轴数据，包括当前时间、总时长和进度百分比
- 修改了 `HLSPlayerVue.tsx` 中的 `setup` 方法
  - 添加了定时器，确保时间轴数据定期更新
  - 在组件挂载时正确初始化时间值
  - 在组件卸载时清除定时器和销毁播放器

## 2023-07-30: HLSv7Demuxer 重构优化
- 为提高代码质量和可维护性，对 hlsv7.ts 文件进行了重构：
  - 将相关功能按照逻辑分组为不同部分（初始化、播放列表处理、缓冲管理等）
  - 改进了方法命名，更清晰地表达功能
  - 提取重复逻辑为独立方法
- 添加了DemuxerOptions接口，支持外部配置
- 增强了构造函数，允许传入自定义选项
- 将硬编码的配置项改为可配置项（编解码器、最大缓冲长度、日志级别）
- 统一了错误处理流程
- 改进错误日志，包括更详细的错误上下文
- 添加了checkDestroyed方法检查状态
- 分离了clearBuffer和removeBuffer方法，职责更明确
- 优化了缓冲区更新逻辑
- 规范化日志格式
- 使用LogLevel类型约束日志级别
- 减少不必要的日志输出
- 优化条件判断逻辑
- 更有效地管理资源

## 总结和成果

通过一系列的改进和优化，我们解决了视频播放中存在的主要问题并提高了整体代码质量：

1. **bug修复**：
   - 修复了seek操作后视频卡住的问题
   - 解决了时间轴更新不正确的问题
   - 修复了MediaSource状态管理问题

2. **架构优化**：
   - 重构了HLSv7Demuxer类，提高了代码组织和可维护性
   - 将相关功能分组到逻辑单元中
   - 增强了错误处理和恢复机制

3. **用户体验改进**：
   - 增加了详细的播放进度信息显示
   - 优化了BasicTimeline组件的时间显示
   - 添加了更好的加载和错误指示

4. **性能优化**：
   - 改进了缓冲区管理
   - 优化了片段加载策略
   - 减少了不必要的日志输出和处理

5. **测试和监控**：
   - 开发了完整的debug-hls.ts工具进行性能监控
   - 添加了更详细的性能指标统计
   - 提供了性能报告功能，帮助进一步优化

这些改进使得播放器在seek操作后能够正确播放，并且时间轴能够准确反映播放进度。同时，代码的可维护性和扩展性也得到了显著提高。

## 当前状态
- 修复了 seek 操作后视频卡住的问题
- 优化了 BasicTimeline 组件的时间显示
- 增强了播放器界面，添加了更详细的播放进度信息
- 完成了 HLSv7Demuxer 类的重构优化，提高了代码质量和可维护性
- 开发了性能监控工具，便于测试和进一步优化
- 下一步计划：
  1. 测试重构后的 HLSv7Demuxer 性能表现
  2. 探索进一步优化缓冲区管理的方案
  3. 考虑添加更多播放状态的监控和诊断功能