OpenFilm源码开发完全指南:从pnpm dev到添加自己的媒体Provider

发布时间:2026/10/22 12:48:01
OpenFilm源码开发完全指南:从pnpm dev到添加自己的媒体Provider 【免费下载链接】openfilmThe open source AI video agent: turns any coding agent into a video agent, with an editor to change anything it makes.项目地址https://gitcode.com/gh_mirrors/op/openfilm点击查看免费下载OpenFilm 是一个开源的 AI 视频 Agent 项目它把任何编程 Agent 变成视频 Agent让 Codex、Claude Code 等直接写出电影本质是网页并提供一个本地编辑器 Studio 来修改它生成的任何内容。本文是一份面向新手的源码开发完整指南带你用pnpm dev一键启动本地开发环境理解 monorepo 结构并亲手添加一个自己的媒体 Provider为项目接入语音、音乐、图片、视频等媒体服务。1️⃣ 先认识 OpenFilm电影就是网页在动手改代码之前先花一分钟理解项目的核心思路影片是网页film.html把若干页面、素材和声音剪辑在一起画面只依赖时间tStudio 是本地编辑器运行在浏览器里用 Chromium 绘制画面你可以手动或让 Agent 修改任何东西openfilm命令Agent 使用的手册式 CLIopenfilm get负责从你连接的各种服务获取媒体素材。2️⃣ 开发环境准备一条命令装好依赖环境要求见 CONTRIBUTING.md依赖版本说明Node.js≥ 22.18测试会直接运行 TypeScriptpnpm9corepack enable可自动匹配仓库指定的版本ffmpeg任意需在 PATH 中可用git任意拉取代码安装步骤git clone https://gitcode.com/gh_mirrors/op/openfilm cd openfilm pnpm install pnpm --filter openfilm exec playwright-core install chromium-headless-shellpnpm install会同时构建 Studio 编辑器build:ui最后的命令下载渲染画面所需的无头 Chromium。3️⃣ 用 pnpm dev 启动本地 Studio在项目根目录执行pnpm dev这一条命令背后是 scripts/dev.mjs它做了四件贴心事启动 Studio 服务默认监听4848端口可用OPENFILM_STUDIO_PORT修改热更新studio/ui有改动就重新构建编辑器刷新页面即可studio/server或src有改动会自动重启 Studio隔离状态开发状态和导出都放在packages/openfilm/.dev/已被 git 忽略不会干扰你正式安装的 OpenFilm生成专属 CLI在.dev/bin/openfilm写出一个指向本开发环境的命令可以直接告诉你的编程 Agent用这个命令做一部片子立刻验证你的改动。启动成功后浏览器会自动打开一个示例影片效果类似这样 提示CtrlC即可停止全部进程同一份 checkout 只允许一个pnpm dev有 pid 锁保护。4️⃣ 仓库结构五分钟看懂 monorepo这是一个 pnpm workspace见 pnpm-workspace.yaml包含packages/*和apps/*三块packages/openfilm/ npm 包 openfilm影片格式、CLI 和 Studio SPEC.md, MANUAL.md 影片格式规范openfilm 为 Agent 打印的手册 bin/ openfilm 命令入口 src/ 解析 film.html、无头浏览器渲染、look 与 render studio/server/ Studio 服务项目、编辑、历史、导出、媒体 Provider studio/ui/ Studio 编辑器React Vite apps/desktop/ 桌面应用Electron内含 Agent 聊天窗口 packages/shared/ 桌面应用共享的聊天类型与工具不发布 skills/ 引导编程 Agent 使用手册的 skill根目录常用命令一览命令作用pnpm dev从源码启动 Studiopnpm dev:desktop从源码运行桌面应用OpenFilm Devpnpm test运行所有包的测试pnpm typecheck检查所有包的类型pnpm audit:public检查密钥、家目录路径等不应出现在公开仓库的内容改完代码后建议随时跑pnpm test与pnpm typecheck也可以只跑单个文件例如node --test src/film-doc.test.mjs。5️⃣ 添加自己的媒体 Provider 这是本次的重头戏。openfilm get支持十几种动词verbtts配音、music、sfx音效、asr转写、image、video、web-search等。每个 Provider 就是一个模块负责其中几类媒体的制作。第一步读懂 Provider 契约所有 Provider 共同遵守 contract.mjs 中定义的Provider接口id/name标识与展示名env环境变量名如GROQ_API_KEY用户可直接用环境变量提供密钥verbs支持的动词列表models每类媒体可用的模型第一个为默认run(verb, args, ctx)真正干活的方法返回文件、索引和回执。仓库里的 groq.mjs 是最小的参考实现之一建议从它抄起。第二步新建 Provider 文件在 studio/server/providers/ 下新建myservice.mjs骨架如下export default { id: myservice, name: MyService, env: MY_SERVICE_API_KEY, keysUrl: https://myservice.example/keys, billingUrl: https://myservice.example/billing, verbs: [image], async run(verb, args, ctx) { // 调用服务 API返回 { files, index, receipt } }, };请求工具都在 common.mjs 里call自动处理鉴权失败、余额不足等统一报错、landing规定文件落在assets/下、needed必填参数校验等无需重复造轮子。第三步注册到 Provider 列表打开 index.mjs把你的 Provider 加进OWN数组按名称排序const OWN [elevenlabs, openai, google, fal, /* … */ myservice];之后--via myservice、Studio 设置页的 Provider/模型选择、密钥管理就会自动生效。第四步为假服务写测试官方要求CI 里不消耗真实密钥。做法参考 groq.test.mjs——在127.0.0.1起一个假 HTTP 服务再通过OPENFILM_NAME_URL环境变量把 Provider 指过去断言发了什么、落盘了什么、失败时用户看到什么node --test studio/server/providers/myservice.test.mjs第五步补齐门面细节品牌标记在 provider-marks.ts 里加一条 SVG mark测试会强制要求每个 Provider 都有多语言它在 Studio 中展示的每一句文案都要翻译进en / zh-CN / ja / ko / es五个语言文件studio/ui/src/i18n/changesetpnpm changeset生成变更集并随 PR 提交。接好 Provider 后你在影片里能生成这样的素材6️⃣ 实战小贴士 密钥安全密钥保存在~/.openfilm/providers.json权限 0600只发往对应服务本身编辑器页面永远只能看到密钥来源和后四位逻辑见 keys.mjs。测试和截图中严禁出现真实密钥用 Agent 验证改动pnpm dev运行时让 Agent 改用packages/openfilm/.dev/bin/openfilm它生成的影片会直接出现在你的开发版 Studio 里提交前自检pnpm test、pnpm typecheck、pnpm audit:public三件套必须全部通过CI 在 macOS、Windows、Linux 三端都跑。结语OpenFilm 的本地开发体验非常顺滑一条pnpm dev就能获得热更新环境 专属 CLI 隔离状态而 Provider 体系用一个文件 一份契约 假服务测试的模式把接入一家新的媒体服务压缩到了几小时的活。挑一个你最常用的 API今天就把它变成你的第一个 Provider 吧赞分享【免费下载链接】openfilmThe open source AI video agent: turns any coding agent into a video agent, with an editor to change anything it makes.项目地址https://gitcode.com/gh_mirrors/op/openfilm点击查看免费下载相关推荐mpv-winbuild-cmake扩展开发添加自定义多媒体组件的完整指南mpv winbuild cmake扩展开发添加自定义多媒体组件的完整指南 mpv winbuild cmake是一个基于CMake的MinGW w64交叉编构建工具开发工具pnpm 缓存控制完全指南从 pnpm/cache.api 到 pnpm cache 命令的源码级解析pnpm 缓存控制完全指南从 pnpm/cache.api 到 pnpm cache 命令的源码级解析 摘要 pnpm/cache.api 是 pnpm包管理器开发工具CLI如何把自己开源的 Registry 添加到 shadcn/ui 官方开源 Registry 索引如何把自己开源的 Registry 添加到 shadcn/ui 官方开源 Registry 索引 你维护着一个开源的组件 Registry比如 acme前端UI组件设计系统CLI上一篇终极FGO自动化指南如何用FGO-py实现《命运/冠位指定》全自动刷本解放双手养肝护发下一篇一个软件控制所有RGB设备OpenRGB让你告别灯光碎片化的烦恼创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

关于本文作者

来自尧图内容编辑团队

尧图内容编辑团队 内容团队

尧图内容编辑团队

本文由尧图网络内容编辑团队执笔。团队由资深项目经理、前端工程师与设计师组成,所有内容均来自亲手交付的真实项目,先讲清问题、再给出可落地的解法。尧图深耕北京网站建设十年,服务过京华建材集团、智造科技等各行业客户,把一线经验沉淀为可复用的行业观察。

  • 十年建站经验,覆盖建材、制造、服务、文创等
  • 项目经理把关选题与事实准确性
  • 工程师与设计师联合撰写专业细节
  • 统一编辑规范,保证文风与排版一致
  • 每月复盘转化数据,迭代选题方向

延伸阅读

相关资讯与近期热门内容

深度阅读推荐

建站决策前值得细读的三篇

网站改版的5个关键决策
2024-08-12

网站改版的5个关键决策

什么时候该改版、改到什么程度、如何避免流量掉光,京华建材集团改版复盘给出答案。

获取专属建站方案

看完文章,把您的行业与预算告诉我们,免费获取一份量身定制的官网建设方案与报价。

立即免费咨询