How To Integrate Live Media as a Service Into Your Tech Stack with Node, PHP, Python and React
With an understanding of other tutorials on how live media works, the final step is integrating Live Media into your Tech Stack. This tutorial is written in pseudo-code to give developers an understanding of how the integration of BingeWave’s Live Media as a Service should look. It will cover the following topics:
- Organizer Account and Token
- Modifying Your Database
- Connecting Our API to Your Database
- Connecting The Frontend
Organizer Account and Tokens
To begin this tutorial, you will need to set up your organizer account. All your live events, users, products, and any data linked to your account on BingeWave will be associated with an organizer account. So start by heading to the organizer section.
https://developers.bingewave.com/organizers
If you already have an account, you can skip to the tokens section. If you do not have an account, create one.
After the organizer account is created, you will notice a section that says ‘Tokens’; click on it.
Once inside, create a token if you have not already. Tokens can be created by simply clicking the ‘Add Token Button’.
Afterward, there are two things you will need from this screen that you will store as environment variables. Find the auth token and the organizer_id.
If you are new to environment variables, they are values that are set outside the application but often used to configure the application. For example, the variables are typically found in a file that is not committed to a repository, such as a .env file. Or on hosting services like Google Cloud or AWS, the environment variables are passed to the servers. Ideally, you want to keep the variables private, especially the authorization token.
An example .env file will look as such with your variables:
BW_ORGANIZER_ID=[ORGANIZER_ID]BW_AUTH_TOKEN= [AUTH_TOKEN]
Remember these two variables as we will need them in later steps. Next, we can move on to the database setup.
Database Setup
To use BingeWave’s live media API with your database, there are two areas in your database that you will want to modify — the user’s table and an events-like table.
Users Table
The users’ table is where you store your users’ information; name, email, dob, etc. This information will be synced to your accounts section in BingeWave’s API under your organizer account. Refer to the article on Authentication Tokens to go over syncing of accounts. To your users table, you want to add three fields:
- BingeWave Account ID: The id of the user account once synced with BingeWave. This will be a UUID.
- BingeWave Auth Token: An authorization token used to “login” that user in Webviews and embeds. This field will be a long string.
- Token Expiration: The expiration date and time of the token that can be stored in a date-time field.
Create the fields in your database to store those values. We will populate the fields in the later steps. A pseudo-code modification of your table may look like below:
Events-Like Table
The second table you will need either modify or make in your database is an events-like table. It is called an events-like table because it does not have to be an actual event but anything like classes, film screenings, meetings, etc. In BingeWave Live Media API, all the video streams are considered live events.
There will be a few fields that you want the event-like table to have, which are:
- id: The id of the live event, which is a UUID.
- webview_[selected_item]: Several Webviews are available ranging from video conferencing to streams. Create the column(s) for the webviews you will be using. They should be a string, character 255 length.
- embed_[selected_item]: For websites, several embeds can be chosen from video conferencing to streams. Create the column(s) for the embeds you will be using. They should be a string, character 255 length.
A pseudo-code modification of your table may look like below:
Ideally, you can just store the ID, because the path to the Webview and how the embeds are structured will always remain the same. For example, the URL for video conferencing Webview will always be ‘https://widgets.bingewave.com/webrtc/[id]'.
Connecting The API and Your Database
With the fields set up in your database, next, we can focus on calling our API to retrieve data and store it in your API. Let us start with the account section first.
Accounts Example
The accounts API is located at these two endpoints:
The importance of registering and logging in a user and getting an Auth Token for that user is that Auth token will be used in Webview or Embeds to identify them in the interface correctly.
For example, let us say you want to display a user’s first and last name on-screen, the user’s name is associated with an auth token, and that auth token is associated with an account. Without the auth token, there is no way to correctly associate the information that will appear on-screen about the user.
We are going to start with registering a user to your organizer account. This requires your organizer_id retrieved in the first step, as the users registered will be associated with your account. It is important to note that this is NOT a public-facing registration. The user registering should first be registered in your system, and then the information is synced with your BingeWave organizer account.
According to the documentation, notice that we are making a POST request to the URL, and then notice the required fields.
https://developers.bingewave.com/docs/auth#registertoorganizer
We are going to use the Query Builder to test registration. The Query Builder is a tool that allows you to test code before turning it in the code. Set your organizer_id, along with the user’s first_name, last_name, and email.
https://developers.bingewave.com/queries/auth#registertoorganizer
Very Important: You must change the Auth Token with the distributor auth token from the first step. Only the distributor auth token is allowed to access this route.
Also please note that if the user was already registered, this API call would fail, and you will need to use the login route.
On a successful send, you will notice that the JWT information is returned in a response.
When you write your code, make a POST request to that endpoint and pass the required variables in the BODY to receive the results. Some pseudo-code examples in different launches:
Node Example
PHP Example
Python Example
Live Events Example
Re-iterating this concept, all live streamings, video conferencing, and augmented reality sessions in BingeWave are considered live events. Next, we will implement calling the API and storing live event data in your database. To begin, the documentation for creating a live event is found here:
https://developers.bingewave.com/docs/events#create
Looking at the documentation, the two required fields are the event type and orgnaizer_id. Information on the event types can be found here:
https://developers.bingewave.com/types#event_types
We want a very quick setup, so let us choose an Instant Event that has a value of 7. The other event types are all scheduled and require a date/time. Now we can head over to the Query Builder to create a live event and plug in the information:
https://developers.bingewave.com/queries/events#create
Make sure that you use the organizer id associated with the organizer token used above.Click the ‘Send’ button to create the Live Event.
When the result returns, there are a few key fields to pay attention to:
- id: The id of the live event. Remember this as we will use it a lot in the upcoming steps.
- embed_script_tag: This field is a script tag that will go into HTML pages. It is used to parse tags.
- embed_video_chat: This field is a tag that is used to embed the video chat feature into HTML web pages.
- webview_video_chat: This field is a URL of the video chat that goes into Webviews, primarily used in mobile apps.
Once you have successfully created a live event, then you can store the information inside your database. The fields you store will vary depending on what you are doing, i.e. video conferencing vs. live streaming. Below are pseudo-code examples in various languages for calling the API endpoint and inputting your database information.
Node JS Example
PHP Example
Python Example
There is one fundamental note to remember. You can have a non-technical person build the UI/UX of the experience through templates, and the template can be used to create the live experience. For more information on templates, please read here.
Display The Live Session in Frontend & Apps
The last part of this tutorial will cover how to display the live event in your front end and mobile apps. For this tutorial, we will use basic HTML for the web portion and React Native for the mobile, but we offer code samples in various platforms that include:
Your API Example
First, we need to imagine an example API that you can use to think about your real API. Imagine your API has the following information:
- Domain: The domain is https://api.example.com/
- User Information: To retrieve a user’s information, a GET request is sent to https://api.example.com/users/{id}
- Event Information: To retrieve an event’s information, a GET request is sent to https://api.example.com/events/{id}
As we develop our example apps, remember to reference the API information here.
Your Backend API Example:
The first bit of information we want to retrieve from your database is the auth token of the user. Write your code to pull the information from your database and return it to your front-end, typically by a JSON response or passing it into a view. Pseudo-code examples below:
Node Example
PHP Example
Python Example
Next, pull the data from the event-like table discussed above. Again, we want this data to be returned to your front-end, typically a JSON response or passing it into a view via an MVC.
Node Example
PHP Example
Python Example
Depending on your system is set up, you can do the calls together or perform this separately. When the data is returned to a front-end application or a mobile app, you can now display the content.
Web Application
We are going to start with a simple HTML web page for the web application. The below is basic HTML.
Notice how the BingeWave script is included in the page, this will be required for turning the embeds into interfaces for the users. For this example, we are going to use Fetch to retrieve the data for the user and event data.
Now that the fetch has been retrieved with both user information and the live event information, we can start implementing the interface. We are going to place an embed tag in the HTML body, in this case we are going to use the webrtc video embed and have the id of the live event inside the embed.
Next, we are going to initialize the BWConnector with the auth token. This will cause the current user to be “logged-in” to the session.
And that’s it! Your complete code should look like this:
The interface will load on-screen, and the user can join the video call. Next, let us move on to the other React Native.
React Native
Before going into React Native, this method will work in any language for developing mobile applications, including Kotlin, Java, Flutter, and Swift. React Native is being used in this example for simplicity.
To keep this tutorial brief, we will assume that you already have a React Native application built with a dedicated screen for the live session. Starting with the view, we are going to implement a basic Webview. Ensure that the Webview has been installed via npm and imported into the React Native component.
Notice how we have two fields tied to the state:
- auth_token: The user’s authorization token.
- webview: The url for the Webwiew.
We are going to have a function called getData that will:
- Call the API routes using fetch
- Set the set of the auth_token from the results
- Set the set of the event_id using the results
The same interface will load for both the mobile and website and you are done! Congratulations, BingeWave’s Live Media as a Service has been fully integrated into your website. The rest of the work can be executed by a non-technical user.
The Non-Technical User
The last part is customizing the interface. Because BingeWave is a Live Media as a Service, that customization can be done by some who is non-technical through our no-code builder.
To learn more about the non-technical aspect, read here on the templates. The review of the process is once the template is made through our No Code builder, the ID can be passed when creating a Live Event to recreate the experience. A non-technical user can update the template to modify future updates without requiring a developer to make changes.
