"Canvas captureStream：画布输出为 MediaStream"

---

title: "Canvas captureStream：画布输出为 MediaStream"

keywords:

• captureStream
• MediaStream
• MediaRecorder
• WebRTC
• 帧率

description: "介绍将 Canvas 内容通过 captureStream() 输出为 MediaStream，用于录制与实时传输（WebRTC），说明帧率设置与绘制管线协作，提供示例与兼容建议。"

categories:

• 应用软件
• 图形图像

---

概述

Canvas 可通过 captureStream(frameRate) 输出为视频轨的 MediaStream，用于录制或 WebRTC 发送。需在绘制管线中保持帧率与资源释放，避免内存膨胀与卡顿。

示例

const canvas = document.querySelector('canvas')
const stream = canvas.captureStream(30)
// 录制
const rec = new MediaRecorder(stream, { mimeType: 'video/webm;codecs=vp8' })
const chunks = []
rec.ondataavailable = e => e.data.size && chunks.push(e.data)
rec.start(1000)
setTimeout(() => { rec.stop() }, 5000)

// WebRTC 发送（示意）
const pc = new RTCPeerConnection()
pc.addTrack(stream.getVideoTracks()[0])

工程建议

• 帧率与绘制：根据场景设置帧率；使用 requestAnimationFrame 或定时器控制绘制节奏。
• 资源管理：及时停止录制与释放轨；避免长期占用导致功耗升高。
• 兼容：在不支持环境回退到 canvas 保存帧序列或外部编码。

参考与验证

• MDN Canvas captureStream 文档：https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement/captureStream