{"id":36366,"date":"2024-11-27T07:00:00","date_gmt":"2024-11-27T15:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=36366"},"modified":"2024-11-27T15:34:51","modified_gmt":"2024-11-27T23:34:51","slug":"video-subtitle-translation-azure","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/video-subtitle-translation-azure","title":{"rendered":"Video Subtitle Translation in Cloudinary With Azure"},"content":{"rendered":"\n

Video captions and subtitles have evolved from an accessibility feature to a universal tool for user engagement. A whopping 80% of viewers<\/a> are more likely to watch a video from beginning to end if captions are available. According to that same study, 69% of viewers keep their sound off in public spaces, while 50% prefer to watch on mute regardless of where they are. <\/p>\n\n\n\n

Needless to say, adding captions and subtitles will expand your video’s reach. This blog post shows you how to automatically generate and translate subtitles using Cloudinary<\/a> and Microsoft Azure Video Indexer<\/a> in a Next.js app.<\/p>\n\n\n\n

Here\u2019s a preview<\/a> of the demo, where users can view video content with English and Spanish subtitles.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Setting Up Cloudinary and Next.js<\/h2>\n\n\n\n

If you don\u2019t have a Next.js project already, create one by running the following command:<\/p>\n\n\n

npx<\/span> create-next-app<\/span>@14<\/span> subtitle-translation-demo\n\ncd subtitle-translation-demo<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
<code<\/span>><\/span>npm install cloudinary<\/code<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
\"\"\/
Cloudinary API keys from its dashboard.<\/figcaption><\/figure>\n\n\n\n
Create a .env.local<\/code> file in the root of your project to securely add your Cloudinary credentials:<\/p>\n\n\n
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=your_cloud_name\n\nNEXT_PUBLIC_CLOUDINARY_API_KEY=your_api_key\n\nCLOUDINARY_API_SECRET=your_api_secret<\/code><\/span><\/pre>\n\n\n
The next step is to initialize Cloudinary by creating a lib  folder in the root of your project and a cloudinary.ts file in the folder to configure Cloudinary:<\/p>\n\n\n
\/\/ lib\/cloudinary.ts<\/span>\n\nimport<\/span> { v2 as<\/span> cloudinary } from<\/span> 'cloudinary'<\/span>;\n\ncloudinary.config({\n\n\u00a0 cloud_name<\/span>: process.env.CLOUDINARY_CLOUD_NAME,\n\n\u00a0 api_key<\/span>: process.env.CLOUDINARY_API_KEY,\n\n\u00a0 api_secret<\/span>: process.env.CLOUDINARY_API_SECRET,\n\n\u00a0 secure<\/span>: true<\/span>,\n\n});\n\nexport<\/span> default<\/span> cloudinary;<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
This setup allows you to easily interact with Cloudinary\u2019s API throughout your app.<\/p>\n\n\n\n
Uploading Video to Cloudinary with Next.js<\/h2>\n\n\n\n
With Cloudinary set up, you can now upload videos using server actions<\/a>, which helps streamline the process of handling video uploads and optimization directly on the server side, keeping the logic cleaner and more efficient. <\/p>\n\n\n\n
Start by creating a form that allows users to select and upload a video. You can include the following form in your page.tsx file, and a loading state, which is used to track the upload process.<\/p>\n\n\n
\/\/ app\/page.tsx<\/span>\n\n'use client'<\/span>;\n\nimport<\/span> { useState } from<\/span> 'react'<\/span>;\n\nexport<\/span> default<\/span> function<\/span> Home<\/span>(<\/span>) <\/span>{\n\n\u00a0 const<\/span> [loading, setLoading] = useState(false<\/span>);\n\n\u00a0 const<\/span> handleSubmit = async<\/span> (event: React.FormEvent<HTMLFormElement>) => {\n\n\u00a0 \u00a0 event.preventDefault();\n\n\u00a0 \u00a0 setLoading(true<\/span>);\n\n\u00a0 \u00a0 const<\/span> formData = new<\/span> FormData(event.currentTarget); \/\/ Retrieve the video file<\/span>\n\n\u00a0 \u00a0 try<\/span> {\n\n\u00a0 \u00a0 \u00a0 \/\/ Upload video function will go here<\/span>\n\n\u00a0 \u00a0 } catch<\/span> (error) {\n\n\u00a0 \u00a0 \u00a0 console<\/span>.error('Upload failed:'<\/span>, error);\n\n\u00a0 \u00a0 } finally<\/span> {\n\n\u00a0 \u00a0 \u00a0 setLoading(false<\/span>);\n\n\u00a0 \u00a0 }\n\n\u00a0 };\n\n\u00a0 return<\/span> (\n\n\u00a0 \u00a0 <div<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 <h1<\/span>><\/span>Upload Your Video<\/h1<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 <form<\/span> onSubmit<\/span>={handleSubmit}<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 <input<\/span> type<\/span>=\"file\"<\/span> name<\/span>=\"video\"<\/span> accept<\/span>=\"video\/*\"<\/span> required<\/span> \/><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 <button<\/span> type<\/span>=\"submit\"<\/span> disabled<\/span>={loading}<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 {loading ? 'Uploading...' : 'Upload Video'}\n\n\u00a0 \u00a0 \u00a0 \u00a0 <\/button<\/span>><\/span>\n\n\u00a0 \u00a0 \u00a0 <\/form<\/span>><\/span>\n\n\u00a0 \u00a0 <\/div<\/span>><\/span><\/span>\n\n\u00a0 );\n\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Next, create the server action responsible for handling video uploads. This action processes the video and uploads it directly to Cloudinary.<\/p>\n\n\n\n
Create an upload.ts file in the app directory of your project and add the following code:<\/p>\n\n\n
\/\/ app\/upload.ts<\/span>\n\n'use server'<\/span>;\n\nimport<\/span> cloudinary from<\/span> '..\/lib\/cloudinary'<\/span>;\n\nexport<\/span> async<\/span> function<\/span> upload<\/span>(formData: FormData<\/span>) <\/span>{\n\n\u00a0 const<\/span> file = formData.get('video'<\/span>) as<\/span> File;\n\n\u00a0 const<\/span> buffer: Buffer = Buffer.from(await<\/span> file.arrayBuffer()); \/\/ Convert the video to a buffer<\/span>\n\n\u00a0 \/\/ Ensure the public ID is safe for URLs<\/span>\n\n\u00a0 const<\/span> safePublicId = file.name.replace(\/[^a-zA-Z0-9-_]\/g<\/span>, '_'<\/span>);\n\n\u00a0 const<\/span> uploadResponse = await<\/span> new<\/span> Promise<\/span><{ secure_url<\/span>: string; public_id: string }>(\n\n\u00a0 \u00a0 (resolve, reject<\/span>) =><\/span> {\n\n\u00a0 \u00a0 \u00a0 cloudinary.uploader\n\n\u00a0 \u00a0 \u00a0 \u00a0 .upload_stream(\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 {\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 resource_type<\/span>: 'video'<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 public_id<\/span>: safePublicId,\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 (error, result) => {\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 if<\/span> (error) {\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 reject(`Upload failed: ${error.message}<\/span>`<\/span>);\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 } else<\/span> {\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 resolve(result);\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }\n\n\u00a0 \u00a0 \u00a0 \u00a0 )\n\n\u00a0 \u00a0 \u00a0 \u00a0 .end(buffer); \/\/ Stream the video file as a buffer to Cloudinary<\/span>\n\n\u00a0 \u00a0 }\n\n\u00a0 );\n\n\u00a0 \/\/ Return the Cloudinary video URL and public ID for further processing<\/span>\n\n\u00a0 return<\/span> {\n\n\u00a0 \u00a0 originalUrl<\/span>: uploadResponse.secure_url,\n\n\u00a0 \u00a0 videoId<\/span>: uploadResponse.public_id,\n\n\u00a0 };\n\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
In the code above:<\/p>\n\n\n\n
Once this package is installed, connect your app to Cloudinary using your Cloudinary API credentials. Navigate to your Cloudinary dashboard<\/a> and copy your cloud name<\/strong>, API key<\/strong>, and API secret<\/strong>.<\/p>\n\n\n\n
Next, install the Cloudinary Node.js SDK<\/a>, which allows you to interact with Cloudinary\u2019s API directly from your app:<\/p>\n\n\n