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, as coisas boas têm nomes chatos.

Um exemplo é o pipeline de mídia unificado, ou UMP.

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

Com o UMP, você pode fazer muito:

• Armazenar em cache áudio e vídeo com service workers, já que a entrega de mídia agora é implementada diretamente no Chrome, em vez de ser transmitida para a pilha de mídia do Android.
• Use URLs de blob para elementos de áudio e vídeo.
• Defina playbackRate para áudio e vídeo.
• Transmita 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 no computador e no Android.

A UMP exigiu um trabalho de engenharia intenso para ser implementada:

• Uma nova camada de armazenamento em cache para melhorar a performance 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 diferentes dispositivos.

Confira uma demonstração de armazenamento em cache de vídeo com um service worker:

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

<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 de shim nesta demonstração para processar solicitações de intervalo, que ainda não foram implementadas pelo service worker.

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

O UMP ativa URLs de blob para elementos de mídia. Isso significa que agora é possível, por exemplo, 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);
}

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

O Unified Media Pipeline 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 dispositivos móveis e computadores. Não é necessário mudar o código, mas criar uma experiência de mídia consistente em computadores e dispositivos móveis agora é mais fácil, já que a pilha de mídia é a mesma em todas as plataformas. Depurar com o Chrome DevTools? A emulação para dispositivos móveis agora usa a pilha de áudio e vídeo "real".

Se você tiver problemas com o pipeline de mídia unificado, registre os problemas no bug de implementação ou em new.crbug.com.

Demonstrações

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

Bugs relevantes

• Rastreamento de problemas do pipeline de mídia unificado
• Teste de campo do UMP
• MSE, EME e o pipeline de mídia unificado

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

• <video> aciona uma solicitação mode: cors e não aceita uma resposta opaca do worker de serviço
• 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 versões mais recentes.