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 działań:

• Buforowanie dźwięku i obrazu za pomocą usług workerów, 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 i MediaRecorder.
• Łatwiej tworzyć i utrzymywać aplikacje multimedialne na różnych urządzeniach – multimedia działają tak samo na komputerach i na 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 itacji na różnych urządzeniach.

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

Zapisanie pliku wideo i obrazu plakatu wideo w pamięci podręcznej 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!

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

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:

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 w mediach 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 komputerach i urządzeniach mobilnych 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.

Prezentacje

• Pamięć podręczna wideo za pomocą workera usługowego
• Media playbackRate
• MediaRecorder: odtwarzanie za pomocą adresu URL pliku blob
• Wideo offline zaimplementowane za pomocą interfejsów File API

Odpowiednie błędy

• Śledzenie problemów w przypadku zintegrowanego potoku mediów
• Testowanie UMP w praktyce
• MSE, EME i ujednolicony przepływ danych medialnych

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

• <video> uruchamia tryb: żądanie CORS i nie akceptuje odpowiedzi usługi niewidocznej dla użytkownika
• Przewijanie nie działa w przypadku filmów serwowanych przez pamięć podręczną skryptu service worker

Obsługa przeglądarek

• Domyślnie włączone w Chrome 52 i nowszych wersjach.