Web Cam con Flash MX

In questo tutorial vedremo come mettere sul sito con Flash MX una web-cam.
Questa non è che la base per sviluppi futuri, infatti la web-cam, a parte gli usi hobbystici, potrebbe avere utilizzi professionali,
nel settore della sicurezza o del controllo a distanza di particolari eventi.
Prerogativa di questo tutorial è quella di adattarsi a qualsiasi tipo di web-cam, e soprattutto di fornire le immagini aggiornate senza dover effettuare il refresh della pagina.
Tutto questo è reso possibile (e semplice) da azioni innovative quali il loadMovie(.jpg) - caricamento di foto esterne.
Naturalmente, anche se non del tutto indispensabile (si potrebbero upgradare altre foto) è necessario possedere una web-cam (si
trovano ormai in qualsiasi supermercato a pochi Euro).
Dopodichè si utilizzerà il softwarino fornito a corredo per mettere le foto on line.
Nel caso non abbiate il software ne troverete molti on-line.
Questo tutorial funziona indipendentemente da qualsiasi linguaggio server ed è compatibile per ogni browser che abbia correttamente installato il plug-in di Flash MX.

Requisiti tecnici necessari:
* Una web-cam
* Un software per la pubblicazione delle immagini su web (*)
* Una linea di connessione sufficientemente veloce (consigliata almeno Isdn o superiore)

Lato client: Plug-in di Flash 6
Lato server: compatibile con qualsiasi tipo di server

(*) I software per il funzionamento delle web-cam sono solitamente forniti a corredo con la web-cam
se la vostra web-cam è sprovvista di software, si trovano on-line appositi sofware universali.




Passiamo ora alla realizzazione pratica:
Designate una cartella dove pubblicherete il tutorial, o dove lo inserirete in una pagina html.
Nella stessa cartella dovranno esserci le foto che verranno successivamente upgradate dalla web-cam.
E' consigliabile usare la stessa cartella, e ricordatevi che le foto in ogni caso dovranno essere nel vostro dominio (anche di 2° livello).
Per avere buone performance di aggiornamento dovrete avere almeno un modem Isdn e per aggiornarle ogni pochi secondi alle dimensioni impostate, anche un Adsl.
Queste connessioni sono infatti asincrone e la velocità di upgrade, nel migliore dei casi è 1/10 di quella di download.
Naturalmente nessun problema se potete disporre di una linea Hdsl, Cable o Fibra Ottica.
Nel caso disponiate una connessione lenta, potrete variare il tempo di frequenza delle immagini facilmente.
Nel nostro test abbiamo usato una web-cam modello Creative Go-Plus con sofware a corredo.

Preparazione:
La preparazione della web-cam richiede pochi attimi, sul pannello di settaggio di controllo, dovremmo inserire l'ftp del sito, login
e password.
Non è necessario far creare la pagina html delle foto, se volete all'inizio fatelo, per confrontare i funzionamenti.
Abbiamo impostato a 10 le foto da upgradare (alcune ne permettono di più altre meno).
Impostate il nome della foto (nel nostro esempio è "Video") ed il sofware provvederà ad upgradarle e numerarle da 1 a 10
(o al numero scelto come max...)

Ciack si gira !

Dopo i dovuti preamboli andiamo a vedere il codice Actionscript, che è tutto nell'unico frame e nella timeline:

//inizializzo le variabili
num = 1;
sc = 1;
visto=1;

Creiamo due MC vuoti, una per precaricare le immagini, un'altro per visualizzarle:

_root.createEmptyMovieClip("precarica",1); //MC nascosto di precaricamento
precarica._visible=0;
precarica._xscale=0;
precarica._yscale=0;
_root.createEmptyMovieClip("fotocam",10); // MC del visore della Web-Cam
fotocam._x=screen._x; // posizioni x e y del visore
fotocam._y=screen._y;

Creiamo l'Array delle foto, se fossero meno o più di 10, è sufficiente aggiungere o levare valori:

webcam = new Array(); // Array delle foto da caricare
webcam[1] = "Video01"; // nell'array i nomi dei files da caricare senza estensione
webcam[2] = "Video02";
webcam[3] = "Video03";
webcam[4] = "Video04";
webcam[5] = "Video05";
webcam[6] = "Video06";
webcam[7] = "Video07";
webcam[8] = "Video08";
webcam[9] = "Video09";
webcam[10] = "Video10";
numfoto=webcam.length-1;

Costruiamo la funzione di visualizzazione delle foto:

Movieclip.prototype.scatto=function(){ // costruisco la funzione di scatto
if(control){
num=1;
fotocam.loadMovie(webcam[visto]+ ".jpg");
visto++; // incremento per tutte le foto
if(visto>=numfoto+1){
visto=1; // poi riporto a posizione iniziale
fotoload=1;
pari=!pari;
}
}
}

Costruiamo la funzione di caricamento delle foto:

// precaricamento delle foto in MC nascosto
Movieclip.prototype.loadcam=function() { // funzione di precaricamento
diff=fotoload-visto;
if((diff<=2)){
if(fotoload<=numfoto+1){
file = webcam[num] + ".jpg";
precarica.loadMovie(file);
fotoload++;
num++;
}else{
num=1;
fotoload=1;
}
}
}

Costruiamo la funzione di controllo del caricamento delle foto:

Movieclip.prototype.control=function(){ // controllo che la foto sia stata caricata
ini=precarica.getBytesLoaded();
fine=precarica.getBytesTotal();
if((ini>=fine)&&(ini>120)&&(visto<=fotoload)){
return true;
}else{
return false;
}
}

Avviamo le funzioni e settiamo un tempo in millisecondi per richiamarle:

// avvio le funzioni e le richiamo a intervalli
loadcam();
scatto();
control();
setInterval(control, 300);
setInterval(loadcam, 2000);
setInterval(scatto, 5000);

Come opzione potremmo avere su un file esterno lo stato (on line- off-line) e un indicazione:

// opzione per lo stato on line ed eventuale messaggio
myvar=new LoadVars(_root);
myvar.load("status.asp");

Tutto qua !!! Easy no?

In pratica vengono fatte ciclare le foto, precaricate e poi visualizzate, continuamente.
Se non vengono aggiornate Flash riprenderà dalla stessa cache le foto e le rifarà vedere.
Se una foto è cambiata, viene riscontrato un cambiamento di file e Flash la ricarica.

Naturalmente questa è la base.
Ci potranno essere molte evoluzioni, ad esempio un servizio di assistenza con chat e web-cam integrate, o potrà essere usata con adeguate connessioni, per scopi didattici o di ricerca.

Download Tutorial Completo