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 comprensione dei vari casi d'uso, dei protocolli e delle estensioni per i flussi di dati. Iniziamo spiegando cos'è effettivamente lo streaming.

Lo streaming multimediale è un modo per pubblicare e riprodurre contenuti multimediali pezzo per pezzo. Invece di 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 dinamicamente uno dopo l'altro in fase di runtime, probabilmente a velocità in bit diverse, di cui parleremo più avanti.

Tieni presente che per fornire streaming 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 per i flussi di dati

La produzione di blocchi multimediali e i manifest necessari che descrivono il flusso non è esattamente semplice, ma lo streaming sblocca alcuni casi d'uso interessanti che non possono essere raggiunti semplicemente puntando 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, dovresti conoscere alcuni casi d'uso per lo streaming di contenuti multimediali se vuoi andare oltre il semplice caricamento di più file nell'elemento <video>.

• Nel flusso di dati adattivo i blocchi multimediali vengono codificati in diverse velocità in bit e il blocco di contenuti multimediali di massima qualità che si adatta alla larghezza di banda attualmente disponibile del client viene restituito al media player.
• Per trasmissione dal vivo i blocchi multimediali vengono codificati e resi disponibili in tempo reale.
• L'inserimento di contenuti multimediali avviene quando altri contenuti multimediali, come le pubblicità, 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ù comunemente utilizzati sul web sono Dynamic Adaptive Streaming over HTTP (DASH) e HTTP Live Streaming (HLS). I player che supportano questi protocolli recuperano il file manifest generato, individueranno i blocchi multimediali da richiedere e li combinano nell'esperienza multimediale finale.

Utilizzo di <video> per riprodurre uno stream

Molti browser non riprodurranno lo stream in modo nativo. Sebbene sia presente un supporto nativo per la riproduzione HLS, in genere i browser non supportano la riproduzione in streaming nativa da DASH. Ciò significa che spesso non è sufficiente puntare <source> nell'elemento <video> a un file manifest.

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

Quello che può sembrare un deficit è in realtà una forza camuffata. I flussi sono potenti e le applicazioni che consumano flussi hanno esigenze diverse.

I file manifest in genere descrivono molte varianti di un singolo contenuto multimediale. Pensa a 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 precaricare i primi secondi di video di un episodio imminente e altre potrebbero implementare la propria logica per lo streaming adattivo. Qui è necessario avere una sorta di funzionalità browser integrata per generare stream multimediali per la riproduzione.

Media Source Extensions

Per fortuna, W3C ha definito un elemento chiamato Media Source Extensions (MSE) che consentirà 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 inseriti 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>, riceve 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 al buffer, ad esempio usando fetch.

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

Tuttavia, abbiamo creato una PWA multimediale chiamata Kino che dimostra come si potrebbe andare nello sviluppo di un sito web di base per lo streaming di contenuti multimediali che fornisce la riproduzione di contenuti multimediali offline utilizzando il semplice elemento <video>. La nostra roadmap prevede piani a supporto dei framework e della gestione dei diritti digitali, tra le altre funzionalità. Pertanto, controlla di tanto in tanto gli aggiornamenti o richiedi una funzionalità. Scopri di più nell'articolo PWA con streaming offline.

Formato chunk di contenuti 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 frammentati (fMP4) standard in HLS, un formato supportato anche da DASH.

I blocchi di 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 player. Questo consente ai produttori di contenuti di codificare i loro video una sola volta, risparmiando tempo e spazio su disco.

Per ottenere una qualità migliore e dimensioni inferiori dei file, potresti voler scegliere di codificare diversi set di blocchi multimediali utilizzando formati più efficienti, come VP9, anche se prima di andare avanti devi prima imparare a preparare i file multimediali per il web e c'è la fase successiva.