webcam.js支持H5以及Flash的方式调用摄像头

前段时间一直在调试人脸识别的接口程序,已经差不多了。而且在移动端通过使用cordoava插件也能调用摄像头进行拍照采样。但是在传统的web浏览器端碰到了一点麻烦。

如果是在支持H5的浏览器中,可以借助navigator.getUserMedia以及canvas轻松实现拍照。可是如果时在IE浏览器中以及不支持H5的浏览器中就会碰到麻烦。

一般的做法是借助Flash来实现相机的功能,使用传统的写法不免很难看。后台找到一个框架webcam.js,轻松的解决了我的难题。

WebcamJS是一个可以通过电脑的相机进行拍照功能,并将Jpeg、png分享为Uri的库,我们可以把图片用来显示在网页中、渲染到canvas或提交到服务器。WebcamJS基于HTML5 getUserMedia,不过提供了自动且隐式的Flash回调,当浏览器不支持HTML5的getUserMedia时,WebCam会自动使用Flash,并且使用同样的Api回调(所以代码中不需要关心)。

WebcamJS 已经在下面的浏览器/系统中进行了测试:

OS Browser Notes
Mac OS X Chrome 30+ Works – Chrome 47+ requires HTTPS
Mac OS X Firefox 20+ Works
Mac OS X Safari 6+ Requires Adobe Flash Player
Windows Chrome 30+ Works – Chrome 47+ requires HTTPS
Windows Firefox 20+ Works
Windows IE 9 Requires Adobe Flash Player
Windows IE 10 Requires Adobe Flash Player
Windows IE 11 Requires Adobe Flash Player

示例
把 webcam.js 和 webcam.swf 放倒你的网站中,(两个放倒同一个文件夹中),并复制下面的代码片段:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script src="webcam.js"></script>

<div id="my_camera" style="width:320px; height:240px;"></div>
<div id="my_result"></div>

<script language="JavaScript">
Webcam.attach( '#my_camera' );

function take_snapshot() {
Webcam.snap( function(data_uri) {
document.getElementById('my_result').innerHTML = '<img src="'+data_uri+'"/>';
} );
}
</script>

<a href="javascript:void(take_snapshot())">Take Snapshot</a>

打开这个页面,相机就会在my_camera这个div中呈现,点击Take Snapshot就会将拍下的照片在my_result中得到。

想了解更多,可以查看这里:

坚持原创技术分享,您的支持将鼓励我继续创作!