Comentario: Las API del cliente en dispositivos móviles y computadoras de escritorio no se sincronizaron al principio. Inicialmente, siempre hay algunas características y API correspondientes en los dispositivos móviles primero, pero lentamente, estas API aparecerán en las computadoras de escritorio. Una de las tecnologías de interfaz de aplicación es la API GetUsermedia, que permite a los desarrolladores de aplicaciones acceder a las cámaras o cámaras incorporadas de los usuarios.
Las API del cliente en dispositivos móviles y computadoras de escritorio no se sincronizaron al principio. Inicialmente, siempre hay algunas características y API correspondientes en los dispositivos móviles primero, pero lentamente, estas API aparecerán en las computadoras de escritorio. Una de las tecnologías de interfaz de aplicación es la API GetUsermedia, que permite a los desarrolladores de aplicaciones acceder a las cámaras o cámaras incorporadas de los usuarios. Déjame mostrarte cómo acceder a tu cámara a través de un navegador y extraer capturas de pantalla.
Código HTML
He escrito algunos comentarios en el siguiente código, lea:
<!-
Idealmente, primero debemos determinar si su dispositivo está encendido
Hay cámaras o cámaras, pero por simplicidad, estamos aquí directamente
Escriba etiquetas HTML en lugar de usar JavaScript para juzgar primero
Luego genere dinámicamente estas etiquetas
->
<Video Autoplay> </dide->
<botón> foto de fotos </botón>
<Canvas> </Canvas>
Antes de escribir las etiquetas anteriores, debe determinar si el cliente del usuario tiene soporte de cámara. Sin embargo, para no ser tan problemático, estas etiquetas HTML se escriben directamente aquí. Cabe señalar que la longitud y el ancho que usamos aquí son 640 × 480.
Código JavaScript
Debido a que escribimos HTML a mano, el siguiente código JS será mucho más simple de lo que piensas.
// Poloque los oyentes de eventos en su lugar
Window.adDeventListener ("DomContentLoaded", function () {
// agarra elementos, crea configuraciones, etc.
var lienvas = document.getElementById ("Canvas"),
context = Canvas.getContext ("2d"),
video = document.getElementById ("video"),
videoObj = {"video": true},
errback = function (error) {
console.log ("Error de captura de video:", error.code);
};
// Poloque los oyentes de video en su lugar
if (navigator.getusermedia) {// estándar
navigator.getusermedia (videoobj, function (stream) {
video.src = stream;
video.play ();
}, errback);
} else if (navigator.webkitgetusermedia) {// webkit-prefixed
navigator.webkitgetusermedia (videoobj, function (stream) {
video.src = window.webkiturl.createObjectUrl (stream);
video.play ();
}, errback);
}
else if (navigator.mozgetusermedia) {// Firefox prefijo
navigator.mozgetusermedia (videoobj, function (stream) {
video.src = window.url.createObjectUrl (stream);
video.play ();
}, errback);
}
}, FALSO);
Una vez que se determina que el navegador del usuario admite GetUsermedia, lo siguiente es muy simple. Solo necesita establecer el SRC de ese elemento de video en la conexión de video en vivo de la cámara del usuario. ¡Eso es todo lo que debe hacer para acceder a su cámara con un navegador!
La función de tomar fotos solo se puede decir que es un poco más complicada. Agregamos un monitor al botón para dibujar el video en el lienzo.
// activar la acción de la foto
document.getElementById ("snap")
.adDeventListener ("hacer clic", function () {
context.DrawImage (video, 0, 0, 640, 480);
});
Por supuesto, también puede agregar algunos efectos de filtro a la imagen ...
En el pasado, necesitábamos usar complementos de terceros para acceder a la cámara del usuario desde el navegador, lo cual fue un poco complicado. Ahora solo necesitamos tecnología de lienzo HTML5 y JavaScript para operar las cámaras de los usuarios de manera fácil y rápida. No se trata solo de acceder a la cámara, sino también porque la tecnología de lienzo de HTML5 es tan poderosa que podemos agregar varios efectos de filtro fascinantes a las imágenes. ¡Ahora, use su propia cámara para tomar una foto de usted en su navegador!