Se você quiser tirar uma foto de um usuário para ser utilizada em um site PHP, você pode fazer isso com um pouco de ajuda do JavaScript e de uma biblioteca Flash.
Este artigo explica como tirar fotos de imagens utilizando uma webcam para ser carregado para uma aplicação PHP.
Requisitos
A primeira coisa de que você precisa é do seu editor de PHP ou IDE, uma webcam, MySQL e uma xícara de café. O editor PHP é, naturalmente, para a codificação de seus scripts PHP, a webcam para levar a imagem, o MySQL para salvar os dados em um banco de dados e o café é para o seu prazer. 🙂
Neste artigo, discutiremos como capturar a imagem da webcam a partir do nosso PHP e jQuery e salvá-la no banco de dados. Ele vai usar o Flash para a imagem da webcam. Então você precisa de arquivos JavaScript e Flash que pode baixar na parte inferior desta página.
Captura de imagens a partir da webcam
Para criar nossos aplicativos de captura, precisamos criar três arquivos:
- Página web para mostrar a webcam
- Script para lidar com o upload da imagem
- Script para acessar a base de dados
1. Página Web para mostrar a Webcam
Com este arquivo, vamos mostrar nossa tela da webcam em nossa página PHP.
index.php
Aqui vamos usar o arquivo webcam.js para as funções de tirar uma imagem da webcam e salvá-la.
<script type=”"text/javascript”" src="”webcam.js"”></script>
Nós vamos fazer um formulário com um campo de texto e um botão.
<form action="<?php echo HtmlSpecialChars($_SERVER['PHP_SELF']);?>" method="post"> <input type="text" name="myname" id="myname"> <input type="submit" name="send" id="send"> </form>
Abaixo do formulário, vamos colocar nossa janela da webcam para mostrar a imagem da câmera.
<script type="text/javascript"><!-- document.write( webcam.get_html(320, 240) ); // --></script>
Agora abaixo da tela da webcam, utilizaremos os botões para configurar webcam e tirar a foto.
<form> <input type="button" value="Configure..." onClick="webcam.configure()"> <input type="button" value="Take Snapshot" onClick="take_snapshot()"> </form>
No código acima, mostramos a tela e obtemos a foto da câmera. Mas ainda temos que salvá-la em algum lugar, então vamos salvar essa imagem em nossa pasta.
2. Script para lidar com o upload da imagem
Depois de mostrar a imagem da webcam em nossa página PHP, tiramos a foto ao clicar no botão. Em seguida, ela precisa ser salva em algum diretório do servidor do nosso projeto.
Para isso, precisamos criar um novo arquivo de script chamado, por exemplo, de test.php para salvar a imagem num piscar de olhos e retornar sucesso.
test.php
<?php
$image = file_get_contents('php://input');
if(!$image)
{
print "ERROR: Failed to read the uploaded image data.\n";
exit();
}
$name = date('YmdHis');
$newname= ” 'images/'”.$name.'”.jpg'”;
$file = file_put_contents($newname, $image);
if(!$file)
{
print "ERROR: Failed to write data to $filename, check permissions.\n";
exit();
}
$url = 'http://'.$_SERVER['HTTP_HOST'].dirname($_SERVER['REQUEST_URI']).
‘'/'’.$newname;
print "$url\n";
?>
No código acima, $name terá a data atual. $newname define o caminho da imagem para a imagem enviada no diretório de imagens.
$file está definido para o sucesso da operação de envio da imagem. Se houver algum erro, o código de condição mostrará o erro. Caso contrário, o script retornará a mensagem de sucesso.
Agora é hora de processar a imagem. Adicione este código ao index.php.
<script type="text/javascript"><!--
webcam.set_api_url( 'test.php' );
webcam.set_quality( 90 ); // JPEG quality (1 - 100)
webcam.set_shutter_sound( true ); // play shutter click sound
webcam.set_hook( 'onComplete', ‘my_completion_handler' );
function take_snapshot()
{
// take snapshot and upload to server
document.getElementById('upload_results').innerHTML =
'<h1>Uploading...</h1>';
webcam.snap();
}
function my_completion_handler(msg)
{
// extract URL out of PHP output
if (msg.match(/(http\:\/\/\S+)/))
{
// show JPEG image in page
document.getElementById('upload_results').innerHTML =
'<h1>Upload Successful!</h1>';
// reset camera for another shot
webcam.reset();
}
else
alert('PHP Error: ' + msg);
}
// --></script>
Agora, temos a mensagem de sucesso e vamos mostrá-lo na div.
<div id="”upload_results”" style style="background-color: #eee;"”></div>
Criar o banco de dados de uploads
Então agora temos o código para tirar a imagem e salvá-la em nosso diretório de imagens, mas ela ainda não está no banco de dados. Vamos atualizar o código para salvar a imagem e o nome no banco de dados.
Primeiro crie um banco de dados com o nome de “webcams”, com três campos de entrada na tabela:
- “Id” com autoincremento
- Coluna “nome” para denotar a pessoa
- Nome da “imagem”
Primeiro vamos configurar o script de conexão com o banco.
connection.php
<?php $host = '”localhost'”; $user = ”'some user'; $password = 'some password'; $databasename = '”webcam”'; $con = mysqli_connect($host, $user, $password, $databasename); ?>
No código acima, criamos uma string de conexão com o banco de dados.
Salvando a imagem no banco de dados
Agora vamos voltar ao nosso script de salvamento da imagem.
test.php
Inclua o arquivo de script connection.php para estabelecer a conexão com o banco.
require('connection.php');
Então teremos o código para salvar a imagem em nossa base de dados.
$sql = 'INSERT INTO entry(images) values('.
mysqli_real_escape_string($con, $newname).')';
$result = mysqli_query($con, $sql) or die(“'Error in query'”);
Portanto, teremos o nosso código de inserção. Agora, nosso test.php se parece com isto.
<?php
session_start();
require ‘'connection.php'’;
$image = file_get_contents('php://input');
if(!$image)
{
print "ERROR: Failed to read the uploaded image data.\n";
exit();
}
$name = date('YmdHis');
$newname=”images/”'.$name.'”.jpg'”;
$file = file_put_contents($newname, $image);
if(!$file)
{
print "ERROR: Failed to write data to $filename, check permissions.\n";
exit();
}
else
{
$sql = 'INSERT INTO entry(images) values('.
mysqli_real_escape_string($con, $newname).')';
$result = mysqli_query($con, $sql) or die('“Error in query'”);
$value = mysqli_insert_id($con);
$_SESSION["myvalue"] = $value;
}
$url = ‘'http://'.$_SERVER['HTTP_HOST'].
dirname($_SERVER['REQUEST_URI']).'‘/'.$newname;
print “"$url\n”;"
?>
Você pode estar se perguntando por que estou usando uma variável de sessão e recuperando o último identificador de tabela inserida. Isso porque, na nossa tabela, temos três colunas: a primeira é o identificador do registro, a segunda é para salvar o nome de pessoa e a terceira, para o nome da imagem.
A partir do código acima, salvamos a imagem da webcam em nosso banco de dados com o código PHP e jQuery, mas agora queremos salvar o nome de pessoa na mesma imagem. Então, estamos tomando o último ID do banco de dados com o código e enviando o valor para a sessão
$value = mysqli_insert_id($con); $_SESSION["myvalue"] = $value;
Salvando o nome de pessoa no registro da imagem
Agora, temos o identificador do registro para que a nossa imagem seja guardada. Na próxima etapa, salvaremos o nome de pessoa no banco de dados no mesmo registro.
Edite o script da página index.php e coloque algum código PHP para salvar o nome pessoa a partir de algum parâmetro de um campo de texto.
Adicione este código para que o script salve o nome de pessoa no registro da tabela do banco de dados de imagem.
index.php
<?php
session_start();
if(isset($_POST['send']))
{
$getname = $_POST['myname'];
require('connection.php');
$idvalue = $_SESSION['myvalue'];
$sql = "UPDATE entry SET name = '.
mysqli_real_escape_string($con, $getname).
' where id='.intval($idvalue);
$result = mysqli_query($con,$sql) or die('error in query');
if($result)
{
echo 'Updated '.$_SESSION['myvalue'];
}
else
{
echo "Error nahi hua";
}
}
Conclusão
Criamos o arquivo de script index.php para mostrar a tela da webcam para salvar a imagem em nosso diretório do projeto.
Quando o usuário clica no botão para tirar a foto, ele vai enviá-la para o script test.php, que por sua vez salva a imagem no diretório de imagens.
Quando o nome da imagem é guardado no banco de dados, o script connection.php estabelece a conexão de dados. Um registro da tabela do banco de dados é criado com o nome da imagem.
O último identificador de registro inserido é armazenado em uma variável de sessão, por isso é possível atualizar a tabela mais tarde com o nome de pessoa e outros detalhes que você pode querer adicionar no formulário de submissão.
Neste artigo, usamos a biblioteca JpegCam. Toda a lista de arquivos usados consiste em: webcam.js, shutter.mp3, webcam.swf, test.php, index.php e connection.php.
Se você gostou deste artigo, ou tiver dúvidas, por favor poste um comentário aqui para que ele me incentive a escrever artigos mais úteis.
***
Artigo traduzido pela Redação iMasters, com autorização do autor. Publicado originalmente em http://www.phpclasses.org/blog/post/228-How-to-Use-a-Webcam-to-take-Pictures-in-PHP-Application.html
De 0 a 10, o quanto você recomendaria este artigo para um amigo?