Làm cách nào để truy cập máy ảnh của thiết bị di động từ ứng dụng web?

190

Trong ứng dụng web của tôi (không phải ứng dụng gốc) cho điện thoại di động, tôi muốn chụp ảnh và tải nó lên, nhưng tôi không muốn sử dụng Adobe Flash. Có cách nào để làm điều này?

html mobile camera

— 期
nguồn

2

"Trang web" có nghĩa là, nó có thể dễ dàng truy cập từ bất kỳ loại khách hàng / thiết bị nào. Vì vậy, tôi nên đặt hạn chế?

— 夏期

1

Tôi giả sử, bạn muốn truy cập máy ảnh phần cứng, phải không?

— Dennis Traub

Hmm .. "Camera" của Điện thoại thông minh di động / vv .. từ trang web.

— 夏期劇場

Xin chào, đây là một môn tôi đang học cho các dự án của riêng tôi. PWAs cho phép bạn sử dụng các tính năng của thiết bị gốc trong các trình duyệt hiện đại: developers.google.com/web/updates/2016/12/imagecapture

— palmaone

260

Trong iPhone iOS6 và từ Android ICS trở đi, HTML5 có thẻ sau cho phép bạn chụp ảnh từ thiết bị của mình:

 <input type="file" accept="image/*" capture="camera">

Capture có thể lấy các giá trị như máy ảnh, máy quay phim và âm thanh.

Tôi nghĩ thẻ này chắc chắn sẽ không hoạt động trong iOS5, không chắc chắn về nó.

— Ác mộng
nguồn

32

Đây là hướng dẫn tuyệt vời: html5rocks.com/en/tutorials/getusermedia/intro

— Micah

2

GetUserMedia không bắt buộc ở đây.

— Ray Nicholus

Tôi nhận được "getUserMedia () không được thiết bị này hỗ trợ" - nhưng tôi đang dùng safari và có ios7 - tại sao? - Dan vừa mới chỉnh sửa

— Dan

10

Tôi nghĩ có lẽ mã nên được <input type="file" accept="image/*;capture=camera">thay thế. Theo MDN, không có capturethuộc tính cho một inputyếu tố.

— Kenny Evitt

9

Cả capture="camera"(Chuỗi) và cũ hơn accept="image/*;capture=camera"đã được thay thế vào năm 2012 bằng capture="capture"(Boolean). Thuộc tính được sử dụng để bắt giữ thay vì chọn từ thư viện. Xem thông số kỹ thuật và Cú pháp chính xác cho HTML Media Capture

— Octavian Naicu

36

Ngày nay, ít nhất là với Android, nó tương đối dễ dàng. Chỉ cần sử dụng thẻ nhập tệp bình thường và khi người dùng nhấp vào nó, điện thoại sẽ hỏi người dùng có muốn sử dụng máy ảnh (hoặc trình quản lý tệp, v.v.) để tải lên tệp không. Chỉ cần chụp ảnh bằng máy ảnh và nó sẽ tự động được thêm và tải lên.

Không có ý tưởng về iphone. Có lẽ ai đó có thể khai sáng về điều đó. EDIT: Iphone hoạt động tương tự.

Mẫu của thẻ đầu vào:

<input type="file" accept="image/*" capture="camera">

— Tuxie
nguồn

bạn có thể làm điều này cho nhiều tệp như:

— many

ví dụ: <input type = "file" accept = "image / *"

— many

multiplehoạt động cả trên Android và iOS, xem Cú pháp chính xác cho HTML Media Capture

— Octavian Naicu

Không chắc chắn cho các thiết bị apple khác, ít nhất giải pháp này cũng hoạt động trên iPad ngay bây giờ.

— cytsunny

29

Chỉ cần cập nhật điều này, tiêu chuẩn bây giờ là:

<input type="file" name="image" accept="image/*" capture="environment">

để truy cập vào camera (phía sau) đối mặt với môi trường và

<input type="file" name="image" accept="image/*" capture="user">

cho máy ảnh người dùng (phía trước). Để truy cập video, thay thế "video" cho "hình ảnh" trong tên.

Đã thử nghiệm trên iPhone 5c, chạy iOS 10.3.3, firmware 760, hoạt động tốt.

https://www.w3.org/TR/html-media-capture/

— người dùng3204365
nguồn

23

Safari & Chrome trên iOS 6+ và Android 2.2+ hỗ trợ HTML Media Capture cho phép bạn chụp ảnh bằng máy ảnh của thiết bị hoặc chọn một máy ảnh hiện có:

<input type="file" accept="image/*">

Đây là cách nó hoạt động trên iOS 10:

Android 3.0+ và Safari trên iOS10.3 + cũng hỗ trợ capturethuộc tính được sử dụng để nhảy thẳng vào camera.

<input type="file" accept="image/*" capture>

capture="camera"(Chuỗi) và accept="image/*;capture=camera"(Thông số) là một phần của thông số kỹ thuật cũ và được thay thế bằngcapture (Boolean) Khuyến nghị của Ứng viên W3C.

Tài liệu hỗ trợ: cuốn sách O'Reilly 2013 này và thử nghiệm của tôi

— Octavian Naicu
nguồn

Của tôi trên Android chỉ nhảy thẳng vào Chọn ảnh, nhưng không cho tôi tùy chọn cho Máy ảnh ngay cả khi tôi đã đặt chụp = "máy ảnh" .... hoàn toàn bị kẹt

— Benyaman

@Benyaman Hãy thử với capturethay vì capture="camera". Tò mò thiết bị nào và phiên bản Android.

— Octavian Naicu

Tôi đã làm, trên Android 5.0 rõ ràng Phonegap không tích hợp tính năng chụp HTML. Vì vậy, nó không thể chụp mọi thứ, không camrecord, không âm thanh, không Camera. Tôi đã phải xây dựng một công việc xung quanh.

— Benyaman

5

tốt, có một tính năng HTML5 mới để truy cập vào camera của thiết bị gốc - "API getUserMedia"

LƯU Ý: HTML5 có thể xử lý việc chụp ảnh từ một trang web trên thiết bị Android (ít nhất là trên các phiên bản mới nhất, được chạy bởi Hệ điều hành Honeycomb; nhưng nó không thể xử lý nó trên iPhone trừ iOS 6).

— Louis
nguồn

ồ xin lỗi là gọi setUserMedia API

— Louis

4

Bạn có thể sử dụng WEBRTC nhưng tiếc là nó không được hỗ trợ bởi tất cả các trình duyệt web. DƯỚI ĐÂY LÀ LINK để hiển thị mà các trình duyệt hỗ trợ nó http://caniuse.com/stream

Và liên kết này cung cấp cho bạn một ý tưởng về cách bạn có thể truy cập nó (mã mẫu). http://www.html5rocks.com/en/tutorials/getusermedia/intro/

— Michael Sultana
nguồn

2

WebRTC và getUserMediaquá mức cần thiết, <input type="file" accept="image/*">sẽ thực hiện các mẹo.

— Octavian Naicu

4

AppMobi HTML5 SDK từng hứa hẹn quyền truy cập vào chức năng thiết bị gốc - bao gồm máy ảnh - từ một ứng dụng dựa trên HTML5, nhưng không còn thuộc sở hữu của Google. Thay vào đó, hãy thử các câu trả lời dựa trên HTML5 trong bài viết này .

— Dave Everitt
nguồn

1

Tôi không tin Google có quyền sở hữu đối với AppMobi hoặc các sản phẩm của họ.

— fakeguy Brushthreepwood

À - lỗi của tôi, vì nó trên cửa hàng Chrome trực tuyến - đã xóa tham chiếu Google. Dưới đây là các đối tác thực sự: appmobi.com/?page_id=468

— Dave Everitt

3

Bạn sẽ muốn sử dụng getUserMedia để truy cập máy ảnh.

Hướng dẫn này phác thảo những điều cơ bản khi truy cập máy ảnh của thiết bị từ trình duyệt: https://medium.com/@aBenjamin765/make-a-camera-web-app-tutorial-part-1-ec284af8dddf

Lưu ý: Điều này hoạt động trên hầu hết các thiết bị Android và chỉ trong iOS trong Safari.

— Aaron Benjamin
nguồn

1

Cần lưu ý rằng các tính năng bảo mật đã được triển khai, yêu cầu ứng dụng phải được chạy cục bộ trong localhost hoặc thông qua SSL để GetUserMedia () hoạt động.

Tôi đã phát hiện ra điều này khi thử một vài bản demo có sẵn và đã thất vọng khi chúng không hoạt động! Xem: Hạn chế bảo mật mới

— Anthony Griggs
nguồn

0

Tôi không nghĩ bạn có thể - có API dự thảo W3C để nhận âm thanh hoặc video, nhưng chưa có triển khai nào trên bất kỳ HĐH di động chính nào.

~~Thứ hai tốt nhất~~ Tùy chọn duy nhất là đi với đề xuất của Dennis để sử dụng PhoneGap. Điều này có nghĩa là bạn cần tạo một ứng dụng gốc và thêm nó vào cửa hàng / chợ ứng dụng di động.

— Kevin
nguồn

xin lỗi để đăng lại - tôi đang tìm kiếm xem bạn có xung quanh ngoại lệ NPE với máy khách jersey trên Android không. bị mắc kẹt :(

— necromancer

0

Tôi không biết cách nào để truy cập máy ảnh điện thoại di động từ trình duyệt web mà không cần một số cơ chế bổ sung (ví dụ: Flash hoặc một số loại container cho phép truy cập API phần cứng)

Để xem sau, hãy xem PhoneGap: http://docs.phonegap.com/phonegap_camera_camera.md.html

Với điều này, bạn sẽ có thể truy cập máy ảnh ít nhất trên các thiết bị chạy iOS và Android.

— Dennis Traub
nguồn

4

Điều đó vẫn yêu cầu một ứng dụng được cài đặt trên thiết bị di động, đó là điều tôi nghĩ OP muốn tránh.

— Michael Petrotta

@MichaelPetrotta bạn có biết cách nào tốt hơn không?

— Dennis Traub

2

Tôi không tin những gì OP yêu cầu là có thể.

— Michael Petrotta

@MichaelPetrotta đó là những gì tôi nghĩ là tốt. Và cách tốt nhất tôi có thể nghĩ đến là PhoneGap, vì nó hoạt động trên iOS (mà Flash không có). Vẫn là bản địa, đúng, nhưng cho phép ít nhất một chút quyền truy cập đa nền tảng vào máy ảnh từ một trang web.

— Dennis Traub