可纯前端用 canvas.capturestream() 获取实时视频流并用 mediarecorder 录制为 webm 视频：调用 capturestream(fps) 获取流，mediarecorder 以 video/webm 编码录制，ondataavailable 收集 blob，结束时合并为 blob 并通过 url.createobjecturl 播放或下载。
可以直接用 canvas.captureStream() 获取实时视频流，配合 MediaRecorder 录制为视频文件，整个过程无需服务端参与，纯前端完成。
获取Canvas动画的实时媒体流
Canvas元素原生支持 captureStream() 方法，只要动画在持续绘制（比如用 requestAnimationFrame），就能输出连续帧流：
- 调用
const stream = canvas.captureStream(fps)，其中fps建议设为动画实际帧率（如 30 或 60），不填则使用浏览器默认（通常约 30）； - 该流是实时的——只要 Canvas 内容在更新，流就自动推送新帧，无需手动触发；
- 注意：动画必须已开始运行（例如
requestAnimationFrame已启动），否则流可能为空或静止。
用MediaRecorder录制为视频文件
拿到流后，用 MediaRecorder 编码并收集数据：
- 创建录制器：
const recorder = new MediaRecorder(stream, { mimeType: 'video/webm' })； - 主流浏览器均支持
video/webm（VP8/VP9 编码），兼容性好；若需 MP4，可后续用ffmpeg.wasm转码，但不能直接设mimeType: 'video/mp4'（多数浏览器不支持原生 MP4 编码）； - 监听
ondataavailable收集每段 Blob 数据，存入数组； - 调用
recorder.start()开始录制，recorder.stop()结束（可由定时器、动画结束事件或用户操作触发）。
导出与播放处理
录制结束后，把所有片段合并为可下载或播放的视频：
-
onstop回调中，用new Blob(chunks, { type: 'video/webm' })合成完整视频 Blob； - 用
URL.createObjectURL(blob)生成临时 URL，赋给<video></video>的src即可预览； - 构造
<a download></a>链接并模拟点击，即可触发本地下载。
注意事项与常见问题
几个关键细节影响成功率：
- 确保页面运行在 HTTPS 或
localhost下，否则getUserMedia和部分媒体 API 会被浏览器阻止； - Canvas 若未设置明确宽高（如靠 CSS 拉伸），
captureStream可能捕获模糊或裁剪画面，应通过canvas.width/canvas.height设置固有尺寸； - Safari 对
captureStream支持较晚，iOS 16.4+、macOS 13.3+ 才稳定可用，旧版本需降级方案（如逐帧截图 + WebRTC 模拟）； - 避免在动画循环中反复调用
captureStream，只需调用一次获取流，复用即可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
