¿Cómo llamar a la cámara del teléfono móvil a través de html5?
La API de captura de medios HTML5 proporciona acceso programable a la cámara. Los usuarios pueden usar directamente getUserMedia para obtener la transmisión de video proporcionada por la cámara. Pero en realidad hay muchos problemas al usar html5 para llamar a la cámara del teléfono móvil:
1) La versión número 21 del navegador Chrome lanzada por Google agregó la API getUserMedia para comunicación de audio y video de alta calidad, que permite aplicaciones web El programa accede a la cámara y al micrófono, mientras que otros navegadores móviles solo admiten llamadas html5 a funciones de fotografías locales
2) Ambos navegadores no admiten el acceso a múltiples cámaras: Chrome no admite el acceso a la cámara trasera , pera accede a la cámara trasera
En la versión Chrome 32 del navegador en teléfonos Android, el navegador puede llamar a la cámara del dispositivo para tomar fotografías. Se divide principalmente en 3 pasos para completar:
1) Obtener la transmisión de video
Agregar la etiqueta de video HTML5 y usar el video obtenido de la cámara como fuente de entrada de este etiqueta var?video?= ?document.getElementByIdx_x_x("video"); navigator.getUserMedia({video: true},?function?(stream)?)?{
video.src?=?window .webkitURL.createObjectURL(stream );
},?function?(error)?{?alert(error);?});
2) Tomar fotos
En la función de fotografía, HTML5 Canvas se usa para capturar el contenido de la etiqueta Video en tiempo real, y el elemento Video se puede usar como entrada de la imagen de Canvas
función?scamera() ?{
var?videoElement?=?document .getElementByIdx_x_x('video');
var?canvasObj?=?document.getElementByIdx_x_x('canvas1');
var?context1?=?canvasObj.getContext('2d' );
context1.fillStyle?=?" #ffffffffffff"
var?#ffffffff";
context1.fillRect(0,?0,?320,?240);
context1.drawImage(videoElement,?0,?0,?320,?240);
}
3) Recuperación de imágenes
Para obtener datos de imágenes de Canvas, la idea principal es utilizar toDataURL de Canvas para convertir los datos de Canvas en una codificación base de 64 bits. Imagen PNG var?imgData=canvas.toDataURL("image/png ");
El formato de imgData es el siguiente: "datos: imagen/png; base64, xxxxx"
Los datos de la imagen real son la parte de la imagen después de la coma en codificación base64
.