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 voorbeeld hiervan: 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, platformonafhankelijke audio- en videolevering. Chrome op Android gebruikt nu dezelfde mediastack als desktop-Chrome, in plaats van te vertrouwen op de onderliggende platformimplementatie.

Met UMP kunt u veel doen:

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

UMP heeft hard technisch werk gekost om te implementeren:

• Een nieuwe cachinglaag voor verbeterde energieprestaties.
• Updaten van een nieuwe op MediaCodec gebaseerde videodecoder die wordt gehost in het GPU-proces van Chrome.
• Veel testen en iteratie op verschillende apparaten.

Hier is een demo van videocaching met een servicemedewerker :

Het videobestand en de videoposterafbeelding in de cache opslaan 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',
];

Opmerking: er zit wat shim-code in deze demo om bereikverzoeken af ​​te handelen, die nog niet door de servicemedewerker zijn geïmplementeerd.

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

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

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:

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. U hoeft uw code niet te wijzigen, maar het opbouwen van een consistente media-ervaring op desktop en mobiel zou nu eenvoudiger moeten zijn, omdat de mediastack op alle platforms hetzelfde is. Foutopsporing met Chrome DevTools? Mobiele emulatie maakt nu gebruik van de 'echte' audio- en videostack.

Als u problemen ondervindt als gevolg van de Unified Media Pipeline, kunt u problemen melden via de implementatiebug of via new.crbug.com .

Demo's

• Cache video met een servicemedewerker
• playbackRate media
• MediaRecorder: afspelen met behulp van een blob-URL
• Offline video geïmplementeerd met de File API's

Relevante bugs

• Problemen bijhouden voor de Unified Media Pipeline
• UMP-veldproef
• MSE, EME en de Unified Media Pipeline

Er zijn een aantal bugs die van invloed zijn op <video> , servicemedewerkers en de Cache Storage API:

• <video> activeert een mode: cors-verzoek en accepteert geen ondoorzichtige reactie van een servicemedewerker
• Zoeken werkt niet in video's die worden aangeboden door de cache van servicemedewerkers

Browser-ondersteuning

• Standaard ingeschakeld in Chrome 52 en hoger.