---
title: navigator.mediaDevices.getUserMedia调用本地摄像头
tags: []
id: '94'
categories:
  - - 分享
date: 2017-04-28 15:20:27
---

MediaDevices.getUserMedia()方法提示用户允许使用一个视频和/或一个音频输入设备，例如相机或屏幕共享和/或麦克风。 如果用户给予许可，就返回一个Promise 对象，MediaStream对象作为此Promise对象的Resolved［成功］状态的回调函数参数，相应的，如果用户拒绝了许可，或者没有媒体可用的情况下，PermissionDeniedError 或者NotFoundError作为此Promise的Rejected［失败］状态的回调函数参数。 _注意，由于用户不会被要求必须作出允许或者拒绝的选择，所以返回的Promise对象可能既不会触发resolve 也不会触发 reject。_ 首先在页面中放置一个video标签，用来播放本地摄像头采集到的视频流

```

     <video id="video" width="200" height="150" autoplay=""></video>

```

然后在js部分如下

```js

//获取video标签
var vedio = document.querySelector('#video');

//constraints 参数是一个包含了video 和 audio两个成员的MediaStreamConstraints
//对象，用于说明请求的媒体类型。必须至少一个类型或者两个同时可以被指定。
var constraints = {
audio: true,
video: {
                        //帧率
frameRate: { ideal: 10,max: 15,min: 8 }
}
}

//获取设备（摄像头或者麦克风）
navigator.mediaDevices.getUserMedia({ audio: false, video: true })
.then(function(mediaStream){
console.log(mediaStream);
video.src = window.URL.createObjectURL(mediaStream);
video.onloadedmetadata = function(e) {
    video.play();
    console.log(e);
};
})
.catch(function(error){
console.log(error);
});

```

_注意：调取本地视频或音频设备的接口，出于安全的考虑，只能在localhost或者https下使用！_

[demo 传送门](https://demo.dengtongyu.com/pages/20170522j7/)