captureStream() for <audio> and <video>
The captureStream() method for <audio> and <video> elements returns a MediaStream for the media element's content. You can use this to record media or send it elsewhere, such as a canvas or WebRTC connection. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Overview
The captureStream() method for <audio> and <video> elements returns a MediaStream for the media element's content. You can use this to record media or send it elsewhere, such as a canvas or WebRTC connection. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 62 | 79 | 149 | | 62 | | |
- Available with a vendor prefix: moz (149)
- Available with a vendor prefix: moz (15)
- This browser only partially implements this feature
- This feature was removed in a later browser version (149)
- From Firefox 51, if the source changes from a `MediaStream` after capture starts, the captured stream data cannot be updated until you switch the source back to a `MediaStream`.
- From Firefox 51, if `mozCaptureMediaStream()` is called on a media element with a `MediaStream` source, the returned object only contains tracks while the element is playing a `MediaStream`.
- From Firefox 51, if `mozCaptureMediaStream()` is called on a media element with no source media, its compatibility mode is be based on the first source that's added; and the stream will only work with that kind of stream from then on.
- Before Firefox 51, `mozCaptureMediaStream()` could not be used on a media element whose source is itself a `MediaStream` (such as a `<video>` element presenting a stream being received over an `RTCPeerConnection`).
Syntax
const video = document.querySelector('video');
const stream = video.captureStream();
const recorder = new MediaRecorder(stream);
recorder.ondataavailable = (e) => {
console.log('Recording data:', e.data.size);
};
recorder.start();Live demo
Media capture pipeline
Describe how captureStream turns media playback into a MediaStream.
Testing note
Verify browser support and user expectations around recording or rebroadcasting media.
Use cases
Enhance media playback
Use captureStream() for <audio> and <video> when audio, video, or responsive media needs better control or more capable browser behavior.
Deliver flexible assets
Apply captureStream() for <audio> and <video> to adapt media loading or presentation more closely to user context and device capability.
Cautions
- Test captureStream() for <audio> and <video> in your target browsers and input environments before depending on it as a primary behavior.
- Provide a fallback path or acceptable degradation strategy when support is still limited.
Accessibility
- Pair richer media behavior with captions, transcripts, controls, and loading behavior that remain understandable to all users.
Related links
Powered by web-features