HTMLCanvasElement.captureStream返回MediaStream视频流而非原始像素数据，用于录屏、WebRTC等场景；需持续重绘canvas才能更新帧，不依赖await且默认60fps。
HTMLCanvasElement.captureStream 本身不直接提供“原始像素数据”，而是返回一个 MediaStream，用于实时捕获画布的渲染画面（即视频帧流）。它本质上是异步采集**已绘制内容的视频流**，而非逐帧读取 RGBA 数组。若目标是获取原始像素（如 Uint8ClampedArray），需配合 canvas.getContext('2d').getImageData() 或 OffscreenCanvas + transferToImageBitmap 等方式——但这些与 captureStream 是两条不同路径。
captureStream 的核心用途：输出可播放/传输的视频流
该方法适用于录屏、WebRTC 推流、实时预览等场景，底层由浏览器自动按帧率抓取 canvas 当前渲染状态，封装为 VideoTrack：
- 调用后立即返回
MediaStream，无需 await（它本身是同步的） - 流中的视频轨道会随 canvas 内容更新而自动刷新帧（依赖 canvas 是否重绘、是否在 document 中、是否启用
willReadFrequently等） - 默认帧率为 60fps；可传入参数指定最小帧率，如
canvas.captureStream(30)
确保流持续更新的关键条件
captureStream 不会“主动轮询”或监听 canvas 变化，它依赖浏览器渲染循环和 canvas 的实际重绘行为：
- canvas 必须已挂载到 DOM（或使用
OffscreenCanvas配合 worker，但 captureStream 目前仅支持 on-screen canvas） - 每次想推送新帧，必须显式调用
ctx.clearRect()+ctx.drawImage()等绘制操作（哪怕只重绘一次） - 若使用
requestAnimationFrame动画，需确保每帧都触发重绘；静止画面不会产生新帧 - 部分浏览器对隐藏标签页会降频或暂停流，可用
visibilitychange监听并手动恢复绘制
如何与原始像素处理协同工作
若既要原始像素分析，又要推流，建议分两路处理，避免阻塞：
- 主线程：用
captureStream()获取流，交给MediaRecorder或RTCPeerConnection - 另起一个定时任务（如
setInterval或 rAF）读取像素：ctx.getImageData(0, 0, width, height)，注意该操作较重，勿高频调用 - 更高效方案：使用
OffscreenCanvas在 Worker 中离屏渲染 + 像素计算，再将结果 postMessage 回主线程绘制到 visible canvas（从而驱动 captureStream 出帧）
简单可用示例（含错误防护）
以下代码创建可工作的 captureStream 流，并连接到 video 元素预览：
hsl(${Date.now() * 0.1 % 360}, 100%, 50%)前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
