Guía para codificar videos para streaming con Transloadit

Tyler McAllister

Redactor técnico · Trondheim, Noruega · Mostrar bio

Al igual que nosotros en Transloadit, seguramente eres fan de los servicios de streaming 🎥 Pero ¿alguna vez has pensado en crear el tuyo propio? Nuestro Robot /video/adaptive se encarga de eso, por si se te ocurrió una idea tan atrevida. Puedes usar este Robot para codificar video mp4 o webm a HLS (HTTP Live Streaming) o MPEG-DASH.

En esta publicación del blog, te guiaremos por el proceso de crear un reproductor adaptativo básico en React, a modo de prueba de concepto, que admita streaming de video HLS o MPEG-DASH según la compatibilidad del navegador, en la misma línea que una de nuestras demos de JavaScript EN (English).

¿Qué son HLS y MPEG-DASH?

Antes de empezar, aclaremos qué son exactamente HLS y MPEG-Dash. Ambos son protocolos de streaming que dividen los datos de video en pequeños fragmentos que se pueden descargar a un dispositivo por HTTP. Ambos protocolos admiten reproducción adaptativa, alternando entre versiones codificadas a medida que cambian las condiciones de la red. HLS cuenta con soporte de reproducción nativo en dispositivos Apple, mientras que MPEG-DASH es un estándar abierto que suele reproducirse mediante un reproductor de JavaScript. La reproducción y la entrega cifrada dependen del navegador, el reproductor, los códecs y la implementación de DRM, no solo del formato de la lista de reproducción.

En este tutorial, codificaremos a ambos formatos y los usaremos para trabajar con un reproductor de video adaptativo.

Almacenar nuestros archivos mediante una Assembly

Podemos ir directamente a la Assembly de abajo para ver un resumen de cómo usar el Robot.

{
  "steps": {
    ":original": {
      "robot": "/upload/handle"
    },
    "hls-encode": {
      "use": ":original",
      "robot": "/video/encode",
      "ffmpeg_stack": "v7",
      "preset": "hls-720p"
    },
    "dash-encode": {
      "use": ":original",
      "robot": "/video/encode",
      "ffmpeg_stack": "v7",
      "preset": "dash-720p-video"
    },
    "thumbnailed": {
      "use": "hls-encode",
      "robot": "/video/thumbs",
      "result": true,
      "ffmpeg_stack": "v7"
    },
    "hls-adaptive": {
      "use": {
        "steps": ["hls-encode"],
        "bundle_steps": true
      },
      "robot": "/video/adaptive",
      "ffmpeg_stack": "v7",
      "playlist_name": "my_playlist.m3u8",
      "segment_duration": 6,
      "closed_captions": false,
      "technique": "hls"
    },
    "dash-adaptive": {
      "use": {
        "steps": ["dash-encode"],
        "bundle_steps": true
      },
      "robot": "/video/adaptive",
      "ffmpeg_stack": "v7",
      "playlist_name": "my_playlist.mpd",
      "segment_duration": 6,
      "technique": "dash"
    },
    "export-plain": {
      "use": "thumbnailed",
      "robot": "/google/store",
      "credentials": "stream-test",
      "acl": "public-read",
      "path": "stream-videos/${file.name}"
    },
    "export-hls": {
      "use": "hls-adaptive",
      "robot": "/google/store",
      "credentials": "stream-test",
      "acl": "public-read",
      "path": "stream-videos/hls-video/${file.name}"
    },
    "export-dash": {
      "use": "dash-adaptive",
      "robot": "/google/store",
      "credentials": "stream-test",
      "acl": "public-read",
      "path": "stream-videos/dash-video/${file.name}"
    }
  }
}

No dejes que el tamaño de estas Assembly Instructions te preocupe. Vamos a desglosarlas.

En el primer Step, el uso del Robot /upload/handle es claro. Lo utilizamos para obtener un video de un usuario final.

En segundo lugar, el Robot /video/encode codifica el video subido a HLS y MPEG-DASH en los Steps hls-encode y dash-encode, respectivamente. Estos son Steps necesarios para el Robot /video/adaptive.

En tercer lugar, como vamos a trabajar con un reproductor de video, sería útil poder extraer fácilmente una miniatura de nuestro video. Por suerte, eso es exactamente lo que hace el Robot /video/thumbs en el Step thumbnailed ✨

Ahora llegamos a la estrella del espectáculo, el Robot /video/adaptive. En la Assembly, hemos dividido sus tareas en dos Steps distintos: hls-adaptive y dash-adaptive. Echemos un vistazo a los parámetros que recibe este Robot. Toman sus respectivos videos codificados y generan una lista de reproducción .m3u8 y otra .mpd. Los archivos de los protocolos MPEG-DASH y HLS se componen de una lista de reproducción (.m3u8 o .mpd) y una secuencia de segmentos. El archivo de la lista de reproducción simplemente busca los segmentos asociados necesarios para transmitir el video y los reproduce de forma secuencial.

Con segment_duration, podemos definir la duración máxima que tendrá cada segmento del video en streaming. Esto puede ser un aspecto importante a tener en cuenta cuando piensas en los datos y la capacidad de descarga de tu usuario. Otra peculiaridad de estos protocolos es que debemos asegurarnos de que sus segmentos estén siempre en el mismo directorio que su lista de reproducción; de lo contrario, las listas de reproducción buscarán segmentos que no pueden encontrar. Por suerte, en el último Step general, el Robot /google/store establece la ruta de los archivos MPEG-DASH y HLS en una ruta definida como stream-videos/dash-video/${file.name}. Esto significa que todo debería quedar bien agrupado. Solo asegúrate de configurar storage.objects.create en los permisos de tu Bucket. También almacenamos la miniatura con el mismo Robot.

La rama DASH mínima anterior solo codifica video. Para obtener un stream DASH con sonido, añade una variante de audio y agrúpala con el video como se muestra en nuestra demo de MPEG-DASH EN (English).

Una prueba de concepto con React

Griffith⁠ es un reproductor de video para React con el que es muy fácil empezar. Recibe props con las propiedades del reproductor y un objeto sources que consta de la URL del video junto con su formato.

var sources = {
  hd: {
    bitrate: 905,
    size: 10105235,
    duration: 0,
    width: 1280,
    height: 720,
    play_url: 'https://storage.googleapis.com/yourbucket/stream-videos/hls-video/my_playlist.m3u8',
  },
}

Esta prueba de concepto histórica comprueba el soporte nativo de medios con el siguiente código. No detecta el soporte de reproducción que proporcionan las bibliotecas de JavaScript mediante Media Source Extensions; usa las comprobaciones de capacidades de tu reproductor cuando integres una biblioteca de ese tipo.

function checkCompatibility() {
  var compatibility = document.createElement('video')
  if (compatibility.canPlayType('application/x-mpegURL')) {
    return build_sources('m3u8', 'my_playlist')
  }
  if (compatibility.canPlayType('application/dash+xml')) {
    return build_sources('mpd', 'my_playlist')
  }
  console.log('No native streaming support found')
}

Puedes encontrar mi implementación básica aquí⁠. El Robot /video/adaptive realmente simplifica la generación de contenido en streaming. A medida que la gente consume más videos por internet, confiamos en que este Robot puede resultar una herramienta útil para quienes buscan una solución sencilla y elegante.

Para seguir leyendo, puede que te interese nuestra demo: Haz que el video sea compatible con todos los dispositivos EN (English), ya que ilustra cómo combinar esto con otros formatos, según lo que admita el dispositivo de reproducción, y ofrece código de ejemplo para un reproductor que no usa React: Plyr⁠.