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

150

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

ios html camera

— Юля
источник

124

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

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

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

Screenhot

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

— Xeroxoid
источник

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 это может быть видео с камеры, фото с камеры или фото / видео из библиотеки фотографий.

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

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

— Саймон Ист
источник

1

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

— Дэрил

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

— Октавиан Найку

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

— Притиш

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

— Martian2049

25

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

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

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

— user295691
источник

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

— siniradam
источник

4

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

— rakensi
источник

5

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

— Ракенси

1

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

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

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

Спросите URL
Файл ввода (охвачен большинством других сообщений здесь)
Перетаскивание (полезно для настольных браузеров)
Вставить из буфера обмена
Доступ к камере в интерактивном режиме (необходим, если приложение должно мгновенно реагировать на то, что оно «видит», например на QR-коды)

— Christoph
источник