Add a Transcription to Your Video using Next.js

Accessibility is a core factor of software development, and video transcriptions improve website user experience. Video transcriptions are instrumental in many cases, such as for viewers with hearing impairments, those in noisy environments, language learners following along with lectures, and people who prefer to consume information by reading. I have created a short project in which we’ll learn how to generate video transcription into our Next.js applications using Cloudinary’s AI features. To follow along, you’ll need a basic understanding of TypeScript or JavaScript and a Cloudinary account; you can create one for free. To use the video transcription feature, we must provision our Cloudinary account with the Google AI Transcription Add-on. To do so, navigate to the Add-ons page on the Cloudinary console and add Google AI Transcription. After setting up the project and coding, this is how the basic application with functionality will look: The code with the GitHub repository and step-by-step instructions are given in this blog by Cloudinary.

Apr 16, 2025 - 17:13

Add a Transcription to Your Video using Next.js

Accessibility is a core factor of software development, and video transcriptions improve website user experience. Video transcriptions are instrumental in many cases, such as for viewers with hearing impairments, those in noisy environments, language learners following along with lectures, and people who prefer to consume information by reading.

I have created a short project in which we’ll learn how to generate video transcription into our Next.js applications using Cloudinary’s AI features.

To follow along, you’ll need a basic understanding of TypeScript or JavaScript and a Cloudinary account; you can create one for free.

To use the video transcription feature, we must provision our Cloudinary account with the Google AI Transcription Add-on. To do so, navigate to the Add-ons page on the Cloudinary console and add Google AI Transcription.

After setting up the project and coding, this is how the basic application with functionality will look:

The code with the GitHub repository and step-by-step instructions are given in this blog by Cloudinary.