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

Question

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

Answer 1

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

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

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

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

Answer 2

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

Понятия не имею об iphone. Может быть, кто-то может пролить свет на это. РЕДАКТИРОВАТЬ: Iphone работает аналогично.

Образец тега ввода:

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

Answer 3

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

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

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

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 книга О'Рейли и мое тестирование

Answer 4

Просто, чтобы обновить это, стандарт теперь:

<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/

Answer 5

Что ж, есть новые функции HTML5 для доступа к встроенной камере устройства - «getUserMedia API»

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

Answer 6

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

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

Answer 7

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

Answer 8

Вы хотите использовать getUserMedia для доступа к камере.

В этом руководстве описаны основы доступа к камере устройства из браузера: https://medium.com/@aBenjamin765/make-a-camera-web-app-tutorial-part-1-ec284af8dddf

Примечание. Это работает на большинстве устройств Android и только в iOS в Safari.

Answer 9

Следует отметить, что реализованы функции безопасности, которые требуют, чтобы приложение запускалось локально под localhost или через SSL для работы GetUserMedia ().

Я обнаружил это, когда попробовал несколько доступных демонстраций, и был разочарован, когда они не работали! См .: Новые ограничения безопасности

Answer 10

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

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