Taking still photos with getUserMedia()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2017.
Bài viết này trình bày cách dùng navigator.mediaDevices.getUserMedia() để lấy luồng video từ webcam, hiển thị nó trong phần tử video, chụp một khung hình tĩnh vào canvas, và cuối cùng xuất ảnh PNG.
Demo
Ví dụ này minh họa cách dùng navigator.mediaDevices.getUserMedia() để thiết lập một media stream bằng webcam hoặc thiết bị video khác, lấy một hình ảnh từ stream đó, và tạo một PNG từ hình ảnh ấy.
Hướng dẫn
Luồng làm việc gồm các bước chính sau:
- Yêu cầu quyền truy cập camera bằng
getUserMedia(). - Gán stream vào một phần tử
video. - Chờ sự kiện
canplayđể biết kích thước video thực tế. - Vẽ khung hình hiện tại lên
canvas. - Chuyển
canvasthành dữ liệu ảnh và hiển thị trongimg.
Phần còn lại của bài viết giải thích chi tiết HTML, CSS và JavaScript dùng cho ví dụ này, bao gồm cách xử lý nút chụp ảnh và cách áp dụng bộ lọc CSS nếu có.