Aussagekräftige Dateivorschauen erstellen

Kevin van Zonneveld

Mitgründer · Amsterdam, Niederlande · Bio anzeigen

Wir freuen uns, unseren neuen /file/preview-Robot vorzustellen – eine Transloadit-Funktion, die automatisch aussagekräftige Vorschauen für alle Dateitypen erstellt. Ob Sie Video-Thumbnails, Coverbilder oder Waveforms für Audio, Seitenvorschauen von Dokumenten, Website-Screenshots oder Archivsymbole benötigen: Dieser Robot liefert Vorschauen, die Menschen helfen, Dateien schnell zu identifizieren. Wir kümmern uns um die Komplexität der verschiedenen Dateitypen, während Sie sich auf die Entwicklung Ihrer App konzentrieren können.

Der Robot lässt sich mit wenigen Zeilen JSON einbinden und nutzt im Hintergrund intelligente Strategien, um die Kosten niedrig und die Performance hoch zu halten. Sein Einsatz kann die wahrgenommenen Reibungsverluste in Ihrer App drastisch reduzieren und fördert Engagement und Bindung der Nutzer.

Was kann er leisten?

🤖/file/preview EN (English) wurde entwickelt, um aussagekräftige Vorschauen zu erzeugen, die Nutzern helfen, Dateiinhalte schnell zu erkennen. Unterstützt werden:

• Bilder: Optimierte Thumbnails für jedes Bild (sogar RAW: )
• Videos: Einzelbild-Auszüge oder kurze Clips: (oder ein Symbol, wenn Range-Downloads nicht unterstützt werden: )
• Audio: Eingebettetes Coverbild (oder Waveform-Visualisierung, falls nicht vorhanden: )
• Dokumente: Vorschauen der ersten Seite
• Webseiten: Seiten-Screenshots
• Archive: Typspezifische Symbole

Der Robot ist auf Geschwindigkeit und Effizienz ausgelegt und muss kein vollständiges 4 GB großes Video herunterladen, um ein 20 KB großes Thumbnail zu erzeugen. Stattdessen lädt der Robot nur die relevanten Teile des Videos herunter, wodurch er für 99,9 % der Dateien schöne Vorschauen zu sehr geringen Kosten erstellen kann.

Für die verbleibenden 0,1 % der Dateien greift der Robot elegant auf ein typspezifisches Symbol zurück, wie im Archivbeispiel oben.

Der Robot bietet von Haus aus pragmatische und schöne Standardwerte, sein Verhalten lässt sich aber vollständig anpassen. Mehr dazu weiter unten.

Warum Transloadit?

Die Erzeugung von Vorschauen für ein breites Spektrum an Dateien ist aufgrund der riesigen Landschaft an Bildformaten, Video-Codecs und Dokumenttypen komplex. Besonders ausgeprägt ist diese Komplexität bei Nischenkunden, etwa Fotografen, die mit RAW-Bildformaten arbeiten, oder Nutzern, die verschiedene Microsoft-Office-Dokumente verarbeiten. Da sich Bild- und Videoformate ständig weiterentwickeln, muss man kontinuierlich investieren, um Schritt zu halten und die neuesten Formate zu unterstützen. Transloadit unterstützt über 700 verschiedene Dateitypen.

Der Aufbau einer eigenen, internen Lösung zur Erzeugung von Dateivorschauen erfordert erhebliche Entwicklungsressourcen, um auch nur einen Teil der zahlreichen Dateitypen abzudecken, und bindet diese Ressourcen langfristig, da die interne Lösung gepflegt und für neue Formate aktualisiert werden muss. Zudem ist die Verarbeitung von Dateien, die Nutzer hochladen, eine heikle Angelegenheit, die Ihre Infrastruktur anfällig für Schwachstellen in den verschiedenen Werkzeugen zur Dateiverarbeitung machen kann. Ziehen Sie stattdessen in Betracht, die Erzeugung von Dateivorschauen an Transloadit auszulagern. Das schützt Ihre Infrastruktur und ermöglicht es Ihrem Entwicklungsteam, sich auf den bestmöglichen Service für Ihre Kunden zu konzentrieren, während Transloadit den komplexen Teil der Dateivorschauen übernimmt.

🤖/file/preview EN (English) lässt sich mit 94 weiteren Robots kombinieren, um Workflows zu erstellen, die einzigartig für Ihr Unternehmen sind, und diese Workflows können jeden Teil Ihrer Datei-Pipeline transformieren. Transloadit kann direkt mit den Uploads Ihrer Endnutzer arbeiten, große Medienbibliotheken importieren oder Dateien sogar on demand konvertieren und optimierte Ergebnisse mithilfe unseres Smart CDN direkt an Browser streamen.

Implementierungsoptionen

Es gibt mehrere Möglichkeiten, 🤖/file/preview einzusetzen. Am besten beginnen Sie damit, ein Template zu erstellen, das diesen Robot referenziert. Ein Template ist ein JSON-Rezept in Ihrem Konto, das beschreibt, was Transloadit mit Ihren Dateien tun soll. Sie können ein Template im Template Editor in Ihrem Konto erstellen oder über unser Terraform Provider Plugin.

Vorverarbeitung

Bei der Vorverarbeitung erzeugen Sie die Vorschauen und speichern sie in Ihrem Speicher. Das geschieht typischerweise, wenn die Datei zum ersten Mal vom Nutzer hochgeladen wird, lange bevor Ihr Endnutzer eine Vorschau anfordert. Eine solche Vorverarbeitung kann Latenz bei der ersten Anfrage sparen, geht aber mit höheren Encoding- und Storage-Kosten sowie einer komplexeren Integration als on demand einher.

Transloadit kann die Uploads der Originale entgegennehmen, Vorschauen erzeugen und diese dann in Ihrem Speicher ablegen. Damit Transloadit Uploads verarbeitet, referenzieren Sie 🤖/upload/handle wie folgt in Ihrem Template:

{
  "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/"
    }
  }
}

Die Uploads kommen typischerweise aus Browsern (etwa über Uppy⁠), aber auch Backend-SDKs können Dateien hochladen.

Sehen wir uns zunächst den Browser-Anwendungsfall genauer an.

Frontend-Uploads

Transloadit kann Browser-Uploads entgegennehmen, die Endnutzer mithilfe von Uppy⁠ durchführen, unserem Open-Source-Dateiuploader für Webbrowser. Beim Annehmen von Dateien folgt Transloadit den Instructions des Templates, erzeugt also Vorschauen und speichert sie in Ihrem S3-Bucket. Die Originale werden ebenfalls gespeichert, denn im Step "stored" hatten wir: "use": ["previewed", ":original"].

Hier ist der Browser-Code, den Sie verwenden würden:

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 wurde von Transloadit entwickelt und ist zum Open-Source-Dateiuploader Nummer eins für Webbrowser geworden. Es bietet mehr Funktionen, als in diesen Beitrag passen. Weitere Informationen finden Sie daher auf der Uppy-Website⁠.

Es gibt außerdem SDKs für Android und iOS, falls Sie native mobile Apps anbinden möchten.

Backend-Uploads

Auch Backends können Dateien zu Transloadit hochladen. So würde das in Node.js aussehen:

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

Es gibt SDKs für viele weitere Backend-Sprachen, die die Integration erleichtern, aber Sie können auch direkt mit unserer REST API arbeiten.

Importe

Statt Transloadit die Uploads übernehmen zu lassen, kann Transloadit Dateien aus Cloud-Quellen wie S3 importieren, Vorschauen erzeugen und sie zurück nach S3 oder zu anderen Storage-Anbietern exportieren. Das ist für eine einzelne Datei möglich oder für ganze Buckets mit vielen Terabyte an Dateien.

Als Beispiel fügen wir dem folgenden Template außerdem 🤖/file/filter hinzu, um zu zeigen, wie Sie nach Dateityp filtern können und in diesem Fall nur Vorschauen für Audiodateien erzeugen. Das lässt sich anpassen, um nach anderen Eigenschaften zu filtern, etwa Dateigröße, Bitrate, Medientyp usw. Hier ist das vollständige Template, das Sie im Template Editor in Ihrem Konto erstellen würden:

{
  "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/"
    }
  }
}

Sie können dieses Template mit jedem unserer SDKs referenzieren und ausführen. In Node.js würde das so aussehen:

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

On-Demand

Schließlich können Sie Vorschauen auch on demand mit unserem Smart CDN erzeugen. Das bedeutet: Transloadit wird erst tätig, wenn ein Nutzer die Vorschau anfordert. Transloadit importiert dann die Originaldatei aus Ihrem Speicher, erzeugt die Vorschau und liefert sie direkt an den Endnutzer aus. Wir cachen das Ergebnis in der Nähe des Endnutzers.

Das hat folgende Vorteile:

• Die Vorschau wird nur erzeugt, wenn Nutzer sie anfordern. Das spart Kosten für Mediendateien, die tatsächlich nicht angefordert werden.
• Das Ergebnis wird automatisch in Rechenzentren in der Nähe Ihrer Nutzer zwischengespeichert, sodass dieselbe Vorschau beim nächsten Abruf noch schneller und ohne Encoding-Gebühren ausgeliefert wird.
• Die Integration ist einfacher, da Sie die Vorschauen nicht selbst verarbeiten müssen (speichern, Referenzen ablegen usw.). Stattdessen erstellen Sie einfach ein Template und fügen Ihrer Webseite oder App eine Smart CDN URL für das Asset hinzu.
• Sie können die Vorschau auf Gerät, Auflösung, Bandbreite usw. des Endnutzers zuschneiden. So verschwenden Sie keine Bytes bei einer Auslieferung, die keine bessere Nutzererfahrung bringt. Das spart Bandbreite, Akku und Zeit.

Wenn Sie mehr über die Abwägungen zwischen On-Demand und Vorverarbeitung erfahren und interaktive Kosten- und Latenzberechnungen durchführen möchten, lesen Sie unseren Beitrag: Kosten & Latenz mit den Smart CDN Dateivorschauen von Transloadit senken EN (English).

Hier ist ein Beispiel-Template, das Transloadit anweist, ein Bild aus S3 zu importieren, eine Vorschau zu erzeugen und sie mit unserem Smart CDN auszuliefern:

{
  "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"
    }
  }
}

Und die Integration ist so einfach wie das Hinzufügen einer URL zu Ihrer Webseite:

In diesem Beispiel ist my-template der Name des Templates, das wir oben erstellt haben, ${fields.input} wird durch /file.mp4 ersetzt und ${fields.w} durch 300, beide aus der URL.

Die Vorschau anpassen

🤖/file/preview bietet zwar von Haus aus pragmatische und schöne Standardwerte, doch Sie können seine Ausgabe mithilfe mehrerer Parameter steuern, damit sie zum Look and Feel Ihrer App passt:

• format: Ausgabeformat für das Thumbnail ("jpg", "png" oder "gif")
• width und height: Abmessungen in Pixeln (1-5000)
• resize_strategy: Wie die Vorschau in die Abmessungen eingepasst wird (Standard: "pad")
• background: Hintergrundfarbe für die Auffüllung im Hex-Format (#rrggbb[aa])
• strategy: Vorschauerzeugung je Dateityp anpassen (Audio, Video, Bild usw.)

Für Audio-Waveforms:

• waveform_center_color und waveform_outer_color: Verlaufsfarben im Hex-Format
• waveform_height und waveform_width: Abmessungen der Waveform

Für Symbole:

• icon_style: "with-text" (Standard) oder "square"
• icon_text_color: Textfarbe im Hex-Format
• icon_text_font: Schriftfamilie (z. B. "Roboto")
• icon_text_content: Textinhalt ("extension" oder "none")

Für Videoclips:

• clip_format: Animationsformat ("webp", "apng", "avif" oder "gif")
• clip_offset: Startposition in Sekunden
• clip_duration: Länge in Sekunden
• clip_framerate: Bilder pro Sekunde (1-60)
• clip_loop: Ob die Animation in Schleife laufen soll

Für die Bildoptimierung:

• optimize: Optimierung der Dateigröße aktivieren
• optimize_priority: "conversion-speed" oder "compression-ratio"
• optimize_progressive: Progressives Laden aktivieren

Weitere Informationen finden Sie in der Dokumentation zu 🤖/file/preview EN (English).

Sicherheitsaspekte

Um Ihre Dateien zu schützen und den Zugriff auf die Vorschaufunktion zu steuern, empfehlen wir, für Frontend-Integrationen (Uppy, Smart CDN, Mobile) eine Signierung der Anfragen zu implementieren. Insbesondere für die Auslieferung über das Smart CDN sollten Sie signierte Smart CDN URLs verwenden, damit nur autorisierte Nutzer neue Varianten Ihrer Dateien erzeugen können.

Ausführliche Informationen samt Beispielen in vielen Programmiersprachen finden Sie in unserer Dokumentation zu signierten Smart CDN URLs.

Denken Sie daran:

• Erzeugen Sie signierte URLs immer in Ihrem Backend,
• geben Sie Ihr Auth Secret niemals in clientseitigem Code preis und
• implementieren Sie eine Ablaufzeit für Ihre signierten URLs.

Kürzere Ablaufzeiten verkleinern das Replay-Fenster, während längere Ablaufzeiten die Cache-Wiederverwendung verbessern und Umfang sowie Latenz der Vorschauerzeugung reduzieren können.

Fortgeschrittene Anwendungsfälle

Dieser Beitrag behandelt zwar die grundlegenden Wege, 🤖/file/preview zu nutzen, doch es gibt viele Möglichkeiten, ihn in komplexere Pipelines zu integrieren:

• Automatisierte Batch-Erzeugung: Planen Sie die Vorschauerzeugung für ganze Storage-Buckets, um Vorschauen im großen Maßstab aktuell zu halten.
• Ereignisgesteuerte Integrationen: Stoßen Sie die Vorschauverarbeitung automatisch an, sobald neue Dateien eintreffen, damit Vorschauen immer bereitstehen, wenn sie gebraucht werden.
• Hybride Workflows zusammenstellen: Kombinieren Sie 🤖/file/preview EN (English) mit 94 weiteren Transloadit Robots, etwa 🤖/image/facedetect oder 🤖/video/encode, um mehrstufige Transformationen in einem einzigen Workflow zu erstellen.
• Erweiterte Storage-Optionen: Über AWS S3 hinaus können Sie nahtlos alle großen Cloud-Storage-Anbieter sowie Ihre eigene Infrastruktur anbinden (S3-kompatibler Storage oder SFTP).
• Anpassbares Caching: Kombinieren Sie 🤖/file/preview EN (English) mit Smart CDN Konfigurationen, die zu Ihren Anforderungen an Performance und Zuverlässigkeit passen.
• Eigenes CDN mitbringen: Bei hohem Volumen können Kunden bestehende Verträge und Infrastruktur nutzen, indem sie unsere Encoding-Plattform mit ihrem eigenen CDN kombinieren.

Preise & Verfügbarkeit

🤖/file/preview ist in allen Tarifen verfügbar, einschließlich unseres kostenlosen Community-Tarifs (mit Wasserzeichen). Für den Produktiveinsatz finden Sie aktuelle Preise auf unserer Preisseite sowie in der Preisdokumentation des Robots EN (English).

Weiterführende Lektüre

Vielleicht interessieren Sie sich auch für

• Demos EN (English), um einen Eindruck von weiteren Funktionen zu bekommen und davon, wie Sie sie kombinieren können.
• Smart CDN, um mehr darüber zu erfahren, wie Sie Dateien, Vorschauen und andere Konvertierungen on demand ausliefern.
• Kosten & Latenz mit den Smart CDN Dateivorschauen von Transloadit senken EN (English): Dieser Beitrag beschreibt, wie Sie Vorschauen und das Smart CDN integrieren, und bietet interaktive Latenz- & Kostenrechner.

Nächste Schritte

So legen Sie los:

1. Registrieren Sie sich für ein Transloadit-Konto.
2. Erstellen Sie Ihr erstes Template mit 🤖/file/preview.
3. Testen Sie verschiedene Vorschau- und Integrationsoptionen mit unserem Template Editor.
4. Integrieren Sie Vorschauen in Ihre Anwendung.

Brauchen Sie Hilfe beim Einstieg? Wir bauen Robots, aber wir sind echte Menschen, die gerne helfen! Melden Sie sich einfach bei uns unter support@transloadit.com.

Ansonsten: viel Spaß beim Transloading 🙂