Building a Video Editor

Nwokocha Wisdom Maduabuchi

Introduction:

After recording a video, you often want to modify it to look better than when you shot it. However, it is more challenging to do such modifications on an application you build. One of the tools that help out with such improvement is the Cloudinary application which helps in managing your media content. Cloudinary is used to upload your media content, uploading, transforming, formatting, optimizing, etc. In this tutorial, you will build a small video editor using React to help you edit and upload a video to Cloudinary from our application.

Prerequisite:

To follow this tutorial, you will have to:

  • Create a react app.
  • Install react Cloudinary SDK.

Create react app

To start building the video editor, you will have to create the react app. To do this, you will use the following command in your terminal.

npx create-react-app videoedit

We can install the necessary Cloudinary packages using the NPM package manager when you have successfully installed your react app, as shown below.

1npm i @cloudinary/url-gen @cloudinary/react --save

Create a component folder and create a jsx file called video editor in the folder. Then, import the Cloudinary dependencies into your video editor file, as seen below.

1import React from 'react'
2import {Cloudinary} from "@cloudinary/url-gen";

Uploading a video to Cloudinary

To be able to upload your video from your application to Cloudinary using react, you will have to create a function called handleSubmit that fetches the upload API using the post method. This API bears the cloud name. To get your cloud name, log in to your Cloudinary account, click on the dashboard at the top of your screen, copy the cloud name.

You will need to append your upload presets name/code to enable you to upload any media content to Cloudinary. To get your upload presets name/code, on your Cloudinary account, click on settings, click on upload and scroll down till you see the upload presets. Then, click on mode to change it from signed to unsigned, copy the name.

In the handleSubmit, create a function called formData and assign a new formData to it. Next, create a state called file and append it to the formData. Next, create a function called handle event change, create a function in this function called to read, assign an array of files to it. Call the files state. The body will be the formData. The response is a JSON return. After upload, create a state called videoSrc and pass the response to it to get our video after upload. Also, pass the public_id to the response. Below is the handleSubmit function.

1const [file, setFile] = useState(null);
2 const [videoSrc, setVideoSrc] = useState("");
3 const handleEventChange = (e) => {
4 const read = e.target.files[0];
5 setFile(read);
6 };
7 const handleSubmit = () => {
8 const formData = new FormData();
9 formData.append("file", file);
10 formData.append("upload_preset", preset);
11 setLoading(true);
12 fetch(`https://api.cloudinary.com/v1_1/${cldCloudName}/upload`, {
13 method: "POST",
14 body: formData,
15 })
16 .then((res) => res.json())
17 .then((res) => {
18 console.log(res);
19 setVideoSrc(res.public_id);
20 setTransformState((prev) => ({
21 ...prev,
22 height: res.height,
23 width: res.width,
24 }));
25
26 setLoading(false);
27 })
28 .then(handleErrors);
29 };

Create an input element that has a name and type. On the onChange event handler, call the handle event change function you created. Next, create a button that triggers the upload. Finally, call the handle to submit function on the on-click event handler.

1<input type="file" name="file" id="" onChange={handleEventChange} />
2 <button onClick={handleSubmit}>
3 Upload
4 </button>

Import the AdvancedVideo component into your component. This is a Cloudinary custom component. Then, call the videoSrc state in the cldvid, the same as the src in the HTML video element.

1import { AdvancedVideo } from "@cloudinary/react";
1<div>
2 <AdvancedVideo
3 cldVid={cld.video(videoSrc)}
4 controls
5 />
6 </div>

Transforming a video

Cloudinary has a react SDK that gives details of transforming our media content after uploading it on Cloudinary. You can read more about it here: https://cloudinary.com/documentation/react2_video_transformations You will create an input field with a value, name, and type to transform your video. Create a state called transformState that contains an object of all the values for the transformation. Create an onChange function and set the state in this function. This will dynamically change the field when a user types into it. Call the onChange function in the input element, call the state in the value of the input element.

1const [transformState, setTransformState] = useState({
2 width: 60,
3 height: 60,
4 });
5const onChange = (e) => {
6 setTransformState({
7 ...transformState,
8 [e.target.name]: e.target.value,
9 });
10 };
11
12 <label htmlFor="">
13 width
14 <input
15 onChange={onChange}
16 type="text"
17 value={transformState.width}
18 name="width"
19 />
20 </label>
21 <label htmlFor="">
22 height
23 <input
24 onChange={onChange}
25 type="text"
26 value={transformState.height}
27 name="height"
28 />
29 </label>
30 <div>
31 <p>width:{transformState.width}</p>
32 <p>height:{transformState.height}</p>
33 </div>

Call the state in your AdvancedVideo component.

1<div>
2
3 <AdvancedVideo
4 // src={}
5 cldVid={cld.video(videoSrc).resize(
6 fill(transformState.fill)
7 .width(transformState.width)
8 .height(transformState.height)
9 }
10 controls
11 />
12
13 </div>

You will want to set your cloud name, and upload presets name dynamically; you don’t want everyone using your application to upload their videos to your Cloudinary account. To allow users to upload and transform their videos to their Cloudinary account using your application, create a state for both the cloud name and upload presets.

1const [cldCloudName, setCldCloudName] = useState("")
2 const [preset, setPreset] = useState("");
3
4 const handleCloudName = (e) => {
5 setCldCloudName(e.target.value);
6 };
7 const handlePresetName = (e) => {
8 setPreset(e.target.value);
9 };

Create an input element that has a value, name, and type. On the onChange event handler, call the function you created. Then, call the state you created in the value.

1<div>
2 <h3>Enter your cloud name</h3>
3 <label>
4 Cloud Name:
5 <input
6 onChange={handleCloudName}
7 type="text"
8 value={cldCloudName}
9 name="cloudname"
10 />
11 </label>
12
13 <label>
14 Enter upload preset:
15 <input
16 onChange={handlePresetName}
17 type="text"
18 value={preset}
19 name="preset"
20 />
21 </label>
22 </div>

Disable the upload button until a user types in their cloud name and upload presets name.

1<button onClick={handleSubmit} disabled={(!cldCloudName,
2 !preset)}>
3 Upload
4 </button>

Below is how the interface will look like before a user upload video.

The button color changes once the user inputs the cloud name and upload preset.

when the user uploads a video to the Cloudinary, the uploaded video can be seen on the application.

Here is a link to the app: https://cloudinary-beta.vercel.app/

To see the full code click here: https://codesandbox.io/s/boring-fog-18nqi

Conclusion:

Creating a video editor for your react application can be a bit difficult. But relax! a genie has come to solve all your editing worries, and that is the Cloudinary React SDK. We hope with this tutorial; you will be able to transform and upload your videos from your application to Cloudinary with ease.

Nwokocha Wisdom Maduabuchi

Senior Technical Writer

A software engineer with considerable experience in native Android, Blockchain Technology, Smart Contracts, Etheruem, Developer Advocacy, UIUX Design, Building a static site using Eleventy, MKDocs, Hugo, Jekyll, and Docsify, DITA, Gitbook, AsciiDoc, Readme, confluence, Technical Content Manager, API Documentation, Documentation Engineer, Community building/management, Firebase.
• Developed apps from the ground up and published them successfully on Google Play
• Built open-source library and an open-source contributor/ maintainer at Gnome, Firebase, Kotlin
• Experience modern architecture, and development practices
• Write clean and maintainable codes