From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/api/mediadevices/index.html | 124 ++++++++++++++++++++++++++++ 1 file changed, 124 insertions(+) create mode 100644 files/zh-cn/web/api/mediadevices/index.html (limited to 'files/zh-cn/web/api/mediadevices/index.html') 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 +--- +
{{APIRef("Media Capture and Streams")}}
+ +

MediaDevices 接口提供访问连接媒体输入的设备，如照相机和麦克风，以及屏幕共享等。它可以使你取得任何硬件资源的媒体数据。

+ +

属性

+ +

从父类{{domxref("EventTarget")}}中继承的属性.

+ +

事件

+ +
+
{{domxref("MediaDevices.devicechange_event", "devicechange")}}
+
返回 {{event("devicechange")}} 事件类型的事件处理程序。
+ 也可通过 {{domxref("MediaDevices/ondevicechange", "ondevicechange")}} 访问
+
+ +

方法

+ +

从其父项继承方法 {{domxref("EventTarget")}}.

+ +
+
{{ domxref("MediaDevices.enumerateDevices()") }}
+
获取有关系统中可用的媒体输入和输出设备的一系列信息。
+
{{domxref("MediaDevices.getSupportedConstraints", "getSupportedConstraints()")}}
+
返回一个符合 {{domxref("MediaTrackSupportedConstraints")}} 的对象。该对象指明了 {{domxref("MediaStreamTrack")}} 接口支持的可约束的属性。查看 {{SectionOnPage("/en-US/docs/Web/API/Media_Streams_API", "Capabilities and constraints")}} 去了解更多相关信息。
+
{{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}}
+
提示用户选择显示器或显示器的一部分（例如窗口）以捕获为{{domxref("MediaStream")}} 以便共享或记录。返回解析为MediaStream的Promise。
+
{{ domxref("MediaDevices.getUserMedia()") }}
+
在用户通过提示允许的情况下，打开系统上的相机或屏幕共享和/或麦克风，并提供 {{domxref("MediaStream")}} 包含视频轨道和/或音频轨道的输入。
+
+
+ +

示例

+ +
'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 += '<p>' + msg + '</p>';
+  if (typeof error !== 'undefined') {
+    console.error(error);
+  }
+}
+ +

规范

+ + + + + + + + + + + + + + +
规范状态评论
{{SpecName('Media Capture', '#mediadevices', 'MediaDevices')}}{{Spec2('Media Capture')}}初始定义
+ +

浏览器兼容性

+ + + +

{{Compat("api.MediaDevices")}}

+ +

参见

+ + -- cgit v1.2.3-54-g00ecf