Dateien für Webbrowser bereitstellen

🤖/file/serve stellt Dateien für Webbrowser bereit.

// 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)

Anwendungsbeispiel

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

Parameter

• interpolate

  boolean | Record<string, boolean>

  Steuert, ob einzelne Robot-Anweisungsfelder Assembly Variables interpolieren.

  Standardmäßig interpolieren die meisten Robot-Anweisungsfelder Assembly Variables. Mit dem Wert false behandeln Sie alle Anweisungsfelder als Literaltext. Wenn Sie stattdessen einen einzelnen Feldpfad auf false setzen, wird nur dieses Feld als Literaltext behandelt. Bei Feldern eines bestimmten Robots, die standardmäßig als Literaltext behandelt werden, aktivieren Sie die Interpolation wieder, indem Sie hierfür true festlegen oder für den jeweiligen Feldpfad den Wert true verwenden.

  Verwenden Sie Feldnamen wie path oder für verschachtelte Objekte Punktpfade wie ffmpeg.vf als Pfadangabe.

• output_meta

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

  Damit können Sie eine Reihe von Metadaten festlegen, deren Berechnung mehr CPU-Ressourcen beansprucht. Sie sind daher standardmäßig deaktiviert, damit Ihre Assemblies schnell verarbeitet werden.

  Für Bilder können Sie diesem Objekt den Eintrag "has_transparency": true hinzufügen, um zu ermitteln, ob das Bild transparente Bereiche enthält. Mit dem Eintrag "dominant_colors": true können Sie außerdem ein Array mit hexadezimalen Farbcodes aus dem Bild extrahieren.

  Für Bilder können Sie auch den Eintrag "blurhash": true hinzufügen, um einen BlurHash⁠ zu extrahieren – eine kompakte Darstellung eines Platzhalters für das Bild, mit der Sie eine unscharfe Vorschau anzeigen können, während das vollständige Bild geladen wird.

  Für Videos können Sie den Parameter "colorspace": true hinzufügen, um den Farbraum des Ausgabevideos zu extrahieren.

  Für Videos können Sie außerdem den Eintrag "interlaced": true hinzufügen, um zu erkennen, ob das Video im Zeilensprungverfahren vorliegt. Dazu wird die ressourcenschonende ffprobe-Option field_order mit einem begrenzten Stichprobendurchlauf mithilfe von idet über die ersten Frames der Quelle kombiniert. Die Ergebnisse interlaced und field_order sowie das Diagnoseobjekt interlace_detection werden dabei unter file.meta ausgegeben. Dies ist rechenintensiv und wird entsprechend abgerechnet.

  Für Audio können Sie den Eintrag "mean_volume": true hinzufügen, um einen einzelnen Wert für die durchschnittliche Lautstärke der Audiodatei zu erhalten.

  Sie können diesen Parameter auch auf false setzen, um die Metadatenextraktion zu überspringen und das Transcoding zu beschleunigen.

• user_meta

  Record<string, any>(Standard: {})

  Fügt jeder von diesem Robot ausgegebenen Datei benutzerdefinierte Metadaten hinzu, ohne den Dateiinhalt zu verändern.

  Die Werte werden mit allen bereits in der Eingabedatei enthaltenen user_meta zusammengeführt. Wenn beide Objekte denselben Schlüssel enthalten, hat der Wert dieses Robots Vorrang. Assembly Variables werden unterstützt, zum Beispiel { "internal_file_id": "${file.id}" }.

• result

  boolean(Standard: false)

  Ob die Ergebnisse dieses Steps im Assembly Status JSON enthalten sein sollen

• queue

  batch

  Wenn Sie die Queue auf „batch“ setzen, wird die Priorität der Jobs für diesen Step manuell herabgestuft. So vermeiden Sie, Priority Job Slots für Jobs zu belegen, die keine Wartezeit von null in der Queue benötigen.

• force_accept

  boolean(Standard: false)

  Erzwingt, dass ein Robot einen Dateityp akzeptiert, den er sonst ignorieren würde.

  Standardmäßig ignorieren Robots Dateien, deren Typ sie nicht kennen. 🤖/video/encode ignoriert beispielsweise problemlos Eingabebilder.

  Wenn Sie den Parameter force_accept auf true setzen, können Sie erzwingen, dass Robots alle übergebenen Dateien akzeptieren. Dies führt in der Regel zu Fehlern und sollte nur zur Fehlersuche oder zur Behandlung von Grenzfällen verwendet werden.

• ignore_errors

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

  Fehler in bestimmten Verarbeitungsphasen ignorieren.

  Wenn Sie hierfür ["meta"] festlegen, ignoriert der Robot Fehler bei der Metadatenextraktion.

  Wenn Sie hierfür ["execute"] festlegen, ignoriert der Robot Fehler während der Hauptausführungsphase.

  Wenn Sie hierfür true festlegen, entspricht dies ["meta", "execute"] und Fehler in beiden Phasen werden ignoriert.

• use

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

  Gibt an, welche Steps als Eingabe verwendet werden sollen.

  • Sie können beliebige Namen für Steps wählen, außer ":original" (reserviert für von Transloadit verarbeitete Benutzer-Uploads)
  • Sie können mehrere Steps mithilfe von Arrays als Eingabe angeben:

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

  • Sie können Eingabe-Steps außerdem mit as kennzeichnen, um Robots die semantische Funktion zu übermitteln:

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

  Tipp

  Das ist wahrscheinlich alles, was Sie über use wissen müssen. Sie können sich jedoch auch die erweiterten Anwendungsfälle ansehen.

• cache_duration

  string | number

  Eine optionale Dauer in Sekunden, für die die ausgelieferte Datei im Cache gespeichert werden soll. Wenn dieser Wert festgelegt ist, wird er sowohl für die Direktive max-age (Browser-Cache) als auch für die Direktive s-maxage (gemeinsamer/CDN-Cache) im Header Cache-Control verwendet und überschreibt die Standardwerte. Wenn Sie beispielsweise cache_duration auf 43200 setzen, wird die Datei 12 Stunden lang im Cache gespeichert.

  Dies ist hilfreich, um die Datenaufbewahrung in CDNs zu steuern. Wenn Ihre temporären Dateien beispielsweise nach 24 Stunden gelöscht werden, können Sie cache_duration auf 86400 setzen, damit auch im Cache gespeicherte Kopien innerhalb dieses Zeitraums ablaufen.

• headers

  Record<string, string>(Standard: {"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"})

  Ein Objekt mit einer Liste von Headern, die für eine Datei gesetzt werden, wenn wir sie an ein CDN bzw. einen Webbrowser ausliefern, beispielsweise { FileURL: "${file.url_name}" }. Diese Header überschreiben die Standardwerte und können jede verfügbare Assembly Variable enthalten.

  Der Header Accept-Ranges: bytes gibt an, dass HTTP-Range-Requests für die Medienwiedergabe mit freier Navigation auf der Zeitleiste unterstützt werden. Dies setzt voraus, dass alle Storage-Backends von Transloadit (S3, GCS usw.) Range-Request-Header berücksichtigen. Die CORS-Header enthalten Range und If-Range in Access-Control-Allow-Headers, um ursprungsübergreifende Range-Requests zuzulassen. Außerdem stellen sie Content-Range, Content-Length und Accept-Ranges über Access-Control-Expose-Headers bereit, damit JavaScript im Browser diese Werte lesen kann.

Verwandte Blogbeiträge