In this age where media has become mainstream, numerous applications have a growing need to manipulate media files e.g video, audio and images programatically. A common use case is being able to trim portions of videos programatically and get back the clip of the trimmed portion.

In this article, we will learn how to programatically trim videos in Node JS using the VEED API. VEED.io is a simple but powerful online video editor that allows users edit videos ONLINE and for FREE. VEED makes it easy for you to do things like resize videos, trim videos, crop videos, transcribe and subtitle videos, add filters to videos and lots more. There is also a video editing API that allows you access these functionalities programatically.

Without further ado, let’s get started.

Installation & setup

To get started, we will set up the project, install all necessary dependencies and prepare to get our final result in 4 simple steps.

1. Signup and get your API Key

Follow the link to signup for your free Veed account.

Once you finish signup, you should see your Workspace Dashboard. This is your home for managing your video editing activity on Veed.

On your Workspace Dashboard, click on the Settings tab on the side menu. This will open up a section as shown below. At the bottom of the page, you will find a button that reads “Enable API”. Click on that button to enable the API section of your dashboard.

Once, you have done that, you will be taken to the section shown below. Here, you can copy your API keys which will be required for all interactions with the API. You will also notice that an API tab has now been added to your side menu for easy access subsequently.

Note:
Make sure to use the test key key_test_XXXXXXXXXXXXXX while in development and switch to the production key key_live_XXXXXXXXXXXXXX for your deployment environment.

2. Install Node and NPM

Make sure you have npm installed on your system:

node -v && npm -v

You should see the respective version numbers printed to the console. If not, you can go to the official Node.js site to get installation instructions for your platform.

Now that you have node and NPM installed, run the commands below to setup the project directory.

3. Setup project directory

Create project directory.

mkdir trim-video-app 

Enter the directory you just created and initalize the project.

cd trim-video-app && npm init -y

This will create a package.json file which holds configurations pertaining to the project but most importantly, it will contain the dependencies for this project.

4. Install dependencies

For this project, the only dependency we need to install is the VEED API Node library. To do so, execute the command below in your terminal.

npm i @veedstudio/veed-node --save

Now that we have successfully installed the necessary dependencies, for the final step we need to setup our webhook.

5. Setting up your webhook

Instead of polling the API each time in order to know when our render is complete, the VEED API provides support for a webhook so that users can receive events from time to time when an action worthy of note occurs e.g a render has started, a render has completed e.t.c

To get a webhook URL for this purpose, head over to https://webhook.site/ to retrieve your webhook URL. Copy your unique URL and head over to your Workspace dashboard. On the API tab, you’d see an input labeled Webhook URL, paste the URL you had copied earlier in there and click “Save”.

Now that we have done all that, we are ready to start trimming videos.

Trimming the video

Now we are going to write the piece of code that does the actual trimming. To get started, open the folder we created earlier in your favourite IDE and create a file called index.js.

Copy and paste the code below into this file.

const API_KEY = 'YOUR_API_KEY_HERE';
const veed = require("@veedstudio/veed-node")(API_KEY);

const FILE_URL = 'https://storage.googleapis.com/veed-docs/sample-video.mp4'

const renderOptions = {
    "elements": [
        {
            "type": "video",
            "params": {
                "source": {
                    "url": FILE_URL
                },
                "trim": {
                    "from": 2.0,
                    "to": 5.0
                }
            }
        }
    ]
}

veed.render.create(renderOptions).then((result)=>{
    console.log(result)
});

Above, we start by importing the VEED package and initalizing it inline by passing the API_KEY from our dashboard as an argument.

Next we declare a variable called FILE_URL which holds the URL to a sample video to be used for this demo.

After that, we move on to constructing the render object. The render object is a set of instructions in the form of object properties, that describes which edits should be applied to your media asset. It is typically comprised of render elements and render parameters. In the code snippet above, notice that elements is an array, suggesting that you can add as many elements as you want along with their configurations to achieve your desired outcome.

For our use case, we have added one video element. As part of the params, we specify the source of the video which points to our sample video and the trim configuration which specifies what point the trimming starts from and where it ends using the to property.

Finally, we used the VEED package to create a new render while passing the renderOptions to it as an argument.

Now we can run the script from the terminal using the command below.

 node index.js

On success, you should find a payload containing the render ID as shown below printed on the console.

{ id: '163688fb-4626-4f12-a165-12576fe54023' }

Getting the trimmed video

There are several ways to get the trimmed video.

1. Using the webhook

Return to the https://webhook.site page where you had copied the webhook URL that you added to the dashboard. You will notice that the several events are being sent to this URL as the render proceeds.

You can find the list of events received on the left. You can click on any them to see the data that was sent in each payload. You would notice the the render starts out from progress percentage 0, up until 100 when the render is completed.

{
  "type": "RENDER/PROGRESS",
  "payload": {
    "render_id": "17cf9aad-807d-4f68-98b7-f748b8d67c22",
    "percentage": 0
  }
}

On completion, you get a RENDER/SUCCESS event which contains the URL to the trimmed video as requested.

{
  "type": "RENDER/SUCCESS",
  "payload": {
    "render_id": "e52aad52-5ab0-465d-8341-fdabd6302cf1",
    "progress": 100,
    "url": "https://storage.googleapis.com/veed-prod-video-bucket/veedapi%2Frenders%2Fe52aad52-5ab0-465d-8341-fdabd6302cf1%2Foutput%2Fh5PIjzgDpai~x1srAbH1X.mp4?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=prod-api%40veed-prod-server.iam.gserviceaccount.com%2F20210228%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20210228T210416Z&X-Goog-Expires=9000&X-Goog-SignedHeaders=host&X-Goog-Signature=4ce2e4664470fb81f450e91fe63bdcd29e1077eed756a94eb3923b5740acbbc4618a91b148a5cd4b3540db615a95f0842893cc013aa965a8099d671724de058852816ec795bd17d483a51b944b8cc461a7b3bf0e3f51b5ed702dde0a5bbada3bb68fcc1de3d6fd1bcb8262f3199b28218d2de0dd9a4b2eaee5583b0ccbd52022e5a99a49f71972ed1c0ba28a9ae2d93f0e1b88f2b1308f8ff6375ad3ae31c80c42a9968d7ee572cfab03c0e153ac3ee67a4cdf9f8f8b4dca3fa42ae4240e01e259aa4808973607a71df681bee691e64d663436600b0b95852d26aa857dfc6d74e571207c93d201f31d0e1505dbc374d36076bf5caccd6a38281771af50017892"
  }
}

2. Poll the API

Without the webhook, there is no way to tell at what exact time a render is complete. Hence, another approach will be to poll the API. You can use the VEED package for this. Simply replace veed.render.create(renderOptions) with veed.render.get({id:'YOUR_RENDER_ID_GOES_HERE'}). Run the script again. You should see the response printed to the console. If the render is completed and the download URL is ready, you will get a response like the one below:

{
  id: '540ba741-bead-42cd-bcbe-dcd2d0663d8d',
  workspace_id: '78c897c9-810d-4a33-97e2-15c796a05161',
  data: { elements: [ [Object], [Object] ] },
  latest_event: {
    type: 'RENDER/SUCCESS',
    payload: {
      render_id: '540ba741-bead-42cd-bcbe-dcd2d0663d8d',
      progress: 100,
      url: 'https://storage.googleapis.com/veed-prod-video-bucket/veedapi%2Frenders%2F540ba741-bead-42cd-bcbe-dcd2d0663d8d%2Foutput%2FzBG_du_k~qL5dLS9YT6Oa.mp4?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=prod-api%40veed-prod-server.iam.gserviceaccount.com%2F20210301%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20210301T084032Z&X-Goog-Expires=9001&X-Goog-SignedHeaders=host&X-Goog-Signature=7b9dd8d71a055867a1cc0947f24050ec145b863be3c787963f820ff218d9a55201c45b509cbdb48c8460a71c2f3c433c4809c55ffa610c5964d07e7fdcee3f19f3bb2cde93b104b7b66930fde8ccbc278c0a33afac5ad671d6265ab2e6e9ae0a96ddf6103ba7028f3508dfd1fb35aef37dc6a0cf28d245fcfc8d4ef825a3656aec6f0cee6f25c69422351e84d56226129b9168ce364d394bbffd8682b37efdd438b90b259aa964e41b714660343885020b3a4664db37c35019b82f397d270085881098a1ece6a7e2bc4c055d4db6b3ea3137fbd2c7576eb140b8ef1cb2d6479d36094450b2ee82335a84514b5ec14c28ef770eb0c4188e8fde6321ff68ee28a9'
    }
  },
  created_at: 1614588003775,
  modified_at: 1614588032628
}

You can now copy the url and paste it into your browser. Hit enter and the download should start automatically.

Conclusion

We have successfully learnt how to trim videos in Node using the VEED API. While this is merely a demo showcasing what’s possible, feel free to take things further by building out your own application or API that utilizes this API in a more clever way and share in the comment section below.

I’d love to see the magic you create. See you in the next one!

Resources

• Our website
• More about our API
• Our API Documentation