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 get into the good stuff, it's important to let you know that you have some choices. 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 and be overlayed on the video streams. For a more specific explanation of API functions, 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 for building custom text boxes and UI elements are endless. 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.