RTCPeerConnection.addStream() — Methode · JavaScript-Referenz

Signatur

RTCPeerConnection.prototype.addStream(mediaStream)

Beschreibung

Die Methode addStream() der RTCPeerConnection-Schnittstelle fügt einen kompletten MediaStream (z. B. von getUserMedia()) als lokale Medienquelle zur Verbindung hinzu. Alle Spuren des Streams werden dann in der nächsten Verhandlung (Offer/Answer) an die Gegenstelle übertragen. Enthält die Verbindung den Stream bereits, passiert nichts.

Wird ein Stream hinzugefügt, nachdem die Verbindung schon ausgehandelt wurde, löst die Verbindung das Ereignis negotiationneeded aus, damit ein neues Angebot erstellt werden kann. Die Gegenseite erhielt früher dazu das (ebenfalls veraltete) Ereignis addstream.

Wichtig: Die Methode wurde aus der Spezifikation entfernt und ist in Firefox nicht mehr verfügbar. In neuem Code sollte man immer RTCPeerConnection.addTrack() für jede Spur des Streams verwenden und auf der Empfängerseite auf das Ereignis track hören. addStream() ist nur noch für das Verständnis älteren Codes oder als Rückfallebene relevant.

Parameter

Name	Typ	Default	Beschreibung
$mediaStream Pflicht	MediaStream		Der `MediaStream`, dessen Audio- und Videospuren zur Verbindung hinzugefügt werden sollen.

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined).

Beispiele

Veraltete Nutzung: Kamera-Stream mit addStream() hinzufügen

const pc = new RTCPeerConnection({
  iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
});

const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
document.querySelector('#lokal').srcObject = stream;

// Alter Stil – funktioniert nicht in allen Browsern
pc.addStream(stream);

const offer = await pc.createOffer();
await pc.setLocalDescription(offer);
console.log(pc.getLocalStreams().length);

1

Moderner Ersatz: addTrack() pro Spur

const pc = new RTCPeerConnection();
const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });

// Jede Spur einzeln hinzufügen und dem Stream zuordnen
stream.getTracks().forEach((track) => pc.addTrack(track, stream));

// Empfängerseite: 'track' statt 'addstream'
pc.addEventListener('track', (event) => {
  document.querySelector('#remote').srcObject = event.streams[0];
});

console.log(pc.getSenders().length);

2

Feature-Erkennung mit Rückfallebene

const addLocalStream = (pc, stream) => {
  if (typeof pc.addTrack === 'function') {
    stream.getTracks().forEach((t) => pc.addTrack(t, stream));
    return 'addTrack';
  }
  // Nur für sehr alte Browser
  pc.addStream(stream);
  return 'addStream';
};

const pc = new RTCPeerConnection();
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
console.log(addLocalStream(pc, stream));

addTrack

// Wichtig · Fallstricke

Veraltet: addStream() ist nicht mehr Teil der WebRTC-Spezifikation. Firefox hat die Methode entfernt; in anderen Browsern kann sie jederzeit verschwinden. Verwende addTrack() bzw. addTransceiver().
Die zugehörigen APIs removeStream(), getLocalStreams(), getRemoteStreams() und das Ereignis addstream sind ebenfalls veraltet – Ersatz: removeTrack(), getSenders(), getReceivers() und das Ereignis track.
Spuren, die dem Stream nach dem Aufruf hinzugefügt werden, werden nicht automatisch übertragen – ein weiterer Grund für die spurbasierte API.
Ist die Verbindung bereits geschlossen (signalingState === 'closed'), wird ein InvalidStateError ausgelöst.
Kamera-/Mikrofonzugriff per getUserMedia() erfordert einen sicheren Kontext (HTTPS) und die Zustimmung des Nutzers.

Siehe auch

RTCPeerConnection.addTrack() RTCPeerConnection.removeTrack() RTCPeerConnection.addTransceiver() RTCPeerConnection MediaStream MediaDevices.getUserMedia()