Servir archivos a navegadores web

🤖/file/serve sirve archivos a navegadores web.

// yarn add transloadit
// or
// npm install --save transloadit

import { Transloadit } from 'transloadit'

const transloadit = new Transloadit({
  authKey: 'YOUR_TRANSLOADIT_KEY',
  authSecret: 'YOUR_TRANSLOADIT_SECRET',
})

const url = transloadit.getSignedSmartCDNUrl({
  workspace: 'YOUR_WORKSPACE',
  template: 'YOUR_TEMPLATE',
  input: 'image.png',
  urlParams: { height: 100, width: 100 },
})

console.log(url)

Ejemplo de uso

{
  "steps": {
    "resized": {
      "robot": "/image/resize",
      "use": ":original",
      "width": 800,
      "height": 450,
      "resize_strategy": "fit"
    },
    "served": {
      "robot": "/file/serve",
      "use": "resized",
      "cache_duration": 86400
    }
  }
}

Parámetros

• interpolate

  boolean | Record<string, boolean>

  Controla si las Assembly Variables se interpolan en campos de instrucciones individuales.

  De forma predeterminada, la mayoría de los campos de instrucciones de los Robots interpolan Assembly Variables. Establece esta opción en false para tratar todos los campos de instrucciones como texto literal, o establece la ruta de un campo individual en false para tratar únicamente ese campo como texto literal. En el caso de los campos específicos de un Robot que son literales de forma predeterminada, establece esta opción en true o la ruta de ese campo en true para volver a habilitar la interpolación.

  Usa nombres de campos como path o rutas con puntos como ffmpeg.vf para los objetos anidados.

• output_meta

  Record<string, boolean> | boolean | Array<string>

  Te permite especificar un conjunto de metadatos cuyo cálculo requiere más recursos de CPU y que, por lo tanto, está desactivado de forma predeterminada para que tus Assemblies se procesen rápidamente.

  Para imágenes, puedes añadir "has_transparency": true a este objeto para determinar si la imagen contiene partes transparentes y "dominant_colors": true para extraer un array de códigos de color hexadecimales de la imagen.

  Para imágenes, también puedes añadir "blurhash": true para extraer una cadena BlurHash⁠, una representación compacta de un marcador de posición para la imagen que resulta útil para mostrar una vista previa desenfocada mientras se carga la imagen completa.

  Para videos, puedes añadir el parámetro "colorspace": true para extraer el espacio de color del video de salida.

  Para videos, también puedes añadir "interlaced": true para detectar si el video está entrelazado. Esto combina el indicador field_order de ffprobe, cuyo costo en recursos de procesamiento es bajo, con una pasada de muestreo limitada mediante idet sobre los primeros fotogramas de la fuente, y expone interlaced, field_order y un objeto de diagnóstico interlace_detection en file.meta. Esto requiere muchos recursos computacionales y se factura en consecuencia.

  Para audio, puedes añadir "mean_volume": true para obtener un único valor que represente el volumen promedio del archivo de audio.

  También puedes establecerlo en false para omitir la extracción de metadatos y acelerar la transcodificación.

• user_meta

  Record<string, any>(valor predeterminado: {})

  Añade metadatos personalizados a cada archivo emitido por este Robot sin modificar el contenido del archivo.

  Los valores se combinan con los user_meta existentes en el archivo de entrada. Si ambos objetos contienen la misma clave, el valor de este Robot tiene prioridad. Se admiten Assembly Variables, por ejemplo { "internal_file_id": "${file.id}" }.

• result

  boolean(valor predeterminado: false)

  Indica si los resultados de este Step deben aparecer en el Assembly Status JSON

• queue

  batch

  Establecer la cola en «batch» reduce manualmente la prioridad de los Jobs de este Step para evitar consumir cupos prioritarios con Jobs que no necesitan un tiempo de espera cero en la cola

• force_accept

  boolean(valor predeterminado: false)

  Forzar a un Robot a aceptar un tipo de archivo que habría ignorado.

  De forma predeterminada, los Robots ignoran los archivos que no reconocen. 🤖/video/encode, por ejemplo, ignorará sin problemas las imágenes de entrada.

  Si configuras el parámetro force_accept como true, puedes forzar a los Robots a aceptar todos los archivos que reciban. Esto normalmente provocará errores y solo debe usarse para depuración o para abordar casos extremos.

• ignore_errors

  boolean | Array<meta | execute>(valor predeterminado: [])

  Ignorar errores durante fases específicas del procesamiento.

  Establecer este parámetro en ["meta"] hará que el Robot ignore los errores durante la extracción de metadatos.

  Establecer este parámetro en ["execute"] hará que el Robot ignore los errores durante la fase principal de ejecución.

  Configurar este parámetro como true equivale a ["meta", "execute"] y hará que se ignoren los errores en ambas fases.

• use

  string | Array<string> | Array<object> | object

  Especifica qué Step o Steps se usarán como entrada.

  • Puedes elegir cualquier nombre para los Steps, excepto ":original" (reservado para las subidas de usuarios gestionadas por Transloadit)
  • Puedes proporcionar varios Steps como entrada mediante arrays:

    {
      "use": [
        ":original",
        "encoded",
        "resized"
      ]
    }
    

  • También puedes etiquetar los Steps de entrada con as para comunicar la intención semántica a los Robots:

    {
      "use": [
        {
          "name": ":original",
          "as": "image"
        },
        {
          "name": ":original",
          "as": "mask"
        }
      ]
    }
    

  Consejo

  Probablemente eso sea todo lo que necesitas saber sobre use, pero puedes consultar los casos de uso avanzados.

• cache_duration

  string | number

  Una duración opcional, en segundos, durante la cual el archivo servido debe almacenarse en caché. Cuando se establece, este valor se usa tanto para la directiva max-age (caché del navegador) como para la directiva s-maxage (caché compartida o de CDN) en el encabezado Cache-Control, lo que anula los valores predeterminados. Por ejemplo, establecer cache_duration en 43200 almacenaría el archivo en caché durante 12 horas.

  Esto es útil para controlar la retención de datos en las CDN. Por ejemplo, si tus archivos temporales se eliminan después de 24 horas, puedes establecer cache_duration en 86400 para garantizar que las copias almacenadas en caché también caduquen dentro de ese plazo.

• headers

  Record<string, string>(valor predeterminado: {"Access-Control-Allow-Headers":"X-Requested-With, Content-Type, Cache-Control, Accept, Content-Length, Transloadit-Client, Authorization, Range, If-Range","Access-Control-Allow-Methods":"POST, GET, PUT, DELETE, OPTIONS","Access-Control-Allow-Origin":"*","Access-Control-Expose-Headers":"Transloadit-Assembly-URL, Content-Range, Content-Length, Accept-Ranges","Cache-Control":"public, max-age=259200, s-maxage=86400","Content-Type":"${file.mime}; charset=utf-8","Transloadit-Assembly":"…","Transloadit-RequestID":"…","Accept-Ranges":"bytes"})

  Un objeto que contiene una lista de encabezados que se establecerán para un archivo cuando lo entreguemos a una CDN o un navegador web, como { FileURL: "${file.url_name}" }. Estos encabezados se combinarán con los valores predeterminados y pueden incluir cualquier Assembly Variable disponible.

  El encabezado Accept-Ranges: bytes indica que se admiten solicitudes de rango HTTP para desplazarse por la línea de tiempo durante la reproducción de contenido multimedia. Esto depende de que todos los backends de almacenamiento de Transloadit (S3, GCS, etc.) respeten los encabezados de solicitud Range. Los encabezados CORS incluyen Range y If-Range en Access-Control-Allow-Headers para permitir solicitudes de rango entre orígenes, y exponen Content-Range, Content-Length y Accept-Ranges mediante Access-Control-Expose-Headers para que el código JavaScript del navegador pueda leer estos valores.

Publicaciones relacionadas del blog