Christian Castelli
a- a+

Streaming AudioVideo con Flash. Solo con strumenti e programmi open source

Flash è sempre stato sviluppato ed usato per contenuti multimediali, ma fino alla versione 6 le possibilità per lo streaming audio erano limitate e non c'era alcun supporto per i video. Con le versioni 6 e 7 Macromedia ha introdotto il supporto ai video e un nuovo formato di file per supportare varie tipologie di streaming. Questo articolo tratterà soltanto una tipologia di streaming definita come "download progressivo" che non richiede il supporto lato server. Per il vero supporto streaming si può ricorrere alla soluzione commerciale di Adobe denominata Flash Media Server.


Stream FLV

Lo streaming è basato sul formato FLV, che separa il contenuto inviabile dal filmato in flash. Il risultato è un filmato in flash molto compatto che agisce come un lettore multimediale e come contenitore per i contenuti inviabili, dai quali il filmato in flash carica uno stream su richiesta.

Un singolo stream FLV contiene al massimo uno stream audio e uno stream video. Flash supporta il suono non compresso e vari formati compressi come MP3 e ADPCM così come il codec audio proprietario Nellymoser. Con la versione 6 di flash, Macromedia aveva introdotto il supporto ai video. Nella versione 6 era supportato solo il codec video Sorenson H.263, che è una versione leggermente modificata dello standard H.263. La versione 7 aveva introdotto un secondo formato video detto "Screen Video" , che è un formato video senza perdita, sviluppato soprattutto per la cattura dello schermo.


Convertire e creare contenuti

Un metodo per creare stream FLV è convertire il contenuto audio e video esistente con FFmpeg, un software maturo ed eccellente per la conversione audio/video in vari formati. Per convertire un video con FFmpeg è sufficiente digitare nella shell (o prompt dei comandi) il comando:

ffmpeg -i infile.[avi|mpeg] stream.flv

Fmpeg usa il formato Sorenson H.263 per l'encoding dei video. Al momento non c'è il supporto per il formato Screen Video. Mentre il formato Screen Video è usato soprattutto per applicazioni che catturano lo schermo, Sorensons H.263 è un codec usabile per vari scopi con buoni tassi di compressione, adatto soprattutto per l'encoding di filmati video.

Un altro progetto che tratta gli stream FLV è libflv. Mentre FFmpeg è un encoder audio/video generico, libflv si concentra sugli stream FLV. Il progetto è ancora in fase embrionale, ma è comunque in grado di eseguire l'encoding di video in formato Screen Video e permette la semplice manipolazione di stream FLV come il (de-)multiplexing di flussi audio e video. Una semplice applicazione per la cattura dello schermo basata su GTK può esser trovata nella directory contenente gli esempi.


Costruire un semplice lettore multimediale

Dopo aver creato del contenuto multimediale, è necessario un lettore multimediale in flash. Un grosso vantaggio dei lettori basati su flash rispetto ad altri basati sui plugin è quello di non aver limitazioni riguardo all'estetica e alle possibilità di integrazioni nel proprio sito web.

MING è una libreria open source in grado di creare file flash con quasi tutte le potenzialità di flash, includendo il supporto per Action Script, per l'audio e il video. La libreria inoltre fornisce delle estensioni per svariati linguaggi di scripting e di programmazione. Gli esempi che andremo a presentare in quest'articolo sono scritti in PHP4, anche se sarebbe banale effettuare un porting di questi esempi in altri linguaggi quali C/C++, Java o Python.

Per eseguire l'esempi seguente è necessario aver installato MING. E' possibile scaricarlo attraverso il servizio CVS di SourceForge.

Prima di tutto creiamo un'istanza di SWFMovie e settiamo le dimensioni e il colore dello sfondo:

ming_useswfversion(7);
    $movie=new SWFMovie(7);
    $movie->setDimension($width, $height);
    $movie->Background($r,$g,$b); 

A questo punto l'oggetto può essere esteso da altri oggetti flash definiti caratteri. Per l'esempio del lettore multimediale, creiamo una "tela" (canvas), la quale viene aggiunta al movie. Il metodo add() richiede un carattere e lo inserisce nel frame corrente ritornando un riferimento all'oggetto. Questo oggetto può essere usato per muovere, ruotare o ridimensionare un oggetto. Se l'oggetto richiederà l'uso di Action Script, gli si può assegnare un nome:

$stream = new SWFVideoStream();
    $stream->setDimension($width, $height);
    $item = $movie->add($stream);
    $item->moveTo($x, $y);
    $item->setname("video"); 

Il costruttore SWFVideoStream() può avere anche un file FLV come argomento. In questo caso lo stream video verrà integrato nel file flash. Ad ogni modo questo approccio possiede alcuni svantaggi: prima di tutto, il filmato risultante sarà tanto grande almeno quanto lo stream, ma anche il frame rate del flusso non dovrà eccedere il frame rate del filmato in flash ed ogni file flash sarà limitato a 16000 frame, il che significa che lo stream intregrato potrà contenere al massimo 16000 frame.

Un lettore multimediale dovrebbe essere in grado di caricare e riprodurre i flussi dinamicamente. Quindi il costruttore SWFVideoStream() viene richiamato senza argomenti. In questo modo verrà creata una canvas vuota, che sarà controllata dal seguente codice Action Script:

connection = new NetConnection();
    connection.connect(null);
    stream = new NetStream(connection);
    video.attachVideo(stream);
    tream.setBufferTime(10);
    stream.play('http://localhost/mystream.flv'); 

Lo script prima crea una pseudo connessione passando il valore null al metodo connect() dell'oggetto NetConnection. In alternativa, può esser stabilita una reale connessione ad un server di streaming Adobe passando un url valido al metodo in questione. Avendo a disposizione un'istanza di NetConnection, possiamo creare un nuovo oggetto NetStream e allegarlo alla canvas vuota. Questo oggetto gestirà lo streaming e fornisce metodi per controllare lo stream. L'esempio soprastante carica uno stream FLV dal web server locale con un buffer di download di 10 secondi. Il codice Action Script può essere compilato e aggiunto con il seguente codice:

$action = new SWFAction($action_string);
    $movie->add($action);

Fino ad ora il filmato in flash carica e riproduce un certo flusso FLV. Per controllarne il suo comportamento, manca una semplice interfaccia grafica costituita da alcuni bottoni e una slider per scorrere il filmato. Flash ha i propri formati bitmap chiamati DBL. MING fornisce una piccola utility, png2dbl, per convertire immagini PNG in DBL. Tali immagini vengono usate per i bottoni del lettore:

$button = new SWFButton();
   $flags = (SWFBUTTON_UP | SWFBUTTON_HIT | 
             SWFBUTTON_OVER | SWFBUTTON_DOWN);
   $button->addShape(ImageShape("images/pause.dbl"), $flags);
   $action = new SWFAction("stream.pause();");
   $button->addAction($action, SWFBUTTON_MOUSEDOWN);
   $button_ref = $movie->add($button);
   $button_ref->moveTo($x, $y);

L'esempio qui sopra crea un bottone per la pausa. Un bottone interattivo viene creato in due passi: prima se ne definisce l'estetica aggiungendo forme al variare degli eventi del mouse. In flash una forma è la rappresentazione base per gli oggetti grafici. Per ogni evento del mouse si può assegnare una forma differente. Nell'esempio soprastante il bottone avrà sempre lo stesso aspetto.
Il secondo passo definisce l'azione da intraprendere per un certo evento riguardante il bottone, assegnando del codice ActionScript.

Uno svantaggio nell'uso dello streaming progressivo senza il supporto del server è la mancata possibilità di sapere in anticipo la lunghezza totale dello stream. Quindi la funzionalità della slider è limitata alla parte dello stream che è già stata scaricata.

La parte della slider spostabile con il mouse viene realizzata attraverso un oggetto di tipo movie-clip. Un movie-clip viene eseguito come un filmato indipendente nel filmato flash: ha una time line indipendente, può gestire gli script e gli eventi esterni da sé:

$mc = new SWFSprite();
   $shape = new SWFShape();
   $shape->setLine(4,25,0,0,128);  
   $shape->movePenTo(0, 5);     
   $shape->drawLineTo(0, 10);      
   $mc->add($shape);
   $mc->nextFrame();
   $slider = $movie->add($mc);
   $slider->moveTo($xMin, $y);

Un movie clip (SWFSprite) ha metodi simili all'oggetto SWFMovie. Il metodo add() inserisce un oggetto flash nel frame corrente, nextFrame() termina il frame corrente e ne crea uno nuovo. Il movie clip è anche un normale oggetto flash che può essere aggiunto ad un movie. La funzionalità della slider viene definita in tre piccoli script. Le prime due azioni rendono il movie-clip spostabile:

$a = new SWFAction("startDrag(this, $xMin, $y, $xMax, $y, 1); drag = true;");
 $slider->addAction($a, SWFACTION_MOUSEDOWN);
 $a = new SWFAction("stopDrag(); drag=flase;");
 $slider->addAction($a, SWFACTION_MOUSEUP);

Il terzo e più lungo script setta la posizione dello stream a seconda della coordinata orizzontale della slider se questa viene effettivamente mossa dall'utente o setta la posizione orizzontale della slider a seconda della posizione temporale dello stream:

// larghezza in px
 width = xMax - xMin;   
 paused = false;     
 if(drag) {
   // mette in pausa lo streaming     
   _global.stream.pause(true);            
   paused = true;                        
   x = _root._xmouse - xMin;             
   seekTo = (_global.streamLen / width) * x;           
   _global.stream.seek(seekTo);         
 } else {
    pos = (_global.stream.time * 
         (width / _global.streamLen)) + xMin;
   this._x = pos;                   
   this._y = y;       
 } 
   
  // fa ripartire lo stream
  if(paused) {                 
   _global.stream.pause(false);
  }

Questo script viene assegnato al riferimento di $slider attraverso l'evento SWFACTION_ENTERFRAME.

 

Dopo aver aggiunto tutti gli elementi al filmato flash il primo frame deve essere chiuso con la chiamata del metodo nextFrame(). Poiché non abbiamo bisogno di un altro frame, il movie può esser terminato:

$movie->nextFrame();      
 $movie->save("FLVPlayer.swf");

Ed ecco il lettore multimediale risultante:

 

Conclusioni

Con flash è facile creare lettori multimediali leggeri, personalizzabili e integrabili in pagine web. Ci sono potenti strumenti open source disponibili per creare contenuti e filmati in flash. Quest'articolo ha introdotto i concetti basilari dello streaming flash e come lavorare con MING. Il lettore presentato fornisce le funzionalità più basilari possibili ed è stato creato come puro esempio dimostrativo, estendibile in svariati modi lasciati al lettore.



Ti potrebbe interessare anche

commenta la notizia

C'è 1 commento
Marcello
Ti è piaciuto l'articolo?