Audio e video streaming con Flash e strumenti Open Source

Webaccessibile.org
La risorsa italiana di IWA dedicata all'accessibilita' del Web
http://www.webaccessibile.org
Audio e video streaming con Flash e strumenti Open
Source
Pubblicato da Roberto Ellero il giorno 3 marzo 2006
Traduzione dell’articolo Video and Audio Streaming with Flash and
Open Source Tools , di Klaus Rechert
Si ringrazia l’autore per la gentile autorizzazione alla pubblicazione.
Audio e video streaming con Flash e Strumenti Open Source
Klaus Rechert 2005 ©
URL: http://klaus.geekserver.net/flash/streaming.html
Flash è stato sempre sviluppato e utilizzato per scopi multimediali, ma fino alla versione 6 le
possibilità per lo streaming audio erano limitate e non c’era alcun supporto per il video
streaming. Con le versioni 6 e 7 Macromedia ha introdotto il supporto video e un nuovo formato
di file per supportare diverse modalità di streaming. Questo articolo tratta di una sola variante di
streaming chiamata “scaricamento progressivo”, che non ha bisogno del server di streaming,
disponibile solamente con il Flash Communication Server (FCS), non free.
Flussi FLV
Lo streaming è costruito su un nuovo formato di file chiamato FLV, che separa il contenuto
trasmesso col flusso e il filmato Flash. Il risultato è un filmato Flash molto compatto che agisce
come un player multimediale e un deposito per contenuto di flusso da cui il filmato Flash carica
uno “stream” su richiesta.
Un singolo flusso FLV contiene al massimo un flusso audio e al massimo un flusso video. Flash
supporta audio non compresso e diversi formati compressi come MP3 e ADPCM, così come il
codec audio Nellymoser. Con la versione 6, Macromedia Flash ha anche introdotto il supporto
video per Flash. Nella versione 6 il solo codec video Sorenson H.263 è stato supportato, si
tratta di una versione leggermente modificata dello standard aperto H.263. La versione 7 di
Flash ha introdotto un secondo formato video, “Screen Video”, che è un formato video
semplice e senza perdita (loss less), sviluppato specialmente per lo “screen capturing“.
Convertire e creare contenuti
Un metodo per la creazione di flusso FLV è la conversione di audio esistente e del contenuto
video con FFmpeg [ffmpeg.sourceforge.net/]. FFmpeg è un progetto software maturo ed
eccellente per la conversione dell’audio e del video da e a diversi formati. Convertire un video
può essere semplicemente fatto con:
ffmpeg -i infile.[avi|mpeg] stream.flv
1/7
Webaccessibile.org
La risorsa italiana di IWA dedicata all'accessibilita' del Web
http://www.webaccessibile.org
FFmpeg utilizza il formato video Sorenson H.263 per codificare dati video. Non c’è alcun
supporto per lo Screen Video format in questa versione. Mentre lo Screen Video format è
principalmente utile per applicazioni di cattura di schermo, Sorensons H.263 è un codec video
polivalente con buoni tassi di compressione, adatto specialmente a codificare immagini in
movimento.
Un altro progetto inerente FLV è libflv [libflv.sourceforge.net/]. Mentre FFmpeg è una suite
generica per la conversione audio e video, libflv è focalizzato sul funzionamento con flussi FLV.
Il progetto è ancora in uno stadio molto iniziale, ma è in grado di codificare nello Screen Video
format, inoltre consente manipolazioni di flusso FLV semplici come il (de-)multiplexing di flussi
audio e video.
Una semplice applicazione di cattura di schermo GTK-based può essere trovata nella directory
example.
Costruire un semplice player multimediale
Dopo avere creato del contenuto da trasmettere in streaming, un player multimediale in Flash è
necessario. Un grande vantaggio dei player basati su Flash rispetto ad altri programmi
multimediali, basati su plugin, è che non abbiamo alcun vincolo sulla sua interfaccia e su come
integrarlo nel design dei siti.
MING è una libreria Open Source che è in grado di creare file Flash con quasi tutte le
caratteristiche Flash recenti, tra cui Action Script e supporto audio e video. La libreria ha anche
il supporto per un insieme di linguaggi di programmazione. Gli esempi presentati in questo
articolo sono scritti in PHP4. Convertire gli esempi in altri linguaggi supportati, come C/C++,
Java, Python o Perl, dovrebbe essere assai semplice.
Per eseguire il seguente esempio è necessaria una versione CVS di MING. È disponibile sia nel
servizio anonimo CVS di Sourceforge sia precompilata in http://klaus.geekserver.net/ming/.
Prima creiamo una nuova istanza movie e definiamo le dimensioni e il colore di sfondo:
ming_useswfversion(7); $movie=new SWFMovie(7); $movie->setDimension
($width, $height); $movie->Background($r,$g,$b);
Il nuovo filmato Flash può essere riempito ora di oggetti Flash chiamati caratteri. Per l’esempio
di programma multimediale creiamo un oggetto area video e lo aggiungiamo al film. Il metodo
add() prende un carattere e lo inserisce alla struttura flusso, consentendo la gestione
dell’oggetto. In questo modo sarà possibile ruotare, ridimensionare o rimuovere un oggetto. Se
l’oggetto sarà utilizzato con Action Script, gli può essere assegnato un nome.
$stream = new SWFVideoStream(); $stream->setDimension($width, $height);
$item = $movie->add($stream); $item->moveTo($x, $y); $item->setname("video");
Il costruttore SWFVideoStream () può anche considerare un file FLV come argomento. In
questo caso il flusso video sarà inserito nel file Flash. Tuttavia questo approccio ha alcuni
svantaggi. Prima di tutto il filmato Flash risultante sarà come minimo grande come come il
2/7
Webaccessibile.org
La risorsa italiana di IWA dedicata all'accessibilita' del Web
http://www.webaccessibile.org
flusso. Inoltre il frame rate del flusso non deve superare quello del filmato Flash, e ogni file
Flash è limitato a 16000 frame: questo significa che il flusso embedded può contenere al
massimo 16000 frame.
Un’applicazione per eseguire oggetti multimediali dovrebbe essere in grado di caricare ed
eseguire flussi dinamicamente. Quindi il costruttore SWFVideoStream () è chiamato senza
argomenti. Pertanto avremo un’area video vuota, che sarà controllata dal seguente codice
Action Script:
connection = new NetConnection(); connection.connect(null); stream = new
NetStream(connection); video.attachVideo(stream); stream.setBufferTime(10);
stream.play('http://localhost/mystream.flv');
Action Script crea dapprima un collegamento fittizio passando null al metodo connect()
dell’oggetto NetConnection. Per converso, un collegamento reale a un server di streaming
Macromedia può essere stabilito passando un URL valido al metodo. Avendo una istanza
NetConnection, un nuovo oggetto NetStream può essere creato e collegato all’area video
vuota. Questo oggetto gestisce lo streaming e fornisce metodi per il controllo del flusso. Il
precedente esempio carica un flusso FLV dal server web locale con un downloadbuffer di 10
secondi. Il codice Action Script può essere compilato e aggiunto al film con:
$action = new SWFAction($action_string); $movie->add($action);
Finora il filmato Flash carica ed esegue soltanto un certo flusso FLV. Manca una semplice
interfaccia utente dotata di pulsanti e di scorrimento per controllare il suo comportamento.
Flash utilizza il formato di bitmap non compresso chiamato DBL. MING fornisce una piccola
utility png2dbl per convertire immagini PNG in DBL. Tali immagini sono utilizzate per i pulsanti
di controllo del player:
$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);
Il precedente esempio crea un pulsante di pausa per il player multimediale.
Un pulsante interattivo viene creato in due passi. Prima di tutto il suo aspetto deve essere
definito, aggiungendo forme per definiti eventi mouse. In Flash una forma è la rappresentazione
di base per oggetti grafici. Per ogni mouse event un oggetto di forma diversa può essere
assegnato al pulsante. Nel precedente esempio i pulsanti hanno lo stesso aspetto.
Nel secondo passo l’azione dei pulsanti può essere definita assegnando Action Script a un
evento particolare.
Uno svantaggio che si ha utilizzando lo streaming in scaricamento progressivo, senza server di
streaming, è che non c’è alcuna possibilità di ottenere la lunghezza totale del flusso. Quindi le
funzionalità “seek-sliders” (barra a scorrimento) sono limitate alla ricerca all’interno delle parti
3/7
Webaccessibile.org
La risorsa italiana di IWA dedicata all'accessibilita' del Web
http://www.webaccessibile.org
già caricate del flusso.
La parte trascinabile della barra a scorrimento è realizzata come un oggetto movie-clip. Un
movie-clip è in esecuzione come un film indipendente nel filmato Flash. Ha una linea temporale
indipendente, può gestire script ed eventi esterni.
$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 a un oggetto movie. Il metodo add() inserisce un
oggetto Flash al frame attuale, nextFrame () lo termina e ne crea uno nuovo. Il movie clip è
anche un oggetto Flash normale, che può essere aggiunto a un film e messo sullo stage. Le
funzionalità del seek-slider sono definite da tre piccoli script. Le prime due azioni rendono
trascinabile il movie-clip:
$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 script, più lungo, definisce la posizione di flusso a seconda della x-position dello
scorrimento, se esso viene spostato dall’utente, oppure definisce la x-position secondo il tempo
attuale del flusso:
// width in px width = xMax - xMin; paused = false; if(drag) { // pause stream while seeking
_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; }
// restart paused stream if(paused) { _global.stream.pause(false); }
Questo script è assegnato allo $slider-handle con l’evento SWFACTION_ENTERFRAME.
Dopo avere aggiunto tutti gli elementi al filmato Flash, il primo frame deve essere chiuso con la
chiamata nextFrame (). Dal momento che non abbiamo necessità di un altro frame, il film può
anche essere terminato:
$movie->nextFrame(); $movie->save("FLVPlayer.swf");
Ecco il player multimediale che si ottiene:
Video di esempio: Copyright by Thilo Weigel, University of Freiburg
4/7
Webaccessibile.org
La risorsa italiana di IWA dedicata all'accessibilita' del Web
http://www.webaccessibile.org
Conclusione
Con Flash è facile creare un riproduttore audio-video leggero e completamente personalizzato.
Sono disponibili potenti strumenti Open Source per creare contenuti e filmati Flash. Questo
articolo ha introdotto i concetti di base dello streaming Flash attivato con MING. Il mediaplayer
qui presentato fornisce solo le caratteristiche di base ed è da considerarsi un semplice esempio.
Può essere esteso in molti aspetti, che lasciamo al lettore.
Riferimenti
[1.] FFmpeg Project [ffmpeg.sourceforge.net/]
[2.] libflv [libflv.sourceforge.net/]
[3.] MING [ming.sourceforge.net/]
[4.] MING CVS snapshots [klaus.geekserver.net/ming]
[5.] FLV player source tarball [klaus.geekserver.net/FLVPlayer.tar.gz]
© 2005 Klaus Rechert ([email protected])
http://klaus.geekserver.net/flash/streaming.html
Potrebbero interessarti anche i seguenti articoli
Componenti multimediali accessibili negli e-book
di Geoff Freed - WGBH National Center for Accessible Media Traduzione dell'articolo Accessible Multimedia in e-book, di Geoff
Freed, WGBH/NCAM Si ringrazia l'autore per la genti...
5/7
Webaccessibile.org
La risorsa italiana di IWA dedicata all'accessibilita' del Web
http://www.webaccessibile.org
Come montare e sottotitolare cellvideo per Facebook
Due modalità diverse per sottotitolare i video dei cellulari da pubblicare su Facebook, utilizzando Apple QuickTime Pro oppure
Yamb. Nel primo caso otteniamo la sottotitolazione s...
Accessibilità di Google Hangout
Google Hangout è lo strumento di videocomunicazione e archiviazione conferenze con una serie di interessanti caratteristiche di
accessibilità. Scopriamo assieme quali e come util...
Ridimensionare filmati e sottotitoli in una pagina web
L'accessibilità degli oggetti multimediali è un tema carico di variabili affascinanti quanto irrisolte: si pensi ad esempio alle differenze
comportamentali dei plug-i...
6/7
Webaccessibile.org
La risorsa italiana di IWA dedicata all'accessibilita' del Web
http://www.webaccessibile.org
Bye Bye Embed
Traduzione dell'articolo Bye Bye Embed di Elizabeth Castro, pubblicato in data 11 luglio 2006 nel sito alistapart.com URL articolo
originale: http://alistapart.com/articles/b...
7/7
Powered by TCPDF (www.tcpdf.org)