RTCPeerConnection.ontrack

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

实验性: 这是一项实验性技术
在将其用于生产之前,请仔细检查浏览器兼容性表格

RTCPeerConnection.ontrack 属性是一个事件处理器,此属性指定了在 RTCPeerConnection接口上触发 track 事件时调用的方法。该方法接收一个 RTCTrackEvent 类型的 event 对象,该 event 对象将在 MediaStreamTrack 被创建时或者是关联到已被添加到接收集合的 RTCRtpReceiver 对象中时被发送。

语法

RTCPeerConnection.ontrack = eventHandler;

参数

ontrack设置为你提供的一个输入RTCTrackEvent对象用于描述新的 track 将如何使用的方法。这一信息包含了代表新 track 的MediaStreamTrack对象、RTCRtpReceiver对象、RTCRtpTransceiver对象以及一个MediaStream对象列表,该对象列表表示该 track 是那个媒体流的一部分。

示例

本示例,从这篇文章的代码和视频调用的代码中,将传入的轨迹连接到将用于显示传入<video>元素。

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

在第一行代码中,我们的ontrack 事件处理器获取传入的第媒体流数组中的第一个,并赋值给 video 元素的srcobject 。这样媒体流就和页面中的 video 元素结合起来以便于呈现给用户。第二行代码简单启用了“挂断”按钮,用户可以使用它去断开呼叫。

规范

Specification
WebRTC: Real-Time Communication in Browsers
# event-track

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
track event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support