Como acessar a câmera no navegador com HTML5

Aprenda a abrir e usar a câmera de seu computador no navegador, usando HTML5 e Javascript. Com HTML5 e javascript é possível abrir a sua câmera usando o browser.

Por | @le17i Programação
<p>O HTML5 vem trazendo muitas novidades. E n&atilde;o s&oacute; com rela&ccedil;&atilde;o a novas tags, ou atributos. Com HTML5 + JavaScript podemos at&eacute; mesmo criar aplica&ccedil;&otilde;es para smartphones, atrav&eacute;s de ferramentas com PhoneGap. Neste tutorial, vamos ver como acessar a c&acirc;mera do seu computador, smartphone ou tablet, via browser. Antes de come&ccedil;ar, vale lembrar que isso s&oacute; funciona em navegadores atuais (Chrome, Fifefox) que suportam muito bem <strong>HTML5 + API</strong>.</p> <p>Vamos ao script JS respons&aacute;vel pela manipula&ccedil;&atilde;o da c&acirc;mera:<br /><br /><code>var video, canvas, context, localMediaStream;<br /><br />//Tira foto.<br />function snapshot()<br />{<br />    if (localMediaStream) <br />    {<br />        context.drawImage(video, 0, 0, canvas.width, canvas.height);<br />        document.querySelector('img').src = canvas.toDataURL('image/webp');<br />    }<br />}<br /><br />//Fallback de erro a função getUserMedia.<br />function userMediaError()<br />{<br />}<br /> <br />window.onload = function()<br />{<br />    if(!!(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia))<br />    {<br />        video = document.getElementById('video');<br />        canvas = document.getElementById('canvas');<br />        context = canvas.getContext('2d');<br />    }<br />    else<br />    {<br />        alert("Desculpa! Seu navegador não apresenta suporte.");<br />    }<br />};<br /> <br />navigator.getMedia = ( navigator.getUserMedia ||<br />        navigator.webkitGetUserMedia ||<br />        navigator.mozGetUserMedia ||<br />        navigator.msGetUserMedia);<br /> <br />navigator.getMedia({video: true}, function(stream)<br />{<br />    video.src = window.URL.createObjectURL(stream);<br />    localMediaStream = stream;<br />}, userMediaError());</code></p> <p>Logo ap&oacute;s o evento window.onload, n&oacute;s definimos o tipo do getMedia, e logo depois iniciamos a c&acirc;mera. Neste momento ser&aacute; solicitado a permiss&atilde;o para acessar a c&acirc;mera.A fun&ccedil;&atilde;o snapshot &eacute; respons&aacute;vel por tirar as fotos. Com a fun&ccedil;&atilde;o drawImage do objeto context, pegamos a imagem atual da c&acirc;mera, exibida no elemento DOM video, definimos a posi&ccedil;&atilde;o e o tamanho da foto. Ent&atilde;o selecionamos o elemento DOM img-photo a foto capturada.</p> <p><strong>Estrutura HTML:</strong></p> <p><code><div><br />    <video autoplay width="400" height="300"></video><br /></div><br /><div><br />    <input value="Tirar foto" /><br /></div><br /><div><br />    <img src=""><br /></div><br /><div><br />    <canvas style="display:none;" width="400" height="300"></canvas><br /></div></code></p> <p>&nbsp;</p> <p><strong>Confira o resultado: (<a href="../labs/9359/index.html" target="_blank">veja o exemplo funcionando</a>)<br /></strong></p> <p><span class="img_editor"><img src="https://www.oficinadanet.com.br/imagens/post/9359/camerahtml.jpg" alt="" /><br />N&iacute;colas testando o funcionamento</span></p> <p style="text-align: center;">Download dos arquivos:<br /><a href="https://www.oficinadanet.com.br/imagens/post/9359/webcam.jpg"><img src="https://www.oficinadanet.com.br/imagens/post/9359/botaodownloadoficina.jpg" alt="" /></a></p> <p style="text-align: left;"><em>Tamb&eacute;m pode ser visto no <a rel="nofollow" href="http://www.leandrodias.net/css-e-html/tutorial-html5-javascript-acessando-a-camera-via-browser/" target="_blank">meu blog</a></em></p>

Mais sobre: html5, javascript
Share Tweet
DESTAQUES
Mais compartilhados
Comentários