HTMLMediaElement: captureStream() method
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
The captureStream() method of the HTMLMediaElement interface returns a MediaStream object that streams 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.
Syntax
captureStream()
Parameters
None.
Return value
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.
Examples
Basic usage
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" into a MediaStream.
The stream can then be used for other purposes, such as a WebRTC stream to share prerecorded videos with another person during a video call.
document.querySelector(".playAndRecord").addEventListener("click", () => {
const playbackElement = document.getElementById("playback");
const captureStream = playbackElement.captureStream();
playbackElement.play();
});
See Recording a media element for a longer and more intricate example and explanation.
Specifications
| Specification |
|---|
| Media Capture from DOM Elements # dom-htmlmediaelement-capturestream |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
captureStream
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- No support
- No support
- Requires a vendor prefix or different name for use.
- Has more compatibility info.