Signatur
Beschreibung
Die schreibgeschützte Eigenschaft stream eines MediaStreamEvent enthält den MediaStream, um den es bei dem Ereignis geht. Solche Ereignisse hat eine RTCPeerConnection in der alten, streambasierten WebRTC-API ausgelöst: addstream, sobald die Gegenstelle einen Stream hinzugefügt hat, und removestream, sobald sie ihn wieder entfernt hat.
In der Praxis hat man event.stream vor allem genutzt, um einen empfangenen Remote-Stream direkt einem <video>- oder <audio>-Element über srcObject zuzuweisen oder um beim Entfernen eines Streams die passende Oberfläche wieder abzubauen.
Wichtig: MediaStreamEvent ist zusammen mit den Ereignissen addstream/removestream und der Methode addStream() veraltet. Die heutige WebRTC-Spezifikation arbeitet mit einzelnen Spuren: Mit RTCPeerConnection.addTrack() fügt man Spuren hinzu, empfangen werden sie über das track-Ereignis. Dessen RTCTrackEvent stellt die zugehörigen Streams als Array unter event.streams bereit. Neuer Code sollte ausschließlich diesen Weg nutzen.
Rückgabewert
MediaStream, der zu dem Ereignis gehört. Die Eigenschaft ist schreibgeschützt.Beispiele
Remote-Stream im alten addstream-Ereignis anzeigen
// Nur für alte WebRTC-Implementierungen
const pc = new RTCPeerConnection();
const remoteVideo = document.querySelector('#remote');
pc.onaddstream = (event) => {
// event ist ein MediaStreamEvent
console.log('Stream empfangen:', event.stream.id);
remoteVideo.srcObject = event.stream;
};Aufräumen beim removestream-Ereignis
const pc = new RTCPeerConnection();
pc.addEventListener('removestream', (event) => {
const video = document.querySelector(`video[data-stream-id="${event.stream.id}"]`);
if (video) {
video.srcObject = null;
video.remove();
}
console.log('Stream entfernt:', event.stream.id);
});Moderner Ersatz mit Rückfall auf die alte API
const pc = new RTCPeerConnection();
const remoteVideo = document.querySelector('#remote');
if ('ontrack' in pc) {
// Standardweg: RTCTrackEvent.streams
pc.addEventListener('track', ({ streams: [stream] }) => {
if (stream && remoteVideo.srcObject !== stream) {
remoteVideo.srcObject = stream;
}
});
} else {
// Rückfall für sehr alte Browser: MediaStreamEvent.stream
pc.onaddstream = ({ stream }) => {
remoteVideo.srcObject = stream;
};
}// Wichtig · Fallstricke
- Veraltet:
MediaStreamEvent,addstreamundremovestreamkommen in der aktuellen WebRTC-Spezifikation nicht mehr vor. Aktuelle Browser unterstützen sie nicht mehr oder nur noch als Altlast. Nutze stattdessentrackbzw.RTCTrackEvent.streams. - Das
track-Ereignis wird für jede Spur einzeln ausgelöst, also bei Audio und Video oft zweimal für denselben Stream. Prüfe deshalb vor dem Zuweisen, obsrcObjectschon gesetzt ist.addstreamkam dagegen nur einmal pro Stream. - Die alte Zuweisung über
URL.createObjectURL(event.stream)funktioniert in modernen Browsern nicht mehr. Verwendeelement.srcObject = stream. - Die Eigenschaft ist schreibgeschützt. Wenn du ihr einen Wert zuweist, wird das ignoriert, im Strict Mode gibt es einen
TypeError. - Als Übergangslösung für alte Browser eignet sich die Bibliothek webrtc-adapter (adapter.js).