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

135

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

Теги:
camera

5 ответов

111

Вы можете попробовать следующее:

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

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

Изображение 5052

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

  • 4
    Это потрясающе на Android тоже!
  • 1
    Хорошая демонстрация для загрузки на сервер. Кто-нибудь знает, как изменить это, чтобы сохранить изображение в локальном альбоме на устройстве?
Показать ещё 10 комментариев
24

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

<input type="file">

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

Изображение 5053

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

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

  • 1
    Есть ли какой-нибудь способ запретить пользователям выбирать файл из библиотеки фотографий? Я хочу принять только недавно сделанное изображение.
  • 0
    @ Дэрил не на iOS. Android поддерживает атрибут capture который делает именно это. См. Правильный синтаксис для захвата медиа HTML
Показать ещё 2 комментария
23

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

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

EDIT: В w3c есть спецификация, что iOS6 Safari, похоже, реализует подмножество. Атрибут capture заметно отсутствует.

9

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

<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, более подробную информацию можно найти на получить пользовательские носители

4

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

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню