Как получить доступ к камере мобильного телефона из веб-приложения?
191
В своем веб-приложении (не нативном) для мобильных устройств я хочу сделать фотографию и загрузить ее, но я не хочу использовать Adobe Flash. Есть какой-либо способ сделать это?
«Веб-страница» означает, что к ней должны быть легко доступны любые клиенты / устройства. Итак, я должен установить ограничения?
劇場 期 劇場
1
Я полагаю, вы хотите получить доступ к аппаратной камере, верно?
Деннис Трауб
Хм .. "Камера" мобильных смартфонов / и т.д .. с веб-страницы.
劇場 期 劇場
Привет, это тема, которую я сейчас изучаю для своих собственных проектов. Альбиносы позволяют использовать возможности нативные устройств в современных браузерах: developers.google.com/web/updates/2016/12/imagecapture
palmaone
Ответы:
260
В iPhone iOS6 и начиная с Android ICS и далее HTML5 имеет следующий тег, позволяющий делать снимки с вашего устройства:
В настоящее время, по крайней мере, с Android это относительно легко. Просто используйте обычный тег ввода файла, и когда пользователь щелкнет по нему, телефон спросит, хочет ли пользователь использовать камеру (или файловые менеджеры и т. Д.) Для загрузки файла. Просто сделайте фотографию с камерой, и она будет автоматически добавлена и загружена.
Понятия не имею об iphone. Может быть, кто-то может пролить свет на это. РЕДАКТИРОВАТЬ: Iphone работает аналогично.
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.
Мой на Android просто переходит прямо к выбору фотографий, но не дает мне возможность для камеры, даже когда я установил захват = "камера" .... полностью застрял
Benyaman
@Benyaman Попробуй captureвместо capture="camera". Любопытно, что устройство и версия Android.
Октавиан Найку
Я сделал, на Android 5.0, очевидно, Phonegap не имеет встроенного захвата HTML. Таким образом, он не может захватывать вещи, ни записи видео, ни звука, ни камеры. Я должен был построить работу вокруг.
Беняман
5
ну, есть новая функция HTML5 для доступа к встроенной камере устройства - «getUserMedia API»
ПРИМЕЧАНИЕ. HTML5 может обрабатывать захват фотографий с веб-страницы на устройствах Android (по крайней мере, в последних версиях, работающих под управлением ОС Honeycomb; но он не может обрабатывать их на iPhone, кроме iOS 6).
Вы можете использовать WEBRTC, но, к сожалению, он поддерживается не всеми веб-браузерами. НИЖЕ ССЫЛКА, ЧТОБЫ ПОКАЗАТЬ, КАКИЕ БРАУЗЕРЫ поддерживают это
http://caniuse.com/stream
WebRTC и getUserMediaизлишне, <input type="file" accept="image/*">сделает свое дело.
Октавиан Найку
4
AppMobi HTML5 SDK когда-то обещал доступ к встроенным функциям устройства - включая камеру - из приложения на основе HTML5, но больше не принадлежит Google. Вместо этого попробуйте ответы на основе HTML5 в этом посте .
Следует отметить, что реализованы функции безопасности, которые требуют, чтобы приложение работало локально под localhost или через SSL для работы GetUserMedia ().
Я обнаружил это, когда попробовал несколько доступных демоверсий, и был разочарован, когда они не работали! Смотрите: Новые ограничения безопасности
Я не думаю, что вы можете - есть черновой API W3C для получения аудио или видео, но пока нет реализации ни в одной из основных мобильных ОС.
Второй лучший вариант Единственный вариант - согласиться с предложением Денниса использовать PhoneGap. Это будет означать, что вам нужно создать собственное приложение и добавить его в магазин мобильных приложений.
извините за репост - я искал, если вы обошли исключение NPE с клиентом джерси на Android. застрял :(
Некромант
0
Я не знаю ни одного способа получить доступ к камере мобильного телефона из веб-браузера без какого-либо дополнительного механизма (например, Flash или какого-либо типа контейнера, который обеспечивает доступ к аппаратному API)
Для этого по-прежнему необходимо установить приложение на мобильном устройстве, чего, как я думаю, ОП хочет избежать.
Майкл Петротта
@MichaelPetrotta ты знаешь лучший способ?
Деннис Трауб
2
Я не верю, что то, о чем просит ОП, возможно.
Майкл Петротта
@MichaelPetrotta, я тоже так думаю. И лучший способ, о котором я могу думать, это PhoneGap, так как он работает на iOS (а Flash - нет). Тем не менее, это правда, но, по крайней мере, обеспечивает кроссплатформенный доступ к камерам с веб-страницы.
Ответы:
В iPhone iOS6 и начиная с Android ICS и далее HTML5 имеет следующий тег, позволяющий делать снимки с вашего устройства:
Capture
может принимать значения, такие как камера, видеокамера и аудио.Я думаю, что этот тег определенно не будет работать в iOS5, не уверен в этом.
источник
<input type="file" accept="image/*;capture=camera">
вместо этого. Согласно MDN,capture
дляinput
элемента нет атрибута .capture="camera"
(String) и старшееaccept="image/*;capture=camera"
были заменены в 2012 году наcapture="capture"
(Boolean). Атрибут используется для принудительного захвата вместо выбора из библиотеки. См. Спецификацию и правильный синтаксис для захвата мультимедиа в формате HTMLВ настоящее время, по крайней мере, с Android это относительно легко. Просто используйте обычный тег ввода файла, и когда пользователь щелкнет по нему, телефон спросит, хочет ли пользователь использовать камеру (или файловые менеджеры и т. Д.) Для загрузки файла. Просто сделайте фотографию с камерой, и она будет автоматически добавлена и загружена.
Понятия не имею об iphone. Может быть, кто-то может пролить свет на это. РЕДАКТИРОВАТЬ: Iphone работает аналогично.
Пример входного тега:
источник
multiple
работает как на Android, так и на iOS, см. Правильный синтаксис для захвата мультимедиа в формате HTMLПросто чтобы обновить это, стандарт теперь:
чтобы получить доступ к окружающей (задней) камере, и
для фронтальной камеры. Чтобы получить доступ к видео, замените «видео» на «изображение» в названии.
Протестировано на iPhone 5c, работает под управлением iOS 10.3.3, прошивка 760, работает отлично.
https://www.w3.org/TR/html-media-capture/
источник
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 года и мое тестирование
источник
capture
вместоcapture="camera"
. Любопытно, что устройство и версия Android.ну, есть новая функция HTML5 для доступа к встроенной камере устройства - «getUserMedia API»
ПРИМЕЧАНИЕ. HTML5 может обрабатывать захват фотографий с веб-страницы на устройствах Android (по крайней мере, в последних версиях, работающих под управлением ОС Honeycomb; но он не может обрабатывать их на iPhone, кроме iOS 6).
источник
Вы можете использовать WEBRTC, но, к сожалению, он поддерживается не всеми веб-браузерами. НИЖЕ ССЫЛКА, ЧТОБЫ ПОКАЗАТЬ, КАКИЕ БРАУЗЕРЫ поддерживают это http://caniuse.com/stream
И эта ссылка дает вам представление о том, как вы можете получить к нему доступ (пример кода). http://www.html5rocks.com/en/tutorials/getusermedia/intro/
источник
getUserMedia
излишне,<input type="file" accept="image/*">
сделает свое дело.AppMobi HTML5 SDK когда-то обещал доступ к встроенным функциям устройства - включая камеру - из приложения на основе HTML5, но больше не принадлежит Google. Вместо этого попробуйте ответы на основе HTML5 в этом посте .
источник
Вы хотите использовать getUserMedia для доступа к камере.
В этом руководстве описаны основы доступа к камере устройства из браузера: https://medium.com/@aBenjamin765/make-a-camera-web-app-tutorial-part-1-ec284af8dddf
Примечание. Это работает на большинстве устройств Android и только в iOS в Safari.
источник
Следует отметить, что реализованы функции безопасности, которые требуют, чтобы приложение работало локально под localhost или через SSL для работы GetUserMedia ().
Я обнаружил это, когда попробовал несколько доступных демоверсий, и был разочарован, когда они не работали! Смотрите: Новые ограничения безопасности
источник
Я не думаю, что вы можете - есть черновой API W3C для получения аудио или видео, но пока нет реализации ни в одной из основных мобильных ОС.
Второй лучшийвариант Единственный вариант - согласиться с предложением Денниса использовать PhoneGap. Это будет означать, что вам нужно создать собственное приложение и добавить его в магазин мобильных приложений.источник
Я не знаю ни одного способа получить доступ к камере мобильного телефона из веб-браузера без какого-либо дополнительного механизма (например, Flash или какого-либо типа контейнера, который обеспечивает доступ к аппаратному API)
Для последнего взгляните на PhoneGap: http://docs.phonegap.com/phonegap_camera_camera.md.html
Благодаря этому вы сможете получить доступ к камере, по крайней мере, на устройствах с iOS и Android.
источник