Almacenamiento en caché de los service workers, URL de PlaybackRate y BLOB para audio y video en Chrome para Android

Sam Dutton

A veces, las cosas buenas tienen nombres aburridos.

Un buen ejemplo es la canalización de medios unificados, UMP para abreviar.

Esto puede sonar como una siniestra directiva de la era soviética, pero de hecho es un paso importante hacia la publicación coherente de audio y video multiplataforma. Chrome en Android ahora usará la misma pila de medios que Chrome para computadoras de escritorio, en lugar de depender de la implementación subyacente de la plataforma.

UMP te permite hacer muchas cosas:

• Almacena en caché el audio y el video con service workers, ya que la entrega de contenido multimedia ahora se implementa directamente en Chrome en lugar de transferirse a la pila de medios de Android.
• Usa URLs de BLOB para elementos de audio y video.
• Establece playbackRate para audio y video.
• Pasar MediaStreams entre Web Audio y MediaRecorder
• Desarrolla y mantén apps de música con mayor facilidad en diferentes dispositivos: el contenido multimedia funciona igual en computadoras y dispositivos Android.

UMP requiere un gran trabajo de ingeniería para su implementación:

• Una nueva capa de almacenamiento en caché para mejorar el rendimiento de la energía.
• Actualización de un nuevo decodificador de videos basado en MediaCodec alojado en el proceso de GPU de Chrome.
• Muchas pruebas e iteraciones en diferentes dispositivos.

A continuación, se incluye una demostración del almacenamiento en caché de video con un service worker:

Almacenar en caché el archivo de video y la imagen de póster de video es tan simple como agregar sus rutas de acceso a la lista de URLs que quieres precargar:

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

Nota: En esta demostración, hay un código de corrección de compatibilidad para controlar las solicitudes de rango, que el service worker todavía no implementó.

La imposibilidad de cambiar playbackRate en Android es un error antiguo. UMP corrige esto. Para la demostración de simpl.info/video/playbackrate, playbackRate se estableció en 2. Pruébalo.

UMP habilita las URLs de BLOB para los elementos multimedia. Esto significa que, por ejemplo, ahora puedes reproducir un video grabado con la API de MediaRecorder en un elemento de video en Android:

Este es el 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);
}

En el caso de la demostración en simpl.info/video/offline, el video se almacena con las API de File y, luego, se reproduce con una URL de 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);
}

La canalización de medios unificados también se habilitó para las extensiones de fuente de medios (MSE) y las extensiones de medios encriptados (EME).

Este es otro paso para unificar Chrome para computadoras de escritorio y dispositivos móviles. No necesitas cambiar tu código, pero ahora debería ser más fácil crear una experiencia multimedia coherente en computadoras de escritorio y dispositivos móviles, ya que la pila de medios es la misma en todas las plataformas. ¿Estás depurando con las Herramientas para desarrolladores de Chrome? La emulación móvil ahora usa la pila "real" de audio y video.

Si experimentas problemas como resultado de la canalización de medios unificados, infórmalos en el error de implementación o a través de new.crbug.com.

Demostraciones

• Cómo almacenar videos en caché con un service worker
• Contenido multimedia playbackRate
• MediaRecorder: reproducción con una URL de BLOB
• Implementación de video sin conexión con las APIs de File

Errores relevantes

• Problemas de seguimiento de la canalización de medios unificados
• Prueba de campo de UMP
• El MSE, EME y la canalización de medios unificados

Hay algunos errores que afectan a <video>, a los service workers y a la API de Cache Storage:

• <video> activa un modo: cors request y no acepta una respuesta de service worker opaca
• La búsqueda no funciona en los videos que publica la caché del service worker

Navegadores compatibles

• Esta opción está habilitada de forma predeterminada en Chrome 52 y versiones posteriores.