Add Overlay To Video With the Vonage Video API

Published August 25, 2020 by Kevin Lewis

When creating a Vonage Video publisher, the video stream can be sourced directly from a user camera, from a element, or a HTML element. Once pixels get drawn to the canvas, they can be easily manipulated before being used in a Video API session.

In this tutorial, you’ll learn how to add a text or image overlay to your camera image that you can include in your video calls.

Several components are required to make the project work. Firstly, a element will take a stream from the user’s camera. Each frame, the video element will be drawn on a canvas, where we will then add text or an image. With our desired output on a canvas, we can use the canvas as a source for a Vonage Video API publisher, which we can use in our video sessions with friends.

If you want to look at the finished code, you can find it at https://github.com/nexmo-community/video-overlay.

Scaffold Markup

Create a new project folder followed by a new file index.html, populating this file with the following code:

In this tutorial, you will add text to the first canvas c1 and an image overlay to the second canvas c2.

Get Webcam Video

Set the <video> element’s source to the stream from the user’s webcam. This snippet will pick the default camera:

Run Functions Every Frame

Create an empty addText() function. Once the user’s video device is ready and ‘playing’, run the functions every frame:

Draw Video Stream & Text to a Canvas

Update addText():

Refresh your browser and you should now see text being overlaid on the canvas.

![Two identical frames of a person. The right frame has the words "Kevin Lewis" shown in the bottom-left.](text-overlay.png)

Draw Video Stream & Image to a Canvas

Firstly, at the top of your <script> tag, load in the image that you want to use for the overlay:

Then, update addImage():

Your page should look like this:

Three identical images of a person. The middle image has a text overlay. The right image has a small Vonage V logo in the top-left

Include Canvas in Video API Session

Create a new project in your Vonage Video Dashboard. Once created, scroll down to Project Tools and create a new Routed session. Take the Session ID and create a new token.

At the top of your <script>, create three new variables with data from the project dashboard:

Next, copy the <script> tag from the Vonage Video API Client SDK page and put it above your existing <script> tag.

At the bottom of your <script> tag, get your basic Vonage Video API session initialized and publish from the second canvas:

Hide Elements

The <video> and <canvas> elements are required to make this work, but you probably don’t want them visible in your webpage. In your <head>, add the following CSS to hide them:

How Will You Spruce Up Your Video?

Hopefully, you found this blog post useful and can now create custom overlays to your heart’s content. You may choose to alter the size and position of the images, or allow your users to edit it themselves.

You can find the final project at https://github.com/nexmo-community/video-overlay.

As ever, if you need any support feel free to reach out in the Vonage Developer Community Slack. We hope to see you there.

Leave a Reply

Your email address will not be published.

Get the latest posts from Nexmo’s next-generation communications blog delivered to your inbox.

By signing up to our communications blog, you accept our privacy policy , which sets out how we use your data and the rights you have in respect of your data. You can opt out of receiving our updates by clicking the unsubscribe link in the email or by emailing us at [email protected].