Caching van servicemedewerkers, PlaybackRate en Blob-URL's voor audio en video in Chrome voor Android

Sam Dutton

Soms hebben goede dingen saaie namen.

Een goed voorbeeld is de Unified Media Pipeline, kortweg UMP .

Dit klinkt misschien als een sinistere richtlijn uit het Sovjettijdperk, maar in feite is het een belangrijke stap in de richting van consistente cross-platform audio- en videolevering. Chrome op Android gebruikt nu dezelfde mediastack als Chrome op de desktop, in plaats van te vertrouwen op de onderliggende platformimplementatie.

Met UMP kunt u veel doen:

  • Cache audio en video met serviceworkers, omdat de medialevering nu rechtstreeks in Chrome wordt geïmplementeerd in plaats van dat deze wordt doorgegeven aan de Android-mediastack.
  • Gebruik blob-URL's voor audio- en video-elementen.
  • Stel playbackRate in voor audio en video.
  • MediaStreams doorgeven tussen webaudio en MediaRecorder.
  • Ontwikkel en onderhoud media-apps eenvoudiger op verschillende apparaten: media werkt hetzelfde op desktop en Android.

De implementatie van UMP vergde veel technisch werk:

  • Een nieuwe cachelaag voor verbeterde energieprestaties.
  • Er wordt een nieuwe MediaCodec-gebaseerde videodecoder bijgewerkt die wordt gehost in het GPU-proces van Chrome.
  • Veel testen en iteraties op verschillende apparaten.

Hier is een demo van videocaching met een service worker :

Schermafbeelding van het afspelen van de video.

Het cachen van het videobestand en de videoposterafbeelding is net zo eenvoudig als het toevoegen van hun paden aan de lijst met URL's die vooraf moeten worden opgehaald:

<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',
];

Het onvermogen om playbackRate op Android te wijzigen is al lang een bug . UMP lost dit op. Voor de demo op simpl.info/video/playbackrate is playbackRate ingesteld op 2. Probeer het eens!

Schermafbeelding van videoweergave met playbackRate ingesteld op 2.

UMP maakt blob-URL's voor media-elementen mogelijk. Dit betekent dat u nu bijvoorbeeld een video kunt afspelen die is opgenomen met de MediaRecorder API in een video-element op Android:

Schermafbeelding van het afspelen in Chrome op Android van een video die is opgenomen met de MediaRecorder API

Hier is de relevante code:

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);
}

Voor de demo op simpl.info/video/offline wordt video opgeslagen met behulp van de File API's en vervolgens afgespeeld met behulp van een Blob-URL:

ALT_TEKST_HIER
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);
}

De Unified Media Pipeline is ook ingeschakeld voor Media Source Extensions (MSE) en Encrypted Media Extensions (EME) .

Dit is een nieuwe stap in de richting van het verenigen van Chrome voor mobiel en desktop. Je hoeft je code niet aan te passen, maar het bouwen van een consistente media-ervaring op zowel desktop als mobiel zou nu eenvoudiger moeten zijn, omdat de mediastack op alle platforms hetzelfde is. Debuggen met Chrome DevTools? Mobiele emulatie maakt nu gebruik van de 'echte' audio- en videostack.

Als u problemen ervaart als gevolg van de Unified Media Pipeline, meld dit dan in de implementatiebug-sectie of via new.crbug.com .

Demo's

Relevante bugs

Er zijn een aantal bugs die invloed hebben op <video> , service workers en de Cache Storage API:

Browserondersteuning

  • Standaard ingeschakeld in Chrome 52 en hoger.