live - create

Videos - Upload a Thumbnail

Normal

doug.jpg

twitter-brands.svg

Doug Twitter

Doug Sillars

Tutorials

NodeJS

JavaScript

When publishing a video on the web, sometimes it is desirable to add a defining mark on the video, often called a watermark.

When you use api.video in the sandbox, we add a watermark to show that the videos are being played back in our test environment:


medium_screenshot-2021-05-25-at-06-50-01.png

small_screenshot-2021-05-25-at-06-50-01.png

thumbnail_screenshot-2021-05-25-at-06-50-01.png

screenshot-2021-05-25-at-06-50-01.png

Perhaps you want to add your corporate logo in the corner of the video.  Or perhaps the class name.  There are a number of different reasons you might want to add a watermark to your video, and in this post, I'll walk through two approaches to add a watermark to your videos. 

NOTE: We now have watermarking available as part of the API. Check out the new way to update content here: [https://docs.api.video/reference/post_watermark](https://docs.api.video/reference/post_watermark)
 
## The watermark

In this study, we'll be adding the api.video logo as our watermark.  I (randomly) chose to insert the logo in the top right corner of the video.



logoorange100.png

Your watermark should be appropriately sized for the space in the video.  In this case 100x100 pixels to fit inside a 1920x1080 video (~5%x10% of the screen). 

I have adapted the [record.a.video](https://record.a.video) app to add a watermark and you can test it at [watermark.a.video](https://watermark.a.video), and in this app, I have provided 2 ways to add the watermark: the frontend and the backend.  

medium_screenshot-2021-05-25-at-07-50-14.png

small_screenshot-2021-05-25-at-07-50-14.png

thumbnail_screenshot-2021-05-25-at-07-50-14.png

screenshot-2021-05-25-at-07-50-14.png

If the box is checked, the watermark is inserted on the frontend. If unchecked, the watermark is added on the backend.  The field allows you to change the image being added as a watermark.  

## Frontend Watermark

In the watermark.a.video application, the screen (screenCaptureAPI) and the camera (MediaRecorded API) are drawn to a canvas.  I've [described this process in detail](https://api.video/blog/tutorials/building-record-a-video-the-screencapture-api) with code samples. The canvas is refreshed every 20ms, giving 50 FPS video on the canvas.  

To add a watermark, I simply load the image into the app, and instead of only drawing the screen (videoElem) and the camera (cameraElem), I add the watermarkImg:

```
        console.log("FE watermark", canvasWatermark);
        //load watermark image
        var watermarkImg = new Image;
        watermarkImg.src = canvasWatermark;
            //draw the 2 streams to the canvas
            drawCanvas(videoElem, cameraElem,watermarkImg,ctx);

```

Inside the drawCanvas function, I draw the watermakrImg on top of the other 2 elements (by placing it last in the list of things drawn):

```
    function drawCanvas(screenIn, cameraIn,watermarkImg, canvas){
        var textLength = 60;
        canvas.drawImage(screenIn, screenX0,screenY0, screenX1, screenY1);
        canvas.drawImage(cameraIn, cameraX0, cameraY0, cameraX1, cameraY1);
        canvas.drawImage(watermarkImg, watermark_x, watermark_y);
```

For this demo, I have hardcoded the watermark to be in the upper right corner, so watermark_x = watermark_y = 25.


## Backend Watermark

Perhaps the watermarking for your videos needs to be hardcoded into your process, or you do not want your users to be able to modify the watermark. Adding a processing step in the backend to insert a watermark makes this easy.

> Note that this approach oly works on a live stream, and not with the video on demand.  The VOD recording is done completely on the front end.

In the [record.a.video](https://record.a,video) app, livestreams are sent to a NodeJS server, where the WebRTC video recorded by the browser is converted to RTMP for ingestion into the api.video livestream server.  This conversion is done with FFMPEG.  We can simply modify the FFMPEG command insert the watermark on top of the video while it is being transcoded.  

```
			var ops = [
				'-i', socket._watermarkUrl,
				'-i','-',		
         '-preset', 'ultrafast', '-tune', 'zerolatency', 
			       '-r', framerate, '-g', framerate*2, '-keyint_min',keyint_min, 
				'-filter_complex', '[1:v][0:v] overlay=25:25',
     				'-c:a', 'aac', '-b:a','44k', '-ar', 44100, 
			        '-f', 'flv', socket._rtmpDestination		
		
		];

```

The FFMPEG options for watermarking has 2 lines added to the code from record.a.video.

```
				'-i', socket._watermarkUrl,
```

We have to give the URL of the image to add as the watermark.

```
	'-filter_complex', '[1:v][0:v] overlay=25:25',
```

The filter complex tells FFMPEG the order of the overlay.  Since I add the watermark first (index 0), and then the video stream(index 1) - we place the video stream first, and then the watermark on top, with an offset of 25x25.

FFMPEG reads the image file and just inserts it on each frame encoded to the api.video server.

### Watermark addition

In both cases, the live video that is sent to api.video has the watermark added. In the first case it is added in the browser as the video is being recorded, and in the second case, it is inserted by FFMPEG during a transcoding step.

Here's what the resulting video looks like:




In either case, you can see that we have successfully added the api.video logo as a watermark in the upper right corner.  Try out the demo: [watermark.a.video](https://watermark.a.video).  If you want to add watermarks to your videos - try out [api.video](https://dashboard.api.video/register). Feel free to fork the repo on [Github](https://github.com/dougsillars/watermarkavideo) and try it out yourself! And you can check out all the API reference documentation here: [api.video API Reference documentation](https://docs.api.video/reference/overview). If you have any questions or suggestions, please let us know on our [communtiy forum](https://community.api.video/). 



large_1024px-watermarksample.jpeg

medium_1024px-watermarksample.jpeg

small_1024px-watermarksample.jpeg

thumbnail_1024px-watermarksample.jpeg

1024px-watermarksample.jpeg

Watermarking your video or live stream

medium_screen-shot-2021-01-26-at-11-48-47-am.jpg

small_screen-shot-2021-01-26-at-11-48-47-am.jpg

thumbnail_screen-shot-2021-01-26-at-11-48-47-am.jpg

screen-shot-2021-01-26-at-11-48-47-am.jpg

Erikka Innes

Python

Video thumbnails have the power to make a video more watchable. Thumbnails give people an initial impression of what your video is about. 
If you have time, the best thumbnail for a video is going to be one where you choose something representative of the video's content, and then add it. But sometimes, you might not have the time to manually choose the perfect thumbnail for every video you create. Sometimes, you might just want to quickly add a thumbnail that represents a frame from the video, and move on. 
You can easily accomplish this with FFMPEG for Python. 

## Pre-requisites

* Mac that's OSX10.7 or higher (as always, you can tweak the instructions for Linux or PC if you want to try that but it's a Mac focused tutorial)
* Homebrew - if you don't have it we'll include a little about installing it
* Xcode - you can add this as part of a homebrew installation
* api.video account - you can get one for FREE right [here](https://dashboard.api.video/register)
* Python
* requests module for Python
* ffmpeg-python
* Homebrew - installation of FFMPEG is much easier with homebrew

## Install FFMPEG
Sometimes an FFMPEG install can get complicated. You'll see a lot of people online asking why their installation doesn't work. If you have a Mac, there is an easy answer to this problem...hopefully. Let's go over one simple way you can install FFMPEG so it starts working at the command line for you right away. We're going to use the homebrew method, because it makes installation simple if you already have homebrew installed.

## For Users Who Already Have Homebrew
If you've got homebrew installed, all you need to do is this:

`brew install ffmpeg`

That's it. It should install without issue. (Famous last words right?) Test that it works with this:

`ffmpeg -version`

If it's installed, you will get back a bunch of information about your configuration. If not you will get an error of some type. Troubleshooting installation is beyond the scope of this tutorial, but you can post questions in the [community forum](https://community.api.video) and we'll help you figure it out.

## For Users Who Don't Have Homebrew
If you fall into this category, you may be wondering what homebrew is. It's a free, open-source software package manager. It simplifies installation of software on macOS and Linux.

To install homebrew, you'll need to run this command:

`/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"`

If you don't have Xcode, or the appropriate Xcode components installed, you'll have to install those. Fortunately, you'll be told what's missing so you can install it. Follow the instructions to install and if you run into problems, there is a lot of documentation online to help you through. We can't be more specific for Xcode, because there's a lot of ways your installation can differ from another one. However, if you need help, feel free to contact us in the 
[community forum](https://community.api.video/).

## Thumbnail Creation Method - Using FFMPEG 

You can use ffmpeg-python to create a thumbnail and upload it for use with your video. If you don't want to get into learning FFMPEG, you can also use api.video's endpoint that allows you to pick a time from the video, and have it set as the video thumbnail for you automatically. 

NOTE: The thumbnail must be .jpg or .jpeg and 8MB or smaller.


If you're interested in trying it with ffmpeg-python, then here's the code: 

Let's dig in a bit to what's going on here. First, to make the sample easier to work with, we have the file we want to take a thumbnail from in the folder. Our thumbnail will output to the same folder. 

Next in our code, we create a function that will create a thumbnail for us. It takes the path to the file we want to grab a thumbnail from. Then we retrieve the length in seconds of our movie. Right now this function takes a thumbnail from about halfway through the video it receives. It then outputs the file, named 'THUMBNAIL.jpg' to the same folder where we can check it out if we want. 

Now we're ready to upload our video and thumbnail. 

## Upload the Video 

The code for this is straightforward. You can upload a video using one of these options: 

* [Delegated Uploads for Videos Large and Small](https://api.video/blog/tutorials/delegated-uploads-for-videos-large-and-small-python)
* [Upload a Big Video File Using Python](https://api.video/blog/tutorials/upload-a-big-video-file-using-python)
* [Upload a Video From Your Computer with the api.video API (Python)](https://api.video/blog/tutorials/upload-a-video-from-your-computer-with-the-api-video-api-python)

Make sure you grab the videoId for your video. 

## Add Your Thumbnail 

The code to add a thumbnail looks like this:

In this code, you retrieve your access token, then you set up your headers and URL. The URL must contain the videoId for the video you want to add a thumbnail to. Add your thumbnail as a binary file. You can check the json response to make sure everything was a success, and double check by looking in your dashboard at your video. Sometimes the new thumbnail populates to the video faster on the individual page for viewing that video, so give it a few minutes and then hit refresh to be sure your thumbnail was added. 

You could potentially use this method with some tweaks to create a short trailer of thumbnail images. We'll go over how to do that next! 

Don't hesitate to ask us questions on [our community forum](https://community.api.video/)!

Create a Thumbnail For Your Video with Python and FFMPEG

large_create-a-thumbnail-for-your-video-with-python-and-ffmpeg.png

medium_create-a-thumbnail-for-your-video-with-python-and-ffmpeg.png

small_create-a-thumbnail-for-your-video-with-python-and-ffmpeg.png

thumbnail_create-a-thumbnail-for-your-video-with-python-and-ffmpeg.png

create-a-thumbnail-for-your-video-with-python-and-ffmpeg.png

Featured article

# api.video blog

Blog

Follow the api.video Blog to explore tutorials, video use cases, and learn about on-demand and live-streaming video updates.