# Dateien für Webbrowser bereitstellen

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

![/file/serve Robot](/assets/images/robots/240x240/file-serve.png)

Wenn Transloadit Dateien dynamisch transformieren soll, können Sie mit diesem Robot festlegen, welcher Step in einem Template über ein CDN an die Endbenutzer ausgeliefert werden soll. Außerdem können Sie zusätzliche Informationen für die ausgelieferten Dateien festlegen, etwa Header. So können Sie dem CDN beispielsweise vorgeben, wie lange zwischengespeicherte Kopien des Ergebnisses aufbewahrt werden sollen. Standardmäßig weisen wir Browser an, das Ergebnis für 72h (`259200` Sekunden) zwischenzuspeichern, und CDNs, den Inhalt für 24h (`86400` Sekunden) zwischenzuspeichern. Verwenden Sie den Parameter `cache_duration`, um beide Werte gleichzeitig anzupassen.

🤖/file/serve dient lediglich als Glue-Code zwischen unserer Assembly-Engine und der Dateiauslieferung über HTTP. Damit können Sie über den Parameter `use` das passende Ergebnis aus einer Reihe von Steps auswählen und Header für den ursprünglichen Inhalt konfigurieren. Damit endet seine Zuständigkeit. Anschließend übernimmt 🤖/tlcdn/deliver die weltweite Verteilung dieses ursprünglichen Inhalts und sorgt dafür, dass er nahe bei Ihren Endbenutzern zwischengespeichert wird, wenn diese Anfragen wie [https://my-app.tlcdn.com/resize-img/canoe.jpg?w=500⁠](https://my-app.tlcdn.com/resize-img/canoe.jpg?w=500) stellen. 🤖/tlcdn/deliver ist kein Bestandteil Ihrer Assembly Instructions, kann jedoch auf Ihren Rechnungen erscheinen, da bei der Verteilung der zwischengespeicherten Kopien Bandbreitenkosten anfallen. Kosten für 🤖/file/serve entstehen nur, wenn das CDN keine zwischengespeicherte Kopie besitzt und die erneute Erzeugung des ursprünglichen Inhalts anfordert. Abhängig von Ihren Cache-Einstellungen kann dies pro Datei und Transformation nur einmal im Monat oder Jahr geschehen.

Obwohl es theoretisch möglich ist, [🤖/file/serve](/de/docs/robots/file-serve.md) direkt in HTML-Dateien zu verwenden, raten wir dringend davon ab. Wenn Ihre Website populär wird und die von /file/serve verarbeitete Medien-URL eine Million Mal aufgerufen wird, führt dies zu einer Million neuer Bildgrößenänderungen. Wenn Sie ein CDN davorschalten, sorgt das damit verbundene Caching sowohl für niedrige Encoding-Kosten als auch für geringe Latenzen.

Konfigurieren Sie außerdem Caching-Header und Cache-Control-Direktiven, um zu steuern, wie Inhalte auf den CDN-Edge-Servern zwischengespeichert und invalidiert werden, und dabei Aktualität und Effizienz auszubalancieren.

## Smart-CDN-Sicherheit mit signierten URLs

Mit [signierten Smart-CDN-URLs](/de/docs/api/authentication.md#smart-cdn) können Sie den Missbrauch unserer Encoding-Plattform verhindern. Nachfolgend finden Sie ein kurzes Node.js-Beispiel mit unserem Node SDK. Außerdem stehen [Beispiele für andere Sprachen und SDKs](/de/docs/api/authentication.md#example-code) zur Verfügung.

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

```

Dadurch wird eine signierte Smart-CDN-URL mit Authentifizierungsparametern erzeugt, die unbefugten Zugriff auf Ihre Transformationsendpunkte verhindert.

Verwenden Sie für neue Integrationen das moderne Format `sig` + `exp`. Veraltete Signaturen im Format `s` werden nicht mehr empfohlen. Beachten Sie außerdem, dass das Ablaufzeitfenster dem praktischen Cache-Zeitfenster für signierte Ergebnisse entspricht: Kürzere Ablaufzeiten verschärfen die Zugriffskontrolle, während längere Ablaufzeiten die Wiederverwendung des Caches verbessern und das Encoding-Volumen reduzieren.

## Weitere Informationen

* [Inhaltsauslieferung](/de/services/content-delivery.md)
* Preise für [🤖/file/serve](/de/docs/robots/file-serve.md)
* Preise für [🤖/tlcdn/deliver](/de/docs/robots/tlcdn-deliver.md)
* Blogbeitrag zur [Dateivorschau-Funktion EN (English)](/blog/2024/06/file-preview-with-smart-cdn.md)

<span aria-hidden="true" id="usage-example"></span>

## Anwendungsbeispiel

Transformierte Dateien mit expliziter Cache-Dauer für Browser und CDN ausliefern:

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

<span aria-hidden="true" id="parameters"></span>

## Parameter

* <span aria-hidden="true" id="interpolate"></span>

### `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.

* <span aria-hidden="true" id="output_meta"></span>

### `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⁠](https://blurha.sh) 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.

* <span aria-hidden="true" id="user_meta"></span>

### `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}" }`.

* <span aria-hidden="true" id="result"></span>

### `result`

`boolean`(Standard: `false`)\
Ob die Ergebnisse dieses Steps im Assembly Status JSON enthalten sein sollen

* <span aria-hidden="true" id="queue"></span>

### `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.

* <span aria-hidden="true" id="force_accept"></span>

### `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](/de/docs/robots/video-encode.md) 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.

* <span aria-hidden="true" id="ignore_errors"></span>

### `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.

* <span aria-hidden="true" id="use"></span>

### `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:

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

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

```json
{  
  "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](/de/docs/topics/use-parameter.md) ansehen.

* <span aria-hidden="true" id="cache_duration"></span>

### `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.

* <span aria-hidden="true" id="headers"></span>

### `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](/de/docs/topics/assembly-instructions.md#assembly-variables) 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.

<span aria-hidden="true" id="related-blog-posts"></span>

## Verwandte Blogbeiträge

* [Building an alt-text to speech generator with Transloadit EN (English)](/blog/2022/05/image-tts.md) 9. Mai 2022
* [Easy instant website screenshots via Transloadit CDN EN (English)](/blog/2022/05/website-preview.md) 11. Mai 2022
* [Smart CDN enhanced with AI-powered face detection EN (English)](/blog/2022/06/image-facedetect-cdn-support.md) 21. Juni 2022
* [So starten Sie mit dem Transloadit Smart CDN](/de/blog/2024/02/getting-started-with-tlcdn.md) 16. Februar 2024
* [Kosten sparen mit On-Demand-Video-Encoding](/de/blog/2025/05/on-demand-video-encoding.md) 5. Mai 2025
