Доступ к камере через браузер


150

Мы создаем веб-сайт HTML5 для мобильных устройств, и нам нужно получить доступ к камере через веб-браузер, не являясь нативным приложением. У нас проблемы с работой в iOS. Кто-нибудь знает решение для этого?

Ответы:


124

Вы можете попробовать это:

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

но это должно быть iOS 6+, чтобы работать. Это даст вам хороший диалог для того, чтобы вы могли сделать снимок или загрузить его из своего альбома, т.е.

Screenhot

Пример можно найти здесь: захват данных камеры / изображения без PhoneGap


5
Это потрясающе на Android тоже!
Мэтт

1
Хорошая демонстрация для загрузки на сервер. Кто-нибудь знает, как изменить это, чтобы сохранить изображение в локальный альбом на устройстве?
К.Немчик,

2
Единственная проблема заключается в том, что, по крайней мере, на iphone (ios 7.0.4), по крайней мере, на данный момент он создает временное изображение с именем всегда 'image.jpg'. Поэтому, если вы загружаете несколько изображений в одной форме, они перезаписывают друг друга из-за одного и того же имени, если вы не сделаете что-то для их переименования, будьте осторожны!
вечер

@ K.Niemczyk: ты когда-нибудь понимал это? если так, то я был бы заинтересован в решении. Я нашел это: dev.w3.org/2009/dap/camera (примеры локального хранилища см. В примерах 6-7)
ламарант

1
Brilliant. Вот скрипка для тех, кто хочет протестировать этот код на своем устройстве.
Саймон Ист

33

По состоянию на 2015 год это сейчас просто работает .

<input type="file">

Это попросит пользователя загрузить любой файл. В iOS 8.x это может быть видео с камеры, фото с камеры или фото / видео из библиотеки фотографий.

iOS / iPhone фото / видео / загрузка файлов

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

Это то же самое, что и выше, но оно ограничивает загрузку только фотографиями с камеры или библиотеки, но не видео.


1
Можно ли как-то ограничить пользователей от выбора файла из библиотеки фотографий? Я хочу принять только недавно сделанное изображение.
Дэрил

@ Дэрил не на iOS. Android поддерживает captureатрибут, который делает именно это. См. Правильный синтаксис для захвата медиафайлов в формате HTML
Октавиан Найку

Должен ли я закрыть это всплывающее окно «Снять фото или видео и фото библиотеку» через некоторое время, когда пользователь не щелкнет по нему.
Притиш

Похоже, функций видео больше нет?
Martian2049

25

В iOS6 Apple поддерживает это через <input type="file">тег. Я не мог найти полезную ссылку в документации для разработчиков Apple, но есть пример здесь .

Похоже, оверлеи и более продвинутая функциональность еще не доступны, но это должно работать для многих случаев использования.

РЕДАКТИРОВАТЬ: W3C имеет спецификацию, что iOS6 Safari, кажется, реализует подмножество. captureАтрибут в частности , отсутствует.


10

Я думаю, что этот работает. Запись видео или аудио;

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

или (новый метод)

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

Если это не так, вероятно, будет работать на ios6, более подробную информацию можно найти на get user media


4

Приложение Picup - это способ делать снимки со страницы HTML5 и загружать их на свой сервер. Это требует некоторого дополнительного программирования на сервере, но кроме PhoneGap я не нашел другого пути.


5
В iOS8 вам больше не нужен Picup. HTML5 поддерживает <input type = "file" accept = "image / *" id = "capture" capture = "camera">. Проверено в Safari и Chrome.
Ракенси

1

Этому вопросу уже несколько лет, но за это время появились некоторые дополнительные возможности, такие как прямой доступ к камере, отображение предварительного просмотра и создание снимков (например, для сканирования QR-кода).

Эта статья для разработчиков Google содержит подробное объяснение всех (?) Способов, как получить данные изображения / камеры в веб-приложение, от «работать везде» (даже в настольных браузерах) до «работать только на современных, до мобильные устройства с камерой ". Наряду со многими полезными советами.

Объясненные методы:

  • Спросите URL
  • Файл ввода (охвачен большинством других сообщений здесь)
  • Перетаскивание (полезно для настольных браузеров)
  • Вставить из буфера обмена
  • Доступ к камере в интерактивном режиме (необходим, если приложение должно мгновенно реагировать на то, что оно «видит», например на QR-коды)
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.