MediaDevices.getUserMedia()

时间：2024-09-18 19:35:14

MediaDevices.getUserMedia() 会提示用户给予使用媒体输入的许可，媒体输入会产生一个MediaStream，里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道（来自硬件或者虚拟视频源，比如相机、视频采集设备和屏幕共享服务等等）、一个音频轨道（同样来自硬件或虚拟音频源，比如麦克风、A/D转换器等等），也可能是其它轨道类型。

返回一个 Proｍise 对象，成功后会resolve回调一个 MediaStream 对象。

若用户拒绝了使用权限，或者需要的媒体源不可用，promise会reject回调一个个  PermissionDeniedError 或者 NotFoundError 。

通常你可以使用 navigator.mediaDevices 来获取 MediaDevices ，例如:

navigator.mediaDevices.getUserMedia(constraints)

.then(function(mediaStream) {

  /* 使用这个MediaStream对象 */

})

.catch(function(err) {

  /* 处理error */

});

语法

var promise = navigator.mediaDevices.getUserMedia(constraints);

参数

　　constraints作为一个MediaStreamConstraints 对象，指定了请求的媒体类型和相对应的参数。
         constraints 参数是一个包含了video 和 audio两个成员的MediaStreamConstraints 对象，用于说明请求的媒体类型。
　　注意：必须至少一个类型或者两个同时可以被指定。
　　如果浏览器无法找到指定的媒体类型或者无法满足相对应的参数要求，那么返回的Promise对象就会处于rejected［失败］状态，NotFoundError作为rejected［失败］回调的参数。 
         例如：同时请求不带任何参数的音频和视频：
const constraints = { audio: false, video: true };

　　如果为某种媒体类型设置了 true ，得到的结果的流中就需要有此种类型的轨道。如果其中一个由于某种原因无法获得，getUserMedia() 将会产生一个错误。

　　当由于隐私保护的原因，无法访问用户的摄像头和麦克风信息时，应用可以使用额外的constraints参数请求它所需要或者想要的摄像头和麦克风能力。下面演示了应用想要使用1280x720的摄像头分辨率：

const constraints = { audio: false, video: { width: 1280, height: 720 }};

　　浏览器会试着满足这个请求参数，但是如果无法准确满足此请求中参数要求或者用户选择覆盖了请求中的参数时，有可能返回其它的分辨率。

　　强制要求获取特定的尺寸时，可以使用关键字min, max, 或者 exact(就是 min == max). 以下参数表示要求获取最低为1280x720的分辨率。

const constraints = { audio: false, video: { width: { min: 1280 }, height: { min: 720 }};
　如果摄像头不支持请求的或者更高的分辨率，返回的Promise会处于rejected状态，NotFoundError作为rejected回调的参数，而且用户将不会得到要求授权的提示。

　　当请求包含一个ideal（应用最理想的）值时，这个值有着更高的权重，意味着浏览器会先尝试找到最接近指定的理想值的设定或者摄像头（如果设备拥有不止一个摄像头）。

　　

const constraints = { audio: false,

                      video: {　　width: { min: 1024, ideal: 1280, max: 1920 },

    　　　　　　　　　　　 　　　　　　height: { min: 776, ideal: 720, max: 1080 }

  　　　　　　　　　　　 };

简单的请求值也可以理解为是应用理想的值，因此我们的第一个指定分辨率的请求也可以写成如下：

const constraints = { audio: true, video: { width: { ideal: 1280 }, height: { ideal: 720 } } }

注意:不是所有的constraints 都是数字。

例如, 在移动设备上面，如下的例子表示优先使用前置摄像头（如果有的话）：

const constraints =  { audio: true, video: { facingMode: "user" } }

强制使用后置摄像头：

const constraints =  { audio: true, video: { facingMode: { exact: "environment" } } };

返回值

返回一个 Promise ， 这个Promise成功后的回调函数带一个 MediaStream 对象作为其参数。

示例

宽度和高度

这个例子设置了摄像头分辨率，并把结果的 MediaStream 分配给了一个video元素。

var constraints = { audio: true, video: { width: 1280, height: 720 } }; 

navigator.mediaDevices.getUserMedia(constraints)
.then(function(mediaStream) {

     const video = document.querySelector('video');
     video.srcObject = mediaStream;

     video.onloadedmetadata = function(e) {

     video.play();

                              };

 }).catch(function(err) { console.log(err.name + ": " + err.message); }); // 总是在最后检查错误

补充:onloadedmetadata 事件

onloadedmetadata 事件在指定视频/音频（audio/video）的元数据加载后触发。

视频/音频（audio/video）的元数据包含: 时长，尺寸大小（视频），文本轨道。

视频/音频（audio/video）在加载过程中，事件触发的顺序如下：

  1. onloadstart
  2. ondurationchange
  3. onloadedmetadata
  4. onloadeddata
  5. onprogress
  6. oncanplay
  7. oncanplaythrough

参考:https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia

相关文章