MediaDevices

基线 广泛可用

此功能已经相当成熟，并且可以在许多设备和浏览器版本中使用。它自以下时间起在各浏览器中可用： 2017 年 9 月.

安全上下文：此功能仅在安全上下文（HTTPS）中可用，且仅在部分或全部支持的浏览器中可用。

MediaDevices是媒体捕获和流 API的一个接口，它提供了对连接的媒体输入设备（如摄像头和麦克风）以及屏幕共享的访问权限。从本质上讲，它允许您访问任何媒体数据的硬件源。

EventTarget MediaDevices

实例属性

继承自其父接口EventTarget的属性。

实例方法

继承自其父接口EventTarget的方法。

enumerateDevices()

获取有关系统上可用的媒体输入和输出设备的信息数组。

getSupportedConstraints()

返回一个符合MediaTrackSupportedConstraints的对象，指示MediaStreamTrack接口上支持哪些可约束属性。请参阅媒体流 API，以了解有关约束以及如何使用它们的更多信息。

getDisplayMedia()

提示用户选择一个显示器或显示器的一部分（例如窗口）以捕获为MediaStream，用于共享或录制目的。返回一个解析为MediaStream的 Promise。

getUserMedia()

在获得用户的许可（通过提示）后，打开系统上的摄像头和/或麦克风，并提供一个包含视频轨道和/或音频轨道的MediaStream作为输入。

selectAudioOutput()

提示用户选择特定的音频输出设备。

事件

devicechange

当媒体输入或输出设备连接到或从用户的计算机上移除时触发。

示例

js
// Put variables in global scope to make them available to the browser console.
const video = document.querySelector("video");
const constraints = {
  audio: false,
  video: true,
};

navigator.mediaDevices
  .getUserMedia(constraints)
  .then((stream) => {
    const videoTracks = stream.getVideoTracks();
    console.log("Got stream with constraints:", constraints);
    console.log(`Using video device: ${videoTracks[0].label}`);
    stream.onremovetrack = () => {
      console.log("Stream ended");
    };
    video.srcObject = stream;
  })
  .catch((error) => {
    if (error.name === "OverconstrainedError") {
      console.error(
        `The resolution ${constraints.video.width.exact}x${constraints.video.height.exact} px is not supported by your device.`,
      );
    } else if (error.name === "NotAllowedError") {
      console.error(
        "You need to grant this page permission to access your camera and microphone.",
      );
    } else {
      console.error(`getUserMedia error: ${error.name}`, error);
    }
  });

规范

规范
媒体捕获和流
# mediadevices

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅