HTML5游戏录视频需用MediaRecorder配合canvas.captureStream()生成MediaStream，注意Safari兼容性、帧率控制、权限检查及mimeType限制；MP4需服务端转封装。
HTML5 游戏引擎本身不提供内置视频录制功能，canvas 的 toDataURL() 或 toBlob() 只能截单帧，真要录视频必须靠浏览器原生 API（如 MediaRecorder）配合逐帧捕获，且需主动控制帧率、编码兼容性与内存压力。
用 MediaRecorder 录制 canvas 动画的正确流程
核心是把游戏运行的 canvas 元素作为媒体源传给 MediaRecorder，但不能直接传 canvas 对象——得先用 canvas.captureStream(fps) 创建一个 MediaStream。这个流会随 canvas 每次重绘自动更新帧，前提是你的游戏循环里调用了 ctx.drawImage() 或 canvas.toDataURL() 等触发渲染的操作。
-
captureStream()在 Safari 中支持较晚（iOS 16.4+ / macOS 13.3+），旧版本会返回null，需降级为定时截图 +ImageBitmap合成 - 指定的
fps参数只是建议值，实际帧率取决于游戏逻辑执行速度和浏览器调度，过高会导致丢帧或内存暴涨 - 录制前务必检查
navigator.mediaDevices.getUserMedia权限——虽然录 canvas 不需要麦克风/摄像头，但部分 Android 浏览器仍会误触发权限弹窗
MediaRecorder 常见报错与绕过方法
最典型的是 Failed to execute 'start' on 'MediaRecorder': Cannot start recording when MediaRecorder's state is 'inactive'，本质是流未准备好或已被终止。另一个高频问题是 DOMException: Failed to allocate videosink，多见于长时间录制或高分辨率 canvas（如 1920×1080）。
- 确保
captureStream()返回非null流后再初始化MediaRecorder，可用stream.getVideoTracks().length > 0校验 - 避免在
requestAnimationFrame回调中反复调用start()或stop()，应由用户显式触发一次开始/结束 - 导出前调用
mediaRecorder.requestData()强制输出最后一段数据，否则末尾几秒常丢失
导出为 MP4 而不是 WebM 的现实约束
MediaRecorder 的 mimeType 选项在不同浏览器差异极大：video/webm 全平台稳定支持，video/mp4 仅 Chromium 111+ 和 Edge 113+ 支持，Firefox 完全不认。强行设 video/mp4 会导致 MediaRecorder 初始化失败并抛出 TypeError。
- 若必须 MP4，只能在前端用
ffmpeg.wasm转码 WebM 二进制数据，但耗时长、内存占用大（>500MB 常见），不适合手机端 - 更可行的方案是上传 WebM blob 到服务端，用 FFmpeg 进行转封装（
ffmpeg -i input.webm -c copy output.mp4），无损且快 - 注意 WebM 文件头可能缺失关键元信息（如 duration），服务端解析时需用
ffprobe补全
真正难的不是“怎么启动录制”，而是平衡帧率、体积、兼容性与设备发热——比如在低端安卓机上以 60fps 录 720p，20 秒就可能触发浏览器内存回收导致录制中断。这些边界情况不会报错，只会静默失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
