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

title, id, categories, tags, date

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