Как получить доступ к камере мобильного телефона из веб-приложения?

117

В моем веб-приложении (не в обычном приложении) для мобильных телефонов, я хочу сделать снимок и загрузить его, но я не хочу использовать Adobe Flash. Есть ли способ сделать это?

  • 1
    Какое оборудование и ОС?
  • 2
    «Веб-страница» означает, что к ней должны быть легко доступны любые клиенты / устройства. Итак, я должен установить ограничения?
Показать ещё 2 комментария
Теги:
camera
mobile

9 ответов

186

В iPhone iOS6 и Android ICS, HTML5 имеет следующий тег, который позволяет делать снимки с вашего устройства:

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

Capture может принимать значения, такие как камера, видеокамера и аудио.

Я думаю, что этот тег определенно не работает в iOS5, не уверен в этом.

  • 29
    Вот отличный учебник: html5rocks.com/en/tutorials/getusermedia/intro
  • 2
    GetUserMedia здесь не требуется.
Показать ещё 7 комментариев
24

В настоящее время по крайней мере с android это относительно легко. Просто используйте обычный тег ввода файла, и когда пользователь нажимает на него, телефон спросит, хочет ли пользователь использовать камеру (или файловые менеджеры и т.д.) Для загрузки файла. Просто сделайте снимок с помощью камеры, и он будет автоматически добавлен и загружен.

Не знаю о iphone. Может быть, кто-то может просветить это. EDIT: Iphone работает аналогично.

Пример входного тега:

<input type="file" accept="image/*" capture="camera">
  • 0
    Вы можете сделать это для нескольких файлов, таких как: несколько = "несколько"
  • 0
    пример: <input type = "file" accept = "image / *" множественный = "множественный" захват = "камера">
Показать ещё 2 комментария
13

Safari и Chrome на iOS 6+ и Android 2.2+ поддерживают функцию HTML Media Capture, которая позволяет делать снимки с помощью камеры устройства или выбирать существующую:

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

Вот как это работает на iOS 10:

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

Android 3.0+ и Safari на iOS10.3 + также поддерживают атрибут capture, который используется для прямого перехода к камере.

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

capture="camera" (String) и accept="image/*;capture=camera" (Parameter) были частью старых спецификаций и были заменены на capture (Boolean) Рекомендацию кандидата W3C.

Документация по поддержке: это 2013 O'Reilly book и мое тестирование

  • 0
    Мой на Android просто переходит прямо к выбору фотографий, но не дает мне возможность для камеры, даже когда я установил захват = "камера" .... полностью застрял
  • 0
    @Benyaman Попробуй с capture вместо capture="camera" . Любопытно, что устройство и версия Android.
Показать ещё 1 комментарий
4

Вы можете использовать WEBRTC, но, к сожалению, он не поддерживается всеми веб-браузерами. НИЖЕ ЛИНИЯ ПОКАЗАТЬ, КОТОРЫЕ БРОУЗЕРЫ поддерживают его http://caniuse.com/stream

И эта ссылка дает вам представление о том, как вы можете получить к ней доступ (пример кода). http://www.html5rocks.com/en/tutorials/getusermedia/intro/

  • 2
    WebRTC и getUserMedia , <input type="file" accept="image/*"> добьется цели.
4

Ну, есть новые возможности HTML5 для доступа к собственной камере устройства - "API-интерфейс getUserMedia"

ПРИМЕЧАНИЕ. HTML5 может обрабатывать захват фотографий с веб-страницы на устройствах Android (по крайней мере, в последних версиях, запущенных ОС Honeycomb, но не может обрабатывать их на iPhone, но iOS 6).

  • 0
    И эта особенность ...?
  • 0
    ой, извините, это вызов setUserMedia API
4

AppMobi HTML5 SDK однажды обещал доступ к встроенным функциям устройства, включая камеру, из приложения на основе HTML5, но больше не принадлежит Google. Вместо этого попробуйте ответы на основе HTML5 в этом сообщении.

  • 1
    Я не верю, что Google владеет AppMobi или их продуктами.
  • 0
    Ах, моя ошибка, потому что она есть в интернет-магазине Chrome - ссылка Google удалена. Вот настоящие партнеры: appmobi.com/?page_id=468
2

Чтобы обновить это, теперь стандартом является:

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

для доступа к фронтальной камере и

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

для пользовательской камеры. Чтобы получить доступ к видео, замените "видео" на "изображение" на имя.

Протестировано на iPhone 5c, работает iOS 10.3.3, прошивка 760, отлично работает.

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

0

Я не думаю, что вы можете - есть W3C draft API, чтобы получить аудио или видео, но пока нет какой-либо реализации основных мобильных ОС.

Второй лучший Единственный вариант - пойти с предложением Денниса использовать PhoneGap. Это будет означать, что вам нужно создать собственное приложение и добавить его в магазин/рынок мобильных приложений.

  • 0
    извините за репост - я искал, если вы обошли исключение NPE с клиентом джерси на Android. застрял :(
-2

Я не знаю, как можно получить доступ к камере мобильного телефона из веб-браузера без какого-либо дополнительного механизма (например, Flash или какой-либо тип контейнера, который обеспечивает доступ к API-интерфейсу)

Для последних взгляните на PhoneGap: http://docs.phonegap.com/phonegap_camera_camera.md.html

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

  • 4
    Это все еще требует, чтобы приложение было установлено на мобильном устройстве, чего, как я думаю, ОП хочет избежать.
  • 0
    @MichaelPetrotta ты знаешь лучший способ?
Показать ещё 2 комментария

Ещё вопросы

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