RTCPeerConnection.ontrack

This article needs a technical review. How you can help.

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

The RTCPeerConnection.ontrack property is an EventHandler which specifies a function to be called when the track event occurs on an RTCPeerConnection interface. The function receives as input the event object, of type RTCTrackEvent; this event is sent when a new incoming MediaStreamTrack has been created and associated with an RTCRtpReceiver object which has been added to the set of receivers on connection.

Syntax

RTCPeerConnection.ontrack = errorHandler;

Value

Set ontrack to be a function you provide that accepts as input a RTCTrackEvent object describing the new track and how it's being used. This information includes the MediaStreamTrack object representing the new track, the RTCRtpReceiver and RTCRtpTransceiver, and a list of MediaStream objects which indicates which stream or streams the track is part of..

Example

This example, taken from the code for the article Signaling and video calling, connects the incoming track to the <video> element which will be used to display the incoming video.

pc.ontrack = function(event) {
  document.getElementById("received_video").srcObject = event.streams[0];
  document.getElementById("hangup-button").disabled = false;
};

The first line of our ontrack event handler takes the first stream in the incoming track and sets the srcobject attribute to that. This connects that stream of video to the element so that it begins to be presented to the user. The second line of code simply enables a "hang up" button, which the user can use to disconnect from the call.

Specifications

Specification Status Comment
WebRTC 1.0: Real-time Communication Between Browser
The definition of 'RTCPeerConnection.ontrack' in that specification.
Working Draft Initial specification.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support No support 46 (46)[1] No support ? ?
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support No support No support 46 (46)[1] No support ? ?

[1] Introduced in Firefox 45 as onaddtrack; renamed to ontrack in Firefox 46

See also

Document Tags and Contributors

 Contributors to this page: Sheppy
 Last updated by: Sheppy,