WebcamJS 网页摄像头图像捕获库完整使用指南

最新推荐文章于 2025-11-26 09:17:08 发布
原创 最新推荐文章于 2025-11-26 09:17:08 发布 · 296 阅读 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

WebcamJS 网页摄像头图像捕获库完整使用指南

【免费下载链接】webcamjs HTML5 Webcam Image Capture Library with Flash Fallback 【免费下载链接】webcamjs 项目地址: https://gitcode.com/gh_mirrors/we/webcamjs

项目概述

WebcamJS 是一个轻量级（约3KB压缩后）的独立JavaScript库，用于从计算机摄像头捕获静态图像，并将其作为JPEG或PNG格式的Data URI返回。该库使用HTML5 getUserMedia技术，同时提供自动且透明的Adobe Flash回退机制，确保在各类浏览器环境中都能正常工作。

项目结构

WebcamJS 项目包含以下核心文件：

  • webcam.js - 主要JavaScript库文件，包含WebcamJS的核心功能
  • webcam.min.js - 压缩版本，适用于生产环境
  • webcam.swf - Adobe Flash回退文件
  • DOCS.md - 详细文档说明
  • LICENSE - MIT开源协议文件

快速开始

基础集成步骤

  1. 将 webcam.js 和 webcam.swf 文件上传到您的Web服务器（两者需在同一目录下）

  2. 在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格式，并将Data URI作为标准<IMG SRC>标签插入到 my_result DIV中。

配置参数

WebcamJS 提供了丰富的配置选项，可以通过 Webcam.set() 方法进行设置：

参数名称默认值说明
width(自动)实时摄像头查看器的宽度（像素），默认为DOM元素的实际大小
height(自动)实时摄像头查看器的高度（像素），默认为DOM元素的实际大小
dest_width(自动)捕获摄像头图像的宽度（像素），默认为实时查看器大小
dest_height(自动)捕获摄像头图像的高度（像素），默认为实时查看器大小
crop_width(禁用)最终裁剪图像的宽度（像素），默认为 dest_width
crop_height(禁用)最终裁剪图像的高度（像素），默认为 dest_height
image_formatjpeg捕获图像的期望格式，可以是"jpeg"或"png"
jpeg_quality90对于JPEG图像，这是期望的质量，从0（最差）到100（最佳）
enable_flashtrue启用或禁用Flash回退，如果没有原生摄像头访问权限
force_flashfalse设置为true将始终在Adobe Flash回退模式下运行
flip_horizfalse设置为true将水平翻转图像（镜像模式）
fps30设置期望的fps（每秒帧数）捕获率

配置示例

设置单个参数：

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
});

核心功能详解

初始化摄像头

通过将实时摄像头查看器"附加"到DOM元素来初始化和激活WebcamJS。DOM元素必须已经创建且为空。

Webcam.attach( '#my_camera' );

拍摄照片

调用 Webcam.snap() 函数拍摄照片，传入回调函数。图像数据将作为Data URI传递给您的函数。

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

图像裁剪功能

WebcamJS 可以裁剪最终图像到您想要的任何尺寸。当您想要方形图像但要从用户的网络摄像头以4:3比例捕获图像以完全兼容时，这很有用。

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

这将从320x240网络摄像头图像的中心裁剪出240x240的正方形。裁剪也反映在实时预览区域中。

镜像模式

WebcamJS 可以水平"翻转"（镜像）实时预览和捕获的图像。要启用此可选功能，请包含 flip_horiz 参数，并将其设置为 true。

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

冻结/预览图像

想要为用户提供在实际保存快照之前"冻结"（即预览）图像的能力吗？只需调用 Webcam.freeze() 冻结当前摄像头图像。然后调用 Webcam.snap() 保存冻结的图像，或者调用 Webcam.unfreeze() 取消并恢复实时摄像头馈送。

API参考

以下是WebcamJS库中可用的所有API函数调用列表：

方法名称说明
Webcam.set()设置配置参数。传递键+值，或包含多个键/值的哈希
Webcam.on()为给定事件注册事件监听器。传入事件名称和回调函数
Webcam.off()移除给定事件的事件监听器。传入事件名称和要移除的回调函数。省略回调引用以移除所有监听器
Webcam.attach()初始化库并将实时摄像头附加到指定的DOM对象
Webcam.reset()关闭库并重置所有内容。必须调用 attach() 才能再次使用它。不移除事件监听器
Webcam.freeze()冻结当前的实时摄像头帧，允许用户在保存前预览
Webcam.unfreeze()取消预览（丢弃图像）并恢复实时摄像头视图
Webcam.snap()从摄像头（或冻结的预览图像）拍摄快照。传递回调函数以接收数据
Webcam.upload()通过二进制AJAX将保存的图像上传到您的服务器。触发进度事件

图像上传到服务器

Webcam.snap() 函数通过客户端JavaScript Data URI传递您的图像。二进制图像数据使用Base64编码并塞入URI中。该库还提供了一种方法，通过二进制AJAX将此图像数据解码并提交到服务器API端点。

上传示例

Webcam.snap( function(data_uri) {
    // 快照完成，图像数据在 'data_uri' 中

    Webcam.upload( data_uri, 'myscript.php', function(code, text) {
        // 上传完成！
        // 'code' 将是来自服务器的HTTP响应代码，例如200
        // 'text' 将是原始响应内容
    } );
} );

跟踪上传进度

如果您想在图像上传过程中跟踪进度，可以为 uploadProgress 事件注册事件监听器。

Webcam.snap( function(data_uri) {

    Webcam.on( 'uploadProgress', function(progress) {
        // 上传进行中
        // 'progress' 将在0.0和1.0之间
    } );

    Webcam.on( 'uploadComplete', function(code, text) {
        // 上传完成！
        // 'code' 将是来自服务器的HTTP响应代码，例如200
        // 'text' 将是原始响应内容
    } );

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

} );

浏览器兼容性

WebcamJS 已在以下浏览器/操作系统上测试：

操作系统浏览器备注
Mac OS XChrome 30+正常工作 -- Chrome 47+ 需要HTTPS
Mac OS XFirefox 20+正常工作
Mac OS XSafari 6+需要Adobe Flash Player
WindowsChrome 30+正常工作 -- Chrome 47+ 需要HTTPS
WindowsFirefox 20+正常工作
WindowsIE 9需要Adobe Flash Player
WindowsIE 10需要Adobe Flash Player
WindowsIE 11需要Adobe Flash Player

高级功能

自定义用户媒体约束

HTML5 getUserMedia API具有约束系统，您可以通过该系统指定视频流的可选或强制性要求。这些包括诸如最小或最大分辨率和/或帧速率之类的内容。

Webcam.set( 'constraints', {
    mandatory: {
        minWidth: 1280,
        minHeight: 720,
        minFrameRate: 30
    },
    optional: [
        { minFrameRate: 60 }
    ]
} );

示例演示

项目中包含了多个演示文件，展示WebcamJS的各种功能：

  • demos/basic.html - 基础320x240图像捕获演示
  • demos/large.html - 捕获大640x480图像但以320x240显示实时预览的演示
  • demos/crop.html - 从320x240网络摄像头图像中心裁剪240x240正方形的演示
  • demos/flip.html - 水平翻转图像（镜像模式）的演示
  • demos/sfx.html - 在捕获时播放相机快门音效的演示
  • demos/preview.html - 在保存前冻结/预览快照的演示

注意事项

  • Chrome 47+ 重要说明：Google Chrome要求您的网站安全（HTTPS）才能访问摄像头。此更改在Chrome版本47及更高版本中有效
  • 本地主机/127.0.0.1不需要HTTPS
  • 该库会自动处理HTML5和Flash之间的切换，无需在代码中关心浏览器兼容性问题

通过这份完整的指南，您应该能够顺利地在您的网页项目中集成和使用WebcamJS库，实现强大的摄像头图像捕获功能。

【免费下载链接】webcamjs HTML5 Webcam Image Capture Library with Flash Fallback 【免费下载链接】webcamjs 项目地址: https://gitcode.com/gh_mirrors/we/webcamjs

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值