aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/web/api/mediadevices/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/zh-cn/web/api/mediadevices/index.html')
-rw-r--r--files/zh-cn/web/api/mediadevices/index.html124
1 files changed, 124 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/mediadevices/index.html b/files/zh-cn/web/api/mediadevices/index.html
new file mode 100644
index 0000000000..19a922ce2d
--- /dev/null
+++ b/files/zh-cn/web/api/mediadevices/index.html
@@ -0,0 +1,124 @@
+---
+title: MediaDevices
+slug: Web/API/MediaDevices
+tags:
+ - API
+ - Experimental
+ - Interface
+ - Media
+ - MediaDevices
+ - NeedsTranslation
+ - TopicStub
+ - WebRTC
+ - 媒体
+ - 媒体流
+ - 媒体设备
+translation_of: Web/API/MediaDevices
+---
+<div>{{APIRef("Media Capture and Streams")}}</div>
+
+<p><span class="seoSummary"><strong><code>MediaDevices</code></strong> 接口提供访问连接媒体输入的设备,如照相机和麦克风,以及屏幕共享等。它可以使你取得任何硬件资源的媒体数据。</span></p>
+
+<h2 id="属性">属性</h2>
+
+<p><em>从父类{{domxref("EventTarget")}}中继承的属性.</em></p>
+
+<h2 id="事件">事件</h2>
+
+<dl>
+ <dt>{{domxref("MediaDevices.devicechange_event", "devicechange")}}</dt>
+ <dd>返回 {{event("devicechange")}} 事件类型的事件处理程序。<br>
+ 也可通过 {{domxref("MediaDevices/ondevicechange", "ondevicechange")}} 访问</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<p><em>从其父项继承方法 {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{ domxref("MediaDevices.enumerateDevices()") }}</dt>
+ <dd>获取有关系统中可用的媒体输入和输出设备的一系列信息。</dd>
+ <dt>{{domxref("MediaDevices.getSupportedConstraints", "getSupportedConstraints()")}}</dt>
+ <dd>返回一个符合 {{domxref("MediaTrackSupportedConstraints")}} 的对象。该对象指明了 {{domxref("MediaStreamTrack")}} 接口支持的可约束的属性。查看 {{SectionOnPage("/en-US/docs/Web/API/Media_Streams_API", "Capabilities and constraints")}} 去了解更多相关信息。</dd>
+ <dt>{{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}}</dt>
+ <dd>提示用户选择显示器或显示器的一部分(例如窗口)以捕获为{{domxref("MediaStream")}} 以便共享或记录。返回解析为MediaStream的Promise。</dd>
+ <dt>{{ domxref("MediaDevices.getUserMedia()") }}</dt>
+ <dd>在用户通过提示允许的情况下,打开系统上的相机或屏幕共享和/或麦克风,并提供 {{domxref("MediaStream")}} 包含视频轨道和/或音频轨道的输入。</dd>
+ <dt></dt>
+</dl>
+
+<h2 id="示例">示例</h2>
+
+<pre class="brush:js notranslate">'use strict';
+
+// Put variables in global scope to make them available to the browser console.
+var video = document.querySelector('video');
+var constraints = window.constraints = {
+ audio: false,
+ video: true
+};
+var errorElement = document.querySelector('#errorMsg');
+
+navigator.mediaDevices.getUserMedia(constraints)
+.then(function(stream) {
+ var videoTracks = stream.getVideoTracks();
+ console.log('Got stream with constraints:', constraints);
+ console.log('Using video device: ' + videoTracks[0].label);
+ stream.onended = function() {
+ console.log('Stream ended');
+ };
+ window.stream = stream; // make variable available to browser console
+ video.srcObject = stream;
+})
+.catch(function(error) {
+ if (error.name === 'ConstraintNotSatisfiedError') {
+ errorMsg('The resolution ' + constraints.video.width.exact + 'x' +
+ constraints.video.width.exact + ' px is not supported by your device.');
+ } else if (error.name === 'PermissionDeniedError') {
+ errorMsg('Permissions have not been granted to use your camera and ' +
+ 'microphone, you need to allow the page access to your devices in ' +
+ 'order for the demo to work.');
+ }
+ errorMsg('getUserMedia error: ' + error.name, error);
+});
+
+function errorMsg(msg, error) {
+ errorElement.innerHTML += '&lt;p&gt;' + msg + '&lt;/p&gt;';
+ if (typeof error !== 'undefined') {
+ console.error(error);
+ }
+}</pre>
+
+<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', '#mediadevices', 'MediaDevices')}}</td>
+ <td>{{Spec2('Media Capture')}}</td>
+ <td>初始定义</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.MediaDevices")}}</p>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li><a href="/zh-CN/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a>: The API this interface is part of.</li>
+ <li><a href="/zh-CN/docs/Web/API/Screen_Capture_API">Screen Capture API</a>: The API defining the {{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}} method.</li>
+ <li><a href="/zh-CN/docs/Web/API/WebRTC_API">WebRTC API</a></li>
+ <li>{{domxref("Navigator.mediaDevices")}}: Returns a reference to a <code>MediaDevices</code> object that can be used to access devices.</li>
+ <li><a href="https://github.com/chrisjohndigital/CameraCaptureJS">CameraCaptureJS:</a> HTML5 video capture and playback using <code>MediaDevices</code> and the MediaStream Recording API (<a href="https://github.com/chrisjohndigital/CameraCaptureJS">source on GitHub</a>)</li>
+ <li><a href="https://github.com/chrisjohndigital/OpenLang">OpenLang</a>: HTML5 video language lab web application using <code>MediaDevices</code> and the MediaStream Recording API for video recording (<a href="https://github.com/chrisjohndigital/OpenLang">source on GitHub</a>)</li>
+</ul>