How To Customize The Design, UI/UX For Video Apps and Live Streams

Devin Dixon

Published in

BingeWave

10 min readApr 4, 2022

BingeWave’s interactive builder for live streaming was built on four major beliefs.

The future of live streaming needs to be interactive and immersive
The future of live streaming needs to be completely customizable
The future of live streaming needs to tie strongly into a business’s bottom line
Developing your own live streaming solution should be easy

With those beliefs, we created a solution that is easy to implement and completely customizable. In order to live up to those beliefs, we have to have our solution be really easy for other developers to use.

This tutorial will teach developers how to build fully customized in live streaming and video chats. The sections of this tutorial will include:

Video Layouts
The Dominant Speaker
Adding Widgets To The Interface
Vertical and Horizontal Alignment
CSS Design Customization

Code And Requirements

Please read the information below on how to download the code and the developer requirements.

Developer Requirements

To create this app, we will be using the following tools and ask that the developer already know the basics of:

HTML, CSS, Javascript
JSON
AJAX Calls

Organizer Account

Like all of our tutorials, our starting point will be a organizer account. This will allow you to access all our API features. Please read the tutorial on Setting up an Organizer Account if you have not already; it should only take a minute or two.

Creating A Live Event (aka Stream)

To start this tutorial, we are going to create a live event. All video chats, audio sessions, and live streams are considered live events. The live event will hold all the functionality ranging from muting participants to playing videos. To create a live event, we first need to understand the event types:

https://developers.bingewave.com/types#event_types

There are several event types, and each one requires a date and time to schedule the event, except for the Instant Event. So now we can head over to the documentation for creating an event.

https://developers.bingewave.com/docs/events#create

Per the documentation, the only values we need are the organizer_id and the Event Type. To create the event, we are going to the Query Builder. The Query Builder is a tool for testing the API Endpoints without writing code, giving developers an idea of what their code should look like before they write it. Head over to the Query Builder and insert the correct values:

https://developers.bingewave.com/queries/events#create

The event type we will use is 7, for the Instant Event. And organizer id is the id of your organizer account. Click the Send button, and a JSON response will be returned.

There are two values in this response we are going to need:

id: The id of the live event.
embed_video_chat: The embed code tags for putting the video chat on a webpage

For the final part of creating our test area, we need to embed it inside a web page for us to use the interface. To learn more about embedding, you can read about the embed process here:

https://developers.bingewave.com/javascript/bwconnector

BingeWave has special tags that resemble:

<bw:widget></bw:widget>

These tags are placed around a webpage, and when the BingeWaveConnector.init is called, the tags are converted into the live events interface. Using the tag that was inside the `embed_video_chat` JSON return from the API, we are going to implement the following simple HTML page:

Place the code inside an index.html page on your computer, and that’s it! If you open up that web page in a Browser, the video chat interface will be displayed.

Remember the ID of the live event; we are going to modify the above video chat UI/UX through this tutorial using that ID.

Video Layouts

The first area to discuss in customization is the video layout. Video layouts are ways participant(s) videos appear on-screen. Currently, BingeWave provides 13 different layouts that can be used.

The grid layout is the most common layout used in video conferencing — it is where all participants are in the center of the screen. As more participants join, everyone in the center of the session, the videos get smaller. The Grid Layout is the default layout if none is specified. To change the video layout, we can head over to the video layout section to see the different ones:

https://developers.bingewave.com/types#video_chat_layouts

The first layout we are going to start with is the Carousels. These are when video layouts are positioned in various areas around the screen at the screen’s top, bottom, left, or right side. Or how it is written in the documentation:

AUDIENCE_CAROUSEL_BOTTOM
AUDIENCE_CAROUSEL_TOP
AUDIENCE_CAROUSEL_LEFT
AUDIENCE_CAROUSEL_RIGHT

The view should look like this:

To change the video positions, head over to the documentation, and you will notice an option for the video chat layout:

https://developers.bingewave.com/docs/events#view

When a user joins a chat, they will be assigned in of the three different roles of either a host, panelist, or participant. We are going to use the positions above to give each user a different layout (or they all can be the same). Head back over to the Query Builder, and we are going to update the event as such:

https://developers.bingewave.com/queries/events#update

Remember input your live event id in the {id} placeholder. We have assigned the three user roles different layouts. So now, when you join the video chat, your video will position itself on screen based on the layout selected.

Play around with the rest of the positions from the video chat layouts to understand how each position works. For example, you are able to have one caller on-screen and everyone else on the side; you can toggle callers in and out of the center and many other configurations.

Dominant Speaker With Layouts

One of the features of BingeWave API is to have the dominant speaker appear on-screen. This will be when the person who is talking the most is the one that appears on-screen.

The dominant speaker works differently depending on the layout chosen:

Gallery Layout: The functionality will NOT work for the Gallery Layout because there is no speaker to interchange in the Gallery Layout.
AUDIENCE_CAROUSEL_X: The dominant speaker will show the person who is speaking the most in the staging area with everyone else in one of the locations
SINGLE_CALLER_AUDIENCE_CAROUSEL_X: The dominant speaker will change, but it will NEVER be the current user.
SINGLE_CALLER_AUDIENCE_CAROUSEL_X: The dominant speaker will NOT change because the current user is intended to always be on stage.

To enable the dominator speaker functionality, head over to the API documentation and find the dominant speaker options.

https://developers.bingewave.com/docs/events#update

The dominant speaker can be set to active for different user roles. We are going to enable the functionality for the host and participant. Head over to the Query Builder and insert the following:

https://developers.bingewave.com/queries/events#update

Remember input your live event id in the {id} placeholder. When you click send, the information will be updated, and the person who is the dominant speaker will now change.

Adding Widgets To The Screen

Now that we have an understanding of how to change the video layout, we can focus on adding widgets to the experience. Widgets are 3rd party applications that can be added to the live event. Widgets can be anything from a TicTacToe Game to an interactive Code Pad for teaching; even the Mute/Unmute button is a widget.

Every widget that is placed on the screen utilizes the grid system. The grid system can be thought of as coordinates or locations on-screen where various items are placed into. For example, the video system can be broken down as the grid below:

Next, let us have us put a widget on-screen. First, we are going to get the Jokes Widget placed on-screen. Head over to the Query Builder, and we are going to get a list of widgets:

https://developers.bingewave.com/queries/eventwidgets#listwidget

This will return a list of widgets placed. For this tutorial, we want to find two widgets ids:

Random Jokes: 8dd51204–3c95–4f1b-86ba-d7021146518a
Dancing Gif: 7be130d9–59f4–44e3–9817–00d4240a0503

Now that we have the ID of those two widgets let us place them inside our player. The player positions are enumerated in different values as described here:

https://developers.bingewave.com/types#widget_positions

We want the position the random jokes in the top left(20) and the Dancing Gif in the player left bottom (5). To add a widget on the screen, we can head to the documentation for adding a widget to a live event:

https://developers.bingewave.com/docs/eventwidgets#addwidget

In the documentation, there are four fields we want to pay attention to:

widget_id: The id of the widget to add to the live event.
event_id: The id of the live event to associate with the widget
accessible_for_host: That the widget is usable for the host.
accessible_for_participants: That the widget is usable by any participant. The participant role is the default role.
position: The widget on the grid to place the widget.

Now let’s tie it all together. Head over to the query builders for adding the widget, and we are going to run this twice to add both the Dancing Gif and the Jokes widget.

https://developers.bingewave.com/queries/eventwidgets#addwidget

Dancing Gif Widget

Jokes Widget

Now we go back to your widget in your HTML page, and the widget should be showing up. Great! Now that’s work on some alignment of the widget.

Horizontal and Vertical Alignment

With the widgets in place, we can start to do some vertical and horizontal alignment. Every grid spot has three areas where a widget can be placed horizontally:

left
center
right

And then, three positions can be set vertically:

top
center
bottom

When a position is given an alignment property, all the widget in that position will adhere to that alignment. Those alignment options are defined in the documentation as such:

https://developers.bingewave.com/types#widget_position_vertical_alignment

And for the horizontal alignment:

Now, if you head over to the documentation, we will use the setOptions for the live event.

https://developers.bingewave.com/docs/eventwidgets#setoptions

event_id: The id of the associated event we are going to set the widget.
position: The position, retrieved from the position chart listed prior.
vertical_alignment: The vertical alignment for all widgets in that associated position.
horizontal_alignment: The horizontal alignment for all widgets in the associated position.

Now that we have all the information required to do alignment let us enter some of the alignment settings. Using the Query Builder, set the player left widget towards the player bottom left:

https://developers.bingewave.com/queries/eventwidgets#setoptions

Remember input your live event id in the {id} placeholder. And set the aside left top to be aligned towards the center:

You will notice the options updated in real-time on the website. We have now configured the positioning of the widgets. For the final part, let’s add some custom design with CSS.

CSS Design Styles

For the last part of this tutorial, we will use CSS to customize the experience for users. We have documented all the sections of the grid layout here:

https://developers.bingewave.com/javascript/css

The entire interface can be customized using various CSS rules. For example, if you wanted the footer to have a grey background and a height of 300px, you implement the following CSS:

#footerContainer {
  background-color: grey;
  min-height: 300px;
}

Or let’s set you wanted the video on the right carousel to have a blue border on desktop and a red border on mobile. A CSS rule can be written as such:

It is only standard CSS that you be implementing to customize the design. To update those customizations, there is a special API endpoint for design. The docs for it are located here:

https://developers.bingewave.com/docs/events#design

To test out that endpoint and the CSS above, first let us make sure that we have the videos to positioned on the right on side. In the Query Builder, have the video for the host and participant both be set to AUDIENCE_CAROUSEL_RIGHT.

Remember input your live event id in the {id} placeholder. The CSS we are going to implement is the following:

Go to the Query Builder for updating the design, and put the code above as an input value.

https://developers.bingewave.com/queries/events#design

Remember input your live event id in the {id} placeholder. When you click send, in the response under the style section, the updated CSS will be present.

Now when you head over to your application, you will notice that changes have taken effect! Congratulations, you have added custom styling to your application.