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

Sam Dutton

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

Показательный пример: 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. Попробуйте!

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

Unified Media Pipeline также включен для расширений источника мультимедиа (MSE) и расширений зашифрованного мультимедиа (EME) .

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

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

Демо

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

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

• Проблемы отслеживания для Unified Media Pipeline
• Полевые испытания UMP
• MSE, EME и Unified Media Pipeline

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

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

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

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