Nozioni di base sullo streaming di contenuti multimediali

Derek Herman

Jaroslav Polakovič

In questo articolo, scoprirai il concetto più avanzato di streaming multimediale e, alla fine, dovresti avere una buona conoscenza dei vari casi d'uso, protocolli ed estensioni di streaming. Iniziamo con una spiegazione di cosa sia realmente lo streaming.

Lo streaming di contenuti multimediali è un modo per fornire e riprodurre contenuti multimediali pezzo per pezzo. Anziché caricare un singolo file, che può essere lento se non ottimizzato per la rete, il player legge un file manifest che descrive come il contenuto multimediale di destinazione viene suddiviso in singoli blocchi di dati. I blocchi multimediali vengono successivamente uniti in modo dinamico durante il runtime, probabilmente a velocità in bit diverse, di cui parleremo più avanti.

Tieni presente che per fornire il flusso di dati sul tuo sito web, il server deve supportare l'intestazione della richiesta HTTP Range. Scopri di più sull'intestazione Accept-Ranges nell'articolo I tag <video> e <source>.

Casi d'uso relativi ai flussi di dati

La produzione di blocchi multimediali e dei manifest necessari che descrivono il flusso non è esattamente semplice, ma questa funzionalità consente di accedere ad alcuni casi d'uso interessanti che non è possibile realizzare semplicemente puntando un elemento <video> a un set di file di origine statici. Scoprirai di più su come aggiungere contenuti multimediali a una pagina web in una sezione successiva. Innanzitutto, è necessario conoscere alcuni casi d'uso dello streaming di contenuti multimediali se non vuoi limitarti al caricamento di più file nell'elemento <video>.

• Lo streaming adattivo prevede la codifica dei blocchi multimediali con diverse velocità in bit e il blocco multimediale di qualità più elevata che soddisfa la larghezza di banda attualmente disponibile del client viene restituito al media player.
• Nella trasmissione dal vivo i blocchi multimediali vengono codificati e resi disponibili in tempo reale.
• L'inserimento di contenuti multimediali avviene nel momento in cui altri contenuti multimediali, ad esempio gli annunci, vengono inseriti in uno stream senza che il player debba modificare l'origine dei contenuti multimediali.

Protocolli di streaming

I due protocolli di streaming più utilizzati sul web sono Dynamic Adaptive Streaming over HTTP (DASH) e HTTP Live Streaming (HLS). I player che supportano questi protocolli recupereranno il file manifest generato, determineranno quali blocchi multimediali richiedere e quindi li combineranno nell'esperienza multimediale finale.

Utilizzo di <video> per riprodurre uno stream

Molti browser non riprodurranno il tuo stream in modo nativo. Sebbene sia disponibile un supporto nativo per la riproduzione HLS, i browser in genere non supportano la riproduzione in streaming nativa DASH. Questo significa che spesso non è sufficiente indirizzare <source> nell'elemento <video> a un file manifest.

<video controls>
  <source src="manifest.mpd" type="application/dash+xml">
</video>

Ciò che può sembrare un deficit è in realtà un punto di forza travestito. I flussi sono potenti e le applicazioni che li consumano hanno esigenze diverse.

I file manifest di solito descrivono molte varianti di singoli contenuti multimediali. Prendi in considerazione diverse velocità in bit, diverse tracce audio e persino gli stessi contenuti multimediali codificati in formati diversi.

Alcune applicazioni potrebbero voler mantenere una quantità maggiore di video nel buffer, altre potrebbero voler precaricare i primi secondi di video di un episodio in arrivo e altre ancora implementare una propria logica per lo streaming adattivo. A questo punto dovresti avere una qualche funzione integrata del browser per generare stream multimediali da riprodurre, e basta.

Estensioni origine multimediale

Per fortuna, W3C ha definito una soluzione chiamata Media Source Extensions (MSE) che consente a JavaScript di generare i nostri stream multimediali. In breve, MSE consente agli sviluppatori di collegare un oggetto MediaSource a un elemento <video> e di riprodurre i dati multimediali che vengono pompati nei buffer collegati all'istanza MediaSource.

Esempio di base

const videoEl = document.querySelector('video');
const mediaSource = new MediaSource();

video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener(
  'sourceopen',
  () => {
    const mimeString = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
    const buffer = mediaSource.addSourceBuffer(mimeString);

    buffer.appendBuffer( /* Video data as `ArrayBuffer` object. */ )
  }
);

L'esempio semplificato riportato sopra illustra alcuni aspetti:

• Per quanto riguarda <video>, sta ricevendo dati multimediali da un URL.
• L'URL generato è solo un puntatore a un'istanza MediaSource.
• L'istanza MediaSource crea una o più istanze SourceBuffer.
• Quindi aggiungiamo semplicemente dati multimediali binari nel buffer, ad esempio utilizzando fetch.

Sebbene questi concetti di base siano semplici e sicuramente sia possibile scrivere un video player compatibile con DASH e HLS da zero, la maggior parte delle persone sceglie solitamente una delle soluzioni open source mature già esistenti, come Shaka Player, JW Player o Video.js per citarne alcune.

Tuttavia, abbiamo creato una PWA Media demo chiamata Kino che mostra come potresti sviluppare il tuo sito web di base per lo streaming di contenuti multimediali che fornisce la riproduzione di contenuti multimediali offline utilizzando solo il semplice elemento <video>. Abbiamo piani nella nostra roadmap per supportare, tra le altre funzionalità, framework e gestione dei diritti digitali. Controlla di tanto in tanto gli aggiornamenti o richiedi una funzionalità. Scopri di più nell'articolo PWA con streaming offline.

Formato dei blocchi multimediali

Per molto tempo, DASH e HLS hanno richiesto la codifica dei blocchi multimediali in formati diversi. Nel 2016, tuttavia, è stato aggiunto il supporto per i file MP4 (fMP4) standard a HLS, un formato supportato anche da DASH.

I blocchi video che utilizzano il container fMP4 e il codec H.264 sono supportati da entrambi i protocolli e possono essere riprodotti dalla maggior parte dei giocatori. Ciò consente ai produttori di contenuti di codificare i propri video una sola volta, il che a sua volta consente di risparmiare tempo e spazio su disco.

Per ottenere una qualità migliore e ridurre le dimensioni dei file, ti consigliamo di scegliere di codificare diversi set di blocchi multimediali utilizzando formati più efficienti come VP9, anche se prima di procedere devi imparare a preparare i file multimediali per il web, e questo è il prossimo passo.