RTCPeerConnection: track event
BaselineWidely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Thetrack event is sent to theontrack event handler onRTCPeerConnections after a new track has been added to anRTCRtpReceiver which is part of the connection.
By the time this event is delivered, the new track has been fully added to the peer connection. SeeTrack event types for details.
This event is not cancellable and does not bubble.
Syntax
Use the event name in methods likeaddEventListener(), or set an event handler property.
addEventListener("track", (event) => { })ontrack = (event) => { }Event type
AnRTCTrackEvent. Inherits fromEvent.
Event properties
SinceRTCTrackEvent is based onEvent, its properties are also available.
receiverRead onlyThe
RTCRtpReceiverused by the track that's been added to theRTCPeerConnection.streamsRead onlyOptionalAn array of
MediaStreamobjects, each representing one of the media streams to which the addedtrackbelongs. By default, the array is empty, indicating a streamless track.trackRead onlyThe
MediaStreamTrackwhich has been added to the connection.transceiverRead onlyThe
RTCRtpTransceiverbeing used by the new track.
Examples
This example shows code that creates a newRTCPeerConnection, then adds a newtrack event handler.
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,);The event handler assigns the new track's first stream to an existing<video> element, identified using the variablevideoElement.
You can also assign the event handler function to theontrack property, rather than useaddEventListener().
pc.ontrack = (e) => { videoElement.srcObject = e.streams[0]; hangupButton.disabled = false; return false;};Specifications
| Specification |
|---|
| WebRTC: Real-Time Communication in Browsers # event-track |