使用anime.js开发动画，如何从Firefox浏览器导出MP4文件？

方法一：Firefox内置录屏工具（快速导出） #

• 打开你的anime.js动画页面，确认动画正常加载
• 按下快捷键：Windows/Linux用Ctrl+Shift+A，Mac用Cmd+Shift+A，调出Firefox的截图/录屏工具栏
• 选择「录制选定区域」，框选动画所在的区域；或者选「录制全屏」（如果动画占满整个屏幕）
• 点击「开始录制」，手动触发动画播放（如果动画不是自动启动的）
• 动画结束后点击「停止录制」，Firefox会自动保存为WebM格式文件
• 用FFmpeg转成MP4：打开终端执行命令 ffmpeg -i 你的录屏文件.webm 最终动画.mp4

方法二：代码集成MediaRecorder（精准控制导出） #

如果你需要在代码里自动触发录制和导出，可以用浏览器的MediaRecorder API，直接捕获动画的视频流：

// 获取动画所在的容器元素
const animContainer = document.getElementById('animation-wrap');
// 创建容器的视频捕获流，设置帧率为60fps
const stream = animContainer.captureStream(60);
// 初始化MediaRecorder，指定WebM编码（Firefox原生支持）
const recorder = new MediaRecorder(stream, { mimeType: 'video/webm; codecs=vp9' });
const videoChunks = [];

// 收集录制的视频片段
recorder.ondataavailable = (e) => {
  videoChunks.push(e.data);
};

// 录制结束后生成下载链接
recorder.onstop = () => {
  const videoBlob = new Blob(videoChunks, { type: 'video/webm' });
  const downloadUrl = URL.createObjectURL(videoBlob);
  const downloadLink = document.createElement('a');
  downloadLink.href = downloadUrl;
  downloadLink.download = 'anime-animation.webm';
  downloadLink.click();
  URL.revokeObjectURL(downloadUrl);
};

// 开始录制，同时启动动画
recorder.start();
anime({
  targets: '#animation-wrap .anim-element',
  // 你的动画参数
  translateY: 300,
  duration: 4000,
  easing: 'easeOutElastic(1, .8)',
  complete: () => {
    // 动画结束后停止录制
    recorder.stop();
  }
});

• 代码运行后，动画结束会自动下载WebM文件，再用FFmpeg转MP4：ffmpeg -i anime-animation.webm -c:v libx264 -crf 23 -c:a aac final-animation.mp4
• 如果你的动画是基于Canvas的，把animContainer.captureStream换成canvasElement.captureStream即可
• 注意：captureStream需要页面在HTTPS环境（本地localhost也支持）

内容的提问来源于stack exchange，提问作者Laurent-G