Close

HTML5: Abrir Cámara Fotográfica en dispositivos móviles

Les quiero mostrar como podemos hacer uso de la cámara en  nuestro celular desde el navegador web con el campo input type=»file» y sus nuevos atributos de HTML5

  •  En el código de arriba podemos apreciar que tenemos el input type=»file» que es un campo de texto que nos permite almacenar un archivo para posteriormente nosotros manipularlo.
  • atributo accept=»image/*»  le decimos que nuestro input file solo acepte imágenes, que si lo abrimos desde nuestro Android nos abrirá automáticamente la cámara, si no pusiéramos este atributo al picarle al botón nos preguntara «Con que aplicación desea activar esta acción» y nos dará a escoger el file manager, cámara , vídeo, dropbox etc… dependiendo de que apps tengamos instaladas en nuestro celular
  • atributo capture : es para que nos abra la cámara al instante y no pregunte con que aplicación desea tomar la foto.

El Resultado:

Desarrollo Hidrocalido - Ejemplo Cámara con HTML5

Si lo visualizamos desde un dispositivo móvil nos abrirá directamente la Cámara.

Conclusión :
En muchas ocasiones al ver este tipo de manipulación del dispositivo, nosotros ya lo queremos desarrollar en un SDK como Android o XCode, pero con HTML5 nos trae bastantes mejoras que nos podrían ahorrar tiempo y trabajo desarrollándolo por medio de la Web. Claro obviamente tiene que ver mucho las necesidades que tengamos.

28 thoughts on “HTML5: Abrir Cámara Fotográfica en dispositivos móviles

  1. Buen dia,a mi me resulta el siguiente problema, cuando habro la pagina en el navegador y oprimo el boton si me inicia la camara, pero cuando paso este fragmento de codigo a mi app en cordova no me inicia la camara y me manda directo a la galeria de imagenes, sabe por que pasa esto??

  2. Hola, me gustaria saber dos cosas.

    Primero, cambiar el formato del boton del input, porque rompe la estetica «boostrap» que uso.

    Por otro lado, me gustaria saber como podria hacer para que en vez de mostrar elnombre del archivo, previsualizara la imagen.

    gracias.

    1. 1- sería de buscar algún componente que se acople a bootstrap para que no se vea el botón tan simple, en la documentación de bootstrap si te fijas así muestra los input type file
      2 – para visualizar la imagen te recomiendo que busques alguna librería que lo haga .
      Saludos

  3. Hola, me gustaría saber si por medio de Media Capture mientras que se esta grabando el audio y vídeo puedo guardar partes del audio o video para enviar poco a poco archivos a un servidor???

  4. Hola:
    Se puede indicar el tamaño de la foto,? Son muy grandes y me gustaria poder reducir su tamaño sin tener que redimensionar.
    Gracias.

  5. Hola, a mi me abre de frente la galeria de fotos, mas no me da acceso a la cámara del celular.. necesito hacer q pueda tomar fotos de frente y luego subirlo al servidor a una base de datos. Podrías ayudarme por favor??

  6. La camara tiene que tener internet para que funcione?? como se haria el programa si no se cuentacon internet???

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.