lunedì 16 Settembre 2019

Download in corso

Softwareone.it

Photobooth con PHP, jQuery e CSS3

Photobooth è uno script che grazie a PHP, jQuery e CSS3 da la possibilità ai webmaster di creare un sistema all’interno delle loro pagine di scattare istantanee e caricarle grazie a CSS3 direttamente sulla pagina assegnata, per capirci meglio un sistema tipo WebcamToy.

Non è possibile accedere alle telecamere web e altre periferiche direttamente da JavaScript tuttavia c’è una soluzione al nostro problema – Flash è perfetto per il supporto webcam, ed è installato su quasi tutti i computer abilitati. 

La soluzione utilizzare per Photobooth è webcam.js . Si tratta di un wrapper JavaScript che grazie alle API di flash ci permette di controllare la webcam dell’utente cosi da poter scattare istantanee. 

Il primo passo per costruire il nostro Photobooth è adagiare la struttura HTML della pagina principale.
Useremo jQuery per recuperare un elenco delle ultime foto, quindi non abbiamo bisogno di incorporare qualsiasi logica PHP qui.

HTML

<link rel="stylesheet" type="text/css" href="/assets/css/styles.css" />
<link rel="stylesheet" type="text/css" href="/assets/fancybox/jquery.fancybox-1.3.4.css/">

Adesso dobbiamo richiamare nella nostra pagina il file style.css e fancyBox che ci aiuteranno nel dare un po di stile alla pagina. I file li troverete a fine articolo

Adesso richiamiamo la topbar e inseriamo il tag h1 per il titolo

<div id="topBar">
   <h1>Photobooth</h1>
</div>

Inseriamo il contenitore che conterra le nostre foto

<div id="photos"></div>

definiamo il div camera che conterrà la nostra webcam e tutto il resto

<div id="camera">
<span class="tooltip"></span>
<span class="camTop"></span>
 
<div id="screen"></div>
<div id="buttons">
<div class="buttonPane">
<a id="shootButton" href="" class="blueButton">Shoot!</a>
</div>
<div class="buttonPane hidden">
<a id="cancelButton" href="" class="blueButton">Cancel</a>
<a id="uploadButton" href="" class="greenButton">Upload!</a>
</div>
</div>
<span class="settings"></span>
</div>
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="/assets/fancybox/jquery.easing-1.3.pack.js"></script>
<script src="/assets/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script src="/assets/webcam/webcam.js"></script>
<script src="/assets/js/script.js"></script>
 </body>
</html>

Ci sono tre div principali nella pagina:

  • Barra superiore visualizza le rubriche;
  • Foto è dove sono inserite le immagini dopo che sono stati richiesti con il metodo $ getJSON di jQuery.;
  • Fotocamera detiene il film webcam.swf (che stiamo usando per comunicare con la webcam). Essa detiene anche i pulsanti di controllo per scattare foto e caricare.

Nella parte inferiore del corpo, abbiamo incluso un certo numero di file JavaScript.
Partendo con la libreria jQuery, ci sono anche l’aggiunta del plug fancybox per la visualizzazione delle foto, webcam.js – il plugin che ci permette di comunicare con telecamere web attraverso flash, e, infine, il nostro script.js per fare tutto questo lavoro insieme.

PHP

/* Questo file riceve l'istantanea JPEG da attività / webcam / webcam.swf come una richiesta POST. 
*/ 
//Abbiamo solo bisogno di gestire le richieste POST: 
if(strtolower($_SERVER['REQUEST_METHOD']) != 'post'){
    exit;
}

$folder = 'uploads/';
$filename = md5($_SERVER['REMOTE_ADDR'].rand()).'.jpg';

$original = $folder.$filename;

// The JPEG snapshot is sent as raw input:
$input = file_get_contents('php://input');

if(md5($input) == '7d4df9cc423720b7f1f3d672b89362be'){
    // Blank image. We don't need this one.
    exit;
}

$result = file_put_contents($original, $input);
if (!$result) {
    echo '{
        "error"     : 1,
        "message"   : "Failed save the image. Make sure you chmod the uploads folder and its subfolders to 777."
    }';
    exit;
}

$info = getimagesize($original);
if($info['mime'] != 'image/jpeg'){
    unlink($original);
    exit;
}

// Moving the temporary file to the originals folder:
rename($original,'uploads/original/'.$filename);
$original = 'uploads/original/'.$filename;

// Using the GD library to resize
// the image into a thumbnail:

$origImage  = imagecreatefromjpeg($original);
$newImage   = imagecreatetruecolor(154,110);
imagecopyresampled($newImage,$origImage,0,0,0,0,154,110,520,370); 

imagejpeg($newImage,'uploads/thumbs/'.$filename);

echo '{"status":1,"message":"Success!","filename":"'.$filename.'"}';

upload.php

Anche se la pagina principale è un semplice HTML, abbiamo bisogno di PHP per rendere il nostro lavoro foto stand. Per essere più precisi, ci sono due caratteristiche della app che ci servono per PHP – ricevere l’immagine caricata dal flash, e per l’elenco dei file caricati.

Come ho detto prima, non siamo in grado di comunicare con telecamere web direttamente da JavaScript.Questo è il motivo per cui abbiamo bisogno di Flash, che ha un eccellente supporto webcam, di agire come strato intermedio. Questo ci lascia con due scelte:

  • possiamo avere il flash esportare l’istantanea e renderla disponibile a JavaScript (lenta e inefficace);
  • disporre di Flash caricare la foto direttamente ad uno script PHP

Sensibilmente, la webcam plug in flash utilizza il secondo approccio. Ha anche il vantaggio di caricare l’istantanea come immagine JPEG valida, che significa che possiamo salvarlo in un file direttamente con PHP, senza dover convertire.

browse.php

/*
    In this file we are scanning the image folders and
    returning a JSON object with file names. It is used
    by jQuery to display the images on the main page:
*/

// The standard header for json data:
header('Content-type: application/json');

$perPage = 24;

// Scanning the thumbnail folder for JPG images:
$g = glob('uploads/thumbs/*.jpg');

if(!$g){
    $g = array();
}

$names = array();
$modified = array();

// We loop though the file names returned by glob,
// and we populate a second file with modifed timestamps.

for($i=0,$z=count($g);$i<$z;$i++){
    $path = explode('/',$g[$i]);
    $names[$i] = array_pop($path);

    $modified[$i] = filemtime($g[$i]);
}

// Multisort will sort the array with the filenames
// according to their timestamps, given in $modified:

array_multisort($modified,SORT_DESC,$names);

$start = 0;

// browse.php can also paginate results with an optional
// GET parameter with the filename of the image to start from:

if(isset($_GET['start']) &&amp; strlen($_GET['start'])>1){
    $start = array_search($_GET['start'],$names);

    if($start === false){
        // Such a picture was not found
        $start = 0;
    }
}

// nextStart is returned alongside the filenames,
// so the script can pass it as a $_GET['start']
// parameter to this script if "Load More" is clicked

$nextStart = '';

if($names[$start+$perPage]){
    $nextStart = $names[$start+$perPage];
}

$names = array_slice($names,$start,$perPage);

// Formatting and returning the JSON object:

echo json_encode(array(
    'files' => $names,
    'nextStart' => $nextStart
));

Il browse.php file elenca il contenuto delle cartelle di immagini come un oggetto JSON. Lo fa con la funzione glob di PHP , che analizza la cartella e restituisce un array con i nomi dei file.

jQuery

Questo plugin espone una semplice API , disponibile come un oggetto globale chiamato webcam . Ci dà i metodi per il prelievo e il caricamento di foto, e per generare il codice embed necessaria per il file swf. 

In script.js sotto, useremo questa API e costruiamo il nostro script cabina di foto intorno ad esso. Prima di tutto definire alcune variabili e memorizzare nella cache i selettori jQuery più comunemente usati in tutto il codice per migliorare le prestazioni:

attività / js / script.js

$(document).ready(function(){

    var camera = $('#camera'),
        photos = $('#photos'),
        screen =  $('#screen');

    var template = '<a href="uploads/original/{src}" rel="cam" '
        +'style="background-image:url(uploads/thumbs/{src})"></a>';

    /*----------------------------------
        Setting up the web camera
    ----------------------------------*/

    webcam.set_swf_url('assets/webcam/webcam.swf');
    webcam.set_api_url('upload.php');   // The upload script
    webcam.set_quality(80);             // JPEG Photo Quality
    webcam.set_shutter_sound(true, 'assets/webcam/shutter.mp3');

    // Generating the embed code and adding it to the page:
    screen.html(
        webcam.get_html(screen.width(), screen.height())
    );

CSS3

/*-------------------
    Photo area
--------------------*/

#photos{
    margin: 60px auto 100px;
    overflow: hidden;
    width: 880px;
}

#photos:hover a{
    opacity:0.5;
}

#photos a,
#loadMore{
    background-position: center center;
    background-color: rgba(14, 14, 14, 0.3);
    float: left;
    height: 110px;
    margin: 1px 1px 0 0;
    overflow: hidden;
    width: 145px;

    -moz-transition:0.25s;
    -webkit-transition:0.25s;
    -o-transition:0.25s;
    transition:0.25s;
}

#photos a:hover{
    opacity:1;
}

#loadMore{
    cursor: pointer;
    line-height: 110px;
    text-align: center;
    text-transform: uppercase;
    font-size:10px;
}

#loadMore:hover{
    color:#fff;
    text-shadow:0 0 4px #fff;
}

Conclusione

È possibile utilizzare questa Photobooth come un divertimento oltre ad un forum della comunità o altro sito di social networking. Opzionalmente si può costruire in un campo di commento per andare con la foto, o integrarlo più profondamente con il tuo sito.

Download

Demo

12-01-2019
Pubblicità