Comentario: Tome una foto en HTML5 En primer lugar, echemos un vistazo a la estructura del código HTML. Por supuesto, esta parte del contenido de DOM debe cargarse dinámicamente después de que el usuario permita el uso de los eventos de su cámara. Los amigos interesados pueden aprender al respecto.
Dirección de demostración: demostración de fotos HTML5Primero, veamos la estructura del código HTML. Por supuesto, esta parte del contenido de DOM debe cargarse dinámicamente después de que el usuario permita que se inicie el uso de los eventos de su cámara.
Nota: Utilizamos la resolución de 640x480. Si usa la generación dinámica JS, puede controlar de manera flexible la resolución.
<!-
Declaración: Este DIV debe generarse dinámicamente después de permitir la cámara web, webcam
Ancho y altura: 640 * 480, por supuesto, ¡se puede controlar dinámicamente!
->
<!-
Idealmente, estos elementos no se crean hasta que se confirma que el
El cliente admite video/cámara, pero en aras de ilustrar el
elementos involucrados, se crean con marcado (no JavaScript)
->
<Video Autoplay> </dide->
<botón> foto de fotos </botón>
<Canvas> </Canvas>
Javascript
Mientras se cree el elemento HTML anterior, la parte JavaScript será más simple de lo que piensas:
// Establecer la escucha de eventos, el contenido DOM está cargado, que es similar al efecto $ .ready () de jQuery.
Window.adDeventListener ("DomContentLoaded", function () {
// El elemento de lona se utilizará para la captura
var lienvas = document.getElementById ("Canvas"),
context = Canvas.getContext ("2d"),
// elemento de video, para recibir y reproducir la transmisión de datos de la cámara
video = document.getElementById ("video"),
videoObj = {"video": true},
// Una función de devolución de llamada de error imprime un mensaje de error en la consola
errback = function (error) {
if ("objeto" === typeof window.console) {
console.log ("Error de captura de video:", error.code);
}
};
// Poloque los oyentes de video en su lugar
// para navegadores estándar
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);
}
// Escucha el evento del botón fotográfico
document.getElementById ("snap"). addEventListener ("hacer clic", function () {
// dibujar en el lienzo
context.DrawImage (video, 0, 0, 640, 480);
});
}, FALSO);
Finalmente, recuerde colocar su página web en el servidor web y acceder a ella a través del protocolo HTTP.
Además, la versión del navegador debe ser más nueva y admite nuevas funciones relacionadas con HTML5.
El traductor no está calificado y no ha traducido de acuerdo con el texto original. El navegador utilizado es Chrome 28.
Finalmente, publique el código completo, que es más rígido.
<! Doctype html>
<html>
<Evista>
<title> Browser Webcamera </title>
<meta content = "editplus">
<meta content = "[email protected]">
<meta content = "invetado por:">
<script>
// Establecer la escucha de eventos, el contenido DOM está cargado, que es similar al efecto $ .ready () de jQuery.
Window.adDeventListener ("DomContentLoaded", function () {
// El elemento de lona se utilizará para la captura
var lienvas = document.getElementById ("Canvas"),
context = Canvas.getContext ("2d"),
// elemento de video, para recibir y reproducir la transmisión de datos de la cámara
video = document.getElementById ("video"),
videoObj = {"video": true},
// Una función de devolución de llamada de error imprime un mensaje de error en la consola
errback = function (error) {
if ("objeto" === typeof window.console) {
console.log ("Error de captura de video:", error.code);
}
};
// Poloque los oyentes de video en su lugar
// para navegadores estándar
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);
}
// Escucha el evento del botón fotográfico
document.getElementById ("snap"). addEventListener ("hacer clic", function () {
// dibujar en el lienzo
context.DrawImage (video, 0, 0, 640, 480);
});
}, FALSO);
</script>
</ablo>
<Body>
<div>
<!-
Declaración: Este DIV debe generarse dinámicamente después de permitir la cámara web, webcam
Ancho y altura: 640 * 480, por supuesto, ¡se puede controlar dinámicamente!
->
<!-
Idealmente, estos elementos no se crean hasta que se confirma que el
El cliente admite video/cámara, pero en aras de ilustrar el
elementos involucrados, se crean con marcado (no JavaScript)
->
<Video Autoplay> </dide->
<botón> foto de fotos </botón>
<Canvas> </Canvas>
</div>
</body>
</html>