HTMLMediaElement: srcObject property
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
ThesrcObject property of theHTMLMediaElement interface sets or returns the object which serves asthe source of the media associated with theHTMLMediaElement, ornull if not assigned.
The object can be aMediaStream, aMediaSource, aBlob, or aFile (which inherits fromBlob).
Note:As of March 2020, only Safari has full support forsrcObject, i.e., usingMediaSource,MediaStream,Blob, andFile objects as values. Other browsers supportMediaStream objects; until they catch up, consider falling back to creating a URL withURL.createObjectURL() and assigning it toHTMLMediaElement.src (see below for an example). In addition, as of version 108 Chromium supports attaching a dedicated workerMediaSource object by assigning that object'sMediaSourceHandle instance (transferred from the worker) tosrcObject.
Value
AMediaStream,MediaSource,Blob, orFile object (though see the compatibility table for what is actuallysupported), ornull if not assigned.
Usage notes
Older versions of the Media Source specification required usingURL.createObjectURL() to create an object URL thensettingsrc to that URL. Now you can just setsrcObject to theMediaStream directly.
Examples
Basic example
In this example, aMediaStream from a camera is assigned to anewly-created<video> element.
const mediaStream = await navigator.mediaDevices.getUserMedia({ video: true });const video = document.createElement("video");video.srcObject = mediaStream;In this example, a newMediaSource is assigned to a newly-created<video> element.
const mediaSource = new MediaSource();const video = document.createElement("video");video.srcObject = mediaSource;Supporting fallback to the src property
The examples below support older browser versions that require you to create an objectURL and assign it tosrc ifsrcObject isn't supported.
First, aMediaStream from a camera is assigned to a newly-created<video> element, with fallback for older browsers.
const mediaStream = await navigator.mediaDevices.getUserMedia({ video: true });const video = document.createElement("video");if ("srcObject" in video) { video.srcObject = mediaStream;} else { // Avoid using this in new browsers, as it is going away. video.src = URL.createObjectURL(mediaStream);}Second, a newMediaSource is assigned to a newly-created<video> element, with fallback for older browsers and browsers thatdon't yet support assignment ofMediaSource directly.
const mediaSource = new MediaSource();const video = document.createElement("video");// Older browsers may not have srcObjectif ("srcObject" in video) { try { video.srcObject = mediaSource; } catch (err) { if (err.name !== "TypeError") { throw err; } // Even if they do, they may only support MediaStream video.src = URL.createObjectURL(mediaSource); }} else { video.src = URL.createObjectURL(mediaSource);}Constructing aMediaSource in a worker and passing it to the main thread to play
TheMediaSource.handle property can be accessed inside a dedicated worker and the resultingMediaSourceHandle object is then transferred over to the thread that created the worker (in this case the main thread) via apostMessage() call:
// Inside dedicated workerlet mediaSource = new MediaSource();let handle = mediaSource.handle;// Transfer the handle to the context that created the workerpostMessage({ arg: handle }, [handle]);mediaSource.addEventListener("sourceopen", () => { // Await sourceopen on MediaSource before creating SourceBuffers // and populating them with fetched media — MediaSource won't // accept creation of SourceBuffers until it is attached to the // HTMLMediaElement and its readyState is "open"});Over in the main thread, we receive the handle via amessage event handler, attach it to a<video> via itsHTMLMediaElement.srcObject property, andplay the video:
worker.addEventListener("message", (msg) => { let mediaSourceHandle = msg.data.arg; video.srcObject = mediaSourceHandle; video.play();});Note:MediaSourceHandles cannot be successfully transferred into or via a shared worker or service worker.
Specifications
| Specification |
|---|
| HTML # dom-media-srcobject-dev |
| Media Source Extensions™ # htmlmediaelement-extensions-srcobject |