HTMLMediaElement : propriété srcObject
Disponibilité limitée
Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.
La propriété srcObject de l'interface HTMLMediaElement définit ou retourne l'objet qui sert de source pour le média associé à l'élément HTMLMediaElement, ou null si aucun objet n'est assigné.
L'objet peut être un objet MediaStream, un objet MediaSource, un
objet Blob ou un objet File (qui hérite de Blob).
Note :
À partir de mars 2020, seul Safari prend en charge pleinement srcObject, c'est-à-dire en utilisant des objets MediaSource, MediaStream, Blob et File comme valeurs. Les autres navigateurs prennent en charge les objets MediaStream ; jusqu'à ce qu'ils rattrapent leur retard, envisagez de revenir à la création d'une URL avec URL.createObjectURL() et de l'assigner à HTMLMediaElement.src (voir l'exemple ci-dessous). De plus, à partir de la version 108, Chromium prend en charge l'attachement d'un objet MediaSource dédié à un worker en assignant l'instance MediaSourceHandle de cet objet (transférée depuis le worker) à srcObject.
Valeur
Un objet MediaStream, MediaSource, Blob ou File (bien que la table de compatibilité indique ce qui est réellement pris en charge), ou null si aucun objet n'est assigné.
Notes d'utilisation
Les anciennes versions de la spécification Media Source nécessitaient l'utilisation de URL.createObjectURL() pour créer une URL d'objet, puis de définir src sur cette URL. Maintenant, vous pouvez simplement définir srcObject sur le MediaStream directement.
Exemples
Exemple simple
Dans cet exemple, un MediaStream provenant d'une caméra est assigné à un élément <video> nouvellement créé.
const mediaStream = await navigator.mediaDevices.getUserMedia({ video: true });
const video = document.createElement("video");
video.srcObject = mediaStream;
Dans cet exemple, un nouveau MediaSource est assigné à un élément <video> nouvellement créé.
const mediaSource = new MediaSource();
const video = document.createElement("video");
video.srcObject = mediaSource;
Prise en charge de la propriété src en tant que solution de repli
Les exemples ci-dessous prennent en charge les anciennes versions des navigateurs qui nécessitent de créer une URL d'objet et de l'assigner à src si srcObject n'est pas pris en charge.
Tout d'abord, un MediaStream provenant d'une caméra est assigné à un élément HTML <video> nouvellement créé, avec une solution de repli pour les anciens navigateurs.
const mediaStream = await navigator.mediaDevices.getUserMedia({ video: true });
const video = document.createElement("video");
if ("srcObject" in video) {
video.srcObject = mediaStream;
} else {
// Évitez d'utiliser ceci dans les nouveaux navigateurs, car cela va disparaître.
video.src = URL.createObjectURL(mediaStream);
}
Ensuite, un nouvel objet MediaSource est assigné à un élément HTML <video> nouvellement créé, avec une solution de repli pour les anciens navigateurs et les navigateurs qui ne prennent pas encore en charge l'assignation directe de MediaSource.
const mediaSource = new MediaSource();
const video = document.createElement("video");
// Les anciens navigateurs peuvent ne pas avoir srcObject
if ("srcObject" in video) {
try {
video.srcObject = mediaSource;
} catch (err) {
if (err.name !== "TypeError") {
throw err;
}
// Même s'ils le font, ils peuvent ne prendre en charge que MediaStream
video.src = URL.createObjectURL(mediaSource);
}
} else {
video.src = URL.createObjectURL(mediaSource);
}
Construire un MediaSource dans un worker et le passer au fil d'exécution principal pour lecture
La propriété MediaSource.handle peut être accédée à l'intérieur d'un worker dédié et l'objet MediaSourceHandle résultant est ensuite transféré au fil d'exécution qui a créé le worker (dans ce cas, le fil principal) avec un appel postMessage() :
// À l'intérieur d'un worker dédié
let mediaSource = new MediaSource();
let handle = mediaSource.handle;
// Transférer le descripteur au contexte qui a créé le worker
postMessage({ arg: handle }, [handle]);
mediaSource.addEventListener("sourceopen", () => {
// Attendre que sourceopen soit déclenché sur MediaSource avant de créer des SourceBuffers
// et de les remplir avec des médias récupérés — MediaSource n'acceptera pas
// la création de SourceBuffers tant qu'il n'est pas attaché à
// HTMLMediaElement et que son readyState vaut "open"
});
Dans le fil principal, nous recevons le descripteur dans un gestionnaire d'évènements message, l'attachons à un <video> en l'assignant à sa propriété HTMLMediaElement.srcObject, puis play la vidéo :
worker.addEventListener("message", (msg) => {
let mediaSourceHandle = msg.data.arg;
video.srcObject = mediaSourceHandle;
video.play();
});
Note :
Les objets MediaSourceHandle ne peuvent pas être transférés avec succès dans ou par un worker partagé ou un service worker.
Spécifications
| Spécification |
|---|
| HTML # dom-media-srcobject-dev |
| Media Source Extensions™ # htmlmediaelement-extensions-srcobject |