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 Beispiel dafür ist die Unified Media Pipeline, kurz UMP.

Das mag wie eine unheimliche Richtlinie aus der Sowjetzeit klingen, ist aber in Wirklichkeit ein wichtiger Schritt in Richtung konsistenter plattformübergreifender Audio- und Videobereitstellung. Chrome für Android verwendet jetzt denselben Medienstack wie Chrome für Computer, anstatt auf die zugrunde liegende Plattformimplementierung zu setzen.

Mit UMP haben Sie viele Möglichkeiten:

• Audio- und Videoinhalte werden mit Service Workers im Cache gespeichert, da die Medienübermittlung jetzt direkt in Chrome implementiert wird, anstatt an den Android-Medien-Stack übergeben zu werden.
• Verwenden Sie Blob-URLs für Audio- und Videoelemente.
• Wählen Sie für Audio und Video die Option playbackRate aus.
• MediaStreams zwischen Web Audio und MediaRecorder übergeben.
• Medien-Apps lassen sich jetzt einfacher geräteübergreifend entwickeln und verwalten – Medien funktionieren auf Computern und Android-Geräten gleich.

Die Implementierung von UMP war eine große technische Herausforderung:

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

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

Das Caching der Videodatei und des Videoposterbilds ist ganz einfach: Fügen Sie dazu die Pfade zur Liste der URLs hinzu, die vorab abgerufen werden sollen:

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

Die Unmöglichkeit, playbackRate unter Android zu ändern, ist ein alter Fehler. UMP behebt dieses Problem. In der Demo unter simpl.info/video/playbackrate ist playbackRate auf 2 festgelegt. Jetzt ausprobieren!

UMP ermöglicht Blob-URLs für Medienelemente. Das bedeutet, dass du jetzt beispielsweise ein mit der MediaRecorder API aufgenommenes Video in einem Videoelement auf Android-Geräten abspielen kannst:

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

In der Demo unter simpl.info/video/offline wird das Video mit den File APIs gespeichert und dann über eine Blob-URL wiedergegeben:

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 Zusammenführung von Chrome für Mobilgeräte und Computer. Du musst deinen Code nicht ändern, aber es sollte jetzt einfacher sein, eine einheitliche Medienerfahrung auf Computern und Mobilgeräten zu schaffen, da der Media-Stack plattformübergreifend identisch ist. Debugging mit Chrome-Entwicklertools? Für die mobile Emulation wird jetzt der „echte“ Audio- und Videostack verwendet.

Wenn Probleme mit der Unified Media Pipeline auftreten, melde sie bitte unter diesem Fehlerbericht oder über new.crbug.com.

Demos

• Videos mit einem Service Worker im Cache speichern
• Medien playbackRate
• MediaRecorder: Wiedergabe über eine Blob-URL
• Offlinevideo, das mit den File APIs implementiert wurde

Relevante Fehler

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

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

• <video> löst eine mode: cors-Anfrage aus und akzeptiert keine opake Service Worker-Antwort.
• Suche funktioniert nicht bei Videos, die über den Service Worker-Cache bereitgestellt werden

Unterstützte Browser

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