{"id":28520,"date":"2021-08-06T18:55:36","date_gmt":"2021-08-06T18:55:36","guid":{"rendered":"http:\/\/Video-Skit-Maker-in-Next.js-Video-and-Audio-Upload"},"modified":"2021-08-06T18:55:36","modified_gmt":"2021-08-06T18:55:36","slug":"video-skit-maker-in-next-js-video-and-audio-upload","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/video-skit-maker-in-next-js-video-and-audio-upload\/","title":{"rendered":"Video Skit Maker in Next.js – Video and Audio Upload"},"content":{"rendered":"

A skit is popularly known as a short video about anything, having different video and sound effects.\nIn this post, we will build a basic skit maker in Next.js that allows us to upload a video, add an audio clip, then add basic transformations to the resulting video.<\/p>\n

This part of this article covers how to upload audio and video, with the audio playing on the video, while a second article will cover further video transformations.<\/p>\n

Sandbox<\/h2>\n

This portion of the project showing media upload was completed in a Codesandbox<\/a>. To get started quickly, fork the Codesandbox<\/a> or run the project.<\/p>\n

    \n<\/code><\/span><\/pre>\n<\/div>\n  \n  
\n    <\/iframe>\n  <\/div>\n\n  
\nGitHub repository: https:\/\/github.com\/Olanetsoft\/video-and-audio-upload-with-nextJS\n\n## Getting Started with Next.js\n\n[Next.js](https:\/\/nextjs.org\/) is an open-source React-based front-end development web framework, that allows  server-side rendering and the generation of static web sites and applications.\n\nTo create a new project, we use the `npx create-next-app` command to scaffold a new project in a directory of our choice.\nOnce the app is created and the dependencies automatically installed, we will see a message with instructions for navigating to our site and running it locally. We do this with the command \n\n```bash\n    cd <project name> && npm start\n<\/code><\/pre>\n
Next.js will start a hot-reloading development environment accessible by default at http:\/\/localhost:3000<\/a><\/p>\n
For both audio and video files, we will use C<\/a>loudinary<\/a> to handle our media upload. Cloudinary is a service that enables us deliver rich media experiences in media upload, storage, optimization, transformation and delivery.\nCloudinary<\/a> provides a secure and comprehensive API for uploading media files fast and efficiently from the server-side, the browser, or a mobile application. We can upload media assets using Cloudinary\u2019s REST API or one of its client libraries (SDKs). These SDKs wrap the upload API and make it easier to integrate with websites and mobile apps.<\/p>\n
We require  the user interface to manage the upload on the home page. We create do this by updating the pages\/index.js file to a component:<\/p>\n
    import React, { useState } from \"react\";\n    \n    const App = () => {\n      const [videoPublicId, setVideoPublicId] = useState(null);\n      const [alt, setAlt] = useState(null);\n      const [audioPublicId, setAudioPublicId] = useState(null);\n    \n      return (\n        <div<\/span>><\/span>\n          <main<\/span> className<\/span>=\"App\"<\/span>><\/span>\n            <section<\/span> className<\/span>=\"left-side\"<\/span>><\/span>\n              <form<\/span>><\/span>\n                <button<\/span>\n                  type<\/span>=\"button\"<\/span>\n                  className<\/span>=\"btn widget-btn\"<\/span>\n                ><\/span>\n                  Upload Video\n                <\/button<\/span>><\/span>\n                <button<\/span>\n                  type<\/span>=\"button\"<\/span>\n                  className<\/span>=\"btn widget-btn\"<\/span>\n                ><\/span>\n                  Upload Audio\n                <\/button<\/span>><\/span>\n              <\/form<\/span>><\/span>\n            <\/section<\/span>><\/span>\n            <section<\/span> className<\/span>=\"right-side\"<\/span>><\/span>\n              <p<\/span>><\/span>The resulting video with audio will be displayed here<\/p<\/span>><\/span>\n              <><\/span>\n                  <video<\/span>\n                    src<\/span>=\"\"<\/span>\n                    alt<\/span>={alt}<\/span>\n                    controls<\/span>\n                    autoPlay<\/span>\n                  ><\/span><\/video<\/span>><\/span>\n              <\/><\/span>\n            <\/section<\/span>><\/span>\n          <\/main<\/span>><\/span>\n        <\/div<\/span>><\/span>\n      );\n    };\n    \n    export default App;\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
We created component state variables using the useState<\/code> hook for videoPublicId<\/code>, audioPublicId<\/code>. Each being the Cloudinary public ID of the video and audio, initialized with a default value of null.<\/p>\n
We also created a state variable for the alt<\/code> accessibility data on media assets and set the initial value to null.<\/p>\n
With the state variables we rendered a video element and buttons to handle video and audio upload. The video playback source URL will be determined after the media assets are uploaded.<\/p>\n
The current user interface doesn\u2019t look aesthetically pleasing, we\u2019ll add some styling with CSS. We create a css<\/code> folder in the root directory and a style.css file in the folder with the following content in this GitHub Gist.<\/p>\n
https:\/\/gist.github.com\/Chuloo\/5a1c1cbf83fd827d6fb78308af15e23c<\/a><\/p>\n
To properly align elements on the screen, we use CSS Flexbox. Our button also has background colors and hover effects.<\/p>\n
We also need to create an _app.js<\/code> file inside the pages<\/code> directory. This file is native to Next.js and wraps the whole application. We\u2019ll import the CSS file we created into this _app.js<\/code> file.<\/p>\n
    import<\/span> \"..\/css\/style.css\"<\/span>;\n    export<\/span> default<\/span> function<\/span> MyApp<\/span>({ Component, pageProps }<\/span>) <\/span>{\n      return<\/span> <Component<\/span> {...pageProps<\/span>} \/><\/span><\/span>;\n    }\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
\"\"<\/p>\n
Media upload<\/h2>\n
Cloudinary\u2019s upload widget lets us upload media assets from multiple sources including Dropbox, Facebook, Instagram, and images taken right from our device camera. We\u2019ll utilize the upload widget in this project.<\/p>\n
\n
Create a free cloudinary account<\/a> to obtain your cloud name and upload_preset.<\/p>\n<\/blockquote>\n
Upload presets allow us to centrally define a set of asset upload choices rather than providing them in each upload call. A Cloudinary cloud name is a unique identifier associated with our Cloudinary account.<\/p>\n
First, from a content delivery network (CDN) we will include the Cloudinary widget\u2019s JavaScript file in our index.js located in pages\/index.``js<\/code>. We include this file using the react-helmet<\/a>\u2019s <Helmet><\/code> component, which lets us add data to the Head portion of our HTML document in React.<\/p>\n
In the project, we install the react-helmet<\/a> package using the command below:<\/p>\n
    npm i react-helmet\n<\/code><\/span><\/pre>\n
Next, in pages\/index.js<\/code> we import Helmet and add the script file.<\/p>\n
    import<\/span> React, { useState } from<\/span> \"react\"<\/span>;\n    import<\/span> { Helmet } from<\/span> \"react-helmet\"<\/span>;\n    const<\/span> App = ()<\/span> =><\/span> {\n      [...]\n      };\n      return<\/span> (\n        <div<\/span>><\/span>\n          <main<\/span> className<\/span>=\"App\"<\/span>><\/span>\n            <section<\/span> className<\/span>=\"left-side\"<\/span>><\/span>\n              <Helmet<\/span>><\/span>\n                <meta<\/span> charSet<\/span>=\"utf-8\"<\/span> \/><\/span>\n                <script<\/span>\n                  src<\/span>=\"https:\/\/widget.Cloudinary.com\/v2.0\/global\/all.js\"<\/span>\n                  type<\/span>=\"text\/javascript\"<\/span>\n                ><\/span><\/script<\/span>><\/span>\n              <\/Helmet<\/span>><\/span>\n              [...]\n            <\/section<\/span>><\/span>\n          <\/main<\/span>><\/span>\n        <\/div<\/span>><\/span><\/span>\n      );\n    };\n    export<\/span> default<\/span> App;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Next, in the App component, we create an instance of the widget in a function that will eventually be called on the click of a button.<\/p>\n
    import<\/span> React, { useState } from<\/span> \"react\"<\/span>;\n    import<\/span> { Helmet } from<\/span> \"react-helmet\"<\/span>;\n    const<\/span> App = ()<\/span> =><\/span> {\n      \/\/ state variable declarations go here<\/span>\n      \n      const<\/span> openWidget = ()<\/span> =><\/span> {\n        \/\/ create the widget<\/span>\n        const<\/span> widget = window<\/span>.cloudinary.createUploadWidget(\n          {\n            cloudName<\/span>: \"olanetsoft\"<\/span>,\n            uploadPreset<\/span>: \"w42epls6\"<\/span>\n          },\n          (error, result) => {\n            if<\/span> (result.event === \"success\"<\/span>) {\n              if<\/span> (result.info.is_audio === true<\/span>) {\n                setAudioPublicId(result.info.public_id);\n                setAlt(`A file of ${result.info.original_filename}<\/span>`<\/span>);\n              } else<\/span> {\n                setVideoPublicId(result.info.public_id);\n                setAlt(`A file of ${result.info.original_filename}<\/span>`<\/span>);\n              }\n            }\n          }\n        );\n        widget.open(); \/\/ open up the widget after creation<\/span>\n      };\n      return<\/span> (\n        \/*returned JSX goes in here*\/<\/span>\n      );\n    };\n    export<\/span> default<\/span> App;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
The widget requires our Cloudinary cloud_name<\/code> and uploadPreset<\/code>. The createWidget()<\/code> function creates a new upload widget and on the successful upload of either a video or audio, we assign the public_id of the asset to the relevant state variable.<\/p>\n
To get our cloudname<\/code> and uploadPreset<\/code> we follow the steps below:<\/p>\n
The cloud name is obtained from our Cloudinary dashboard as shown below.<\/p>\n
\"\"<\/p>\n
An upload preset can be found in the \u201cUpload\u201d tab of our Cloudinary settings page, which we access by clicking on the gear icon in the top right corner of the dashboard page.<\/p>\n
\"\"<\/p>\n
We then click on the Upload<\/code> tab on the settings page:<\/p>\n
\"\"<\/p>\n
We scroll down to the bottom of the page to the upload presets section, where we see our upload preset or the option to create one if we don\u2019t have any.<\/p>\n
We call the openWidget<\/code> function in the onClick<\/code> handler of our upload buttons using:<\/p>\n
    const<\/span> App = ()<\/span> =><\/span> {\n      };\n      return<\/span> (\n        <div<\/span>><\/span>\n          <main<\/span> className<\/span>=\"App\"<\/span>><\/span>\n            <section<\/span> className<\/span>=\"left-side\"<\/span>><\/span>\n              \/*Helmet goes here*\/\n              <form<\/span>><\/span>\n                <button<\/span>\n                  type<\/span>=\"button\"<\/span>\n                  className<\/span>=\"btn widget-btn\"<\/span>\n                  onClick<\/span>={openWidget}<\/span>\n                ><\/span>\n                  Upload Video\n                <\/button<\/span>><\/span>\n                <button<\/span>\n                  type<\/span>=\"button\"<\/span>\n                  className<\/span>=\"btn widget-btn\"<\/span>\n                  onClick<\/span>={openWidget}<\/span>\n                ><\/span>\n                  Upload Audio\n                <\/button<\/span>><\/span>\n              <\/form<\/span>><\/span>\n            <\/section<\/span>><\/span>\n          <\/main<\/span>><\/span>\n        <\/div<\/span>><\/span><\/span>\n      );\n    };\n    export<\/span> default<\/span> App;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
When we open our app in the browser and click the \u201cUpload Video\u201d button, we should see something like this:<\/p>\n
\"\"<\/p>\n
On asset upload, this is what the response looks like with the public_id<\/code> of the asset uploaded:<\/p>\n
\"\"<\/p>\n
We successfully uploaded a video file and retrieved the video properties from Cloudinary, we will further upload an audio file and construct the URL that will be added to the src<\/code> attribute of the video element.<\/p>\n
Cloudinary provides on-the-fly URL media transformations via URL modifications. For this project, we\u2019ll use the same pattern to transform the video URL to include the audio file as a transformation parameter.\nWe took a standard Cloudinary-uploaded video URL and replaced the public ID portions of the video and audio with those set in the component\u2019s state variable on asset upload.<\/p>\n
The resulting URL looks like this with template literals<\/p>\n
`https:\/\/res.cloudinary.com\/olanetsoft\/video\/upload\/l_video:${audioPublicId}\/fl_layer_apply\/${videoPublicId}.mp4`\n<\/code><\/pre>\n
We update the src<\/code> attribute on the video element with the URL we constructed:<\/p>\n
    \/\/...\n    \n    <p<\/span>><\/span>The resulting video with audio will be displayed here<\/p<\/span>><\/span>\n    \/\/ Update the code below\n      {audioPublicId && (\n        <><\/span>\n          <video<\/span>\n            src<\/span>={<\/span>`https:<\/span>\/\/res.cloudinary.com<\/span>\/olanetsoft<\/span>\/video<\/span>\/upload<\/span>\/l_video:<\/span>${audioPublicId<\/span>}\/fl_layer_apply<\/span>\/${videoPublicId<\/span>}.mp4<\/span>`}\n            alt<\/span>={alt}<\/span>\n            controls<\/span>\n            autoPlay<\/span>\n          ><\/span><\/video<\/span>><\/span>\n        <\/><\/span>\n      )}\n    \n    \/\/...\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
The resulting interface should look like this, having the transformed video with audio displayed on the right.<\/p>\n
\"\"<\/p>\n
Conclusion<\/h1>\n
This article explains how to upload audio and video to Cloudinary seamlessly, with the audio serving as background music to the video. In the following tutorial, we\u2019ll learn how to add transformations to the video.<\/p>\n
Resources<\/h1>\n
You may find these resources useful.<\/p>\n
We can further customize the widget with more information in this documentation<\/a>.<\/p>\n
Our application should now look like this on http:\/\/localhost:3000\/<\/a>:<\/p>\n
https:\/\/gist.github.com\/Chuloo\/5a1c1cbf83fd827d6fb78308af15e23c<\/a><\/p>\n