Tome una foto de html5

He leído un montón de maneras de adquirir una imagen de una página html5. Todavía no sé qué es lo mejor para mis necesidades:

  • amplio soporte para navegadores y os: al menos: cromo, firefox, android predeterminado, safari
  • No necesito adquisición en tiempo real. El usuario debe presionar un botón para tomar una foto, solicitando la aplicación de cámara del sistema

Hay por lo menos tres soluciones:

  • <input type="file" accept="image/*;capture=camera">
  • Navigator.getUserMedia() (parece obsoleto)
  • MediaDevices.getUserMedia() (parece experimental)

De todos modos, veo un montón de ejemplos para incrustar la cámara en la página (w/ getUserMedia) así que no sé si puedo confiar sólo en el primer método.

Usando el WebRTC getUserMedia API va a cubrir todos los navegadores modernos aparte de Safari: http://caniuse.com/#feat=stream

Aquí hay una página de ejemplo que usa getUserMedia para tomar una imagen fija (con un enlace a una página que describe el código). La mayoría de las demos de getUserMedia muestran el flujo de vídeo en un área de lienzo visible, pero no es necesario. Puede capturar una imagen utilizando getUserMedia sin mostrar la secuencia de vídeo en un lienzo visible.

Lamentablemente, Apple ha tardado en adoptar las API de WebRTC, así que creo que la etiqueta de entrada de archivos es lo mejor que puedes esperar allí, a menos que estés dispuesto a usar algo como Cordova. Esta es una descripción de cómo usar la etiqueta de entrada de archivo.

Media Capture API es una recomendación de candidato que significa que está en camino de convertirse en un estándar, sin embargo, no sé de los navegadores que implementan la recomendación actual del W3C (utilizando un atributo de captura desnudo en la etiqueta de entrada). El estilo de <input type="file" accept="image/*"> actualmente solo parece ser soportado por navegadores móviles.

En resumen, si desea tener un amplio soporte para el navegador en un futuro próximo, tendrá que soportar ambos métodos hasta que Apple comience a admitir las API de WebRTC o hasta que otros navegadores de escritorio comiencen a admitir la API de Captura de Medios (o la variante con el atributo de captura que actualmente es compatible con navegadores móviles).

  • ¿Cómo puedo recuperar una cadena de Javascript en Android?
  • Android: ¿Hay alguna forma de ejecutar JavaScript desde mi aplicación?
  • Tipo de entrada = número no es posible insertar números negativos en el teléfono móvil
  • Rellenar formulario en WebView con Javascript
  • Obtener valor href de la etiqueta de anclaje en Android WebView cuando se hace clic en el enlace
  • Ionic2 + Angular2 o Reactivo-nativo?
  • Jquery keyup no funciona en Android
  • Phonegap plugin androide nativo
  • ¿Es posible crear un widget de escritorio con react-native?
  • Métodos de WebView en el mismo error de hilo
  • Cómo averiguar si WebView se muestra / en pantalla / visible mediante JavaScript
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.