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

Sam Dutton

Czasami dobre rzeczy mają nudne nazwy.

Przykład: zintegrowany przepływ mediów, czyli UMP.

Może to brzmieć jak złowrogi rozkaz z epoki sowieckiej, ale w istocie jest to ważny krok w kierunku spójnego przesyłania dźwięku i obrazu na różnych platformach. Chrome na Androidzie będzie teraz używać tego samego zbioru multimediów co Chrome na komputery zamiast polegać na implementacji platformy docelowej.

UMP umożliwia wiele:

  • Przechowywanie w pamięci podręcznej dźwięku i obrazu za pomocą usług w tle, ponieważ dostarczanie multimediów jest teraz implementowane bezpośrednio w Chrome, a nie przekazywane do pakietu multimediów Androida.
  • Używaj adresów URL blobów do elementów audio i wideo.
  • Ustaw playbackRate dla dźwięku i obrazu.
  • Przekazywanie strumieni danych MediaStreams między Web Audio a MediaRecorder.
  • Łatwiej tworzyć i utrzymywać aplikacje multimedialne na różnych urządzeniach – multimedia działają tak samo na komputerach i urządzeniach z Androidem.

Wdrożenie UMP wymagało sporo pracy inżynierskiej:

  • Nowa warstwa buforowania, która zapewnia większą wydajność energetyczną.
  • Aktualizacja nowego dekodera wideo opartego na MediaCodec hostowanego w procesie GPU przeglądarki Chrome.
  • dużo testów i powtarzania na różnych urządzeniach.

Oto prezentacja buforowania filmów za pomocą usługi na żądanie:

Zrzut ekranu z odtwarzaniem filmu

Zapisanie pliku wideo i obrazu plakatu wideo jest tak proste, jak dodanie ich ścieżek do listy adresów URL do wstępnego pobierania:

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

Brak możliwości zmiany playbackRate na Androidzie to stary błąd. Rozwiązaniem jest UMP. W przypadku wersji demonstracyjnej na stronie simpl.info/video/playbackrate wartość playbackRate jest ustawiona na 2. Spróbuj!

Zrzut ekranu przedstawiający odtwarzanie filmu z ustawionym współczynnikiem odtwarzania 2.

UMP umożliwia tworzenie adresów URL blobów dla elementów multimedialnych. Oznacza to, że możesz teraz odtwarzać filmy nagrane za pomocą interfejsu MediaRecorder API w elemencie wideo na Androidzie:

Zrzut ekranu przedstawiający odtwarzanie w Chrome na Androidzie filmu nagranego za pomocą interfejsu MediaRecorder API

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 na stronie simpl.info/video/offline film jest przechowywany przy użyciu interfejsów File API, a następnie odtwarzany za pomocą adresu URL bloba:

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

Ujednolicony przepływ danych z multimediów został też włączony w przypadku rozszerzeń źródła multimediów (MSE) i szyfrowanych rozszerzeń multimediów (EME).

Jest to kolejny krok w kierunku ujednolicania Chrome na komputerach i urządzeniach mobilnych. Nie musisz zmieniać kodu, ale tworzenie spójnych treści multimedialnych na komputery i urządzenia mobilne powinno być teraz łatwiejsze, ponieważ pakiet multimediów jest taki sam na wszystkich platformach. Debugowanie za pomocą Narzędzi deweloperskich w Chrome? Emulacja urządzeń mobilnych korzysta teraz z „prawdziwego” modułu audio i wideo.

Jeśli wystąpią problemy z użyciem Unified Media Pipeline, zgłoś je na stronie Błąd implementacji lub na stronie new.crbug.com.

Przykłady

Odpowiednie błędy

Wystąpiło kilka błędów dotyczących <video>, usług workerów i interfejsu Cache Storage API:

Obsługa przeglądarek

  • Włączona domyślnie w Chrome 52 i nowszych wersjach.