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:
- Cordova autenticación de huellas dactilares en el servidor
- HTML5 Canvas en teléfonos Android - Redibujar y resaltar problemas
- Cordova Ionic Keyboard plugin deshabilitar completamente en "Init"
- Ionic push Android push notificación que devuelve "undefined" mensaje
- IScroll 4 no funciona con el elemento form <select> iPhone Safari y navegador Android
<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.
- Permitir el zoom de Google Maps con los dedos - PhoneGap para Android
- Desactivar la función "Touch to Search" de Chrome 43 para móviles mediante programación
- Android: no se puede obtener javascript para trabajar en WebView incluso con setJavaScriptEnabled (true)
- Problemas con build.phonegap write to file
- Javascript + phoneGap - cómo detectar cuándo en una llamada de teléfono activa
- Evento keyPress no se dispara en Android mobile
- Trabajo en segundo plano utilizando el servidor de análisis y Heroku Scheduler
- Error al construir cordova App - No se pudo encontrar la propiedad 'cdvCompileSdkVersion'
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).