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.
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.
First, we need a canvas element to render our text box on:
Cool. Now we have a 1280x960 (1280x720 in widescreen) canvas and its drawing context to render on.
Next we'll draw a rounded rectangle shape for the text box:
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:
This fills the shape with a semi-transparent white background.
What's a text box without text? Let's conjure some up:
We can customize fonts, colors, alignment, etc.
Finally, we convert the canvas to a blob and upload it:
Now the text box will appear overlayed on the video streams. For more specific API functions explanation please refer here.
To update the textbox, we can wrap the generation in a function:
By calling this again with new text, we can update the overlay on-the-fly.
Enjoy the result:
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.