如何将HTML5 Canvas绘制内容录制成可下载视频

方法一：使用MediaRecorder API直接录制Canvas流 #

这是浏览器原生的实时录制方案，无需第三方依赖，适合快速实现Canvas动态内容录制：

1. 生成Canvas媒体流
   从目标Canvas元素创建可录制的MediaStream，支持合并音频流实现音画同步：

   const canvas = document.getElementById('target-canvas');
   // 按指定帧率生成Canvas流，示例为30fps
   const canvasStream = canvas.captureStream(30);
   
   // 如需添加音频（如麦克风或页面音频），可合并流
   // const audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
   // const combinedStream = new MediaStream([...canvasStream.getTracks(), ...audioStream.getTracks()]);
   

2. 初始化录制器并收集数据
   指定视频编码格式（推荐video/webm，兼容性较好），监听录制数据并处理下载逻辑：

   const recorder = new MediaRecorder(canvasStream, { mimeType: 'video/webm' });
   const recordedChunks = [];
   
   recorder.ondataavailable = (e) => {
     if (e.data.size > 0) recordedChunks.push(e.data);
   };
   
   recorder.onstop = () => {
     const videoBlob = new Blob(recordedChunks, { type: 'video/webm' });
     const downloadUrl = URL.createObjectURL(videoBlob);
     const link = document.createElement('a');
     link.href = downloadUrl;
     link.download = 'canvas-recording.webm';
     link.click();
     URL.revokeObjectURL(downloadUrl); // 释放内存
   };
   
   // 启动录制
   recorder.start();
   

3. 结束录制
   在需要停止时调用：

   recorder.stop();
   

方法二：捕获帧序列转视频 #

如果需要自定义帧质量、编码格式等高级控制，可先捕获Canvas帧序列，再转换为视频：

1. 定时捕获Canvas帧
   按固定间隔提取Canvas图像数据，存储为Blob格式：

   const canvas = document.getElementById('target-canvas');
   const frames = [];
   const fps = 30;
   const captureTimer = setInterval(() => {
     canvas.toBlob((blob) => {
       frames.push(blob);
     }, 'image/png');
   }, 1000 / fps);
   

2. 用FFmpeg.js转码为视频
   借助浏览器端FFmpeg库将帧序列编码为MP4等格式：

   // 需先引入FFmpeg.js库
   const { createFFmpeg, fetchFile } = FFmpeg;
   const ffmpeg = createFFmpeg({ log: true });
   
   async function convertToVideo() {
     clearInterval(captureTimer); // 停止捕获帧
     await ffmpeg.load();
   
     // 将帧写入FFmpeg虚拟文件系统
     frames.forEach(async (frame, index) => {
       const fileName = `frame${index.toString().padStart(4, '0')}.png`;
       ffmpeg.FS('writeFile', fileName, await fetchFile(frame));
     });
   
     // 执行转码命令，生成MP4
     await ffmpeg.run(
       '-framerate', fps.toString(),
       '-i', 'frame%04d.png',
       '-c:v', 'libx264',
       '-pix_fmt', 'yuv420p',
       'canvas-output.mp4'
     );
   
     // 下载生成的视频
     const videoData = ffmpeg.FS('readFile', 'canvas-output.mp4');
     const videoBlob = new Blob([videoData.buffer], { type: 'video/mp4' });
     const downloadUrl = URL.createObjectURL(videoBlob);
     const link = document.createElement('a');
     link.href = downloadUrl;
     link.download = 'canvas-recording.mp4';
     link.click();
     URL.revokeObjectURL(downloadUrl);
   }
   

注意事项 #

• 兼容性：MediaRecorder API支持Chrome、Firefox、Edge等现代浏览器，IE完全不支持；FFmpeg.js需注意文件体积对页面加载的影响。
• 性能优化：高分辨率Canvas录制时，可适当降低帧率或压缩帧质量，避免页面卡顿。
• 音频同步：合并音频流时，需确保音频与Canvas流的采样率、格式一致，防止音画不同步。

内容的提问来源于stack exchange，提问作者Alex Mandelias