Customizing the User Interface
Last updated
Last updated
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:
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:
This method ensures a cohesive integration of your custom UI elements with the streaming experience, leveraging the full capabilities of the WebSDK.
