Comentário: tire uma foto no HTML5, antes de tudo, vamos dar uma olhada na estrutura de código HTML. Obviamente, essa parte do conteúdo DOM deve ser carregada dinamicamente depois que o usuário permite o uso de seus eventos de câmera. Amigos interessados podem aprender sobre isso.
Endereço de demonstração: demonstração de fotos HTML5Primeiro, vejamos a estrutura de código HTML. Obviamente, essa parte do conteúdo DOM deve ser carregada dinamicamente depois que o usuário permite que o uso de seus eventos de câmera inicie.
Nota: Usamos a resolução de 640x480. Se você usar a geração dinâmica do JS, poderá controlar flexibilidade a resolução.
<!-
Declaração: Esta div deve ser gerada dinamicamente após permitir a webcam, webcam
Largura e altura: 640 * 480, é claro, pode ser controlado dinamicamente!
->
<!-
Idealmente, esses elementos não são criados até que seja confirmado que o
o cliente suporta vídeo/câmera, mas para ilustrar o
Elementos envolvidos, eles são criados com marcação (não JavaScript)
->
<Video AutoPlay> </ Video>
<butto> Snap Photo </botão>
<lVAs> </canvas>
JavaScript
Enquanto o elemento HTML acima for criado, a parte JavaScript será mais simples do que você pensa:
// Defina a audição de eventos, o conteúdo DOM é carregado, o que é semelhante ao efeito $ .ready () do jQuery.
window.addeventListener ("domcontentloaded", function () {
// O elemento de tela será usado para capturar
var Canvas = document.getElementById ("Canvas"),
context = Canvas.getContext ("2d"),
// elemento de vídeo, para receber e reproduzir o fluxo de dados da câmera
vídeo = document.getElementById ("vídeo"),
videoobj = {"video": true},
// uma função de retorno de chamada de erro imprime a mensagem de erro no console
errback = function (erro) {
if ("object" === typeof window.console) {
console.log ("Erro de captura de vídeo:", erro.code);
}
};
// Coloque os ouvintes de vídeo no lugar
// para navegadores padrão
if (Navigator.getUsermedia) {// padrão
Navigator.getUsermedia (videoobj, function (stream) {
video.src = stream;
video.play ();
}, errback);
} else if (navegator.webkitgetUsermedia) {// webkit-prefixed
Navigator.webkitgetUsermedia (videoobj, function (stream) {
video.src = window.webkiturl.createObjecturl (stream);
video.play ();
}, errback);
}
// Ouça o evento do botão de foto
document.getElementById ("snap"). addEventListener ("clique", function () {
// Desenhe na tela
context.Drawimage (vídeo, 0, 0, 640, 480);
});
}, false);
Por fim, lembre -se de colocar sua página da web no servidor da Web e acessá -la através do protocolo HTTP.
Além disso, a versão do navegador precisa ser mais nova e suporta novos recursos relacionados ao HTML5.
O tradutor não está qualificado e não traduzido de acordo com o texto original. O navegador usado é o Chrome 28.
Finalmente, publique o código completo, que é mais rígido.
<! Doctype html>
<html>
<head>
<title> navegador webcamera </ititle>
<meta content = "editplus">
<meta content = "[email protected]">
<meta content = "inventado por:">
<Cript>
// Defina a audição de eventos, o conteúdo DOM é carregado, o que é semelhante ao efeito $ .ready () do jQuery.
window.addeventListener ("domcontentloaded", function () {
// O elemento de tela será usado para capturar
var Canvas = document.getElementById ("Canvas"),
context = Canvas.getContext ("2d"),
// elemento de vídeo, para receber e reproduzir o fluxo de dados da câmera
vídeo = document.getElementById ("vídeo"),
videoobj = {"video": true},
// uma função de retorno de chamada de erro imprime a mensagem de erro no console
errback = function (erro) {
if ("object" === typeof window.console) {
console.log ("Erro de captura de vídeo:", erro.code);
}
};
// Coloque os ouvintes de vídeo no lugar
// para navegadores padrão
if (Navigator.getUsermedia) {// padrão
Navigator.getUsermedia (videoobj, function (stream) {
video.src = stream;
video.play ();
}, errback);
} else if (navegator.webkitgetUsermedia) {// webkit-prefixed
Navigator.webkitgetUsermedia (videoobj, function (stream) {
video.src = window.webkiturl.createObjecturl (stream);
video.play ();
}, errback);
}
// Ouça o evento do botão de foto
document.getElementById ("snap"). addEventListener ("clique", function () {
// Desenhe na tela
context.Drawimage (vídeo, 0, 0, 640, 480);
});
}, false);
</script>
</head>
<Body>
<div>
<!-
Declaração: Esta div deve ser gerada dinamicamente após permitir a webcam, webcam
Largura e altura: 640 * 480, é claro, pode ser controlado dinamicamente!
->
<!-
Idealmente, esses elementos não são criados até que seja confirmado que o
o cliente suporta vídeo/câmera, mas para ilustrar o
Elementos envolvidos, eles são criados com marcação (não JavaScript)
->
<Video AutoPlay> </ Video>
<butto> Snap Photo </botão>
<lVAs> </canvas>
</div>
</body>
</html>