浏览器Canvas动画导出MP4视频无需服务端教程

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

想把浏览器里那个酷炫的 Canvas 物理动画，比如你刚实现的小球碰撞或者方块堆叠，直接保存成一个能在任何地方播放的 MP4 视频吗？而且，整个过程完全在浏览器里完成，不需要任何服务器参与。

听起来有点不可思议？其实，实现这个目标有个非常成熟的“两步走”策略：先录制，再转码。简单来说，就是利用浏览器原生的 MediaRecorder 高效捕捉 Canvas 画面流，生成 WebM 文件；然后，借助强大的 ffmpeg.wasm 在本地完成格式转换，最终输出兼容性极佳的 MP4 视频。这套组合拳，既保证了录制的实时性和低延迟，又解决了最终格式的通用性问题。

第一步：用 MediaRecorder 录制 Canvas 为 WebM

这是整个流程的基石。MediaRecorder API 可以直接接收 Canvas 通过 captureStream() 方法产生的媒体流，实现帧级别的同步录制。不过，有几个关键细节决定了录制的成败：

• Canvas 尺寸必须明确：务必通过 HTML 属性或 Ja vaScript 设置 Canvas 的 width 和 height，而不仅仅是 CSS 样式。否则，生成的流可能是空的。
• 锁定帧率：在调用 captureStream() 时指定帧率（例如 30 FPS），并在 MediaRecorder 的配置中明确视频的 frameRate。这能避免录制器自适应帧率导致的卡顿或跳帧。
• 数据收集与下载：录制过程中，数据会以“块”的形式通过事件回调出来。我们需要将它们收集起来，在录制结束时合并成一个 Blob 对象，并生成下载链接。

const canvas = document.getElementById('myCanvas');
const stream = canvas.captureStream(30); // 明确指定 30 FPS
const mediaRecorder = new MediaRecorder(stream, {
  mimeType: 'video/webm;codecs=vp9'
});
const chunks = [];
mediaRecorder.ondataa vailable = 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 浏览器中的支持情况需要留意。虽然 Safari 16.4+ 版本已提供原生支持，但在更早的版本或某些特定环境下可能需要开启实验性功能。开发时务必在目标浏览器中进行充分测试。

第二步：用 ffmpeg.wasm 将 WebM 转码为 MP4

虽然 WebM 格式在浏览器内处理效率很高，但若想视频能在微信、iOS 系统相册等更广泛的环境下无缝播放，MP4（H.264 视频编码 + AAC 音频编码）无疑是更稳妥的选择。这时，ffmpeg.wasm 就派上用场了——它把著名的 FFmpeg 工具搬到了浏览器里。

import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';

const ffmpeg = createFFmpeg({ 
  corePath: 'https://unpkg.com/@ffmpeg/core@0.12.6/dist/ffmpeg-core.js',
  log: true,
  progress: ({ ratio }) => console.log(`转码进度: ${(ratio * 100).toFixed(0)}%`)
});

async function transcodeToMP4(webmBlob) {
  // 首次使用需要加载 WASM 核心模块（体积约20MB，建议预加载）
  await ffmpeg.load();

  // 将 WebM 文件写入 ffmpeg.wasm 的虚拟文件系统
  const arrayBuffer = await webmBlob.arrayBuffer();
  ffmpeg.FS('writeFile', 'input.webm', new Uint8Array(arrayBuffer));

  // 执行转码命令
  await ffmpeg.run(
    '-i', 'input.webm',       // 输入文件
    '-c:v', 'libx264',       // 视频编码器使用 H.264
    '-crf', '23',            // 画质控制，23 是常用平衡值（值越小画质越好）
    '-preset', 'fast',       // 编码预设，平衡速度与压缩率
    '-c:a', 'aac',           // 音频编码器使用 AAC（即使无声轨也建议保留，确保容器规范）
    '-y', 'output.mp4'       // 输出文件名，-y 表示覆盖已存在文件
  );

  // 从虚拟文件系统读取生成的 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();
}