blob: 84c2b49cfe657f576c4b2ff0c48ae430300eecaa (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
---
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>
{{Compat("api.RTCPeerConnection.ontrack")}}
<h2 id="参见">参见</h2>
<ul>
<li>{{event("track")}} 事件和它的类型 {{domxref("RTCTrackEvent")}}.</li>
</ul>
|
