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

Сэм Даттон

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

Показательный пример: Unified Media Pipeline, сокращенно UMP .

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

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

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

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

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

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

Скриншот воспроизведения видео.

Кэшировать видеофайл и изображение видеопостера так же просто, как добавить их пути в список 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 — давняя ошибка . УМП это исправляет. В демо-версии simpl.info/video/playbackrate для параметра playbackRate установлено значение 2. Попробуйте!

Снимок экрана: воспроизведение видео с параметром PlayRate, равным 2.

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

Скриншот воспроизведения в Chrome на Android видео, записанного с помощью MediaRecorder API

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

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:

ALT_TEXT_ЗДЕСЬ
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 также включен для расширений источника мультимедиа (MSE) и расширений зашифрованного мультимедиа (EME) .

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

Если у вас возникли проблемы из-за Unified Media Pipeline, сообщите об ошибках реализации или через new.crbug.com .

Демо

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

Есть несколько ошибок, затрагивающих <video> , сервис-воркеров и API Cache Storage:

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

  • Включено по умолчанию в Chrome 52 и более поздних версиях.