Chụp ảnh tự sướng với JavaScript

Bấy lâu nay bạn toàn Selfie với chiếc điện thoại của mình, vậy bây giờ hãy thử chụp ảnh tự sướng theo cách hoàn toàn mới xem sao, đó là chụp ảnh tự sướng với JavaScript.

Trong hướng dẫn này, mình sẽ cho bạn thấy làm thế nào để làm cho một ứng dụng JavaScript Photobooth chụp ảnh bằng cách sử dụng camera trên điện thoại, máy tính xách tay hoặc máy tính để bàn của bạn. Mình sẽ giới thiệu một số API gốc tuyệt vời mà cho phép thực hiện dự án mà không cần bất kỳ phụ thuộc bên ngoài, thư viện của bên thứ ba hay Flash mà chỉ với JavaScript!

Lưu ý rằng ứng dụng này sử dụng công nghệ thử nghiệm mà không có sẵn trên máy tính để bàn và điện thoại di động Safari.

App

Để người dùng cuối ứng dụng của chúng tôi chỉ là một phiên bản đơn giản hóa của các ứng dụng máy ảnh, bạn có thể tìm thấy trên bất kỳ điện thoại thông minh. Nó sử dụng một máy ảnh phần cứng để chụp ảnh – đó là nó. Dưới mui xe, tuy nhiên, một toàn bộ rất nhiều phép thuật JavaScript đang xảy ra. Dưới đây là một tổng quan cấp cao:

  1. Chúng tôi truy cập vào máy ảnh và nhận được một luồng video từ nó bằng cách sử dụng getUserMedia API.
  2. Chiếu dòng camera lên một phần tử HTML video.
  3. Khi người dùng muốn chụp ảnh, chúng tôi sao chép khung hình hiện tại và vẽ nó trên một phần tử canvas.
  4. Biến canvas thành một hình ảnh bằng  dataURL, sau đó có thể được hiển thị trên màn hình hoặc tải xuống dưới dạng PNG.

Sẽ thú vị hơn khi bạn được xem mã và test thử. Các bạn có thể Download code đầy đủ với link ở gần cuối của trang này hoặc kiểm tra các bản demo trên JSfiddle.

Hãy nhớ rằng các API navigator.getUserMedia thì coi như là phản đối, nhưng nó vẫn có hỗ trợ trình duyệt khá tốt và là cách duy nhất để truy cập vào máy ảnh ngay bây giờ, cho đến khi nó thay thế trong tương lai – navigator.mediaDevices.getUserMedia trình duyệt hỗ trợ rộng hơn.

Demo chụp ảnh tự sướng với JavaScript trên JSfiddle
Demo chụp ảnh tự sướng với JavaScript trên JSfiddle

Cấp quyền truy cập vào máy ảnh

JavaScript cung cấp một API bản địa để truy cập vào bất kỳ phần cứng máy ảnh trong hình thức của phương pháp navigator.getUserMedia. Kể từ khi nó xử lý dữ liệu cá nhân làm việc API này chỉ có trong các kết nối HTTPS an toàn và luôn luôn yêu cầu sự cho phép của người dùng trước khi tiếp tục.

Cấp quyền truy cập máy ảnh
Cấp quyền truy cập máy ảnh

Bạn có thể download code đầy đủ tại đây, hoặc có thể copy trong đoạn mã nhúng mình nhúng vào trên kia.

Link Dropbox: https://www.dropbox.com/s/oqslhw4dx53q800/%5BNTCDE.COM%5Dchup-anh-selfie-voi-js.zip 

[Hack Time] Cuối tuần tập viết Extension cho Chrome 7 câu chuyện bắt buộc bạn phải khắc cốt ghi tâm Sinh viên nên đi làm thêm Hôm nay khác hôm qua và ngày mai như thế nào? Top 30 trang web Get link max speed Yêu là “Tha thu” Hãy bắt đầu trò chuyện, ngay cả khi chẳng có gì để nói Viết ngôn ngữ lập trình – Ai cũng làm được? Clean code – mã sạch và con đường trở thành better developer (p2) Clean code – mã sạch và con đường trở thành better developer (p1)

2 thoughts on “Chụp ảnh tự sướng với JavaScript

  1. Chào Ad! cho mình file javascipt,html,css mình đặt tên như thế nào để nó liên kết được với nhau? mình đã làm rồi mà các file không liên kết.

    1. Mình làm thấy ok mà bạn.. Không thì bạn dowload source code Ad có để link dưới cùng của bài viết đó

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.