html5标准从2013年开始定制完毕，直到现在为止已经过去了4个年头，小沃从最开始接触html5技术到现在，也越来多的发现html5技术的强大之处了。

目前html5技术已经完全可以取代flash了，他的一些非常实用的标签也逐步成熟起来。html5的本地存储，解决了浏览器存储大量数据的问题。audio标签，video标签解决了浏览器播放音频，视频的问题。

最近，由于项目的要求，小沃开始研究如何通过html5技术打开摄像头并且拍照的功能，小有成就，现在就与大家分享一下。

首先，如果要使用html技术打开摄像头，需要先了解navigator.getUserMedia这个对象。

这个对象是html5新出的对象，目的在于控制摄像头，喇叭和麦，实现更加丰富的多媒体效果。

第一步、获取navigator.getUserMedia对象

由于浏览器的兼容性各不相同，因此需要用一点小手段来兼容所有的浏览器。

这里我们使用

navigator.getMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.mediaDevices.getUserMedia;

这样的一个或操作来实现获取可以支持的navigator.getMedia对象。

第二步、打开相关硬件

这里我们直接使用

navigator.getMedia({

    "video": true,//打开摄像头

    "audio": false//关闭麦

}, function(stream) {//打开成功的回调函数

}, function(error) {//打开失败的回调函数

});

这一步执行完毕后，电脑或手机的摄像头就应该已经打开了。

第三步、将打开后的源指定到video或是audio的src属性中去。

这一步看上去简单，其实中间还差一步没有完成呢，那就是创建一个url对象，创建方法如下：

var URL = window.URL || window.webkitURL;//这里也是为了解决浏览器兼容问题。

然后使用URL.createObjectURL(stream);并且将返回值赋值到video标签的src中。

第四步、使用canvas获取video标签中的一帧

不知道大家有没有学习使用过canvas，在canvas上画所使用的方法是drawImage，但是他不是canvas的方法，他是canvas所带的contents的方法。然后再使用.toDataURL来导出它

var context = canvas.getContext("2d");

context.drawImage(video, 0, 0, canvas.width, canvas.height);

canvas.toDataURL("image/jpeg");

这里需要注意下，这个必须使用https协议，不支持http协议，否则权限不足。

                        html5调用摄像头实现拍照                拍照