A veces, las cosas buenas tienen nombres aburridos.
Un ejemplo de esto es la canalización de medios unificada, o UMP.
Esto puede sonar como una directiva siniestra de la era soviética, pero en realidad es un paso importante hacia una entrega de audio y video coherente en varias plataformas. Chrome para Android ahora usará la misma pila de medios que Chrome para computadoras, en lugar de depender de la implementación subyacente de la plataforma.
UMP te permite hacer mucho:
- Almacena en caché audio y video con service workers, ya que la entrega de contenido multimedia ahora se implementa directamente en Chrome en lugar de pasarse a la pila de contenido multimedia de Android.
- Usa URLs de blob para los elementos de audio y video.
- Establece
playbackRatepara audio y video. - Pasa MediaStreams entre Web Audio y MediaRecorder.
- Desarrolla y mantén apps multimedia con más facilidad en todos los dispositivos, ya que el contenido multimedia funciona de la misma manera en computadoras y Android.
La UMP requirió un arduo trabajo de ingeniería para su implementación:
- Una nueva capa de almacenamiento en caché para mejorar el rendimiento de la batería.
- Se actualizó un nuevo decodificador de video basado en MediaCodec alojado en el proceso de la GPU de Chrome.
- Muchas pruebas e iteraciones en diferentes dispositivos.
Esta es una demostración de la caché de video con un service worker:
Para almacenar en caché el archivo de video y la imagen del póster del video, solo debes agregar sus rutas de acceso a la lista de URLs para la precarga:
<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',
];
La imposibilidad de cambiar playbackRate en Android es un error de larga data. UMP soluciona este problema. En la demostración de simpl.info/video/playbackrate, playbackRate se establece en 2. ¡Pruébalo!
UMP habilita las URLs de BLOB para los elementos multimedia, lo que 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 la demostración de simpl.info/video/offline, el video se almacena con las APIs 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);
}
El canal de medios unificado 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 dispositivos móviles y computadoras. No es necesario que cambies tu código, pero ahora debería ser más fácil crear una experiencia de contenido multimedia coherente en computadoras de escritorio y dispositivos móviles, ya que la pila de contenido multimedia es la misma en todas las plataformas. ¿Quieres depurar con las Herramientas para desarrolladores de Chrome? La emulación para dispositivos móviles ahora usa la pila de audio y video "real".
Si tienes problemas como resultado de la canalización de contenido multimedia unificada, informa los errores en el error de implementación o en new.crbug.com.
Demostraciones
- Cómo almacenar en caché un video con un service worker
- Medios
playbackRate - MediaRecorder: Reproducción con una URL de blob
- Video sin conexión implementado con las APIs de File
Errores relevantes
- Problemas de seguimiento de la canalización de medios unificada
- Prueba de campo de UMP
- MSE, EME y la canalización de contenido multimedia unificada
Hay algunos errores que afectan a <video>, los service workers y la API de Cache Storage:
<video>activa un modo: solicitud de cors y no aceptará una respuesta opaca del servicio trabajador.- El salto no funciona en los videos que entrega la caché del service worker
Navegadores compatibles
- Está habilitado de forma predeterminada en Chrome 52 y versiones posteriores.