Service Worker-Caching, Wiedergaberate und Blob-URLs für Audio und Video in Chrome für Android

Sam Dutton

Manchmal haben gute Dinge langweilige Namen.

Ein gutes Beispiel ist die Unified Media Pipeline, kurz UMP.

Das mag nach einer finsteren Richtlinie aus der Sowjetzeit klingen, ist aber tatsächlich ein wichtiger Schritt hin zu einer plattformübergreifenden Audio- und Videobereitstellung. Chrome für Android verwendet nun denselben Media-Stack wie die Desktopversion von Chrome, anstatt sich auf die zugrunde liegende Plattformimplementierung zu verlassen.

UMP bietet Ihnen viele Möglichkeiten:

• Audio- und Videodaten werden mit Service Workern im Cache gespeichert, da die Medienbereitstellung jetzt direkt in Chrome implementiert und nicht an den Android-Medienstack übergeben wird.
• Verwenden Sie Blob-URLs für Audio- und Videoelemente.
• Legen Sie playbackRate für Audio und Video fest.
• Übergib MediaStreams zwischen Web Audio und MediaRecorder.
• Medien-Apps lassen sich einfacher auf verschiedenen Geräten entwickeln und verwalten – Medien funktionieren auf Desktop-Computern und Android-Geräten gleich.

Die Implementierung von UMP erforderte einige harte Entwicklungsarbeit:

• Eine neue Caching-Ebene für verbesserte Leistung.
• Aktualisierung eines neuen MediaCodec-basierten Videodecoders, der im GPU-Prozess von Chrome gehostet wird.
• Viele Tests und Iterationen auf verschiedenen Geräten.

Hier sehen Sie eine Demo des Video-Cachings mit einem Service Worker:

Das Caching der Videodatei und des Posterbildes des Videos ist so einfach wie das Hinzufügen der Pfade zur Liste der URLs für den Vorabruf:

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

Hinweis: Diese Demo enthält Shim-Code zur Verarbeitung von Bereichsanfragen, die noch nicht vom Service Worker implementiert wurden.

Es ist schon seit Langem ein Fehler, dass playbackRate unter Android nicht geändert werden kann. UMP behebt dieses Problem. Für die Demo unter simpl.info/video/playbackrate ist playbackRate auf „2“ gesetzt. Probier es gleich aus!

UMP ermöglicht Blob-URLs für Medienelemente. Das bedeutet, dass Sie z. B. jetzt ein Video abspielen können, das mit der MediaRecorder API aufgenommen wurde, in einem Videoelement unter Android:

Hier ist der entsprechende 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);
}

Für die Demo unter simpl.info/video/offline wird das Video mit den File APIs gespeichert und dann mit einer Blob-URL abgespielt:

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

Die Unified Media Pipeline wurde außerdem für Media Source Extensions (MSE) und Encrypted Media Extensions (EME) aktiviert.

Dies ist ein weiterer Schritt zur Vereinheitlichung von Chrome für Mobilgeräte und Computer. Sie müssen Ihren Code nicht ändern, aber es sollte jetzt einfacher sein, ein einheitliches Medienerlebnis für Desktop- und Mobilgeräte zu entwickeln, da der Media-Stack auf allen Plattformen gleich ist. Debugging mit den Chrome-Entwicklertools? Für die Mobilgeräte-Emulation wird jetzt der „echte“ Audio- und Video-Stack verwendet.

Wenn Probleme infolge der Unified Media-Pipeline auftreten, melden Sie die Probleme bitte im Implementierungsfehler oder über new.crbug.com.

Demos

• Video mit einem Service Worker im Cache speichern
• Medien playbackRate
• MediaRecorder: Wiedergabe mit einer Blob-URL
• Offlinevideo implementiert mit den File APIs

Relevante Fehler

• Tracking-Probleme für die Unified Media-Pipeline
• UMP Field Trial
• MSE, EME und die Unified Media-Pipeline

Es gibt einige Fehler, die <video>, Service Worker und die Cache Storage API betreffen:

• <video> löst einen Modus aus: Cors-Anfrage und akzeptiert keine intransparente Service Worker-Antwort
• Die Suche funktioniert nicht in Videos, die vom Service Worker-Cache bereitgestellt werden

Unterstützte Browser

• In Chrome 52 und höher standardmäßig aktiviert.