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:
- 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.
- Chiếu dòng camera lên một phần tử HTML video.
- 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.
- 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.
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.
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
Hay quá admin
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.
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 đó