Customizing the User Interface

Customizing the User Interface

When integrating streaming into your application, you have the option to implement a custom UI that interacts seamlessly with the stream.

Setup and Implementation:

UI Container: Start by defining an HTML element with a unique ID to act as the container for your custom UI. For example:

<div id="stream-ui"></div>

Fullscreen Functionality: By default, the fullscreen feature is applied only to the VideoElementParent, which is part of the core WebSDK code. To ensure your custom UI benefits from fullscreen capabilities and other WebSDK functionalities, we recommend wrapping your custom UI within the stream-ui ID. This approach allows the WebSDK to correctly place your UI.

Showcases: For practical examples of custom UI implementation, refer to two of our showcases designed in this manner. These examples provide insight into how to effectively integrate and enhance your streaming UI using the WebSDK:

Automotive Configurator

Automotive industry showcase

Luminara Jewelry

Jewelry and Fashion industry showcase

This method ensures a cohesive integration of your custom UI elements with the streaming experience, leveraging the full capabilities of the WebSDK.