Кэширование Service Worker, URL-адреса PlaybackRate и Blob для аудио и видео в Chrome для Android

Sam Dutton

Иногда у хороших вещей скучные названия.

Показательный пример: Единый медиаконвейер, сокращенно UMP .

Это может звучать как зловещая директива советских времен, но на самом деле это важный шаг к последовательной кроссплатформенной доставке аудио и видео. Chrome на Android теперь будет использовать тот же медиа-стек, что и Chrome для настольных компьютеров, а не полагаться на базовую реализацию платформы.

UMP позволяет вам делать многое:

• Кэшируйте аудио и видео с помощью Service Worker, поскольку доставка мультимедиа теперь реализована непосредственно в Chrome, а не передается в стек мультимедиа Android.
• Используйте URL-адреса blob для аудио- и видеоэлементов.
• Установите playbackRate для аудио и видео.
• Передача MediaStreams между Web Audio и MediaRecorder.
• Разрабатывайте и поддерживайте мультимедийные приложения на разных устройствах проще — медиа работают одинаково на настольных компьютерах и Android.

Для внедрения UMP потребовалась тяжелая инженерная работа:

• Новый уровень кэширования для повышения производительности питания.
• Обновление нового видеодекодера на базе MediaCodec, размещенного в процессе графического процессора Chrome.
• Множество тестирований и итераций на разных устройствах.

Вот демонстрация кэширования видео с помощью Service Worker :

Кэширование видеофайла и изображения постера видео так же просто, как добавление их путей в список URL-адресов для предварительной загрузки:

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

Невозможность изменить playbackRate на Android была давней ошибкой . UMP исправляет это. Для демо на simpl.info/video/playbackrate playbackRate установлен на 2. Попробуйте!

UMP позволяет использовать URL-адреса больших двоичных объектов для элементов мультимедиа — это означает, что, например, теперь вы можете воспроизводить видео, записанное с использованием API MediaRecorder, в элементе видео на Android:

Вот соответствующий код:

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

В демоверсии на simpl.info/video/offline видео сохраняется с использованием API файлов, а затем воспроизводится с использованием URL-адреса 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);
}

Унифицированный медиаконвейер также был включен для расширений источников мультимедиа (MSE) и расширений зашифрованных мультимедиа (EME) .

Это еще один шаг к объединению мобильного и настольного Chrome. Вам не нужно менять код, но создание согласованного медиа-опыта на настольном компьютере и мобильном устройстве теперь должно быть проще, поскольку стек мультимедиа одинаков на всех платформах. Отладка с помощью Chrome DevTools? Мобильная эмуляция теперь использует «реальный» аудио- и видеостек.

Если у вас возникли проблемы в результате использования унифицированного медиаконвейера, сообщите об ошибках в реализации или через new.crbug.com .

Демо

• Кэширование видео с помощью сервисного работника
• playbackRate медиаОценить
• MediaRecorder: воспроизведение с использованием URL-адреса двоичного двоичного объекта
• Офлайн-видео, реализованное с помощью API файлов

Соответствующие ошибки

• Проблемы отслеживания для Единого медиаконвейера
• Полевые испытания UMP
• MSE, EME и унифицированный медиаконвейер

Есть несколько ошибок, влияющих на <video> , service worker и Cache Storage API:

• <video> запускает запрос mode: cors и не принимает непрозрачный ответ сервисного работника
• Поиск не работает в видео, обслуживаемых кэшем Service Worker

Поддержка браузера

• Включено по умолчанию в Chrome 52 и выше.