DEV Community: Philip Obosi

How to subtitle videos using the VEED API

Philip Obosi — Tue, 30 Mar 2021 00:46:17 +0000

In modern times, captioning videos has become a major way to make your content standout as it makes it easier to follow along with the dialogue as viewers watch a video.

Another, not so obvious reason to add captions to your videos is acessibility and improved SEO on video platforms like youtube.

In this article, we will walk through the steps required to subtitle videos automatically via the VEED API.

Let’s get into it!

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 subtitle-video-app

Enter the directory you just created and initalize the project.

cd subtitle-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 subtitling videos.

Subtitling the video

We will break the steps involved in subtitling a video into two as shown below:

Upload and transcribe video
Subtitle video

Upload and transcribe video

First we need to create the transcription. Video transcription is the process of translating your video's audio into text.
To transcribe a video with the VEED API, you need to create an asset (check out our managing media assets guide for more info on how to do this). As you are creating the asset, you will need to pass the transcribe: true option as a body parameter.

Subtitle video

Once you have your asset uploaded and processed (with the transcription), we can start constructing the render object request for the subtitles.

First we need to add uploaded asset as a video element:

{
  "elements": [
    {
      "type": "video",
      "params": {
        "source": {
          "asset_id": "28a510a8-6690-4cdc-b319-e0e02ebf1a2e" 
        },
      }
    }    
  ]
}

Next step is to create a subtitle element, making sure it references the correct asset_id

{
  "elements": [
    {
      "type": "video",
      "params": {
        "source": {
          "asset_id": "28a510a8-6690-4cdc-b319-e0e02ebf1a2e" 
        },
      }
    },
    {
      "type": "subtitles",
      "params": {
        "source": {
          "asset_id": "28a510a8-6690-4cdc-b319-e0e02ebf1a2e" 
        },
      }
    }
  ]
}

Now you are ready to send the request. Save the above as a render.json file, and run this command:

-X POST \
  --header "Authorization: veed_test_oEnZhnd3vg0LEoTs6Z9Ij" \
  --data @render.json \
  https://api.veed.io/api/render

Make sure to use your own API key. You should get a response that looks like this:

{
  "id": "b477e483-592a-4bc6-a22b-563ef7f48e25",
}

Getting the result

We recommend using a Webhook to process all your rendering events, but for this example we'll be polling the API (you can find more info on polling the API here, under 'Getting the final render'):

curl \
  --header "Authorization: veed_test_oEnZhnd3vg0LEoTs6Z9Ij" \
  https://api.veed.io/api/render/b477e483-592a-4bc6-a22b-563ef7f48e25

You should get a RENDER_SUCCESS response, once the rendering is done:

{
    "type": "RENDER/SUCCESS",
    "payload": {
      "id": "b477e483-592a-4bc6-a22b-563ef7f48e25",
      "progress": 100,
      "url": "https://cdn.veed.dev/R1vqZ0KfPp5y2z7ddiTyt.mp4"
    }
  }

You can use the urlin the response to download the render and enjoy your new video, with hardcoded subtitles!

Getting the subtitled video

There are several ways to get the subtitled 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 subtitled 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

Congratulations, you have successfully learnt how to transcribe and subtitle videos in Node using the VEED API. You are encouraged to explore the API further using the documentation and build 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

How to watermark Videos & Images in Node using the Veed API

Philip Obosi — Mon, 29 Mar 2021 22:30:39 +0000

Watermarking videos is a basic and efficient way to brand your content as in individual or business. The VEED API provides support for doing this automatically which you can very easily take advantage.

In this article, we walkthrough the steps involved in doing so using Node JS.

Let’s get right into it!

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.

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 watermark-video-app

Enter the directory you just created and initalize the project.

cd watermark-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

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

Watermarking the video

Now we are going to write the piece of code that does the actual watermarking. 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
                }
            }
        },
        {
            "type":"text",
            "params":{
                "value":"WATERMARK",
                "style":{
                    "font":"Helvetica",
                    "size":48.0,
                    "display":"normal",
                    "color":"#FFFFFF",
                    "secondary_color":"#ffffff",
                    "align":"center",
                    "line_height":0.0,
                    "letter_spacing":0.0,
                },
                "position":{
                    "origin":"bottom left",
                    "x":0.5,
                    "y": 1.0
                },
                "z_index":1
            }
        }
    ]
}

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.

Above, we have added one video element and specified it’s source using the source parameter . We have also added a text element that is used specify the watermark to be added as well as it’s configurations.

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 watermarked video

There are several ways to get the watermarked video.

1. Using the webhook

{
  "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 watermarked 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

{
  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

Congratulations, you have successfully learnt how to watermark videos in Node using the VEED API. You are encouraged to explore the API further using the documentation and build 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

How to trim videos in Node using the Veed API

Philip Obosi — Sun, 21 Mar 2021 12:13:04 +0000

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.

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

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.

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

{
  "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

{
  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

Get started editing videos with the VEED API.

Philip Obosi — Sat, 20 Mar 2021 21:43:46 +0000

VEED is a simple yet powerful online video editor. Through the VEED API, you are able to build automation workflows and robust video editing applications without sweating the "hard" stuff.

This means that you'll be able to integrate features like transcoding, transcribing and subtitling, trimming, cropping as well as add elements like text, progress bars, audio waves, and media elements( audio, video and images) to videos programmatically

If this is something that interests you, you may follow the steps below to set up your account so you can start making awesome video edits with the VEED API.

1. Signup for your Veed account

To use our API, first you need 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 the Free plan, you are able to edit videos of maximum duration 10 minutes. You will not be charged for this unless you choose to upgrade for more editing power.

2. Get your API Access Key

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.

Note:
Make sure to use the test key as shown below while in development.

key_test_XXXXXXXXXXXXXX

Remember to switch to your live keys when taking you application live.

key_live_XXXXXXXXXXXXXX

3. Adding your Webhook URL(Optional).

If you would like to make use of Webhooks(recommended) instead of poll the API in order to keep track of the status of renders, make sure to add your webhook URL in the field provided(See image below).

You may learn more about working with webhooks here.

4. Authenticating API Requests

For authenticating requests, the VEED API uses API Keys. These keys can be retrieved and managed via your Workspace dashboard.

During development, make sure to use the test secret key which have the prefix

key_test_

For your production environment, make use of the production secret key with the prefix

key_live_

.
At the moment, your API keys carry administrative privileges and can carry out any action enabled on the API, so be sure to keep them secure. Do not share your keys in publicly accessible places like Github, on client-side code, documentations, tutorials and so forth.

To make use of the API keys, attach them to the Authorization request header for your request(See example below).

curl --request GET \
  --url https://api.veed.io/api/assets \
  --header 'Authorization: veed_test_xxxxxxxxxxxxxxxxxxxxxxxx'

🚧 Note:
You should make all API calls over HTTPS and always authenticate every request

Conclusion

Now that we are now familiar with the VEED API, our next set of articles will dive into specific applications and use cases for which you should be able to utilize the API in your applications. Until then feel free to learn more about VEED via the resources below.

Resources

UI Snippets: Say NO to Ugly Check-boxes!

Philip Obosi — Thu, 09 Aug 2018 23:56:21 +0000

Okay!!! I'm not exactly a front-end guru but it really just doesn't sit right with me when i visit certain websites and find poorly designed check-boxes being used on them. Trust me it hurts even more when the checkbox still holds its default look.

Disclaimer: Please note that this project is just a showcase of how we can improve the aethetics of checkboxes. It doesn't claim to abide by the best practices and principles of acessibility. Just a CSS Stunt!

So i did a little Codepen to start the war against ugly check-boxes. Take a look and let me know what you think about it in the comment section.

Do well to share your own beautifully designed checkboxes too. We all could learn a thing or two.

Codepen URL: https://codepen.io/worldclassdev/full/xJmrax/

Connect with me on twitter will you? @worldclassdev

Gracias!

Javascript Algorithms #2: Palindromes

Philip Obosi — Wed, 01 Aug 2018 15:29:31 +0000

Palindromes! Palindromes!! Palindromes!!! Ooooh boy. I'm pretty sure that by now you are wondering what these are. You know personally as a software developer when someone utters words like this while communicating with me i gesture awkwardly and give a pretty obnoxious smirk to indicate some level of disinterest. I'm really not a fan of confusing people.

Seat belts on? Let's do justice to the big word. Shall we?

A palindrome is a word, number, or other sequence of characters which reads the same backward as forward, such as "madam" or "racecar". Using a bit of programmer's speak we could say it's a string of text that doesn't change when re-arranged in reverse(the opposite direction).
So much for the big word huh?

The Challenge

Given a string of text, return true or false indicating whether or not the text is a palindrome.

PS: I remember taking this challenge once during Andela's test.

Algorithmic Logic

The challenge says "given a string of text" which implies that our function would have a string-typed parameter which we may call "text". Next, we are to evaluate if the string is a palindrome. To do this, we'll have to reverse the string first and then compare it with the string that was passed in as an argument.
To avoid issues with letter casing, it seems reasonable to convert text to a single case type, be it upper or lower. Finally, we are to "return true or false" depending on the result of our evaluation. True for when it is a palindrome and false for otherwise.
All said! You shall now proceed to the Code Dojo.

Code Implementation

There's quite a handful of approaches to implementing a palindrome checker and this mostly due to the fact that there are several ways to reverse a string and several ways to loop through a string. Hence, there's a couple of stunts and combos one could pull off. However we'd consider two unique ways to implement this below:

The Intuitive Approach

Okay, i must confess the title sounds a bit misguiding. This isn't exactly the first thing everyone would do if they are presented with this challenge. It's really just a direct approach to solving the problem. How direct? You'd see.

/*
The Intuitive Approach: This is mostly a direct
approach that most would follow. We split the
string into characters, reverse the array of characters,
join the characters back to form a string, and then
test the created string against what was originally received.
*/
function palindrome(text) {
// Split, reverse and join string to get reversed text
var reversedText  = text.toLowerCase()
                    .split('').reverse().join('');


return text === reversedText;


}

I'm sure there's someone thinking "this really isn't direct at all". Oh well! Let's unveil the "mysteries", shall we?

First our function accepts a parameter which is the string of text which is to be tested.
Next, we convert all letters of the string to lowercase, then call the .split() method on the string that is received and pass it an empty string in order to spread the characters into and array.
Next, we call .reverse() on the array to re-order its elements in reverse.
After that we call .join() on the reversed array to form a string once again.

Voila! we have a reversed string. Notice how we chained all these methods in succession making our code concise yet functional. This is one of the reasons i love Javascript. Elegant syntax!

At the end we return the result of our comparison which is a boolean indicating if the string that was passed in equals the reversed string we created. This tells us if the text that was passed in is a palindrome.

Capiche!!! That was easy wasn't it?
Let's try something slightly more complex.

Looping through and Comparing Characters

Hmmmmmm! I did call this a slightly complex implementation.

Disclaimer: This could be a bit more confusing than you expected. But i'll break it down to the best of my ability. So, fear not!

Following this approach we try to loop through the string as it was passed in and compare each character with the character currently in the position it'd have taken if the string was reversed.

For example if we were testing the string "developer", we would compare "d" with "r" because if the string was reversed "d" would take "r"s position. Weird punctuation, I know! smiles

Correspondingly we'd compare "e" in position 2 with "e" in position 2 from the end as well. If the string were a palindrome, all of these would test true.
Alright now! Let the code speak for itself.

/*
Looping and Comparing using .every(): This approach allows us to
split the sting into an array of characters and then loop through
the characters comparing them with the characters in their
corresponding positions from the right.
*/
function palindrome(text) {
// Split text into array of characters
let charArray = text.toLowerCase().split('');


// Loop through every character and compare with the
// character in its corresponding position if the string
// was reversed. Then store the result
let result = charArray.every((letter, index) => {
return letter === charArray[charArray.length - index - 1];
});


// Return the result of the evaluation
return result
}

Dramatic sound effect here…lol… I'm really just too playful.

Well, i'm sure you must've noticed that learning to do amazing things with core Javascript is a fun and adventurous process. Alright let's do the review thing.

We converted all letters of the string to lowercase, then used .split() once again to spread the characters of the string into an array.
Next we use a special array method .every() to loop through the array an perform our check. Basically, the .every() method tests whether all elements in the array pass the test implemented by the provided function. The provided function in our case accepts the current letter and its index in the array as parameters. Then we return the result of the comparison between the letter and the letter currently occupying the position this letter would assume if the string was reversed. Learn more about .every() here.
Cumulatively, the .every() method would evaluate to true if the test passes in all cases and false if it didn't. The result of that evaluation is what we store in the variable "result" and that's what our function returns as an indication that the string failed or passed the palindrome check.

Perhaps you noticed too? There's something intrinsically wrong with our second implementation performance-wise. Maybe try identifying it by yourself before you proceed with the rest of the article?

Okay, here it is. We loop through the entire string and compare every letter with the corresponding letter in its position in reverse. Maybe take out a pen and paper and try to do this manually, then you'd notice that once you loop beyond the string holding the middle position, you are intrinsically repeating comparisons you've already gone through in the first half of the iteration. That's redundant, don't you think?

In order to fix this, we'd add a check to ensure that we stop looping once we get to the mid-point of the string. I'd really like you to try your hands on optimizing this. I'll be posting the solution in the comment section and on twitter after seeing what you could come up with.
Have fun while at it!

Evaluation & Summary

We've now examined two ways to implement a palindrome checker in Javascript. Both implementations are okay and could help you pass that coding interview.

However as is our concern in this case, we need to determine which has higher performance characteristics as we take a look at their pros and cons.

In my next article i will explore more ways to implement this algorithm as we consider other stricter variations of palindromes, then we'd run a performance test to determine the most highly performant.

Feel free to implement this in other ways and explore the pros and cons of using each method. Also share them with everyone in the comment section (possibly a link to your pen). We look forward to seeing them. Ask questions as well. I'm sure we'd be able find the answers somehow.

Please share this article with other's too if you found it helpful. You received freely, give freely. I also won't mind a round of applause you know (winks).
Clap so others get to enjoy this too!

Connect with me on twitter will you? @worldclassdev

SUBSCRIBE HERE FOR UPDATES & STAY TUNED FOR THE NEXT ARTICLE ON THE SERIES.

Javascript Algorithms #1: Counting the Vowels in a String Of Text

Philip Obosi — Thu, 26 Jul 2018 04:58:53 +0000

Over the years, Javascript has continued to gain lots of attention as its increasingly vast capabilities continue to expand. It has grown from being just a client-side scripting language for making cool interactive web interfaces to being used extensively on the server-side, for mobile applications, desktop applications, embedded systems, IOT, and so on.

However, it's become clear that despite the wide range of frameworks available to enhance the strengths of a Javascript developer, it eventually all boils down to understanding the basics. The ability to manipulate vanilla Javascript to do things in the most efficient way is what makes the difference. There's really so many Javascript developers out there these days and it makes me wonder how many of us really know our stuff.

In this series, we will be implementing various algorithms using Vanilla Javascript. We will explore various solutions and examine the pros and cons of each approach. We'd also be posting links to a CodePen show-casing these implementations. It'll benefit you most when you try to re-create these solutions on your own as well as make an attempt to improve them.

We'd recommend that you try to do it yourself first and only refer to the code to get pointed in the right direction, confirm your solutions, and study other approaches. The algorithms will range from writing basic to advance algorithms hence, some of these challenges would be indeed very challenging. Do not be discouraged. That's the point of it all and that's how you get to grow as a developer.
So sit tight and enjoy the ride. Let's all grow together!

The Challenge

Basically, we want to be able to receive a string of text of any length and return the number of vowels found within the text.

Algorithmic Thinking

"Men! This isn't as easy as i thought" by Tim Gouw on UnsplashReading through the challenge statement above, you'd notice the statement** "receive a string of text"**. If you're quite used to programming in general, this should bring the idea of functions to mind. We could write a function that'd have a parameter called "text". Text would be a string of any length which would be passed to the function as an argument when it is called.

Next, within the function we have to go through the text and search for occurrences of the English vowels (a,e,i,o,u).

The function then returns the total number of matches(vowels) found. This should bring "return statements" to mind as they basically stop the execution of a function and return a value from that function.

Code Implementation

Oooooohhh yeah!!! We got the boring stuff out of the way. These algorithms won't write themselves, would they?
We'd explore two ways to implement this. First we'd follow an Iterative approach and then the use of Regular Expressions.

An Iterative Approach

In the iterative approach, we would have to loop through each letter of the string passed and then check to see if they match any of the vowels. Before running through the text we would have a counter initialized and assigned a value of zero. In a case where there's a match, we would increment the counter. Pretty simple right?

Well here's our implementation:

/*
An iterative approach to counting the number of vowels in a
string of text.
*/
const vowels = ["a", "e", "i", "o", "u"]


function countVowelsIterative(text) {
// Initialize counter
let counter = 0;


// Loop through text to test if each character is a vowel
for (let letter of text.toLowerCase()){
    if (vowels.includes(letter)) {
       counter++
    }
}


// Log formatted response to console
console.log(`The text contains ${counter} vowel(s)`)


// Return number of vowels
return counter
}

/* 
    ============== Test Case ===================
*/
countVowelsIterative('I am a world-class developer using iterations');
// Logs "The text contains 16 vowel(s)" to the console
// returns 16

Well, that was pretty self explanatory right? Let's go over some key points.

First, we declared a constant "vowels" which contained an array of the five English vowels.
Next, we make use of a for…of loop to iterate through each letter of the text. If you're not conversant with this, a for…of loop basically creates a loop iterating over iterable objects. Iterable objects could be strings, arrays, maps, sets etc. You can learn more here.
Notice how we convert all letters of the text to lowercase within the loop. This is because, we don't want to miss the cases of uppercase vowels within the passed text (trust me that wasn't intentional).
Next within the loop, we use an if statement to check if the selected letter is included in the array of vowels we defined earlier. Fittingly, we call the includes() method on the array of vowels to determine whether the array includes the selected letter, returning true or false as appropriate. Learn more about how includes() works here.
If the condition evaluates to true, we increment the counter.
After looping through we log a formatted message to the console telling us the number of vowels and then return the counter which is equivalent to the number of vowels found.

Wheeewww!!! That felt good. Now let's consider a slightly more advanced yet concise approach.

Using Regular Expressions

Regular Expressions are quite a bit of a trouble for most developers in my experience. Usually, we don't get to understand the syntax and its application. Hence, we mostly get some snippets online when we need to make use of them. Okay then! Let's try to change that!

Basically regular expressions help us find patterns or characters/ character combinations within strings. See why this is relevant to us? They'll help us find the desired characters within the text passed. By extension, regular expressions can help us to do way more remarkable things such us the implementation of content filters. However, my favorite thing about Regular Expressions is the fact that the basics stay same across all languages.

Without further ado, let's examine the solution. If you'd love to learn more about Regular Expressions in Javascript, go through the Mozilla Developer Network's documentation here.

Here's our implementation:

/*
    Using Regular Expressions to count the number of vowels in a 
    string of text.

*/

function countVowelsRegex(text) {
    // Search text with Regex and store all matching instances 
    let matchingInstances = text.match(/[aeiou]/gi);

    // Check if matching instances exist then calculate length
    if(matchingInstances) {
        // Log formatted response to console 
         console.log(`The text contains ${matchingInstances.length} vowel(s)`) 

         // Return number of vowels
        return matchingInstances.length
    } else{
        return 0
    }
}

/* 
    ============== Test Case ===================
*/
countVowelsRegex('I am a world-class developer uisng Regex');
    // Logs "The text contains 13 vowel(s)" to the console
    // returns 13

I guess you won't need a review of this one, would you? Okay! Okay! Let's look at the solution.

The first thing we did within the function was to call thematch() method on the text which returns an array of the matches found after matching the regular expression passed as an argument against the text. Learn more about how match() works here.
The regular expression specifies the letters to be looked for within the brackets[]. For simple patterns, Regular expressions are usually defined within a pair of slashes. Notice the characters "gi" trailing the closing slash?
"g" stands for a global search which does not return after the first match, restarting the subsequent searches from the end of the previous match.
"i" stands for case insensitive search which makes the whole expression case-insensitive (for example /xyz/i would match XyZ).
Next we use a conditional to check if any matching instances were found. The .match() method used above returns an array of the matched items if matches were found and "null" if they weren't. Hence in the conditional, if "matchingInstances"evaluates to a truthy value(that is an array of matches found), we log a formatted message showing the number of vowels which is same as the length of the array. Then we return the number as well. On the other hand if it evaluates to a falsy value, we return 0 as it means no matches were found.

Evaluation & Summary

We have now successfully implemented an algorithm that counts the number of vowels in a string of text in Javascript.

Let's evaluate both methods used. The iterative approach although not as concise as the other is an easier and somewhat more logical approach especially for beginners. However as the result below shows, the Regex method is better optimized.

Click here to run these tests by yourself.

Perhaps we could say the Regex method wins? Nevertheless, both approaches work and could be used in an interview situation.

Was this exciting for you? Let me know in the comment section below. It really was for me. We were able to successfully examine two approaches to implementing an algorithm that helps us count the number of vowels within a given piece of text. In the process, we've learnt about some Javascript methods and regular expressions. These tools are very important items in a Modern Javascript Developer's toolbox.

Please share this article with other's too if you found it helpful. You received freely, give freely. I also won't mind a round of applause you know (winks).

Connect with me on twitter will you? @worldclassdev

SUBSCRIBE FOR UPDATES HERE & STAY TUNED FOR THE NEXT ARTICLE ON THE SERIES.

Leveraging the Power of the Javascript Console in Development

Philip Obosi — Tue, 06 Feb 2018 06:36:52 +0000

As a software developer, you are most likely overwhelmed by the endless list of development tools out there. Even I struggled for a while trying to choose which ones best suited my development workflow. In most cases i ended up cluttering my developmment environment with tools i either never got to use or tools that remained mostly under-utilized as all they did was sit there.

After years of inefficient development and constantly re-inventing the wheel, i discovered a very powerful tool that i had ignored. One that every software developer and internet user alike had by default "The Javascript Console". "Thats console.log right? I'm quite familiar with the console." But are you?

In this article, we will carefully explore the extensive array of applications in which the console could be of help to a software developer.

What is the Console?

The javascript console is an in-built feature in modern browers that comes with out-of-the-box development tools in a shell-like interface that allows a developer to:

View a log of errors and warnings that occur on a web page.
Interact with the web page using javascript commands.
Debug applications and traverse the DOM directly in the browser.
Inspect and analyze network activity

Basically, it empowers you to write, manage and monitor Javascript right within your browser.

Launching the Console in your Browser

The javascript console comes in-built and can be accessed with ease via the following keyboard shortcuts in the following browsers:

For Mozilla Firefox

For MAC users: COMMAND + OPTION + K

For Windows and Linux users: CTRL + SHIFT + K

For Google Chrome

For MAC users: COMMAND + OPTION + J

For Windows and Linux users: CTRL + SHIFT + J

For Google Chrome

For Windows users: F12

For Safari

For MAC users: COMMAND + OPTION + C

For Opera mini

For MAC users: COMMAND + OPTION + I

For Windows and Linux users: CTRL + SHIFT + I

You should have an interface like this one, most likely docked to the bottom

Exploring the Console API

During development, it is very important for developers to master the art of consoling themselves through the debugging process. Let's explore some of the perks of working with the Console API. There’s a lot of untapped potential in there☺

Console.log

This is probably the most used method of them all. It displays a message in the console. When you pass one or more objects to this method. Each object is evaluated and concatenated into a space-delimited string.

    console.log( "The current time is:", Date.now());

This would print out the corresponding message to the console as shown below:

This similar to console.debug().

Console.group

This method helps you group the logs made to the console. All console output that occurs after console.group() and before console.groupEnd() is visually grouped together. For example,

    function name(obj) {
      console.group('Country Profile');
      console.log('name: ', obj.name);
      console.log('continent: ', obj.continent);
      console.log('type: ', obj.type);
      console.groupEnd();
    }

    name({"name":"Nigeria","continent":"Africa","type":"Democratic"});

In a situation where you have many log groups, make a call to console.groupCollapsed instead of console.group. This will display the groups in a collapsed default mode.

The output should look like this

Console.trace

This method simply prints a stack trace from the point where it was called. This helps you track the execution of your code. As this is beyond the scope of this article, you can learn more about stack traces and how they work via this link

Console.table

Basically, this helps you display tabular data (usually an array) as a table.

    let food = [
      { name: "Rice", class: "carbohydrate" },
      { class: "protein", name: "Beans" }
    ];

    console.table(food);

The output:

Console.error

This method outputs an error message. Unlike the message from console.log(),it styles the message like an error, and includes a stack trace from where the method was called.

    console.error("error: can't identify file type");

This is similar to console.exception() and console.warn().

Console.count

This counts and outputs the number of times that count() has been invoked on the same line and with the same label. It is able to recognize the label anywhere within the application.

    function insert(city) {
      console.count(city + 'registered');
    }

The output:

Console.time and Console.timeEnd

Console.time starts a timer with a name specified as an input parameter and can run up to 10,000 simultaneous timers on a given page. Once initiated, we use a call to console.timeEnd() to stop the timer and print the elapsed time to the Console.

    console.time('total');
    console.time('init arr');
    var arr = new Array(10000);
    console.timeEnd('init arr');
    for (var i = 0; i < arr.length; i++) {
      arr[i] = new Object();
    }
    console.timeEnd('total');
    // init arr: 0.0546875ms
    // total: 2.5419921875ms

Console.clear

This clears the console

    clear();

Console.assert

This method logs a message and stack trace to console if the evealuated expression is false.

    function lesserThan(a,b) {
      console.assert(a< b, {"message":"a is not lesser than b","a":a,"b":b});
    }
    lesserThan(5,6);

The output:

Common operations carried out with the Console

The console comes in handy for a large range of functions in development. These include:

Diagnosing and logging to console
Time and monitor executions
Handle exceptions and errors
Monitor events
Evaluate expressions
Comparison of data objects

Conclusion

The countless number of operations that can be carried out effectively via the javascript console makes it a good tool to integrate into your development workflow. Its better to master a few tools than have so many under-utilized tools clogging your workspace.

Helpful Resources

Continue learning about leveraging this awesome technology via the links below: