canvas-of-html5

Usando Webcam com HTML5 Canvas (Com conversão em base64)

Sem dúvida, o elemento canvas no HTML5 é o recurso que a maioria dos desenvolvedores vai querer usar para desenvolver aplicativos Web realmente ricos – sem precisarem instalar plug-ins de navegador como Flash Player da Adobe. O Canvas nasceu em uma época em que a riqueza do cliente está no foco dos desenvolvedores. Navegadores modernos como o Chrome, Firefox e o Internet Explorer 9 e 10 o suportam. Mas o que exatamente é o elemento canvas em HTML5? Como você o usa para criar aplicativos Web ricos?

Se você não tiver familiaridade com HTML5, antes de se aprofundar neste artigo, deve ler Sim, você pode usar HTML5 hoje! e HTML5 e formas ainda mais extravagantes.

Para que serve o elemento canvas?

Oficialmente, o canvas é “uma tela de bitmap dependente de resolução que pode ser usada para a renderização de elementos gráficos ou outras imagens visuais rapidamente”. Em termos leigos, o canvas é um elemento novo em HTML5, que permite que se desenhem elementos gráficos usando JavaScript. Ele pode ser usado para renderizar texto, imagens, gráficos, linhas gradientes e outros efeitos dinamicamente. Desenhar na tela se dá através da API de tela 2D. Essa API contém uma variedade de funções que fornecem o poder de se desenhar praticamente o que se queira na tela. Atualmente, a tela suporta uma interface 2D, não 3D.

No exemplo de hoje vamos usar o canvas para abrir uma webcam e capturar uma foto e ainda ter o retorno em base64.

Let’s do it !!

Vamos usar dois arquivos ( index.php e webcam.js)

index.php

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>eXagon WebCaM Stream</title>
<style>
#container {
width: 500px;
height: 375px;
border: 10px #333 solid;
}
#videoElement {
width: 500px;
height: 375px;
background-color: #666;
}
#canvas {
width: 500px;
height: 375px;
background-color: #CCC;
border: 10px #333 solid;
}
</style>
</head>

<body>
<input id=”fileselect” type=”file” accept=”image/*” capture=”camera”>

<canvas id=”canvas” width=”500″ height=”375″></canvas>
<input type=”button” value=”Capturar” id=”save” />

<br>
<br>

<!– Div onde será renderizada a base 64 –>

Base64

http://webcam.js

</body>
</html>

webcam.js

var video = document.querySelector(“#videoElement”);

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;

if (navigator.getUserMedia) {
navigator.getUserMedia({video: true}, handleVideo, videoError);
}

function handleVideo(stream) {
video.src = window.URL.createObjectURL(stream);
}

function videoError(e) {
// Caso de erro no video
}
var v,canvas,context,w,h;
var imgtag = document.getElementById(‘imgtag’);
var sel = document.getElementById(‘fileselect’);

document.addEventListener(‘DOMContentLoaded’, function(){
v = document.getElementById(‘videoElement’);
canvas = document.getElementById(‘canvas’);
context = canvas.getContext(‘2d’);
w = canvas.width;
h = canvas.height;

},false);

function draw(v,c,w,h) {
if(v.paused || v.ended) return false;
context.drawImage(v,0,0,w,h);
var uri = canvas.toDataURL(“image/jpeg”);
var base64Div = document.getElementById(‘base’);
base64Div.innerText = uri;
imgtag.src = uri;
}

document.getElementById(‘save’).addEventListener(‘click’,function(e){
draw(v,context,w,h);
});

var fr;

sel.addEventListener(‘change’,function(e){
var f = sel.files[0];
fr = new FileReader();
fr.onload = receivedText;
fr.readAsDataURL(f);
})

function receivedText() {
imgtag.src = fr.result;
}

3 opiniões sobre “Usando Webcam com HTML5 Canvas (Com conversão em base64)”

  1. Para quem for usar este script será necessário substituir todos os caracteres ” “ (abre e fecha aspas gráficos) por ” (aspas simples) e todos os caracteres ‘ ’ (apóstrofos gráficos) por ‘ (apóstrofo simples).

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s