可直接用 MediaRecorder 录制 Canvas 动画生成 WebM 视频，纯前端无需服务端；核心步骤为：canvas.captureStream() 获取媒体流，MediaRecorder 录制为 video/webm，合并 Blob 后下载；若需 MP4，则须用 ffmpeg.wasm 对 WebM 转码。
可以直接用 MediaRecorder 录制 Canvas 动画，生成 WebM 视频文件，整个过程纯前端、无需服务端参与。关键在于把 Canvas 变成可录制的媒体流，再交由浏览器编码。
获取 Canvas 媒体流
调用 canvas.captureStream(fps) 获取实时帧流，参数建议设为动画实际帧率（如 30 或 60）。该方法返回一个 MediaStream，会随 Canvas 每次重绘自动更新画面：
- 确保 Canvas 已完成初始化并处于渲染状态（例如在
requestAnimationFrame循环中持续绘制） - 旧版 Safari（iOS 16.4 / macOS 13.3 之前）不支持此 API，需检测返回值是否为
null - 若需兼容，可降级为定时截图（
toBlob+ImageBitmap）再合成流，但复杂度显著上升
创建并控制 MediaRecorder
用上一步得到的流初始化 MediaRecorder，指定 mimeType 为 video/webm（最通用且免配置）：
- 推荐写法：
new MediaRecorder(stream, { mimeType: 'video/webm' }) - 部分浏览器支持
video/webm;codecs=vp9或h264，但兼容性不稳定，不建议强依赖 - 监听
ondataavailable收集每个分片 Blob；监听onstop合并并触发下载 - 调用
recorder.start()开始录制，recorder.stop()结束（可绑定按钮或定时器）
导出为可下载的视频文件
录制结束后，将所有 Blob 分片合并为一个 Blob，再用 URL.createObjectURL 创建临时链接：
立即学习“前端免费学习笔记（深入）”；
- 合并时注意设置正确的
type，如{ type: 'video/webm' } - 创建
<a>标签，赋值href和download属性，然后模拟点击 - 导出的是 WebM 文件，主流浏览器、微信内嵌页、PPT 插入均能直接播放
若必须输出 MP4 格式
MediaRecorder 原生不保证输出 MP4（H.264+AAC），需借助 ffmpeg.wasm 在前端转封装：
- 先按上述流程录制成 WebM
- 加载 ffmpeg.wasm，读取 WebM Blob，执行命令如
-i input.webm -c:v libx264 -c:a aac output.mp4 - 转码耗时取决于视频长度和设备性能，建议加 loading 提示
- 注意：MP4 转码不是“录制”，而是“后处理”，不能实时流式导出
