本文介绍如何在纯前端环境下，将 html canvas 的实时渲染画面（如物理模拟动画）录制为视频文件，全程无需服务器，结合 mediarecorder api 与 ffmpeg.wasm 实现 webm 录制 + mp4 转码。
本文介绍如何在纯前端环境下，将 html canvas 的实时渲染画面（如物理模拟动画）录制为视频文件，全程无需服务器，结合 mediarecorder api 与 ffmpeg.wasm 实现 webm 录制 + mp4 转码。
在浏览器中直接将 Canvas 动画导出为标准视频（如 MP4），是许多可视化、教育或演示类应用的核心需求。虽然 ffmpeg.wasm 提供了强大的音视频处理能力，但它并不直接支持逐帧“绑定”Canvas 对象——即无法像原生 FFmpeg 那样通过管道持续写入帧数据。因此，正确路径是采用分阶段策略：先用浏览器原生 API 录制 Canvas 流，再用 ffmpeg.wasm 进行格式转码。
✅ 推荐方案：MediaRecorder + ffmpeg.wasm
第一步：使用 MediaRecorder 录制 Canvas 为 WebM
MediaRecorder 是现代浏览器内置的媒体捕获 API，可直接从
const canvas = document.getElementById('myCanvas');
const stream = canvas.captureStream(60); // 60 FPS（根据动画实际帧率调整）
const mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm' });
const chunks = [];
mediaRecorder.ondataavailable = (e) => chunks.push(e.data);
mediaRecorder.onstop = () => {
const blob = new Blob(chunks, { type: 'video/webm' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'animation.webm';
a.click();
};
// 开始录制（例如点击按钮触发）
function startRecording() {
chunks.length = 0;
mediaRecorder.start();
}
function stopRecording() {
mediaRecorder.stop();
}
⚠️ 注意：canvas.captureStream() 在部分旧版 Safari 中不支持；若需全平台兼容，可改用 OffscreenCanvas + ImageBitmap + RTCPeerConnection 模拟流（较复杂），但绝大多数现代桌面/移动端浏览器已原生支持。
第二步：用 ffmpeg.wasm 将 WebM 转为 MP4（H.264/AAC）
.webm 文件虽可播放，但某些场景（如微信内嵌、PPT 插入、剪辑软件导入）更倾向 .mp4。此时借助 ffmpeg.wasm 完成无服务端转码：
import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';
const ffmpeg = createFFmpeg({
log: true,
corePath: 'https://unpkg.com/@ffmpeg/core@0.12.6/dist/ffmpeg-core.js',
});
async function transcodeToMP4(webmBlob) {
await ffmpeg.load(); // 确保 FFmpeg 初始化完成
// 将 Blob 转为 Uint8Array 并写入 FFmpeg FS
const arrayBuffer = await webmBlob.arrayBuffer();
ffmpeg.FS('writeFile', 'input.webm', new Uint8Array(arrayBuffer));
// 执行转码命令（关键参数说明）：
// -c:v libx264 → 使用 H.264 编码器（MP4 标准）
// -crf 23 → 控制质量（18~28，值越小质量越高）
// -preset fast → 平衡速度与压缩率
// -c:a aac → 添加 AAC 音频编码（即使无声也建议保留音频轨道以确保 MP4 兼容性）
await ffmpeg.run(
'-i', 'input.webm',
'-c:v', 'libx264',
'-crf', '23',
'-preset', 'fast',
'-c:a', 'aac',
'-y', 'output.mp4'
);
// 读取输出文件并生成下载链接
const data = ffmpeg.FS('readFile', 'output.mp4');
const mp4Blob = new Blob([data.buffer], { type: 'video/mp4' });
const url = URL.createObjectURL(mp4Blob);
const a = document.createElement('a');
a.href = url;
a.download = 'animation.mp4';
a.click();
}
? 提示：首次加载 ffmpeg.wasm 较慢（约 20–40 MB），建议预加载或添加 loading 状态提示；生产环境推荐通过 @ffmpeg/ffmpeg 的 load() 配置 corePath 使用 CDN 加速。
? 关键注意事项与优化建议
- 帧率一致性：canvas.captureStream(fps) 的 fps 参数应尽量匹配你的 requestAnimationFrame 实际渲染帧率（可用 performance.now() 统计平均帧间隔校准），避免音画不同步或卡顿。
- 内存控制：长时间录制会导致 chunks 数组占用大量内存，建议限制录制时长（如 ≤ 30 秒）或启用 mediaRecorder.ondataavailable 的流式分片处理（进阶用法）。
- 无音频处理：若 Canvas 动画无声音，-an 可禁用音频，但部分设备/播放器对纯视频 MP4 支持不佳，推荐保留 -c:a aac -f mp4 生成静音 AAC 轨道。
- 性能权衡：ffmpeg.wasm 转码 CPU 占用高，建议在后台线程（Web Worker）中运行，避免阻塞主线程 UI。
综上，这不是“Canvas 直连 FFmpeg”，而是利用浏览器标准能力（MediaRecorder）完成高效采集，再由 ffmpeg.wasm 提供专业格式转换——二者协同，即可在零后端依赖下，将任意 Canvas 动画可靠导出为通用 MP4 文件。
