¿Cómo acceder a la cámara de un móvil desde una aplicación web?

191

En mi aplicación web (no aplicación nativa) para móviles, quiero tomar una foto y subirla, pero no quiero usar Adobe Flash. ¿Hay alguna forma de hacer esto?

html mobile camera 夏 期 劇場
fuente
2
"Página web" significa que debe poder acceder fácilmente desde cualquier tipo de clientes / dispositivos. Entonces, ¿debo establecer restricciones?
夏 期 劇場
1
Supongo que quieres acceder a la cámara de hardware, ¿verdad?
Dennis Traub
Hmm .. "Cámara" de los teléfonos inteligentes móviles / etc. de la página web.
夏 期 劇場
Hola, este es un tema que actualmente estoy estudiando para mis propios proyectos. Los PWA le permiten utilizar las funciones nativas del dispositivo en los navegadores modernos: developers.google.com/web/updates/2016/12/imagecapture
palmaone

Respuestas:

260

En iPhone iOS6 y desde Android ICS en adelante, HTML5 tiene la siguiente etiqueta que le permite tomar fotos desde su dispositivo:

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

Capture puede tomar valores como cámara, videocámara y audio.

Creo que esta etiqueta definitivamente no funcionará en iOS5, no estoy seguro de eso.

Ashish
fuente
32
Aquí hay un gran tutorial: html5rocks.com/en/tutorials/getusermedia/intro
Micah
2
GetUserMedia no se requiere aquí.
Ray Nicholus
Recibo un "getUserMedia () no compatible con este dispositivo", pero estoy en un safari y tengo ios7, ¿por qué? - Dan acaba de editar
Dan
10
Creo que tal vez el código debería ser <input type="file" accept="image/*;capture=camera">en su lugar. Según MDN, no hay captureatributo para un inputelemento.
Kenny Evitt
9
Tanto capture="camera"(String) como el anterior accept="image/*;capture=camera"se reemplazaron en 2012 con capture="capture"(Boolean). El atributo se usa para forzar la captura en lugar de seleccionar de la biblioteca. Consulte las especificaciones y la sintaxis correcta para la captura de medios HTML
Octavian Naicu del
36

Hoy en día al menos con Android es relativamente fácil. Simplemente use la etiqueta de entrada de archivo normal y cuando el usuario haga clic en él, el teléfono le preguntará si desea usar la cámara (o administradores de archivos, etc.) para cargar un archivo. Simplemente tome una foto con la cámara y se agregará y cargará automáticamente.

No tengo idea sobre el iphone. Quizás alguien pueda aclarar eso. EDITAR: Iphone funciona de manera similar.

Muestra de la etiqueta de entrada:

<input type="file" accept="image/*" capture="camera">
Esmoquin
fuente
¿puede hacer esto para múltiples archivos como: multiple = "multiple"
parseguy 03 de
ejemplo: <input type = "file" accept = "image / *" multiple = "multiple" capture = "camera">
parseguy
multiplefunciona tanto en Android como en iOS, consulte Sintaxis correcta para la captura de medios HTML
Octavian Naicu
No estoy seguro para otro dispositivo de Apple, al menos esta solución también funciona en iPad ahora.
cytsunny
29

Solo para actualizar esto, el estándar ahora es:

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

para acceder a la cámara (posterior) orientada al entorno, y 

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

para cámara (frontal) orientada al usuario. Para acceder al video, sustituya "video" por "imagen" en el nombre.

Probado en iPhone 5c, con iOS 10.3.3, firmware 760, funciona bien.

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

usuario3204365
fuente
23

Safari y Chrome en iOS 6+ y Android 2.2+ son compatibles con HTML Media Capture que le permite tomar fotos con la cámara de su dispositivo o seleccionar una existente:

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

Así es como funciona en iOS 10:

ingrese la descripción de la imagen aquí

Android 3.0+ y Safari en iOS10.3 + también admiten el captureatributo que se usa para saltar directamente a la cámara.

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

capture="camera"(Cadena) y accept="image/*;capture=camera"(Parámetro) eran parte de especificaciones antiguas y fueron reemplazados por capture(Boolean) la Recomendación del candidato del W3C.

Documentación de soporte: este libro O'Reilly 2013 y mis pruebas

Octavian Naicu
fuente
Mine on Android simplemente salta directamente a Seleccionar fotos, pero no me da la opción de Cámara, incluso cuando configuré capture = "camera" ... totalmente atascado
Benyaman
@Benyaman Prueba con en capturelugar de capture="camera". Curioso qué dispositivo y versión de Android.
Octavian Naicu
Lo hice, en Android 5.0, aparentemente Phonegap no tiene una captura HTML incorporada. Por lo tanto, no puede capturar cosas, sin cámara, sin audio, sin cámara. Tuve que construir un trabajo alrededor.
Benyaman
5

bueno, hay nuevas características HTML5 para acceder a la cámara del dispositivo nativo: "API getUserMedia"

NOTA: HTML5 puede manejar la captura de fotos desde una página web en dispositivos Android (al menos en las últimas versiones, ejecutadas por el sistema operativo Honeycomb; pero no puede manejarlo en iPhones sino iOS 6).

Louis
fuente
oh lo siento es llamar a la API setUserMedia
Louis
4

Puede usar WEBRTC pero desafortunadamente no es compatible con todos los navegadores web. A CONTINUACIÓN ES EL ENLACE PARA MOSTRAR QUE LOS NAVEGADORES LO APOYAN http://caniuse.com/stream

Y este enlace le da una idea de cómo puede acceder (código de muestra). http://www.html5rocks.com/en/tutorials/getusermedia/intro/

Michael Sultana
fuente
2
WebRTC y getUserMediaes excesivo, <input type="file" accept="image/*">hará el truco.
Octavian Naicu
4

AppMobi HTML5 SDK prometió una vez el acceso a la funcionalidad nativa del dispositivo, incluida la cámara, desde una aplicación basada en HTML5, pero ya no es propiedad de Google. En su lugar, pruebe las respuestas basadas en HTML5 en esta publicación .

Dave Everitt
fuente
1
No creo que Google tenga ninguna propiedad sobre AppMobi o sus productos.
fakeguybrushthreepwood
Ah, mi error, porque está en la tienda web de Chrome, se eliminó la referencia de Google. Aquí están los socios reales: appmobi.com/?page_id=468
Dave Everitt
1

Cabe señalar que se han implementado características de seguridad que requieren que la aplicación se ejecute localmente en localhost, o mediante SSL para que GetUserMedia () funcione.

¡Descubrí esto cuando probé varias de las demostraciones disponibles y me decepcionó cuando no funcionaron! Ver: nuevas restricciones de seguridad

Anthony Griggs
fuente
0

No creo que pueda: hay un borrador de API del W3C para obtener audio o video, pero aún no hay implementación en ninguno de los principales sistemas operativos móviles.

Segundo mejor La única opción es ir con la sugerencia de Dennis de usar PhoneGap. Esto significará que necesita crear una aplicación nativa y agregarla a la tienda / mercado de aplicaciones móviles.

Kevin
fuente
lamento volver a publicar: estaba buscando para ver si superaste la excepción NPE con el cliente jersey en Android. pegado :(
nigromante
0

No conozco ninguna forma de acceder a la cámara de un teléfono móvil desde el navegador web sin algún mecanismo adicional (es decir, Flash o algún tipo de contenedor que permita el acceso a la API de hardware)

Para lo último, eche un vistazo a PhoneGap: http://docs.phonegap.com/phonegap_camera_camera.md.html

Con esto, debería poder acceder a la cámara al menos en dispositivos iOS y Android.

Dennis Traub
fuente
44
Eso todavía requiere que se instale una aplicación en el dispositivo móvil, que es lo que creo que el OP quiere evitar.
Michael Petrotta
@MichaelPetrotta, ¿conoces una mejor manera?
Dennis Traub
2
No creo que sea posible lo que pide el OP.
Michael Petrotta
@MichaelPetrotta, eso es lo que pienso también. Y la mejor manera en que puedo pensar sería PhoneGap, ya que funciona en iOS (que Flash no). Todavía es nativo, cierto, pero permite al menos un poco de acceso multiplataforma a las cámaras desde una página web.
Dennis Traub