当前位置：首页 > news >正文

WebcamJS中文文档

news 来源：原创 2025/6/19 6:12:43

文章目录

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