Dưới đây là cách sử dụng webcam-easy.js để xây dựng ứng dụng web có thể bật webcam và chụp hình ảnh nhanh.

Sử dụng webcam-easy.js

webcam-easy.js là thư viện JavaScript truy cập luồng webcam, nó có thể cho phép chụp ảnh, quay phim từ webcam. Dưới đây là các tính năng chính của webcam-easy.js:

  • Phát trực tuyến webcam trên máy tính để bàn hoặc thiết bị di động
  • Chuyển đổi camera trước hoặc sau trên thiết bị di động
  • Chụp ảnh và có thể tải xuống.

Bước 1: Import webcam-easy.js

Trước hết, chỉ cần import script webcam-easy.min.js vào phần <head> của tệp html.

<html>
<head>
<script type="text/javascript" src="https://unpkg.com/webcam-easy/dist/webcam-easy.min.js">
</script>
<script type="text/javascript" src="video-setup.js">
</head>

Bước 2:

Tiếp theo chúng ta cần thêm các phần tử html bên dưới:

  • Phần tử video webcam
  • Phần tử canvas để chụp ảnh
  • Phần tử âm thanh tùy chọn cho âm thanh snap
<video id="webcam" autoplay playsinline width="640" height="480"></video>
<canvas id="canvas" class="d-none"></canvas>
<audio id="snapSound" src="audio/snap.wav" preload = "auto"></audio>

Bước 3: Khởi tạo webcam

Sau đó, chúng ta mở file video-setup.js và khởi tạo đối tượng Webcam:

  • webcamElement – phần tử html <video> của webcam
  • faceMode – ‘người dùng’ hoặc ‘phần tử’, giá trị mặc định là ‘người dùng’
  • canvasElement & snapSoundElement là tùy chọn
const webcamElement = document.getElementById('webcam');
const canvasElement = document.getElementById('canvas');
const snapSoundElement = document.getElementById('snapSound');
const webcam = new Webcam(webcamElement, 'user', canvasElement, snapSoundElement);

Bước 4: Khởi động Webcam

Bằng cách gọi hàm webcam.start(), trình duyệt sẽ yêu cầu người dùng cho phép truy cập vào máy ảnh, khi được phép, nó sẽ bắt đầu truyền trực tuyến webcam tới phần tử video.

webcam.start()
  .then(result =>{
    console.log("webcam started");
  })
  .catch(err => {
    console.log(err);
});

Bước 5: Chụp ảnh

Chỉ cần gọi chức năng webcam.snap() để chụp ảnh của webcam. Hàm trả về một data URI chứa đại diện của hình ảnh ở định dạng PNG. Bằng cách đặt thuộc tính ‘href’ của liên kết html <a> cho trả về dữ liệu hình ảnh, người dùng có thể tải xuống và lưu ảnh chụp.

let picture = webcam.snap();
document.querySelector('#download-photo').href = picture;

Bước 6: Dừng webcam

Bạn cũng muốn người dùng có thể dừng webcam, chỉ cần gọi hàm webcam.stop()

Hỗ trợ camera trước và sau của di động

webcam-easy.js không chỉ hoạt động với webcam trên máy tính để bàn mà còn hỗ trợ cả camera trước và sau trên thiết bị di động.

Khi bạn khởi tạo đối tượng Webcam, bạn có thể chuyển tham số facingMode, trong khi ‘người dùng’ thể hiện cho camera phía trước đối diện với người dùng và cho camera sau.

Bạn cũng có thể gọi webcam.flip() để chuyển đổi giữa camera trước và sau.

$('#cameraFlip').click(function() {
  webcam.flip();
  webcam.start();
});

Demo: https://lyminhhoang.com/demo/face/

Chúc các bạn thành công!

Nguồn: https://github.com/bensonruan/webcam-easy

Recent posts

iPhone đã cho ghi âm cuộc gọi và chuyển thành bản tóm tắt, nhưng chưa hỗ trợ tiếng Việt

iPhone đã cho ghi âm cuộc gọi và chuyển thành bản tóm tắt, nhưng chưa hỗ trợ tiếng Việt

Ghi âm cuộc gọi là tính năng trước đây không có sẵn trên iPhone. Tuy nhiên với iOS 18, tính […]

Người dùng iPhone đang bị phần mềm gián điệp nhắm đến

Người dùng iPhone đang bị phần mềm gián điệp nhắm đến

Apple cảnh báo người dùng iPhone tại 92 quốc gia trước tình hình họ có thể bị tấn công từ […]

Tin tặc Việt bị nghi ‘chủ mưu’ gây chuyện ở châu Á

Tin tặc Việt bị nghi ‘chủ mưu’ gây chuyện ở châu Á

Nhóm tin tặc được cho là có nguồn gốc từ Việt Nam đang nhắm vào các tổ chức tài chính […]

iPhone 12 mừng lớn nhờ bản cập nhật iOS 17.4

iPhone 12 mừng lớn nhờ bản cập nhật iOS 17.4

Khả năng sạc Qi2 trên iPhone 12 đã được nâng cấp bất ngờ sau khi cập nhật lên phiên bản […]

Cảnh báo thủ đoạn hack iCloud mới cực kỳ tinh vi, sử dụng chính công cụ do Apple tạo ra

Cảnh báo thủ đoạn hack iCloud mới cực kỳ tinh vi, sử dụng chính công cụ do Apple tạo ra

Người dùng có thể mất quyền truy cập tài khoản iCloud nếu “sa lưới” vào hình thức lừa đảo mới […]

© 2021 Tạp Chí CNTT. Mr Hoang