Integração Biblioteca WebCAM no Framework

Integração Biblioteca WebCAM no Framework Pessoal, bom dia! Consegui organizar uma biblioteca para capturar imagem webcam através do PHP. Esta biblioteca utiliza recursos flash e javascript. Eu preciso da ajuda de vocês para integrar numa página desenvolvida no Adianti Framework. Não sei como mesclar esta biblioteca à tela de cadastro....

Paulo Henrique Ribeiro Fonseca 04/01/2019 (há 5 anos)

Pessoal, bom dia!

Consegui organizar uma biblioteca para capturar imagem webcam através do PHP. Esta biblioteca utiliza recursos flash e javascript. Eu preciso da ajuda de vocês para integrar numa página desenvolvida no Adianti Framework. Não sei como mesclar esta biblioteca à tela de cadastro.

Curso completo Meu Negócio Pronto

Use para si, ou transforme em um negócio: Inclui aulas e códigos-fontes
Gestor de conteúdo (SITE) + Loja Virtual (E-Commerce) + Emissor de Notas para infoprodutos

Meu negócio pronto Quero me inscrever agora!

Comentários (15)

Marcelo Gomes 04/01/2019 (há 5 anos)

Me interesso pelo assunto. Acompanhando.

Leandro Coelho 04/01/2019 (há 5 anos)

Eu consegui, mais usei o exemplo de um outro post seu:
https://www.adianti.com.br/forum/pt/view_4223?utilizar-webcamjs-para-tirar-fotos

Fiz umas coisas que não sei explicar direito (rsrs), vou tentar resumir, depois coloco aqui.

Paulo Henrique Ribeiro Fonseca - AUTOR DO POST 05/01/2019 (há 5 anos)

Valeu! Aguardo o compartilhamento da idéia!

Nataniel Rabaioli 07/01/2019 (há 5 anos)

adianti.com.br/framework-extensibility

Leandro Coelho 08/01/2019 (há 5 anos)

<?php

<?php
/**
* WebcamForm Registration
* @author Imprime Informática
*/
class WebcamForm extends TPage
{
protected $form; // form
private $frameFoto;
private $frameFotoWebCan;
/**
* Class constructor
* Creates the page and the registration form
*/
function __construct()
{
parent::__construct();
TPage::include_js('app/lib/components/webcam/webcam.min.js');
TPage::include_js('app/lib/components/webcam/webcam.nome_seu_arquivo.js');
// creates the form
$this->form = new BootstrapFormBuilder('form_Pessoa');
$this->form->setFormTitle('Pessoa');
$this->form->setFieldSizes('100%');
// create the form fields
$id = new TEntry('id');
$datacadastro = new TDate('datacadastro');
$datanascto = new TDate('datanascto');
$fj = new TRadioGroup('fj');
$nome = new TEntry('nome');
$nomefantasia = new TEntry('nomefantasia');
$situacao = new TRadioGroup('situacao');
$situacao->addItems(array('0'=>'Ativo','1'=>'Inativo'));
$situacao->setLayout('Horizontal');
$situacao->setValue('0');
$situacao->setUseButton();
$nome_arq_foto = new TFile('nome_arq_foto');
$nome_arq_foto->setAllowedExtensions( ['png', 'jpg'] );
// complete upload action
$nome_arq_foto->setCompleteAction( new TAction( array( $this, 'onCompleteFoto' ) ) );
// Propriedades dos campos
$id->setEditable(False);
$datacadastro->setMask('dd/mm/yyyy');
$datacadastro->setValue( date('d/m/Y') );
$datacadastro->setTip('Data de Cadastro');
$datanascto->setMask('dd/mm/yyyy');
$fj->addItems(array('1'=>'Física','2'=>'Jurídica'));
$fj->setLayout('Horizontal');
$fj->setValue('1');
$fj->setUseButton();
$nome->addValidation('Nome/Razão Social', new TRequiredValidator);
$nome_arq_foto->setSize('100%');
// add one row for each form field
$row = $this->form->addFields( [ new TLabel('ID'), $id ],
[ new TLabel('Data Cadastro'), $datacadastro ],
[ new TLabel('Situação'), $situacao],
[ new TLabel('Data Nascto'), $datanascto ],
[ new TLabel('Pessoa'), $fj ] );
$row->layout = ['col-sm-2', 'col-sm-3', 'col-sm-2', 'col-sm-3', 'col-sm-2'];
$label_nome = new TLabel('Nome/Razão Social');
$row = $this->form->addFields( [ $label_nome, $nome ],
[ new TLabel('Nome Fantasia'), $nomefantasia ] );
$label_nome->setFontColor('#FF0000');
$row->layout = ['col-sm-6', 'col-sm-6'];
$divisor = new TFormSeparator('Foto <span class="fa fa-long-arrow-down" aria-hidden="true"></span>', '#333333;margin-bottom:0', '18', '#000;margin-bottom:0');
$divisor->style = 'background-color: #b1d4e8; padding-top: 1px';
$this->form->addContent( [ $divisor ] );
// campo para fazer upload de uma imagem qualquer (caso não use a webcam)
$row = $this->form->addFields( [ new TLabel('Foto <b>(PNG ou JPG)</b>'), $nome_arq_foto ] );
// div onde fica a foto se existir ou a camera apos clicar no botão Acessar Webcam
$this->frameFoto = new TElement( 'div' );
$this->frameFoto->id = 'user_foto_frame';
$this->frameFoto->style = '';
// div onde fica a foto tirada apos clicar no botão Bater Foto
$this->frameFotoWebCan = new TElement( 'div' );
$this->frameFotoWebCan->id = 'user_foto_frameWebCam';
$this->frameFotoWebCan->style = '';
// label que fica acima da div
$labelframeFotoWebCan = new TLabel('Foto Tirada');
$labelframeFotoWebCan->id = 'labelframeFotoWebCan';
$labelframeFotoWebCan->style = 'display:none';
// botão para acessar a webcam
$btnWebcam = new TButton('btnWebcam');
$btnWebcam->addFunction("setup(); $(this).hide(); $( '#labelAcessarWebcam' ).css( 'display', 'none' ); $( '#btnWebcamBaterFoto' ).css( 'display', '' ); $( '#labelWebcamBaterFoto' ).css( 'display', '' )");
$btnWebcam->setImage('fa:camera');
$btnWebcam->setLabel('Acessar Webcam');
$btnWebcamLabel = new TLabel('&nbsp&nbsp');
$btnWebcamLabel->id = 'labelAcessarWebcam';
// botão para bater a foto
$btnWebcamBaterFoto = new TButton('btnBaterFoto');
$btnWebcamBaterFoto->addFunction("take_snapshot(); $( '#labelframeFotoWebCan' ).css( 'display', '' )");
$btnWebcamBaterFoto->setImage('fa:camera');
$btnWebcamBaterFoto->id = 'btnWebcamBaterFoto';
$btnWebcamBaterFoto->style = 'display:none';
$btnWebcamBaterFoto->setLabel('Bater Foto');
$btnWebcamBaterFotoLabel = new TLabel('&nbsp&nbsp');
$btnWebcamBaterFotoLabel->id = 'labelWebcamBaterFoto';
$btnWebcamBaterFotoLabel->style = 'display:none';
// adiciona os campos no form
$row = $this->form->addContent( [ new TLabel('Formato 300x300 (Recomendado)'), $this->frameFoto ],
[ $labelframeFotoWebCan, $this->frameFotoWebCan ],
[ $btnWebcamLabel, $btnWebcam ],
[ $btnWebcamBaterFotoLabel, $btnWebcamBaterFoto ] );
$row->layout = ['col-sm-4', 'col-sm-4', 'col-sm-2', 'col-sm-2'];
// campo text para receber a datauri da foto tirada (uso este campo para gerar/salvar a foto)
$fotoWebcam = new TText('fotoWebcam');
$fotoWebcam->id = 'idFotoWebcam';
$fotoWebcam->style = 'display:none;';
$this->form->addFields( [ $fotoWebcam ] );
// create the form actions
$btn = $this->form->addAction( _t('Save'), new TAction([$this, 'onSave']), 'fa:floppy-o' );
$btn->class = 'btn btn-sm btn-primary';
$btnNovo = $this->form->addAction( _t('New'), new TAction([$this, 'onEdit']), 'fa:eraser red' );
$this->form->addAction( _t('Back to the listing'), new TAction(['PessoasList', 'onReload']), 'fa:table blue' );
$this->form->addHeaderAction( _t('Save'), new TAction([$this, 'onSave']), 'fa:save green' );
$this->form->addHeaderAction( _t('Back'), new TAction(['PessoasList', 'onReload']), 'fa:table blue' );
// wrap the page content
$vbox = new TVBox;
$vbox->style = 'width: 98%';
//$vbox->add(new TXMLBreadCrumb('menu.xml', 'PessoasList'));
$vbox->add($this->form);
// add the form inside the page
parent::add($vbox);
}
/**
* On complete upload
*/
public static function onCompleteFoto( $param ) {
//new TMessage('info', 'Upload completed: '.$param['nome_arq_foto']);
//var_dump($param);
// refresh photo_frame
TScript::create( "$('#user_foto_frame').html('')" );
TScript::create( "$('#user_foto_frame').append(\"<img style='max-width: 100%;' src='tmp/{$param[ 'nome_arq_foto' ]}'>\");" );
}
/**
* method onSave()
* Executed whenever the user clicks at the save button
*/
public function onSave( $param )
{
try
{
TTransaction::open('db'); // open a transaction
// get the form data into an active record Pessoa
$object = $this->form->getData('Pessoa');
//var_dump($object);
//die;
$this->form->validate(); // form validation
// move a foto para a pasta
$sourceUserFoto = 'tmp/' . $object->nome_arq_foto;
$targetUserFoto = 'fotos/' . $object->nome_arq_foto;
$finfoBanner = new finfo( FILEINFO_MIME_TYPE );
//echo $sourceUserFoto . '<br>';
//echo $targetUserFoto . '<br>';
// validação do campo logo PNG/JPG
if ( $object->nome_arq_foto != '' and file_exists( $sourceUserFoto ) and $finfoBanner->file( $sourceUserFoto ) != 'image/png' and $finfoBanner->file( $sourceUserFoto ) != 'image/jpeg' )
{
// excluir arquivo temporario
unlink( $sourceUserFoto );
// limpa o campo
$object->nome_arq_foto = '';
// retorna mensagem de erro
throw new Exception( 'Foto inválida, escolha um arquivo no formato <strong>PNG</strong> ou <strong>JPG</strong> !' );
}
// nome fantasia igual ao nome se o fantasia estiver em banco
if ( empty($object->nomefantasia) ):
$object->nomefantasia = $object->nome;
endif;
// foto webcam
if ( $object->fotoWebcam != '' )
{
$img = $object->fotoWebcam;
$img = str_replace('data:image/jpeg;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
//var_dump($data);
$f = md5(uniqid(rand(), true)) . '_fotowebcam_pessoa.jpg';
$success = file_put_contents('fotos/' . $f, $data);
if ($success)
{
$object->nome_arq_foto = $f;
$targetUserFoto = 'fotos/' . $object->nome_arq_foto;
//var_dump($object->nome_arq_foto);
}
// limpa o campo
$object->fotoWebcam = ' ';
}
// salva o registro
//$object->store(); // stores the object
$this->form->setData($object); // keep form data
TTransaction::close(); // close the transaction
// if the user uploaded a source file
if ( ($object->nome_arq_foto != '') and file_exists( $sourceUserFoto ) and ( $finfoBanner->file( $sourceUserFoto ) == 'image/png' or $finfoBanner->file( $sourceUserFoto ) == 'image/jpeg') )
{
// redimenciona se a larguda for maior que 800px
$img = new Canvas( $sourceUserFoto );
//var_dump($img);
$larg = 300;
$altu = 300;
// se tem largura ou altura então redimenciona
if ($larg != 0 || $altu != 0):
$img->redimensiona( $larg, $altu, 'preenchimento' );
endif;
// grava uma nova imagem com 90% de qualidade da original
$img->grava( $sourceUserFoto, 90 );
// move to the target directory
rename( $sourceUserFoto, $targetUserFoto );
}
// exibe a imagem
if ( $object->nome_arq_foto != '' ):
$image = new TImage( $targetUserFoto );
$image->style = 'max-width: 100%;';
$this->frameFoto->clearChildren();
$this->frameFoto->add( $image );
endif;
// neste reload vai colocar os endereços e contatos na tela
$this->onReload( $param ); // reload
$alert = new TAlert('info',TAdiantiCoreTranslator::translate( 'Record saved' ));
$alert->id = 'alertOnSave';
$alert->style = 'width: 98%';
TScript::create( "$('#alertOnSave').fadeOut(5000);");
parent::add( $alert );
// shows the success message
//new TMessage('info', TAdiantiCoreTranslator::translate('Record saved'));
}
catch (Exception $e) // in case of exception
{
new TMessage('error', '<b>Erro</b> ' . $e->getMessage()); // shows the exception error message
$data = $this->form->getData();
$this->form->setData( $data ); // keep form data
if ( $data->nome_arq_foto != '' ): // se existe informação no campo
if ( file_exists( 'tmp/' . $data->nome_arq_foto ) ): // se tem arquivo na pasta temporaria
$image = new TImage( 'tmp/' . $data->nome_arq_foto );
$image->style = 'max-width: 100%;';
$this->frameFoto->add( $image );
elseif ( file_exists( 'fotos/' . $data->nome_arq_foto ) ): // se não tem na pasta temporaria, então verifica a pasta padrão
$image = new TImage( 'fotos/' . $data->nome_arq_foto );
$image->style = 'max-width: 100%;';
$this->frameFoto->add( $image );
endif;
endif;
// neste reload vai colocar os endereços e contatos na tela
$this->onReload( $param ); // reload
TTransaction::rollback(); // undo all pending operations
}
}
/**
* method onEdit()
* Executed whenever the user clicks at the edit button da datagrid
*/
function onEdit($param)
{
try
{
if (isset($param['key']))
{
$key=$param['key']; // get the parameter $key
TTransaction::open('db'); // open a transaction
$object = new Pessoa($key); // instantiates the Active Record
$this->form->setData($object); // fill the form
// mostra imagem se existir
if ( $object->nome_arq_foto ):
$image = new TImage( 'fotos/' . $object->nome_arq_foto );
$image->style = 'max-width: 100%;';
$this->frameFoto->add( $image );
endif;
// neste reload vai colocar os endereços na tela
$this->onReload( $param ); // reload endereços
TTransaction::close(); // close the transaction
}
else
{
//$this->form->clear();
}
}
catch (Exception $e) // in case of exception
{
new TMessage('error', '<b>Erro</b> ' . $e->getMessage()); // shows the exception error message
TTransaction::rollback(); // undo all pending operations
}
}
/**
* Reload the item list
* @param $param URL parameters
*/
public function onReload($param)
{
$data = $this->form->getData();
$this->loaded = TRUE;
}
}
?>

conteudo do: webcam.nome_seu_arquivo.js

Webcam.set({ // live preview size width: 380, height: 300, // device capture size dest_width: 380, dest_height: 300, // final cropped size crop_width: 300, crop_height: 300, image_format: 'jpeg', jpeg_quality: 90 }); function setup() { Webcam.reset(); Webcam.attach('#user_foto_frame'); } function take_snapshot() { // take snapshot and get image data Webcam.snap(function (data_uri) { // display results in page document.getElementById('user_foto_frameWebCam').innerHTML = '<img src="' + data_uri + '"/>'; $("textarea[name='fotoWebcam']").val(data_uri); }); }

Leandro Coelho 08/01/2019 (há 5 anos)

O arquivo webcam.min.js pode pegar neste link:https://www.adianti.com.br/forum/pt/view_4223?utilizar-webcamjs-para-tirar-fotos

Paulo Henrique Ribeiro Fonseca - AUTOR DO POST 25/01/2019 (há 5 anos)

Leandro, valeu a dica e exemplo. Farei a implementação em meu site.

Pedro H C Miguez 31/03/2019 (há 5 anos)

Eu reproduzi o conteudo acima porem ao clicar em acessar a webcam nada acontece, alguem ai conseguiu?

Leandro Coelho 01/04/2019 (há 5 anos)

Pedro, inspecione ai e veja se carregou os arquivos js :

Se carregou veja se no inicio do arquivo webcam.min.js esta com essa versão:

// WebcamJS v1.0.24 - http://github.com/jhuckaby/webcamjs - MIT Licensed

Confirme se o conteúdo do webcam.nome_seu_arquivo.js está conforme abaixo:

Leandro Coelho 01/04/2019 (há 5 anos)

Pedro, inspecione ai e veja se carregou os arquivos js :

<?php
<script language="JavaScript" src="app/lib/components/webcam/webcam.min.js"></script>
<script language="JavaScript" src="app/lib/components/webcam/webcam.nome_seu_arquivo.js"></script>
?>

Se carregou veja se no inicio do arquivo webcam.min.js esta com essa versão:

// WebcamJS v1.0.24 - http://github.com/jhuckaby/webcamjs - MIT Licensed

Confirme se o conteúdo do webcam.nome_seu_arquivo.js está conforme abaixo:

<?php
Webcam.set({
// live preview size
width: 380,
height: 300,
// device capture size
dest_width: 380,
dest_height: 300,
// final cropped size
crop_width: 300,
crop_height: 300,
image_format: 'jpeg',
jpeg_quality: 90
});
function setup() {
Webcam.reset();
Webcam.attach('#user_foto_frame');
}
function take_snapshot() {
// take snapshot and get image data
Webcam.snap(function (data_uri) {
// display results in page
document.getElementById('user_foto_frameWebCam').innerHTML = '<img src="' + data_uri + '"/>';
$("textarea[name='fotoWebcam']").val(data_uri);
});
}
?>

Pedro H C Miguez 01/04/2019 (há 5 anos)

Agora funcionou! Obrigado!

Alexsandro Bomfim das Virgens Cerqueira 15/04/2019 (há 5 anos)

Muito bom meu caro. Adaptei ao meu código, porém quando eu tento salvar uma imagem via webcam ele perde o endereço da imagem. Observei que a pasta tmp é excluída. Já passou por algo similar?

Leandro Coelho 16/04/2019 (há 5 anos)

Alexsandro, aqui comigo funciona normal.

Veja que ai a pasta tmp é usada quando carrega um arquivo usando o campo TFile ($nome_arq_foto).

A imagem vindo pela captura da Webcam não passa pela pasta tmp, ai no exemplo ela vai para uma pasta chamada fotos, neste comando:

<?php
$success = file_put_contents('fotos/' . $f, $data);
?>

Alexsandro Bomfim das Virgens Cerqueira 17/04/2019 (há 5 anos)

Eu já faço isso meu caro. Estou tentado aqui.

Alexsandro Bomfim das Virgens Cerqueira 17/04/2019 (há 5 anos)

Depois de algumas modificações eu consegui resolver o problema.

Novo Comentário