Abrir la cámara de un dispositivo móvil desde un formulario web
|Para los que desarrollamos aplicaciones web que sean compatibles con en dispositivos móviles tanto como en los escritorios nos preocupamos porque la aplicación trabaje lo mas natural posible.
Gracias a mi amigo Rodolfo que me mostró la forma que como tener un input file en un formulario web y que este levante la camara del teléfono para hacer la captura directamete desde ahí.
De hecho no hay que hacerle mayor cosa a la etiqueta input en html más que agregarle el parámetro capture de la siguiente forma:
1 |
<input name="imagen" type="file" accept="image/*" capture="camera"/> |
Al agregar accept estamos estableciendo que solo queremos imágenes en ese input y con capture le indicamos que la captura la haga desde la cámara. Por otro lado si queremos seleccionar la fuente de la imágen ya sea desde la cámara o desde la galería lo dejamos así:
1 |
<input name="imagen" type="file" accept="image/*" /> |
Porsupuesto esto solo funciona desde los navegadores de los dispositivól móviles, en el escritorio funcionara como un input cualquiera en donde tenes que buscar la ruta de la imágen.
Código completo para copiar y pegar:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html> <head> <title>Tomar imágen desde la cámara en teléfono móvil</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div> <h2>Tomar imágen desde la cámara en teléfono móvil</h2> <form enctype="multipart/form-data"> Seleccionar fuente de la imágen: <input name="imagen1" type="file" accept="image/*" /> <br/><br/><br/> Abrir directamente la camara del teléfono móvil: <input name="imagen2" type="file" accept="image/*" capture="camera"/> </form> <br/><br/><br/> <b>http://blog.kiuvox.com</b> </div> </body> </html> |
Amigo tengo una duda, y si entra desde su móvil y quiero que solo seleccione archivos desde el explorador, que no le aparezca la opción de cámara algo así como bloquear esa opción, como lo haría
He investigado un poco y honestamente no parece haber una forma de evitar que también te presente la cámara. Esto también depende del navegador porque en Chrome te da la opción de seleccionarla, pero en Firefox solo te presenta el sistema de archivos para este tipo de input:
<input name="imagen1" type="file" accept="image/*" />
Hola, lo e intentado y funciona bien, toma la foto y me pide desde donde la quiero obtener, lo tengo complementado con un formulario en php, si selecciono el archivo desde galeria lo sube a mi bd sin problema, pero si tomo la fotografía me tira un error, alguna idea de que deba de revisar? saludos
Encontraste la solución? tengo el mismo problema