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

本文介绍如何纯前端将 html canvas 渲染的物理动画（如运动方块）录制为视频文件，无需后端服务器：先用 mediarecorder 实时捕获 canvas 流生成 webm，再通过 ffmpeg.wasm 转码为 mp4。全程运行于浏览器，支持离线使用。

本文介绍如何纯前端将 html canvas 渲染的物理动画（如运动方块）录制为视频文件，无需后端服务器：先用 mediarecorder 实时捕获 canvas 流生成 webm，再通过 ffmpeg.wasm 转码为 mp4。全程运行于浏览器，支持离线使用。

要在浏览器中将 Canvas 动画（例如你实现的物理模拟）直接导出为标准 MP4 视频，不依赖任何服务器，推荐采用「分阶段处理」策略：先录制为 WebM，再本地转码为 MP4。这是因为 MediaRecorder 原生支持高效、低延迟的 Canvas 流录制，而 ffmpeg.wasm 则擅长格式转换与编码优化——二者结合，既保证实时性，又满足兼容性需求。

✅ 第一步：用 MediaRecorder 录制 Canvas 为 WebM

MediaRecorder 可直接接收 <canvas> 的 captureStream() 输出（需启用 requestVideoFrameCallback 或 requestAnimationFrame 同步帧率）。关键点如下：

• Canvas 必须设置 width/height 属性（而非仅 CSS），否则流可能为空；
• 推荐帧率设为 30（{ video: { width, height, frameRate: 30 } }），避免 MediaRecorder 自适应导致卡顿；
• 使用 Blob 收集数据块，并在停止后生成可下载的 .webm 文件。

const canvas = document.getElementById('myCanvas');const stream = canvas.captureStream(30); // 30 FPSconst mediaRecorder = new MediaRecorder(stream, {  mimeType: 'video/webm;codecs=vp9'});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();}

⚠️ 注意：captureStream() 在 Safari 中需开启实验性功能（chrome://flags/#unsafely-treat-insecure-origin-as-secure 不适用；Safari 16.4+ 已原生支持，但建议测试目标环境）。

✅ 第二步：用 ffmpeg.wasm 将 WebM 转码为 MP4（H.264/AAC）

若需广泛兼容（如微信、iOS 系统相册），MP4（H.264 + AAC）是更稳妥选择。ffmpeg.wasm 可在浏览器中完成此任务：

import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';const ffmpeg = createFFmpeg({   corePath: 'https://unpkg.com/@ffmpeg/[email protected]/dist/ffmpeg-core.js',  log: true,  progress: ({ ratio }) => console.log(`Transcoding: ${(ratio * 100).toFixed(0)}%`) });async function transcodeToMP4(webmBlob) {  await ffmpeg.load(); // 首次加载 wasm 模块（约 20MB，建议预加载）  // 写入输入文件  const arrayBuffer = await webmBlob.arrayBuffer();  ffmpeg.FS('writeFile', 'input.webm', new Uint8Array(arrayBuffer));  // 执行转码命令（关键参数说明）：  // -c:v libx264 → 使用 H.264 编码器  // -crf 23 → 画质控制（18~28，值越小质量越高）  // -preset fast → 平衡速度与压缩率  // -c:a 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 blob = new Blob([data.buffer], { type: 'video/mp4' });  const url = URL.createObjectURL(blob);  const a = document.createElement('a');  a.href = url;  a.download = 'animation.mp4';  a.click();}

? 提示：首次 ffmpeg.load() 较慢（需下载 WASM 模块），可放在页面初始化或用户点击“导出”前预加载；也可使用 ffmpeg.setLogger() 监控进度。

✅ 整合到你的物理动画流程中

将录制逻辑嵌入你的 draw() 循环即可：

let isRecording = false;let mediaRecorder;function startCapture() {  if (!isRecording && canvas.captureStream) {    const stream = canvas.captureStream(30);    mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm' });    mediaRecorder.ondataavailable = e => chunks.push(e.data);    mediaRecorder.start();    isRecording = true;  }}function stopAndExport() {  if (isRecording && mediaRecorder) {    mediaRecorder.stop();    isRecording = false;    // 停止后立即转码（WebM → MP4）    const webmBlob = new Blob(chunks, { type: 'video/webm' });    transcodeToMP4(webmBlob);  }}// 在你的主循环中调用（例如：空格键开始/停止）document.addEventListener('keydown', e => {  if (e.code === 'Space') {    isRecording ? stopAndExport() : startCapture();  }});

? 总结与注意事项

• ✅ 完全客户端：所有操作在浏览器完成，无网络请求、无服务端依赖；
• ⚠️ 性能考量：高分辨率（如 1920×1080）+ 高帧率（60 FPS）会显著增加内存与 CPU 压力，建议默认使用 1280×720@30fps；
• ⚠️ ffmpeg.wasm 体积：核心约 20MB，可通过 corePath 指向 CDN 或自托管；生产环境建议配合 service worker 缓存；
• ✅ 替代方案对比：
  • Whammy.js（仅 WebM，无音频，已停更）→ 简单但功能受限；
  • Canvas2Image → 仅截图，无法生成视频；
  • ffmpeg.wasm 直接喂入 canvas.toDataURL() 帧序列 → 极其低效（需逐帧解码 PNG/JPEG），强烈不推荐。

最终，你只需三步：startCapture() → 运行物理动画 → stopAndExport()，即可获得专业级 MP4 视频。这套方案已被广泛用于在线教育、代码演示、粒子可视化等场景，稳定可靠，值得深度集成。