Best Practices per l’encoding video e il delivery su Mobile
Fabio Sonnati – Maggio 2011
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Speaker bio – Fabio Sonnati
TWITTTER: @sonnati
Fabio Sonnati - Freelance, Adobe Community Professional dal 2006,
sviluppatore e beta tester di Flash Media Server dal 2003. Ho una specifica
esperienza nella progettazione, sviluppo ed ottimizzazione di piattaforme di
erogazione video e di encoding.
Blog: http://sonnati.wordpress.com
Twitter: @sonnati
Email: [email protected]
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
2
Premessa: il video ha cambiato il web
Il video ha cambiato il modo di comunicare su Internet. E’ stato uno
dei principali protagonisti del web negli ultimi 5 anni, da YouTube in
poi.
“driver” fondamentale di tale trend è stato l’ Adobe Flash Player :
pluging onnipresente, cross-platform, immediato e programmabile
ha reso facilmente accessibile al 98-99% dell’Internet audience
contenuti video annullando le barriere di accesso precedenti.
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
PARTE I - Ecosistema video di Adobe
Lo “Status Quo”
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Breve cronistoria del video sul web
1998-2005 – Il video su Internet esiste fin dagli albori ma resta ai
margini per carenza di connessioni veloci, di codec efficienti, di
tecnologie realmente “abilitanti” e per la guerra tra i tre maggiori
player del mercato: Microsoft, Apple e Real Networks.
2005-6 – YouTube, sfruttando il Flash Player 7 come tecnologia
abilitante, inaugura il nuovo trend del video su Internet.
Il video ha livelli di qualità non elevati ma la totale facilità di
accesso, i modelli on-demand e “user generated content”
determinano una reale esplosione di consenso da parte degli
Internauti.
2007-8 – Adobe rilascia il Flash Player 9 update 3 con supporto alle
tecnologie H.264 e AAC. Lo “stato dell’arte” nella campo della
codifica audio video arriva sul 98% dei desktop.
2009-10 – Viene rilasciato Flash player 10 che segna la maturità per la
piattaforma video di Adobe su desktop. Inizia la strategia cross platform.
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
10 Generazioni di Innovazione con Flash
Flash 6
Viene introdotto il codec video Spark per lo streaming da FCS
Flash 7
Progressive downloading
Flash 8
Codec video VP6
Flash 9 update 3
Codec video H.264, codec audio AAC
Flash 10
p2p, accelerazione video, DRM, speex, dynamic streaming
Flash 10.1 e successivi (Desktop + Mobile)
HTTP dynamic streaming, StageVideo, Echo cancellation,
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
ECOSISTEMA VIDEO ADOBE
Gli elementi dell’ecosistema:
-
Flash Player/AIR (Browser, Desktop, Mobile, Connected TV)
CS 5.5 Media Encoder (Desktop encoder)
FMES (Batch encoder)
Flash Media Live Encoder 3.5 (live encoder)
Flash Media Server 4 (streaming server, communication server)
Flash Access 2 (DRM)
Cirrus and LCCS (Services)
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Penetrazione della piattaforma Flash su Desktop
L’Adoption rate delle nuove release del Flash Player è in continua
ascesa. Una nuova release supera l’80% di diffusione in pochi mesi.
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Penetrazione della piattaforma Flash su Mobile
Nel 2011 sono previsti oltre 40 modelli di smartphones con supporto al
Flash Player i quali costituiranno una base di 132 Milioni di device
(36% del totale smart phones venduti). Se consideriamo Flash o AIR
su telefoni o tablet si sale a 200 Milioni di device.
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Flash Player e AIR su Mobile
Flash Player e AIR sono disponibili oggi su:
• Android dalla release 2.2 in poi
• WebOS di HP
• QNX (Playbook) di RIM
Le applicazioni AIR possono essere cross-compilate per funzionare anche sui
dispositivi iOS come applicazioni native. Nessun supporto al Flash Player
nel browser.
(ricordiamo infine che Flash e AIR sono disponibili anche su GoogleTV e tutte
le SmartTV e lettori Bluray 2011 di Samsung)
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Flash Player e AIR su Mobile
ANDROID
Supporto molto esteso alle funzioni di AIR 2.6 con alcuni distinguo:
Full HW acceleration abilitata solo su Android 3.1 (StageVideo)
Il supporto a Access 2.0 arriverà nel corso dell’estate. Accesso alla sola
fotocamera dorsale come sorgente di streaming.
PLAYBOOK
Eccellente livello di supporto delle funzioni audio video. Streaming 720p
e 1080p senza problemi.
iOS
Alcune limitazioni a partire dal mancato supporto ai codec H.264 e AAC
In attesa di AIR 2.7 per un netto incremento delle performance generali.
Limitazioni superabili in parte utilizzando StageWebView.
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
PARTE II – Encoding Best Practices
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Tecnologia video H.264
H.264 è lo stato dell’arte della codifica video.
Standard internazionale, è ampiamente supportato dall’industria
(BlueRay disk, HD Broadcasting, Mobile Video, HD Camcorder).
H.264 è un codec complesso, con prestazioni superiori a WMV, VP6,
DivX o codec più moderni come il VC1 o il VP8. Ha grandi potenzialità
di miglioramento e ancora non è sfruttato al 100%.
H.264 nasce come codec unico per una molteplicità di scenari, dal
mobile al broadcasting full-hd. Dalla video conferenza al vod passando
per il web streaming.
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Principi di compressione video
La codifica video viene genericamente cosi’ eseguita:
• Il frame viene diviso in blocchi (tipicamente 8x8).
• Ad ogni blocco viene applicato un modello psico-visuale per cui
ai dettagli più fini (alte frequenze) viene applicata una
quantizzazione meno accurata.
• Le ridondanze spaziali vengono predette dai blocchi adiacenti
(spatial prediction).
• Le ridondanze temporali vengono ridotte tramite la “motion
estimation e compensation” cosi’ che solo le differenze rispetto
ad un fotogramma di riferimento vengono codificate.
• Viene applicata una codifica entropica al bitstream per
comprimerlo ulteriormente (VLC, variable length coding).
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Tipologie di frame video
I-frames
Vengono codificati solo usando tecniche Intra-frame. Gli I-frame non hanno
riferimenti ad altri fotogrammi e sono quindi utilizzati come punti di accesso
(Keyframes).
P-frames
Vengono predetti dai precedenti reference frames utilizzando tecniche di
motion estimation and compensation (Inter-frames).
Hanno riferimenti ad altri frame quindi formano una catena di dipendenze.
B-frames
Sono fotogrammi i cui blocchi vengono interpolati
fra un riferimento nel passato ed uno nel futuro.
Determinano una compressione molto efficiente.
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Lo standard H.264
H.264 utilizza moltissime tecniche evolute di
compressione rispetto agli standard precedenti
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Blocchi 4x4 e/o 8x8
Diverse modalità di predizione spaziale
Reference Frames multipli
motion compensation accurata
B-Frame molto efficienti
Deblocking filter
Context-adaptive entropy coding (CABAC)
Lo standard H.264
Codec “Profiles”
Il profilo H.264 determina il sottoinsieme di tecniche di encoding
utilizzabili dall’encoder e dal decoder. I profili più semplici richiedono
minore CPU e memoria ma sono meno efficienti in termini di rapporto
qualità / banda.
Baseline Profile (BP): Profilo dedicato a dispositivi mobile a bassa
potenza di elaborazione (Non supporta i B-Frames, il CABAC e i
blocchi 8x8)
Main Profile (MP): Originariamente inteso come profilo generico per
dispositivi video mainstream, ha perso progressivamente importanza
rispetto all’ High profile.
High Profile (HiP): Profilo nato per le esigenze del broadcasting HD e
FullHD, è usato nel BluRay e nel digitale satellitare e terrestre HD.
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Lo standard H.264
Codec “Levels”
Il livello definisce la massima risoluzione dei frame, la massima
memoria richiesta per la decodifica, il massimo numero di reference e il
massimo bitrate. Il livello è molto importante per la compatibilità con i
device mobili. Tipicamente il profilo baseline è usato con livello fino a
3.1, il main profile con livello fino a 4.1 e l’ high profile con livello fino a
5.1
La buona notizia è che il decoder software di H.264 incluso nel Flash
supporta ogni profilo e ogni livello. Tuttavia sui dispositivi mobile è
importante assicurarsi di sfruttare l’accelerazione HW.
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
HW Acceleration sui dispositivi Mobile
Tipologie di accelerazione HW
1. Accelerazione HW della sola decodifica
2. Accelerazione HW della decodifica, dello scaling e del compositing
Playbook : accelerazione più avanzata su ogni livello e profilo fino a
risoluzioni FullHD
Android 2.2, 2.3 e 3.0 : sola la prima forma
Android 3.1 : la forma più completa (StageVideo)
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
HW Acceleration sui dispositivi Mobile
Conseguenza:
Per garantire le migliori performance anche su dispositivi Android entrylevel e per supportare altri dispositivi con la stessa codifica (iOS più
vecchi, BlackBerry, Simbian) è consigliabile codificare in Baseline
Level 3.0
Risoluzione consigliate:
Mobile phone
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Tablet
HW Acceleration sui dispositivi Mobile
Esempio di settings CS 5.5 Media Encoder
Video settings
Format – multiplexing: F4V
Video – resolution (depends):
For 16:9 content: 640 × 360
For 4:3 content: 640 × 480
Frames per second (fps): Same as source footage
Profile: Baseline
Level: 3.0 or 3.1 (two to three reference frames will be used)
Bit rate: VBR, two-pass
Target bit rate: 350–600 kbit/sec. depending on video "complexity"
Maximum bit rate: (1.5 to 1.6) × target bit rate
Keyframe (depends): For progressive downloading: fps × (3 to 4)
Audio settings
Codec: AAC, stereo
Frequency: 44.1 kHz
Audio quality: High
Bit rate: 80 kbit/sec.
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
PARTE III – Delivery Best Practices
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Delivery best practices
Quale tecnica di erogazione ?
Flash Player supporta molte tecniche di erogazione differenti:
Progressive Download
RTMP Streaming
RTMP Dynamic Streaming
HTTP Dynamic Streaming
Peer Assisted Streaming
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Delivery best practices
Quale Player Video ?
Custom (low level Flash Player API)
OSMF (Framework)
Strobe or Flash Media Player (turn-key
solutions)
Raccomandazioni generiche
Utilizzate un rapporto di 16:10 per il player
Non utilizzare wmode = trasparent
Usare StageVideo, se disponibile
Usare Dynamic Streaming per migliorare la QoS
Fare device detection e modificare skin (pulsanti
grandi per il touch) e scelta delle risoluzioni / bitrate
in base al device.
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Delivery best practice
Raccomandazioni per i player custom o skinnati
- Evitare video con filtri, rotazioni, blending, trasparenza, pixel bender
- Posizionate i video su pixel esatti
- Limitare effetti e trasparenze sugli elementi della UI
- Preferire callback agli eventi e centralizzare i timer
- Determinare se siamo su mobile usando varie tecniche
-
If (Capabilities.cpuArchitecture == “ARM” ) … siamo su CPU Arm
-
If (Capabilities.version.indexOf(“AND”) != -1 … siamo su Android
-
Determinare la dimensione della diagonale:
-
var dpi:Number = Capabilities.screenDPI;
var screenX:Number = Capabilities.screenResolutionX;
var screenY:Number = Capabilities.screenResolutionY;
var screenDiagonal:Number = Math.sqrt(((screenX*screenX)+(screenY*screenY))) / dpi;
-
Quindi definire una UI dedicata al Touch e ai dispositivi con
display piccoli.
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Dynamic Streaming
Come massimizzare la QoS ?
Usare RTMP & HTTP Dynamic Streaming
FP10 può cambiare bitrate al volo per adattarsi ai cambiamenti di banda
disponibile
FP10.1 offre un API per il QoS che fornisce moltissime dettagliate informazioni
sulle prestazioni in decodifica del player, sulla banda disponibile e quella
richiesta istantaneamente dal flusso video. Grazie a queste info è possibile
attivare il cambio di bitrate che sarà trasparente per l’utente.
La DynamicStream class o meglio l’ OSMF implementa tutta la complessa
euristica necessaria per gestire il bitrate switching in base alla banda
disponibile, la dimensinone dello schermo la potenza della CPU.
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Dynamic Streaming
Dynamic Streaming – encoding recommendations
Use fixed length GOP (2-4 seconds)
Use 2-pass CBR (or “light” VBR es: VBV buffer = gop length)
Use same audio settings for each stream
Find a balanced set of resolutions - bitrates
Desktop 16:9
Resolution
Multiscreen 16:9
Bitrate
Resolution
1280 x 720
1-2 Mbit/s
1024 x 576
0.8-1.5 Mbit/s
848 x 480
0.6-1 Mbit/s
Resolution
640 x 360
0.4-0.7 Mbit/s
[email protected]
[email protected]
Bitrate
1280 x 720
1-2 Mbit/s
1024 x 576
0.8-1.5 Mbit/s
Bitrate
848 x 480
0.6-1 Mbit/s
640 x 360
0.5-0.8 Mbit/s
640 x 360
0.5-0.8 Mbit/s
512 x 288
0.4-0.6 Mbit/s
512 x 288
0.4-0.6 Mbit/s
480 x 272
0.3-0.4 Mbit/s
480 x 272
0.3-0.4 Mbit/s
320 x 180
0.2-0.3 Mbit/s
320 x 180
0.2-0.3 Mbit/s
Mobile 16:9
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Applicazioni video in AIR su iOS
E’ possibile sopperire alle limitazioni del
packager per iOS utilizzando funzioni native
tramite l’oggetto StageWebView e codice
HTML5 embeddato nel package.
Con il progetto StageWebViewBridge è infine
possibile gestire una comunicazione
bidirezionale con il contenuto dello
StageWebView.
var webView = new StageWebView();
webView.stage = this.stage;
webView.viewPort = new Rectangle( 0, 0, stage.stageWidth, stage.stageHeight);
var path:String = new File(new File("app:/html/service.htm").nativePath).url;
webView.loadURL(Path);
* http://code.google.com/p/stagewebviewbridge/wiki/Communication
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Thank you
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.