如何无服务端地在浏览器中将 Canvas 动画导出为 MP4 视频

本文介绍如何在纯前端环境下，将 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，可直接从 <canvas> 获取 MediaStream 并录制为 .webm（VP8/VP9 编码，兼容性好、无需额外依赖）：

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/[email protected]/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 文件。