{
"canonical_name": "openvideodev/openvideo",
"compilation_id": "pack_4d83b7b967b248bcbba6512024075eae",
"created_at": "2026-05-14T02:07:29.979892+00:00",
"created_by": "project-pack-compiler",
"feedback": {
"carrier_selection_notes": [
"viable_asset_types=skill, recipe, host_instruction, eval, preflight",
"recommended_asset_types=skill, recipe, host_instruction, eval, preflight"
],
"evidence_delta": {
"confirmed_claims": [
"identity_anchor_present",
"capability_and_host_targets_present",
"install_path_declared_or_better"
],
"missing_required_fields": [],
"must_verify_forwarded": [
"Run or inspect `npm install openvideo` in an isolated environment.",
"Confirm the project exposes the claimed capability to at least one target host."
],
"quickstart_execution_scope": "allowlisted_sandbox_smoke",
"sandbox_command": "npm install openvideo",
"sandbox_container_image": "node:22-slim",
"sandbox_execution_backend": "docker",
"sandbox_planner_decision": "llm_execute_isolated_install",
"sandbox_validation_id": "sbx_509c713ab8804aa1a3e6a01263ed6c8f"
},
"feedback_event_type": "project_pack_compilation_feedback",
"learning_candidate_reasons": [],
"template_gaps": []
},
"identity": {
"canonical_id": "project_024de9159d53262cb928905b5f277263",
"canonical_name": "openvideodev/openvideo",
"homepage_url": null,
"license": "unknown",
"repo_url": "https://github.com/openvideodev/openvideo",
"slug": "openvideo",
"source_packet_id": "phit_cc99e991b92642ab877a5599fd73aa2e",
"source_validation_id": "dval_afe2a45ad6dc4273ab1c040781a767e4"
},
"merchandising": {
"best_for": "需要软件开发与交付能力，并使用 local_cli的用户",
"github_forks": 31,
"github_stars": 224,
"one_liner_en": "Open-source React Video Editor with client-side rendering (WebCodecs) and pixi.js. Capcut clone. Canva clone. React video editor. webgl video editor.",
"one_liner_zh": "Open-source React Video Editor with client-side rendering (WebCodecs) and pixi.js. Capcut clone. Canva clone. React video editor. webgl video editor.",
"primary_category": {
"category_id": "software-development",
"confidence": "high",
"name_en": "Software Development",
"name_zh": "软件开发与交付",
"reason": "matched_keywords:code, git, cli"
},
"target_user": "使用 local_cli 等宿主 AI 的用户",
"title_en": "openvideo",
"title_zh": "openvideo 能力包",
"visible_tags": [
{
"label_en": "Browser Agents",
"label_zh": "浏览器 Agent",
"source": "repo_evidence_project_characteristics",
"tag_id": "product_domain-browser-agents",
"type": "product_domain"
},
{
"label_en": "Web Task Automation",
"label_zh": "网页任务自动化",
"source": "repo_evidence_project_characteristics",
"tag_id": "user_job-web-task-automation",
"type": "user_job"
},
{
"label_en": "Browser Automation",
"label_zh": "浏览器自动化",
"source": "repo_evidence_project_characteristics",
"tag_id": "core_capability-browser-automation",
"type": "core_capability"
},
{
"label_en": "Node-based Workflow",
"label_zh": "节点式流程编排",
"source": "repo_evidence_project_characteristics",
"tag_id": "workflow_pattern-node-based-workflow",
"type": "workflow_pattern"
},
{
"label_en": "Local-first",
"label_zh": "本地优先",
"source": "repo_evidence_project_characteristics",
"tag_id": "selection_signal-local-first",
"type": "selection_signal"
}
]
},
"packet_id": "phit_cc99e991b92642ab877a5599fd73aa2e",
"page_model": {
"artifacts": {
"artifact_slug": "openvideo",
"files": [
"PROJECT_PACK.json",
"QUICK_START.md",
"PROMPT_PREVIEW.md",
"HUMAN_MANUAL.md",
"AI_CONTEXT_PACK.md",
"BOUNDARY_RISK_CARD.md",
"PITFALL_LOG.md",
"REPO_INSPECTION.json",
"REPO_INSPECTION.md",
"CAPABILITY_CONTRACT.json",
"EVIDENCE_INDEX.json",
"CLAIM_GRAPH.json"
],
"required_files": [
"PROJECT_PACK.json",
"QUICK_START.md",
"PROMPT_PREVIEW.md",
"HUMAN_MANUAL.md",
"AI_CONTEXT_PACK.md",
"BOUNDARY_RISK_CARD.md",
"PITFALL_LOG.md",
"REPO_INSPECTION.json"
]
},
"detail": {
"capability_source": "Project Hit Packet + DownstreamValidationResult",
"commands": [
{
"command": "npm install openvideo",
"label": "Node.js / npm · 官方安装入口",
"source": "https://github.com/openvideodev/openvideo#readme",
"verified": true
}
],
"display_tags": [
"浏览器 Agent",
"网页任务自动化",
"浏览器自动化",
"节点式流程编排",
"本地优先"
],
"eyebrow": "软件开发与交付",
"glance": [
{
"body": "判断自己是不是目标用户。",
"label": "最适合谁",
"value": "需要软件开发与交付能力，并使用 local_cli的用户"
},
{
"body": "先理解能力边界，再决定是否继续。",
"label": "核心价值",
"value": "Open-source React Video Editor with client-side rendering (WebCodecs) and pixi.js. Capcut clone. Canva clone. React video editor. webgl video editor."
},
{
"body": "未完成验证前保持审慎。",
"label": "继续前",
"value": "publish to Doramagic.ai project surfaces"
}
],
"guardrail_source": "Boundary & Risk Card",
"guardrails": [
{
"body": "Prompt Preview 只展示流程，不证明项目已安装或运行。",
"label": "Check 1",
"value": "不要把试用当真实运行"
},
{
"body": "local_cli",
"label": "Check 2",
"value": "确认宿主兼容"
},
{
"body": "publish to Doramagic.ai project surfaces",
"label": "Check 3",
"value": "先隔离验证"
}
],
"mode": "skill, recipe, host_instruction, eval, preflight",
"pitfall_log": {
"items": [
{
"body": "README/documentation is current enough for a first validation pass.",
"category": "能力坑",
"evidence": [
"capability.assumptions | github_repo:1125747446 | https://github.com/openvideodev/openvideo | README/documentation is current enough for a first validation pass."
],
"severity": "medium",
"suggested_check": "将假设转成下游验证清单。",
"title": "能力判断依赖假设",
"user_impact": "假设不成立时，用户拿不到承诺的能力。"
},
{
"body": "未记录 last_activity_observed。",
"category": "维护坑",
"evidence": [
"evidence.maintainer_signals | github_repo:1125747446 | https://github.com/openvideodev/openvideo | last_activity_observed missing"
],
"severity": "medium",
"suggested_check": "补 GitHub 最近 commit、release、issue/PR 响应信号。",
"title": "维护活跃度未知",
"user_impact": "新项目、停更项目和活跃项目会被混在一起，推荐信任度下降。"
},
{
"body": "no_demo",
"category": "安全/权限坑",
"evidence": [
"downstream_validation.risk_items | github_repo:1125747446 | https://github.com/openvideodev/openvideo | no_demo; severity=medium"
],
"severity": "medium",
"suggested_check": "进入安全/权限治理复核队列。",
"title": "下游验证发现风险项",
"user_impact": "下游已经要求复核，不能在页面中弱化。"
},
{
"body": "No sandbox install has been executed yet; downstream must verify before user use.",
"category": "安全/权限坑",
"evidence": [
"risks.safety_notes | github_repo:1125747446 | https://github.com/openvideodev/openvideo | No sandbox install has been executed yet; downstream must verify before user use."
],
"severity": "medium",
"suggested_check": "转成明确权限清单和安全审查提示。",
"title": "存在安全注意事项",
"user_impact": "用户安装前需要知道权限边界和敏感操作。"
},
{
"body": "no_demo",
"category": "安全/权限坑",
"evidence": [
"risks.scoring_risks | github_repo:1125747446 | https://github.com/openvideodev/openvideo | no_demo; severity=medium"
],
"severity": "medium",
"suggested_check": "把风险写入边界卡，并确认是否需要人工复核。",
"title": "存在评分风险",
"user_impact": "风险会影响是否适合普通用户安装。"
},
{
"body": "issue_or_pr_quality=unknown。",
"category": "维护坑",
"evidence": [
"evidence.maintainer_signals | github_repo:1125747446 | https://github.com/openvideodev/openvideo | issue_or_pr_quality=unknown"
],
"severity": "low",
"suggested_check": "抽样最近 issue/PR，判断是否长期无人处理。",
"title": "issue/PR 响应质量未知",
"user_impact": "用户无法判断遇到问题后是否有人维护。"
},
{
"body": "release_recency=unknown。",
"category": "维护坑",
"evidence": [
"evidence.maintainer_signals | github_repo:1125747446 | https://github.com/openvideodev/openvideo | release_recency=unknown"
],
"severity": "low",
"suggested_check": "确认最近 release/tag 和 README 安装命令是否一致。",
"title": "发布节奏不明确",
"user_impact": "安装命令和文档可能落后于代码，用户踩坑概率升高。"
}
],
"source": "ProjectPitfallLog + ProjectHitPacket + validation + community signals",
"summary": "发现 7 个潜在踩坑项，其中 0 个为 high/blocking；最高优先级：能力坑 - 能力判断依赖假设。",
"title": "踩坑日志"
},
"snapshot": {
"contributors": 5,
"forks": 31,
"license": "unknown",
"note": "站点快照，非实时质量证明；用于开工前背景判断。",
"stars": 224
},
"source_url": "https://github.com/openvideodev/openvideo",
"steps": [
{
"body": "不安装项目，先体验能力节奏。",
"code": "preview",
"title": "先试 Prompt"
},
{
"body": "理解输入、输出、失败模式和边界。",
"code": "manual",
"title": "读说明书"
},
{
"body": "把上下文交给宿主 AI 继续工作。",
"code": "context",
"title": "带给 AI"
},
{
"body": "进入主力环境前先完成安装入口与风险边界验证。",
"code": "verify",
"title": "沙箱验证"
}
],
"subtitle": "Open-source React Video Editor with client-side rendering (WebCodecs) and pixi.js. Capcut clone. Canva clone. React video editor. webgl video editor.",
"title": "openvideo 能力包",
"trial_prompt": "# openvideo - Prompt Preview\n\n> 复制下面这段 Prompt 到你常用的 AI，先试一次，不需要安装。\n> 它的目标是让你直接体验这个项目的服务方式，而不是阅读项目介绍。\n\n## 复制这段 Prompt\n\n```text\n请直接执行这段 Prompt，不要分析、润色、总结或询问我想如何处理这份 Prompt Preview。\n\n你现在扮演 openvideo 的“安装前体验版”。\n这不是项目介绍、不是评价报告、不是 README 总结。你的任务是让我用最小成本体验它的核心服务。\n\n我的试用任务：我想用它完成一个真实的软件开发与交付任务。\n我常用的宿主 AI：Local CLI\n\n【体验目标】\n围绕我的真实任务，现场演示这个项目如何把输入转成 示例引导, 判断线索。重点是让我感受到工作方式，而不是给我项目背景。\n\n【业务流约束】\n- 你必须像一个正在提供服务的项目能力包，而不是像一个讲解员。\n- 每一轮只推进一个步骤；提出问题后必须停下来等我回答。\n- 每一步都必须让我感受到一个具体服务动作：澄清、整理、规划、检查、判断或收尾。\n- 每一步都要说明：当前目标、你需要我提供什么、我回答后你会产出什么。\n- 不要安装、不要运行命令、不要写代码、不要声称测试通过、不要声称已经修改文件。\n- 需要真实安装或宿主加载后才能验证的内容，必须明确说“这一步需要安装后验证”。\n- 如果我说“用示例继续”，你可以用虚构示例推进，但仍然不能声称真实执行。\n\n【可体验服务能力】\n- 安装前能力预览: Open-source React Video Editor with client-side rendering (WebCodecs) and pixi.js. Capcut clone. Canva clone. React video editor. webgl video editor. 输入：用户任务, 当前 AI 对话上下文；输出：示例引导, 判断线索。\n\n【必须安装后才可验证的能力】\n- 命令行启动或安装流程: 项目文档中存在可执行命令，真实使用需要在本地或宿主环境中运行这些命令。 输入：终端环境, 包管理器, 项目依赖；输出：安装结果, 列表/更新/运行结果。\n\n【核心服务流】\n请严格按这个顺序带我体验。不要一次性输出完整流程：\n1. page-introduction：项目介绍。围绕“项目介绍”模拟一次用户任务，不展示安装或运行结果。\n2. page-installation：安装与配置。围绕“安装与配置”模拟一次用户任务，不展示安装或运行结果。\n3. page-quick-start：快速开始。围绕“快速开始”模拟一次用户任务，不展示安装或运行结果。\n4. page-architecture：系统架构。围绕“系统架构”模拟一次用户任务，不展示安装或运行结果。\n5. page-studio：Studio - 项目状态管理。围绕“Studio - 项目状态管理”模拟一次用户任务，不展示安装或运行结果。\n\n【核心能力体验剧本】\n每一步都必须按“输入 -> 服务动作 -> 中间产物”执行。不要只说流程名：\n1. page-introduction\n输入：用户提供的“项目介绍”相关信息。\n服务动作：模拟项目在这一步的核心判断和整理方式。\n中间产物：一个可检查的小结果。\n\n2. page-installation\n输入：用户提供的“安装与配置”相关信息。\n服务动作：模拟项目在这一步的核心判断和整理方式。\n中间产物：一个可检查的小结果。\n\n3. page-quick-start\n输入：用户提供的“快速开始”相关信息。\n服务动作：模拟项目在这一步的核心判断和整理方式。\n中间产物：一个可检查的小结果。\n\n4. page-architecture\n输入：用户提供的“系统架构”相关信息。\n服务动作：模拟项目在这一步的核心判断和整理方式。\n中间产物：一个可检查的小结果。\n\n5. page-studio\n输入：用户提供的“Studio - 项目状态管理”相关信息。\n服务动作：模拟项目在这一步的核心判断和整理方式。\n中间产物：一个可检查的小结果。\n\n【项目服务规则】\n这些规则决定你如何服务用户。不要解释规则本身，而要在每一步执行时遵守：\n- 先确认用户任务、输入材料和成功标准，再模拟项目能力。\n- 每一步都必须形成可检查的小产物，并等待用户确认后再继续。\n- 凡是需要安装、调用工具或访问外部服务的能力，都必须标记为安装后验证。\n\n【每一步的服务约束】\n- Step 1 / page-introduction：Step 1 必须围绕“项目介绍”形成一个小中间产物，并等待用户确认。\n- Step 2 / page-installation：Step 2 必须围绕“安装与配置”形成一个小中间产物，并等待用户确认。\n- Step 3 / page-quick-start：Step 3 必须围绕“快速开始”形成一个小中间产物，并等待用户确认。\n- Step 4 / page-architecture：Step 4 必须围绕“系统架构”形成一个小中间产物，并等待用户确认。\n- Step 5 / page-studio：Step 5 必须围绕“Studio - 项目状态管理”形成一个小中间产物，并等待用户确认。\n\n【边界与风险】\n- 不要声称已经安装、运行、调用 API、读写本地文件或完成真实任务。\n- 安装前预览只能展示工作方式，不能证明兼容性、性能或输出质量。\n- 涉及安装、插件加载、工具调用或外部服务的能力必须安装后验证。\n\n【可追溯依据】\n这些路径只用于你内部校验或在我追问“依据是什么”时简要引用。不要在首次回复主动展开：\n- https://github.com/openvideodev/openvideo\n- https://github.com/openvideodev/openvideo#readme\n- README.md\n- packages/openvideo/src/index.ts\n- docs/content/docs/installation.mdx\n- packages/openvideo/package.json\n- package.json\n- docs/content/docs/basic-usage.mdx\n- packages/openvideo/src/studio.ts\n- examples/src/App.tsx\n- packages/openvideo/src/compositor.ts\n- packages/openvideo/src/studio/timeline-model.ts\n\n【首次问题规则】\n- 首次三问必须先确认用户目标、成功标准和边界，不要提前进入工具、安装或实现细节。\n- 如果后续需要技术条件、文件路径或运行环境，必须等用户确认目标后再追问。\n\n首次回复必须只输出下面 4 个部分：\n1. 体验开始：用 1 句话说明你将带我体验 openvideo 的核心服务。\n2. 当前步骤：明确进入 Step 1，并说明这一步要解决什么。\n3. 你会如何服务我：说明你会先改变我完成任务的哪个动作。\n4. 只问我 3 个问题，然后停下等待回答。\n\n首次回复禁止输出：后续完整流程、证据清单、安装命令、项目评价、营销文案、已经安装或运行的说法。\n\nStep 1 / brainstorming 的二轮协议：\n- 我回答首次三问后，你仍然停留在 Step 1 / brainstorming，不要进入 Step 2。\n- 第二次回复必须产出 6 个部分：澄清后的任务定义、成功标准、边界条件、\n 2-3 个可选方案、每个方案的权衡、推荐方案。\n- 第二次回复最后必须问我是否确认推荐方案；只有我明确确认后，才能进入下一步。\n- 第二次回复禁止输出 git worktree、代码计划、测试文件、命令或真实执行结果。\n\n后续对话规则：\n- 我回答后，你先完成当前步骤的中间产物并等待确认；只有我确认后，才能进入下一步。\n- 每一步都要生成一个小的中间产物，例如澄清后的目标、计划草案、测试意图、验证清单或继续/停止判断。\n- 所有演示都写成“我会建议/我会引导/这一步会形成”，不要写成已经真实执行。\n- 不要声称已经测试通过、文件已修改、命令已运行或结果已产生。\n- 如果某个能力必须安装后验证，请直接说“这一步需要安装后验证”。\n- 如果证据不足，请明确说“证据不足”，不要补事实。\n```\n",
"voices": [
{
"body": "来源平台：github。github/github_issue: meta property is read-only（https://github.com/openvideodev/openvideo/issues/19）。这些是项目级外部声音，不作为单独质量证明。",
"items": [
{
"kind": "github_issue",
"source": "github",
"title": "meta property is read-only",
"url": "https://github.com/openvideodev/openvideo/issues/19"
}
],
"status": "已收录 1 条来源",
"title": "社区讨论"
}
]
},
"homepage_card": {
"category": "软件开发与交付",
"desc": "Open-source React Video Editor with client-side rendering (WebCodecs) and pixi.js. Capcut clone. Canva clone. React video editor. webgl video editor.",
"effort": "安装已验证",
"forks": 31,
"icon": "code",
"name": "openvideo 能力包",
"risk": "需复核",
"slug": "openvideo",
"stars": 224,
"tags": [
"浏览器 Agent",
"网页任务自动化",
"浏览器自动化",
"节点式流程编排",
"本地优先"
],
"thumb": "gray",
"type": "Skill Pack"
},
"manual": {
"markdown": "# https://github.com/openvideodev/openvideo 项目说明书\n\n生成时间：2026-05-14 00:03:22 UTC\n\n## 目录\n\n- [项目介绍](#page-introduction)\n- [安装与配置](#page-installation)\n- [快速开始](#page-quick-start)\n- [系统架构](#page-architecture)\n- [Studio - 项目状态管理](#page-studio)\n- [Compositor - 渲染引擎](#page-compositor)\n- [剪辑系统](#page-clips)\n- [视频与音频剪辑](#page-video-clip)\n- [文字与字幕剪辑](#page-text-caption)\n- [资源管理](#page-resources)\n\n\n\n## 项目介绍\n\n### 相关页面\n\n相关主题：[安装与配置](#page-installation), [系统架构](#page-architecture)\n\n\n相关源码文件
\n\n以下源码文件用于生成本页说明：\n\n- [README.md](https://github.com/openvideodev/openvideo/blob/main/README.md)\n- [packages/node/README.md](https://github.com/openvideodev/openvideo/blob/main/packages/node/README.md)\n- [packages/openvideo/render.html](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/render.html)\n- [packages/node/src/template.html](https://github.com/openvideodev/openvideo/blob/main/packages/node/src/template.html)\n- [packages/openvideo/src/animation/presets.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/animation/presets.ts)\n- [packages/openvideo/src/clips/video-clip.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/clips/video-clip.ts)\n- [packages/openvideo/src/transition/transition.ts](https://github.com/openvideov/openvideo/blob/main/packages/openvideo/src/transition/transition.ts)\n- [packages/openvideo/src/clips/text-clip.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/clips/text-clip.ts)\n- [packages/openvideo/src/clips/caption-clip.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/clips/caption-clip.ts)\n- [packages/openvideo/src/sprite/base-sprite.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/sprite/base-sprite.ts)\n- [packages/openvideo/src/mp4-utils/index.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/mp4-utils/index.ts)\n- [packages/openvideo/src/utils/chromakey.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/utils/chromakey.ts)\n \n\n# 项目介绍\n\n## 概述\n\nOpenVideo 是一个开源的 Web 端视频编辑与渲染引擎，旨在为开发者提供基于现代 Web 技术的视频处理能力。该项目充分利用 WebCodecs API 实现硬件加速的视频编解码，结合 PixiJS 渲染引擎实现高性能的 2D/3D 图形渲染。OpenVideo 的设计理念是让视频编辑功能能够在浏览器环境中高效运行，同时支持服务端 Node.js 环境下的视频渲染输出。\n\n## 核心功能\n\nOpenVideo 提供了完整的视频编辑工作流支持，包括时间线管理、轨道编辑、剪辑合成、特效转场等功能模块。开发者可以通过声明式的 JSON 配置或程序化的 API 调用来构建复杂的视频编辑场景。\n\n### 主要能力\n\n| 功能类别 | 支持内容 |\n|---------|---------|\n| 媒体剪辑 | 视频、音频、图片、字幕、文字 |\n| 视频特效 | 动画预设、滤镜、透明度、镜像、缩放 |\n| 转场效果 | 超过 30 种转场动画（淡入淡出、滑动、缩放等） |\n| 渲染输出 | WebCodecs 硬件编码、MP4 封装 |\n| 实时预览 | Canvas 2D/WebGL 渲染、帧级同步 |\n\n## 技术架构\n\n### 技术栈\n\nOpenVideo 基于以下核心技术构建：\n\n| 技术 | 用途 |\n|-----|------|\n| **WebCodecs API** | 硬件加速的视频编码/解码处理 |\n| **PixiJS** | 高性能 2D/3D 渲染引擎 |\n| **wrapbox** | MP4 容器操作的底层工具库 |\n| **TypeScript** | 类型安全的开发环境 |\n| **Playwright** | 服务端渲染的浏览器自动化 |\n\n### 架构层次\n\n```\n┌─────────────────────────────────────────────┐\n│ 应用层 (Application) │\n│ Studio │ Compositor │ PreviewCanvas │\n├─────────────────────────────────────────────┤\n│ 剪辑层 (Clips) │\n│ VideoClip │ AudioClip │ TextClip │ ImageClip │\n│ CaptionClip │ SubtitleClip │\n├─────────────────────────────────────────────┤\n│ 精灵层 (Sprites) │\n│ BaseSprite │ Transform │ Animations │\n├─────────────────────────────────────────────┤\n│ 渲染层 (Rendering) │\n│ PixiJS App │ WebGL │ Compositor │\n├─────────────────────────────────────────────┤\n│ 工具层 (Utils) │\n│ Chromakey │ MP4 Utils │ Serialization │\n├─────────────────────────────────────────────┤\n│ 编码层 (Codecs) │\n│ VideoEncoder │ VideoDecoder │ MP4 Muxer │\n└─────────────────────────────────────────────┘\n```\n\n## 项目结构\n\nOpenVideo 采用 Monorepo 架构，主要包含以下包：\n\n```\nopenvideo/\n├── packages/\n│ ├── openvideo/ # 核心库\n│ │ └── src/\n│ │ ├── clips/ # 各类剪辑实现\n│ │ │ ├── video-clip.ts\n│ │ │ ├── text-clip.ts\n│ │ │ ├── caption-clip.ts\n│ │ │ └── ...\n│ │ ├── animation/ # 动画预设\n│ │ │ └── presets.ts\n│ │ ├── transition/ # 转场效果\n│ │ │ └── transition.ts\n│ │ ├── sprite/ # 精灵基类\n│ │ │ └── base-sprite.ts\n│ │ ├── mp4-utils/ # MP4 封装工具\n│ │ │ └── index.ts\n│ │ ├── utils/ # 工具函数\n│ │ │ └── chromakey.ts\n│ │ └── render.html # 渲染模板\n│ │\n│ └── node/ # Node.js 服务端渲染包\n│ └── src/\n│ ├── renderer.ts # 主渲染器\n│ ├── types.ts # 类型定义\n│ ├── template.html # HTML 模板\n│ └── sample.ts # 使用示例\n│\n└── examples/ # 示例项目\n```\n\n## 核心组件\n\n### Studio（工作室）\n\nStudio 是项目的顶层状态管理器，负责协调整个视频编辑项目的运行。它管理时间线配置、轨道层级、剪辑序列以及预览播放状态。\n\n```typescript\nimport { Studio } from 'openvideo';\n\nconst studio = new Studio({\n canvas: document.getElementById('preview-canvas') as HTMLCanvasElement,\n spacing: 20\n});\n\nconst video = await Video.fromUrl('https://example.com/video.mp4');\nawait studio.addClip(video);\nstudio.play();\n```\n\n资料来源：[README.md]()\n\n### Compositor（合成器）\n\nCompositor 是核心渲染引擎，负责处理视频帧的合成、编码输出和最终导出。它封装了 PixiJS 应用和 WebCodecs 视频编码器，提供统一的渲染接口。\n\n| 配置选项 | 类型 | 默认值 | 说明 |\n|---------|------|-------|------|\n| width | number | 1280 | 输出视频宽度 |\n| height | number | 720 | 输出视频高度 |\n| fps | number | 30 | 帧率 |\n| bgColor | string | '#000000' | 背景颜色 |\n| videoCodec | string | - | 视频编码器 |\n| bitrate | number | - | 比特率 |\n| audio | boolean | true | 是否包含音频 |\n\n资料来源：[packages/node/src/template.html:29-48]()\n\n### Clips（剪辑）\n\nClips 是各类媒体资源的抽象表示，包括以下类型：\n\n| 剪辑类型 | 文件 | 功能 |\n|---------|------|------|\n| VideoClip | video-clip.ts | 视频片段处理，支持 URL、Stream、OPFS 文件加载 |\n| TextClip | text-clip.ts | 文字渲染，支持样式、描边、阴影 |\n| CaptionClip | caption-clip.ts | 字幕处理，支持时间轴对齐和关键词高亮 |\n| AudioClip | - | 音频处理 |\n| ImageClip | - | 静态图像处理 |\n| SubtitleClip | - | 字幕轨道管理 |\n\n#### VideoClip 示例\n\n```typescript\nconst clip = await Video.fromUrl('https://example.com/video.mp4', {\n x: 100,\n y: 200,\n width: 640,\n height: 480\n});\n```\n\n资料来源：[packages/openvideo/src/clips/video-clip.ts:1-50]()\n\n#### TextClip 配置\n\nTextClip 支持丰富的文本样式配置：\n\n- fontFamily: 字体系列\n- fontSize: 字号\n- fontWeight: 字重\n- fontStyle: 斜体\n- fill: 填充颜色（支持渐变）\n- stroke: 描边效果\n- dropShadow: 阴影效果\n- align: 文本对齐\n- wordWrap: 自动换行\n\n资料来源：[packages/openvideo/src/clips/text-clip.ts:1-50]()\n\n## 动画系统\n\n### 动画预设\n\nOpenVideo 内置了丰富的动画预设，可在 `presets.ts` 中查看：\n\n| 预设名称 | 效果类型 |\n|---------|---------|\n| fadeIn | 淡入效果 |\n| fadeOut | 淡出效果 |\n| slideIn | 滑入动画 |\n| slideOut | 滑出动画 |\n| pulse | 脉冲动画 |\n| blurIn | 模糊淡入 |\n| blurOut | 模糊淡出 |\n\n```typescript\n// 动画配置结构\n{\n \"0%\": {\n x: 0,\n y: 0,\n opacity: 0,\n scale: 1,\n mirror: 0\n },\n \"100%\": {\n x: 100,\n y: 0,\n opacity: 1,\n scale: 1,\n mirror: 0\n }\n}\n```\n\n资料来源：[packages/openvideo/src/animation/presets.ts:1-80]()\n\n### 变换属性\n\nBaseSprite 提供了完整的变换控制：\n\n| 属性 | 说明 |\n|-----|------|\n| x, y | 位置坐标 |\n| width, height | 尺寸 |\n| scale, scaleX, scaleY | 缩放 |\n| angle | 旋转角度 |\n| opacity | 透明度 |\n| blur | 模糊程度 |\n| brightness | 亮度 |\n| mirror | 镜像模式 |\n| motionBlur | 运动模糊 |\n\n资料来源：[packages/openvideo/src/sprite/base-sprite.ts:1-50]()\n\n## 转场效果\n\n### 支持的转场类型\n\nOpenVideo 实现了超过 30 种 GLSL 着色器转场效果：\n\n| 转场名称 | 说明 |\n|---------|------|\n| GridFlip | 网格翻转 |\n| Circle | 圆形展开 |\n| Directional | 方向擦除 |\n| UndulatingBurnOut | 波纹燃烧 |\n| SquaresWire | 方块线条 |\n| RotateScaleFade | 旋转缩放淡入 |\n| RandomSquares | 随机方块 |\n| PolarFunction | 极坐标变换 |\n| Hexagonalize | 六边形化 |\n| Heart | 心形展开 |\n| Displacement | 置换变形 |\n| DirectionalWipe | 方向擦除 |\n| DirectionalWarp | 方向扭曲 |\n| Crosshatch | 网格线 |\n| CircleOpen | 圆环展开 |\n| CannabisLeaf | 叶片形状 |\n| StereoViewer | 立体视差 |\n| GlitchDisplace | 故障艺术 |\n| CrossZoom | 交叉缩放 |\n| BowTieHorizontal | 蝴蝶结水平 |\n| PolkaDotsCurtain | 波点帘幕 |\n| Pixelize | 像素化 |\n\n转场效果的实现通过 GLSL 片段着色器完成，支持自定义 uniform 参数配置。\n\n资料来源：[packages/openvideo/src/transition/transition.ts:1-100]()\n\n## 渲染流程\n\n### 服务端渲染\n\nNode.js 包提供了无头浏览器环境下的视频渲染能力：\n\n```mermaid\ngraph TD\n A[创建 Renderer 实例] --> B[启动本地服务器]\n B --> C[Playwright 打开浏览器]\n C --> D[加载 HTML 模板]\n D --> E[注入 JSON 配置]\n E --> F[Compositor 初始化]\n F --> G[逐帧渲染]\n G --> H[WebCodecs 编码]\n H --> I[MP4 封装]\n I --> J[保存输出文件]\n```\n\n### 渲染器配置\n\n```typescript\nconst renderer = new Renderer({\n json: videoConfig, // 视频配置 JSON\n outputPath: './out.mp4', // 输出路径\n browserOptions: {\n headless: true, // 无头模式\n timeout: 600000 // 10 分钟超时\n }\n});\n\nrenderer.on('progress', ({ phase, progress }) => {\n console.log(`[${phase}] ${Math.round(progress * 100)}%`);\n});\n\nawait renderer.render();\n```\n\n### 渲染进度事件\n\n| 阶段 | 说明 |\n|-----|------|\n| initializing | 初始化中 |\n| loading | 加载资源 |\n| rendering | 渲染中 |\n| saving | 保存文件 |\n| complete | 完成 |\n\n资料来源：[packages/node/README.md:60-90]()\n\n## 工具模块\n\n### MP4 工具\n\n`mp4-utils` 提供了 MP4 容器级别的操作能力，包括样本注入、时间戳规范化、轨道管理等功能。\n\n```typescript\n// 时间戳规范化处理\nsamples.forEach((s) => {\n if (firstVDTS === null) {\n firstVDTS = s.dts;\n firstVCTS = s.cts;\n }\n const normalizedDTS = s.dts - firstVDTS;\n const normalizedCTS = s.cts - (firstVCTS ?? 0);\n \n outfile.addSample(trackId, new Uint8Array(s.data), {\n duration: s.duration,\n dts: normalizedDTS + offsetDTS,\n cts: normalizedCTS + offsetCTS,\n is_sync: s.is_sync\n });\n});\n```\n\n资料来源：[packages/openvideo/src/mp4-utils/index.ts:1-50]()\n\n### 绿幕抠像\n\n`chromakey` 模块提供了颜色键抠像功能：\n\n```typescript\nimport { createChromakey } from 'openvideo/utils/chromakey';\n\nconst chromakeyFilter = createChromakey({\n keyColor: [0, 255, 0], // 绿色\n similarity: 0.4,\n smoothness: 0.1\n});\n\n// 用于 VideoClip 的处理管道\nvideoClip.setFilter(chromakeyFilter);\n```\n\n资料来源：[packages/openvideo/src/utils/chromakey.ts:1-50]()\n\n## 使用方式\n\n### 前端使用\n\n```typescript\nimport { Studio, Compositor, Video, TextClip } from 'openvideo';\n\n// 1. 创建工作室\nconst studio = new Studio({\n canvas: document.getElementById('canvas'),\n width: 1920,\n height: 1080\n});\n\n// 2. 添加视频\nconst video = await Video.fromUrl('input.mp4');\nstudio.addClip(video);\n\n// 3. 添加文字\nconst text = new TextClip('Hello World', {\n fontSize: 48,\n fontFamily: 'Arial'\n});\nstudio.addClip(text);\n\n// 4. 预览播放\nstudio.play();\n```\n\n### 服务端渲染\n\n```bash\n# 安装依赖\npnpm install\n\n# 构建项目\npnpm build\n\n# 运行示例\ncd packages/node\npnpm render\n```\n\n## 环境要求\n\n| 环境 | 版本要求 |\n|-----|---------|\n| Node.js | >= 18 |\n| 浏览器 | 支持 WebCodecs（Chrome 94+, Edge 94+） |\n| Playwright | Chromium 已安装 |\n\n## 许可证\n\nOpenVideo 采用 MIT 许可证开源。详情请参阅 [LICENSE](LICENSE) 文件。\n\n## 联系方式\n\n如有问题或合作意向，可通过以下方式联系：\n\n- 邮箱：hello@openvideo.dev\n- 官网：https://openvideo.dev\n\n---\n\n\n\n## 安装与配置\n\n### 相关页面\n\n相关主题：[项目介绍](#page-introduction), [快速开始](#page-quick-start)\n\n\n相关源码文件
\n\n以下源码文件用于生成本页说明：\n\n- [docs/content/docs/installation.mdx](https://github.com/openvideodev/openvideo/blob/main/docs/content/docs/installation.mdx)\n- [packages/openvideo/package.json](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/package.json)\n- [package.json](https://github.com/openvideodev/openvideo/blob/main/package.json)\n- [packages/node/README.md](https://github.com/openvideodev/openvideo/blob/main/packages/node/README.md)\n- [packages/openvideo/README.md](https://github.com/openvideodev/openvideo/blob/main/README.md)\n- [packages/node/package.json](https://github.com/openvideodev/openvideo/blob/main/packages/node/package.json)\n \n\n# 安装与配置\n\nOpenVideo 是一个基于 WebCodecs API 的高性能视频处理和渲染库，支持在浏览器和 Node.js 环境中进行视频合成、编辑和导出。本页面详细介绍 OpenVideo 项目的安装流程、依赖要求以及各平台的配置方法。\n\n## 系统要求\n\n### 浏览器环境要求\n\nOpenVideo 核心库依赖 WebCodecs API 进行硬件加速的视频编解码处理。根据 `packages/openvideo/package.json` 中的信息，浏览器环境需要满足以下要求：\n\n| 组件 | 最低要求 | 说明 |\n|------|---------|------|\n| WebCodecs API | 必须支持 | 用于视频编码和解码的核心 API |\n| 浏览器版本 | Chrome 94+ / Edge 94+ / Opera 80+ | 主流浏览器需开启相关特性标志 |\n| ES Modules | 必须支持 | 包使用 ES Module 格式发布 |\n| OPFS API | 推荐支持 | 用于本地大文件存储，提升性能 |\n\nWebCodecs API 在部分浏览器中可能需要手动启用特性标志。Chromium 内核浏览器可通过以下方式启用：\n\n```javascript\n// 启用 WebCodecs API\nawait navigator.mediaCapabilities.decodingInfo({\n type: 'file',\n video: { type: 'video/mp4', width: 1920, height: 1080, bitrate: 5000000 }\n});\n```\n\n资料来源：[packages/openvideo/package.json:1-35]()\n\n### Node.js 环境要求\n\n当使用 `@combo/node` 包进行服务端视频渲染时，需要满足以下条件：\n\n| 要求 | 版本 | 说明 |\n|------|------|------|\n| Node.js | >= 18 | 需要支持 ES Modules 和部分 Web API |\n| Playwright | 最新版 | 用于无头浏览器环境运行渲染 |\n| 操作系统 | Windows/macOS/Linux | 支持 Playwright 运行的所有平台 |\n\n资料来源：[packages/node/README.md:1-100]()\n\n## 安装方式\n\n### 使用 pnpm（推荐）\n\nOpenVideo 采用 Monorepo 结构管理多个包，推荐使用 pnpm 进行安装：\n\n```bash\n# 安装根依赖\npnpm install\n\n# 安装 openvideo 核心包\npnpm --filter openvideo build\n\n# 安装 Node.js 渲染包\npnpm --filter @combo/node build\n```\n\n资料来源：[packages/openvideo/package.json:1-40]()\n\n### 使用 npm\n\n```bash\n# 安装核心库\nnpm install openvideo\n\n# 安装 Node.js 渲染包\nnpm install @combo/node\n```\n\n### 使用 yarn\n\n```bash\n# 安装核心库\nyarn add openvideo\n\n# 安装 Node.js 渲染包\nyarn add @combo/node\n```\n\n### CDN 引入\n\n对于浏览器环境，可以直接通过 CDN 引入 OpenVideo：\n\n```html\n\n\n```\n\n资料来源：[packages/node/src/template.html:1-20]()\n\n## 包结构说明\n\nOpenVideo 项目包含多个子包，每个包承担特定功能：\n\n### 核心包 (openvideo)\n\n| 属性 | 值 | 说明 |\n|------|---|------|\n| 包名 | openvideo | 核心视频处理库 |\n| 版本 | 0.2.18 | 当前稳定版本 |\n| 入口 (main) | dist/index.umd.js | UMD 格式，用于传统 script 标签 |\n| 入口 (module) | dist/index.es.js | ES Module 格式 |\n| 类型定义 | dist/index.d.ts | TypeScript 类型定义 |\n\n```json\n{\n \"name\": \"openvideo\",\n \"version\": \"0.2.18\",\n \"main\": \"dist/index.umd.js\",\n \"module\": \"dist/index.es.js\",\n \"types\": \"dist/index.d.ts\"\n}\n```\n\n资料来源：[packages/openvideo/package.json:1-20]()\n\n### Node.js 渲染包 (@combo/node)\n\n用于在 Node.js 环境中进行服务端视频渲染，通过 Playwright 控制无头浏览器执行渲染任务：\n\n```json\n{\n \"name\": \"@combo/node\",\n \"dependencies\": {\n \"playwright\": \"latest\"\n }\n}\n```\n\n资料来源：[packages/node/package.json]()\n\n## 核心组件导入\n\n### 浏览器环境导入\n\n```typescript\n// 方式一：从完整包导入\nimport { Studio, Compositor, Video, Audio, Text, Image } from 'openvideo';\n\n// 方式二：按需导入（Tree-shaking 友好）\nimport { Studio } from 'openvideo';\nimport { Compositor } from 'openvideo';\nimport { Video } from 'openvideo/clips/video-clip';\n```\n\n### Node.js 环境导入\n\n```typescript\nimport { Renderer } from '@combo/node';\n\nconst renderer = new Renderer({\n json: videoConfig,\n outputPath: './output.mp4'\n});\n\nrenderer.on('progress', ({ phase, progress }) => {\n console.log(`[${phase}] ${Math.round(progress * 100)}%`);\n});\n\nawait renderer.render();\n```\n\n资料来源：[packages/node/README.md:80-120]()\n\n## 构建配置\n\n### 浏览器端构建\n\nOpenVideo 使用 Vite 进行构建，生成 UMD 和 ES Module 两种格式：\n\n```bash\n# 在 packages/openvideo 目录下\npnpm build\n```\n\n构建产物包含：\n\n| 文件 | 格式 | 用途 |\n|------|------|------|\n| dist/index.umd.js | UMD | 兼容 AMD/CommonJS/全局变量 |\n| dist/index.es.js | ES Module | 现代浏览器和打包工具 |\n| dist/index.d.ts | TypeScript | 类型定义 |\n\n资料来源：[packages/openvideo/package.json:20-35]()\n\n### Node.js 包构建\n\n```bash\n# 构建 Node.js 渲染包\npnpm --filter @combo/node build\n```\n\n构建后需复制 HTML 模板到 dist 目录：\n\n```bash\n# 复制模板文件\ncp src/template.html dist/template.html\n```\n\n资料来源：[packages/node/README.md:40-80]()\n\n## 渲染器配置\n\n### Compositor 配置选项\n\n在浏览器环境中，Compositor 是核心渲染引擎：\n\n```typescript\nconst compositorOpts = {\n width: 1920, // 视频宽度\n height: 1080, // 视频高度\n fps: 30, // 帧率\n bgColor: '#000000', // 背景颜色\n videoCodec: 'avc1.64001f', // 视频编码器（可选）\n bitrate: 5000000, // 比特率（可选）\n audio: true, // 是否包含音频\n metaDataTags: { // 元数据标签（可选）\n title: 'My Video',\n author: 'Creator'\n }\n};\n\nconst compositor = new Compositor(compositorOpts);\nawait compositor.initPixiApp();\n```\n\n资料来源：[packages/node/src/template.html:30-60]()\n\n### Renderer 配置选项（Node.js）\n\n| 选项 | 类型 | 必填 | 默认值 | 说明 |\n|------|------|------|--------|------|\n| json | object | 是 | - | 视频配置 JSON 对象 |\n| outputPath | string | 是 | - | 输出文件路径 |\n| browserOptions | object | 否 | 见下文 | 浏览器配置 |\n\n**browserOptions 子选项：**\n\n| 选项 | 类型 | 默认值 | 说明 |\n|------|------|--------|------|\n| headless | boolean | true | 是否使用无头模式 |\n| timeout | number | 300000 | 超时时间（毫秒） |\n\n```typescript\nconst renderer = new Renderer({\n json: videoConfig,\n outputPath: './output.mp4',\n browserOptions: {\n headless: true,\n timeout: 600000 // 10 分钟\n }\n});\n```\n\n资料来源：[packages/node/README.md:100-140]()\n\n## 快速开始示例\n\n### 浏览器端视频编辑\n\n```typescript\nimport { Studio, Video, Audio } from 'openvideo';\n\n// 1. 创建 Studio 实例\nconst studio = new Studio({\n canvas: document.getElementById('preview-canvas') as HTMLCanvasElement,\n spacing: 20\n});\n\n// 2. 加载并添加视频片段\nconst video = await Video.fromUrl('https://example.com/video.mp4');\nawait studio.addClip(video);\n\n// 3. 添加音频\nconst audio = await Audio.fromUrl('https://example.com/audio.mp3');\nawait studio.addClip(audio);\n\n// 4. 开始预览\nstudio.play();\n```\n\n资料来源：[README.md:1-50]()\n\n### 服务端批量渲染\n\n```typescript\nimport { Renderer } from '@combo/node';\n\n// 批量渲染配置\nconst videos = [\n { config: videoConfig1, output: 'output1.mp4' },\n { config: videoConfig2, output: 'output2.mp4' }\n];\n\nfor (const { config, output } of videos) {\n const renderer = new Renderer({\n json: config,\n outputPath: output\n });\n \n renderer.on('progress', ({ phase, progress }) => {\n console.log(`[${phase}] ${Math.round(progress * 100)}%`);\n });\n \n await renderer.render();\n console.log(`✅ 已生成: ${output}`);\n}\n```\n\n## 开发环境配置\n\n### TypeScript 配置\n\n确保 tsconfig.json 正确配置模块解析：\n\n```json\n{\n \"compilerOptions\": {\n \"module\": \"ESNext\",\n \"moduleResolution\": \"bundler\",\n \"target\": \"ES2020\",\n \"lib\": [\"ES2020\", \"DOM\", \"DOM.Iterable\"]\n }\n}\n```\n\n### 开发工作流\n\n```mermaid\ngraph TD\n A[修改源代码] --> B[运行构建命令]\n B --> C{目标平台}\n C -->|浏览器| D[pnpm --filter openvideo build]\n C -->|Node.js| E[pnpm --filter @combo/node build]\n D --> F[测试功能]\n E --> F\n F --> G{验证通过?}\n G -->|是| H[提交代码]\n G -->|否| A\n```\n\n开发调试步骤：\n\n1. **修改源代码** - 在 `packages/openvideo/src/` 或 `packages/node/src/` 目录下修改代码\n2. **重新构建** - 运行相应的构建命令\n3. **运行测试** - 执行 `pnpm test` 验证功能\n4. **调试运行** - 在 Node.js 中测试 `node dist/sample.js`\n\n资料来源：[packages/node/README.md:60-90]()\n\n## 常见问题排查\n\n### Playwright 安装失败\n\n```bash\n# 手动安装 Chromium\nnpx playwright install chromium\n```\n\n### 模块解析错误\n\n确保 openvideo 包已构建：\n\n```bash\npnpm --filter openvideo build\n```\n\n### 渲染超时\n\n增加浏览器超时时间：\n\n```typescript\nbrowserOptions: {\n timeout: 600000 // 10 分钟\n}\n```\n\n### WebCodecs 不可用\n\n检查浏览器是否支持 WebCodecs：\n\n```javascript\nif ('VideoDecoder' in window) {\n console.log('WebCodecs API 支持正常');\n} else {\n console.error('浏览器不支持 WebCodecs API');\n}\n```\n\n## 技术栈依赖\n\nOpenVideo 基于以下核心技术构建：\n\n| 技术 | 用途 | 版本要求 |\n|------|------|----------|\n| WebCodecs | 硬件加速视频编解码 | 现代浏览器 |\n| PixiJS | 2D 渲染引擎 | 最新稳定版 |\n| wrapbox | MP4 容器操作 | 内置工具库 |\n| Playwright | 无头浏览器控制 | Node.js 环境 |\n\n核心组件架构：\n\n```mermaid\ngraph TB\n subgraph \"用户层\"\n A[Studio API]\n B[Compositor API]\n C[Clip API]\n end\n \n subgraph \"渲染引擎层\"\n D[PixiJS Renderer]\n E[WebCodecs Encoder]\n F[WebCodecs Decoder]\n end\n \n subgraph \"文件处理层\"\n G[MP4 Muxer]\n H[wrapbox]\n I[OPFS Manager]\n end\n \n A --> D\n B --> E\n C --> F\n D --> G\n E --> G\n F --> I\n G --> H\n```\n\n资料来源：[README.md:50-80]()\n\n## 下一步\n\n完成安装配置后，建议继续阅读以下文档：\n\n- [快速开始指南](./quickstart.mdx) - 了解核心使用流程\n- [API 参考](./api-reference.mdx) - 完整的 API 文档\n- [示例项目](../examples/index.md) - 实际应用案例\n\n---\n\n\n\n## 快速开始\n\n### 相关页面\n\n相关主题：[安装与配置](#page-installation), [Studio - 项目状态管理](#page-studio)\n\n\n相关源码文件
\n\n以下源码文件用于生成本页说明：\n\n- [packages/openvideo/src/studio.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/studio.ts)\n- [examples/src/App.tsx](https://github.com/openvideodev/openvideo/blob/main/examples/src/App.tsx)\n- [packages/openvideo/src/clips/video-clip.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/clips/video-clip.ts)\n- [packages/openvideo/src/clips/text-clip.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/clips/text-clip.ts)\n- [packages/openvideo/package.json](https://github.com/openvideov/openvideo/blob/main/packages/openvideo/package.json)\n- [README.md](https://github.com/openvideodev/openvideo/blob/main/README.md)\n \n\n# 快速开始\n\n本文档将帮助你在 5 分钟内快速上手 OpenVideo，掌握视频渲染项目的基本创建、剪辑添加和预览播放流程。\n\n---\n\n## 环境要求\n\n| 要求 | 版本说明 |\n|------|----------|\n| Node.js | >= 18 |\n| 包管理器 | pnpm（推荐） |\n| 浏览器 | 支持 WebCodecs API 的现代浏览器（Chrome、Edge、Firefox） |\n\n**安装依赖：**\n\n```bash\n# 克隆项目\ngit clone https://github.com/openvideodev/openvideo.git\ncd openvideo\n\n# 安装项目依赖\npnpm install\n\n# 构建核心包\npnpm --filter openvideo build\n```\n\n资料来源：[README.md:1-50]()\n\n---\n\n## 核心概念\n\nOpenVideo 的架构围绕三个核心组件展开：**Studio**（工作室）、**Compositor**（合成器）和 **Clips**（剪辑片段）。\n\n### 组件架构图\n\n```mermaid\ngraph TD\n A[Studio] --> B[Compositor]\n A --> C[Clips]\n C --> D[Video]\n C --> E[Audio]\n C --> F[Text]\n C --> G[Image]\n C --> H[Caption]\n B --> I[WebCodecs]\n B --> J[PixiJS]\n I --> K[MP4 Output]\n```\n\n| 组件 | 职责 |\n|------|------|\n| **Studio** | 管理项目状态、时间轴、轨道和剪辑 |\n| **Compositor** | 渲染引擎，处理播放、seek 和最终导出 |\n| **Clips** | 不同媒体类型的专用对象 |\n\n资料来源：[README.md:50-80]()\n\n---\n\n## 基本使用流程\n\n### 1. 创建 Studio 实例\n\n首先，需要在 HTML 中创建一个 `