Actualizaciones multimedia en Chrome 63/64

François Beaufort
François Beaufort

Capacidades multimedia: API de Decoding Info

Hoy en día, los desarrolladores web dependen de isTypeSupported() o canPlayType() para saber vagamente si se puede decodificar un contenido multimedia o no. Sin embargo, la verdadera pregunta debería ser: "¿qué tan bien funcionaría en este dispositivo?"

Este es exactamente uno de los problemas que quieren resolver las capacidades multimedia propuestas: una API para consultar al navegador sobre las capacidades de decodificación del dispositivo según información como los códecs, el perfil, la resolución, las tasas de bits, etc. Exponer información, por ejemplo, si la reproducción debe ser fluida y ahorrar energía en función de las estadísticas de reproducción anteriores que registró el navegador.

En resumen, así es como funciona la API de Decoding Info por el momento. Consulta el ejemplo oficial.

const mediaConfig = {
  type: 'media-source', // or 'file'
  audio: {
    contentType: 'audio/webm; codecs=opus',
    channels: '2', // audio channels used by the track
    bitrate: 132266, // number of bits used to encode a second of audio
    samplerate: 48000 // number of samples of audio carried per second
  },
  video: {
    contentType: 'video/webm; codecs="vp09.00.10.08"',
    width: 1920,
    height: 1080,
    bitrate: 2646242, // number of bits used to encode a second of video
    framerate: '25' // number of frames used in one second
  }
};

navigator.mediaCapabilities.decodingInfo(mediaConfig).then(result => {
  console.log('This configuration is' +
      (result.supported ? '' : ' NOT') + ' supported,' +
      (result.smooth ? '' : ' NOT') + ' smooth and' +
      (result.powerEfficient ? '' : ' NOT') + ' power efficient.');
});

Puedes probar diferentes configuraciones de contenido multimedia hasta encontrar la mejor (smooth y powerEfficient) y usarla para reproducir la transmisión multimedia adecuada. Por cierto, la implementación actual de Chrome se basa en la información de reproducción que se grabó con anterioridad. Define smooth como verdadero cuando el porcentaje de fotogramas descartados es inferior al 10%, mientras que powerEfficient es verdadero cuando el hardware decodifica más del 50% de los fotogramas. Los fotogramas pequeños siempre se consideran de bajo consumo.

Te recomendamos usar un fragmento similar al que se muestra a continuación para detectar la disponibilidad y recurrir a tu implementación actual para navegadores que no admiten esta API.

function isMediaConfigSupported(mediaConfig) {

  const promise = new Promise((resolve, reject) => {
    if (!('mediaCapabilities' in navigator)) {
      return reject('MediaCapabilities API not available');
    }
    if (!('decodingInfo' in navigator.mediaCapabilities)) {
      return reject('Decoding Info not available');
    }
    return resolve(navigator.mediaCapabilities.decodingInfo(mediaConfig));
  });

  return promise.catch(_ => {
    let fallbackResult = {
      supported: false,
      smooth: false, // always false
      powerEfficient: false // always false
    };
    if ('video' in mediaConfig) {
      fallbackResult.supported = MediaSource.isTypeSupported(mediaConfig.video.contentType);
      if (!fallbackResult.supported) {
        return fallbackResult;
      }
    }
    if ('audio' in mediaConfig) {
      fallbackResult.supported = MediaSource.isTypeSupported(mediaConfig.audio.contentType);
    }
    return fallbackResult;
  });
}

Disponible para pruebas de origen

Para obtener la mayor cantidad de comentarios posible de los desarrolladores que usan la API de Decoding Info (parte de Media Capabilities) en el campo, ya agregamos esta función en Chrome 64 como prueba de origen.

La prueba finalizó correctamente en abril de 2018.

Intent de experimentar | Intent de enviar | Seguimiento de Chromestatus | Error de Chromium

Reproducción de video HDR en Windows 10

Los videos de alto rango dinámico (HDR) tienen un contraste más alto, lo que revela sombras precisas y detalladas, y zonas brillantes deslumbrantes con más claridad que nunca. Además, la compatibilidad con una amplia gama de colores permite que los colores sean más intensos.

Comparación simulada de SDR y HDR (ver HDR verdadero requiere una pantalla HDR)
Comparación simulada de SDR con HDR (ver HDR verdadero requiere una pantalla HDR)

Como la reproducción de 10 bits del perfil de VP9 ahora es compatible con Chrome para Windows 10 Fall Creator Update, Chrome también admite la reproducción de videos en HDR cuando Windows 10 está en modo HDR. En cuanto a los aspectos técnicos, Chrome 64 ahora admite el perfil de color scRGB, que, a su vez, permite la reproducción de contenido multimedia en HDR.

Para probarla, mira The World in HDR in 4K (ULTRA HD) en YouTube y comprueba si reproduce HDR en la configuración de calidad del reproductor de YouTube.

Configuración de calidad del reproductor de YouTube con HDR
Configuración de la calidad del reproductor de YouTube con HDR

Por el momento, todo lo que necesitas es Windows 10 Fall Creator Update, una tarjeta gráfica y una pantalla compatibles con HDR (p.ej., tarjeta de la serie NVIDIA 10, TV o monitor LG HDR), y activar el modo HDR en la configuración de la pantalla de Windows.

Los desarrolladores web pueden detectar el gamut aproximado de colores admitido por el dispositivo de salida con la consulta de contenido multimedia de gamut de color reciente y la cantidad de bits utilizados para mostrar un color en la pantalla con screen.colorDepth. A continuación, te mostramos una forma de usarlos para detectar si VP9 HDR es compatible, por ejemplo:

// Detect if display is in HDR mode and if browser supports VP9 HDR.
function canPlayVp9Hdr() {

  // TODO: Adjust VP9 codec string based on your video encoding properties.
  return (window.matchMedia('(color-gamut: p3)').matches &&
      screen.colorDepth >= 48 &&
      MediaSource.isTypeSupported('video/webm; codecs="vp09.02.10.10.01.09.16.09.01"'))
}

La string de códec VP9 con el perfil 2 pasado a isTypeSupported() en el ejemplo anterior debe actualizarse según tus propiedades de codificación de video.

Ten en cuenta que aún no es posible definir los colores HDR en CSS, lienzo, imágenes y contenido protegido. El equipo de Chrome está trabajando en ello. ¡No te pierdas las novedades!

Licencias persistentes para Windows y Mac

Una licencia persistente en Extensiones de medios encriptados (EME) significa que la licencia puede conservarse en el dispositivo para que las aplicaciones puedan cargarla en la memoria sin enviar otra solicitud de licencia al servidor. Así es como se admite la reproducción sin conexión en EME.

Hasta ahora, ChromeOS y Android eran las únicas plataformas que admitían licencias persistentes. Ya no es así. La reproducción de contenido protegido a través de EME mientras el dispositivo está sin conexión ahora también es posible en Chrome 64 en Windows y Mac.

const config = [{
  sessionTypes: ['persistent-license'],
  videoCapabilities: [{
    contentType: 'video/webm; codecs="vp09.00.10.08"',
    robustness: 'SW_SECURE_DECODE' // Widevine L3
  }]
}];

navigator.requestMediaKeySystemAccess('com.widevine.alpha', config)
.then(access => {
  // User will be able to watch encrypted content while being offline when
  // license is stored locally on device and loaded later.
})
.catch(error => {
  // Persistent licenses are not supported on this platform yet.
});

Para probar las licencias persistentes por tu cuenta, consulta la AWP de medios de muestra y sigue estos pasos:

  1. Ve a https://biograf-155113.appspot.com/ttt/episode-2/.
  2. Haz clic en "Permitir acceso sin conexión" y espera a que se descargue el video.
  3. Desactiva la conexión a Internet.
  4. Haz clic en el botón "Reproducir" y disfruta del video.

La precarga de contenido multimedia se establece en “metadatos”

Al coincidir con las implementaciones de otros navegadores, Chrome para computadoras de escritorio ahora establece en "metadata" el valor de precarga predeterminado para los elementos <video> y <audio> a fin de reducir el ancho de banda y el uso de recursos. A partir de Chrome 64, este nuevo comportamiento solo se aplica a los casos en los que no se establece un valor de precarga. Ten en cuenta que la sugerencia del atributo de precarga se descarta cuando se conecta un MediaSource al elemento multimedia, ya que el sitio web controla su propia precarga.

En otras palabras, el valor de precarga de <video> ahora es "metadata", mientras que el valor de precarga <video preload="auto"> permanece en "auto". Prueba el ejemplo oficial.

Intent de enviar | Seguimiento de Chromestatus | Error de Chromium

Una reproducción no compatible genera una excepción

Después de un cambio en la especificación HTML, cuando se establece playbackRate de los elementos multimedia en un valor que Chrome no admite (p.ej., un valor negativo), se arroja una "NotSupportedError" DOMException en Chrome 63.

const audio = document.querySelector('audio');
try {
  audio.playbackRate = -1;
} catch(error) {
  console.log(error.message); // Failed to set the playbackRate property
}

Por cierto, la implementación actual de Chrome genera esta excepción cuando playbackRate es negativo, menor que 0.0625 o superior a 16. Prueba el ejemplo oficial para ver cómo funciona.

Intent de enviar | Seguimiento de Chromestatus | Error de Chromium

Optimizaciones de la pista de video en segundo plano

El equipo de Chrome siempre intenta encontrar nuevas formas de mejorar la duración de la batería, y Chrome 63 no fue la excepción.

Si el video no contiene pistas de audio, se pausará automáticamente cuando se reproduzca en segundo plano (p.ej., en una pestaña no visible) en la versión de escritorio de Chrome (Windows, Mac, Linux y ChromeOS). Este es un seguimiento de un cambio similar que solo se aplicaba a los videos de MSE en Chrome 62.

Error de Chromium

Eliminación de silenciamiento para velocidades de reproducción extremas

Antes de Chrome 64, el sonido se silenciaba cuando playbackRate era inferior a 0.5 o superior a 4, ya que la calidad se degradaba significativamente. Dado que Chrome cambió a un enfoque de Waveform-Similarity-Overlap-Add (WSOLA) para degradar la calidad, ya no es necesario silenciar el sonido. Significa que puedes reproducir un sonido súper lento y súper rápido ahora.

Error de Chromium