10 minutos

Transloadit: La forma más fácil de subir y convertir vídeos en internet

Si me preguntas hace más de 1 mes cuán difícil es gestionar vídeos en internet, probablemente habría dicho que no mucho. Hace algún tiempo (>5 años), todas las páginas utilizaban el antiguo Flashplayer para reproducir vídeos. Detrás del telón, Google y otras grandes compañías estaban implementando decodificadores de vídeo en los navegadores para evitar esta dependencia para siempre. Esto nos prometía un estándar de vídeo para mejorar el rendimiento y simplificar el proceso en el desarrollo. La idea no era mala del todo, ahora los vídeos son renderizados aprovechando los recursos gráficos del dispositivo y no es más complicado que incluir una etiqueta HTML5 <video>. Sin embargo... hemos cambiado el hilo de la discusión de si usar o no Flash, a qué codec debería ser reconocido como el estándar. Es una lucha intensa entre grandes compañías que no parece resolverse en un corto plazo. Por el momento, si buscas en Google "web video codecs soportados" encontrarás 3 opciones: Mp4, Webm o VP8 y OGV.

Recientemente en Partelo hemos migrado desde Cloudinary a nuestro propio almacenamiento en AWS S3 Bucket para los vídeos, realizando la conversión de forma asíncrona gracias a Transloadit, recibiendo notificaciones una vez que los vídeos están listos para reproducirse. Una vez almacenados los resultados en S3 Bucket, guardamos la información relevante en nuestra base de datos. Ahora ahorramos miles de dólares cada mes y hemos reducido los costes de escalabilidad notablemente.

Introducción a Transloadit

Esta compañía tiene más de 10 años de experiencia en el sector proporcionando una solución para una gran variedad de Casos de Uso para startups y grandes compañías.

Transloadit se lleva muy bien con el Open Source. Además de la magnífica API para transformar vídeos, imágenes o audios, han lanzado más proyectos para resolver problemas comunes en la web como la subida de archivos, para el que crearon Tus, el protocolo abierto para subidas "pausables". Es tan bueno que ahora es el estándar para Git LFS. También crearon Uppy, una librería Javascript modular integrada con Tus para facilitar la subida y manejo de archivos a los desarrolladores. Está lleno de features, configuración sencilla y bien integrado con Transloadit.

Echa un vistazo a sus 10 años de logros en su blog.

Primeros pasos

Para empezar a trabajar en una situación real, podemos crear un simple Uppy Dashboard el cual sube directamente los archivos a Transload y luego aplica una plantilla para convertir imágenes, audio o vídeos a tus instrucciones definidas. Luego en la plantilla debes además configurar tus exports para almacenar los resultados en AWS S3 Bucket, Azure, Google Drive, servidor FTP o cualquier otra opción disponible.

En Transload, cualquier transformación es hecha por un Robot1. Estos son responsables de crear miniaturas, aplicar filtros, gestionar metadatos o importar/exportar archivos. Echa un vistazo a todos los Robots disponibles.

Los Robots son configurados en Plantillas2 o Assembly Instrucctions. Las plantillas son básicamente un array de instrucciones en JSON para aplicar a los ficheros. Cada paso o instrucción realiza algún tipo de tarea utilizando un Robot. Luego puedes referenciar las plantillas mediante el parámetro template_id en la API, haciendo que tus peticiones sean más ligeras y seguras.

ProTip: a pesar de que es posible añadir las instrucciones directamente en el campo params de la petición a la API de Transloadit, deberías considerar evitarlo y utilizar los identificadores de plantillas en su lugar porque las claves embebidas como los accesos a S3 o SFTP, pueden ser vistos por cualquiera en tu código HTML.

En la imagen superior, hice un flowchart simple de un caso de uso para Transload. Recomendaría utilizar Uppy para construir las cosas más rápido en una fase inicial, y luego crear tu propia implementación con el comportamiento deseado.

En profundidad vemos que Transload devuelve una respuesta para cada Assembly3. Estas respuestas son llamadas Notificaciones de Assembly, y aquí encontramos el valor assembly_id que podemos reusar para codificar de nuevo o realizar peticiones secuenciales a otras plantillas para generar subtítulos o cambiar los metadatos por ejemplo. En nuestro caso sólo vamos a necesitar el valor ssl_url que devuelve la Notificación, el cuál es nuestra URL del archivo transformado.

Transload recomienda construir aplicaciones o servicios asíncronos siempre que sea posible, porque tienen que lidiar con miles de transformaciones simultáneas algunas veces tus subidas podrían permanecer en cola. No suele ocurrir, sin embargo si esto pasa, tus usuarios podrían percibir una mala experiencia si en tu integración tienen que esperar hasta que el procesamiento termine.

Cuando usamos Uppy, esto significa cambiar el parámetro waitForEncoding a false, haciendo uso de las Assembly Notificacions. Con esto, tus visitantes sólo necesitarán esperar a la subida del fichero para terminar la acción y de esta manera les permitirás moverse a través de tu app y ver los resultados una vez que la conversión haya terminado

Crea tu primera Plantilla

Comienza creando tu plantilla desde el Dashboard de Transloadit. Créate una cuenta si no la tienes aún, hay un plan gratuito ideal para testeo. Como dijimos antes, las plantillas son una lista de pasos en JSON utilizando Robots, así que el primer paso será importar el archivo(s). En este caso es una subida simple de ficheros por lo que configuramos la primera instrucción como el Robot /upload/handle.

"steps": {
    ":original": {
      "robot": "/upload/handle"
    },
    ...

Hay 3 restricciones cuando utilizamos este Robot:

  • no definas el parámetro use, contrariamente a todos los demás Robots
  • sólo utilízalo una vez en una única instrucción de las plantillas
  • el nombre de la instrucción debe llamarse: :original

El siguiente paso debe ser la propia conversión del vídeo. Para crear un flujo de trabajo, debemos que incluir el parámetro use para indicar desde dónde vienen los ficheros a esta instrucción. El parámetro use también puede ser un array.

En este caso, usaremos el Robot /video/encode.

"steps": {
    ":original": ...
    "mp4_encode": {
        "use": [
          ":original"
        ],
        "robot": "/video/encode",
        "result": true,
        "ffmpeg_stack": "v3.3.3",
        "preset": "ipad"
    }
    ...
  • "result": true : indica que esta instrucción genera resultados que deben ser almacenados o exportados
  • ffmpeg_stack : selecciona la versión de FFmpeg stack para realizar el codificado. Estas versiones no reflejan ninguna versión real de la librería FFmpeg. En su lugar indica el versionado interno de las builds hechas por el propio equipo de Transload. La recomendación actual es utilizar la versión "v3.3.3"
  • preset : realiza la conversión utilizando configuraciones prestablecidas. Esto te ayuda a evitar tener que definir cada ajuste de vídeo manualmente. Para una lista de configuraciones preestablecidas, mira video presets.

¡Buen trabajo! Nuestra plantilla está casi terminada, por el momento es capaz de recuperar archivos subidos y luego aplicar una conversión simple a Mp4 utilizando la configuración preestablecida ipad, el cuál internamente hace redimensionado, cambia el frame rate, audio bitrate y optimiza el vídeo para su reproducción en la web. Ahora sólo nos queda indicar un lugar para almacenar los resultados.

Credenciales de plantillas

Antes de implementar el paso export de nuestras plantillas, échale un vistazo a como funcionan las Credenciales de plantillas. Estas están pensadas para ser reusables y proveer una mayor encriptación para las claves de tu almacenamiento en la nube.

Puedes asignarles una etiqueta a la cual puedes hacer referencia más tarde desde tus plantillas con el parámetro credentials. Usando esta etiqueta, auto-inyecta el nombre de tu bucket, las claves de acceso y contraseñas mientras se procesa la plantilla. Te ahorra tener que duplicar las credenciales a través de todas tus plantillas.

Así que ve a tu cuenta de Transloadit y haz click en el enlace "Template Credentials" debajo de "My account". Elije el proveedor en la nube apropiado desde el menú desplegable y rellena los campos para el nombre del bucket, api keys o secrets. Una vez que las credenciales han sido guardadas, puedes utilizar la etiqueta escogida en el parámetro credentials de cada Robot import o export.

{
  "steps": {
    "my_import": {
      "robot": "/s3/import",
      "credentials": "my_s3_credentials",
      "path": "/some/path"
    },
    "my_store": {
      "robot": "/youtube/store",
      "use": "my_import",
      "credentials": "my_youtube_credentials"
    }
  }
}


Transloadit Uppy js

Ahora para empezar a trabajar con nuestra plantilla, debemos implementar un Uppy Dashboard utilizando el módulo de Transload. Es muy simple una vez que ves el código:

See the Pen Simple Uppy Dashboard by ayoze (@ayozehd) on CodePen.

En este snippet, verás una implementación temprana para empezar a trabajar en Uppy + Transloadit. En el código javascript simplemente añadí otro método .use para incluir el módulo Uppy.Transloadit y asignar el identificador de la plantilla que creamos anteriormente al parámetro template_id. Finalmente añade tu API Key de Transloadit en auth.key, pero recuerda que recomiendan activar la Signature Authentication para evitar ataques man in the middle o cualquier inyección o robo de tu facturación.

En resumen, el módulo de Uppy realiza una petición API a Transloadit tal y cómo harías desde el backend con cualquiera de sus Software Development Kits. En este código, hay algunos filtros para invalidar archivos superiores a 200MB y solo te permite subir ficheros de vídeo. Sin embargo está hecho solo a nivel de cliente desde la configuración de Uppy, así que recomendaría antes de ir a producción incluir estos filtros en la plantilla de Transload utilizando el Robot /file/filter. Únicamente recuerda actualizar ambas partes en caso de que cambien las condiciones.

Testea de forma segura el CodePen anterior, no almacenamos absolutamente nada.

Previsualización de vídeos

En Partelo, los requerimientos incluían una previsualización del vídeo después de subirlo, ya que a los usuarios les gusta ver su vídeo recién grabado antes de pulsar "Enviar". Para lograr esto creamos 2 plantillas, la primera será utilizada para las subidas temporales y no necesita por tanto "exportar" nada, y nos devuelve la url del vídeo convertido + url del archivo subido original in la respuesta de la Assembly. La segunda plantilla está pensada para usarse una vez que el formulario ha sido enviado a nuestros servidores, desde allí creamos una petición para realizar las transformaciones definitivas mientras asignamos el primer paso de importación como la url del vídeo original que recuperamos del formulario. Luego se almacena el vídeo en nuestro S3 Bucket y Transload nos envía la Notificación de la Assembly a nuestros servidores para almacenar información relevante en la base de datos.

Pero, ¿porqué parece una locura? Bueno, para renderizar un vídeo primero debe estar en cualquier codec soportado por los navegadores. Normalmente sólo convertimos a Mp4 porque está soportado en la mayoría de navegadores, sin embargo considera convertir los vídeos también a Webm y OGV para soportar antiguos dispositivos y navegadores. Brevemente el flow es:

  1. Hacemos una primera conversión para renderizar el vídeo lo más rápido posible, evitando incluir procesamiento extra como la marca de agua o los metadatos.
  2. La Notificación de la Assembly temporal nos devuelve la url del archivo original + url del vídeo convertido (ambos disponibles durante 24 horas). La url del vídeo original es añadida al formulario en un input hidden.
  3. El usuario envía el formulario a nuestros servidores y desde aquí creamos una petición a la API de Transload utilizando la plantilla definitiva con la url del vídeo original como la instrucción para importar.
  4. Transload crea la Assembly (conversión, marca de agua, metadatos...) y envía la notificación a un endpoint de nuestros servidores para almacenar los resultados en la base de datos.

¿Te gustaría echar un vistazo a nuestra implementación personalizada de Uppy y Transload? Estás de suerte, aquí tienes un Gist.

¿Crees que fue una buena lectura? ¡Haz un comentario o vota 5 estrellas!

Leer más


  1. Los Robots importan, convierten y almacenan tus archivos, y en cada instrucción de una Assembly se utliza uno. Puedes combinar muchos Robots trabajando en una única Assembly, pasando los resutados de un Robot a otro. Esto te permite crear incontables flujos de trabajo e instrucciones únicas para tu caso. 

  2. Una plantilla te permite almacenar instrucciones para crear Assemblies de forma segura en tu cuenta de transloadit.com. De esta manera, puedes ocultar estas instrucciones de tus usuarios. Luego podrás hacer referencia a estas mediante el parámetro template_id en las peticiones a la API, haciendo tu peticiones más ligeras y seguras. 

  3. Una Assembly es la ejecución de instrucciones para la conversión de un archivo subido y/o importado. Cada Assembly tiene un identificador único assembly_id que puede ser utilizado para hacer referencia desde peticiones Each Assembly has a unique assembly_id identifier that can be used to refer to the Assembly in subsequent API requests. 

1.0