RTCPeerConnection: track Ereignis

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Das track-Ereignis wird an den ontrack-Ereignishandler auf RTCPeerConnections gesendet, nachdem ein neuer Track zu einem RTCRtpReceiver hinzugefügt wurde, der Teil der Verbindung ist.

Zum Zeitpunkt der Zustellung dieses Ereignisses wurde der neue Track vollständig zur Peer-Verbindung hinzugefügt. Einzelheiten finden Sie unter Track-Ereignistypen.

Dieses Ereignis kann nicht abgebrochen werden und es wird nicht gebubbelt.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.

js
addEventListener("track", (event) => {});

ontrack = (event) => {};

Ereignistyp

Ereigniseigenschaften

Da RTCTrackEvent auf Event basiert, sind dessen Eigenschaften ebenfalls verfügbar.

receiver Nur lesbar

Der RTCRtpReceiver, der von dem hinzugefügten Track zur RTCPeerConnection verwendet wird.

streams Nur lesbar Optional

Ein Array von MediaStream-Objekten, die jeweils einen der Medienströme darstellen, zu denen der hinzugefügte track gehört. Standardmäßig ist das Array leer, was auf einen streamlosen Track hinweist.

track Nur lesbar

Der MediaStreamTrack, der zur Verbindung hinzugefügt wurde.

transceiver Nur lesbar

Der RTCRtpTransceiver, der vom neuen Track verwendet wird.

Beispiele

Dieses Beispiel zeigt Code, der eine neue RTCPeerConnection erstellt und dann einen neuen track-Ereignishandler hinzufügt.

js
pc = new RTCPeerConnection({
  iceServers: [
    {
      urls: "turn:fake.turn-server.url",
      username: "some username",
      credential: "some-password",
    },
  ],
});

pc.addEventListener(
  "track",
  (e) => {
    videoElement.srcObject = e.streams[0];
    hangupButton.disabled = false;
  },
  false,
);

Der Ereignishandler ordnet den ersten Stream des neuen Tracks einem bestehenden <video>-Element zu, das mit der Variablen videoElement identifiziert wird.

Sie können die Ereignishandlungsfunktion auch der ontrack-Eigenschaft zuweisen, anstatt addEventListener() zu verwenden.

js
pc.ontrack = (e) => {
  videoElement.srcObject = e.streams[0];
  hangupButton.disabled = false;
  return false;
};

Spezifikationen

Specification
WebRTC: Real-Time Communication in Browsers
# event-track

Browser-Kompatibilität

BCD tables only load in the browser