WebcamJS

官网， 本文仅是WebcamJS在Github中的文档前半部分的简单翻译（最后两个话题自我感觉不实用），如果有喜欢英文或欲览全文的话请点我。

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

如果想要寻找更高级的工具来替代WebcamJS的话，JpegCamera是一个不错的选择，他有很多WebcamJS不具备的高级功能，比如：一次性上传多张图片，失败重试，跨站请求伪造token，确认相机准备完成。并且他是一个很纯净的面向对象的设计。

Chrome 47版本以上中注意

谷歌浏览器对网站的安全提出了严格的要求，如果想要访问电脑的相机的，就需要使你的网站使用SSL／HTTPS。当然，WebCam也是如此。 查看详情

当然在 localhost/ 127.0.0.1. 中并不需要HTTPS，下表是Chrome中使用相机的一些规则

浏览器支持

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

例子

这里有一些关于这个库的演示（demo）：

开源

webcamjs是开源的，MIT许可，并可以在GitHub上： https://github.com/jhuckaby/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_cameraDiv中，当点击Take Snapshot 时会抓取一张快照，转换为JPEG，分享一个数据的URI并将它作为<IMG SRC>展示到my_result DIV中，数据的URI可以绕过任何URL，可以提交到服务器（下面的例子将会展示这些）。

配置

如果你想修改默认的配置，调用 Webcam.set()方法，填入一个hash表，key值见下表：

下面是一个重写一些配置的的例子，记住：设置属性要早于把相机赋给视图（Webcam.set()早于Webcam.attach()）

    Webcam.set({
        width: 320,
        height: 240,
        dest_width: 640,
        dest_height: 480,
        image_format: 'jpeg',
        jpeg_quality: 90,
        force_flash: false,
        flip_horiz: true,
        fps: 45
    });

    // Attach camera here

初始化

WebcamJS 初始化并激活通过将相机赋给一个DOM元素，这个DOM元素必须已经被创建且为空，传一个ID或则CSS的选择器给 Webcam.attach() 方法. 例如:

    Webcam.attach( '#my_camera' );

这将激活用户的相机，询问必须的权限，并且开始在我们选择的DOM元素中展示相机。

注意，浏览器会询问是否允许访问用户的相机，WebcamJS没有权利越过这些，也没有方法去修改它的UI样式，不同的浏览器又一些不一样，典型的有在网页上发弹出一个窗台，Flash会在它的试图中进行提示。

拍照

拍照只需要调用 Webcam.snap() 方法，图片的URI将会通过回调方法传递给你。例如:

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

查看相关例子

你的function同样可以通过一个HTML5 Canvas 和 2D上下文对象（Context），所以 Your function is also passed a HTML5 Canvas and a 2D Context object, 所以你可以获得原始像素，而不是压缩图像数据的URI的.

上例子:

    Webcam.snap( function(data_uri, canvas, context) {
        // copy image to my own canvas
        myContext.drawImage( canvas, 0, 0 );
    } );

如果你仅想要WebcamJS把图片复制到你的canvas，而不是生成的数据的URI（这是一个昂贵的操作），只需要把你的canvas对象作为 Webcam.snap()方法的第二个参数，回调函数的右边。

例如:

    // assumes 'myCanvas' is a reference to your own canvas object, at the correct size

    Webcam.snap( function() {
        // the webcam image is now in your own canvas
    }, myCanvas );

自定义图片尺寸

WebcamJS会自动的设置相机尺寸为相机所依附的DOM元素大小，然而，我们也可以通过设置width和／或height重写配置：

    Webcam.set({
        width: 320,
        height: 240
    });

    // Attach camera here

默认照片大小等同于相机视图的，不过我们可以通过 dest_width 和/或 dest_height设置。 例如:

    Webcam.set({
        width: 320,
        height: 240,
        dest_width: 640,
        dest_height: 480,
    });

    // Attach camera here

查看相关例子

裁剪图片

WebcamJS还可以为你裁剪最终的图片为任何尺寸，比如我们需要一个正方形图片时（用来设置用户头像的时候），有些摄像头会固定拍摄4:3的图片无法拍摄正方形图片，为了实现这个功能，需要添加 crop_width 和 crop_height参数，指定裁剪的区域：

    Webcam.set({
        width: 320,
        height: 240,
        crop_width: 240,
        crop_height: 240
    });

    // Attach camera here

这会从一个320x240图片的中心裁剪一个240x240的正方形图片，效果会显示在预览区，在这个例子中我们的相机视图同时也会被裁减为240x240，所以用户可以看到最终被拍摄的照片。

查看相关例子

冻结/预览图像

想要在拍照前冻结你的相机？ 调用 Webcam.freeze()就可以冻结当前相机中的图片，调用 Webcam.snap()可以保存冻结的照片，调用Webcam.unfreeze()可以取消冻结。

查看相关例子

设置SWF文件的位置

WebcamJS默认在JS所在目录寻找SWF文件，如果你的SWF没有放到这个目录，需要通过调用Webcam.setSWFLocation() 方法来指定你的SWF文件，它必须和你的JS文件在相同域名下：

    Webcam.set("swfURL", "/path/to/the/webcam.swf");

注意：SWF（Flash）仅用在浏览器不支持 HTML5 getUserMedia时。

重置 (关闭相机)

调用 Webcam.reset()方法可以关闭相机，同时移除添加相机时自动在DOM中添加的元素：

    Webcam.reset();

想要再次使用相机，必须调用 Webcam.attach()将相机绑定到DOM元素中 。

API Reference

事件

WebcamJS支持使用简单的JavaScript来拦截一系列的事件，事件会在： 库文件加载完成，相机已打开，出错，上传成功时触发。通过调用Webcam.on()方法可以添加事件监听。第一个参数为事件类型，第二个参数为回调方法，下面是一个事件类型的表格:

例子:

    Webcam.on( 'load', function() {
        // library is loaded
    } );

    Webcam.on( 'live', function() {
        // camera is live, showing preview image
        // (and user has allowed access)
    } );

    Webcam.on( 'error', function(err) {
        // an error occurred (see 'err')
    } );

默认error 事件会展示一个提示框，不过当你设置了error 事件监听后将不会再弹出提示框。

需要注意，WebcamJS允许统一事件设置多个监听者，所以你多次调用Webcam.on()，你的回调方法皆会添加到一个事件列表，当事件被触发时，所有的回调都会被调用。所以一个事件只调用一次 Webcam.on()时，调用Webcam.off()才能移除这个事件的监听者。

提交图片到服务器

Webcam.snap()方法的回调中可以得到拍摄数据的URI，数据是使用Base64编码的二进制，你可以显示在你的页面中，同时，Webcam还提供了解码和提交数据到服务器的方法：

    Webcam.snap( function(data_uri) {
        // snap complete, image data is in 'data_uri'

        Webcam.upload( data_uri, 'myscript.php', function(code, text) {
            // Upload complete!
            // 'code' will be the HTTP response code from the server, e.g. 200
            // 'text' will be the raw response content
        } );

    } );

Webcam.upload()方法接受3个参数: snap()方法返回的数据URI, 服务端上传接口, 和一个上传完成的回调。同样可以指定上传完成的回调通过Webcam.on('uploadComplete', YOUR_FUNC)。

图片的数据使用标准的multipart form post方式上传，包含在一个命名为 webcam的form中。获取图片数据需要在服务端有类似于如下代码（PHP）

    // be aware of file / directory permissions on your server
    move_uploaded_file($_FILES['webcam']['tmp_name'], 'webcam.jpg');

跟踪上传进度

如果想要跟踪上传进度，可以注册uploadProgress 事件监听，他会在上传过程中多次调用，并通过一个回调方法传回一个从0.0 到 1.0的进度。下面是一个使用的展示：

    Webcam.snap( function(data_uri) {

        Webcam.on( 'uploadProgress', function(progress) {
            // Upload in progress
            // 'progress' will be between 0.0 and 1.0
        } );

        Webcam.on( 'uploadComplete', function(code, text) {
            // Upload complete!
            // 'code' will be the HTTP response code from the server, e.g. 200
            // 'text' will be the raw response content
        } );

        Webcam.upload( data_uri, 'myscript.php' );

    } );