Aperçus de médias à la demande avec Smart CDN

Kevin van Zonneveld

Cofondateur · Amsterdam, Pays-Bas · Afficher la bio

Un navigateur de fichiers a rarement besoin de télécharger une vidéo entière simplement pour montrer ce qu’elle contient. Une vignette, une forme d’onde audio ou une icône de type de fichier peut fournir ce contexte avec une réponse bien plus légère.

Le Robot /file/preview EN (English) génère ces aperçus. Smart CDN peut exécuter le flux de traitement lorsqu’un aperçu est demandé et mettre le résultat en cache. Cet article associe une démo fonctionnelle, un Template restreint et la signature d’URL côté serveur.

Qu’est-ce que le Smart CDN de Transloadit ?

Smart CDN relie une URL de diffusion à une Assembly Transloadit. Lorsque le résultat est absent du cache, Transloadit importe la source, exécute le Template et sert le résultat. Une requête ultérieure peut réutiliser un dérivé mis en cache tant qu’il reste disponible et peut être mis en cache.

Une réponse servie depuis un cache chaud et une absence en cache n’ont pas le même coût ni la même latence. L’emplacement de la source, le format de fichier, la stratégie d’aperçu, la durée de vie du cache et le profil des requêtes comptent tous. Nos mesures de performances publiées décrivent une configuration de test particulière, pas une garantie de latence pour chaque fichier.

Qu’est-ce que la fonctionnalité d’aperçu de fichiers ?

Le Robot essaie les stratégies d’aperçu configurées pour chaque catégorie de fichiers. Par exemple, il peut rechercher une image de couverture intégrée avant d’extraire une image de la vidéo. Une icône peut servir de solution de repli finale lorsqu’aucun aperçu plus riche n’est disponible. La référence du Robot EN (English) fait foi pour les formats pris en charge, l’ordre des stratégies, les limites et les paramètres.

Fonctionnalités clés

• Les images peuvent devenir des vignettes redimensionnées.
• Les vidéos peuvent utiliser une image de couverture, une image extraite ou d’autres stratégies vidéo prises en charge.
• L’audio peut utiliser une image de couverture ou une forme d’onde.
• Les documents peuvent utiliser une page rendue.
• Les pages web peuvent utiliser une capture d’écran.
• Les archives et les contenus non pris en charge peuvent utiliser une icône lorsque cette solution de repli est configurée.

Il s’agit d’aperçus, pas de rendus complets de l’original. Une forme d’onde n’est pas un lecteur audio, et une vignette n’est pas un téléchargement de la vidéo. Testez vos propres formats et prévoyez une solution de repli utilisable en cas d’échec.

Avantages des aperçus de fichiers

Générer les aperçus à la demande peut éviter du travail pour les fichiers que personne ne consulte. La mise en cache peut réduire les traitements répétés, et des réponses plus légères peuvent réduire la bande passante de diffusion. Le prétraitement reste utile lorsque chaque fichier a besoin d’un aperçu avant publication ou lorsqu’un délai de traitement à la première consultation est inacceptable.

Les économies dépendent de la charge de travail. Un aperçu peut même être plus volumineux qu’une toute petite image source, mesurez donc les octets livrés plutôt que de supposer un pourcentage de réduction fixe.

Démo interactive

La démo utilise quatre fichiers d’exemple publics. Elle ne récupère un aperçu que lorsque vous envoyez le formulaire. Elle ne téléverse pas vos fichiers, ne récupère pas la vidéo ou l’audio d’origine dans votre navigateur et n’exécute aucune recherche de métadonnées d’Assembly.

La démo publique s’exécute sur le Workspace my-app de Transloadit avec un Template existant qui accepte w, h, f, r, vs et v. L’exemple de production ci-dessous utilise un Template distinct, plus restreint, qui n’accepte que size comme champ de requête.

Comment utiliser la démo

Choisissez une source, des dimensions et un format. Sélectionnez l’option Stratégie de redimensionnement, puis sélectionnez Générer l’aperçu. Les modifications au clavier et au toucher utilisent la même action d’envoi. L’URL et les mesures affichées correspondent au dernier résultat envoyé, et non aux réglages que vous avez modifiés sans les envoyer.

Le temps de récupération observé inclut la réception du corps de l’aperçu dans votre navigateur. Il s’agit d’une observation ponctuelle, pas d’un banc d’essai contrôlé à cache froid ou à cache chaud. La mise en cache du navigateur, votre connexion et le traitement peuvent tous l’influencer.

La comparaison de diffusion est une estimation distincte : elle applique un même prix de bande passante choisi et un même nombre de requêtes aux deux fichiers. Elle exclut le traitement, le stockage, les frais de requête, les abonnements, les taxes et les nouvelles tentatives. Il ne s’agit pas d’une comparaison de factures complètes de Transloadit et d’AWS. Télécharger une vidéo d’origine n’équivaut pas non plus à afficher un aperçu statique.

Comment démarrer

1. S’inscrire sur Transloadit

Créez un compte et consultez les forfaits et limites actuels.

2. Créer un Workspace

Les exemples utilisent le Workspace fictif your-workspace. Remplacez-le par votre propre Workspace lorsque vous créez des URL. Le Workspace de la démo publique est distinct de votre compte.

3. Créer un Template

Créez un Template nommé preview. Cette version fixe délibérément le format de sortie et la stratégie de redimensionnement, et n’accepte qu’un seul champ de taille. Remplacez my-website.com par une origine HTTPS que vous contrôlez. Publiez-y les deux fichiers d’exemple utilisés ci-dessous, ou modifiez la table de correspondance des fichiers gérée par le serveur pour utiliser vos propres noms d’objets immuables.

{
  "steps": {
    "imported": {
      "robot": "/http/import",
      "url": "https://my-website.com/${fields.input}"
    },
    "previewed": {
      "robot": "/file/preview",
      "use": "imported",
      "format": "png",
      "width": "${fields.size}",
      "height": "${fields.size}",
      "resize_strategy": "fit",
      "zoom": false
    },
    "served": {
      "robot": "/file/serve",
      "use": "previewed",
      "cache_duration": 3600
    }
  }
}

Le programme de signature ci-dessous n’autorise que trois tailles et deux entrées connues. Le Template seul n’applique pas cette liste d’autorisation. Définissez require_signature_auth sur 1 via l’API des Templates, en tant qu’attribut du Template en dehors de steps. Vérifiez que les requêtes non signées et altérées sont rejetées avant de le publier. N’exposez pas d’URL d’import arbitraire ni de point de terminaison de transformation générique.

4. Utiliser le Smart CDN

La structure d’URL non signée pour ce Template est la suivante :

https://your-workspace.tlcdn.com/preview/photo-v1.jpg?size=320

Le chemin identifie le Workspace, le Template et l’entrée. L’entrée devient ${fields.input}, et la chaîne de requête fournit ${fields.size}. Cet exemple structurel n’est pas un jeton d’autorisation utilisable. Utilisez l’URL signée renvoyée par le programme côté serveur de la section suivante.

Versionnez les noms des fichiers sources lorsque vous modifiez leur contenu, par exemple photo-v2.jpg. Remplacer un objet portant le même nom ne fait pas disparaître immédiatement tous les dérivés en cache.

5. Mettre en place des mesures de sécurité

Utilisez l’Auth Key du Workspace activée pour Smart CDN, ainsi que son Auth Secret. Ce dernier doit rester sur le serveur. Configurez les variables d’environnement via votre processus habituel de gestion des secrets, et non dans un bundle navigateur ou un fichier versionné.

Il s’agit d’une CLI destinée à un opérateur de confiance, pas d’une implémentation d’authentification HTTP. Elle signe une petite liste d’autorisation gérée par le serveur sans effectuer de requête réseau. Utilisez Node.js 24 ou une version plus récente et installez le SDK officiel :

yarn add @transloadit/node@4.12.0

Enregistrez ce code sous sign-preview.mjs :

import { Transloadit } from '@transloadit/node'

const inputs = new Map([
  ['photo', 'photo-v1.jpg'],
  ['audio', 'audio-v1.mp3'],
])
const sizes = new Set(['160', '320', '640'])

function main() {
  const [name, size, ...extra] = process.argv.slice(2)
  const input = inputs.get(name)
  if (!input || !sizes.has(size) || extra.length !== 0) {
    throw new Error('Expected one known file name and preview size')
  }
  const authKey = process.env.TRANSLOADIT_AUTH_KEY
  const authSecret = process.env.TRANSLOADIT_AUTH_SECRET
  const workspace = process.env.TRANSLOADIT_WORKSPACE
  if (!authKey || !authSecret || !workspace || !/^[a-z0-9-]+$/.test(workspace)) {
    throw new Error('Missing or invalid server configuration')
  }
  const client = new Transloadit({ authKey, authSecret })
  const url = client.getSignedSmartCDNUrl({
    workspace,
    template: 'preview',
    input,
    urlParams: { size: Number(size) },
    expiresAt: Date.now() + 60 * 60 * 1000,
  })
  process.stdout.write(url + '\n')
}

try {
  main()
} catch {
  console.error('Could not sign preview. Check the file, size, and server configuration.')
  process.exitCode = 1
}

Une fois ces trois variables d’environnement configurées, exécutez :

node sign-preview.mjs photo 320

La sortie est une URL au porteur : toute personne qui l’obtient peut l’utiliser pendant sa durée de validité. Ne la placez pas dans des outils d’analyse, des rapports d’erreurs ou des journaux publics. Cet exemple l’affiche volontairement pour l’opérateur ; une application ne devrait la transmettre qu’au demandeur autorisé.

Pour un point de terminaison applicatif, authentifiez d’abord l’utilisateur, résolvez un identifiant de ressource via votre base de données et vérifiez l’accès à cette ressource précise avant de signer. Limitez les variantes autorisées et les taux d’émission. Ne considérez pas la connaissance d’un nom de fichier comme une preuve d’autorisation, et n’acceptez pas d’origines, de Templates, de signatures ou de dates d’expiration fournis par l’appelant.

Le SDK génère la signature et les paramètres de requête d’authentification. L’expiration est exprimée en millisecondes depuis l’epoch UNIX. Ici, elle est définie explicitement à une heure. La durée de vie effective du cache est également limitée par la durée de validité restante de la signature ; choisissez-la en fonction de la sensibilité du contenu et des besoins de mise en cache. Consultez la section Signature et durée de vie du cache pour connaître le contrat actuel.

6. Personnaliser le comportement

Ajoutez des paramètres de manière réfléchie après les avoir validés sur votre serveur. Limitez le nombre de combinaisons autorisées pour maîtriser le nombre de dérivés et le coût. Consultez les stratégies de redimensionnement et la référence des stratégies d’aperçu EN (English).

Pour les contenus sensibles ou soumis par les utilisateurs, examinez l’accès aux imports, les limites de traitement et ce qu’un aperçu peut révéler. Une vignette ou une page extraite peut aussi contenir des informations privées.

Utiliser votre propre stockage

Utilisez le Robot d’import approprié et des informations d’identification de Template pour un stockage cloud privé. Conservez les informations d’identification du stockage dans cette configuration côté serveur. Ne placez ni informations d’identification de bucket ni URL source présignée arbitraire dans un lien d’aperçu public.

Utiliser votre propre CDN

Un CDN existant nécessite une configuration réfléchie de l’origine, des clés de cache, de la signature et de la gestion des erreurs. Contactez-nous au sujet des options d’intégration actuelles adaptées à votre charge de travail. Ne supposez pas que placer un autre CDN devant une URL signée préserve sa sémantique de contrôle d’accès ou d’expiration.

Prétraitement

Vous pouvez aussi exécuter /file/preview dans une Assembly classique et exporter les dérivés vers votre propre stockage. Vous effectuez alors le travail au moment du téléversement en échange d’une disponibilité prévisible par la suite. C’est utile lorsque la publication doit attendre que les aperçus soient prêts ou lorsqu’un CDN statique doit servir un ensemble fixe de fichiers.

Capacités actuelles

Cet article ne tient plus de feuille de route distincte. Consultez la référence du Robot EN (English) pour connaître les formats de sortie et les stratégies actuels, y compris les fonctionnalités qui étaient expérimentales lors de la première publication de cet article.

Tarifs

Le traitement et la diffusion sont des composantes distinctes de la charge de travail. Estimez-les à partir de vos Templates réels, de la taille de vos fichiers, du nombre de requêtes, du comportement du cache et des tarifs actuels. Les limites du compte et les restrictions de sortie varient selon le forfait. Le tarif de bande passante ajustable de la démo est une hypothèse, pas un tarif communiqué par Transloadit.

Appel de démonstration

Parlez à notre équipe de vos types de fichiers, du trafic attendu, de vos exigences de confidentialité et de votre stockage existant.

Conclusion

Commencez avec quelques fichiers représentatifs et un Template d’aperçu restreint. Vérifiez les images renvoyées, mesurez la taille réelle des réponses, testez les échecs et les absences en cache, et vérifiez l’accès signé. Élargissez les variantes autorisées une fois que le flux de travail et ses coûts sont pertinents pour votre application.