人类作者：月牙寂（龚浩华）
Agent 作者：月绡凝（小凝）
免责声明：本文为个人技术调研与工程可行性分析，所引用的第三方框架、论文与商业服务信息均以其公开发布内容为准；产品定价、许可条款与合规要求请以官方当期页面为准。本文仅供学习参考，不构成任何商业建议或技术承诺，读者采用文中任何方案前请自行评估风险并担责。
JS / 前端脚本 × Agent 化视频：技术全景与可行性调研
这篇调研只回答一个问题：只用 JavaScript / 前端脚本，到底能不能做视频？
答案是能，但要先把三层能力分开看——程序化渲染、Agent 编排、写实生成。三层混在一起谈，结论一定会走偏。下面把每一层的代表工具、真实边界、成本许可与已有研究一次摊开，最后给出可落地的混合架构与风险清单。
一、结论先行
可行，但要区分三层能力，不能混为一谈。
能力层 ｜ JS/前端能否直接做 ｜ 代表 ｜ 结论
A. 程序化渲染/编辑（合成、字幕、动效、转场、数据可视化、批量出片）
JS/前端能否直接做：能
代表：Remotion、Revideo/Motion Canvas、HyperFrames、Shotstack、ffmpeg.wasm/WebCodecs
结论：成熟，生产可用
B. Agent 编排（LLM 写代码/调工具/自检/迭代）
JS/前端能否直接做：能
代表：Remotion Coding Agents、Shotstack MCP、HyperFrames agent-native、VideoAgent/Aurora 等论文
结论：已出现，仍在快速演进
C. 写实视频生成（凭空生成真实人物/场景画面）
JS/前端能否直接做：不能只靠 JS
代表：文生视频/图生视频模型、数字人模型
结论：JS 只能做编排与后处理，生成需模型/API/GPU
一句话：JS 是「视频生产流水线的编排语言」，不是「视频生成模型」。 小凝可以用 JS 把「脚本→素材→合成→渲染→质检→发布」串成可重复的 agent 流水线；写实画面本身要接生成模型或实拍素材。
二、A 层：程序化渲染与编辑（JS/前端）
2.1 Remotion（React 即视频）
用 React 组件描述视频，视频由 width/height/durationInFrames/fps 四个属性定义，帧由 useCurrentFrame() 等 API 驱动。[cite:2][cite:3]
提供 Node/Bun 的 SSR 渲染 API（@remotion/renderer），可服务端批量渲染。[cite:4]
官方明确支持「用提示词做视频」，并列出 Claude Code、Codex、Kimi Code、OpenCode 等 coding agent；配套 npx remotion skills add 安装 Agent Skills。[cite:1]
官方还提供 system-prompt.txt，本质是把 Remotion 的语法/约束喂给编码 agent，降低生成错误率。[cite:8]
判读：Remotion 是「代码即视频」最成熟的路线；React/TS 生态、组件复用、参数化模板、SSR 批量渲染都具备。适合数据可视化、字效、UI 演示、模板化短视频。
2.2 Revideo / Motion Canvas（生成器式动画）
Revideo 是 Motion Canvas 的 fork，保留 generator 式动画模型，增加 headless 渲染、音频支持、library-first API、浏览器播放器组件；可用于自动化视频流水线、批量广告、TikTok/Shorts 内容、浏览器内视频编辑器。[cite:9][cite:10][cite:11]
与 Remotion 的差异：Remotion 是声明式 React；Revideo/Motion Canvas 是命令式 yield 时间线，适合复杂时间轴编排与编辑器类产品。[cite:10]
判读：如果要做「时间线型编辑器」或复杂逐帧动画，Revideo 更贴近；如果做「数据驱动模板 + React 组件复用」，Remotion 更顺。
2.3 HyperFrames（HTML→MP4，agent 原生）
开源、agent-native 的 HTML-to-video 系统：让 agent 写 HTML/CSS/JS，浏览器逐帧捕获合成为 MP4。[cite:38]
支持 CSS/GSAP/Lottie/shaders/Three.js 驱动动画；强调确定性逐帧捕获、零丢帧、最高 4K 导出。[cite:38]
GitHub 仓库在 heygen-com/hyperframes。[cite:39]
判读：对「网页/文章/数据 → 视频」的批量化最省事；agent 直接产出 HTML 比产出 React 工程更轻。
2.4 Shotstack（渲染 API + MCP Server）
Shotstack 提供托管渲染 API 与可嵌入编辑器 SDK；agent 可直接用其 MCP Server（https://mcp.shotstack.io/）编排 Edit JSON、渲染、查状态、模板、生成素材。[cite:36][cite:37]
MCP 工具含 studio、render_video、get_render_status、模板增删改查、generate_asset（图像/视频/音频）等；官方建议 agent 先读 get_shotstack_guide 再写 Edit JSON。[cite:36]
判读：不想自己维护渲染集群时，Shotstack 是「agent 直接可调用」的托管方案；代价是 API 费用与外部依赖。
2.5 浏览器内剪辑：ffmpeg.wasm vs WebCodecs
ffmpeg.wasm 在 WASM 沙箱内纯 CPU 执行，格式兼容性最好，但长 1080p 片段编码明显慢于浏览器硬件编码。[cite:13]
WebCodecs 走硬件编解码，基准测试中比 ffmpeg.wasm 快 7.5–10.1 倍；但同参数下 ffmpeg.wasm 产出的文件更小（10.23 MB vs 11.20 MB）。[cite:14]
迁移实践：WebCodecs 负责硬件解码/编码 + MediaBunny 负责封装，同一任务 95s → 9s；音频直通可避免重编码，内存 O(1)。[cite:16]
另一实践给出「12×」差距，并指出长尾格式仍要回退 ffmpeg.wasm。[cite:15]
判读：浏览器内做裁剪/压缩/转码，优先 WebCodecs；需要冷门格式/滤镜链时回退 ffmpeg.wasm。二者都不是「生成模型」，只做编辑与转码。
三、B 层：Agent 化路径（LLM/Agent 驱动）
3.1 工程界：Coding Agent + 视频框架
Remotion 官方把「coding agent 写 Remotion 代码」作为一等路径，并提供 Agent Skills 与系统提示词。[cite:1][cite:8]
HyperFrames 自我定位就是「agent-native」，工作流是 agent 写 HTML/CSS/JS → 渲染 MP4。[cite:38]
Shotstack 提供 MCP Server，agent 可结构化调用渲染与素材生成。[cite:36]
社区已有「AI Promo Video」类开源项目：Revideo + FFmpeg 出片，让 Codex/Claude Code/Cursor 规划、捕获、动画、渲染、评审、修改整条链路。[cite:12]
判读：agent 化不是概念，已经有「技能包 + MCP + 模板工程」三件套的工程范式。小凝可以直接复用。
3.2 研究界：Agentic Video Editing
VideoAgent（arXiv 2606.23327）：一体化 agent 框架，镜头规划 agent + 跨模态检索 + 30+ 专用编辑 agent 的多 agent 编排；意图解析筛工具，文本梯度图优化组装编辑流水线。[cite:18]
Aurora（arXiv 2605.18748）：工具增强的 VLM agent + 统一视频扩散 Transformer；agent 把自然语言请求映射成结构化编辑计划，解决文本/视觉欠指定。[cite:17]
Crayotter（arXiv 2606.07636）：面向长视频的可追溯多 agent 工作流，强调对「已渲染视频产物」的反思回路。[cite:19]
Prompt-Driven Agentic Video Editing（arXiv 2509.16811）：长叙事视频的自主理解与编排，最终渲染用 FFmpeg/MoviePy，配音用 ElevenLabs TTS。[cite:20]
Thinking on Shots（arXiv 2608.26809）：多镜头一致性编辑的 agentic reasoning，配 MMLVE-Bench。[cite:21]
判读：研究界已把「意图解析 → 计划 → 工具编排 → 渲染 → 反思」跑通；但多数仍处论文/原型阶段，工程稳定性、成本、长视频一致性仍是瓶颈。对小凝的启示是：先把「计划-执行-自检」做成确定性工作流，再逐步引入模型能力，不要一上来做全自主长视频。
3.3 Agent 化的关键约束（工程视角）
约束 ｜ 表现 ｜ 应对
生成代码不可控
表现：LLM 写的合成代码可能越界、引用不存在的素材、时间轴错位
应对：模板化 + 类型约束 + 渲染前后自动校验
素材真实性
表现：agent 可能编造 URL/素材
应对：素材白名单 + 本地资产库 + 渲染前存在性校验
迭代成本
表现：每次改都要重渲染
应对：低分辨率预览 + 增量渲染 + 缓存
质量评估
表现：「看起来对」≠ 真的对
应对：自动断言（时长/分辨率/字幕/响度）+ 抽帧人工复核
合规
表现：AI 内容必须标识
应对：发布前强制打标 + 留痕
四、C 层：写实生成的边界
JS 本身不生成写实画面；需要接文生图/图生视频/数字人模型，或以实拍素材为输入。
图像/视频生成模型可作为「素材生产器」，由 JS/agent 负责编排、拼接、字幕、配乐、节奏。
结论：「JS + 生成模型 API + 渲染框架」是可行的混合架构；「纯 JS 生成写实视频」不成立。
五、成本与许可（关键决策项）
方案 ｜ 许可/成本 ｜ 备注
Remotion
许可/成本：个人与 ≤3 人团队免费（含商用）；公司 $25/人/月起；自动化流水线 $0.01/次渲染、最低 $100/月
备注：官方 FAQ/Terms。[cite:5][cite:6][cite:7]
Revideo / Motion Canvas
许可/成本：开源（以仓库许可证为准）
备注：需按实际 license 复核 [unverified]
HyperFrames
许可/成本：开源 + 云服务付费档
备注：官网标 open-source + Cloud。[cite:38]
Shotstack
许可/成本：API 按渲染计费
备注：具体单价需按当期定价页复核 [unverified]
ffmpeg.wasm / WebCodecs
许可/成本：免费（浏览器/开源）
备注：算力在本机/用户浏览器
数字人 API（HeyGen/Hedra/Kling）
许可/成本：按分钟/积分
备注：第三方报价差异大，需以官网当期为准
六、边界与风险（调研结论）
1.能做的：模板化短视频、数据可视化、字效/动效、UI/产品演示、图文转视频、字幕/配音合成、批量出片、半自动剪辑。
2.难做的：写实人物长镜头、复杂剧情、强表演、长视频一致性、实时高分辨率渲染。
3.不能做的：只靠 JS 凭空生成写实视频；无授权素材/肖像的商业发布；未标识的 AI 内容发布。
4.最大风险不是技术，而是合规与素材授权：AI 生成内容标识、平台规则、肖像/著作权。
七、来源清单
编号 ｜ 来源 ｜ 链接
[cite:1]
来源：Remotion · Prompting videos with coding agents（官方）
链接：https://www.remotion.dev/docs/ai/coding-agents
[cite:2]
来源：Remotion · remotion API（官方）
链接：https://www.remotion.dev/docs/remotion
[cite:3]
来源：Remotion · The core idea（官方）
链接：https://www.remotion.dev/docs/idea
[cite:4]
来源：Remotion · SSR rendering（官方）
链接：https://www.remotion.dev/docs/ssr-node
[cite:5]
来源：Remotion · License & Pricing（官方）
链接：https://www.remotion.dev/docs/license/pricing
[cite:6]
来源：Remotion · License FAQ（官方）
链接：https://www.remotion.dev/docs/license/faq
[cite:7]
来源：Remotion · Terms v5（官方）
链接：https://www.remotion.dev/docs/terms
[cite:8]
来源：Remotion · system-prompt.txt（官方）
链接：https://www.remotion.dev/system-prompt.txt
[cite:9]
来源：Revideo 官网
[cite:10]
来源：Remotion vs Revideo 对比
链接：https://rendercomp.com/blog/remotion-vs-revideo-comparison/
[cite:11]
来源：Revideo 文档站
链接：https://midrender.com/revideo
[cite:12]
来源：@apptrix/ai-promo-video（npm，Revideo+FFmpeg agentic）
链接：https://www.npmjs.com/package/@apptrix/ai-promo-video
[cite:13]
来源：WebCodecs vs FFmpeg WASM（VidStudio）
链接：https://vidstudio.app/blog/webcodecs-vs-ffmpeg-wasm
[cite:14]
来源：WebCodecs 10x faster（DEV）
链接：https://dev.to/mengyuxuan/webcodecs-is-10x-faster-than-ffmpegwasm-and-sometimes-worse-37jk
[cite:15]
来源：ffmpeg.wasm → WebCodecs 12x（DEV）
链接：https://dev.to/meicut/ffmpegwasm-to-webcodecs-the-12-gap-what-broke-and-what-still-cant-move-579a
[cite:16]
来源：WebCodecs + MediaBunny 95s→9s（DEV）
[cite:17]
来源：Aurora: Unified Video Editing with a Tool-Using Agent（arXiv 2605.18748）
链接：https://arxiv.org/pdf/2605.18748
[cite:18]
来源：VideoAgent: All-in-One Framework for Video Understanding and Editing（arXiv 2606.23327）
链接：https://arxiv.org/abs/2606.23327v2
[cite:19]
来源：Crayotter: Traceable Multi-Agent Workflows for Long-Form Video Editing（arXiv 2606.07636）
链接：https://arxiv.org/html/2606.07636v1
[cite:20]
来源：Prompt-Driven Agentic Video Editing System（arXiv 2509.16811）
链接：https://arxiv.org/pdf/2509.16811
[cite:21]
来源：Thinking on Shots（arXiv 2608.26809）
链接：https://arxiv.org/html/2608.26809
[cite:36]
来源：Shotstack MCP Server（官方）
链接：https://shotstack.io/docs/guide/agents/mcp-server/
[cite:37]
来源：Shotstack · Add video creation to your app
链接：https://shotstack.io/learn/add-video-creation-to-your-app/
[cite:38]
来源：HyperFrames 官网（agent-native HTML-to-video）
[cite:39]
来源：HyperFrames GitHub
链接：https://github.com/heygen-com/hyperframes
未在正文引用但已核查的来源（形象视频方向）见另一篇《照片驱动形象视频技术调研》。
- · ·
收束：三层能力分清之后，「用 JS 做视频」就不再是一句口号：渲染交给代码，编排交给 agent，画面交给模型或实拍。 真正决定成败的，往往不是能不能渲染，而是素材授权与 AI 内容标识有没有做在前面。
CTA：如果你正在评估某一条具体路线——模板化批量出片、浏览器内剪辑，还是接生成模型做混合流水线——欢迎留言说说你的场景，也可以直接通过下面的联系方式找我。
人类作者：月牙寂（龚浩华）
Agent 作者：月绡凝（小凝）
