Phát hiện khuôn mặt – face detect bằng cascade đã nhiều người biết. Hôm nay bài viết này chia sẻ cách phát hiện khuôn mặt bằng OpenCV JS (Javascript). Ưu điểm là có thể chạy ngay trên trình duyệt Chrome và bạn có thể thiết kế giao diện bằng HTML.
Bài viết này chia sẻ source code để phát hiện được khuôn mặt và vẽ khuôn mặt ngay trên web. Bạn vui lòng cho phép Chrome mở camera để xem demo.
Lý thuyết
Thư viện OpenCV JS được viết bằng Javascript phục vụ cho các ứng dụng cần chạy online. Tuy nhiên code xử lý native của OpenCV viết bằng C++ đã được compile thành wasm (Web Assembly).
WASM được nạp vào trình duyệt dưới định dạng nhị phân, vì vậy mã nguồn thường sẽ được viết bằng cách ngôn ngữ cấp cao như C/C++, Rust,… sau đó sẽ được biên dịch về định dạng nhị phân của WASM.
OpenCV đã compile ra định dạng wasm để tăng tốc xử lý cho các ứng dụng chạy bằng Javascript.
Kiến thức cần có:
– Đầu tiên bạn phải biết Play webcam trên Chrome hoặc Firefox
– Hiểu về Phát hiện đối tượng bằng Cascade
– Và 1 ít kiến thức về Javascript, CSS, HTML
Cách hoạt động:
– Đầu tiên trang web HTML sẽ load các file cần thiết như model Cascade, opencv_js.wasm,…
– Sau đó play webcam
– Với mỗi frame thì tiến hành detect object
– Nếu tìm thấy object thì vẽ khung chữ nhật bao lấy đối tượng. Nếu không tìm thấy thì tiến hành xử lý frame tiếp theo.
– Hiển thị lên web cho user xem
Source code
Các bạn clone source về rồi chạy file detect_cascade_online/index.html để xem code hoạt động
https://github.com/thigiacmaytinh/OpenCV_JS_Example
Hoặc các bạn chạy trực tiếp code ở https://thigiacmaytinh.com/onlinetools/detect_cascade_online/ và save source code cho nhanh.