Screens and Components

As Prebuilt UI maps to its template configuration, you'll be able to preview and customize Prebuilt behavior for each role in your template. This guide explains how Prebuilt's defaults can be customized for its role using screens and components.

• Screens - represents Prebuilt's screens, namely
  • Preview - a screen that allows setting up a participant's audio/video before they join a 100ms room
  • Room - a space where participants engage in a video-conferencing or livestreaming template set up
• Components - each of the Prebuilt screen has its components that exposes functionalities like Join button, Chat, participant list, video layouts or features like bring on stage

Configuring screens and components

By default, components are enabled based on the role associated with the use case you've selected during template creation. A component can be easily enabled or disabled for a role, you can also go deeper into a component and customize its configuration on Prebuilt. Follow these steps to get started:

• Choose an existing template or create a new one on 100ms dashboard.
• Jump to Customize Prebuilt and head to "Screens and components" section.
• Select a role to start customizing components on Preview and Room screens.

Preview Screen

Header

Set up a custom header for each roles using Title and Subtitle fields.

Join

Choose how peers join the room

• Join Now - Peers from this role will see "Join Now" and would be able join after entering their name.
• Join and Start Streaming - Peers from this role will see "Go Live" and would be able to join and start streaming when they join the room. Ensure that this role has the permission to "Start/Stop HLS streaming" as enabled under Role permissions on its template configuration.

Room Screen

The Prebuilt room screen offers a set of components designed to enhance interactivity within a room. Choose a role to kickstart your customization journey.

Chat

Toggle the chat functionality on or off for a specific role. When chat is disabled for a role, that role won't have access to the chat component within the room. If enabled, you can further fine-tune and customize the functionalities of the Prebuilt UI for chat.

Initial State

This setting determines whether the chat component is initially open or closed when a participant joins a session. Keeping the initial state as open can be particularly useful when using the chat overlay view on mobile devices.

Enable Overlay View

In an overlay view, the chat component overlays on top of video tiles, delivering an immersive chat experience for mobile livestreaming scenarios. Please note that this chat view is exclusively available on mobile devices and is not supported on large-screen applications.

Allow Pinning messages

Enabling this feature allows the selected role to pin important chat messages on the chat component, making them visible to everyone.

Participant List

Ensure participant list accessibility for roles that require visibility. In certain scenarios, such as large room viewers, there may be no need for them to view other participants, but Hosts or Broadcasters might find it essential to maintain oversight of the participant list. By default, the participant list is enabled for all roles across all templates.

Video Tile Layout

100ms Prebuilt UI allows tweaks on its default grid layout and supports multiple video layouts.

Enable local tile inset

Enabling this makes the local peer's (for the selected role) tile in a smaller inset window as default, alternatively if it's disabled, the local tile will be part of the grid view. Join with at least two peers to preview this configuration in action.

Prominent roles

Defining one or more roles as prominent gives them higher tile view prominence for the selected role. For example:

• For a 1:1 call, define Host as prominent tile for Guest and vice-versa.
• For a webinar, set Host as the prominent tile for all other roles. Every role would see Host as the primary tile in the room
• For a mobile-first livestreaming view, set Broadcaster as prominent tile for every other role, including Broadcaster themselves.

Can spotlight peer

Allow this config for roles who can spotlight others or themselves in the room. Spotlighting a tile reflects for everyone in the room.

Be Right Back (BRB)

Depending on your use case, allow roles to set themselves on BRB mode. If disabled, this component will not be visible to the selected role.

Emoji Reactions

Enabling this for a role allows its peers to send emoji reactions in the room.

Bring others on Stage

Stage is a virtual space within a room that enables participants to actively engage with their audio and video, and publish it with a much larger audience. With the 'Bring on Stage' feature enabled, viewers who are not on stage can easily interact with the participants on stage, once they have been granted access to the stage. Enable Bring on stage for roles that require the ability to allow or deny stage requests from off-stage participants. By default, this feature is enabled for Hosts, Broadcasters and Co-broadcasters, while viewers with non-publishing roles can use the hand-raise option to request stage access. This component can extend its support to conferencing, webinars and livestreaming scenarios. However, if your use case does not require this feature, you can simply disable it to ensure a seamless experience for all users.

Bring on Stage Label

Customize text label that Hosts and Broadcasters will see when they receive on stage requests. The default text is "Bring to stage".

Remove from Stage Label

Customize text label that Hosts and Broadcasters will see when they receive on stage requests. The default text is "Remove from stage".

On Stage and Off Stage Role

An off stage participant becomes an on stage participant once their stage access has been accepted. For instance, an off stage role, say Viewer requests a Broadcaster to go on stage. Once their request is accepted, the Viewer can transition to an on stage role, which could be a Viewer-on-stage, a Guest, or a Co-broadcaster.

Let's take a quick example to understand this better.

Assume a livestreaming scenario with Bring on stage enabled for Broadcasters and Co-Broadcasters, where

• Off-stage participants have been assigned role: Viewer a role with no audio/video publish permissions
• On-stage participants have been assigned role : Guest, a role with audio/video publish permissions

Once the configuration is set under Bring on stage, join Prebuilt links or apps as these roles: Broadcaster, Co-Broadcaster and Viewer to try bring on stage feature like below:

1. Participants from Viewer role can choose to raise their hand during a session to request to go on stage and interact with Broadcaster(s) and Co-Broadcaster(s)
2. Broadcaster(s) and Co-Broadcaster(s) will receive stage access notification from these off-stage partcipants; where they can choose to accept or deny the stage request. Meanwhile, a Viewer can choose to lower their hand untill their request has been accepted or denied. Broadcaster(s) can also track all such requests under "Hand Raise" section under participant list.
3. When a Broadcaster accepts a stage request from a Viewer(an off-stage participant), the Viewer becomes a Guest (an on-stage participant) as per the configuration set
4. Broadcaster(s) can choose to mute/unmute audio/video for Guest or simply remove them from stage.