blob: b92a83228c2678fe5043bbf0bf0927fe71534eb1 (
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
|
---
title: RTCPeerConnection.ontrack
slug: Web/API/RTCPeerConnection/ontrack
translation_of: Web/API/RTCPeerConnection/ontrack
---
<p>{{APIRef("WebRTC")}}{{SeeCompatTable}}<code><strong>RTCPeerConnection.ontrack</strong></code> 属性是一个 {{domxref("EventHandler")}} 此属性指定了在{{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>
|
