Memorizzazione nella cache del service worker, velocità di riproduzione e URL BLOB per audio e video su Chrome per Android

Sam Dutton

A volte le cose buone hanno nomi noiosi.

Un esempio è la Unified Media Pipeline, in breve UMP.

Potrebbe sembrare una direttiva sinistra dell'era sovietica, ma in realtà è un passo importante verso la pubblicazione di contenuti audio e video coerenti su più piattaforme. Chrome su Android ora utilizzerà la stessa pila multimediale di Chrome per computer, anziché fare affidamento sull'implementazione della piattaforma di base.

UMP ti consente di fare molto:

• Memorizza nella cache audio e video con i service worker, poiché ora il caricamento dei contenuti multimediali è implementato direttamente in Chrome anziché essere passato allo stack multimediale di Android.
• Utilizza gli URL blob per gli elementi audio e video.
• Imposta playbackRate per l'audio e il video.
• Passare MediaStream tra Web Audio e MediaRecorder.
• Sviluppare e gestire più facilmente le app multimediali su più dispositivi: i contenuti multimediali funzionano allo stesso modo su computer e Android.

L'implementazione di UMP ha richiesto un notevole lavoro di progettazione:

• Un nuovo livello di memorizzazione nella cache per migliorare le prestazioni.
• Aggiornamento di un nuovo decodificatore video basato su MediaCodec ospitato nel processo GPU di Chrome.
• Molti test e iterazioni su dispositivi diversi.

Ecco una demo della memorizzazione nella cache dei video con un service worker:

Per memorizzare nella cache il file video e l'immagine del poster del video, è sufficiente aggiungere i relativi percorsi all'elenco di URL da precaricare:

<video controls  poster="static/poster.jpg">
    <source src="static/video.webm" type="video/webm" />
    <p>This browser does not support the video element.</p>
</video>

var urlsToPrefetch = [
    'static/video.webm', 'static/poster.jpg',
];

L'impossibilità di modificare playbackRate su Android è un bug di lunga data. UMP risolve questo problema. Per la demo all'indirizzo simpl.info/video/playbackrate, playbackRate è impostato su 2. Prova

UMP abilita gli URL blob per gli elementi multimediali, il che significa che, ad esempio, ora puoi riprodurre un video registrato utilizzando l'API MediaRecorder in un elemento video su Android:

Ecco il codice pertinente:

var recordedBlobs = [];

mediaRecorder.ondataavailable = function(event) {
    if (event.data && event.data.size > 0) {
    recordedBlobs.push(event.data);
    }
};

function play() {
    var superBuffer = new Blob(recordedBlobs, {type: 'video/webm'});
    recordedVideo.src = window.URL.createObjectURL(superBuffer);
}

Per la demo all'indirizzo simpl.info/video/offline, il video viene archiviato utilizzando le API File, quindi riprodotto utilizzando un URL blob:

function writeToFile(fileEntry, blob) {
    fileEntry.createWriter(function(fileWriter) {
    fileWriter.onwriteend = function() {
        readFromFile(fileEntry.fullPath);
    };
    fileWriter.onerror = function(e) {
        log('Write failed: ' + e.toString());
    };
    fileWriter.write(blob);
    }, handleError);
}

function readFromFile(fullPath) {
    window.fileSystem.root.getFile(fullPath, {}, function(fileEntry) {
    fileEntry.file(function(file) {
        var reader = new FileReader();
        reader.onloadend = function() {
        video.src = URL.createObjectURL(new Blob([this.result]));
        };
        reader.readAsArrayBuffer(file);
    }, handleError);
    }, handleError);
}

La pipeline multimediale unificata è stata attivata anche per le estensioni Media Source (MSE) e Encrypted Media Extensions (EME).

Si tratta di un altro passo verso l'unificazione di Chrome per computer e dispositivi mobili. Non è necessario modificare il codice, ma ora dovrebbe essere più facile creare un'esperienza multimediale coerente su computer e dispositivi mobili, poiché la suite multimediale è la stessa su tutte le piattaforme. Eseguire il debug con Chrome DevTools? L'emulazione mobile ora utilizza lo stack audio e video "reale".

Se riscontri problemi a causa della pipeline multimediale unificata, segnalali nel bug di implementazione o tramite new.crbug.com.

Demo

• Memorizzare nella cache i video con un service worker
• Contenuti multimediali playbackRate
• MediaRecorder: riproduzione utilizzando un URL blob
• Video offline implementati con le API File

Bug pertinenti

• Problemi di monitoraggio per la pipeline multimediale unificata
• Sperimentazione sul campo UMP
• MSE, EME e la Unified Media Pipeline

Esistono un paio di bug che interessano <video>, i worker di servizio e l'API Cache Storage:

• <video> attiva una richiesta mode: cors e non accetta una risposta opaca del servizio worker
• La ricerca non funziona nei video pubblicati dalla cache del service worker

Supporto browser

• Abilitato per impostazione predefinita in Chrome 52 e versioni successive.