Signatur
Beschreibung
Der Konstruktor MediaStream() erzeugt einen neuen Medienstrom, also einen Container für eine Menge von Audio- und Video-Tracks (MediaStreamTrack). Jeder neue Stream bekommt eine eigene, eindeutige id. Die enthaltenen Tracks werden dabei nicht kopiert, sondern nur referenziert: Derselbe Track kann also gleichzeitig in mehreren Streams stecken.
Typische Einsatzfälle sind das Neu-Kombinieren von Tracks aus unterschiedlichen Quellen (z. B. Mikrofon-Audio aus getUserMedia() plus Bildschirm-Video aus getDisplayMedia()), das Aufbauen eines Streams für eine RTCPeerConnection, das Sammeln eingehender Remote-Tracks im track-Event sowie das Vorbereiten eines Streams für MediaRecorder oder ein <video>-Element über srcObject.
Wird ein bestehender MediaStream übergeben, enthält der neue Stream dieselben Tracks wie der Ursprung zum Zeitpunkt des Aufrufs – spätere Änderungen am Original werden nicht übernommen. Wird ein Array übergeben, werden die Tracks in dieser Reihenfolge aufgenommen; doppelte Tracks werden ignoriert.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $stream | MediaStream | Ein bestehender Stream, dessen Tracks in den neuen Stream übernommen werden. Die Tracks werden geteilt, nicht geklont. | |
| $tracks | MediaStreamTrack[] | Ein Array von MediaStreamTrack-Objekten, die der neue Stream enthalten soll. Alternativ zu stream. |
Rückgabewert
MediaStream-Objekt mit eigener id; leer, wenn kein Argument übergeben wurde.Beispiele
Leeren Stream anlegen und Tracks hinzufügen
const stream = new MediaStream();
console.log(stream.getTracks().length);
const cam = await navigator.mediaDevices.getUserMedia({ video: true });
stream.addTrack(cam.getVideoTracks()[0]);
console.log(stream.getVideoTracks().length);
console.log(stream.id !== cam.id);Bildschirm-Video mit Mikrofon-Audio kombinieren und aufnehmen
const screen = await navigator.mediaDevices.getDisplayMedia({ video: true });
const mic = await navigator.mediaDevices.getUserMedia({ audio: true });
const combined = new MediaStream([
...screen.getVideoTracks(),
...mic.getAudioTracks()
]);
const recorder = new MediaRecorder(combined);
const chunks = [];
recorder.ondataavailable = (e) => chunks.push(e.data);
recorder.onstop = () => {
const blob = new Blob(chunks, { type: recorder.mimeType });
console.log('Aufnahme fertig:', blob.size, 'Bytes');
};
recorder.start();
setTimeout(() => recorder.stop(), 5000);Remote-Tracks einer WebRTC-Verbindung sammeln
const pc = new RTCPeerConnection();
const remoteStream = new MediaStream();
document.querySelector('#remote').srcObject = remoteStream;
pc.addEventListener('track', (event) => {
remoteStream.addTrack(event.track);
console.log('Neuer Remote-Track:', event.track.kind);
});Nur den Audio-Anteil eines Streams weitergeben
const av = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
const audioOnly = new MediaStream(av.getAudioTracks());
console.log(audioOnly.getTracks().map((t) => t.kind));// Wichtig · Fallstricke
- Geteilte Tracks: Die Tracks werden referenziert, nicht dupliziert. Ein
track.stop()beendet den Track in allen Streams. Für unabhängige Kopientrack.clone()verwenden. - Kamera/Mikrofon freigeben: Das Verwerfen eines Streams stoppt die Hardware nicht. Immer
stream.getTracks().forEach((t) => t.stop())aufrufen, sonst bleibt die Aufnahmeanzeige aktiv. - Der Konstruktor selbst braucht keine Berechtigung – die Quell-Tracks aus
getUserMedia()/getDisplayMedia()dagegen erfordern einen sicheren Kontext (HTTPS) und die Zustimmung des Nutzers. - Ein neu erzeugter Stream ist nur dann
active, wenn er mindestens einen nicht beendeten Track enthält. - Ältere Browser kannten nur das präfixierte
webkitMediaStream; in aktuellen Browsern ist der Konstruktor überall verfügbar.MediaRecorderunterstützt je nach Browser unterschiedliche Container/Codecs (MediaRecorder.isTypeSupported()prüfen).