---
title: RTCPeerConnection.ontrack
slug: Web/API/RTCPeerConnection/ontrack
translation_of: Web/API/RTCPeerConnection/ontrack
---
<p>{{APIRef("WebRTC")}}{{SeeCompatTable}}<code><strong>RTCPeerConnection.ontrack</strong></code> 属性是一个 {{event("Event_handlers", "event handler")}} 此属性指定了在{{domxref("RTCPeerConnection")}}接口上触发 {{event("track")}} 事件时调用的方法。该方法接收一个{{domxref("RTCTrackEvent")}}类型的event对象，该event对象将在{{domxref("MediaStreamTrack")}}被创建时或者是关联到已被添加到接收集合的{{domxref("RTCRtpReceiver")}}对象中时被发送。</p>

<h2 id="语法">语法</h2>

<pre class="syntaxbox"><em>RTCPeerConnection</em>.ontrack = <em>eventHandler</em>;
</pre>

<h3 id="参数">参数</h3>

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

<h2 id="示例">示例</h2>

<p>本示例，从这篇文章的代码和视频调用的代码中，将传入的轨迹连接到将用于显示传入{{HTMLElement("video")}}元素。</p>

<pre class="brush: js">pc.ontrack = function(event) {
  document.getElementById("received_video").srcObject = event.streams[0];
  document.getElementById("hangup-button").disabled = false;
};
</pre>

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

<h2 id="说明">说明</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">说明</th>
   <th scope="col">状态</th>
   <th scope="col">注释</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('WebRTC 1.0', '#widl-RTCPeerConnection-ontrack', 'RTCPeerConnection.ontrack')}}</td>
   <td>{{Spec2('WebRTC 1.0')}}</td>
   <td>初始规范</td>
  </tr>
 </tbody>
</table>

<h2 id="各浏览器兼容性">各浏览器兼容性</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>特性</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoDesktop(46)}}<sup>[1]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android Webview</th>
   <th>Chrome for Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoDesktop(46)}}<sup>[1]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] 在Firefox 45中引入了<code>onaddtrack</code>;在Firefox 46中重命名为<code>ontrack</code></p>

<h2 id="参见">参见</h2>

<ul>
 <li>{{event("track")}} 事件和它的类型 {{domxref("RTCTrackEvent")}}.</li>
</ul>