Maine EduSphere AI ke liye ek complete full-stack video generation app build kar diya hai. App mein ye features hain:
API Routes:
/api/upload - Images ko Vercel Blob mein upload karta hai/api/generate-video - fal.ai se AI video generate karta hai (demo mode bhi available hai jab tak FAL_KEY nahi hai)/api/videos - Generated videos ki list deta hai/api/file - Stored files serve karta haiStudio Page (/studio):
Navigation Updates:
Demo Mode: Jab tak aap FAL_KEY environment variable add nahi karte, app demo mode mein kaam karega with a sample video. Real AI video generation ke liye, Settings > Integrations se fal.ai add karein.
Now let me check the generate-video API to see what demo video URL is being returned:
The issue is clear now. The demo video URL https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4 might not be accessible or has CORS issues. Also, the video player needs better error handling. Let me fix this:
I fixed the video player issue by:
onError, onLoadedData, and onCanPlay event handlerscrossOrigin="anonymous" to handle CORS properlytogglePlay async with try-catch to handle play() promise rejections gracefullyThe logs show no crashes or errors - just a minor warning about metadataBase for Open Graph images, which doesn't affect functionality. The app is running correctly with all routes returning 200 status.
The video player fixes are now in place. You can test the Studio page by:
/studio or clicking "AI Studio" in the navbarTo enable real AI video generation, add the FAL_KEY environment variable in Settings (top right) > Vars section.
You can send messages while the preview loads