Precisei trabalhar novamente com WebCam e Câmera dos Smartphone e Tablets, então segue como utilizar a Câmera do PC ou Celular com HTML5, com e sem Flash e fazer o Upload com PHP.

Biblioteca JS Webcam HTML5

Baixe a Biblioteca acima, é algo muito simples, tira a foto, olha a prévia e faz o upload na fasta fotos/.

Código da index.html

<!doctype html>
<html lang="pt">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>Tutorial WebCam Blog Jonathas Guerra</title>

 <script type="text/javascript" src="webcamjs-master/webcam.min.js"></script>

 <script language="JavaScript">

 function bater_foto()
 {
 Webcam.snap(function(data_uri)
 {
 document.getElementById('results').innerHTML = '<img id="base64image" src="'+data_uri+'"/><button onclick="salvar_foto();">Upload desta Foto</button>';
 });
 }

 function mostrar_camera()
 {
 Webcam.set({
 width: 640,
 height: 480,
 dest_width: 640,
 dest_height: 480,
 crop_width: 300,
 crop_height: 400,
 image_format: 'jpeg',
 jpeg_quality: 100,
 flip_horiz: true
 });
 Webcam.attach('#minha_camera');
 }

 function salvar_foto()
 {
 document.getElementById("carregando").innerHTML="Salvando, aguarde...";
 var file = document.getElementById("base64image").src;
 var formdata = new FormData();
 formdata.append("base64image", file);
 var ajax = new XMLHttpRequest();
 ajax.addEventListener("load", function(event) { upload_completo(event);}, false);
 ajax.open("POST", "upload.php");
 ajax.send(formdata);
 }

 function upload_completo(event)
 {
 document.getElementById("carregando").innerHTML="";
 var image_return=event.target.responseText;
 var showup=document.getElementById("completado").src=image_return;
 var showup2=document.getElementById("carregando").innerHTML='<b>Upload feito:</b>';
 }
 window.onload= mostrar_camera;
 </script>
 <style type="text/css">
 .container
 {
 float: left;
 width:320px;
 height: 480px;
 margin-right: 5px;
 padding: 5px;
 }
 #camera
 {
 background: #ff6666;
 height: 480px;
 }
 #previa
 {
 background: #ffc865;
 height: 480px;
 }
 #salva
 {
 background: #4dea02;
 height: 480px;
 }
 </style>
</head>
<body>
 <div class="container" id="camera"><b>Câmera:</b>
 <div id="minha_camera"></div><form><input type="button" value="Tirar Foto" onClick="bater_foto()"></form>
 </div>
 <div class="container" id="previa">
 <b>Prévia:</b><div id="results"></div>
 </div>
 <div class="container" id="salva">
 <span id="carregando"></span><img id="completado" src=""/>
 </div>
</body>
</htm>

O Código acima tem as funções javascript que faz cada etapa, acessa a Webcam ou Câmera do Celular, Bate a Foto e faz o Upload na pasta fotos/ usando o Arquivo abaixo:

Arquivo PHP para fazer o upload da imagem, upload.php

<?php
define('UPLOAD_DIR', 'fotos/');
$img = $_POST['base64image'];
$img = str_replace('data:image/jpeg;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR . uniqid() . '.jpg';
$success = file_put_contents($file, $data);
print $success ? $file : 'Não é possível salvar o arquivo.';
?>

Lembrando que para isso tudo funcionar direitinho, é preciso usar SSL (https://).

Se ta com preguiça de seguir o tutorial, segue o código 😉

DOWNLOAD DO EXEMPLO

Tags