Remotion + OpenClaw 短视频自动化生成方案

2026-02-16 2026年02月 Remotion-OpenClaw-短视频自动化生成方案.md

Remotion + OpenClaw 短视频自动化生成方案

整理时间： 2026-02-16 08:16
来源： 群聊消息
整理人： AI助手

摘要

本文介绍了一套完整的“AI 内容自动化流水线”方案：将 Telegram 作为输入端、OpenClaw 作为大脑、Remotion 作为视频生成工厂、七牛云作为存储分发中心，实现从需求输入到平台发布的全自动短视频生产。方案特别针对国内平台（公众号、头条、小红书）进行了定制化适配。

一、整体架构

1.1 流程图

Telegram 发送需求 → OpenClaw 解析需求 → LLM 生成脚本 → Remotion 渲染视频 → 七牛云存储 → 平台自动发布

1.2 各环节职责

环节	工具/技术	职责
指令输入	Telegram Bot	用户发送创作需求，如：”写一个关于’深海生物’的 30 秒视频”
需求解析	OpenClaw + LLM	解析主题、风格，生成视频脚本和渲染配置 JSON
视频生产	Remotion	根据配置渲染 MP4 视频
云端分发	七牛云 Kodo	存储视频并提供 CDN 外链
平台发布	各平台 API / 浏览器模拟	自动发布到公众号、头条、小红书

二、核心技术难点解决方案

2.1 动态数据驱动渲染 (The Remotion Bridge)

痛点： AI 生成的脚本直接硬编码进 React 极易报错。

方案： 建立 JSON 协议模板层。

不要让 OpenClaw 直接写 .tsx 文件
预制一个固定的 Remotion 模板，通过 inputProps 接收标准的 JSON 数据
包含：文案数组、图片 URL、音频 URL

关键指令：

npx remotion render --props="./data.json"

这样能保证渲染过程 100% 成功。

2.2 跨时区的”常驻浏览器”环境 (Persistent Browser Session)

痛点： 小红书和公众号后台需要扫码登录，AI 脚本重启后 Session 会失效。

方案： 使用 Playwright Context 持久化。

在 OpenClaw 中配置 Playwright 时，指定 userDataDir 路径
你手动在 OpenClaw 启动的浏览器里扫码登录一次
之后 AI 每次启动都会复用该目录下的 Cookies 和 LocalStorage

保活设置：
- 设置一个定时任务（每 24 小时），由 OpenClaw 自动刷新一下后台页面
- 防止登录态过期

2.3 七牛云的”直传策略”优化 (Upload Efficiency)

痛点： 视频渲染完再上传会占用大量本地磁盘空间且速度慢。

方案： 渲染流监听 + 异步上传。

利用 Remotion 的 @remotion/renderer API
在渲染回调中，当 onUploadProgress 触发或渲染结束瞬间，调用七牛云 Node.js SDK 的 form_up

关键点：
- 设置七牛云的 returnBody 参数
- 上传成功后直接返回视频的 CDN 永久链接
- OpenClaw 拿到 Link 后直接喂给发布平台，无需处理本地文件

2.4 解决 Telegram 指令的”长任务”阻塞 (Async Webhook)

痛点： 视频渲染需要时间（可能 1-5 分钟），Telegram API 等待太久会超时。

方案： 任务队列 + 状态回传机制。

OpenClaw 接收到 TG 指令后，立即回复一条”🎬 导演正在写剧本…”
启动后台进程进行渲染
利用 Telegram Bot 的 editMessageText 功能，根据渲染进度实时更新消息内容

示例进度：
- “[██░░░] 正在合成配音…”
- “[████] 渲染完成，正在上传…”

2.5 国内平台的”反爬虫”规避 (Anti-Bot Bypass)

痛点： 公众号和小红书对自动化发布有严格的校验（如：检测 navigator.webdriver）。

方案： 指纹浏览器指纹抹除。

在 OpenClaw 调用浏览器时，集成 playwright-extra 及其 Stealth 插件
模拟人类操作：发布文章时，不要用 element.fill() 直接瞬间填入文本
让 OpenClaw 模拟随机的打字间隔和鼠标移动轨迹
规避平台的风控检测

三、Remotion 标准模板代码

3.1 数据协议定义 (schema.ts)

首先规定 OpenClaw 必须给 Remotion 提供的数据格式：

// src/types.ts
export interface VideoData {
  title: string;           // 视频主标题
  imageUrls: string[];      // 图片素材列表（可以是七牛云链接）
  subtitles: string[];      // 每一幕的文案
  audioUrl: string;         // 语音合成后的音频链接
  durationInSeconds: number; // 视频总长度
}

3.2 核心组件 (MyVideo.tsx) - 增强版

这是 Remotion 的核心组件，支持动态图片轮播和字幕动画：

// src/MyVideo.tsx
import { AbsoluteFill, Sequence, Img, Audio, interpolate, useCurrentFrame, useVideoConfig } from 'remotion';
import { VideoData } from './types';

export const MyVideo: React.FC<VideoData> = ({ title, imageUrls, subtitles, audioUrl }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // 假设每张图片展示 3 秒 (90 帧)
  const durationPerItem = 3 * fps;

  return (
    <AbsoluteFill style={{ backgroundColor: 'black', color: 'white', fontFamily: 'sans-serif' }}>
      {/* 1. 背景音乐/配音 */}
      <Audio src={audioUrl} />

      {/* 2. 动态图片轮播 */}
      {imageUrls.map((url, index) => (
        <Sequence 
          key={index} 
          from={index * durationPerItem} 
          durationInFrames={durationPerItem}
        >
          {/* 图片层 - 带淡入动画 */}
          <Img 
            src={url} 
            style={{ 
              width: '100%', 
              height: '100%', 
              objectFit: 'cover',
              opacity: interpolate(frame % durationPerItem, [0, 15], [0, 1], { extrapolateRight: 'clamp' })
            }} 
          />

          {/* 3. 动态文案渲染 */}
          <AbsoluteFill style={{ 
            justifyContent: 'center', 
            alignItems: 'center', 
            background: 'rgba(0,0,0,0.4)', 
            height: '200px', 
            top: 'auto', 
            bottom: '10%' 
          }}>
            <h1 style={{ fontSize: '60px' }}>{subtitles[index]}</h1>
          </AbsoluteFill>
        </Sequence>
      ))}

      {/* 4. 全局标题（左上角水印） */}
      <div style={{ position: 'absolute', top: 40, left: 40, fontSize: 30 }}>
        @{title}
      </div>
    </AbsoluteFill>
  );
};

3.3 入口配置 (Root.tsx) - 使用 getInputProps

在 Remotion 中，推荐使用 getInputProps() 来获取外部注入的 JSON：

// src/Root.tsx
import { Composition, getInputProps } from 'remotion';
import { MyVideo } from './MyVideo';
import { VideoData } from './types';

// 设置默认值，防止 OpenClaw 没传参数时报错
const defaultProps: VideoData = {
  title: "我的 AI 短视频",
  imageUrls: ["https://example.com/1.jpg"],
  subtitles: ["正在生成内容..."],
  audioUrl: "https://example.com/audio.mp3",
  durationInSeconds: 15
};

// 获取外部注入的 Props
const inputProps = getInputProps() as VideoData;
const mergedProps = { ...defaultProps, ...inputProps };

export const RemotionRoot: React.FC = () => {
  return (
    <Composition
      id="MainVideo"
      component={MyVideo}
      durationInFrames={mergedProps.durationInSeconds * 30} // 30fps
      fps={30}
      width={1080}
      height={1920} // 竖屏 9:16，适合小红书/头条
      defaultProps={mergedProps}
    />
  );
};

3.4 OpenClaw 调用命令

当 OpenClaw 完成文案撰写和素材搜集后，执行以下命令行：

# OpenClaw 动态生成的 json 文件名为 task_123.json
npx remotion render MainVideo out.mp4 --props="./task_123.json"

3.5 OpenClaw 生成的 JSON 数据示例

{
  "title": "深海生物科普",
  "imageUrls": [
    "https://your-qiniu-cdn.com/image1.jpg",
    "https://your-qiniu-cdn.com/image2.jpg",
    "https://your-qiniu-cdn.com/image3.jpg"
  ],
  "subtitles": [
    "今天我们来认识深海中的神奇生物",
    "首先登场的是巨大的蓝鲸",
    "最后让我们一起保护海洋环境"
  ],
  "audioUrl": "https://your-qiniu-cdn.com/narration.mp3",
  "durationInSeconds": 30
}

四、OpenClaw Skill 自动化逻辑

4.1 意图解析层 (Prompt Engineering)

当 OpenClaw 从 Telegram 接收到 “做一个关于深海怪鱼的视频，要神秘一点” 时，启动优化的 System Prompt：

System Prompt 示例：

“你是一个视频导演。根据用户主题，输出一个严格的 JSON 格式。包含：
- 5段科普文案（每段不超过15字）
- 搜索关键词（用于找图片）
- 视频时长设为 15 秒”

4.2 自动化执行链 (Skill Chain)

OpenClaw 按以下顺序调用工具：

Search Tool: 根据关键词（如 Anglerfish deep sea）在 Unsplash 或 Pexels 搜索 5 张图片，获取 URL
TTS Tool: 调用 Edge-TTS 或 OpenAI TTS，将文案合成为音频
JSON Generator: 拼装成符合 schema 的 input.json

4.3 核心代码逻辑 (伪代码)

// OpenClaw Skill: GenerateRemotionVideo
async function handleTelegramCommand(msg) {
  // 1. AI 思考并生成文案与素材规划
  const plan = await LLM.generate(msg.text, schema);

  // 2. 调用搜图技能并获取图片链接
  const images = await ImageSearchSkill.search(plan.keywords);

  // 3. 调用语音合成技能
  const audioFile = await TTSSkill.synthesize(plan.fullScript);

  // 4. 写入 JSON 供 Remotion 读取
  const inputPropsPath = `./remotion/data/${msg.chatId}.json`;
  fs.writeFileSync(inputPropsPath, JSON.stringify({
    ...plan,
    imageUrls: images,
    audioUrl: audioFile
  }));

  // 5. 执行渲染命令
  const outputPath = `./out/${msg.chatId}.mp4`;
  await Shell.execute(`npx remotion render MainVideo ${outputPath} --props="${inputPropsPath}"`);

  // 6. 上传七牛云并回传 Telegram
  const qiniuUrl = await QiniuSkill.upload(outputPath);
  await TelegramBot.sendVideo(msg.chatId, qiniuUrl);
}

4.4 技术难点与对策

难点	对策
素材一致性：AI 搜出来的图风格不一	搜图时强制在关键词后加 “high quality, cinematic lighting”，或直接对接 Midjourney/Flux 实时生成
音频时长匹配：文案长度超过图片展示时间	让 OpenClaw 计算 TTS 音频秒数，动态修改 JSON 中的 durationInSeconds

五、完整闭环总结

输入：Telegram 文本（如 "做一个关于深海怪鱼的视频"）
   ↓
思考：OpenClaw + LLM 拆解脚本、找图、配音
   ↓
生产：Remotion 读取 JSON，渲染 MP4
   ↓
物流：七牛云 存储与 CDN 分发
   ↓
交付：OpenClaw 自动登录公众号/小红书发布

六、存储与 CDN 方案

6.1 视频大小估算

时长	分辨率	帧率	预估大小
30秒	1080p	30fps	15-50MB
30秒	720p	30fps	10-30MB
60秒	1080p	30fps	30-100MB

6.2 七牛云方案（推荐国内使用）

优势：

国内访问速度快
提供免费额度
支持 CDN 分发

配置步骤：

登录七牛云控制台，创建存储空间（Kodo）
获取 AccessKey 和 SecretKey
配置自定义域名（CDN）

七、平台自动发布方案

7.1 国内三大平台特点

平台	API 成熟度	浏览器模拟可行性	建议方式
公众号	一般	高（需扫码）	浏览器模拟
头条号	较高	高	API 或浏览器模拟
小红书	较低	中（风控严）	浏览器模拟

7.2 浏览器模拟要点

使用 playwright-extra + Stealth 插件
模拟人类操作：随机打字间隔、鼠标移动轨迹
保持登录态：使用持久化的浏览器 Profile

八、实施建议

8.1 推荐实验工作流

初始化：npx create-video@latest 创建基础模板
配对：在 OpenClaw 中绑定 Claude 4.5 API
测试：先从简单视频（如文字动画）开始
扩展：逐步加入素材搜索、配音生成、平台发布

8.2 避坑指南

坑点	解决方案
渲染结果不一致	使用 Frame 时间而非随机数
环境差异导致失败	Docker 隔离环境
视频太大加载慢	使用 H.264 编码，控制比特率
平台风控	浏览器模拟时加入随机延迟
多尺寸适配	在 Remotion 中定义多个 Composition

8.3 内容审核注意事项

国内平台对 AI 生成内容有标识要求
建议在 Remotion 模板右下角硬编码一个”本视频由 AI 辅助生成”的半透明水印

九、相关工具链接

十、方案选择：搜图还是画图？

AI 搜图：

优点：快、免费、素材丰富
缺点：风格可能不统一

AI 画图（Midjourney/Flux）：

优点：风格统一、可控性强
缺点：需要算力支持、成本较高

整理备注

本文档基于群聊中分享的技术方案整理，包含了 Remotion 视频生成、OpenClaw 自动化流程、七牛云存储及国内平台发布的完整方案，以及核心的代码模板示例和 Skill 自动化逻辑。具体实施时需根据各平台最新 API 政策进行调整。