Esta página no se encuentra indexada en Google

Ejercicio 1: Clip de vídeo incrustado en HTML 5

Tarea 1.1: Codificar clip de 20 segundos para publicación en web.

Consultando las siguientes referencias:

Consideramos que a día de hoy (Mayo 2022), la mejor opción sería codificar el vídeo en los siguientes códecs y contenedores:

  • AV1/WebM: el formato más moderno y eficiente hasta la fecha, el mayor problema sería su incompatibilidad con Safari y que aún no se ha optimizado el rendimiento de sus codificadores y decodificadores.

    The primary drawback to AV1 at this time is that it is very new, and support is still in the process of being integrated into most browsers. Additionally, encoders and decoders are still being optimized for performance, and hardware encoders and decoders are still mostly in development rather than production. - Mozilla

  • VP9/WebM: formato menos eficiente que AV1, pero es más maduro y compatible con Safari.
  • H.264/MP4: el formato más antiguo de la lista y compatible con versiones antiguas de Chrome, Edge, Safari, etc. Es incluso compatible con Internet Explorer, por lo que si queremos maximizar compatibilidad será una opción muy sólida.

La resolución elegida será 1920x1080 al ser ésta la resolución más común de pantalla. Podríamos codificar también en 720p y 480p como hace Youtube, pero teniendo en cuenta que se trata de un clip de únicamente 20s, no lo vemos necesario.

En cuanto al bitrate, seguiremos la recomendación de Youtube para vídeos de 1080p 30fps: 8 Mbps.

Como Avidemux (v2.8.0) no soporta codificación en AV1, utilizaremos únicamente VP9 y H.264.

Vemos que con el mismo bitrate, H264 genera ruido en algunas zonas del vídeo mientras que con VP9 no ocurre.

Además de ofrecer un rango de colores más amplio:

Tarea 1.2: Crear web. Características del formato HTML5.

El formato HTML5 nos otorga más poder de personalización sobre la interfaz de usuario comparado con servicios como Youtube, pero a cambio, deberemos tener en cuenta manualmente los siguientes puntos:

  • Soporte de navegadores de las distintas funcionalidades y formatos de vídeo.
  • Servidor o CDN donde alojaremos el vídeo.
  • Posibilidad de ofrecer distintas calidades dependiendo de la banda ancha del usuario.
  • Cualquier usuario podrá descargar el vídeo visualizado.

Tarea 1.3: Publicar fichero .html y valorar experiencia de usuario.

A nivel de experiencia de usuario, el vídeo no tiene retraso de visualización y la calidad es buena. Un detalle a tener en cuenta es que el diseño del reproductor es dependiente del navegador que se esté usando.

Existen más funcionalidades que se pueden añadir al vídeo a través de la Media API de Javascript. Pero esto se sale un poco del alcance de la práctica.

Tarea 1.4: Añade funcionalidad al vídeo mediante los diferentes atributos del tag <video>.

<video width="100%" controls loop muted autoplay>
  <source src="/assets/videos/video.webm" type="video/webm" />
  <source src="/assets/videos/video.mp4" type="video/mp4" />
  <track
    kind="captions"
    srclang="es"
    src="/assets/videos/captions-es.vtt"
    default
  />
  El navegador no soporta el tag de video.
</video>
  • Añadido controles: controls
  • Activada la reproducción automática y sin volumen: autoplay y muted
  • La reproducción en bucle: loop
  • Añadido subtítulos: track apuntando a un archivo vtt.

Tarea 1.5: Indagar sobre los servicios adicionales que ofrecen los CDN para vídeos.

Vemos que las principales plataformas cloud ofrecen servicios muy similares, todas permiten transcodificar y analizar vídeos mediante Inteligencia Artificial.

  • AWS:
    • MediaConvert permite transcodificar vídeos para distintas pantallas.
    • Rekognition analiza imágenes o vídeos para detectar objetos, personas, texto, escenas o actividades, se puede reentrenar con etiquetas personalizadas.
    • Transcribe utiliza reconocimiento de voz para generar subtítulos.
    • MediaTailor permite insertar anuncios personalizados en los vídeos.
  • Google:
    • Transcoder transcodifica vídeos, genera miniaturas y normaliza el volumen del audio.
    • Video AI engloba las funcionalidades relacionadas con IA (detección de cambios de planos, detección y seguimiento de objetos, etc).
  • Azure:
  • IBM:

Por otro lado, los CDNs más pequeños como Cloudflare y Fastly no suelen disponer de servicios de inteligencia artificial, pero suelen ser más baratos y fáciles de usar.

Ejercicio 2: Streaming de un vídeo

Tarea 2.1: Generar un clip de vídeo y codificar con Avidemux (clip01).

Clip en cuestión:

Link, en caso de que el navegador no soporte MKV incrustados.

Vemos en MediaInfo que clip01.mkv está codificado en AVC, posee un bitrate medio de 5000 Kbps y el audio se encuentra en formato MP3.

Tarea 2.2: Configurar una emisión repetitiva y una recepción del clip01.

Al igual que le ha ocurrido al compañero David Ferrer, al transcodificar el vídeo en nuestra máquica al formato H.264 + MP3 (MP4), surgen problemas a la hora de visualizar. Por ello, hemos emitido utilizando la opción de H.264 + MP3 (TS), un contenedor más adecuado para transmisiones en directo.

Comprobamos que los códecs son los mismos que hemos indicado y la tasa de bits medio se encuentra en torno a los 5000 Kbps indicados.

Tarea 2.3: Confirmar que el stream está codificado y tiene la tasa de bits adecuada.

Vemos que el formato de audio y vídeo es el seleccionado. Pero si lo comparamos con el códec de emisión, vemos que el tipo de H.264 es diferente.

En la documentación de microsoft se detalla que avc1 indica que se trata de una secuencia de bits sin código de inicio y h264 que sí. Esto es debido a que al usar el protocolo RTP, no es necesario delimitar las unidades NAL explícitamente con códigos de inicio.

Estádisticas:

Tarea 2.4: ¿Cuántos segundos tarda en pausarse en el receptor? ¿Por qué?

Existe una demora de más o menos 1 segundo entre que se pausa en el emisor y se para en el receptor. Además del overhead causado por la codificación y decodificación, esto podría deberse al cacheo que realiza el receptor.

Si reducimos este valor, vemos que el retardo de pausa y reanudación disminuye.

Tarea 2.5: Calcula aproximadamente la compresión que el VLC de emisión está realizando al transcodificar.

Tomando el valor medio de 5000 Kbps que indicamos con anterioridad y los 1184 kbps que se muestran en el receptor:

El factor de compresión es: 5000 / 1184 = 4.2

Tarea 2.6: Describir el proceso de streaming mediante un CDN y estimar el coste por minuto de una transmisión dentro de una misma región de un stream HD en directo por 10.000 usuarios simultáneos.

Al igual que en ejercicios anteriores, utilizaremos Cloudflare como proveedor. El proceso es bastante simple:

  • Pinchamos en Stream y seleccionamos la opción de Live Inputs.
  • Seleccionamos uno de los protocolos de streaming ofrecidos (RTMP o SRT).
  • Introducimos la URL y la clave en un software compatible como puede ser OBS.
  • Aplicamos los cambios y comenzamos la emisión.
  • Para restringir el acceso a la emisión, podemos requerir tokens tal y como se indica en la documentación, además de activar el CORS y permitir el acceso únicamente de los dominios que indiquemos.

Coste

En cuanto al coste de la transmisión, a diferencia de otros CDNs como AWS, donde la estimación es una tarea compleja y cara (en torno a 25,7$ por minuto en el caso de 10.000 usuarios).

En Cloudflare el modelo es mucho más simple, debemos pagar 5$ por cada 1.000 minutos guardados y 1$ por cada 1.000 minutos servidos. De manera que el coste por minuto para 10.000 espectadores de cualquier región serían:

(1 / 1.000) * 10.000 + (5 / 1.000) = 10,005$

Menos de la mitad que en el caso de AWS, además de no tener que pagar un extra para usuarios de otras regiones.