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

webcam.js

前段时间一直在调试人脸识别的接口程序，已经差不多了。而且在移动端通过使用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 已经在下面的浏览器／系统中进行了测试:

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

   <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中得到。

向了解更多，可以查看这里：
- WebcamJS中文简介
- webcam.js官网