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()

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.

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.

js
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.