a close up of a hand working on a laptop with code

Iryna SydorchukJanuary 24, 20241 min read

Beyond the Template: How to Create the Text Box

Eyeson's API enables developers to create completely custom text box overlays for video call layouts. In this article, we'll show you how to create the most glorious custom text boxes mankind has ever witnessed.

Eyeson’s Custom Layout

Before we jump into the good stuff, it's essential to let you know that you have some choices here. You can either stick with the standard video call layout, or if you're feeling a bit adventurous, you can create your very own one using our blog articles as your guide. If you want to learn more about this creative process, we've got some great articles waiting for you over on our Tech Blog .

Don't forget to stay in the loop and dive into our documentation. This will be your secret weapon to make the most out of what we have to offer.

Creating the Text Box Canvas

First, we need a canvas element to render our text box on:

a screenshot of a code example of how to create a canvas element

Cool. Now we have a 1280x960 (1280x720 in widescreen) canvas and its drawing context to render on.

Drawing the Text Box Shape

Next we'll draw a rounded rectangle shape for the text box:

a screenshot of a code example of how to draw a rounded rectangle shape

The canvas context offers a roundRect() method for drawing this shape, which is provided by your web browser. To ensure compatibility, please keep in mind that you need a fallback function to make it work in every browser.

Now we can style it:

a screenshot of a code example of how to style the rectangle shape fron before

This fills the shape with a semi-transparent white background.

Adding Text

What's a text box without text? Let's conjure some up:

a screenshot of a code example of how to add and style text

We can customize fonts, colors, alignment, etc.

Uploading as Overlay

Finally, we convert the canvas to a blob and upload it:

a screenshot of a code example of how to covert the canvas to a blob

Now the text box will appear overlayed on the video streams. For more specific API functions explanation please refer here.

Updating Text Dynamically

To update the textbox, we can wrap the generation in a function:

a screenshot of a code example of how to update the textbox

By calling this again with new text, we can update the overlay on-the-fly.

The Result

Enjoy the result:

a screenshot of a code example of the results of the created textbox

Further Customization

With Eyeson's overlay and custom layout APIs (more examples can be found here), the possibilities are endless for building custom text boxes and UI elements. Let us know if you have any other questions or topics you’d want to read the dive-in by creating a ticket on GitHub.