好，把椅子拉过来，把咖啡倒上。今天我们不聊那些花里胡哨的 UI 框架，也不谈什么微服务架构，我们要聊的是一件硬核的事情——在浏览器里实时把你的 React 代码“录制”成视频。
想象一下，你有一个动态的图表，或者一个实时渲染的 3D 场景，或者只是一个简单的 React 组件在疯狂闪烁。你不想只是截个图，你想要一个 MP4 文件，文件里记录了从第一帧到最后一帧的所有动态过程。而且，这个视频还得是实时的，还得支持交互——比如你在录制的时候，还能在屏幕上画圈圈，或者弹出一个对话框，最后这个对话框也乖乖地进了视频里。
这就是我们要搞定的“React 驱动的动态视频编码”。
第一部分：为什么这事儿这么难？（以及为什么我们非做不可）
首先，我们要面对一个现实。视频编码这玩意儿，本质上就是一个数学游戏。H.264、VP8、VP9，听着像是什么高深的黑客密码，其实它们就是一堆复杂的算法，负责把一堆乱七八糟的像素压缩成一个小文件。
在 Web 端，以前我们有个神器叫 MediaRecorder。它就像个懒汉，你把屏幕或者 Canvas 丢给它，它就不管了，咔咔咔录完给你个 WebM 或 MP4。但它有个致命的弱点：它太被动了。它只能记录你给它看的东西，它不会帮你合成特效，不会帮你把数据画成线，它就是个单纯的“搬运工”。
如果你想要“动态合成”，想要“交互式”，你就得自己动手。你要把 React 的组件化思维带进视频流处理里。
这就像什么？这就像你想自己造一辆车。你可以买一辆现成的（MediaRecorder），但如果你想要一个能自动驾驶、能自动换挡、还能在行驶中给乘客播放音乐的“React 版”汽车，你就得从零开始造。
第二部分：我们的武器库
为了实现这个目标，我们需要三件核心武器：
- React Hooks (useEffect, useState, useRef)：我们的指挥官，负责管理状态、副作用和 DOM 引用。
- Canvas API：我们的画板。所有的动画、交互、特效都会先画在这里。Canvas 就像是一个无限大的透明玻璃板，我们在上面画画，它在上面发光。
- FFmpeg.wasm (或者 MediaRecorder API)：我们的编码器。
- 方案 A (MediaRecorder)：轻量级，速度快，适合简单的屏幕录制。但功能有限。
- 方案 B (FFmpeg.wasm)：重型武器。它能在浏览器里运行 FFmpeg。这意味着你可以用代码来剪辑、合并、添加滤镜。虽然它加载慢，体积大，但它是真正的“视频大师”。
今天，为了展示“深度技术”和“动态合成”，我们将结合 React + Canvas + MediaRecorder 来构建一个实时合成系统。这比直接用 FFmpeg.wasm 更适合大多数 React 场景，因为 FFmpeg.wasm 真的太慢了，慢到你会怀疑人生。
第三部分：架构设计——组件化的视频流
我们要怎么组织代码？别想着把所有逻辑都塞进一个 App 组件里。那样写出来的代码，比你的代码还难维护。
我们要建立这样的层级结构：
VideoComposer(顶层容器)：管理整个生命周期。它知道什么时候开始录，什么时候停，什么时候导出。CanvasStage(视觉层)：负责处理所有的渲染逻辑。它接收 React 的状态（比如数据变化、用户点击），然后把它画在 Canvas 上。StreamController(控制层)：负责把 Canvas 的内容转换成视频流，并喂给 MediaRecorder。
第四部分：核心代码实现——从零开始
让我们开始写代码。别眨眼，这可是干货。
1. 准备工作
首先，我们需要一个 Canvas。这个 Canvas 将是我们的“舞台”。
import React, { useRef, useEffect, useState } from 'react';
// 这是一个非常简单的组件，它会在 Canvas 上画一个跳动的球
// 注意看，这里没有任何视频编码的逻辑，只有纯粹的 React 状态 -> Canvas 绘制
const BouncingBall = ({ ballColor }) => {
const canvasRef = useRef(null);
const [position, setPosition] = useState({ x: 50, y: 50 });
const [velocity, setVelocity] = useState({ dx: 2, dy: 2 });
useEffect(() => {
const canvas = canvasRef.current;
const ctx = canvas.getContext('2d');
// 设置画布大小
canvas.width = 800;
canvas.height = 600;
const animate = () => {
// 清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 更新位置
setPosition(prev => ({
x: prev.x + velocity.dx,
y: prev.y + velocity.dy
}));
// 碰撞检测（碰到墙壁反弹）
if (position.x + 50 > canvas.width || position.x < 0) {
setVelocity(prev => ({ dx: -prev.dx, dy: prev.dy }));
}
if (position.y + 50 > canvas.height || position.y < 0) {
setVelocity(prev => ({ dx: prev.dx, dy: -prev.dy }));
}
// 画球
ctx.beginPath();
ctx.arc(position.x, position.y, 50, 0, Math.PI * 2);
ctx.fillStyle = ballColor;
ctx.fill();
ctx.closePath();
requestAnimationFrame(animate);
};
animate();
}, [ballColor, position]);
return <canvas ref={canvasRef} />;
};好，现在我们有了一个会动的球。但这还不是视频。这只是画在屏幕上的一帧。
2. 封装 useFFmpegRecorder Hook（核心）
接下来，我们要把这段 Canvas 的动画变成视频。我们需要一个自定义 Hook 来处理 MediaRecorder。
这个 Hook 需要处理几个关键点：
- 获取流：从 Canvas 获取
captureStream()。 - 初始化编码器：创建
MediaRecorder实例。 - 处理数据块：当有新的一帧数据到达时，存起来。
- 生成文件：录制结束后，把数据块合并成 Blob。
// useFFmpegRecorder.js
export const useFFmpegRecorder = (canvasRef, options = {}) => {
const [isRecording, setIsRecording] = useState(false);
const [recordedChunks, setRecordedChunks] = useState([]);
const [blob, setBlob] = useState(null);
const startRecording = () => {
if (!canvasRef.current) return;
// 1. 捕获 Canvas 的流
// 30fps 是个不错的默认值，太高了浏览器会卡死，太低了视频会卡顿
const stream = canvasRef.current.captureStream(30);
// 2. 创建 MediaRecorder
// 默认使用 vp9 或 vp8，浏览器支持情况良好
const mediaRecorder = new MediaRecorder(stream, {
mimeType: options.mimeType || 'video/webm; codecs=vp9',
videoBitsPerSecond: options.bitrate || 2500000 // 2.5 Mbps
});
const chunks = [];
// 3. 监听数据到达事件
mediaRecorder.ondataavailable = (e) => {
if (e.data.size > 0) {
chunks.push(e.data);
}
};
// 4. 监听录制结束事件
mediaRecorder.onstop = () => {
const blob = new Blob(chunks, { type: 'video/webm' });
const url = URL.createObjectURL(blob);
setBlob(url);
setRecordedChunks(chunks);
};
// 5. 开始录制
mediaRecorder.start();
setIsRecording(true);
};
const stopRecording = () => {
// 必须调用 stop 方法，MediaRecorder 才会触发 onstop 事件
// 但在 React 里，我们需要通过 ref 来调用，因为 stopRecording 可能在一个异步函数里被触发
if (window.mediaRecorderInstance) {
window.mediaRecorderInstance.stop();
setIsRecording(false);
}
};
// 保存实例到 window 对象，方便外部调用 stop
useEffect(() => {
window.mediaRecorderInstance = new MediaRecorder(canvasRef.current.captureStream(30));
return () => {
if (window.mediaRecorderInstance && !window.mediaRecorderInstance.state === 'inactive') {
window.mediaRecorderInstance.stop();
}
};
}, []);
return { isRecording, startRecording, stopRecording, blob };
};3. 组装起来
现在，我们有了 BouncingBall 组件，也有了 useFFmpegRecorder Hook。让我们把它们放在一起。
import React, { useRef } from 'react';
import { useFFmpegRecorder } from './useFFmpegRecorder';
const VideoApp = () => {
const canvasRef = useRef(null);
const { isRecording, startRecording, stopRecording, blob } = useFFmpegRecorder(canvasRef);
return (
<div style={{ padding: '20px', fontFamily: 'Arial' }}>
<h1>React 动态视频编码演示</h1>
{/* 这里的 canvas 是我们的舞台 */}
<div style={{ border: '2px solid #333', display: 'inline-block' }}>
<BouncingBall ballColor="blue" />
</div>
<div style={{ marginTop: '20px' }}>
<button onClick={startRecording} disabled={isRecording}>
开始录制
</button>
<button onClick={stopRecording} disabled={!isRecording}>
停止录制
</button>
</div>
{blob && (
<div style={{ marginTop: '20px' }}>
<h3>录制完成！点击下载：</h3>
<video controls src={blob} width="800" height="600" />
<br />
<a href={blob} download="react-video.webm" style={{ marginTop: '10px', display: 'inline-block' }}>
下载视频
</a>
</div>
)}
</div>
);
};
export default VideoApp;第五部分：让视频“动”起来——交互式合成
上面的例子太简单了，就像个没头苍蝇。真正的“动态视频编码”意味着我们可以控制视频的内容。比如，我们想录制的不仅仅是 Canvas 的内容，还要加上一个动态的覆盖层，比如“当前时间”、“鼠标位置”，甚至是一个React 组件的截图。
这需要我们在 Canvas 上“手绘”这些 UI 元素。这听起来很麻烦，但其实非常有意思。
1. 添加交互式覆盖层
假设我们想录制一个游戏，并且想在视频里实时显示分数。我们可以创建一个 ScoreOverlay 组件。
const ScoreOverlay = ({ score, x, y }) => {
const canvasRef = useRef(null);
const [text, setText] = useState("Score: 0");
useEffect(() => {
const canvas = canvasRef.current;
const ctx = canvas.getContext('2d');
// 每次分数变化，我们不仅更新状态，还要把文字“画”到 Canvas 上
// 这样 MediaRecorder 就能捕捉到变化
ctx.font = "bold 48px Arial";
ctx.fillStyle = "white";
ctx.strokeStyle = "black";
ctx.lineWidth = 4;
ctx.strokeText(text, x, y);
ctx.fillText(text, x, y);
}, [text, x, y]);
return <canvas ref={canvasRef} width={300} height={100} />;
};注意，这里的 ScoreOverlay 依然是一个 React 组件，但它内部通过 useEffect 直接操作 Canvas API。这是 React 与 Canvas 交互的精髓：用 React 管理状态，用 Canvas 管理渲染。
2. 动态合成逻辑
现在，我们要把 BouncingBall 和 ScoreOverlay 结合起来。
const InteractiveComposer = () => {
const mainCanvasRef = useRef(null);
const overlayCanvasRef = useRef(null);
const [score, setScore] = useState(0);
// 主循环：处理球的动画
useEffect(() => {
const canvas = mainCanvasRef.current;
const ctx = canvas.getContext('2d');
// ... (省略球的动画逻辑) ...
// 关键点：我们在每一帧都把 overlayCanvas 的内容“印”到主 Canvas 上
// 这样，录制的视频里就包含了覆盖层
ctx.drawImage(overlayCanvasRef.current, 0, 0);
}, [score]); // 依赖 score，确保覆盖层变化时重绘
return (
<div>
{/* 主舞台 */}
<canvas ref={mainCanvasRef} width={800} height={600} />
{/* 覆盖层舞台 - 这里的内容是 React 组件，但渲染在 Canvas 上 */}
<ScoreOverlay score={score} x={20} y={50} />
</div>
);
};这样，当你点击按钮增加分数时，ScoreOverlay 组件会更新 React 状态，触发 useEffect，在覆盖层 Canvas 上画出新的分数，然后主循环会把覆盖层 Canvas 画到主 Canvas 上。MediaRecorder 看到的是主 Canvas 的变化，于是它就把“分数增加”这个动作记录进了视频里。
第六部分：高级技巧——处理 Blob URL 和内存
现在，代码能跑了。但如果你点击“下载”，视频能播。如果你录了 5 分钟，浏览器可能会卡。为什么？
因为我们一直在累积 chunks。chunks 是二进制数据块。如果你录了 5 分钟的高清视频，chunks 数组里的数据量可能有几百兆甚至几个 G。这会把内存撑爆。
我们需要在录制结束后清理内存。
// 修改 useFFmpegRecorder
const stopRecording = () => {
if (window.mediaRecorderInstance) {
window.mediaRecorderInstance.stop();
setIsRecording(false);
// 清理逻辑
setTimeout(() => {
setRecordedChunks([]); // 清空数据块
// URL.revokeObjectURL 会让浏览器释放内存，但也会让视频链接失效
// 所以一定要在用户下载完成后再 revoke，或者你可以选择不 revoke，让浏览器自己管
// URL.revokeObjectURL(blobUrl);
}, 1000);
}
};还有一个问题：Blob URL 的生命周期。当你 setBlob(url) 后，React 会把这个 URL 传给 <video> 标签。但如果你在下次渲染时没有更新 blob，video 标签的 src 还是旧的 URL。虽然 React 可能会复用 DOM，但 Blob URL 是基于内存地址的，如果内存地址变了，视频就会黑屏。
所以，我们每次录制完成，都要生成一个新的 Blob URL。
第七部分：性能优化——别让用户等死
如果你的应用是一个复杂的 React 应用，并且你试图在每一帧都进行视频编码，你的 CPU 占用率会飙升到 100%，页面会变成冰冷的僵尸。
这里有几个优化策略：
- 降低帧率：如果你不需要 60fps，就录 30fps。这在很多场景下肉眼根本分辨不出来。
- 降低分辨率：把 Canvas 的尺寸缩小，比如从 1920×1080 降到 1280×720。编码效率会高很多。
- 使用 Web Workers：把编码逻辑放到 Web Worker 里。这样主线程（UI 线程）就不会卡顿了。虽然
MediaRecorder是基于浏览器的，但我们可以把数据传输的环节优化一下。 - 选择性录制：不要录制整个页面。只录制你关心的那个 Canvas 区域。其他背景、UI 按钮都不要在 Canvas 上画，只画在 DOM 上。
第八部分：进阶——用 FFmpeg.wasm 做真正的后期处理
虽然 MediaRecorder 很快，但它只能“原样”录制。如果你想给视频加水印、加滤镜、或者把几个视频片段剪在一起，你就得搬出那个大块头——FFmpeg.wasm。
这东西很强大，但也非常难搞。因为它需要加载一个巨大的 WASM 文件（通常几十 MB），并且它的 API 是基于命令行的（比如 ffmpeg -i input -vf "scale=320:-1" output.mp4）。
在 React 中使用 FFmpeg.wasm 的典型流程是：
- 加载：使用
createFFmpeg({ log: true })初始化。 - FS：将浏览器里的 Blob 或 Canvas 数据写入 FFmpeg 的虚拟文件系统 (
FS)。 - 运行：调用
ffmpeg.run(['-i', 'input', 'output'])。 - 读取：从虚拟文件系统读取生成的文件，转成 Blob。
这就像是在浏览器里开了一个微型 Linux 终端。写起来很爽，但性能开销巨大。
这里有一个简化的伪代码示例，展示如何把 Canvas 转成图片，然后喂给 FFmpeg：
const useFFmpegComposer = () => {
const [isLoaded, setIsLoaded] = useState(false);
const ffmpeg = useRef(null);
useEffect(() => {
const loadFFmpeg = async () => {
const { createFFmpeg, fetchFile } = FFmpeg;
ffmpeg.current = createFFmpeg({ log: true });
await ffmpeg.current.load();
setIsLoaded(true);
};
loadFFmpeg();
}, []);
const exportToMP4 = async (canvasRef) => {
if (!isLoaded) return;
const ffmpeg = ffmpeg.current;
const canvas = canvasRef.current;
// 1. 截取当前帧
const dataUrl = canvas.toDataURL('image/png');
const data = await fetchFile(dataUrl);
// 2. 写入 FFmpeg 的虚拟文件系统
ffmpeg.FS('writeFile', 'input.png', data);
// 3. 运行命令：转换 PNG 为 MP4 (这里只是一个示例，实际视频编码需要更复杂的配置)
// 注意：在浏览器里实时做这个，速度会慢得像蜗牛
await ffmpeg.run('-i', 'input.png', '-c:v', 'libx264', 'output.mp4');
// 4. 读取结果
const outputData = ffmpeg.FS('readFile', 'output.mp4');
// 5. 转回 Blob
const videoBlob = new Blob([outputData.buffer], { type: 'video/mp4' });
return videoBlob;
};
return { isLoaded, exportToMP4 };
};警告：上面的代码只是个概念验证。在实时录制场景下，用 FFmpeg.wasm 去处理每一帧，体验极差。通常的做法是：用 MediaRecorder 录制一个高帧率的 WebM 文件（画质好，速度快），等用户停止录制后，再用 FFmpeg.wasm 进行后处理（比如合并、压缩、转码）。这叫“先录后编”。
第九部分：实战案例——构建一个“动态白板”
让我们综合一下。我们来做一个“动态白板”应用。
用户在屏幕上画画，React 监听鼠标事件，在 Canvas 上渲染线条。同时，我们在 Canvas 上叠加一个“时间戳”和“笔触颜色”的指示器。
关键点：
- 笔触颜色：用户点击颜色按钮，Canvas 上下文颜色改变。这个改变必须被
MediaRecorder捕捉到。 - 撤销功能：这很难录，因为 MediaRecorder 记录的是像素。如果你撤销了，像素变了，视频也会变。这其实是个特性，而不是 Bug。
代码片段：动态白板核心逻辑
const DynamicWhiteboard = () => {
const canvasRef = useRef(null);
const [isDrawing, setIsDrawing] = useState(false);
const [color, setColor] = useState('#000000');
const [penSize, setPenSize] = useState(5);
const startDrawing = (e) => {
setIsDrawing(true);
draw(e); // 允许点击即画点
};
const stopDrawing = () => setIsDrawing(false);
const draw = (e) => {
if (!isDrawing) return;
const canvas = canvasRef.current;
const ctx = canvas.getContext('2d');
// 设置样式
ctx.lineWidth = penSize;
ctx.lineCap = 'round';
ctx.strokeStyle = color;
// 获取坐标
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
// 绘制
ctx.lineTo(x, y);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(x, y);
};
// 监听颜色变化，更新 Canvas 样式
useEffect(() => {
const canvas = canvasRef.current;
if (canvas) {
const ctx = canvas.getContext('2d');
ctx.strokeStyle = color;
}
}, [color]);
return (
<div>
<canvas
ref={canvasRef}
width={800}
height={600}
onMouseDown={startDrawing}
onMouseUp={stopDrawing}
onMouseMove={draw}
style={{ border: '1px solid #ccc', cursor: 'crosshair' }}
/>
<div style={{ marginTop: '10px' }}>
<button onClick={() => setColor('red')}>红笔</button>
<button onClick={() => setColor('blue')}>蓝笔</button>
<button onClick={() => setColor('green')}>绿笔</button>
</div>
</div>
);
};如果你用 useFFmpegRecorder 包裹这个组件，你就能得到一个“带时间戳和颜色指示器的动态白板视频”。当你切换颜色时，视频里的笔迹颜色也会随之改变。
第十部分：常见陷阱与“血泪”教训
在开发这个功能时，我踩过不少坑，这里分享给你们，希望能少走弯路。
-
跨域问题 (Tainted Canvas)：
如果你 Canvas 上绘制了从外部 URL 加载的图片，并且没有设置crossOrigin="anonymous"，那么 Canvas 就会被标记为“被污染”。一旦 Canvas 被污染，你就无法调用toDataURL()或captureStream()，MediaRecorder也会报错。记住：Canvas 想要录视频，它必须保持“纯洁”。 -
Blob URL 的引用计数：
当你把blob传给<video>标签后，这个 URL 对象就在 DOM 中被引用了。如果你在useEffect里尝试清理这个 Blob，可能会导致视频播放中断。React 的useEffect返回的清理函数是在组件卸载时执行的，此时用户可能还在看视频。所以，不要在组件卸载时revokeObjectURL，除非你确定用户已经下载完了。 -
分辨率缩放：
captureStream()捕获的是 Canvas 的物理像素。如果你在 CSS 里把 Canvas 缩小了（比如style={{ width: '400px', height: '300px' }}），但 Canvas 的width和height属性还是800和600，那么录出来的视频是 800×600 的，但在屏幕上播放时会被 CSS 压缩。这可能会导致视频清晰度看起来很高，但文件体积巨大。建议：Canvas 的 width/height 属性和 CSS 的 display size 保持一致。 -
移动端兼容性：
MediaRecorder在移动端的支持度参差不齐。iOS Safari 对captureStream()支持得很好，但某些 Android 设备可能需要特定的 MIME 类型。在做兼容性测试时，别忘了带上手机。
第十一部分：未来展望——WebCodecs API
最后，我想聊聊未来。MediaRecorder 是基于 MSE（媒体源扩展）的，它封装得很深，不够灵活。现在的浏览器正在引入一个新的 API：WebCodecs API。
WebCodecs 是一个底层的 API，它允许你直接访问视频帧（VideoFrame）和编码器（VideoEncoder）。你可以手动获取 Canvas 的像素数据，手动创建一个 VideoFrame 对象，手动交给 VideoEncoder 进行压缩，然后手动把压缩后的数据喂给 MediaStream。
这听起来非常复杂，但它带来了巨大的好处：
- 完全控制：你可以精确控制每一帧的编码参数（GOP、QP 值、帧类型）。
- 实时特效：你可以在编码之前，直接在
VideoFrame上做像素级的处理（比如加滤镜、加马赛克），然后再编码。这对于直播推流、实时视频滤镜应用来说，是革命性的。
目前 WebCodecs 还在草案阶段，但主流浏览器（Chrome, Edge, Firefox）已经支持得差不多了。未来的 React 动态视频编码，很可能会从 MediaRecorder 转向 WebCodecs。
结语：动手吧，码农们
好了，伙计们。我们今天从 React 组件化讲到了 Canvas 绘图，从 MediaRecorder 讲到了 FFmpeg.wasm，从 Blob URL 讲到了 WebCodecs。
“React 驱动的动态视频编码”听起来很高大上，其实核心逻辑非常朴素：用 React 管理逻辑，用 Canvas 管理画面，用浏览器 API 管理输出。
不要被“视频编码”这个词吓到了。它本质上就是数据的序列化。当你点击“开始录制”的那一刻，你实际上是在告诉浏览器：“嘿，别管我的 React 状态了，给我每一帧的画面，我帮你存成文件。”
去试试吧。写一个组件，让它动起来，然后录下来。当你看到那个视频文件在播放器里流畅地回放你的代码逻辑时，那种成就感，绝对比写出一个 Bug 要强一百倍。
别光看，代码写起来。祝你好运！