Nozioni di base sullo streaming di contenuti multimediali

Derek Herman
Derek Herman
X GitHub
Jaroslav Polakovič
Jaroslav Polakovič
X GitHub

In questo articolo scoprirai il concetto più avanzato di streaming di contenuti multimediali e, al termine, dovresti avere una buona conoscenza dei vari casi d'uso, protocolli ed estensioni dello streaming. Iniziamo con una spiegazione di cosa sia effettivamente lo streaming.

Lo streaming di contenuti multimediali è un modo per caricare e riprodurre i contenuti multimediali in modo sequenziale. Invece di caricare un singolo file, che può essere lento se non ottimizzato per la rete, il player legge un file manifest che descrive in che modo i contenuti multimediali di destinazione sono suddivisi in singoli blocchi di dati. I chunk multimediali vengono poi ricollegati dinamicamente in fase di esecuzione, probabilmente a velocità in bit diverse, come scoprirai in seguito.

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

Casi d'uso per lo streaming

La produzione di chunk multimediali e dei manifest necessari per descrivere lo stream non è esattamente semplice, ma lo streaming sblocca alcuni casi d'uso interessanti che non è possibile ottenere semplicemente indicando un elemento <video> a un insieme di file di origine statici. Scopri di più su come aggiungere contenuti multimediali a una pagina web in una sezione successiva. Innanzitutto, devi conoscere alcuni scenari di utilizzo per lo streaming multimediale se vuoi fare di più del semplice caricamento di più file nell'elemento <video>.

  • Lo streaming adattivo prevede la codifica dei chunk multimediali in più velocità in bit e il chunk multimediale di qualità più elevata che si adatta alla larghezza di banda attualmente disponibile del client viene restituito al media player.
  • La trasmissione in diretta è il processo in cui i chunk multimediali vengono codificati e resi disponibili in tempo reale.
  • L'iniezione di contenuti multimediali consiste nell'inserire altri contenuti multimediali, come gli annunci, in un stream senza che il player debba modificare l'origine multimediale.

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, individueranno i chunk multimediali da richiedere e li combineranno nell'esperienza multimediale finale.

Usare <video> per riprodurre uno stream

Molti browser non riprodurranno il tuo stream in modo nativo. Sebbene esista un certo supporto nativo per la riproduzione HLS, in genere i browser non supportano la riproduzione di stream DASH nativo. Ciò 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 mascherato. Gli stream sono potenti e le applicazioni che li utilizzano hanno esigenze diverse.

I file manifest in genere descrivono molte varianti di un singolo contenuto multimediale. Ad esempio, bitrate diverse, più tracce audio e persino gli stessi contenuti multimediali codificati in diversi formati.

Alcune applicazioni potrebbero voler mantenere una quantità maggiore di video nel buffer, altre potrebbero voler eseguire il pre-caricamento dei primi secondi di video di una puntata imminente e altre ancora potrebbero voler implementare la propria logica per lo streaming adattivo. È qui che ti servirebbe una sorta di funzionalità del browser integrata per generare stream multimediali per la riproduzione e, per fortuna, ne esiste una.

Estensioni sorgente multimediale

Fortunatamente, il W3C ha definito un componente chiamato 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 inviati 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.
  • Poi aggiungiamo i dati multimediali binari al buffer, ad esempio utilizzando fetch.

Sebbene questi concetti di base siano semplici ed è certamente possibile scrivere da zero un lettore video compatibile con DASH e HLS, la maggior parte degli utenti 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 demo PWA multimediale chiamata Kino che mostra come sviluppare un sito web di streaming multimediale di base che offra la riproduzione di contenuti multimediali offline utilizzando solo l'elemento <video>. Nella nostra roadmap sono previsti piani per supportare, tra le altre funzionalità, i framework e la gestione dei diritti digitali. Quindi, ricontrolla di tanto in tanto per eventuali aggiornamenti o richiedi una funzionalità. Scopri di più nell'articolo PWA con streaming offline.

Formato dei chunk multimediali

Per molto tempo, DASH e HLS richiedevano che i chunk multimediali fossero codificati in formati diversi. Nel 2016, tuttavia, il supporto per i file MP4 frammentati (fMP4) standard è stato aggiunto a HLS, un formato supportato anche da DASH.

I chunk video che utilizzano il contenitore fMP4 e il codec H.264 sono supportati da entrambi i protocolli e possono essere riprodotti dalla maggior parte dei player. In questo modo, i produttori di contenuti possono codificare i video una sola volta, il che risparmia tempo e spazio su disco.

Per ottenere una qualità migliore e ridurre le dimensioni dei file, ti consigliamo di scegliere di codificare diversi insiemi di chunk multimediali utilizzando formati più efficienti come VP9. Tuttavia, prima di procedere, devi imparare a preparare i file multimediali per il web, che è l'argomento del prossimo paragrafo.