Buforowanie skryptu service worker, adresy URL PlaybackRate i Blob w przypadku dźwięku i wideo w Chrome na Androida

Sam Dutton

Czasem dobre rzeczy mają nudne nazwy.

Na przykład: Unified Media Pipeline, w skrócie UMP.

Może to brzmieć jak złowroga dyrektywa z czasów radzieckich, ale w rzeczywistości jest to ważny krok w kierunku spójnej, wieloplatformowej dostarczania dźwięku i obrazu. Chrome na Androida będzie teraz korzystać z tego samego stosu multimediów co Chrome na komputery, zamiast korzystać z implementacji platformy.

UMP daje Ci wiele możliwości:

• Buforuj dźwięk i obraz za pomocą mechanizmów Service Worker, ponieważ dostarczanie multimediów jest teraz zaimplementowane bezpośrednio w Chrome, a nie do stosu multimediów na Androida.
• Na potrzeby elementów audio i wideo używaj adresów URL blobów.
• Ustaw playbackRate dla dźwięku i wideo.
• Przekazywanie danych MediaStream do oprogramowania Web Audio i MediaRecorder
• Łatwiej twórz i obsługuj aplikacje do multimediów na różnych urządzeniach – multimedia działają tak samo na komputerach i na urządzeniach z Androidem.

Wdrożenie zespołu UMP wymagało ciężkiej pracy:

• Nowa warstwa buforowania zapewniająca lepszą wydajność zasilania.
• Aktualizacja nowego dekodera wideo opartego na MediaCodec hostowanego w procesie GPU Chrome.
• Wiele testów i iteracji na różnych urządzeniach.

Prezentacja buforowania wideo za pomocą skryptu service worker:

Aby zapisać plik wideo i obraz plakatu z wyprzedzeniem, wystarczy dodać ich ścieżki do listy adresów URL, które mają być pobierane z wyprzedzeniem:

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

Uwaga: ta wersja demonstracyjna zawiera kod podkładki do obsługi żądań dotyczących zakresu, które nie zostały jeszcze zaimplementowane przez skrypt service worker.

Brak możliwości zmiany playbackRate na urządzeniu z Androidem to błąd występujący od dawna. UMP rozwiązuje ten problem. W wersji demonstracyjnej pod adresem simpl.info/video/playbackrate parametr playbackRate ma wartość 2. Spróbuj!

UMP włącza adresy URL blob w przypadku elementów multimedialnych, co oznacza, że na Androida można na przykład odtwarzać film nagrany przy użyciu interfejsu MediaRecorder API w elemencie wideo:

Oto odpowiedni kod:

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

W przypadku wersji demonstracyjnej dostępnej na stronie simpl.info/video/offline film jest przechowywany przy użyciu interfejsów API plików, a następnie odtwarzany przy użyciu adresu URL obiektu blob:

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

Unified Media Pipeline został też włączony na potrzeby rozszerzeń źródeł multimediów (MSE) i rozszerzeń zaszyfrowanych multimediów (EME).

To kolejny krok na drodze do ujednolicenia wersji Chrome na komórki i na komputery. Nie musisz zmieniać kodu, ale tworzenie spójnych multimediów na komputerach i urządzeniach mobilnych powinno być teraz łatwiejsze, ponieważ stos multimediów jest taki sam na różnych platformach. Debugować za pomocą Narzędzi deweloperskich w Chrome? Emulacja urządzeń mobilnych korzysta teraz z prawdziwego stosu dźwięku i obrazu.

Jeśli w wyniku działania ujednoliconego potoku multimediów wystąpią problemy, zgłoś je, korzystając z błędu implementacji lub na stronie new.crbug.com.

Przykłady

• Buforowanie filmów za pomocą skryptu service worker
• Multimedia playbackRate
• MediaRecorder: odtwarzanie przy użyciu adresu URL obiektu blob
• Filmy offline zaimplementowane za pomocą interfejsów API File

Odpowiednie błędy

• Problemy ze śledzeniem przez Unified Media Pipeline
• Testy funkcjonalne UMP
• MSE, EME i Unified Media Pipeline

Występuje kilka błędów wpływających na <video>, mechanizmy Service Worker i interfejs Cache Storage API:

• <video> uruchamia tryb: żądanie cors i nie akceptuje nieprzejrzystej odpowiedzi skryptu service worker
• Przewijanie nie działa w przypadku filmów wyświetlanych przez pamięć podręczną skryptu service worker

Obsługiwane przeglądarki

• Ta opcja jest domyślnie włączona w Chrome 52 i nowszych wersjach.