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

Microsoft cảnh bảo một chiến dịch tấn công mạng nguy hiểm quy mô toàn cầu

Microsoft cảnh bảo một chiến dịch tấn công mạng nguy hiểm quy mô toàn cầu

Microsoft đã gióng lên hồi chuông cảnh báo về Lumma Stealer, một loại mã độc chuyên đánh cắp thông tin, […]

Google Chrome hiện có thể thay đổi mật khẩu yếu cho người dùng

Google Chrome hiện có thể thay đổi mật khẩu yếu cho người dùng

Một tính năng đột phá vừa được Google chính thức ra mắt trên trình quản lý mật khẩu tích hợp […]

Google cho dịch giọng nói trực tiếp trong cuộc gọi

Google cho dịch giọng nói trực tiếp trong cuộc gọi

Google bắt dầu triển khai tính năng dịch giọng nói trực tiếp trong cuộc gọi, khẳng định có thể khớp […]

iPhone sẽ bị ‘vứt xó’ trong những năm tới, nhường bước cho các công nghệ mới

iPhone sẽ bị ‘vứt xó’ trong những năm tới, nhường bước cho các công nghệ mới

Những chiếc iPhone đã sống đủ lâu với ngôi vị quán quân di động, đã đến lúc sẽ có công […]

[WordPress] Hướng dẫn tạo Custom Action Hook trong WordPress

[WordPress] Hướng dẫn tạo Custom Action Hook trong WordPress

Tạo custom Action Hook trong WordPress là một kỹ năng rất hữu ích để tùy chỉnh và mở rộng chức […]

© 2021 Tạp Chí CNTT. Mr Hoang