Building A Customizable Video Chat & Live Streaming App With Swift

Published in

BingeWave

6 min readApr 14, 2022

You have decided to build a video app or live streaming app in Swift. There are many things to think about, such as how you are doing WebTRC, what does the HLS encoding look like, and many other factors that go into live streaming.

Most of the complicated decisions, development issues and scaling can be taken care of with a Live Media As A Service solution that becomes integrated with both your app and website.

In this tutorial, we are going to show you how to implement BingeWave’s interface into Swift using a Webview too quickly and easily get your live streaming or video chat working.

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:

JSON
Swift

Download The Code

The code in this tutorial is available online at our Github repository and can be downloaded and ran on your local computer. To get the code, please visit:

https://github.com/BingeWave/bingewave-swift-video-app

Organizer Account

Like all of our tutorials, our starting point will be an 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.

Understanding BingeWave’s Live Media As A Service (LMAAS)

Live Media As A Service delivers live content from a cloud infrastructure. Live media can be broken down into:

Live Streaming
Video Conferencing
Audio Conferencing
Interactive Video

What makes LMAAS attractive is the ease of implementation and lack of code. For example, to implement a WebRTC solution, a developer may have to write pages of code to set up their experience. An LMAAS solution is generally just a few lines of code inside an app or webpage to achieve the same result.

BingeWave’s delivers live video through its API and a widget system. The API controls the functionality of the live experience, such as muting/unmuting users, showing content on-screen, and other functions. Widgets are interactive apps constructed in HTML, CSS, and Javascript that can be integrated into the player to extend custom functionality.

The benefits of using BingeWave as an LMAAS instead of a custom-coded solution is it’s less coding involved, easier scale, lower maintenance costs, and increased development speed. For developers, they do not have to worry about things such as which protocol to use, how the servers will scale, building for mobile or desktop, and the many other considerations. It also can be plugged right into their apps and website, allowing them to only maintain one codebase.

Creating A Live Event

All of BingeWave’s tutorials start with creating a Live Event. A live event is any media session that can be a live stream, video chat, augmented reality experience, or audio session. Before we build your app, we will need information from a live event.

The live event API will contain all the functions need to control the video or audio functionality. To get started, visit the documentation here:

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

According to the documentation, we will need the event type and the organizer_id. The organizer can be found when you created the organizer account described above. Go the Tokens section of the organizer account to get the ID.

On BingeWave, several event types can be used when creating a live event. The list of live events is here:

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

All the event types, with the exception of an Instant Event, will require a date/time to create the event. Therefore, we are going to use the Instant Event, which is type 7.

Next, we will create a live event without writing any code! This is accomplished in the Query Builder. The Query Builder is a tool on BingeWave that allows a developer to execute queries against the API before writing code to give them an idea of what they will write later on. Visit the Query Builder here and insert the organizer_id and the event type:

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

When you click the ‘Send’ button, you will get a JSON Response will the live event data if your request was successfully executed like below:

The fields that we want to pay attention to are the following:

ID: The ID of the live event
webview_video_chat: The URL of the video chat interface that will go into a Webview.

Now that we have the required data, we can build the Swift Application!

Building Your Swift App

Start this section by opening up XCode and creating a new project. There is going to be a few parts to your Swift Application.

Camera and Mic

First, we will give our app permission to access the camera and mic. If this is a video or audio app, your app will require access to these features. The camera and mic can be given access in the ‘Info.plist’.

Auth Token Webview

One of the most important requirements is the ability to authorize and authenticate a user. There is an article written on authentication here. Though NOT required for this application to work, the auth token will be required later if you want to log in to a user.

Create a file called CustomWebView.swift. In this file, we will add a class called CustomWebView of the type WKWebView. In this class, we will override the load function to add the auth token into the header.

WebView

Next, we are going to create the Webview. Start by creating a WebView.swift file. In this Webview, we are going to make the UI with the CustomWebView described above. Two important things we want to have in this file are:

mediaTypesRequiringUserActionForPlayback: We want to be able to start the media with the user interacting with the app for situations like auto-connect.
allowsInlineMediaPlayback: Uses the HTML5 player for the video and not the native player.

The complete Webview code will look like this:

ContentView

The final view we are going to make is the ContentView with the file name ContentView.swift that should have been created when you created the project. In the ContentView file, we will load the WebView with the URL using SwiftUIWebView. Remember to change the XXX with the id of the live event above.

Run your application, and you will have a Swift running BingeWave Live Media as a Service. You can now begin developing your application.