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.

Bubbles Yes
Cancelable No
Interface RTCTrackEvent
Event handler property ontrack

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

Examples

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

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().

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

Specifications

Specification Status Comment
WebRTC 1.0: Real-time Communication Between Browsers
The definition of 'track' in that specification.
Candidate Recommendation Initial specification.

Browser compatibility

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
track eventChrome Full support 64Edge Full support ≤18Firefox Full support 22IE No support NoOpera Full support 43Safari Full support 11WebView Android Full support 64Chrome Android Full support 64Firefox Android Full support 44Opera Android Full support 43Safari iOS ? Samsung Internet Android Full support 6.0

Legend

Full support
Full support
No support
No support
Compatibility unknown
Compatibility unknown