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. Read More: https://www.enablex.io/insights/how-to-create-video-application-for-an-edtech-platform/

1. How to Create Video Application
for an EdTech Platform
MAY 22, 2023
Team EnablexTECHTALKS
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.

2. • 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.

3. • 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.

4. 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.

5. 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.

6. 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

7. 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

8. 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",

9. "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.

10. • 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.

11. • 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

12. 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">

13. <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:

14. <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
See author's posts