hexo-blog/source/_posts/navigator-mediadevices-getusermedia调用本地摄像头.md

title, tags, id, categories, date

title	tags	id	categories	date
navigator.mediaDevices.getUserMedia调用本地摄像头		94	分享	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部分如下

//获取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 传送门