Video học lập trình mỗi ngày

Trong bài viết này, tôi sẽ chỉ cho bạn cách truy cập camera của thiết bị trên một trang web thông qua JavaScript và hỗ trợ nhiều trình duyệt mà không cần đến các thư viện bên ngoài. 

Với JavaScript thì không gì là không thể, trước đây chúng tôi đã giới thiệu về cách "phát hiện rung lắc trên mobile sử dụng JavaScript" và bây giờ tips JavaScript sẽ giới thiệu cho bạn một cách truy cập camera trước và sau của thiết bị di dộng. 

Bài viết rất đơn giản nhưng mang đến một phát hiện mới về ngôn ngữ lập trình JavaScript. Để đạt được điều này thì bạn sẽ tập trung vào những vấn đề chính sau, kèm theo đó xem DEMO và code dưới bài viết là có thể thực hiện được.

Cách sử dụng API camera

Để truy cập máy ảnh (hoặc micrô) của người dùng, chúng tôi sử dụng API MediaStream của JavaScript. API cho phép truy cập trực tuyến vào video và âm thanh được ghi lại bởi các thiết bị này. Bước đầu tiên là kiểm tra xem trình duyệt có hỗ trợ API này hay không:

if (
    !"mediaDevices" in navigator ||
    !"getUserMedia" in navigator.mediaDevices
  ) {
    document.write('Not support API camera')
    return;
  }

Truy cập camera sử dụng mediaDevices

const videoStream = await navigator.mediaDevices.getUserMedia({ video: true }); Đoạn code trên sẽ hỏi người dùng có cho phép truy cập vào camera không. Nếu người dùng từ chối, nó sẽ đưa ra một try/catch. Vì vậy, bạn phải sử dụng try/catch trong tình huống này 

Xin lưu ý rằng nó trả về một Promise, vì vậy bạn phải sử dụng async/await thoặc then() để get data đấy.

try {
    videoStream = await navigator.mediaDevices.getUserMedia(constraints);
    video.srcObject = videoStream;
} catch (error) {
    console.log(error)
}

Truy cập camera trước và sau của mobile

Theo mặc định, getUserMedia thiết bị quay video mặc định của hệ thống sẽ được sử dụng. Nếu là điện thoại di động có hai camera thì nó sử dụng camera trước. Để truy cập camera phía sau, chúng tôi phải đưa vào thông số kỹ thuật của video faceModeMode:"environment"

const constraints = {
  video: {
    width: { ... },
    height: { ... },
    facingMode: "environment"
  },
}

Giá trị mặc định faceingMode:"user" là camera trước.

Chụp ảnh bằng javascript

Sử dụng canvas để Chụp ảnh màn hình javascript

const canvas = document.querySelector("#canvas");
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
canvas.getContext("2d").drawImage(video, 0, 0);

Code full và demo

Các bạn có thể xem CODE và DEMO tại đây. Ở đó bạn sẽ mở  view page source lên để check source nhé.