Armazenamento em cache do service worker, URLs de PlaybackRate e de Blob para áudio e vídeo no Chrome para Android

Sam Dutton

Às vezes, coisas boas têm nomes chatos.

Um exemplo disso é o Unified Media Pipeline, ou seja a abreviação UMP (link em inglês).

Isso pode parecer uma diretiva sinistra da era soviética, mas, na verdade, é um passo importante para a exibição consistente de áudio e vídeo em várias plataformas. O Chrome no Android agora vai usar a mesma pilha de mídia que o Chrome para computador, em vez de depender da implementação da plataforma.

Com a UMP, você pode fazer muito:

• Armazene áudio e vídeo em cache com service workers, já que a entrega de mídia agora é implementada diretamente no Chrome em vez de ser transmitida à pilha de mídia do Android.
• Use URLs de blob para elementos de áudio e vídeo.
• Defina playbackRate para áudio e vídeo.
• Transmitir MediaStreams entre o Web Audio e o MediaRecorder.
• Desenvolva e mantenha apps de mídia com mais facilidade em vários dispositivos. A mídia funciona da mesma forma em computadores e no Android.

A UMP teve um trabalho árduo de engenharia para implementar:

• Uma nova camada de armazenamento em cache para um melhor desempenho de energia.
• Atualização de um novo decodificador de vídeo baseado em MediaCodec hospedado no processo de GPU do Chrome.
• Muitos testes e iterações em dispositivos diferentes.

Esta é uma demonstração do armazenamento em cache de vídeos com um service worker:

Armazenar o arquivo de vídeo e a imagem do pôster do vídeo em cache é tão simples quanto adicionar os caminhos deles à lista de URLs para pré-busca:

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

Observação:há um código paliativo nesta demonstração para processar solicitações de intervalo, que ainda não são implementadas pelo service worker.

A incapacidade de mudar playbackRate no Android é um bug de longa data. A UMP corrige isso. Para a demonstração em simpl.info/video/playbackrate, playbackRate é definido como 2. Faça o teste!

A UMP permite URLs de blob para elementos de mídia. Isso significa que, por exemplo, agora você pode reproduzir um vídeo gravado usando a API MediaRecorder em um elemento de vídeo no Android:

Confira o código relevante:

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

Para a demonstração em simpl.info/video/offline, o vídeo é armazenado usando as APIs File e reproduzido com um URL do 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);
}

O pipeline de mídia unificada também foi ativado para extensões de origem de mídia (MSE) e extensões de mídia criptografada (EME).

Essa é mais uma etapa para unificar o Chrome para computador e para dispositivos móveis. Você não precisa mudar o código, mas a criação de uma experiência de mídia consistente em computadores e dispositivos móveis agora deve ser mais fácil, já que a pilha de mídia é a mesma em todas as plataformas. Depurar com o Chrome DevTools? A emulação de dispositivos móveis agora usa a pilha de áudio e vídeo "real".

Se você tiver problemas relacionados ao pipeline de mídia unificada, informe-os no bug de implementação ou pelo site new.crbug.com.

Demonstrações

• Armazenar vídeo em cache com um service worker
• Mídia playbackRate
• MediaRecorder: reprodução usando um URL de blob (link em inglês)
• Vídeo off-line implementado com as APIs File

Bugs relevantes

• Como rastrear problemas do pipeline de mídia unificada
• Teste de campo da UMP
• EME, EME e o Unified Media Pipeline

Há alguns bugs que afetam o <video>, os service workers e a API Cache Storage:

• <video> aciona um modo: solicitação cors e não aceita uma resposta opaca do service worker
• A busca não funciona em vídeos veiculados pelo cache do service worker

Suporte ao navegador

• Ativado por padrão no Chrome 52 e em versões mais recentes.