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.

Esempio tipico: Unified Media Pipeline, UMP in breve.

Potrebbe sembrare una sinistra direttiva dell'era sovietica, ma in realtà è un passo importante verso una distribuzione coerente di audio e video multipiattaforma. Ora Chrome su Android utilizzerà lo stesso stack multimediale di Chrome per computer, anziché affidarsi all'implementazione sottostante della piattaforma.

La UMP ti consente di fare molto:

• Memorizza nella cache l'audio e il video con i service worker, poiché la distribuzione dei contenuti multimediali ora viene implementata direttamente in Chrome anziché essere passata allo stack multimediale Android.
• Utilizza URL blob per gli elementi audio e video.
• Imposta playbackRate per audio e video.
• Passa i MediaStream tra Web Audio e MediaRecorder.
• Sviluppa e gestisci più facilmente le app multimediali su tutti i dispositivi. I contenuti multimediali funzionano allo stesso modo su computer e Android.

L'UMP ha richiesto un duro lavoro ingegneristico per implementare:

• Un nuovo livello di memorizzazione nella cache per prestazioni migliorate.
• 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 video con un service worker:

La memorizzazione nella cache del file video e dell'immagine poster del video è semplice quanto l'aggiunta dei 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 cambiare playbackRate su Android è un bug di lunga data. UMP corregge il problema. Per la demo all'indirizzo simpl.info/video/playbackrate, playbackRate è impostato su 2. Fai una prova.

La tecnologia UMP abilita gli URL BLOB per gli elementi multimediali, il che significa che, ad esempio, ora puoi riprodurre un video registrato con 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 tramite 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 Unified Media è stata inoltre abilitata per Media Source Extensions (MSE) e Encrypted Media Extensions (EME).

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

Se riscontri problemi come Unified Media Pipeline, segnalali per il bug di implementazione o all'indirizzo new.crbug.com.

Demo

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

Bug pertinenti

• Problemi di monitoraggio per Unified Media Pipeline
• Prova sul campo di UMP
• MSE, EME e Unified Media Pipeline

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

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

Supporto del browser

• Funzionalità attivata per impostazione predefinita in Chrome 52 e versioni successive.