Canvas实时转视频流的核心方案是captureStream+MediaRecorder，需检测浏览器兼容性、设置合适mimeType、处理Safari限制及内存管理。
使用MediaRecorder + captureStream 实现实时录制（推荐方案）
这是目前最轻量、兼容性最好、且真正“实时”的方案，适用于Chrome 71+、Edge 79+、Firefox 69+、Safari 16.4+（注意：Safari对captureStream支持较晚，且仅限部分上下文）。
-
启用Canvas的captureStream：需确保Canvas在“可播放上下文”中（如非静默页面、有用户交互触发），调用
canvas.captureStream(fps)获取MediaStream对象，例如const stream = canvas.captureStream(30); -
创建MediaRecorder实例：传入stream，指定mimeType（如
"video/webm; codecs=vp8"或"video/mp4; codecs=avc1.42E01E"），注意Safari仅支持mp4且需avc1编码，Chrome/Edge对webm支持更稳定 -
监听dataavailable事件拼接视频块：每次触发时拿到
Blob片段，可用new Blob(chunks, {type: 'video/webm'})合并为完整视频，或直接通过URL.createObjectURL()生成可播放链接 -
控制帧率与性能：避免Canvas重绘过频导致丢帧，建议用
requestAnimationFrame驱动绘制，并与captureStream的fps参数对齐；若Canvas内容变化不频繁，可动态暂停/恢复Recorder以节省资源
兼容旧版浏览器或需要MP4/H.264编码的场景
IE、旧版Safari、部分安卓WebView不支持captureStream或MediaRecorder。此时需降级处理：
-
降级为逐帧截图 + 客户端编码：用
canvas.toDataURL('image/png')或canvas.getContext('2d').getImageData()提取像素，喂给FFmpeg.wasm进行H.264编码。缺点是CPU占用高、延迟大（通常秒级）、不真正“实时” - 服务端中转方案：前端通过WebSocket或WebRTC DataChannel将每帧图像（如JPEG Base64或ArrayBuffer）发送至Node.js服务端，由服务端用ffmpeg进程实时合成视频流（如RTMP或HLS），再推回前端或供下载。适合对实时性要求不高但需全兼容的业务
-
检测并提示用户：用
if ('captureStream' in HTMLCanvasElement.prototype && 'MediaRecorder' in window)判断能力，不支持时引导用户升级浏览器或切换方案
避免常见陷阱
实际开发中易忽略以下细节，导致跨浏览器失败：
-
Canvas必须在同源且非沙盒iframe中：若Canvas来自跨域图片或iframe，
captureStream会静默失败或抛SecurityError -
音频轨道需显式添加：若需音画同步，须用
stream.addTrack(audioTrack)注入麦克风或合成音频，不能依赖自动混音 -
Safari的特殊限制：iOS Safari不支持
captureStream（截至iOS 17.5），macOS Safari仅支持canvas.captureStream()在用户手势后首次调用；且MediaRecorder的start()必须在用户交互回调内执行 -
内存与GC压力：长时间录制需定期清理
chunks数组，避免OOM；建议分段录制（如每30秒一个Blob），并用recorder.onstop做归档
最小可行代码示例（带兼容检查）
以下为启动录制的核心逻辑，已适配主流浏览器：
立即学习“前端免费学习笔记（深入）”；
function startRecording(canvas, fps = 30) {
if (!('captureStream' in canvas) || !('MediaRecorder' in window)) {
alert('当前浏览器不支持实时录制，请使用Chrome/Firefox/Edge最新版');
return;
}
const stream = canvas.captureStream(fps);
const mimeType = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor)
? 'video/mp4; codecs="avc1.42E01E"'
: 'video/webm; codecs=vp8';
try {
const recorder = new MediaRecorder(stream, { mimeType });
const chunks = [];
recorder.ondataavailable = e => chunks.push(e.data);
recorder.onstop = () => {
const blob = new Blob(chunks, { type: mimeType });
const url = URL.createObjectURL(blob);
// 比如赋值给 <video> 的src 或 触发下载
console.log('录制完成，视频URL:', url);
};
recorder.start();
return recorder;
} catch (e) {
console.error('MediaRecorder初始化失败:', e);
}
}
