quilio admin Comments - Answer Overflow

quilio admin

•Created by quilio admin on 2/18/2025 in #questions

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

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.

3 replies

TTCTheo's Typesafe Cult

•Created by quilio admin on 2/18/2025 in #questions

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

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() 
})

3 replies

Gaming

Programming