DEV Community

Cover image for Video Watermarking: A Step-by-Step Guide Using Node.js and ApyHub API
Sohail Pathan for ApyHub

Posted on

Video Watermarking: A Step-by-Step Guide Using Node.js and ApyHub API

In this series so far, we have explored the benefits, techniques, and best practices for video watermarking, and how it can be useful for copyright protection, branding and promotion, proof of ownership, as well as content monitoring. We also looked at the types of watermarks including visible watermarks, timecode watermarks and audio watermarks.

Here we explored in detail some of the top tools and ways you can effectively watermark your videos, including using FFmpeg, OpenCV or MoviePy. Cloud-based APIs like Cloudinary, Zencoder or ApyHub can also be particularly beneficial for content creators, online education providers, or websites with various types of video content.

In this article, we delve into how you can effectively use the ApyHub Video Watermarking API using Node JS.

To add an image watermark to a video using Node.js, follow the step-by-step tutorial below:

1. Install the required libraries:

To install all the required dependencies, run this command on the terminal of your project folder.

 npm install axios fs
Enter fullscreen mode Exit fullscreen mode

Once we run npm install in the terminal, the command triggers the installation of the specified dependencies listed in the project's package.json file. The following dependencies are commonly installed.

axios: A popular HTTP client library for making HTTP requests in Node.js. It simplifies the process of sending HTTP requests and handling responses. In this case, axios is used to make a POST request to the Video Watermarking API, sending the video URL and watermark image URL.

fs (File System): A built-in module in Node.js that provides functionalities for working with the file system. In this context, fs is used to create a write stream and save the watermarked video file. The createWriteStream function allows you to write the response data from the API request directly to a file on the local file system.

2. Create a new file:

The next step is to create a new file; for example, create a file videoWatermark.js and add the following code to import the required libraries we installed.:

const axios = require('axios');
const fs = require('fs');
Enter fullscreen mode Exit fullscreen mode

3. Define a function to add the image watermark to the video:

This function encapsulates the logic for making the API request to add the image watermark to the video, saving the watermarked video to a file using a write stream, and handling potential errors during the process. We will need apytoken which you can find from ApyHub Video Watermarking API documentation.

async function addWatermark(videoURL, watermarkImageURL, outputFileName) {

const apiURL= 'https://api.apyhub.com/generate/video/watermark/url/file?output=${outputFileName}.mp4'

     const requestData = {
       video_url: videoURL,
       watermark_image_url: watermarkImageURL
     };

     try {
       const response = await axios.post(apiURL, requestData, {
         headers: {
           'Content-Type': 'application/json',
           'apy-token': '**** ADD-YOUR-SECRET-APY-TOKEN-HERE ****'
         },
         responseType: 'stream' // To get the response as a stream
       });

       const writeStream = fs.createWriteStream('${outputFileName}.mp4'); // Path where the watermarked video will be saved
       response.data.pipe(writeStream);

       return new Promise((resolve, reject) => {
         writeStream.on('finish', resolve); // Resolve the promise when writing is finished
         writeStream.on('error', reject);  // Reject the promise if an error occurs
       });
     } catch (error) {
       throw new Error('Failed to add watermark. ' + error.response.data.error.message);
     }
   }
Enter fullscreen mode Exit fullscreen mode

4. Invoke the addWatermark function

After invoking the addWatermark function, pass the video URL and the watermark image URL as arguments. This function sends a request to the Video Watermarking API, which adds the watermark to the video and streams the watermarked video as a response. The response is then saved to a file using a write stream.

const videoURL = '***** PROVIDE THE URL OF VIDEO *****';
const watermarkImageURL = '***** PROVIDE THE URL OF IMAGE *****';
const outputFilename = '***** PROVIDE THE OUTPUT FILE NAME *****';
addWatermark(videoURL, watermarkImageURL, outputFilename)
     .then(() => {
       console.log('Watermark added successfully!');
     })
     .catch((error) => {
       console.error('Error:', error.message);
     });
Enter fullscreen mode Exit fullscreen mode

5. Save file and execute script

Save the file and open your terminal, navigate to the project directory, and run the following command to execute the script:

node videoWatermark.js
Enter fullscreen mode Exit fullscreen mode

6. Send a request to the API

The script will send a request to the API, download the watermarked video, and save it as provided file name ${outputFileName}.mp4 in your project directory. That's it! You have successfully added an image watermark to a video using Node.js.

You can use the ApyHub video watermarking tool to effectively watermark your video content, whether in the form of files or URLs. This utility can provide a variety of benefits, especially for businesses or individuals who want to protect their videos from unauthorized use and want to promote a brand or business.

ApyHub also has similar services and tools to help watermark pdfs, add footers to documents, and apply watermarks to images, which can help depending on your use case.

If you’re looking to edit video content however, you can convert video formats, or easily generate thumbnails from videos using ApyHub utilities.

Top comments (0)