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...