RTCPeerConnection.ontrack

The RTCPeerConnection property ontrack is an EventHandler which specifies a function to be called when the track event occurs, indicating that a track has been added to the RTCPeerConnection. 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 = eventHandler;

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 Browsers
The definition of 'RTCPeerConnection.ontrack' in that specification.
Candidate Recommendation Initial specification.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic support
Experimental
Chrome Full support 56Edge Full support YesFirefox Full support 22IE ? Opera Full support 43
Notes
Full support 43
Notes
Notes Promise based version.
No support 37 — 43
Safari ? WebView Android Full support 56Chrome Android Full support 56Edge Mobile Full support YesFirefox Android Full support 44Opera Android Full support 43
Notes
Full support 43
Notes
Notes Promise based version.
No support 37 — 43
Safari iOS ? Samsung Internet Android Full support 6.0

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.

See also

Document Tags and Contributors

Contributors to this page: Sheppy, fscholz, matsub, jpmedley
Last updated by: Sheppy,