HTML5 API详解（6）:getUserMedia实现拍照功能

注意：获取摄像头影像主要是通过navigator.getUserMedia这个接口，在caniuse.com上查询一下这个接口的支持情况，可以看到目前只有Chrome和Firefox支持得比较好，而且都要加上自家的前缀，移动端几乎全线不可用。

属性：window.navigator.getUserMedia(); 获取摄像头形象主要通过getUserMedia这个接口

案例代码：

//首先要有个video标签

<video id="video"></video>

var video = document.getElementById('video');

//getUserMeida做兼容处理

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

//向浏览器申请访问摄像头权限,需要用户通过浏览器授权

var constraints= {

video:true,//video为true为启用视频

audio:true // audio为true为启用音频

}

navigator.getUserMedia(constraints,onSuccess, onError);

浏览器执行这段代码的时候，会提示用户是否允许使用摄像头，允许之后，网页上就可以实时显示摄像头影像了。如果不允许，就会触发错误事件。

//如果启动成功，出发监听处理程序，传入一个视频流对象的参数stream

function onSuccess(stream){

if(window.URL){

//在Chrome和Opera中，URL.createObjectURL方法将媒体数据流（MediaStream）转为一个二进制对象的URL（Blob URL），该URL可以作为video元素的src属性的值。

video.src = window.URL.createObjectURL(stream);

}else{

video.src = stream;

}

video.play();

}

//如果再此基础上需要实现获取影像（拍照）功能的话，要加上canvas

<canvas id="canvas"></canvas>

var canvas = document.getElementById('canvas');

//规定要使用的图像、画布或视频,位移x:0，y:0，宽，搞

canvas.getContext('2d).drawImage(video,0,0,window.innerWidth,innerHeight);

//把canvas的图片显示出来，放在一个img标签里面

<img id='img' src=''/>

var img = document.getElementById('img');

//canvas.toDataUR()返回又参数指定格式image/webp的图片的描述信息

img.src = canvas.toDateURL('image/webp');

来到这里img元素就会显示你的摄像图里面的图像了！