¿Cómo llamar a la cámara del teléfono móvil o al álbum de fotos en html5?

& ltvideo id = " video " reproducción automática = " " estilo = ' ancho: 640 px alto: 480 píxeles' & gt& lt/video & gt; ' imagen ' & gtImagen & lt/button & gt;

& ltcanvas id = " lienzo " ancho = " 640 " altura = " 480 " >& lt/canvas & gt;

2.Y definido en el script.

var video = documento . getelementbyid(" video ");

var contexto = lienzo get context(" 2d ")

var errocb = función ( ) {

console.log('¡Algo salió mal!');

}

3. En pocas palabras, use la API html5 navigator.getUserMedia. en la cámara del dispositivo y el mensaje en el icono aparecerá en el navegador.

If (navigator.getUserMedia) {//API estándar

navigator . getuser media({ " video ":true }, función (transmisión) {

video.src = transmitir

video . play();

}, errocb

} else if(navigator . WebKit getuser media){// API central de WebKit.

navegador . webkitgetusermedia({ " video ":true }, función (transmisión) {

video . src = ventana . webkiturl . createobjecturl(transmisión);

video.play();

}, errocb);

}

4. En algunos ejemplos en línea, el primero de navigator.getUserMedia El argumento. era 'video', probablemente en versiones anteriores, ahora debe ser obj.

También hay opiniones sobre getUserMedia y webkitGetUserMedia, escritas en línea.

navigator . getuser media =(navigator . getuser media | |

navigator.webkitGetUserMedia ||

navigator.mozGetUserMedia ||

navigator . msgetusermedia);

5. Sin embargo, cabe señalar que vinculan video.src de diferentes maneras y no he probado si createObjectURL es universal.

La función de fotografía simplemente llama a drawImage en el lienzo.

document.getElementById("Imagen").

addEventListener("hacer clic ", función () {

context.drawImage(video, 0, 0, 640, 480);

});

Todos El código del script se muestra en la figura.

Luego podrás ver la cámara en el navegador, hacer clic en la imagen y la imagen de la cámara actual aparecerá a la derecha.