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/mediastreamtrack | |
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/mediastreamtrack')
5 files changed, 446 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/mediastreamtrack/getcapabilities/index.html b/files/zh-cn/web/api/mediastreamtrack/getcapabilities/index.html new file mode 100644 index 0000000000..cc44f48f13 --- /dev/null +++ b/files/zh-cn/web/api/mediastreamtrack/getcapabilities/index.html @@ -0,0 +1,52 @@ +--- +title: MediaStreamTrack.getCapabilities() +slug: Web/API/MediaStreamTrack/getCapabilities +tags: + - API + - Media Capture and Streams API + - Media Streams API + - MediaStreamTrack + - getCapabilities + - 媒体API +translation_of: Web/API/MediaStreamTrack/getCapabilities +--- +<p>{{APIRef("Media Capture and Streams")}}</p> + +<p><span class="seoSummary">{{domxref("MediaStreamTrack")}} 接口的 <strong><code>getCapabilities()</code></strong> 方法返回一个 {{domxref('MediaTrackCapabilities')}} 对象,此对象表示每个可调节属性的值或者范围,该特性依赖于平台和{{Glossary("user agent")}}.</span></p> + +<p>一旦你知道了浏览器的功能,你的脚本可以通过调用 {{domxref("MediaStreamTrack.applyConstraints", "applyConstraints()")}} 来请求配置为匹配理想或可接受的设置。参考{{SectionOnPage("/zh-CN/docs/Web/API/Media_Streams_API", "Capabilities and constraints")}} 以了解受限制属性的具体细节。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <em>capabilities</em> = <em>MediaStreamTrack</em>.getCapabilities();</pre> + +<h3 id="参数">参数</h3> + +<p>没有参数。</p> + +<h3 id="返回值"><span style="font-size: 1.714rem; letter-spacing: -0.021em; line-height: 1;">返回值</span></h3> + +<p>A {{domxref('MediaTrackCapabilities')}} object which specifies the value or range of values which are supported for each of the user agent's supported constrainable properties.</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Media Capture', '#dom-mediastreamtrack-getconstraints', 'getConstraints()')}}</td> + <td>{{Spec2('Media Capture')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.MediaStreamTrack.getCapabilities")}}</p> diff --git a/files/zh-cn/web/api/mediastreamtrack/getconstraints/index.html b/files/zh-cn/web/api/mediastreamtrack/getconstraints/index.html new file mode 100644 index 0000000000..86526e0a60 --- /dev/null +++ b/files/zh-cn/web/api/mediastreamtrack/getconstraints/index.html @@ -0,0 +1,66 @@ +--- +title: MediaStreamTrack.getConstraints() +slug: Web/API/MediaStreamTrack/getConstraints +tags: + - API + - Medhod + - Media Capture and Streams + - Media Stream Track + - Media Streams API + - getConstraints +translation_of: Web/API/MediaStreamTrack/getConstraints +--- +<p><font><font>{{APIRef("Media Capture and Streams")}}</font></font></p> + +<p><span class="seoSummary"><font><font>的</font></font><strong><code>getConstraints()</code></strong><font><font>所述{{domxref("MediaStreamTrack")}}的方法接口返回{{domxref("MediaTrackConstraints")}}包含集使用现有呼叫最近的轨道建立约束来{{domxref("MediaStreamTrack.applyConstraints", "applyConstraints()")}}。</font><font>这些约束指示网站或应用程序指定的值和值范围对于包含的可约束属性是必需的或可接受的。</font></font></span></p> + +<p><font><font>约束条件可以用来确保媒体符合你喜欢的某些指导方针。</font><font>例如,您可能更喜欢高清视频,但要求帧率略低,以帮助保持足够低的数据速率而不会使网络负担过重。</font><font>约束还可以指定理想和/或可接受的尺寸或尺寸范围。</font><font>有关</font><font>如何使用可约束属性的详细信息</font></font><a href="/en-US/docs/Web/API/Media_Streams_API/Constraints"><font><font>,</font></font></a><font><font>请参阅</font><a href="/en-US/docs/Web/API/Media_Streams_API/Constraints"><font>能力,约束和设置</font></a><font>。</font></font></p> + +<h2 id="句法"><font><font>句法</font></font></h2> + +<pre class="syntaxbox"><font><font>var </font></font><em><font><font>constraints</font></font></em><font><font> = </font></font><em><font><font>MediaStreamTrack</font></font></em><font><font>.getConstraints();</font></font></pre> + +<h3 id="参数"><font><font>参数</font></font></h3> + +<p><font><font>没有。</font></font></p> + +<h3 id="返回值"><span style="font-size: 1.714rem; letter-spacing: -0.021em; line-height: 1;"><font><font>返回值</font></font></span></h3> + +<p><font><font>指示使用{{domxref("MediaStreamTrack.applyConstraints", "applyConstraints()")}}最近设置的网站或应用程序的可约束属性的{{domxref('MediaTrackConstraints')}}对象。</font><font>返回对象中的属性按照与设置时相同的顺序列出,并且未包含未由网站或应用专门设置的属性。</font></font></p> + +<div class="note"> +<p><font><font>返回的一组约束条件不一定描述媒体的实际状态; </font><font>如果任何约束无法满足,它们仍然包含在网站代码最初设置的返回对象中。</font><font>要获得所有可约束属性的当前活动设置,您应该调用{{domxref("MediaStreamTrack.getSettings", "getSettings()")}}。</font></font></p> +</div> + +<h2 id="例"><font><font>例</font></font></h2> + +<p><font><font>本示例获取当前轨道约束,设置{{domxref("MediaTrackConstraints.facingMode", "facingMode")}},并应用更新的约束。</font></font></p> + +<pre class="brush: js"><font><font>function switchCameras(track,camera){</font></font><font><font> + let constraints = track.getConstraints();</font></font><font><font> + constraints.facingMode = camera;</font></font><font><font> + track.applyConstraints(约束);</font></font><font><font> +}</font></font></pre> + +<h2 id="产品规格"><font><font>产品规格</font></font></h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col"><font><font>规范</font></font></th> + <th scope="col"><font><font>状态</font></font></th> + <th scope="col"><font><font>评论</font></font></th> + </tr> + <tr> + <td><font><font>{{SpecName('Media Capture', '#dom-mediastreamtrack-getconstraints', 'getConstraints()')}}</font></font></td> + <td><font><font>{{Spec2('Media Capture')}}</font></font></td> + <td><font><font>初始定义。</font></font></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性"><font><font>浏览器兼容性</font></font></h2> + +<div class="hidden"><font><font>此页面上的兼容性表格由结构化数据生成。</font><font>如果您想为数据做出贡献,请查看</font></font><a href="https://github.com/mdn/browser-compat-data"><font><font>https://github.com/mdn/browser-compat-data</font></font></a><font><font>并向我们发送拉取请求。</font></font></div> + +<p><font><font>{{COMPAT( "api.MediaStreamTrack.getConstraints")}}</font></font></p> diff --git a/files/zh-cn/web/api/mediastreamtrack/index.html b/files/zh-cn/web/api/mediastreamtrack/index.html new file mode 100644 index 0000000000..28db2b0b25 --- /dev/null +++ b/files/zh-cn/web/api/mediastreamtrack/index.html @@ -0,0 +1,181 @@ +--- +title: MediaStreamTrack +slug: Web/API/MediaStreamTrack +translation_of: Web/API/MediaStreamTrack +--- +<div>{{APIRef("WebRTC")}}</div> + +<h2 id="摘要">摘要</h2> + +<p><strong><code>MediaStreamTrack接口在User Agent中表示一段媒体源,比如音轨或视频。</code></strong></p> + +<h2 id="属性">属性</h2> + +<dl> + <dt>{{domxref("MediaStreamTrack.enabled")}}</dt> + <dd>布尔值,为true时表示轨道有效,并且可以被渲染。为false时表示轨道失效,只能被渲染为静音或黑屏。如果该轨道连接中断,该值还是可以被改变但不会有任何效果了。</dd> + <dt>{{domxref("MediaStreamTrack.id")}} {{readonlyInline}}</dt> + <dd>返回一个由浏览器产生的{{domxref("DOMString")}}类型的GUID值,作为这个轨道的唯一标识值。</dd> + <dt>{{domxref("MediaStreamTrack.kind")}} {{readonlyInline}}</dt> + <dd>返回一个{{domxref("DOMString")}}类型的值。如果为“audio”表示轨道为音频轨道,为“video”则为视频轨道。如果该轨道从它的源上分离,这个值也不会改变。</dd> + <dt>{{domxref("MediaStreamTrack.label")}} {{readonlyInline}}</dt> + <dd>返回一个{{domxref("DOMString")}}类型。内容为一个用户代理指定的标签,来标识该轨道的来源,比如“internal microphone”。该字符串可以为空,并且在没有源与这个轨道连接的情况下会一直为空。当该轨道从它的源上分离时,这个值也不会改变。</dd> + <dt>{{domxref("MediaStreamTrack.muted")}} {{readonlyInline}}</dt> + <dd>返回一个布尔类型的值,为true时表示轨道是静音,其它为false。</dd> + <dt>{{domxref("MediaStreamTrack.readonly")}} {{readonlyInline}}</dt> + <dd>返回一个布尔类型的值,为true时表示该轨道是只读的,比如视频文件源或一个被设置为不能修改的摄像头源,或则为false。</dd> + <dt>{{domxref("MediaStreamTrack.readyState")}} {{readonlyInline}}</dt> + <dd>返回枚举类型的值,表示轨道的当前状态。该枚举值为以下中的一个: + <ul> + <li>"live"表示当前输入已经连接并且在尽力提供实时数据。在这种情况下,输出数据可以通过操作MediaStreamTrack.enabled属性进行开关。</li> + <li>“ended”表示这个输出连接没有更多的数据了,而且也不会提供更多的数据了。</li> + </ul> + </dd> + <dt>{{domxref("MediaStreamTrack.remote")}} {{readonlyInline}}</dt> + <dd>返回布尔值类型,当为true时表示数据是通过{{domxref("RTCPeerConnection")}}提供的,否则为false。</dd> +</dl> + +<h3 id="事件处理">事件处理</h3> + +<dl> + <dt>{{domxref("MediaStreamTrack.onstarted")}}</dt> + <dd>这是{{event("started")}}事件在这个对象上被触发时调用的事件处理器{{domxref("EventHandler")}},这时一个新的{{domxref("MediaStreamTrack")}}对象被添加到轨道源上。</dd> + <dt>{{domxref("MediaStreamTrack.onmute")}}</dt> + <dd>这是{{event("mute")}}事件在这个对象被触发时调用的事件处理器{{domxref("EventHandler")}},这时这个流被中断。</dd> + <dt>{{domxref("MediaStreamTrack.onunmute")}}</dt> + <dd>这是{{event("unmute")}}事件在这个对象上被触发时调用的事件处理器{{domxref("EventHandler")}},未实现。</dd> + <dt>{{domxref("MediaStreamTrack.onoverconstrained")}}</dt> + <dd>这是{{event("overconstrained")}}事件在这个对象上被触发时调用的事件处理器{{event("overconstrained")}},未实现。</dd> + <dt>{{domxref("MediaStreamTrack.oneended")}}</dt> + <dd>这是{{event("ended_(MediaStream)", "ended")}}事件在这个对象被触发时调用的事件处理器{{domxref("EventHandler")}},未实现。</dd> +</dl> + +<h2 id="方法">方法</h2> + +<dl> + <dt>{{domxref("MediaStreamTrack.getConstraints()")}}</dt> + <dd> </dd> + <dt>{{domxref("MediaStreamTrack.applyConstraints()")}}</dt> + <dd> </dd> + <dt>{{domxref("MediaStreamTrack.getSettings()")}}</dt> + <dd> </dd> + <dt>{{domxref("MediaStreamTrack.getCapabilities()")}}</dt> + <dd> </dd> + <dt>{{domxref("MediaStreamTrack.clone()")}}</dt> + <dd> </dd> + <dt>{{domxref("MediaStreamTrack.stop()")}}</dt> + <dd>停止播放轨道对应的源,源与轨道将脱离关联,同时轨道状态将设为“ended”。</dd> +</dl> + +<h2 id="技术规范">技术规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">说明</th> + </tr> + <tr> + <td>{{SpecName('Media Capture', '#mediastreamtrack', 'MediaStreamTrack')}}</td> + <td>{{Spec2('Media Capture')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器支持情况">浏览器支持情况</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>stop()</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(34)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>muted</code>, <code>onmuted</code>, <code>onunmuted</code>, <code>readonly</code>, <code>readyState</code>, <code>remote</code>, <code>onstarted</code>, <code>onended</code>, <code>onoverconstrained</code>, <code>appendConstraint()</code>, <code>applyConstraints()</code>, <code>constraints()</code>, <code>getConstraints()</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td> + <table class="compat-table"> + <tbody> + <tr> + <td><code>stop()</code></td> + </tr> + </tbody> + </table> + </td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(34)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>muted</code>, <code>onmuted</code>, <code>onunmuted</code>, <code>readonly</code>, <code>readyState</code>, <code>remote</code>, <code>onstarted</code>, <code>onended</code>, <code>onoverconstrained</code>, <code>appendConstraint()</code>, <code>applyConstraints()</code>, <code>constraints()</code>, <code>getConstraints()</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="相关内容">相关内容</h2> + +<ul> + <li><a href="/en-US/docs/WebRTC/MediaStream_API" title="/en-US/docs/WebRTC/MediaStream_API">Using the MediaStream API</a></li> +</ul> diff --git a/files/zh-cn/web/api/mediastreamtrack/readystate/index.html b/files/zh-cn/web/api/mediastreamtrack/readystate/index.html new file mode 100644 index 0000000000..4a0aa377b0 --- /dev/null +++ b/files/zh-cn/web/api/mediastreamtrack/readystate/index.html @@ -0,0 +1,61 @@ +--- +title: MediaStreamTrack.readyState +slug: Web/API/MediaStreamTrack/readyState +tags: + - API + - 参考 + - 只读 + - 媒体捕获和流 + - 媒体流追踪 + - 属性 +translation_of: Web/API/MediaStreamTrack/readyState +--- +<div>{{APIRef("Media Capture and Streams")}}</div> + +<p><strong><code>MediaStreamTrack.readyState</code></strong>只读属性返回一个枚举的值,该值给出了轨道的状态。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate">const <em>state</em> = <em>track</em>.readyState</pre> + +<h3 id="值">值</h3> + +<p>它采用以下值之一:</p> + +<ul> + <li><code>"live"</code>表示输入已连接,并尽最大努力提供实时数据。 在这种情况下,可以使用{{domxref("MediaStreamTrack.enabled")}}属性打开或关闭数据输出。</li> + <li><code>"ended"</code>表示输入不再提供任何数据,也永远不会提供新数据。</li> +</ul> + +<h2 id="Specifications" name="Specifications">技术指标</h2> + +<table class="standard-table" style="height: 49px; width: 1000px;"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('Media Capture', '#dom-mediastreamtrack-readystate', 'MediaStreamTrack.readyState') }}</td> + <td>{{ Spec2('Media Capture') }}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden">此页面上的兼容性表是根据结构化数据生成的。 如果您想贡献数据,请查看https://github.com/mdn/browser-compat-data并向我们发送请求请求。</div> + +<p>{{Compat("api.MediaStreamTrack.readyState")}}</p> + +<h2 id="看看别的">看看别的</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Media_Streams_API">Media Stream API</a></li> + <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a></li> + <li>{{domxref("MediaStreamTrack.onended")}}</li> +</ul> diff --git a/files/zh-cn/web/api/mediastreamtrack/stop/index.html b/files/zh-cn/web/api/mediastreamtrack/stop/index.html new file mode 100644 index 0000000000..f4372c5d79 --- /dev/null +++ b/files/zh-cn/web/api/mediastreamtrack/stop/index.html @@ -0,0 +1,86 @@ +--- +title: MediaStreamTrack.stop() +slug: Web/API/MediaStreamTrack/stop +tags: + - API + - Media + - WebRTC + - 停止 + - 参考 + - 方法 + - 流 + - 视频捕获和流API + - 视频流API + - 视频流跟踪 +translation_of: Web/API/MediaStreamTrack/stop +--- +<div>{{APIRef("Media Capture and Streams")}}</div> + +<p><strong><code>MediaStreamTrack.stop()</code></strong>方法停止跟踪。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate"><em>track</em>.stop() +</pre> + +<h2 id="说明">说明</h2> + +<p>调用<code>stop()</code>告诉{{glossary("user agent")}} ,{{domxref("MediaStreamTrack")}}不再需要轨道的来源,无论该来源是什么,包括文件,网络流,本地摄像机或麦克风。由于多个音轨可能使用同一音源(例如,如果两个选项卡使用设备的麦克风),则音源本身并不一定会立即停止。 而是从轨道取消关联,并且停止跟踪对象。 一旦没有媒体轨道正在使用源,则实际上可能会完全停止该源。</p> + +<p>调用<code>stop()</code>之后,{{domxref("MediaStreamTrack.readyState", "readyState")}}属性立即设置为<code>ended</code>。</p> + +<h2 id="示例">示例</h2> + +<h3 id="停止视频流">停止视频流</h3> + +<p>在此示例中,我们看到一个函数,该函数通过在给定{{HTMLElement("video")}}的每个轨道上调用<code>stop()</code>来停止流式视频。</p> + +<pre class="brush: js notranslate">function stopStreamedVideo(videoElem) { + const stream = videoElem.srcObject; + const tracks = stream.getTracks(); + + tracks.forEach(function(track) { + track.stop(); + }); + + videoElem.srcObject = null; +}</pre> + +<p>这是通过从其{{domxref("HTMLMediaElement.srcObject", "srcObject")}} 属性获得视频元素的流来实现的。 然后,通过调用其{{domxref("MediaStream.getTracks", "getTracks()")}}方法来获取流的轨道列表。 从那里开始,剩下要做的就是使用{{jsxref("Array.forEach", "forEach()")}}遍历轨道列表并调用每个轨道的<code>stop()</code>方法。</p> + +<p>最后,将<code>srcObject</code>设置为<code>null</code>以切断与{{domxref("MediaStream")}} 对象的链接,以便将其释放。</p> + +<p>Finally, <code>srcObject</code> is set to <code>null</code> to sever the link to the {{domxref("MediaStream")}} object so it can be released.</p> + +<h2 id="技术参数">技术参数</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('Media Capture', '#dom-mediastreamtrack-stop', 'MediaStreamTrack.stop()') }}</td> + <td>{{ Spec2('Media Capture') }}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden">此页面上的兼容性表是根据结构化数据生成的。 如果您想贡献数据,请查看https://github.com/mdn/browser-compat-data并向我们发送请求请求。</div> + +<p>{{Compat("api.MediaStreamTrack.stop")}}</p> + +<h2 id="看看别的">看看别的</h2> + +<ul> + <li>{{domxref("MediaStreamTrack")}},它所属的接口。</li> + <li>{{domxref("MediaStreamTrack.readyState")}}</li> + <li>{{event("ended")}}</li> +</ul> |