WebcamJS网页摄像头图像捕获库使用指南
项目地址: https://gitcode.com/gh_mirrors/we/webcamjs WebcamJS是一个轻量级的JavaScript库，用于从计算机摄像头捕获静态图像，并将其作为JPEG或PNG数据URI交付。该库使用HTML5 getUserMedia，但在不支持getUserMedia的情况下提供自动且不可见的Adobe Flash回退机制。
项目概述
WebcamJS是一个小型（约3K压缩后）的独立JavaScript库，专门用于在网页中实现摄像头图像捕获功能。它基于旧的JPEGCam项目重新设计，适用于现代网页开发需求。
快速开始
环境准备
首先需要获取WebcamJS库文件。可以通过以下命令克隆项目：
git clone https://gitcode.com/gh_mirrors/we/webcamjs
或者直接从发布页面下载所需文件：webcam.js和webcam.swf。
基础集成
将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+'"/>';
} );
}
</script>
<a href="javascript:void(take_snapshot())">拍照</a>
这将在my_camera DIV中创建实时摄像头视图，点击"拍照"链接时将拍摄静态快照，转换为JPEG格式，并将数据URI作为标准<IMG SRC>标签插入到my_result DIV中。
核心功能配置
参数设置
通过Webcam.set()函数可以配置各种参数：
// 设置单个参数
Webcam.set('flip_horiz', true);
// 设置多个参数
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
});
主要配置选项
| 参数名称 | 默认值 | 说明 |
|---|---|---|
width | (自动) | 实时摄像头查看器的宽度（像素） |
height | (自动) | 实时摄像头查看器的高度（像素） |
dest_width | (自动) | 捕获摄像头图像的宽度（像素） |
dest_height | (自动) | 捕获摄像头图像的高度（像素） |
crop_width | (禁用) | 最终裁剪图像的宽度（像素） |
crop_height | (禁用) | 最终裁剪图像的高度（像素） |
image_format | jpeg | 捕获图像的格式，"jpeg"或"png" |
jpeg_quality | 90 | JPEG图像质量，0（最差）到100（最佳） |
enable_flash | true | 启用或禁用Flash回退 |
force_flash | false | 设置为true将始终在Adobe Flash回退模式下运行 |
flip_horiz | false | 设置为true将水平翻转图像（镜像模式） |
fps | 30 | 设置所需的fps（每秒帧数）捕获速率 |
高级功能
图像裁剪
WebcamJS可以从最终图像的中心裁剪出任意尺寸的区域：
Webcam.set({
width: 320,
height: 240,
crop_width: 240,
crop_height: 240
});
这将从320x240的网络摄像头图像中心裁剪出240x240的正方形区域。
图像翻转（镜像模式）
启用水平镜像翻转功能：
Webcam.set({
width: 320,
height: 240,
flip_horiz: true
});
图像冻结/预览
提供照片亭式的体验，用户可以在实际保存图像之前预览快照：
// 冻结当前摄像头图像
Webcam.freeze();
// 取消预览，恢复实时摄像头视图
Webcam.unfreeze();
事件处理
WebcamJS提供了一套事件系统，可以监听库的各种状态变化：
Webcam.on('load', function() {
// 库已加载完成
});
Webcam.on('live', function() {
// 摄像头已激活，显示预览图像
// （用户已允许访问）
});
Webcam.on('error', function(err) {
// 发生错误
});
图像上传到服务器
WebcamJS支持将捕获的图像上传到服务器：
Webcam.snap(function(data_uri) {
Webcam.upload(data_uri, 'myscript.php', function(code, text) {
// 上传完成！
// 'code'是服务器的HTTP响应代码
// 'text'是原始响应内容
} );
} );
浏览器兼容性
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显示实时预览
- 裁剪演示：演示从320x240网络摄像头图像中心裁剪240x240正方形
- 高清演示：演示720p HD（1280x720）图像捕获
- 特效演示：演示拍摄时的相机快门音效
- 镜像演示：演示水平翻转图像（镜像模式）
- 连续演示：演示连续捕获图像
API参考
| 方法名称 | 说明 |
|---|---|
Webcam.set() | 设置配置参数 |
Webcam.on() | 注册事件监听器 |
Webcam.off() | 移除事件监听器 |
Webcam.attach() | 初始化库并将实时摄像头附加到指定的DOM对象 |
Webcam.reset() | 关闭库并重置所有内容 |
Webcam.freeze() | 冻结当前实时摄像头帧 |
Webcam.unfreeze() | 取消预览并恢复实时摄像头视图 |
Webcam.snap() | 从摄像头（或冻结的预览图像）拍摄快照 |
Webcam.upload() | 通过二进制AJAX将保存的图像上传到服务器 |
注意事项
- Chrome 47+要求：Google Chrome要求网站必须使用HTTPS才能访问摄像头
- 本地开发：localhost/127.0.0.1不需要HTTPS
- Flash依赖：不支持HTML5 getUserMedia的浏览器需要Adobe Flash Player
最佳实践
- 在生产环境中使用压缩版本
webcam.min.js以减小加载时间 - 根据实际需求合理设置图像质量和分辨率
- 为不支持HTTPS的环境提供适当的Flash回退方案
- 在使用前检查浏览器兼容性，确保功能正常运行
通过本指南，您可以快速掌握WebcamJS的核心功能和使用方法，为网页项目添加强大的摄像头图像捕获功能。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
