Generar vistas previas significativas de archivos

Kevin van Zonneveld

Cofundador · Ámsterdam, Países Bajos · Mostrar bio

Nos enorgullece presentar nuestro nuevo Robot /file/preview, una función de Transloadit diseñada para crear automáticamente vistas previas significativas para todo tipo de archivos. Ya sea que necesites miniaturas de video, carátulas de álbum o formas de onda de audio, vistas previas de páginas de documentos, capturas de pantalla de sitios web o iconos de archivos comprimidos, este Robot puede entregar vistas previas que ayudan a las personas a identificar archivos rápidamente. Nosotros nos encargamos de la complejidad de los distintos tipos de archivo, mientras tú te concentras en desarrollar tu app.

El Robot se puede desplegar con unas pocas líneas de JSON y utiliza estrategias inteligentes internamente para mantener los costos bajos y el rendimiento alto. Aprovecharlo puede reducir drásticamente la fricción percibida en tu app, y aumenta la participación y la retención de los usuarios.

¿Qué puede hacer?

🤖/file/preview EN (English) está diseñado para crear vistas previas significativas que ayudan a los usuarios a identificar rápidamente el contenido de los archivos. Admite:

• Imágenes: Miniaturas optimizadas para cualquier imagen (incluso RAW: )
• Videos: Fotogramas extraídos o clips cortos: (o un icono cuando no se admiten las descargas por rangos: )
• Audio: Carátula incrustada (o visualización de forma de onda si no está disponible: )
• Documentos: Vistas previas de la primera página
• Páginas web: Capturas de pantalla de la página
• Archivos comprimidos: Iconos según el tipo

El Robot está diseñado para ser rápido y eficiente, y no necesita descargar un video completo de 4 GB para producir una miniatura de 20 KB. En su lugar, el Robot solo descarga los fragmentos relevantes del video, lo que le permite crear vistas previas atractivas para el 99,9 % de los archivos a un costo muy bajo.

Para el 0,1 % de archivos restantes, el Robot recurre de forma elegante a mostrar un icono específico del tipo, como en el ejemplo del archivo comprimido anterior.

El Robot está diseñado para ofrecer valores predeterminados pragmáticos y atractivos desde el primer momento, pero su comportamiento se puede personalizar por completo. Más sobre esto a continuación.

¿Por qué Transloadit?

Generar vistas previas para una amplia gama de archivos es complejo debido al vasto panorama de formatos de imagen, códecs de video y tipos de documento. Esta complejidad es especialmente marcada para clientes de nicho, como fotógrafos que trabajan con formatos de imagen raw, o usuarios que manejan diversos documentos de Microsoft Office. Debido a la constante evolución de los formatos de imagen y video, hay que invertir de forma constante en mantenerse al día y dar soporte a los formatos más recientes. Transloadit admite más de 700 tipos de archivo distintos.

Crear una solución propia y personalizada para generar vistas previas de archivos requiere recursos de ingeniería considerables para cubrir aunque sea una parte de los numerosos tipos de archivo, y compromete esos recursos a largo plazo, ya que la solución interna debe mantenerse y actualizarse para los nuevos formatos. Además, procesar archivos subidos por los usuarios es un asunto delicado que puede volver tu infraestructura susceptible a vulnerabilidades en las diversas herramientas de procesamiento de archivos. En su lugar, considera delegar la generación de vistas previas de archivos en Transloadit, lo que protege tu infraestructura y permite que tu equipo de ingeniería se concentre en crear el mejor servicio posible para tus clientes, mientras Transloadit se encarga de la parte compleja de las vistas previas.

🤖/file/preview EN (English) se puede combinar con 94 Robots adicionales para crear flujos de trabajo únicos para tu negocio, y esos flujos de trabajo pueden ponerse a trabajar para transformar cualquier parte de tu pipeline de archivos. Transloadit puede trabajar directamente sobre las subidas de tus usuarios finales, importar grandes bibliotecas de medios o incluso convertir archivos bajo demanda, transmitiendo los resultados optimizados directamente a los navegadores mediante nuestro Smart CDN.

Opciones de implementación

Tienes varias maneras de desplegar 🤖/file/preview, pero la mejor forma de empezar es crear un Template que haga referencia a este Robot. Un Template es una receta JSON en tu cuenta que describe qué debe hacer Transloadit con tus archivos. Puedes crear un Template en el Template Editor de tu cuenta o mediante nuestro Plugin de proveedor de Terraform.

Preprocesamiento

Con el preprocesamiento, creas y guardas las vistas previas en tu almacenamiento. Esto suele hacerse cuando el usuario sube el archivo por primera vez, mucho antes de que tu usuario final solicite una vista previa. Un preprocesamiento así puede ahorrar latencia en la primera solicitud, a cambio de mayores costos de codificación y almacenamiento, así como de una integración más compleja que bajo demanda.

Transloadit puede encargarse de las subidas de los originales, generar vistas previas y luego guardarlas en tu almacenamiento. Para que Transloadit gestione las subidas, haz referencia a 🤖/upload/handle en tu Template así:

{
  "steps": {
    ":original": {
      "robot": "/upload/handle"
    },
    "previewed": {
      "robot": "/file/preview",
      "use": ":original",
      "width": 300,
      "height": 200
    },
    "stored": {
      "use": ["previewed", ":original"],
      "robot": "/s3/store",
      "credentials": "YOUR_AWS_CREDENTIALS",
      "path": "my_target_folder/"
    }
  }
}

Las subidas suelen provenir de navegadores (por ejemplo, mediante Uppy⁠), pero los SDK de back-end también pueden subir archivos.

Veamos primero en detalle el caso de uso del navegador.

Subidas desde el front-end

Transloadit podría encargarse de las subidas desde el navegador que tus usuarios finales realizan con Uppy⁠, nuestro cargador de archivos de código abierto para navegadores web. Al aceptar archivos, Transloadit seguirá las Instructions del Template y, por lo tanto, generará vistas previas y las almacenará en tu bucket de S3. Los originales también se guardarán, porque en el Step "stored" teníamos: "use": ["previewed", ":original"].

Este es el código de navegador que usarías:

import Uppy from '@uppy/core'
import Dashboard from '@uppy/dashboard'
import Transloadit from '@uppy/transloadit'

import '@uppy/core/dist/style.min.css'
import '@uppy/dashboard/dist/style.min.css'

const uppy = new Uppy()
  .use(Dashboard, {
    inline: true,
    // This is the element where the dashboard will be rendered:
    target: '#uppy-dashboard',
  })
  .use(Transloadit, {
    waitForEncoding: true,
    assemblyOptions: {
      params: {
        auth: { key: 'YOUR_AUTH_KEY' },
        // Here you would refer to the Template we created above:
        template_id: 'YOUR_TEMPLATE_ID',
      },
    },
  })

uppy.on('transloadit:complete', (assembly) => {
  const { previewed = [] } = assembly.results
  if (previewed.length > 0) {
    console.log('Preview URL:', previewed[0].ssl_url)
  }
})

Uppy fue creado por Transloadit y se ha convertido en el cargador de archivos de código abierto número uno para navegadores web. Incluye más funciones de las que caben en este artículo, así que consulta el sitio web de Uppy⁠ para más información.

También hay SDK para Android e iOS, por si quieres integrar con apps móviles nativas.

Subidas desde el back-end

Los back-ends también pueden subir a Transloadit. Así se vería en Node.js:

// $ npm install transloadit
const transloadit = new Transloadit({
  authKey: 'YOUR_AUTH_KEY',
  authSecret: 'YOUR_AUTH_SECRET',
})

const assembly = await transloadit.createAssembly({
  // Here you would refer to the Template we created above:
  template_id: 'YOUR_TEMPLATE_ID',
  files: [fs.createReadStream('./file.mp4')],
  waitForCompletion: true,
})

console.log(assembly.results.stored[0].ssl_url)

Hay SDK para muchos más lenguajes de back-end que facilitan la integración, pero también podrías interactuar directamente con nuestra REST API.

Importaciones

En lugar de dejar que Transloadit gestione las subidas, Transloadit puede importar archivos desde fuentes en la nube como S3, generar vistas previas y exportarlas de vuelta a S3 u otros proveedores de almacenamiento. Esto podría hacerse para un solo archivo o para buckets enteros que contengan muchos terabytes de archivos.

Solo como ejemplo, también añadiremos 🤖/file/filter al Template de abajo, para mostrar cómo podrías filtrar por tipo de archivo y, en este caso, generar vistas previas únicamente para archivos de audio. Esto podría adaptarse para filtrar por otras propiedades, como el tamaño del archivo, el bitrate, el tipo de medio, etc. Este es el Template completo que crearías en el Template Editor de tu cuenta:

{
  "steps": {
    "imported": {
      "robot": "/s3/import",
      "credentials": "YOUR_AWS_CREDENTIALS",
      "path": "my_source_folder/"
    },
    "audio_filtered": {
      "use": "imported",
      "robot": "/file/filter",
      "accepts": [["${file.type}", "==", "audio"]],
      "error_on_decline": false
    },
    "previewed": {
      "robot": "/file/preview",
      "use": "audio_filtered",
      "width": 300,
      "height": 200,
      "format": "png"
    },
    "stored": {
      "use": "previewed",
      "robot": "/s3/store",
      "credentials": "YOUR_AWS_CREDENTIALS",
      "path": "my_target_folder/"
    }
  }
}

Puedes hacer referencia a este Template y ejecutarlo con cualquiera de nuestros SDK. En Node.js se vería así:

// $ npm install transloadit
const transloadit = new Transloadit({
  authKey: 'YOUR_AUTH_KEY',
  authSecret: 'YOUR_AUTH_SECRET',
})

const assembly = await transloadit.createAssembly({
  template_id: 'YOUR_TEMPLATE_ID',
  waitForCompletion: true,
})

// The first of potentially millions of preview URL:
console.log(assembly.results.stored[0].ssl_url)

Bajo demanda

Por último, también puedes generar vistas previas bajo demanda con nuestro Smart CDN. Esto significa que Transloadit no hace ningún trabajo hasta que un usuario solicita la vista previa. Entonces Transloadit importa el archivo original desde tu almacenamiento, genera la vista previa y la entrega directamente al usuario final. Almacenamos el resultado en caché cerca del usuario final.

Esto tiene los siguientes beneficios:

• La vista previa solo se crea cuando los usuarios la solicitan, lo que ahorra costos en archivos de medios que en realidad no se solicitan.
• El resultado se almacena automáticamente en caché en centros de datos cercanos a tus usuarios, de modo que la próxima vez que alguien solicite la misma vista previa, se entregará aún más rápido y sin cargos de codificación.
• La integración es más sencilla, ya que no necesitas procesar las vistas previas tú mismo (guardarlas, almacenar referencias, etc.). En su lugar, simplemente creas un Template y añades a tu página web o app una URL del Smart CDN para el recurso.
• Puedes adaptar la vista previa al dispositivo, la resolución, el ancho de banda, etc. del usuario final. Esto significa que no desperdicias bytes en una entrega que no se traduce en una mejor experiencia de usuario. Así se ahorra ancho de banda, batería y tiempo.

Si quieres saber más sobre las ventajas y desventajas entre bajo demanda y preprocesamiento, y ejecutar cálculos interactivos de costos y latencia, consulta nuestro artículo: Reduce costos y latencia con las vistas previas de archivos del Smart CDN de Transloadit EN (English).

Este es un Template de ejemplo que indica a Transloadit que importe una imagen desde S3, genere una vista previa y la entregue mediante nuestro Smart CDN:

{
  "steps": {
    "imported": {
      "robot": "/s3/import",
      "credentials": "my-s3-credentials",
      "path": "/images/${fields.input}"
    },
    "previewed": {
      "use": "imported",
      "robot": "/file/preview",
      "width": "${fields.w}"
    },
    "served": {
      "use": "previewed",
      "robot": "/file/serve"
    }
  }
}

Y la integración es tan simple como añadir una URL a tu página web:

En este ejemplo, my-template es el nombre del Template que creamos arriba, ${fields.input} se sustituye por /file.mp4, y ${fields.w} por 300, ambos tomados de la URL.

Personaliza la vista previa

Aunque 🤖/file/preview ofrece valores predeterminados pragmáticos y atractivos desde el primer momento, puedes controlar su salida con varios parámetros para que coincida con la apariencia de tu app:

• format: Formato de salida de la miniatura ("jpg", "png" o "gif")
• width y height: Dimensiones en píxeles (1-5000)
• resize_strategy: Cómo ajustar la vista previa a las dimensiones (predeterminado: "pad")
• background: Color de fondo para el relleno en formato hexadecimal (#rrggbb[aa])
• strategy: Personaliza la generación de vistas previas por tipo de archivo (audio, video, imagen, etc.)

Para formas de onda de audio:

• waveform_center_color y waveform_outer_color: Colores del degradado en formato hexadecimal
• waveform_height y waveform_width: Dimensiones de la forma de onda

Para iconos:

• icon_style: "with-text" (predeterminado) o "square"
• icon_text_color: Color del texto en formato hexadecimal
• icon_text_font: Familia tipográfica (por ejemplo, "Roboto")
• icon_text_content: Contenido del texto ("extension" o "none")

Para clips de video:

• clip_format: Formato de animación ("webp", "apng", "avif" o "gif")
• clip_offset: Posición inicial en segundos
• clip_duration: Duración en segundos
• clip_framerate: Fotogramas por segundo (1-60)
• clip_loop: Define si la animación se repite en bucle

Para la optimización de imágenes:

• optimize: Habilita la optimización del tamaño del archivo
• optimize_priority: "conversion-speed" o "compression-ratio"
• optimize_progressive: Habilita la carga progresiva

Para más información, consulta la documentación de 🤖/file/preview EN (English).

Consideraciones de seguridad

Para proteger tus archivos y controlar el acceso a la funcionalidad de vistas previas, recomendamos implementar la firma de solicitudes en las integraciones de front-end (Uppy, Smart CDN, móvil). Para la entrega mediante Smart CDN en particular, usa URL firmadas del Smart CDN para que solo los usuarios autorizados puedan generar nuevas variaciones de tus archivos.

Para información detallada, incluidos ejemplos en muchos lenguajes de programación, consulta nuestra documentación sobre las URL firmadas del Smart CDN.

Recuerda:

• Generar siempre las URL firmadas en tu back-end,
• Nunca exponer tu Auth Secret en código del lado del cliente, y
• Implementar un tiempo de expiración para tus URL firmadas.

Las expiraciones más cortas acotan la ventana de repetición, mientras que las más largas mejoran la reutilización de la caché y pueden reducir el volumen y la latencia de generación de vistas previas.

Casos de uso avanzados

Aunque este artículo cubre las rutas básicas para usar 🤖/file/preview, hay muchas maneras de integrarlo en pipelines más complejos:

• Generación por lotes automatizada: Programa la generación de vistas previas para buckets de almacenamiento completos y mantén vistas previas actualizadas a gran escala.
• Integraciones basadas en eventos: Activa el procesamiento de vistas previas automáticamente cada vez que lleguen archivos nuevos, para garantizar que las vistas previas siempre estén listas cuando se necesiten.
• Compón flujos de trabajo híbridos: Combina 🤖/file/preview EN (English) con 94 Robots adicionales de Transloadit, como 🤖/image/facedetect o 🤖/video/encode, para crear transformaciones de varios Steps en un solo flujo de trabajo.
• Opciones de almacenamiento ampliadas: Más allá de AWS S3, puedes integrarte sin fricciones con todos los principales proveedores de almacenamiento en la nube, así como con tu propia infraestructura personalizada (almacenamiento compatible con S3 o SFTP).
• Caché personalizable: Combina 🤖/file/preview EN (English) con configuraciones del Smart CDN que se ajusten a tus requisitos de rendimiento y fiabilidad.
• Trae tu propio CDN: Para despliegues de alto volumen, los clientes pueden aprovechar sus contratos e infraestructura existentes combinando nuestra plataforma de codificación con su propio CDN.

Precios y disponibilidad

🤖/file/preview está disponible en todos los planes, incluido nuestro plan Community gratuito (con marcas de agua). Para uso en producción, consulta nuestra página de precios para ver las tarifas actuales y la documentación del Robot sobre precios EN (English).

Lecturas adicionales

Puede que te interesen nuestros

• Demos EN (English) para hacerte una idea de otras funciones y de cómo puedes combinarlas.
• Smart CDN para saber más sobre cómo entregar archivos, vistas previas y otras conversiones bajo demanda.
• Reduce costos y latencia con las vistas previas de archivos del Smart CDN de Transloadit EN (English), un artículo que detalla cómo integrar las vistas previas y el Smart CDN, y ofrece calculadoras interactivas de latencia y costos.

Próximos pasos

Para empezar, sigue estos pasos:

1. Regístrate para obtener una cuenta de Transloadit.
2. Crea tu primer Template con 🤖/file/preview.
3. Prueba distintas opciones de vista previa e integración con nuestro Template Editor.
4. Integra las vistas previas en tu aplicación.

¿Necesitas ayuda para empezar? ¡Creamos Robots, pero somos personas reales a las que nos encanta echar una mano! No dudes en escribirnos a support@transloadit.com.

Por lo demás, feliz transloading 🙂