在此页

• 句法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

HTMLCanvasElement captureStream() 方法返回 MediaStream which includes a CanvasCaptureMediaStreamTrack containing a real-time video capture of the canvas's contents.

句法

MediaStream = canvas.captureStream(frameRate);
					

参数

frameRate 可选

A double-precision floating-point value that indicates the rate of capture of each frame. If not set, a new frame will be captured each time the canvas changes; if set to 0 , frames will not be captured automatically; instead, they will only be captured when the returned track's requestFrame() 方法被调用。

返回值

A reference to a MediaStream object, which has a single CanvasCaptureMediaStreamTrack in it.

异常

NotSupportedError

值 frameRate 为负。

范例

// Find the canvas element to capture
var canvasElt = document.querySelector('canvas');
// Get the stream
var stream = canvasElt.captureStream(25); // 25 FPS
// Do things to the stream
// E.g. Send it to another computer using an RTCPeerConnection
//      pc is an RTCPeerConnection created elsewhere
pc.addStream(stream);
					

规范

规范	状态	注释
Media Capture from DOM Elements The definition of 'HTMLCanvasElement.captureStream()' in that specification.	工作草案	初始定义

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
captureStream	Chrome 51	Edge ≤79	Firefox 43	IE No	Opera 36	Safari 11	WebView Android 51	Chrome Android 51	Firefox Android 43	Opera Android 36	Safari iOS 11	Samsung Internet Android 5.0

图例

完整支持

完整支持

不支持

不支持

实验。期望将来行为有所改变。

实验。期望将来行为有所改变。

另请参阅

• HTMLMediaElement.captureStream() , which allows capturing a stream from a media element.
• MediaStream
• Media Capture and Streams API

元数据

• 最后修改： Dec 27, 2019

相关话题

1. Media Streams API
2. HTMLCanvasElement
3. 特性

   1. height
   2. mozOpaque
   3. width
4. 方法

   1. captureStream()
   2. getContext()
   3. mozFetchAsStream()
   4. mozGetAsFile()
   5. toBlob()
   6. toDataURL()
   7. transferControlToOffscreen()
5. 事件

   1. webglcontextlost
6. 继承：

   1. HTMLElement
   2. 元素
   3. 节点
   4. EventTarget
7. Related pages for Media Capture and Streams

   1. AudioStreamTrack
   2. BlobEvent
   3. CanvasCaptureMediaStream
   4. ConstrainBoolean
   5. ConstrainDOMString
   6. ConstrainDouble
   7. ConstrainLong
   8. DoubleRange
   9. HTMLCanvasElement.captureStream()
   10. LongRange
   11. MediaDevices
   12. MediaStream
   13. MediaStreamTrack
   14. MediaStreamTrackEvent
   15. MediaTrackCapabilities
   16. MediaTrackConstraints
   17. MediaTrackSettings
   18. MediaTrackSupportedConstraints
   19. Navigator.mediaDevices
   20. NavigatorUserMedia
   21. NavigatorUserMediaError
   22. VideoStreamTrack
   23. navigator.mediaDevices.getUserMedia()