EnableX Video Embed is an easy-to-use Video Calling API loaded with powerful conferencing, collaborative, and reporting features. You can build one-to-one or multiparty video meetings for any application or browser within minutes using its simple yet powerful REST API.

You do not need client-side SDKs to develop an engaging UI layout for a video meeting application. Just select our pre-built UI or you can also design it with the EnableX App Visual Builder, and you can go live within minutes with your fully-functional video meeting application.

Table of Contents

This Video Embed Developer Guide attempts to present a step-by-step process to create a video embed project in a lucid way. Let’s start the journey.

Getting Started in 4 Simple Steps:

Using our Pre-built UI or our Visual Builder, you can easily host Video Meetings on the subdomain of your choice, and then embed it directly into your webpage or mobile app in the following three simple steps:

Step#1 Create a Video Embed Project
Set up an Account with EnableX and create a Video Embed Project on the EnableX portal.

Step#2 Design your UI/UX
Customise the UI – Room Size, Video Layout, Features, Font, and more – directly from the EnableX App Visual Builder. Alternatively, you can also use our Pre-built UI.

Step#3 Create Your Meeting Room
Create Meeting Room(s) with optimum setting to meet your business needs using our Rest API Service.

Step#4 Embed Video Meeting Into Your App or Site
Get the Meeting Room URL and embed it to your website using the IFRAME code or into your Mobile App using WebView or SafariView.

Create a Video Embed Project

1.1 Create a Project

To begin with, create a Video Embed Project in the EnableX portal.

  • Log in to the EnableX portal. If you do not have an account, signup here.
  • Now move to “Create Projects” and then enter the relevant information. Select “Video Embed” in the “Service” section.
  • Upon completing your project creation, “APP ID” and “APP Key” are generated. You would need these credentials (“APP ID” and “APP Key”) to gain access in the EnableX Room. Save this for further use (see Embed the Meeting URL).

Design your UI/UX

2.1 Design your UI/UX

EnableX Video Embed comes with 2 options – Pre-build UI and App Visual Builder.

  • Go to the Video Embed Module in the EnableX portal.
  • Now, move to the IFRAME Code page and select either Pre-Build UI or App Visual Builder option.
    • EnableX Pre-built UI: It comes up with 10 participants for each video calls. Feature includes:
      • 4-participant View Grid
      • Recording
      • Screen Sharing
      • Group Chat
    • EnableX Visual Builder: It provides you the absolute full control over every aspect of design and features. You can customise the video layout, font, text size, and colour and collaboration features with just a few clicks, drags and drops.

2.2 Setup Sub-Domain

Next, specify your preferred subdomain as shown below. Your Video Meetings shall be hosted on the EnableX domain.

2.3 Application Settings

The options available in the Application Settings section allow you to improve user experience and enhance the security features of Meetings. You need to enter the following information:

  • Exit/Sign out URL: State the URL prefixed by “https://” that you want the participants to receive after they Sign out/Exit or disconnect from the session.
  • Domain Whitelisting for IFRAME Embed: For Video meetings in an IFRAME to work, its domain must be whitelisted. As such, you would need to list down all the allowed domain(s). The URL’s must be prefixed with “https://”, eg. https://your-domain.com and you can also list all the subdomains under a permitted domain using wildcards such as https://*.your-domain.com.

Note: If you have selected the Pre-built UI, you will be redirected to the IFRAME Code page. In case, you select the Visual Builder option, you will be redirected to the Visual Builder page where you can design your very own native UI. Upon completion and testing, you will again be redirected to the IFRAME Code page.

2.4 Get Embed IFRAME Code

  • After completing the above steps, Embed codes for Moderator’s and Participant’s entry to the Session (see Example 1 given below) are generated for you to embed into your App or Browser.
  • For one-time testing, you can use the generated code snippets and then head straight towards the Embed the Meeting URL.
  • If you seek to create more Video Meeting Rooms, you will require new Meeting IDs. Relevant instructions can be found in the Create A Meeting Room Using Rest API.

Example#1 IFRAME Embed Code

Code for participant’s entry to a session

<IFRAME 
	allow="camera; microphone; fullscreen; speaker; display-capture" 
	src="https://your-subdomain.host-domain/#ROOM_ID#">
</IFRAME>

Code for moderator’s entry to a session

<IFRAME 
	allow="camera; microphone; fullscreen; speaker; display-capture" 
	src="https://your-subdomain.host-domain/host/#HASH#">
</IFRAME>

Note: Now at this stage, you may seek to configure other features, such as Recording, Room Setting, and Webhook Notifications. (See Add-on Service Configuration). Otherwise, you may do it later.  

Create Meeting Room Using Rest API

A Video conferencing session takes place in the Meeting Room hosted on the EnableX server. A Room is a virtual meeting space within the EnableX platform to host real-time communication sessions. It facilitates communication among participants through Audio, Video & Chat.

The communication between your Application Server and the EnableX server is carried out via Rest API, which is also known as Server API. Access Credentials APP_ID and APP_KEY, which you get at the time of creating a Project, must be passed as Authorization Header for accessing the Server APIs.

You can create a Meeting Room request by calling Server/Rest API through Meeting Room URL (see Example 2). To establish the room connection, IFRAME Embed URL requires a Meeting Room ID. Once the connection gets established, the IFRAME Embed starts playing Participant’s Videos on your platform.

Example#2 Meeting URL Explanation

3.1 Create a Room to get Room ID

To create a Meeting Room URL, you first need to create a Room and fetch the Room ID. You can create a Room using a Server API and the EnableX server responds with the JSON Payload containing the unique “room-id”. There are three different types of Meeting Rooms that can be created: Permanent, Scheduled, and Ad-hoc.

3.1.1 Permanent Room

It is a meeting room that always remains available for use once created. You can start it anytime and schedule it for further use in the future. Use the following Settings in JSON Payload for API Call to create Permanent Room:

{"settings": {"scheduled": false, "adhoc": false}}

Example#3 API Call to create Permanent Room

POST https://api.enablex.io/video/v1/rooms
Content-Type: application/json
Authorization: Basic XXXXXXXX
 
{
  "name": "My Permanent Room",
  "owner_ref": "XOXO",
  "settings": {
    "description": "My Permanent Room",
    "mode": "group",
    "scheduled": false,
    "adhoc": false,
    "duration": 30,
    "moderators": "1",
    "participants": "3",
    "quality": "SD",
    "canvas": false,
    "screen_share": false,
    "abwd": true,
    "max_active_talkers": 4
  } 
}

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

{
  "result": 0,
  "room": {
    "name": "My Permanent Room",
    "owner_ref": "XOXO",
    "settings": {
      "scheduled": false,
      "adhoc": false
    },
    "created": "2021-05-25T00:20:30.851Z",
    "room_id": "xxxxxxxxxxxxxx"
  }
}

3.1.2 Scheduled Room

This Room is only available for a particular duration/period that needs to be specified with a scheduled time and duration. Use the following Settings in JSON Payload for API Call to create Scheduled Room:

{"settings": {"scheduled": true, "scheduled time": "YYYY-MM-DD HH:II:SS", "duration": 30}}

Example#4 API Call to create Scheduled Room

POST https://api.enablex.io/video/v1/rooms
Content-Type: application/json
Authorization: Basic XXXXXXXX
 
{
  "name": "My Scheduled Room",
  "owner_ref": "XOXO",
  "settings": {
    "description": "My Scheduled Room",
    "mode": "group",
    "scheduled": true,
    "adhoc": false,
    "scheduled_time": "2021-05-31 05:30:00",
    "duration": 30,
    "moderators": "1",
    "participants": "3",
    "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": "xxxxxxxxxxxxxx"
  }
}

3.1.3 Adhoc Room

It can be created instantly and is only available for a single call. Use the following Settings in JSON Payload for API Call to create Scheduled Room:

{"settings": {"scheduled": false, "adhoc": true}}

Example#5 API Call to create Adhoc Room

POST https://api.enablex.io/video/v1/rooms
Content-Type: application/json
Authorization: Basic XXXXXXXX
 
{
  "name": "My Adhoc Room",
  "owner_ref": "XOXO",
  "settings": {
    "description": "My Adhoc Room",
    "mode": "group",
    "scheduled": false,
    "adhoc": true,
    "duration": 30,
    "moderators": "1",
    "participants": "3",
    "quality": "SD",
    "canvas": false,
    "screen_share": false,
    "abwd": true,
    "max_active_talkers": 4
  }
}

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

{
  "result": 0,
  "room": {
    "name": "My Adhoc Room",
    "owner_ref": "XOXO",
    "settings": {
      "scheduled": false,
      "adhoc": true
    },
    "created": "2021-05-25T00:20:30.851Z",
    "room_id": "xxxxxxxxxxxxxx"
  }
}

To learn more about Server APIs, refer to the following sources:

3.2 Create Meeting URL

The video meeting taking place in a meeting room can be accessed easily through the Meeting URL. This Meeting URL is used as a source URL in the IFRAME Embed Code.

The Meeting URL ( See Example 6) comprises two key components: Room ID (Refer to Create a Meeting Room ID) and Domain & Subdomain.

Example#6 Meeting URLs

https://your-subdomain.host-domain/#ROOM_ID#

EnableX requires unique Room IDs for both Participants and Moderators. They can join the Video Meeting with their respective unique Meeting URLs.

  • Participant Meeting URL
    • For Embed Lite – 4 Participant UI Layout
      • https//your-subdomain.yourvideo.app/#ROOM_ID#
    • For Embed Premium – 12 Participant UI Layout
      • https//your-subdomain.yourvideo.live/#ROOM_ID#
  • Moderator Meeting URL
    • For Embed Lite – 4 Participant UI Layout
      • https//your-subdomain.yourvideo.app/host/#HASH#
    • For Embed Premium – 12 Participant UI Layout
      • https//your-subdomain.yourvideo.live/host/#HASH#

Here #HASH# is a base64 encoded string with ROOM ID and APP ID (APP ID is generated when you create a Project. Refer to Section 1 – Create a Project) with “-” (Dash) as a separator, e.g. base64 encode ("ROOM_ID"-"APP_ID").

A Moderator has the following special privileges in a Video Room:

  • Lock Room
  • Record
  • Live Streaming
  • Mute Room
  • Hard Mute Participants
  • Disconnect Participant
  • Control Participants Entry
  • Close Conference

For more details, refer to the Moderator Controls documentation.

Embed the Meeting URL in your Application

The Meeting URLs can be now added into the IFRAME (see Example 7) for embedding into a web application or used in Webview for embedding into Mobile Apps.

Note: It is advisable to further qualify Meeting URLs with Query String Parameters (see Customise with Query String Parameters) to pass the feature list and other data to the video meeting.

4.1 Embed in a Web Page

For Web applications, embed the Meeting URL in IFRAME as shown below in Example 7:

Example#7 IFRAME Embed Code

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

Note: The Page where you embed IFRAME must be hosted on HTTPS and should be a responsive page to ensure the app’s responsiveness. In case, your page is not a responsive one, add the following META Tag within <HEAD></HEAD>

<META name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/>

4.2 Embed in an Android App

Embedding in an Android App requires the use of the WebView class. To allow EnableX to access the camera, follow the steps given below:

  • Override WebChromeClient.onPermissionRequest method in the WebView class.
  • Add ?skipMediaPermissionPrompt Query String parameter to allow the camera access.

4.3 Embed in an iOS App

WKWebView supports embedded pages that use WebRTC on iOS 14.5+. SFSafariViewController supports embedded pages that use WebRTC on iOS 14.3+. To support older iOS versions, follow the steps given below:

  • Redirect to Mobile Safari.
  • Use SFSafariViewController to open a website, comprising an IFRAME with specified src attribute in the Meeting URL, along with the custom user interface.

Note: If you need to use Cordova (Phonegap), install the plugin for SafariViewController.

Congratulations! You have successfully integrated Video Calling into your application/browser. Now you can configure it further by including Add-On Video Services such as Recording, Room Setting, and Notifications (Refer to Add-On Services Configuration).

Customize with Query String Parameters

The Meeting URLs can be further qualified with Query String Parameters, to pass the feature list and other data to the Video Meetings as per the requirement.

  • Use the Query String Qualified Meeting URLs directly from the browser’s address bar or as an IFRAME Embed.
  • Pass different parameters for different Participants or a Moderator in the same meeting.
  • Use the Query String Parameters to overwrite 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.

How to use Query String Parameters in Meeting URL?

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

5.1 Parameters for Embed Lite – 4 Participant UI Layout

  • name – String. Name of the Participant or Host joining the Meeting
  • user_ref – String. Unique Identifier for the Participant or Host joining the Meeting
  • video – Values: yes, no. To join Meeting with or without Video
  • audio – Values: yes, no. To join Meeting with or without Audio
  • screenshare – Values: yes, no. To enable or disable Screen Sharing
  • group_chat – Values: yes, no. To enable or disable Group chat
  • username – Values: yes, no. To display participant names on Video
  • landing – Values: yes, no. To reach the landing page or to reach the session page directly. If landing=no, then name must be used.
  • exit_url – String. URL to redirect to when user clicks Disconnect button
  • exit_url_target – Values: parent, self. Default: self. To redirect to exit_url in the self window or parent window
  • disconnect_button – Values: yes, no. Default: yes. To show Disconnect Button
  • icon_color – String. Color Code in Either in HEXCODE or Color Name. Button Icon Color. Default WHITE.
  • icon_bg_color – String. Color Code in Either in HEXCODE or Color Name. Button Background Color. Default WHITE.
  • disconnect_icon_color – String. Color Code in Either in HEXCODE or Color Name. Disconnect Button Icon Color. Default WHITE.
  • disconnect_icon_bg_color – String. Color Code in Either in HEXCODE or Color Name. Disconnect Button Background Color. Default RED.

5.2 Parameters for Embed Premium – 12 Participant UI Layout

  • name – String. Name of the Participant or Host joining the Meeting
  • user_ref – String. Unique Identifier for the Participant or Host joining the Meeting
  • video – Values: yes, no. To join Meeting with or without Video
  • audio – Values: yes, no. To join Meeting with or without Audio
  • screenshare – Values: yes, no. To enable or disable Screen Sharing
  • whiteboard – Values: yes, no. To enable or disable Whiteboard
  • live_streaming – Values: yes, no. To enable or disable Live Streaming
  • group_chat – Values: yes, no. To enable or disable Group chat
  • pvt_chat – Values: yes, no. To enable or disable Private chat
  • user_list_participant – Values: yes, no. To enable or disable User List on Participant’s UI
  • user_list_moderator – Values: yes, no. To enable or disable User List on Moderator’s UI
  • user_count – Values: yes, no. To enable or disable User Count
  • room_lock – Values: yes, no. To enable or disable Room Lock
  • fixed_toolbar – Values: yes, no. To make the toolbar continuously visible. The toolbar disappears after pre-defined time interval by default
  • room_name – Values: yes, no. To display or hide the Room Name
  • landing – Values: yes, no. To reach the landing page or to reach the session page directly. With landing=no, name must be used.

Add-On Services Configuration

6.1 Web Hook

A Web Hook URL is used to send real-time notifications of various meeting-related and post-processing events via JSON Payload format. Using the Web Hook URL, EnableX sends notifications through an HTTP POST request.

  • To configure a Web Hook URL, go to the EnableX Portal and then proceed to the “Video Configuration” section. EnableX sends notifications through the HTTP POST request with JSON Payload in the raw format on the Web Hook URL.
  • For more details, refer to the Web Hook Documentation

6.2 Recording Delivery

EnableX delivers video meeting recordings to FTP, SFTP, and Amazon Web Services S3. EnableX sends notifications through the HTTP POST request using JSON Data in raw format through Web Hook URL whenever a recorded file is transferred to the designated location.

  • To configure the Recording Delivery, proceed toward the EnableX Portal, and then move to the “Video Configuration” section.
  • For more details, refer to the Recording Delivery Documentation

6.3 CDR Access

A Call Detail Report (CDR) contains individual usage information of each user present in the meeting sessions, which can be accessed through the CDR Route. EnableX offers four types of CDR reports: For a particular period, for a particular room, for a particular room & period, and for a particular conference number.

  • To access CDR reports, go to the “Video Report” section.
  • For more details, refer to the CDR Documentation