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 sich wie eine finstere Direktive aus der Sowjetzeit anhören, ist aber tatsächlich ein wichtiger Schritt hin zu einer einheitlichen plattformübergreifenden Audio- und Videobereitstellung. Chrome für Android verwendet jetzt denselben Media-Stack wie die Desktopversion von Chrome, anstatt sich auf die zugrunde liegende Plattformimplementierung zu verlassen.

Mit UMP haben Sie viele Möglichkeiten:

  • Audio und Video mit Service-Workern im Cache speichern, da die Media-Bereitstellung jetzt direkt in Chrome implementiert ist und nicht an den Android-Media-Stack übergeben wird.
  • Verwenden Sie Blob-URLs für Audio- und Videoelemente.
  • Legen Sie playbackRate für Audio und Video fest.
  • MediaStreams zwischen Web Audio und MediaRecorder übergeben.
  • Medien-Apps lassen sich einfacher geräteübergreifend entwickeln und verwalten, da Medien auf Desktop-Computern und Android-Geräten gleich funktionieren.

Die Implementierung der UMP erforderte einen erheblichen technischen Aufwand:

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

Hier finden Sie eine Demo zum Speichern von Videos im Cache mit einem Service Worker:

Screenshot der Videowiedergabe.

Das Zwischenspeichern der Videodatei und des Videoposterbilds ist ganz einfach. Fügen Sie einfach die Pfade in die Liste der vorab abzurufenden URLs ein:

<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 Unfähigkeit, playbackRate auf Android zu ändern, ist ein langjähriger Fehler. UMP behebt dieses Problem. In der Demo unter simpl.info/video/playbackrate ist playbackRate auf 2 gesetzt. Jetzt ausprobieren!

Screenshot der Videowiedergabe mit der Wiedergaberate 2

UMP ermöglicht Blob-URLs für Media-Elemente. Das bedeutet, dass Sie beispielsweise jetzt ein mit der MediaRecorder API aufgenommenes Video in einem Video-Element unter Android wiedergeben können:

Screenshot der Wiedergabe eines mit der MediaRecorder API aufgenommenen Videos in Chrome unter Android

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:

ALT_TEXT_HERE 
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 auch 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. Es sollte jetzt aber einfacher sein, eine einheitliche Media-Umgebung für Desktop und Mobilgeräte zu schaffen, da der Media-Stack plattformübergreifend derselbe ist. Debugging mit Chrome-Entwicklertools Bei der mobilen Emulation wird jetzt der „echte“ Audio- und Videostack verwendet.

Wenn Sie aufgrund der Unified Media Pipeline Probleme haben, melden Sie diese bitte als Implementierungsfehler oder über new.crbug.com.

Demos

Relevante Fehler

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

Unterstützte Browser

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