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.j là mô-đun JavaScript dùng truy cập luồng webcam, nó có thể cho phép chụp ảnh 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: Đưa webcam-easy.js vào
Trước hết, chỉ cần đưa 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>
</head>
Bước 2: Đặt các phần tử trong HTML
Tiếp theo chúng ta cần làm là 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 đối tượng webcam
Sau đó, chúng ta sẽ khởi tạo đối tượng Webcam, hàm tạo chấp nhận các tham số bên dưới
- 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();
});