Estava desenvolvendo um projeto de cadastro de despachantes utilizando meu queridinho WordPress, e uma das informações necessárias para a realização do cadastro era uma foto 3X4 que seria tirada na hora do cadastro, ou seja, teria que usar uma Webcam. Sem mais delongas, abaixo mostrarei a função que usei para ativar a Webcam.
HTML
Você pode usar as classes e Ids que quiser. A webcam irá reproduzir na tag <video>, a <img> eu usei para mostrar um preview da imagem que será gerada pela captura da webcam, e o input é onde eu vou colocar o base64 que vou usar para gerar uma imagem no PHP quando eu der submit no <form>.
<div class=”content-photo”>
<label>Foto 3×4</label>
<video autoplay=”true” id=”webCamera”></video>
<img id=”imagemConvertida”/>
<input type=”hidden” id=”base_img” name=”agent_base_img”/>
</div>
<button type=”button” class=”cameratools”><i class=”fas fa-camera”></i>Abrir câmera</button>
JAVASCRIPT
Eu usei o mesmo botão para ativar a webcam e para capturar a imagem, então eu primeiro verifico se o botão está ativo ou não. Se estiver ativo o botão irá capturar a imagem, se não irá abrir a webcam.
$(‘.cameratools’).on(‘click’, function(){
if($(this).hasClass(‘active’)){//Captura a imagem
$(this).removeClass(‘active’);
var video = document.querySelector(“#webCamera”);
//Criando um canvas que vai guardar a imagem temporariamente
var canvas = document.createElement(‘canvas’);
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
var ctx = canvas.getContext(‘2d’);
//Desenhando e convertendo as dimensões
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
//Criando o JPG
var dataURI = canvas.toDataURL(‘image/jpeg’); //O resultado é um BASE64 de uma imagem.
document.querySelector(“#base_img”).value = dataURI;
document.querySelector(“#imagemConvertida”).src = dataURI;
$(‘#imagemConvertida’).show();
$(‘#webCamera’).hide();
$(this).html(‘<i class=”fas fa-camera”></i>Abrir câmera’);
}else{//Abre a webcan
$(this).addClass(‘active’);
//Captura elemento de vídeo
var video = document.querySelector(“#webCamera”);
$(‘#webCamera’).show();
$(‘#imagemConvertida’).hide();
$(‘#imagemConvertida’).attr(‘src’,”);
$(‘#base_img’).val(”);
//As opções abaixo são necessárias para o funcionamento correto no iOS
video.setAttribute(‘autoplay’, ”);
video.setAttribute(‘muted’, ”);
video.setAttribute(‘playsinline’, ”);
//Verifica se o navegador pode capturar mídia
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({audio: false, video: {facingMode: ‘user’, height: 227, width: 227}})
.then( function(stream){
//Definir o elemento vídeo a carregar o capturado pela webcam
video.srcObject = stream;
})
.catch(function(error) {
alert(“Você precisa ter uma câmera instalada no seu computador.”);
});
};
$(this).html(‘<i class=”fas fa-camera”></i>Tirar foto’);
}
});
PHP
Aqui é onde eu gero a imagem através do base64 e salvo ela na pasta uploads.
if($_POST[‘agent_base_img’] != ”){
$data = str_replace(” “,”+”,$_POST[‘agent_base_img’]); //O envio do dado pelo XMLHttpRequest tende a trocar o + por espaço, por isso a necessidade de substituir.
$name = md5(time().uniqid()); //Dou um nome aleatório para o arquivo
$dir = wp_upload_dir();//Pego as urls dos diretórios do wordpress
$path = $dir[‘path’].”/{$name}.jpg”;//Url wordpess
$fileurl = $dir[‘url’].”/{$name}.jpg”;//Url da imagem no site
$data = explode(‘,’, $data);
//Save data
$result = file_put_contents($path, base64_decode(trim($data[1])));//Cria a imagem
if($result != ”){ //Se criou salva a URL da imagem num campo personalizado
update_post_meta($post_id,’imagem’,$fileurl);
}
}
Agora você já sabe como executar a webcam, capturar uma imagem com ela e salvar ela no seu banco de dados. Espero ter ajudado e até a próxima.
Comentários