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

feat: Canvas + WebCodecs 预览播放器核心实现 #1436

Merged
auto-approve-bot merged 1 commits from feat/canvas-webcodecs-player into develop 2026-08-19 12:01:04 +08:00
Conversation 4 Commits 1 Files Changed 4
+637 -96
xiaoxia commented 2026-08-19 11:49:55 +08:00
Owner
Copy Link
Copy Source

改造内容

核心架构

  • 新建 useCanvasPlayer.ts：MP4 → mp4box.js 解封装 → VideoDecoder 解码帧 → Canvas 绘制
  • 帧队列环形缓冲区（最多 5 帧），自动调用 frame.close() 释放内存
  • 标题 Canvas 内合成：drawText 替代 CSS overlay，画面+文字统一输出

双路径架构

路径 条件 渲染方式
Canvas VideoDecoder in window mp4box + WebCodecs + Canvas
Fallback 不支持 WebCodecs 多 video 元素 + opacity 切换

保留不变

  • 对外 API：play/pause/seek/progress/currentSegmentIndex
  • 配音音频同步
  • 进度条 UI
  • useSegmentScheduler.ts（fallback 路径继续使用）

新增依赖

  • mp4box ^2.4.1（MP4 解封装）
## 改造内容 ### 核心架构 - **新建 `useCanvasPlayer.ts`**：MP4 → mp4box.js 解封装 → VideoDecoder 解码帧 → Canvas 绘制 - **帧队列环形缓冲区**（最多 5 帧），自动调用 `frame.close()` 释放内存 - **标题 Canvas 内合成**：drawText 替代 CSS overlay，画面+文字统一输出 ### 双路径架构 | 路径 | 条件 | 渲染方式 | |------|------|----------| | Canvas | `VideoDecoder in window` | mp4box + WebCodecs + Canvas | | Fallback | 不支持 WebCodecs | 多 video 元素 + opacity 切换 | ### 保留不变 - 对外 API：play/pause/seek/progress/currentSegmentIndex - 配音音频同步 - 进度条 UI - useSegmentScheduler.ts（fallback 路径继续使用） ### 新增依赖 - `mp4box ^2.4.1`（MP4 解封装）
xiaoxia added 1 commit 2026-08-19 11:49:55 +08:00
feat: Canvas + WebCodecs 预览播放器核心实现
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 E2E Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Staging API Integration 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 44s
Details
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build API Image (pull_request) Has been skipped
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 1m40s
Details
CI/CD Pipeline / PR Build Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 58s
Details
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 2m8s
Details
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 2m16s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 2m34s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 2m4s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 3m0s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 2m31s
Details
CI/CD Pipeline / Validate - Code Quality (pull_request) Successful in 6m20s
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
AI Code Review / AI Code Review (pull_request) Successful in 7m2s
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 54s
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Successful in 1m6s
Details
93a8d641dd 
核心架构：
- 新建 useCanvasPlayer.ts：MP4 → mp4box.js 解封装 → VideoDecoder 解码帧 → Canvas 绘制
- 帧队列环形缓冲区（最多5帧），自动释放已消费的 VideoFrame
- 标题通过 Canvas drawText 合成，无需 CSS overlay
- ResizeObserver 响应容器尺寸变化

双路径架构：
- 浏览器支持 WebCodecs → Canvas 渲染（帧级精确控制）
- 不支持 → fallback 到多 video 元素方案（opacity 切换）
- isWebCodecsSupported() 运行时检测

前端播放控制：
- play/pause/seek API 不变
- 配音音频同步保持不变
- 进度条 UI 保持不变

依赖：
- 新增 mp4box ^2.4.1（MP4 解封装）

注：useSegmentScheduler.ts 未改动，fallback 路径继续使用
gitea-actions bot commented 2026-08-19 11:52:27 +08:00
Copy Link
Copy Source

🚀 预览环境已部署

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

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

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

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

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

CI全绿，自动审批通过。

CI全绿，自动审批通过。
auto-approve-bot approved these changes 2026-08-19 11:52:55 +08:00
auto-approve-bot left a comment
Collaborator
Copy Link
Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。
auto-approve-bot merged commit 89a56eaf96 into develop 2026-08-19 12:01:04 +08:00
auto-approve-bot deleted branch feat/canvas-webcodecs-player 2026-08-19 12:01:04 +08:00
gitea-actions bot commented 2026-08-19 12:01:57 +08:00
Copy Link
Copy Source

🗑️ 预览环境已清理

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

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

🗑️ **预览环境已清理** PR #1436 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 PR 来重新生成预览环境。
Sign in to join this conversation.
Reviewers
No Reviewers
auto-approve-bot
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#1436
Delete Branch "feat/canvas-webcodecs-player"

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?