W3cubDocs

/Web APIs

RTCPeerConnection: track event

The track event is sent to the ontrack event handler on RTCPeerConnections after a new track has been added to an RTCRtpReceiver which is part of the connection.

By the time this event is delivered, the new track has been fully added to the peer connection. See Track event types for details.

This event is not cancellable and does not bubble.

Syntax

Use the event name in methods like addEventListener(), or set an event handler property.

js

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

ontrack = (event) => {};

Event type

Event properties

Since RTCTrackEvent is based on Event, its properties are also available.

receiver Read only

The RTCRtpReceiver used by the track that's been added to the RTCPeerConnection.

streams Read only Optional

An array of MediaStream objects, each representing one of the media streams to which the added track belongs. By default, the array is empty, indicating a streamless track.

track Read only

The MediaStreamTrack which has been added to the connection.

transceiver Read only

The RTCRtpTransceiver being used by the new track.

Examples

This example shows code that creates a new RTCPeerConnection, then adds a new track event handler.

js

pc = new RTCPeerConnection({
  iceServers: [
    {
      urls: "turn:fake.turnserver.url",
      username: "someusername",
      credential: "somepassword",
    },
  ],
});

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

The event handler assigns the new track's first stream to an existing <video> element, identified using the variable videoElement.

You can also assign the event handler function to the ontrack property, rather than use addEventListener().

js

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

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
track_event 64 79 22 No 43 11 64 64 24 43 11 6.0

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/track_event