官网， 本文仅是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中使用相机的一些规则
Scheme Host PortWebcamJS 已经在下面的浏览器／系统中进行了测试:
OS Browser Notes这里有一些关于这个库的演示（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值见下表：
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()方法可以添加事件监听。第一个参数为事件类型，第二个参数为回调方法，下面是一个事件类型的表格:
Event Name Notes例子:
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' ); } );
