Camera truy cập thông qua trình duyệt


150

Chúng tôi đang tạo một trang web HTML5 cho thiết bị di động và cần có quyền truy cập máy ảnh thông qua trình duyệt web mà không phải là ứng dụng gốc. Chúng tôi đang gặp sự cố khi thực hiện công việc này trong iOS. Có ai biết một giải pháp cho việc này?

Câu trả lời:


124

Bạn có thể thử điều này:

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

nhưng nó phải là iOS 6+ để hoạt động. Điều đó sẽ cung cấp cho bạn một đoạn hội thoại hay để bạn chọn chụp ảnh hoặc tải lên từ album của bạn, tức là

Screenhot

Một ví dụ có thể được tìm thấy ở đây: Chụp dữ liệu ảnh / camera mà không cần PhoneGap


5
Đây là TUYỆT VỜI trên Android!
Matt

1
Bản demo đẹp để tải lên máy chủ. Bất cứ ai cũng biết làm thế nào để sửa đổi điều này để lưu hình ảnh vào một album cục bộ trên thiết bị?
K.Niemchot

2
Vấn đề duy nhất là, ít nhất là trên iphone (ios 7.0.4) ít nhất là tại thời điểm nó tạo ra một hình ảnh tạm thời có tên luôn 'image.jpg'. Vì vậy, nếu bạn tải lên một vài hình ảnh trong cùng một hình thức, chúng sẽ ghi đè lên nhau do cùng tên trừ khi bạn làm gì đó để đổi tên chúng, hãy cẩn thận!
aleation

@ K.Niemchot: bạn đã bao giờ hiểu điều đó chưa? Nếu vậy tôi sẽ quan tâm đến giải pháp. Tôi tìm thấy cái này: dev.w3.org/2009/dap/camera (xem ví dụ 6-7 để lưu trữ cục bộ)
lamarant

1
Xuất sắc. Đây là một mẹo nhỏ cho bất cứ ai muốn cho mã này chạy thử trên thiết bị của họ.
Simon East

33

Như năm 2015, bây giờ nó chỉ hoạt động .

<input type="file">

Điều này sẽ yêu cầu người dùng tải lên bất kỳ tập tin. Trên iOS 8.x, đây có thể là video camera, ảnh camera hoặc ảnh / video từ Thư viện ảnh.

Tải lên ảnh / video / tệp iOS / iPhone

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

Điều này là như trên, nhưng giới hạn tải lên hình ảnh chỉ từ máy ảnh hoặc thư viện, không có video.


1
Có cách nào để hạn chế người dùng chọn một tệp từ thư viện ảnh không? Tôi muốn chỉ chấp nhận một hình ảnh mới chụp.
Daryl

@Daryl không có trên iOS. Android hỗ trợ capturethuộc tính làm điều đó. Xem Cú pháp chính xác để ghi lại phương tiện truyền thông HTML
Octavian Naicu

Tôi sẽ đóng cửa sổ bật lên Chụp ảnh hoặc Video và Thư viện ảnh này sau một thời gian người dùng không nhấp vào nó.
Pritish

Có vẻ như các chức năng video không còn nữa?
Sao Hỏa2049

25

Trong iOS6, Apple hỗ trợ điều này thông qua <input type="file">thẻ. Tôi không thể tìm thấy một liên kết hữu ích trong tài liệu dành cho nhà phát triển của Apple, nhưng có một ví dụ ở đây .

Có vẻ như lớp phủ và chức năng nâng cao hơn chưa có sẵn, nhưng điều này sẽ hoạt động cho nhiều trường hợp sử dụng.

EDIT: w3c có một thông số mà iOS6 Safari dường như thực hiện một tập hợp con của. Các capturethuộc tính được đáng chú ý là mất tích.


10

Tôi nghĩ rằng cái này đang làm việc. Ghi video hoặc âm thanh;

<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">

hoặc (phương pháp mới)

<device type="media" onchange="update(this.data)"></device>
<video autoplay></video>
<script>
  function update(stream) {
    document.querySelector('video').src = stream.url;
  }
</script>

Nếu không, có lẽ sẽ hoạt động trên ios6, chi tiết hơn có thể được tìm thấy tại phương tiện truyền thông người dùng


4

Các PicUp ứng dụng là một cách để chụp ảnh từ một trang HTML5 và tải chúng lên máy chủ của bạn. Nó đòi hỏi một số chương trình bổ sung trên máy chủ, nhưng ngoài PhoneGap, tôi không tìm thấy cách nào khác.


5
Trong iOS8, bạn không cần Picup nữa. HTML5 hỗ trợ <input type = "file" accept = "image / *" id = "Capture" Capture = "camera">. Được xác minh trong Safari và Chrome.
rakensi

1

Câu hỏi này đã được vài năm nhưng trong thời gian đó, một số khả năng bổ sung đã phát triển, như truy cập trực tiếp vào máy ảnh, hiển thị bản xem trước và chụp ảnh chụp nhanh (ví dụ: quét mã QR).

Nhà phát triển Google này bài viết cung cấp một chiều sâu Giải thích của tất cả (?) Trong những cách làm thế nào để có được dữ liệu hình ảnh / máy ảnh vào một ứng dụng web, từ "công việc ở khắp mọi nơi" (ngay cả trong máy tính để bàn các trình duyệt) để "làm việc chỉ trên hiện đại, up-to thiết bị di động ngày có camera ". Cùng với nhiều lời khuyên hữu ích.

Phương pháp giải thích:

  • Yêu cầu một URL
  • Nhập tệp (được bao phủ bởi hầu hết các bài viết khác ở đây)
  • Kéo và thả (hữu ích cho trình duyệt máy tính để bàn)
  • Dán từ clipboard
  • Truy cập máy ảnh một cách tương tác (cần thiết nếu ứng dụng cần phản hồi tức thì về những gì nó "nhìn thấy", như mã QR)
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.