How To Develop Video Conferencing & Live Streaming App With Minimal Coding

When venturing to build a video, audio, or live streaming app, three questions on a developer’s and an organization’s mind are how much coding will be required, what is the team’s bandwidth and resources, and how the code is going to be maintained. It is a big responsibility for developers, but what if anyone in the organization could take part in building and maintaining the app or video add-on?

In the past, tutorials on developing applications with BingeWave’s Live Media as a Service have had a heavy focus on how to use the API to control the interface. While these lessons are vital for learning how to use the LMAAS because there are certain customization developers will want to do with their apps, there is a much easier way to customize the video application.

BingeWave offers a Low-Code Template builder in which 90% of the development work will be building the interface through buttons, toggles, and swipes. Yes, no coding unless you want to customize your CSS.

This article is both for developers and non-technical users, and will cover:

1. Understand Templates
2. Using Templates in Code
3. Who Is Responsible for Building The App

Video Tutorial

For those that want to watch this tutorial, the video that covers the material is below.

Understanding Templates

A video app will likely have the same components used for each session — the same widgets in the same location, the same cover image, branding, and many other elements. But, instead of having to recreate all the configuration options for each new session, you can use what is known as templates to copy the experience automatically. And the best part is that building a template does not require coding!

To access the templates interface from the developer’s section, go to your Organizer Accounts and find the Access Dashboard.

Clicking it will bring you to the No-Code platform. This section of BingeWave is meant for admins and non-coders to access and manipulate data.

In the top menu bar, click on the Template sections, and you be brought to the template management area. Click the button on the top that says “Create Template” and create your template.

After your template has been made, you will be brought to the interface page for building the template. This is where the fun begins!

Start by selecting what Widgets you want to include in the interface. Widgets are apps written in HTML, CSS and Javascript, and are overlayed over the video to give functionality. Everything on the screen from Show Hide Desktop to the Disconnect button is a widget.

The widgets you will add to your interface can be the ones provided by other developers, or they can be the ones you have created in the developer portal. To make your own widget(s), visit this link. The interface for selecting a widget will resemble the picture below:

After selecting the widgets you want to use, you can set what user roles will have access to each widget and where it will appear on screening. Also, notice the cog next to each widget. This is where you can add custom CSS options and configuration options for each widget.

If you need to know where the items can go on the screen, refer to the grid system and how items are laid out on-screen. Widgets are set to appear in different areas of the grid below:

Next, you can set the video layout. In past tutorials, we covered how to change the video layout. Not you can do that with just a drop-down and set it for each role. You may also toggle on switching the dominant speaker.

The position configuration will allow you to set the alignment of each of the areas on the grid. Simply select the vertical and horizontal alignments as needed.

Then we have the “Advanced” section. The advanced section is where some “coding” may occur if you choose to modify the CSS of the interface. Remember to refer to the Styling Documentation on how you can edit different elements of the interface.

And finally, the images! Upload different images to the experience ranging from the main image to the background image, to add the final touches to the UX/UI of the interface.

As you are making these changes, you can use the test area to see the changes take place in real-time.

And remember to save your changes. This is the most important step, saving your changes. If you forget, the template you are working on will be lost.

That was easy compared to all the documentation and API routes we wrote in past tutorials. So now we will get into some light coding with how the templates are implemented into your app or website!

Implementing Templates In Live Events

Every video conference, audio session, or augmented reality experience on BingeWave is considered a live event. The live event object is part of Live Media as a Service because it controls the interface functions such as muting/unmuting users and video layout through an API. So, returning the documentation, we will create a live event with a slight twist. The documentation for a live event is here:

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

It usually requires an event type and an organizer id to create the event. This time, we will use the template_id as well for creating the event. Template ids are found on the main template page, right under each template title.

Remember your template_id, as we will use it when creating the live event. Next, we need to select an event type. The event types can be found here:

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

For the brevity of this tutorial, we are going to use an Instant Event. The other event types require a date and time to schedule the live event. Finally, you need the organizer’s ID. The organizer id can be found in the token area for each organizer.

Next, we will input all the information into the Query Builder. The Query Builder allows a developer to run API queries without writing code. Once the queries are working, the developer should translate the API calls into queries. Head over to the Query Builder and implement the template_id, type, and the organizer_id.

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

When you click send, the Query Builder should return a JSON response as such:

Find the field that says “webview_video_chat” and paste that URL into a browser. Based on what you entered in the template area, your browser screen should not be reflective of the same!

To summarize, a developer can create an interface as a template and then use that template with coding to define the experience. Next comes the most important question, who is responsible for building the app.

Who Is Responsible For Building and Maintaining the App?

Typically a project is compromised of multiple people that are both technical and non-technical. There are various roles, such as:

• UX/UI Designer
• Frontend Developer
• Backend Developer
• Project Manager
• Customer Success

And a variety of other roles can contribute to the product as well. But if there is an interface in which people can build an experience without coding, then who is responsible for what?

Obviously, a developer is required to integrate the API calls into the app or website to automate the creation of a live event. After that, tasks can be delegated to different team members:

• Front Developers & UX Designers: They are a great fit for tweaking the CSS, branding, and interface.
• Product Managers: Can add and remove features as needed that fit the company’s roadmap.
• Customer Success: Can personalize the experience for different customer types.
• Sales Reps: If sales reps want to build a custom solution for a sales call, they can do so without a developer.

A collaborative way to approach development is the following:

• Developers: The developers should be responsible for implement the interface in apps and websites. They should also be responsible for developing custom widgets that will be used inside the interface. Custom widgets can be developed here.
• Everyone Else: The non-technical people involved in development can be responsible for building the interface to the specs that best fits their end-users.

The overall point is that anyone can participate in developing the application for various use cases. This should help alleviate the work of developers so they can focus on parts of the code that might be more important to the organization.

Other Tutorials

There are a list of other tutorials to help build your live media app, but why have the other tutorials if there is an interface for building the application?

There are a lot of features and functionality that BingeWave has to offer, and developers will need to be able to access those functions for unique use cases that an interface cannot provide. They can even develop their own interface if it better fit their user’s need. The other tutorials aim to maximize that control for developers.

Here is a list of other tutorials to read:

• Authenticating Your Apps With JSON Web Tokens
• Creating A Web and Mobile App For Live Event Broadcast From Camera Feeds (Uses React Native, but the same concepts apply)
• Creating A Web and Mobile App For Interactive Broadcasts From Phone/Computer (Uses React Native, but the same concepts apply)
• How To Build A Recording App
• How To Customize The Experience For Joining Sessions
• How To Customize The Design, UX, and UI