xiaoxia/xiaoxia-saas
1
0
Fork 0
Code Issues 11 Pull Requests 3 Actions Packages Projects Releases 7 Wiki Activity

feat: 前端自主视频切片，不再依赖后端切片 #1444

Closed
xiaoxia wants to merge 1 commits from fix/frontend-segment-extraction into develop
pull from: fix/frontend-segment-extraction
merge into: xiaoxia:develop
Conversation 3 Commits 1 Files Changed 1
+56 -42
xiaoxia commented 2026-08-19 18:26:50 +08:00
Owner
Copy Link
Copy Source

核心变更

重构 useCanvasPlayer 的样本提取逻辑，前端完全控制视频切片流程：

1. demuxSegment 按时间范围过滤样本

  • 下载完整视频后，用 MP4Box.js 提取所有 samples
  • 按 [startTime, endTime] 时间范围过滤（CTS 单位转换）
  • 确保从关键帧（sync sample）开始，跳过之前的非关键帧
  • Fallback：如果时间范围内无样本，使用全部样本从首个关键帧开始

2. decodeSegment 不再重复解析

  • samples 存入 SegmentMeta，decodeSegment 直接使用
  • 移除了 decodeSegment 中多余的 mp4box 二次创建和解析
  • 减少不必要的 buffer 重新解析开销

3. 日志输出

  • [useCanvasPlayer] Segment N: X/Y samples (range Ts-Te) 显示过滤结果

验证标准

  1. HEVC/H.265 素材 Canvas 播放画面正常
  2. 控制台显示 samples 过滤日志
  3. 控制台无 Decode chunk error
  4. npm run build 无 TS 报错
## 核心变更 重构 useCanvasPlayer 的样本提取逻辑，前端完全控制视频切片流程： ### 1. demuxSegment 按时间范围过滤样本 - 下载完整视频后，用 MP4Box.js 提取所有 samples - 按 `[startTime, endTime]` 时间范围过滤（CTS 单位转换） - 确保从关键帧（sync sample）开始，跳过之前的非关键帧 - Fallback：如果时间范围内无样本，使用全部样本从首个关键帧开始 ### 2. decodeSegment 不再重复解析 - samples 存入 SegmentMeta，decodeSegment 直接使用 - 移除了 decodeSegment 中多余的 mp4box 二次创建和解析 - 减少不必要的 buffer 重新解析开销 ### 3. 日志输出 - `[useCanvasPlayer] Segment N: X/Y samples (range Ts-Te)` 显示过滤结果 ## 验证标准 1. HEVC/H.265 素材 Canvas 播放画面正常 2. 控制台显示 samples 过滤日志 3. 控制台无 Decode chunk error 4. `npm run build` 无 TS 报错
xiaoxia added 1 commit 2026-08-19 18:26:50 +08:00
feat: 前端自主视频切片，不再依赖后端切片
CI/CD Pipeline / Build Staging API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
Details
CI/CD Pipeline / Staging API Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Staging E2E Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / ACR Image Cleanup (pull_request) Has been skipped
Details
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 1m1s
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 1m54s
Details
AI Code Review / AI Code Review (pull_request) Failing after 1m55s
Details
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 2m1s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 2m15s
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Successful in 25s
Details
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 2m39s
Details
CI/CD Pipeline / PR Build API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build Worker Image (pull_request) Has been skipped
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 46s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 3m28s
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 1m15s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 2m53s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 4m35s
Details
CI/CD Pipeline / Validate - Code Quality (pull_request) Successful in 7m57s
Details
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Deploy Production (pull_request) Has been skipped
Details
CI/CD Pipeline / Canary Release to Production (pull_request) Has been skipped
Details
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped
Details
CI/CD Pipeline / CI Gate (pull_request) Successful in 6s
Details
b1afe5608d 
- demuxSegment 中按 [startTime, endTime] 时间范围过滤 MP4 samples
- 确保从关键帧开始提取，跳过非关键帧
- samples 存入 SegmentMeta，decodeSegment 直接使用，不再二次解析
- 移除 decodeSegment 中多余的 mp4box 重解析逻辑
- Fallback：时间范围内无样本时使用全部样本从首个关键帧开始
xiaoxia closed this pull request 2026-08-19 18:27:13 +08:00
auto-approve-bot commented 2026-08-19 18:28:39 +08:00
Collaborator
Copy Link
Copy Source

【阻塞级判定】

  • 是否存在阻塞级问题：是
  • 阻塞级问题数量：1 个

📊 审查概览

  • 整体评价：需修改
  • 建议级问题数量：1 个

🔴 阻塞级问题（必须修复）

  1. [apps/web/src/pages/generate/hooks/useCanvasPlayer.ts: 321行] 回调函数注册顺序错误导致数据丢失
    • 问题类型：逻辑bug
    • 问题描述：代码中 mp4File.start() 在 mp4File.onSamples 赋值之前被调用。根据代码注释 start() 会同步触发 onSamples，这意味着当样本提取完成时，onSamples 回调尚未被赋值（或仍为旧值）。因此，meta.samples 永远不会被填充，导致后续 decodeSegment 接收到空数组，视频无法播放。
    • 修改建议：将 mp4File.onSamples = ... 的赋值代码块移动到 mp4File.start() 调用之前。

💡 改进建议（不阻塞合并）

  1. [apps/web/src/pages/generate/hooks/useCanvasPlayer.ts: 327行] Fallback 逻辑可能导致时间范围溢出
    • 具体内容：当过滤后的样本为空时，Fallback 逻辑使用了“从第一个关键帧开始的所有样本”。这可能会导致解码的样本时间戳超出 segment.startTime 和 segment.endTime 定义的范围。虽然这能避免黑屏，但在精确剪辑场景下可能导致画面帧数多于预期或时间轴不匹配。建议确认是否接受此行为，或者在 Fallback 时记录更详细的警告信息。

✅ 良好实践

  • 将解封装和样本过滤逻辑移至 demuxSegment，避免了 decodeSegment 中重复创建 MP4Box 实例和解析 buffer 的开销，性能优化思路正确。
  • 移除了 decodeSegment 中不可靠的 setTimeout hack，改用显式的数据传递，提高了代码的健壮性。
  • 增加了对关键帧的检查逻辑，确保解码器从关键帧开始接收数据，有助于防止解码花屏。

🤖 由 AI 代码审查机器人自动生成 | 2026-08-19 10:28:39 | 模型:

### 【阻塞级判定】 - 是否存在阻塞级问题：是 - 阻塞级问题数量：1 个 ### 📊 审查概览 - 整体评价：需修改 - 建议级问题数量：1 个 ### 🔴 阻塞级问题（必须修复） 1. **[apps/web/src/pages/generate/hooks/useCanvasPlayer.ts: 321行] 回调函数注册顺序错误导致数据丢失** - 问题类型：逻辑bug - 问题描述：代码中 `mp4File.start()` 在 `mp4File.onSamples` 赋值之前被调用。根据代码注释 `start() 会同步触发 onSamples`，这意味着当样本提取完成时，`onSamples` 回调尚未被赋值（或仍为旧值）。因此，`meta.samples` 永远不会被填充，导致后续 `decodeSegment` 接收到空数组，视频无法播放。 - 修改建议：将 `mp4File.onSamples = ...` 的赋值代码块移动到 `mp4File.start()` 调用之前。 ### 💡 改进建议（不阻塞合并） 1. **[apps/web/src/pages/generate/hooks/useCanvasPlayer.ts: 327行] Fallback 逻辑可能导致时间范围溢出** - 具体内容：当过滤后的样本为空时，Fallback 逻辑使用了“从第一个关键帧开始的所有样本”。这可能会导致解码的样本时间戳超出 `segment.startTime` 和 `segment.endTime` 定义的范围。虽然这能避免黑屏，但在精确剪辑场景下可能导致画面帧数多于预期或时间轴不匹配。建议确认是否接受此行为，或者在 Fallback 时记录更详细的警告信息。 ### ✅ 良好实践 - 将解封装和样本过滤逻辑移至 `demuxSegment`，避免了 `decodeSegment` 中重复创建 MP4Box 实例和解析 buffer 的开销，性能优化思路正确。 - 移除了 `decodeSegment` 中不可靠的 `setTimeout` hack，改用显式的数据传递，提高了代码的健壮性。 - 增加了对关键帧的检查逻辑，确保解码器从关键帧开始接收数据，有助于防止解码花屏。 --- <sub>🤖 由 AI 代码审查机器人自动生成 | 2026-08-19 10:28:39 | 模型: </sub> <!-- AI_CODE_REVIEW_AUTO_COMMENT -->
gitea-actions bot commented 2026-08-19 18:29:04 +08:00
Copy Link
Copy Source

🚀 预览环境已部署

项目 详情
PR号 #1444
预览链接 https://pr-1444.preview.xiaoxiajianji.com
API环境 staging

💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。

🔄 每次提交新代码后预览环境会自动更新。

🗑️ PR 关闭或合并后，预览环境会自动清理。

🚀 **预览环境已部署** | 项目 | 详情 | |------|------| | PR号 | #1444 | | 预览链接 | [https://pr-1444.preview.xiaoxiajianji.com](https://pr-1444.preview.xiaoxiajianji.com) | | API环境 | staging | > 💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。 > > 🔄 每次提交新代码后预览环境会自动更新。 > > 🗑️ PR 关闭或合并后，预览环境会自动清理。
gitea-actions bot commented 2026-08-19 18:29:58 +08:00
Copy Link
Copy Source

🗑️ 预览环境已清理

PR #1444 已关闭或合并，对应的预览环境已被清理。

如有需要，可以重新打开 PR 来重新生成预览环境。

🗑️ **预览环境已清理** PR #1444 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 PR 来重新生成预览环境。
Some checks are pending
CI/CD Pipeline / Build Staging API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
Details
CI/CD Pipeline / Staging API Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Staging E2E Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / ACR Image Cleanup (pull_request) Has been skipped
Details
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 1m1s
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 1m54s
Details
AI Code Review / AI Code Review (pull_request) Failing after 1m55s
Details
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 2m1s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 2m15s
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Successful in 25s
Details
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 2m39s
Details
CI/CD Pipeline / PR Build API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build Worker Image (pull_request) Has been skipped
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 46s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 3m28s
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 1m15s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 2m53s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 4m35s
Details
CI/CD Pipeline / Validate - Code Quality (pull_request) Successful in 7m57s
Details
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Deploy Production (pull_request) Has been skipped
Details
CI/CD Pipeline / Canary Release to Production (pull_request) Has been skipped
Details
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped
Details
CI/CD Pipeline / CI Gate (pull_request) Successful in 6s
Details

Pull request closed

Please reopen this pull request to perform a merge.
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
Clear labels
P0
阻塞性，必须立即处理
 P1
高优先级
 P2
中优先级
 P3
低优先级/后考虑
 architecture
架构设计
 backend
后端相关
 blocked
阻塞中
 bug
Bug修复
 ci-bug
CI本身的bug
 ci-optimization
CI优化类任务
 ci-pipeline
CI流水线/workflow相关
 cleanup
代码清理
 devops
运维/部署/CI
 documentation
文档相关
 feature
新功能
 frontend
前端相关
 question
需要讨论确认
 ready
PR CI通过，可合并
 refactor
代码重构
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
auto-approve-bot xiaoxia
No Assignees
3 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#1444
Delete Branch "fix/frontend-segment-extraction"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?