captureStream()
特性为
HTMLMediaElement
interface returns a
MediaStream
object which is streaming a real-time capture of the content being rendered in the media element.
This can be used, for example, as a source for a
WebRTC
RTCPeerConnection
.
var mediaStream = mediaElement.captureStream()
None.
A
MediaStream
object which can be used as a source for audio and/or video data by other media processing code, or as a source for
WebRTC
.
In this example, an event handler is established so that clicking a button starts capturing the contents of a media element with the ID
"playback"
成
MediaStream
. The stream can then be used for other purposes—like a source for streaming over WebRTC, to allow sharing prerecorded videos with another person during a video call.
document.querySelector('.playAndRecord').addEventListener('click', function() {
var playbackElement = document.getElementById("playback");
var captureStream = playbackElement.captureStream();
playbackElement.play();
});
见 Recording a media element for a longer and more intricate example and explanation.
| 规范 | 状态 | 注释 |
|---|---|---|
|
Media Capture from DOM Elements
The definition of 'captureStream()' in that specification. |
工作草案 | 初始定义。 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
captureStream
|
Chrome 62 | Edge 79 |
Firefox
15
Prefixed
|
IE 不支持 No | Opera 49 | Safari 不支持 No | WebView Android 62 | Chrome Android 62 |
Firefox Android
15
Prefixed
|
Opera Android 46 | Safari iOS 不支持 No | Samsung Internet Android 8.0 |
完整支持
不支持
要求使用供应商前缀或不同名称。
Prior to Firefox 51, you couldn't use
captureStream()
on a media element whose source is, itself, a
MediaStream
(like a
<video>
element which is presenting a stream being received over a
RTCPeerConnection
). Beginning in Firefox 51, this works. This means you can capture a stream from the video element and use
MediaRecorder
to record it. See
bug 1259788
了解细节。
不管怎样，
captureStream()
is still prefixed as
mozCaptureStream()
on Firefox for good reason: there are some quirks in the present implementation which are worth noting:
MediaStream
.
MediaStream
, the output from this method isn't compatible with the spec, and if you change the source after starting capture, the output capture stream can't accept the new source data due to that incompatibility, so no
MediaStreamTrack
s from the new source
MediaStream
are added to the captured stream, resulting in output that doesn't capture the updated source.
MediaStream
adds tracks back to the stream and it works again as expected.
mozCaptureMediaStream()
on an element with a
MediaStream
source returns a stream that only contains tracks while the element is playing a
MediaStream
.
mozCaptureMediaStream()
on a media element with no source media, its compatibility mode will be based on the first source that's added; for example, if it's a
MediaStream
, then the capture stream will only work with MediaStream sources from then on.
MediaStream
source support is brought up to specification and the method is unprefixed. See
bug 1259788, comment 160
了解细节。
HTMLCanvasElement.captureStream()
MediaStream
HTMLMediaElement