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.

Por exemplo, o Unified Media Pipeline, ou UMP.

Isso pode parecer uma diretiva sinistra da era soviética, 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 workers de serviço, 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:

Captura de tela da reprodução de vídeo.

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

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

Captura de tela da reprodução de vídeo com playbackRate definido como 2.

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:

Captura de tela da reprodução no Chrome no Android de um vídeo gravado usando a API MediaRecorder

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:

ALT_TEXT_HERE 
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. Depuração 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

Bugs relevantes

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

Suporte ao navegador

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