Comentário: As APIs do cliente em dispositivos móveis e computadores de desktop não foram sincronizados no início. Inicialmente, sempre existem alguns recursos e APIs correspondentes nos dispositivos móveis primeiro, mas lentamente, essas APIs aparecerão nos computadores da área de trabalho. Uma das tecnologias de interface de aplicativos é a API GetUsermedia, que permite que os desenvolvedores de aplicativos acessem câmeras ou câmeras embutidas dos usuários.
As APIs do cliente em dispositivos móveis e computadores de desktop não foram sincronizados no início. Inicialmente, sempre existem alguns recursos e APIs correspondentes nos dispositivos móveis primeiro, mas lentamente, essas APIs aparecerão nos computadores da área de trabalho. Uma das tecnologias de interface de aplicativos é a API GetUsermedia, que permite que os desenvolvedores de aplicativos acessem câmeras ou câmeras embutidas dos usuários. Deixe -me mostrar como acessar sua câmera através de um navegador e extrair capturas de tela.
Código HTML
Eu escrevi alguns comentários no código a seguir, leia:
<!-
Idealmente, devemos primeiro determinar se o seu dispositivo está ligado
Existem câmeras ou câmeras, mas por simplicidade, estamos aqui diretamente
Escreva tags HTML em vez de usar JavaScript para julgar primeiro
Em seguida, gerar dinamicamente essas tags
->
<Video AutoPlay> </ Video>
<butto> Snap Photo </botão>
<lVAs> </canvas>
Antes de escrever as tags acima, você deve determinar se o cliente do usuário tem suporte à câmera. No entanto, para não ser tão problemático, essas tags HTML são escritas diretamente aqui. Deve -se notar que o comprimento e a largura que usamos aqui são 640 × 480.
Código JavaScript
Como escrevemos HTML manualmente, o código JS a seguir será muito mais simples do que você pensa.
// Coloque os ouvintes do evento no lugar
window.addeventListener ("domcontentloaded", function () {
// Agarre elementos, criar configurações, etc.
var Canvas = document.getElementById ("Canvas"),
context = Canvas.getContext ("2d"),
vídeo = document.getElementById ("vídeo"),
videoobj = {"video": true},
errback = function (erro) {
console.log ("Erro de captura de vídeo:", erro.code);
};
// Coloque os ouvintes de vídeo no lugar
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);
}
caso contrário, if (Navigator.mozgetUsermedia) {// firefox-prefixed
Navigator.MozgetUsermedia (Videoobj, function (Stream) {
video.src = window.url.createObjecturl (stream);
video.play ();
}, errback);
}
}, false);
Uma vez determinado que o navegador do usuário suporta getusermedia, o seguinte é muito simples. Você só precisa definir o SRC desse elemento de vídeo para a conexão de vídeo ao vivo da câmera do usuário. Isso é tudo o que você precisa fazer para acessar sua câmera com um navegador!
A função de tirar fotos só pode ser considerada um pouco mais complicada. Adicionamos um monitor ao botão para desenhar o vídeo na tela.
// desencadear a ação fotográfica
Document.getElementById ("Snap")
.AddeventListener ("Click", function () {
context.Drawimage (vídeo, 0, 0, 640, 480);
});
Claro, você também pode adicionar alguns efeitos de filtro à imagem ...
No passado, precisávamos usar plug-ins de terceiros para acessar a câmera do usuário no navegador, o que era um pouco complicado. Agora, precisamos apenas da tecnologia de tela HTML5 e JavaScript para operar as câmeras dos usuários com facilidade e rapidez. Não se trata apenas de acessar a câmera, mas também porque a tecnologia de lona do HTML5 é tão poderosa que podemos adicionar vários efeitos de filtro fascinantes às imagens. Agora, use sua própria câmera para tirar uma foto sua no seu navegador!