Yearly Archives: 2021

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.