diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/web/api/rtctrackevent | |
parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip |
initial commit
Diffstat (limited to 'files/zh-cn/web/api/rtctrackevent')
-rw-r--r-- | files/zh-cn/web/api/rtctrackevent/index.html | 95 | ||||
-rw-r--r-- | files/zh-cn/web/api/rtctrackevent/rtctrackevent/index.html | 55 |
2 files changed, 150 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/rtctrackevent/index.html b/files/zh-cn/web/api/rtctrackevent/index.html new file mode 100644 index 0000000000..85143fcec1 --- /dev/null +++ b/files/zh-cn/web/api/rtctrackevent/index.html @@ -0,0 +1,95 @@ +--- +title: RTCTrackEvent +slug: Web/API/RTCTrackEvent +tags: + - API + - Interface + - Media + - NeedsTranslation + - RTCTrackEvent + - Reference + - TopicStub + - WebRTC + - WebRTC API + - events + - rtc + - track +translation_of: Web/API/RTCTrackEvent +--- +<div>{{APIRef("WebRTC")}}</div> + +<p><span class="seoSummary">The <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a> interface <code><strong>RTCTrackEvent</strong></code> represents the {{event("track")}} event, which is sent when a new {{domxref("MediaStreamTrack")}} is added to an {{domxref("RTCRtpReceiver")}} which is part of the {{domxref("RTCPeerConnection")}}.</span> The target is the <code>RTCPeerConnection</code> object to which the track is being added.</p> + +<p>This event is sent by the WebRTC layer to the web site or application, so you will not typically need to instantiate an <code>RTCTrackEvent</code> yourself.</p> + +<h2 id="Constructor">Constructor</h2> + +<dl> + <dt>{{domxref("RTCTrackEvent.RTCTrackEvent", "RTCTrackEvent()")}}</dt> + <dd>Creates and returns a new <code>RTCTrackEvent</code> object, initialized with properties taken from the specified {{domxref("RTCTrackEventInit")}} dictionary. You will probably not need to create new track events yourself, since they're typically created by the WebRTC infrastructure and sent to the connection's {{domxref("RTCPeerConnection.ontrack", "ontrack")}} event handler.</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<p><em>Since <code>RTCTrackEvent</code> is based on {{domxref("Event")}}, its properties are also available.</em></p> + +<dl> + <dt>{{domxref("RTCTrackEvent.receiver", "receiver")}} {{ReadOnlyInline}}</dt> + <dd>The {{domxref("RTCRtpReceiver")}} used by the track that's been added to the <code>RTCPeerConnection</code>.</dd> + <dt>{{domxref("RTCTrackEvent.streams", "streams")}} {{ReadOnlyInline}} {{optional_inline}}</dt> + <dd>An array of {{domxref("MediaStream")}} objects, each representing one of the media streams to which the added {{domxref("RTCTrackEvent.track", "track")}} belongs. By default, the array is empty, indicating a streamless track.</dd> + <dt>{{domxref("RTCTrackEvent.track", "track")}} {{ReadOnlyInline}}</dt> + <dd>The {{domxref("MediaStreamTrack")}} which has been added to the connection.</dd> + <dt>{{domxref("RTCTrackEvent.transceiver", "transceiver")}} {{ReadOnlyInline}}</dt> + <dd>The {{domxref("RTCRtpTransceiver")}} being used by the new track.</dd> +</dl> + +<h2 id="Track_event_types">Track event types</h2> + +<p>There is only one type of track event.</p> + +<h3 id="track"><code>track</code></h3> + +<p>The {{domxref("RTCPeerConnection.track_event", "track")}} event is sent to the {{domxref("RTCPeerConnection")}} when a new track has been added to the connection. By the time the <code>track</code> event is delivered to the <code>RTCPeerConnection</code>'s {{domxref("RTCPeerConnection.ontrack", "ontrack")}} handler, the new media has completed its negotiation for a specific {{domxref("RTCRtpReceiver")}} (which is specified by the event's {{domxref("RTCTrackEvent.receiver", "receiver")}} property).</p> + +<p>In addition, the {{domxref("MediaStreamTrack")}} specified by the receiver's {{domxref("RTCRtpReceiver.track", "track")}} is the same one specified by the event's {{domxref("RTCTrackEvent.track", "track")}}, and the track has been added to any associated remote {{domxref("MediaStream")}} objects.</p> + +<p>You can add a <code>track</code> event listener to be notified when the new track is available so that you can, for example, attach its media to a {{HTMLElement("video")}} element, using either {{domxref("EventTarget.addEventListener", "RTCPeerConnection.addEventListener()")}} or the <code>ontrack</code> event handler property.</p> + +<div class="note"> +<p><strong>Note:</strong> It may be helpful to keep in mind that you receive the <code>track</code> event when a new inbound track has been added to your connection, and you call {{domxref("RTCPeerConnection.addTrack", "addTrack()")}} to add a track to the far end of the connection, thereby triggering a <code>track</code> event on the remote peer.</p> +</div> + +<h2 id="Example">Example</h2> + +<p>This simple example creates an event listener for the {{domxref("RTCPeerConnection.track_event", "track")}} event which sets the {{domxref("HTMLMediaElement.srcObject", "srcObject")}} of the {{HTMLElement("video")}} element with the ID <code>videobox</code> to the first stream in the list passed in the event's {{domxref("RTCTrackEvent.streams", "streams")}} array.</p> + +<pre class="brush: js notranslate">peerConnection.addEventListener("track", e => { + let videoElement = document.getElementById("videobox"); + videoElement.srcObject = e.streams[0]; +}, false);</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('WebRTC 1.0', '#dom-rtctrackevent', 'RTCTrackEvent')}}</td> + <td>{{Spec2('WebRTC 1.0')}}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.RTCTrackEvent")}}</p> diff --git a/files/zh-cn/web/api/rtctrackevent/rtctrackevent/index.html b/files/zh-cn/web/api/rtctrackevent/rtctrackevent/index.html new file mode 100644 index 0000000000..abebd2175f --- /dev/null +++ b/files/zh-cn/web/api/rtctrackevent/rtctrackevent/index.html @@ -0,0 +1,55 @@ +--- +title: RTCTrackEvent() +slug: Web/API/RTCTrackEvent/RTCTrackEvent +translation_of: Web/API/RTCTrackEvent/RTCTrackEvent +--- +<div>{{APIRef("WebRTC")}}</div> + +<p><span class="seoSummary">The <strong><code>RTCTrackEvent()</code></strong> constructor creates and returns a new {{domxref("RTCTrackEvent")}} object, configured to describe the track which has been added to the {{domxref("RTCPeerConnection")}}.</span></p> + +<p>In general, you won't need to use this constructor, as <code>RTCTrackEvent</code> objects are created by WebRTC and delivered to your <code>RTCPeerConnector</code>'s {{domxref("RTCPeerConnection.ontrack", "ontrack")}} event handler as appropriate.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate"><em>trackEvent</em> = new RTCTrackEvent(<em>eventInfo</em>);</pre> + +<h3 id="Parameters">Parameters</h3> + +<div id="property-list"> +<dl> + <dt><code>eventInfo</code></dt> + <dd>An object based on the {{domxref("RTCTrackEventInit")}} dictionary, providing information about the track which has been added to the {{domxref("RTCPeerConnection")}}. This object has the following properties:<br> + {{page("/en-US/docs/Web/API/RTCTrackEventInit", "property-list")}}</dd> +</dl> +</div> + +<h3 id="Return_value">Return value</h3> + +<p>A new {{domxref("RTCTrackEvent")}} describing a track which has been added to the <code>RTCPeerConnection</code>.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('WebRTC 1.0', '#constructors-3', 'RTCTrackEvent()')}}</td> + <td>{{Spec2('WebRTC 1.0')}}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.RTCTrackEvent.RTCTrackEvent")}}</p> + +<p> </p> |