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?
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?
Respuestas:
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.
<input type="file" accept="image/*;capture=camera">
en su lugar. Según MDN, no hay capture
atributo para un input
elemento.
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
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">
multiple
funciona tanto en Android como en iOS, consulte Sintaxis correcta para la captura de medios HTML
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.
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:
Android 3.0+ y Safari en iOS10.3 + también admiten el capture
atributo 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
capture
lugar de capture="camera"
. Curioso qué dispositivo y versión de Android.
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).
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/
getUserMedia
es excesivo, <input type="file" accept="image/*">
hará el truco.
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 .
Querrá usar getUserMedia para acceder a la cámara.
Este tutorial describe los conceptos básicos para acceder a la cámara de un dispositivo desde el navegador: https://medium.com/@aBenjamin765/make-a-camera-web-app-tutorial-part-1-ec284af8dddf
Nota: Esto funciona en la mayoría de los dispositivos Android y solo en iOS en Safari.
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
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.
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.