Impossible d'afficher l'aperçu d'une video générée par le modèle Veo avec Genkit

General
1

Je rencontre une difficulté persistante sur mon projet (Next.js sur App Hosting) concernant l’affichage d’une vidéo générée par l’IA.

Objectif : Dans mon application, j’utilise un flow Genkit qui fait appel au modèle googleai/veo-2.0-generate-001 pour générer une vidéo à partir d’un prompt. Je souhaite afficher cette vidéo en aperçu sur la page, juste après sa génération.

Problème rencontré : Le flow Genkit se déroule sans erreur et l’opération de génération de la vidéo aboutit. Cependant, il est impossible d’afficher la vidéo en aperçu dans le navigateur. La balise <video> reste vide ou affiche une erreur.

Analyse du problème et tentatives de résolution :

J’ai identifié que le modèle Veo, via ai.checkOperation(), retourne une URL de type https://*.googleapis.com/.... Il ne s’agit pas d’un data: URI comme pour les modèles de génération d’images.

Mes tentatives pour résoudre ce problème ont été les suivantes :

  1. Tentative 1 : Affichage direct

    • Action : Utiliser l’URL https://*.googleapis.com/... directement dans l’attribut src de la balise <video>.

    • Résultat : Échec. Le navigateur bloque la requête pour des raisons de sécurité (CORS). C’est un comportement attendu.

  2. Tentative 2 : Proxy API

    • Action : J’ai créé une route d’API Next.js (/api/video-proxy) qui agit comme un proxy. Le client envoie l’URL temporaire de Google à cette route. La route d’API, s’exécutant côté serveur, tente alors de télécharger la vidéo en utilisant node-fetch, en ajoutant la clé d’API (process.env.GEMINI_API_KEY) à l’URL.

    • Résultat : Échec. La route d’API elle-même ne semble pas pouvoir télécharger la vidéo. Je suspecte que la variable d’environnement GEMINI_API_KEY n’est pas disponible dans l’environnement d’exécution du serveur App Hosting, ou que le fetch échoue pour une autre raison de permission.

Conclusion et Question :

Il semble y avoir un blocage architectural :

  • Le client ne peut pas accéder à l’URL de la vidéo à cause de la sécurité du navigateur (CORS).

  • Le serveur (via une route d’API ou un flow Genkit) ne semble pas pouvoir authentifier sa propre requête pour télécharger la vidéo depuis son URL temporaire.

Ma question est donc la suivante : Quelle est l’architecture recommandée par Firebase Studio pour récupérer et afficher une vidéo générée par un modèle long comme Veo ? Y a-t-il une méthode spécifique pour que le serveur (App Hosting / Genkit) puisse s’authentifier correctement pour télécharger la ressource qu’il vient de générer, afin de la servir ensuite au client ?

Merci d’avance pour votre aide et vos éclaircissements