导航器：getUserMedia() 方法

已弃用： 不再推荐使用此功能。尽管某些浏览器可能仍然支持它，但它可能已经从相关的 Web 标准中删除，可能正在被删除，或者可能仅出于兼容性目的而保留。避免使用它，并尽可能更新现有代码；请参阅本页面底部的兼容性表以指导您的决策。请注意，此功能可能随时停止工作。

安全上下文：此功能仅在安全上下文（HTTPS）中可用，在某些或所有支持的浏览器中可用。

已弃用的Navigator.getUserMedia()方法会提示用户授予使用最多一个视频输入设备（例如摄像头或共享屏幕）和最多一个音频输入设备（例如麦克风）作为MediaStream来源的权限。

如果授予权限，则将向指定的成功回调函数传递一个MediaStream，该MediaStream 的视频和/或音频轨道来自这些设备。如果权限被拒绝、不存在兼容的输入设备或发生任何其他错误情况，则错误回调函数将使用一个描述错误原因的对象执行。如果用户根本没有做出选择，则不会执行任何回调函数。

注意：这是一种旧方法。请改用较新的navigator.mediaDevices.getUserMedia()。虽然技术上没有被弃用，但这个旧的回调版本被标记为已弃用，因为规范强烈建议使用较新的返回承诺的版本。

语法

getUserMedia(constraints, successCallback, errorCallback)

参数

constraints

一个对象，用于指定要请求的媒体类型以及每种类型的任何要求。有关详细信息，请参阅现代MediaDevices.getUserMedia() 方法下的约束部分，以及文章功能、约束和设置。

successCallback

当媒体访问请求获准时调用的函数。该函数将使用一个参数调用：包含媒体流的MediaStream 对象。然后，您的回调可以将流分配给所需的对象（例如，<audio> 或 <video> 元素），如下例所示

function successCallback(stream) {
  const video = document.querySelector("video");
  video.srcObject = stream;
  video.onloadedmetadata = (e) => {
    // Do something with the video here.
  };
}

errorCallback

当调用失败时，errorCallback 中指定的函数将使用一个对象作为其唯一参数调用；此对象是根据DOMException 建模的。

navigator.getUserMedia =
  navigator.getUserMedia ||
  navigator.webkitGetUserMedia ||
  navigator.mozGetUserMedia;

if (navigator.getUserMedia) {
  navigator.getUserMedia(
    { audio: true, video: { width: 1280, height: 720 } },
    (stream) => {
      const video = document.querySelector("video");
      video.srcObject = stream;
      video.onloadedmetadata = (e) => {
        video.play();
      };
    },
    (err) => {
      console.error(`The following error occurred: ${err.name}`);
    },
  );
} else {
  console.log("getUserMedia not supported");
}

浏览器兼容性

BCD 表仅在浏览器中加载

警告： 新代码应使用MediaDevices.getUserMedia 而不是此过时的方法。

另请参阅

MediaDevices.getUserMedia() 替换了此过时方法。
WebRTC - API 的介绍页面
媒体捕获和流 API - 媒体流对象的 API
拍摄网络摄像头照片 - 使用 getUserMedia() 拍摄照片而不是视频的教程。

导航器：getUserMedia() 方法

语法

参数

返回值

示例

宽度和高度

浏览器兼容性

另请参阅