用代码生成宣传片（一）：技术栈总览与 Remotion 画面生成

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

项目根/
├── remotion-videos/                # Remotion 工程（出画面）
│   ├── package.json                # 依赖：remotion ^4
│   ├── remotion.config.ts          # 配置 Chrome 可执行文件路径
│   ├── chrome-dl/                  # 手动下载的 chrome-headless-shell
│   │   └── chrome-headless-shell-win64/chrome-headless-shell.exe
│   └── src/
│       ├── Root.tsx                # 注册 Composition
│       └── compositions/promo/
│           ├── VideoComposition.tsx # 用 Sequence 拼接场景
│           ├── Scene1~Scene7*.tsx   # 每个场景一个组件
│           ├── Icons.tsx            # 内联 SVG 图标
│           ├── Backgrounds.tsx      # 背景组件
│           └── constants.ts         # 配色、文案常量
├── voiceover/                      # 音频工程
│   ├── gen_all_voices.py           # edge-tts 批量生成
│   ├── gen_bgm.py                  # numpy 合成 BGM
│   ├── mix_all.py                  # ffmpeg 合成
│   ├── bgm.wav                     # 合成出的 BGM
│   └── voice_zh_f/ zh_m/ en_f/ ... # 各版本旁白
└── MiBeeNVR_Promo_*.mp4            # 成品输出

1
2

cd remotion-videos
npm install

1
2
3
4
5
6
7
8

import { Config } from "@remotion/cli/config";

Config.setVideoImageFormat("jpeg");
Config.setOverwriteOutput(true);
Config.setConcurrency(4);
Config.setBrowserExecutable(
  "./chrome-dl/chrome-headless-shell-win64/chrome-headless-shell.exe"
);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

import React from "react";
import { Composition } from "remotion";
import { PromoComposition } from "./compositions/promo/VideoComposition";

export const RemotionRoot: React.FC = () => (
  <Composition
    id="promo"             // 渲染时用的 ID
    component={PromoComposition}
    durationInFrames={1350} // 45s × 30fps
    fps={30}
    width={1920}
    height={1080}
    defaultProps={{}}
  />
);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

import { AbsoluteFill, Sequence, useCurrentFrame, interpolate } from "remotion";

// 场景间交叉淡化遮罩
const Overlay = ({ duration }: { duration: number }) => {
  const frame = useCurrentFrame();      // 局部帧，从 0 开始
  let opacity = 0;
  if (frame < 15)
    opacity = interpolate(frame, [0, 15], [1, 0], { extrapolateRight: "clamp" });
  else if (frame > duration - 15)
    opacity = interpolate(frame, [duration - 15, duration], [0, 1], { extrapolateLeft: "clamp" });
  return <AbsoluteFill style={{ backgroundColor: "#0a0e1a", opacity, pointerEvents: "none", zIndex: 100 }} />;
};

export const PromoComposition = () => (
  <AbsoluteFill style={{ backgroundColor: "#0a0e1a" }}>
    <Sequence from={0}    durationInFrames={150}><Scene1 /><Overlay duration={150} /></Sequence>
    <Sequence from={150}  durationInFrames={180}><Scene2 /><Overlay duration={180} /></Sequence>
    <Sequence from={330}  durationInFrames={240}><Scene3 /><Overlay duration={240} /></Sequence>
    <Sequence from={570}  durationInFrames={210}><Scene4 /><Overlay duration={210} /></Sequence>
    <Sequence from={780}  durationInFrames={210}><Scene5 /><Overlay duration={210} /></Sequence>
    <Sequence from={990}  durationInFrames={210}><Scene6 /><Overlay duration={210} /></Sequence>
    <Sequence from={1200} durationInFrames={150}><Scene7 /><Overlay duration={150} /></Sequence>
  </AbsoluteFill>
);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

import { AbsoluteFill, useCurrentFrame, useVideoConfig, interpolate, spring } from "remotion";

export const Scene1 = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // 1) interpolate：把帧号映射成任意属性值
  const opacity = interpolate(frame, [40, 70], [0, 1], {
    extrapolateLeft: "clamp",
    extrapolateRight: "clamp",
  });

  // 2) spring：物理弹性入场
  const scale = spring({
    frame: frame - 40,   // 第 40 帧开始弹
    fps,
    config: { damping: 12, stiffness: 100, mass: 0.8 },
  });

  // 3) 三角函数做呼吸浮动
  const float = Math.sin(frame * 0.08) * 8;

  return (
    <AbsoluteFill style={{ justifyContent: "center", alignItems: "center" }}>
      <div style={{ transform: `scale(${scale}) translateY(${float}px)`, opacity }}>
        {/* 画面内容 */}
      </div>
    </AbsoluteFill>
  );
};

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

import React from "react";

type IconProps = { size?: number; color?: string; glowColor?: string; glow?: number };

// 辉光：两层 drop-shadow 叠加
const withGlow = (glowColor: string, g: number) =>
  g > 0
    ? `drop-shadow(0 0 ${6 * g}px ${glowColor}) drop-shadow(0 0 ${14 * g}px ${glowColor}aa)`
    : "none";

// 摄像头图标（子弹型监控）
export const CameraIcon: React.FC<IconProps> = ({
  size = 64, color = "#4CAF50", glowColor = "#4CAF50", glow = 0.6,
}) => (
  <svg width={size} height={size} viewBox="0 0 100 100"
    style={{ filter: withGlow(glowColor, glow), overflow: "visible" }}>
    <rect x="22" y="34" width="46" height="30" rx="8" fill="#0d1526" stroke={color} strokeWidth="2.5" />
    <circle cx="68" cy="49" r="15" fill="#0d1526" stroke={color} strokeWidth="2.5" />
    <circle cx="68" cy="49" r="8" fill={color} opacity="0.35" />
    <circle cx="68" cy="49" r="3.5" fill={color} />
  </svg>
);

1
2

cd remotion-videos
npx remotion render promo "../MiBeeNVR_Promo_Full.mp4" --log=error