文章目录
- WebcamJS
-
- 针对Chrome 47及以上版本的重要说明
- 浏览器支持
- 演示示例
- 开源协议
- 快速入门指南
- 配置
- 初始化
- 拍摄照片
- 自定义图像大小
- 裁剪图像
- 翻转图像（镜像模式）
- 冻结/预览图像
- 设置备用SWF文件位置
- 重置（关闭）
-
- API 参考
- 自定义事件
- 向服务器提交图像
-
- 跟踪上传进度
- 包含在现有表单中
- 自定义用户媒体约束（高级）
- 许可证
WebcamJS
WebcamJS是一个小型的（压缩并经过gzip处理后约3K大小）独立JavaScript库，用于从计算机的摄像头捕获静态图像，并将其作为JPEG或PNG格式的数据URI提供给用户。这些图像随后可以显示在网页上、渲染到画布中，或者提交到服务器。WebcamJS使用了HTML5的getUserMedia ，但也提供了自动且无感知的Adobe Flash备用方案。
WebcamJS基于我之前的JPEGCam项目，但已针对现代网络进行了重新设计。它不再仅仅依赖Flash，也不只是能够直接将图像提交到服务器，WebcamJS会在客户端以JavaScript中的数据URI形式提供图像，并且在支持的情况下使用HTML5的getUserMedia。只有当浏览器不支持getUserMedia时才会使用Flash，而且备用方案会通过相同的API自动处理（所以你的代码无需为此操心）。
在寻找WebcamJS的优秀替代品吗？ 请查看由亚当·弗罗贝尔开发的JpegCamera。它具有许多WebcamJS所没有的高级功能（例如，一次上传多张照片、重试上传失败的照片、CSRF令牌、确保摄像头已准备好），并且拥有非常简洁且面向对象的设计。
针对Chrome 47及以上版本的重要说明
谷歌Chrome严格要求，如果网站想要访问摄像头，必须是安全的（HTTPS）。从Chrome 47版本及更高版本开始实施这一变更。所以基本上，如果你想使用WebcamJS，就需要使用SSL / HTTPS来托管你的网站。唯一的替代方案是在Chrome上强制使用Flash备用模式，但这可能不是一个理想的选择。
有关详细信息，请参阅Chromium页面：https://www.chromium.org/Home/chromium-security/prefer-secure-origins-for-powerful-new-features
请注意，对于localhost / 127.0.0.1不需要HTTPS。以下是Chrome解锁摄像头访问的规则列表：
| 协议 | 主机 | 端口 |
|---|---|---|
https:// |
* |
* |
wss:// |
* |
* |
* |
localhost |
* |
* |
*.localhost |
* |
* |
127/8 |
* |
* |
::1/128 |
* |
file:// |
* |
- |
chrome-extension:// |
* |
- |
浏览器支持
WebcamJS已在以下浏览器/操作系统上进行了测试：
| 操作系统 | 浏览器 | 备注 |
|---|---|---|
| Mac OS X | Chrome 30及以上版本 | 可用 – Chrome 47及以上版本需要HTTPS |
| Mac OS X | Firefox 20及以上版本 | 可用 |
| Mac OS X | Safari 6及以上版本 | 需要安装Adobe Flash Player |
| Windows | Chrome 30及以上版本 | 可用 – Chrome 47及以上版本需要HTTPS |
| Windows | Firefox 20及以上版本 | 可用 |
| Windows | IE 9 | 需要安装Adobe Flash Player |
| Windows | IE 10 | 需要安装Adobe Flash Player |
| Windows | IE 11 | 需要安装Adobe Flash Player |
演示示例
以下是一些展示该库各种功能的在线演示：
| 演示链接 | 描述 |
|---|---|
| 基本演示 | 展示基本的320x240图像捕获功能。 |
| 大尺寸演示 | 展示捕获大尺寸640x480图像，同时以320x240的尺寸显示实时预览。 |
| iOS大尺寸演示 | 展示在iOS平台上捕获大尺寸640x480图像的功能。 |
| 裁剪演示 | 展示从320x240的网络摄像头图像中心裁剪出240x240正方形的功能。 |
| 大尺寸裁剪演示 | 展示从640x480的图像捕获中裁剪出480x480正方形，并以240x240的尺寸进行实时预览的功能。 |
| 高清演示 | 展示720p高清（1280x720）图像捕获功能（部分网络摄像头支持）。 |
| 音效演示 | 展示在捕获图像时的相机快门音效。 |
| Flash演示 | 展示强制使用Adobe Flash备用模式的功能。 |
| 冻结演示 | 展示在保存快照之前冻结/预览图像的功能。 |
| 镜像演示 | 展示水平翻转图像（镜像模式）的功能。 |
| 连续捕获演示 | 展示连续捕获图像的功能。 |
| 全功能组合演示 | 一个展示所有功能的完整组合演示。 |
开源协议
WebcamJS是开源的，遵循MIT许可证，可在GitHub上获取：
https://github.com/jhuckaby/webcamjs
快速入门指南
将webcam.js和webcam.swf文件托管在你的Web服务器上（两者位于同一目录），并插入以下HTML代码片段：
<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
