Red de conocimiento informático - Material del sitio web - Cómo utilizar la tecnología HTML5 para controlar la cámara en tu ordenador o teléfono móvil

Cómo utilizar la tecnología HTML5 para controlar la cámara en tu ordenador o teléfono móvil

Código HTML

Escribí algunos comentarios en el código a continuación, lea:

Copia el código

El código es el siguiente :

p>

lt;!--

Lo ideal sería que primero determinemos si tiene una cámara web o una cámara en su dispositivo, pero en aras de la simplicidad, simplemente hágalo aquí

Escriba etiquetas HTML en lugar de usar JavaScript para juzgar

y luego genere dinámicamente estas etiquetas

--gt;

lt; video id="video" width="640" height="480" autoplaygt;lt;/videogt;

lt;botón id="snap"gt;Foto instantánealt;/buttongt;

lt;canvas id="canvas" width="640" height="480"gt;lt;/canvasgt;

Antes de escribir las etiquetas anteriores, debe determinar si el cliente del usuario tiene La cámara lo admite, pero para evitar problemas, estas etiquetas HTML se escriben directamente aquí. Cabe señalar que el largo y el ancho que usamos aquí son 640 × 480.

Código JavaScript

Debido a que escribimos el HTML manualmente, el siguiente código js será mucho más simple de lo que piensas.

Copia el código

El código es el siguiente:

// Coloca los detectores de eventos en su lugar

window.addEventListener("DOMContentLoaded ", function() {

// Tomar elementos, crear configuraciones, etc.

var canvas = document.getElementById("canvas"),

context = canvas.getContext ("2d"),

video = document.getElementById("video"),

videoObj = { "video": true },

errBack = function(error) {

console.log("Error de captura de vídeo: ", error.code);

};

// Coloque detectores de vídeo en su lugar

if(navigator.getUserMedia) { // Estándar

navigator.getUserMedia(videoObj, function(stream) {

video.src = secuencia;

video.play();

}, errBack);

} else if(navigator.webkitGetUserMedia) { // WebKit con prefijo

navigator.webkitGetUserMedia(videoObj, function(stream){

video.src = window.webkitURL.createObjectURL(stream);

video.play();

}, errBack);

}

else if(navigator.mozGetUserMedia) { // Prefijo de Firefox

navigator.mozGetUserMedia (videoObj, función (transmisión){

video.src = window.URL.createObjectURL(transmisión);

video.play();

}, errBack);

}

}, false);

Una vez que se determina que el navegador del usuario admite getUserMedia, lo siguiente es muy simple. para configurar el src del elemento de video. Conexión en vivo para el video de la cámara del usuario. ¡Eso es todo lo que necesitas hacer para acceder a la cámara usando tu navegador!

Solo se puede decir que la función de tomar fotografías es un poco complicada. Agregamos un oyente al botón y dibujamos la pantalla de video en el lienzo.

Copia el código

El código es el siguiente:

//Activar la acción de la foto

document.getElementById("snap" )

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

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

}) ;

Por supuesto, también puedes agregar algunos efectos de filtro a la imagen...