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:
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:
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.
Adding Text
What's a text box without text? Let's conjure some up:
We can customize fonts, colors, alignment, etc.
Uploading as Overlay
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.
Updating Text Dynamically
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.
The Result
Enjoy the result:
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.
