Signatur
Beschreibung
Die Eigenschaft srcObject verbindet ein <video>- oder <audio>-Element direkt mit einem Quellobjekt, ohne dafür eine URL zu brauchen. Laut Spezifikation sind MediaStream, MediaSource, Blob und File erlaubt. In der Praxis wird sie vor allem für Live-Streams genutzt, etwa das Kamerabild aus navigator.mediaDevices.getUserMedia(), eine Bildschirmfreigabe über getDisplayMedia() oder entfernte WebRTC-Streams.
Früher musste man mit URL.createObjectURL(stream) eine Blob-URL erzeugen und in src eintragen. Für MediaStream wird das nicht mehr unterstützt und ist aus den Browsern entfernt. srcObject ist hier der richtige Weg: Es kommt ohne URL-Verwaltung aus, und man muss auch nicht mit revokeObjectURL() aufräumen.
Ist srcObject gesetzt, hat es Vorrang vor dem Attribut src und vor <source>-Kindelementen. Setzt man den Wert auf null, wird die Quelle entfernt und das Element lädt neu (Media-Element-Load-Algorithmus). Das Setzen startet die Wiedergabe nicht von selbst. Dafür braucht es autoplay oder einen Aufruf von play().
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $wert | MediaStream | MediaSource | Blob | File | null | null | Beim Setzen: das Objekt, das als Medienquelle dient. Mit null wird die Zuordnung aufgehoben. |
Rückgabewert
null, wenn keins gesetzt ist.Beispiele
Webcam-Vorschau mit getUserMedia
const video = document.querySelector('#vorschau');
const starteKamera = async () => {
try {
const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
video.srcObject = stream;
video.muted = true; // stumm, damit Autoplay-Richtlinien nicht greifen
await video.play();
console.log('Kamera läuft:', video.srcObject.id);
} catch (err) {
console.error('Kein Kamerazugriff:', err.name);
}
};
starteKamera();Stream sauber beenden und Quelle entfernen
const stoppeKamera = (video) => {
const stream = video.srcObject;
if (stream instanceof MediaStream) {
// Tracks stoppen, damit die Kamera-LED ausgeht
stream.getTracks().forEach((track) => track.stop());
}
video.srcObject = null;
console.log('Quelle entfernt:', video.srcObject);
};
stoppeKamera(document.querySelector('#vorschau'));Entfernten WebRTC-Stream anzeigen
const pc = new RTCPeerConnection();
const remoteVideo = document.querySelector('#gegenueber');
pc.addEventListener('track', (event) => {
const [remoteStream] = event.streams;
// Nur neu zuweisen, wenn sich der Stream geändert hat
if (remoteVideo.srcObject !== remoteStream) {
remoteVideo.srcObject = remoteStream;
console.log('Remote-Stream verbunden');
}
});Lokale Datei ohne Objekt-URL abspielen (mit Fallback)
const input = document.querySelector('input[type=file]');
const player = document.querySelector('audio');
input.addEventListener('change', () => {
const datei = input.files[0];
if (!datei) return;
try {
player.srcObject = datei; // nicht überall unterstützt
} catch {
// Fallback für Browser ohne Blob-Unterstützung in srcObject
player.src = URL.createObjectURL(datei);
}
player.play();
});// Wichtig · Fallstricke
- Veraltetes Muster:
video.src = URL.createObjectURL(stream)funktioniert mitMediaStreamin aktuellen Browsern nicht mehr. Verwende stattdessensrcObject. - Browser-Unterstützung:
MediaStreamwird von allen modernen Browsern unterstützt.Blob/FileundMediaSourceinsrcObjectfunktionieren nur teilweise, vor allem Chromium unterstützt sie nur eingeschränkt. Bei diesen Typen solltest du eine Funktionsprüfung mit Fallback aufURL.createObjectURL()undsrceinbauen. - Ressourcen freigeben: Wenn du
srcObject = nullsetzt, laufen die Tracks weiter. Kamera und Mikrofon bleiben aktiv, bis dutrack.stop()aufrufst. - Autoplay: Browser blockieren oft Wiedergabe mit Ton, wenn der Nutzer vorher nicht mit der Seite interagiert hat. Stumme Videos (
muted) mitplaysinline, das auf iOS Safari wichtig ist, starten zuverlässiger.play()gibt ein Promise zurück, das abgelehnt werden kann. - Vorrang: Solange
srcObjectgesetzt ist, werdensrcund<source>ignoriert. getUserMedia()braucht einen sicheren Kontext (HTTPS oder localhost).