How to create Video calling website for Edtech

Share with

Online classes have become an increasingly popular way to deliver education. To create a seamless online learning experience, many educational institutes are also turning to video applications. In this blog, we will guide you through the process of building a video application for online classes using the EnableX low-code platform and REST APIs.

Create a Video Application

Creating a video application using EnableX is a simple process that can be done through the EnableX Portal. By following a few steps, you can have a video application ready to use for online classes or other purposes.

Sign up for an EnableX account
Create a video project.
Select Low Code as your preference.

Select a ready-made template for your use case or customise your own template.

Enter the sub-domain name you want to use for the hosting basis your business needs.

You can go further and edit the appearance and other configuration settings to make it more customised before deploying.

If you choose our ready-made virtual classroom template, it provides a banquet of features that are essential for the online classroom.

Obtain Low Code Snippets

Once you have built your video meeting application with EnableX, you will receive Video Embed codes for Moderators and Participants’ entry to the Session.
Export the embed code snippet from the low-code platform.
Insert the code into your institute’s/ organisation’s webpage to get connected to the video session.
This will allow students and teachers to access the video meetings directly from the institute’s webpage, making it more convenient for everyone.

Customize UI and Configure Settings

Configure the UI and settings using the visual builder provided.
Access customization tools and configuration settings to ensure your video application is tailored to your needs.

Manage Configuration

Managing configuration is an important aspect of using a low-code platform for building video applications. With the EnableX low code platform, you can easily manage and customize various features, such as webhook, recording, and sub-domain settings, to suit your specific needs. This allows you to create a fully functional video application that meets your unique requirements, without the need for extensive coding knowledge.

Create meeting Rooms: Use EnableX REST APIs

The EnableX Low code platform allows you to create up to 10 permanent rooms without coding or making any API calls. However, if you want to create more permanent rooms or other types of rooms, you will need to use the EnableX Rest API.

As an educational institution, you may require different types of rooms for your online classes and meetings. EnableX provides the following room types that are suitable for education:

Permanent rooms that can be used for ongoing classes, office hours, or recurring meetings with fixed schedules. These rooms can be set up in advance and will always be available for students and teachers to join.
Scheduled rooms that can be reserved for specific times and dates. These rooms are useful for classes or meetings that occur on a regular but not ongoing basis. Teachers can schedule the room in advance and send out invitations to students.
Ad-hoc rooms that can be created on the fly for impromptu meetings or discussions. These rooms are perfect for student group work or quick check-ins with teachers. Ad-hoc rooms can be created and shared instantly, allowing for spontaneous collaboration.

How to create meeting rooms using Rest APIs

When you create a video project with EnableX, an App Id and App key are sent to your registered mail ID.

Use the App credentials to authenticate API requests.
Send a POST request to the EnableX server API with the required parameters to create a room.
In the Request Body section, enter the required parameters such as name, type and duration of the room. You can specify the type of room as permanent, scheduled, or ad-hoc.
The EnableX server API will respond with a JSON Payload containing the unique room-id for the created room.

For example, an API request to create a scheduled room

POST https://api.enablex.io/video/v1/rooms 
Content-Type: application/json 
Authorization: Basic XXXXXXXX 
  
{ 
  "name": "Physics class 10", 
  "owner_ref": "XOXO", 
  "settings": { 
    "description": "Extra classes", 
    "mode": "group", 
    "scheduled": true, 
    "adhoc": false, 
    "scheduled_time": "2021-05-31 05:30:00", 
    "duration": 30, 
    "moderators": "1", 
    "participants": "20", 
    "quality": "SD", 
    "abwd": true 
  } 
}

EnableX server responds with JSON containing a unique room-id.

{ 
  "result": 0, 
  "room": { 
    "name": "My Scheduled Room", 
    "owner_ref": "XOXO", 
    "settings": { 
      "scheduled": true, 
      "scheduled_time": "2021-05-31 05:30:00", 
      "duration": 30, 
      "adhoc": false 
    }, 
    "created": "2021-05-25T00:20:30.851Z", 
    "room_id": "xxxxx12346" 
  } 
}

Use the room-id to create a Meeting Room URL

Generate Meeting Room URLs

Once you have created a meeting room, you can access the video meeting using its Meeting URL.
The Meeting URL will contain two key components: the Room ID and the Domain.
Use the Meeting URL as the source URL in the IFRAME Embed Code to access the video meeting taking place in the meeting room.

Example of Meeting URLs

Meeting URL- https://your-subdomain.host-domain/#ROOM_ID# 
Moderator Meeting URL- https//your-subdomain.yourvideo.app/host/#HASH*# 
Participant Meeting URL- https//your-subdomain.yourvideo.app/#ROOM_ID#

Note: The #HASH*# is a base64 encoded string that includes the Room ID and App ID separated by a dash (-).

Modify Meeting Room URLs

By passing Query String Parameters, the Meeting URL used in WebView or IFRAME Source can be customized to update UI elements and User Experience, making it easy to alter the Low Code Embed settings.

Qualified Meeting URLs can be used directly from the browser’s address bar or as an IFRAME Embed.
Different parameters can be passed for different participants or a moderator in the same meeting.
Using the associated parameters overwrites the feature list through the portal as described in the Select Preferred Features. If associated parameters are not used, pre-set feature setting remains the same.


Single Query String Parameters: https://MEETING-URL?var=value 
Multiple Query String Parameters: https://MEETING-URL?var1=value&var2=value

Setup Webhook

EnableX Low code also supports webhooks, which allows organisations to extend the functionality of the video embedding and add new features or update existing ones.

Create a Webhook URL in the EnableX Portal to receive the webhook notifications.
Define the webhook events you want to listen to and configure the corresponding webhook endpoints in your application.

When a webhook event is triggered in a video room, EnableX sends an HTTP POST request to your configured webhook endpoint, containing a JSON payload with information about the event.
Your application can then process the webhook data and perform custom actions, such as updating UI elements or integrating with other services.
You can also use external CSS and JS libraries to customize the video embed and add new features or functions to the video room.
The external CSS and JS libraries can be provisioned to work along with the video embed and get executed with associated video room events, allowing you to create a highly customized video experience for your users.

Embed this Meeting URL in Your Application

Once you obtain the video meeting URL you want to embed. Follow these steps to embed your URL to a web application:

Create an HTML file: create an HTML file that will contain the IFRAME code to embed the URL in your application. You can create this file using any text editor or HTML editor.

Set up the IFRAME: In the HTML file, create an IFRAME tag and specify the meeting URL as the source of the IFRAME. You should also include the permissions necessary for the meeting to function correctly. Here is an example of the IFRAME code:

 <iframe 
    allow="camera; microphone; fullscreen; speaker; display-capture" 
    src="MEETING-URL"> 
</iframe>

Note: In this code, replace “MEETING-URL” with the actual URL of the video meeting you want to embed. The “allow” attribute specifies the permissions necessary for the meeting to function correctly.

Add Query String Parameters (Optional): If you want to customize the video meeting with specific features and data, you can add query string parameters to the meeting URL. For example, you can add a parameter to mute all participants by default. Here is an example of a meeting URL with query string parameters:

https://your-subdomain.host-domain/#ROOM_ID#?mute=all

Make the page responsive: To ensure that the embedded video meeting is responsive and fits well on different screen sizes, you can use the meta viewport tag and CSS styles. Here is an example of the HTML and CSS code to make the page responsive:

<!DOCTYPE html> 
<html lang="en"> 
 <head> 
  <meta charset="UTF-8"/> 
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/> 
 
   <style type="text/css"> 
  <!-- 
  body { 
     height: 100vh; 
  } 
  @-ms-viewport{ 
    width: device-width; 
  } 
  //--> 
  
  </style> 
 </head> 
 <body> 
  <iframe  
    width="100%" height="100%" border="0" 
    allow="camera; microphone; fullscreen; speaker; display-capture"  
    src="https://your-subdomain.host-domain/#ROOM_ID#"> 
  </iframe> 
 </body> 
</html>

Host the HTML file: Once you have completed the HTML file, you will need to host it on a web server. You can use a hosting service, or you can host the file within your own web application.

Embed the meeting URL: Finally, you can embed the meeting URL in your application by referencing the HTML file with the IFRAME code. For example, in a web application, you can include the HTML file in an HTML page using an iframe tag:

<iframe src="https://your-subdomain.host-domain/#ROOM_ID#"></iframe>

By following these steps, you have successfully added embed a video meeting URL in your web using an IFRAME.

Once you successfully created an ad-hoc meeting room and set up the webhook, now provide the generated meeting room URL to the client who will be joining the room. You can provide the client with either the participant meeting URL or the moderator meeting URL. This could be done via email, text message, or any other means of communication.

Creating a video application for online classes using a low code platform and EnableX REST APIs is a straightforward process that can be completed in just a few steps. By following the steps outlined here, you can create a video app that is tailored to your specific needs and provides a seamless online learning experience for students and faculty members.

In case you have any questions, our extensive developer document for video API is available here.

About The Author

Team EnableX

EnableX is a Singapore based, global, full-stack communications platform and solutions provider that enables developers and businesses deliver a holistic omnichannel experience to their consumers.

Backed by a team of over 50 passionate technologists, it empowers Fortune 500 companies as well as start-ups across the globe through its interactive and highly engaging customer experience platform.

Founded in 2017, the company has established a strong presence across APAC, US, and Europe, serving customers from a diverse industries including Healthcare, Telecom, BFSI, Education, Retail, and E-commerce. Based on its future forward innovations, EnableX.io has forged strong and strategic partnerships with large SI’s and GSI’s across the world.

See author's posts

How to Create Video Application for an EdTech Platform