WebcamJS: Hướng dẫn toàn diện về thư viện chụp ảnh từ webcam

WebcamJS là một thư viện JavaScript nhẹ (khoảng 3KB sau khi nén) và độc lập, được thiết kế để chụp ảnh tĩnh từ webcam trên máy tính và trả về dưới dạng Data URI JPEG hoặc PNG. Nó sử dụng API HTML5 getUserMedia và có cơ chế dự phòng tự động sang Adobe Flash để đảm bảo hoạt động trên nhiều trình duyệt.

Bắt đầu nhanh

Các bước tích hợp cơ bản

  1. Tải tệp webcam.js và webcam.swf lên máy chủ web (cả hai phải nằm trong cùng một thư mục).
  2. Thêm đoạn mã HTML và JavaScript sau:
<script src="webcam.js"></script>

<div id="camera_view" style="width:320px; height:240px;"></div>
<div id="captured_image"></div>

<script language="JavaScript">
    Webcam.attach( '#camera_view' );

    function captureImage() {
        Webcam.snap( function(imageData) {
            document.getElementById('captured_image').innerHTML = '<img src="'+imageData+'"/>';
        } );
    }
</script>

<a href="javascript:void(captureImage())">Chụp ảnh</a>

Khi nhấn vào liên kết "Chụp ảnh", một bức ảnh tĩnh sẽ được chụp từ webcam, chuyển đổi sang định dạng JPEG, và Data URI tương ứng sẽ được chèn vào thẻ div có id là captured_image.

Cấu hình

WebcamJS cung cấp nhiều tùy chọn cấu hình thông qua phương thức Webcam.set().

Tên tham sốGiá trị mặc địnhMô tả
width(tự động)Chiều rộng (px) của khung nhìn webcam trực tiếp
height(tự động)Chiều cao (px) của khung nhìn webcam trực tiếp
dest_width(tự động)Chiều rộng (px) của ảnh được chụp
dest_height(tự động)Chiều cao (px) của ảnh được chụp
crop_width(tắt)Chiều rộng (px) của ảnh sau khi cắt
crop_height(tắt)Chiều cao (px) của ảnh sau khi cắt
image_formatjpegĐịnh dạng ảnh đầu ra: "jpeg" hoặc "png"
jpeg_quality90Chất lượng ảnh JPEG (0 đến 100)
enable_flashtrueBật/tắt cơ chế dự phòng Flash
force_flashfalseLuôn chạy ở chế độ Flash
flip_horizfalseLật ảnh theo chiều ngang (chế độ gương)
fps30Tốc độ khung hình mong muốn (fps)

Ví dụ cấu hình

Thiết lập một tham số:

Webcam.set('flip_horiz', true);

Thiết lập nhiều tham số cùng lúc:

Webcam.set({
    width: 640,
    height: 480,
    dest_width: 320,
    dest_height: 240,
    image_format: 'jpeg',
    jpeg_quality: 85,
    force_flash: false,
    flip_horiz: true,
    fps: 45
});

Chức năng chính

Khởi tạo webcam

Sử dụng Webcam.attach() để gắn luồng webcam vào một phần tử DOM đã tồn tại:

Webcam.attach( '#camera_view' );

Chụp ảnh

Gọi Webcam.snap() với một hàm callback để nhận dữ liệu ảnh:

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

Cắt ảnh

Bạn có thể cắt ảnh đến kích thước mong muốn, ví dụ tạo ảnh vuông từ nguồn 4:3:

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

Chế độ gương (lật ngang)

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

Đóng băng/xem trước ảnh

Sử dụng Webcam.freeze() để tạm dừng luồng webcam và xem trước ảnh. Sau đó, có thể chụp bằng Webcam.snap() hoặc hủy bằng Webcam.unfreeze().

Tham chiếu API

Phương thứcMô tả
Webcam.set()Thiết lập tham số cấu hình
Webcam.on()Đăng ký lắng nghe sự kiện
Webcam.off()Loại bỏ lắng nghe sự kiện
Webcam.attach()Khởi tạo và gắn webcam vào phần tử DOM
Webcam.reset()Đóng webcam và reset trạng thái
Webcam.freeze()Đóng băng khung hình hiện tại
Webcam.unfreeze()Hủy đóng băng và quay lại luồng trực tiếp
Webcam.snap()Chụp ảnh từ webcam (hoặc ảnh đã đóng băng)
Webcam.upload()Tải ảnh lên máy chủ qua AJAX nhị phân

Tải ảnh lên máy chủ

Ví dụ tải ảnh qua AJAX:

Webcam.snap( function(imageData) {

    Webcam.upload( imageData, 'upload.php', function(statusCode, responseText) {
        console.log('Mã trạng thái: ' + statusCode);
        console.log('Phản hồi: ' + responseText);
    } );
} );

Để theo dõi tiến trình tải lên:

Webcam.snap( function(imageData) {

    Webcam.on( 'uploadProgress', function(progress) {
        // progress nằm trong khoảng 0.0 đến 1.0
        console.log('Đã tải: ' + (progress * 100) + '%');
    } );

    Webcam.on( 'uploadComplete', function(statusCode, responseText) {
        console.log('Hoàn tất!');
    } );

    Webcam.upload( imageData, 'upload.php' );

} );

Tương thích trình duyệt

Hệ điều hànhTrình duyệtGhi chú
Mac OS XChrome 30+Hoạt động tốt – Chrome 47+ yêu cầu HTTPS
Mac OS XFirefox 20+Hoạt động tốt
Mac OS XSafari 6+Yêu cầu Adobe Flash Player
WindowsChrome 30+Hoạt động tốt – Chrome 47+ yêu cầu HTTPS
WindowsFirefox 20+Hoạt động tốt
WindowsIE 9, 10, 11Yêu cầu Adobe Flash Player

Tính năng nâng cao

Ràng buộc luồng đa phương tiện tùy chỉnh

Bạn có thể chỉ định các ràng buộc cho API getUserMedia:

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

Lưu ý quan trọng

  • Chrome 47+ yêu cầu trang web phải sử dụng HTTPS để truy cập webcam.
  • Localhost/127.0.0.1 không cần HTTPS.
  • Thư viện tự động chuyển đổi giữa HTML5 và Flash, giúp mã nguồn của bạn không phải xử lý vấn đề tương thích trình duyệt.

Tải dự án

Sử dụng lệnh git để clone kho lưu trữ:

git clone https://gitcode.com/gh_mirrors/we/webcamjs

Thư mục demos/ chứa các tệp mẫu minh họa đầy đủ các tính năng của WebcamJS như chụp ảnh cơ bản, chụp ảnh kích thước lớn, cắt ảnh, chế độ gương, v.v.

Thẻ: WebcamJS getUserMedia JavaScript HTML5 chụp ảnh webcam

Đăng vào ngày 11 tháng 10 lúc 22:49

Thẻ Phổ Biến

©2026 Thành phố Cuồng loạn