Set Up a Next.js App<\/h2>\n\n\n\n
Run the command below to setup a Next.js app. You can give it any name you wish:<\/p>\n\n\n
$ npx create-next-app@latest <YOUR-APPLICATION-NAME<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\nSelect the options below in the process of setting up the app, or you can choose whatever setting works for you:<\/p>\n\n\n\n![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_171,c_scale\/f_auto,q_auto\/v1721320179\/Web_Assets\/blog\/blog-Add-a-Transcription-to-Your-Video-in-Nextjs-1\/blog-Add-a-Transcription-to-Your-Video-in-Nextjs-1.png?_i=AA\")
<\/figure>\n\n\n\nInstall the Cloudinary package with the command below:<\/p>\n\n\n
$ npm i cloudinary<\/code><\/span><\/pre>\n\n\nStyle the Application<\/h2>\n\n\n\n
Change the directory into the application we created above and navigate to the page.module.css<\/code> file. Replace the boilerplate code with the code below. These are just the basic CSS styles we would use in our app:<\/p>\n\n\n\n.main<\/span> {\n display<\/span>: flex;\n flex-direction<\/span>: column;\n justify-content<\/span>: space-evenly;\n align-items<\/span>: center;\n padding<\/span>: 6rem<\/span>;\n height<\/span>: 100vh<\/span>;\n}\n.main<\/span> form<\/span> {\n background-color<\/span>: white;\n width<\/span>: 400px<\/span>;\n border-radius<\/span>: 5px<\/span>;\n padding<\/span>: 10px<\/span>;\n}\n.main<\/span> form<\/span> label<\/span> {\n color<\/span>: black;\n}\n.main<\/span> form<\/span> input<\/span> {\n padding<\/span>: 0.5rem<\/span>;\n border<\/span>: 1px<\/span> solid #ccc<\/span>;\n border-radius<\/span>: 4px<\/span>;\n background<\/span>: none;\n color<\/span>: black;\n margin<\/span>: 0<\/span> 10px<\/span>;\n}\n.main<\/span> form<\/span> button<\/span> {\n height<\/span>: 40px<\/span>;\n width<\/span>: 100%<\/span>;\n margin<\/span>: 20px<\/span> 0<\/span>;\n color<\/span>: white;\n font-size<\/span>: large;\n border-radius<\/span>: 5px<\/span>;\n border<\/span>: none;\n background-color<\/span>: rgb<\/span>(28<\/span>, 25<\/span>, 25<\/span>);\n}\n.main<\/span> form<\/span> button<\/span>:hover<\/span> {\n cursor<\/span>: pointer;\n background-color<\/span>: rgb<\/span>(85<\/span>, 82<\/span>, 82<\/span>);\n}\n.main<\/span> form<\/span> button<\/span>:disabled<\/span> {\n background-color<\/span>: #ccc<\/span>;\n color<\/span>: #666<\/span>;\n cursor<\/span>: not-allowed;\n opacity<\/span>: 0.6<\/span>;\n}\n.video-transcription-section<\/span> {\n display<\/span>: flex;\n flex-direction<\/span>: row;\n justify-content<\/span>: space-evenly;\n align-items<\/span>: center;\n padding<\/span>: 3rem<\/span>;\n width<\/span>: 100vw<\/span>;\n height<\/span>: 350px<\/span>;\n}\n.video-transcription-section<\/span> video<\/span> {\n height<\/span>: inherit;\n border-radius<\/span>: 5px<\/span>;\n border<\/span>: #ccc<\/span> solid 1px<\/span>;\n}\n.transcription<\/span> {\n border-radius<\/span>: 5px<\/span>;\n border<\/span>: #ccc<\/span> solid 1px<\/span>;\n height<\/span>: inherit;\n width<\/span>: 500px<\/span>;\n padding<\/span>: 5px<\/span>;\n color<\/span>: lightgreen;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\nNext, in the page.tsx<\/code> file, replace the boilerplate code with the code below. This code snippet is the app\u2019s foundation which stores required data and eventually renders a transcript:<\/p>\n\n\n\n'use client'<\/span>;\nimport<\/span> { useState } from<\/span> 'react'<\/span>;\nimport<\/span> styles from<\/span> '.\/page.module.css'<\/span>;\n\nexport<\/span> default<\/span> function<\/span> Home<\/span>(<\/span>) <\/span>{\n const<\/span> [videoUrl, setVideoUrl] = useState<string>(''<\/span>);\n const<\/span> [transcript, setTranscript] = useState<string>(''<\/span>);\n const<\/span> [isUploading, setIsUploading] = useState<boolean>(false<\/span>);\n\n const<\/span> uploadVideo = async<\/span> (event: React.FormEvent<HTMLFormElement>) => {}\n\n return<\/span> (\n <main<\/span> className<\/span>={styles.main}<\/span>><\/span>\n <form<\/span> onSubmit<\/span>={uploadVideo}<\/span>><\/span>\n <label<\/span> htmlFor<\/span>='video_file'<\/span>><\/span>Video file:<\/label<\/span>><\/span>\n <input<\/span> type<\/span>='file'<\/span> name<\/span>='video_file'<\/span> accept<\/span>='video\/*'<\/span> required<\/span> \/><\/span>\n <button<\/span> type<\/span>='submit'<\/span> disabled<\/span>={isUploading}<\/span>><\/span>\n {isUploading ? 'Uploading video...' : 'Upload'}\n <\/button<\/span>><\/span>\n <\/form<\/span>><\/span>\n {videoUrl && (\n <div<\/span> className<\/span>={styles[<\/span>'video-transcription-section<\/span>']}><\/span>\n <video<\/span> crossOrigin<\/span>='anonymous'<\/span> controls<\/span> muted<\/span>><\/span>\n <source<\/span> src<\/span>={videoUrl}<\/span> type<\/span>='video\/mp4'<\/span> \/><\/span>\n <\/video<\/span>><\/span>\n <div<\/span> className<\/span>={styles.transcription}<\/span>><\/span>\n <p<\/span>><\/span>\n {transcript ? transcript : 'Transcription is being processed...'}\n <\/p<\/span>><\/span>\n <\/div<\/span>><\/span>\n <\/div<\/span>><\/span>\n )}\n <\/main<\/span>><\/span><\/span>\n );\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nIn the code above, we initialized the state variables we’d need:<\/p>\n\n\n\n
\nvideoUrl<\/code>. This variable keeps track of the uploaded video’s URL.<\/li>\n\n\n\ntranscript<\/code>. This variable stores the transcribed text associated with the uploaded video.<\/li>\n\n\n\nisUploading<\/code>. This boolean flag indicates whether a video upload is in progress.<\/li>\n<\/ul>\n\n\n\nThere is also an empty uploadVideo function that will contain our upload logic. We conditionally show the video and transcript based on their respective state variables.<\/p>\n\n\n\n
Set Up Environment Variables<\/h2>\n\n\n\n
In the project root directory, add a new file, .env.local<\/code>, and paste the code below in that file. This file would house all the app keys we need to use Cloudinary in our project.<\/p>\n\n\n\nCLOUDINARY_CLOUD_NAME=<CLOUDINARY_CLOUD_NAME<\/span>><\/span>\nCLOUDINARY_API_KEY=<CLOUDINARY_API_KEY<\/span>><\/span>\nCLOUDINARY_API_SECRET=