Skip to content

[Nom de la Configuration Cloudflare Stream]

Type de ressource : Configuration Cloudflare Stream (Direct Upload / Lecture / Métadonnées)
Fichier source : services/media-upload/src/index.ts ou configuration associée
Statut : [Actif / Déprécié / En développement]
Slice : [Numéro de la tranche verticale]
Version : 1.0


[Description concise du rîle de cette configuration Stream dans l’architecture du site]

  • [Objectif principal : ex. hĂ©berger les vidĂ©os du portfolio avec transcoding automatique]
  • [BĂ©nĂ©fice pour l’architecture : ex. adaptive bitrate sans gestion serveur]
Type de contenu Statut
Portfolio [✅/❌]
Blog [✅/❌]
Pages vitrine [✅/❌]
Format source Statut
MP4 [✅/❌]
MOV [✅/❌]
WebM [✅/❌]
AccĂšs Statut
Public [✅/❌]
PrivĂ© [✅/❌]
SignĂ© [✅/❌]

[Sanity Studio]
│ (demande d'upload vidĂ©o)
▌
[Worker media-upload (L3)]
│ ‱ GĂ©nĂ©ration Direct Upload Token
▌
[Sanity Studio]
│ ‱ Upload direct vers Cloudflare Stream
│ ‱ Stocke l'uid dans le document
▌
[Cloudflare Stream]
│ ‱ Transcoding automatique
│ ‱ GĂ©nĂ©ration des thumbnails
▌
[Astro / Site]
│ ‱ Iframe ou SDK Stream
▌
[Utilisateur final]
Composant RĂŽle Couche
BibliothĂšque Stream Stockage + transcoding Infrastructure
Worker media-upload Génération de tokens L3
Sanity Stockage de l’UID Stream L1
Astro Intégration du player L2

Variable Description Obligatoire Valeur par défaut
CLOUDFLARE_ACCOUNT_ID ID du compte Cloudflare ✅ -
CLOUDFLARE_STREAM_API_TOKEN Token API Stream ✅ -
STREAM_PUBLIC_DOMAIN Domaine public ❌ iframe.videodelivery.net

Dans le Dashboard Cloudflare :

  1. My Profile → API Tokens → Create Token
  2. Template : “Create Custom Token”
  3. Permissions : Account → Cloudflare Stream → Edit
Terminal window
wrangler secret put CLOUDFLARE_STREAM_API_TOKEN --env production
services/media-upload/src/index.ts
export default {
async fetch(request: Request, env: Env): Promise<Response> {
const response = await fetch(
`https://api.cloudflare.com/client/v4/accounts/${env.CLOUDFLARE_ACCOUNT_ID}/stream/direct_upload`,
{
method: 'POST',
headers: {
'Authorization': `Bearer ${env.CLOUDFLARE_STREAM_API_TOKEN}`,
'Content-Type': 'application/json',
},
body: JSON.stringify({
maxDurationSeconds: 3600,
requiredSignedURLs: false,
}),
}
);
const data = await response.json();
return new Response(JSON.stringify(data), {
headers: { 'Content-Type': 'application/json' },
});
},
};

ParamĂštre Type Validation
maxDurationSeconds number ≀ 3600
ÉlĂ©ment Type Description
uploadURL string URL d’upload
uid string UID de la vidéo

Scénario Description Résultat attendu
GĂ©nĂ©ration token RequĂȘte valide Token gĂ©nĂ©rĂ©
Upload vidéo Token valide Vidéo uploadée
Scénario Dépendances Description Résultat attendu
Flux upload Worker + Stream Token → Upload VidĂ©o stockĂ©e

Composant Type RĂŽle MĂ©thode d’intĂ©gration
Sanity L1 Stockage UID Champ videoUid
Astro L2 Player Iframe ou SDK
  • Le token doit ĂȘtre gĂ©nĂ©rĂ© cĂŽtĂ© serveur
  • L’UID doit ĂȘtre stockĂ© dans Sanity
  • Le player doit ĂȘtre configurĂ© correctement
  • Le token est gĂ©nĂ©rĂ©
  • L’upload fonctionne
  • Le transcoding est automatique
  • Le player affiche la vidĂ©o

  • ✅ Token API injectĂ© via secret
  • ✅ HTTPS forcĂ©
  • ✅ Validation des durĂ©es
  • ✅ Ne jamais exposer le token API
  • ✅ Limiter la durĂ©e des vidĂ©os
  • ✅ Configurer les permissions correctement

Limite Valeur
Durée max vidéo 3600s (1h)
Taille max fichier 10 GB
Vidéos par compte Illimité (facturé)
  • ✅ Transcoding automatique
  • ✅ Adaptive bitrate
  • ✅ CDN global

SymptĂŽme Cause probable Solution
Token invalide Token expiré Régénérer le token
Upload échoue Format non supporté Vérifier le format
Terminal window
# Lister les vidéos
wrangler stream list

  • ✅ Utiliser le Direct Upload Token
  • ✅ Stocker l’UID dans Sanity
  • ✅ Utiliser le player iframe ou SDK
  • ✅ Surveiller l’utilisation
  • ✅ Nettoyer les vidĂ©os obsolĂštes

  • [Évolution 1]
  • [Évolution 2]
  • ❌ [Limitation 1]
  • ❌ [Limitation 2]

  • Documentation Cloudflare : Stream

Date Version Description Auteur
YYYY-MM-DD 1.0 Création initiale [Nom]
Edit page

Last updated: