feat: Canvas + WebCodecs 预览播放器核心实现 #1436
Merged
auto-approve-bot
merged 1 commits from 2026-08-19 12:01:04 +08:00
feat/canvas-webcodecs-player into develop
1 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
 张宏杰
|
93a8d641dd |
feat: Canvas + WebCodecs 预览播放器核心实现
CI/CD Pipeline / Build Staging API Image (pull_request) Has been skipped
CI/CD Pipeline / Build Staging Web Image (pull_request) Has been skipped
CI/CD Pipeline / Build Staging Worker Image (pull_request) Has been skipped
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
CI/CD Pipeline / Staging E2E Tests (pull_request) Has been skipped
CI/CD Pipeline / Staging API Integration Tests (pull_request) Has been skipped
CI/CD Pipeline / ACR Image Cleanup (pull_request) Has been skipped
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 44s
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
CI/CD Pipeline / PR Build API Image (pull_request) Has been skipped
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 1m40s
CI/CD Pipeline / PR Build Worker Image (pull_request) Has been skipped
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 58s
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 2m8s
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 2m16s
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 2m34s
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 2m4s
PR Automation / Auto Approve on CI Green (pull_request) Successful in 3m0s
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 2m31s
CI/CD Pipeline / Validate - Code Quality (pull_request) Successful in 6m20s
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
CI/CD Pipeline / Build Production API Image (pull_request) Has been skipped
CI/CD Pipeline / Build Production Web Image (pull_request) Has been skipped
CI/CD Pipeline / Build Production Worker Image (pull_request) Has been skipped
CI/CD Pipeline / Deploy Production (pull_request) Has been skipped
CI/CD Pipeline / Canary Release to Production (pull_request) Has been skipped
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped
CI/CD Pipeline / CI Gate (pull_request) Successful in 6s
AI Code Review / AI Code Review (pull_request) Successful in 7m2s
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 54s
ACR Cleanup / ACR Image Cleanup (pull_request_target) Successful in 1m6s
核心架构： - 新建 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 路径继续使用 |