TTC
Theo's Typesafe Cult•2w ago
quilio admin

what is the best way to generate a thumbnail image / poster for a video that is uploaded to UT?

I was thinking about using ffmpeg to generate a thumbnail from the uploaded video, but this might get costly on the server. and i dont like writing to the file system on the server as my own general rule. plus, this going to require uploading the thumbnail to UT after it is generated. I wish that UT automatically could create thumbnails for videos. But that might be asking too much. The other alternatives i was thinking of was AWS Lambda S3 solution or cloudfare. But that just defeats the purpose since I am using UT for all storage cases.
1 Reply
quilio admin
quilio adminOP•2w ago
As a temporary solution i decided to create a backend cron job that is going to fetch any new video urls, download and extract the first frame of the video using ffmpeg, outputting a small file, and then uploading the output file to uploadthing. Subsequently, will need to do a data mutation to update the posterImage for the video in backend. Lastly, delete the files that were created during the process. This actually makes me cringe tbh. And at some point, the data transfer cost will probably become a constraint. Extracting the first frame is dependent on downloading the video, but I am going to attempt using seek option to only download the first frame bits, rather than the entire video that was uploaded. 
const thumbnailFilename = `${Date.now()}.jpg`
const outputPath = path.join(thumbnailsDir, thumbnailFilename)

await new Promise((resolve, reject) => {
  ffmpeg(videoUrl)
    .inputOptions(['-ss 00:00:01']) // Seek to 1s to avoid full download
    .on('end', () => {
      console.log(`Thumbnail saved at: ${outputPath}`)
      resolve()
    })
    .on('error', reject)
    .output(outputPath) 
    .frames(1) // Capture only 1 frame
    .size(thumbnailSize) 
    .run() 
})
const thumbnailFilename = `${Date.now()}.jpg`
const outputPath = path.join(thumbnailsDir, thumbnailFilename)

await new Promise((resolve, reject) => {
  ffmpeg(videoUrl)
    .inputOptions(['-ss 00:00:01']) // Seek to 1s to avoid full download
    .on('end', () => {
      console.log(`Thumbnail saved at: ${outputPath}`)
      resolve()
    })
    .on('error', reject)
    .output(outputPath) 
    .frames(1) // Capture only 1 frame
    .size(thumbnailSize) 
    .run() 
})
In case anyone ever runs into the same problem, let me share how I solved it using UT's api. So the first idea of using a cronjob was a bit overcomplicated to say the least. I knew there was a much simpler way to solve this from within my T3 stack. The cronjob idea emerged because I was doing other AI and media processing tasks on the server using Nestjs and Vercel's cron feature. After I posted this question, I went back to the Nextjs code and realized that I could simply create an endpoint that to does the following: 1) Register the file upload and get a signed url from UT's api, 2) upload the file content to the signed url using formdata. Then on the frontend, 1) extract frames from video and get the first frame, 2) call the endpoint to upload the first frame image, and 3) mutate/update the posterImage url returned from UT on the backend.

Did you find this page helpful?