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 on any application or browser within minutes with 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 the IFRAME code of your choice, and you are ready to go live within minutes with your 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 3 Simple Steps:

Using our IFRAME API, you can easily host Video Meetings on the subdomain of your choice and embed it directly into your webpage or mobile app in the following three simple steps:

Step#1 Create a Video Embed Project
Configure the Video Meetings Project on the EnableX portal, setup room size, features and domains.

Step#2 Create Your Meeting Room
Now that you have already configured the Video Meeting Project, set up a Meeting Room by selecting the parameters of your choice: Permanent, Scheduled or Ad hoc Room.

Step#3 Embed Video Meeting Into Your App or Site
Get the Meeting Room URL and embed it to your website or app using IFRAME code.

Create a Video Embed Project

Configure your Video Meeting Project on the EnableX portal, setup room size, features and domains.

1.1 Create a Project

To begin with, create a video 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. Check on “Video” and/or other services that you will require further 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).

1.2 Choose your Video UI Layout

The EnableX Video Embed platform offers two different UI Layouts having varied features suitable for small and large group video meetings.

  • Once you are done with project creation, head to the “Video Configuration” section to set up Video Meeting.
  • Next, select the UI Layout per your business requirement:
    • Embed Lite: 4-Participant UI Layout with limited features.
    • Embed Premium:12-Participant UI Layout with comprehensive features.

1.3 Select Preferred Features

After you have selected the preferred UI layout, you will see all the features supported by It. Though each UI Layout offers all associated features by default, you can unselect the feature(s) per your requirement. Here is the detailed list of features for both UI Layouts:

FeatureEmbed PremiumEmbed Lite
Camera MuteYesYes
Microphone MuteYesYes
Meeting NameYesYes
Participant ListYesNo
RecordingYesYes
Screen ShareYesYes
WhiteboardYesNo
Group ChatYesYes
Private ChatYesNo
File SharingYesYes
Live StreamingYesNo
Room LockYesNo

Note: Once you finish configuring the meeting features, you can customize it by passing Query String parameters to the Embed Video Meeting URL. For more detail, see Customize with Query String Parameters.

1.4 Setup Sub-Domain

Next, specify your preferred subdomain; your Video Meetings are hosted on the EnableX domain.

1.5 Application Settings

The options available in the Application Settings section allows 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 that you want the participants to receive after they Sign out/Exit or disconnect from the session.
  • Domain Whitelist for IFRAME Embed: For Video Meeting in an IFRAME to work, its domain must be allowed. As such, you would need to list down all the allowed domain(s).

Note: Prefix the domain ‘https://’ while ensuring it has no path, e,g. https://your-domain.com. On the other hand, using wildcards allows all subdomains under a permitted domain. For example, https://*.your-domain.com.

1.6 Receive Embed Code

  • After completing the above steps, a Moderator and Participants (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 toward 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. Authentication parameters APP_ID and APP_KEY, that you get at the time of creating a Project, are added to meet the credential requirements for accessing the Video Project.

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 into your platform.

Example#2 Meeting URL Explanation

2.1 Create a Room to get Room ID

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

2.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"
  }
}

2.1.2 Scheduled Room

This is only available for a particular duration/period. You would need to specify the 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"
  }
}

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

2.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 detail, refer to the Moderator Controls documentation.

Create Meeting Room Using Rest API

With the Meeting URLs, you can now add into the IFRAME (see Example 7) for embedding into webpage or use it in Webview for embedding into Mobile Apps.

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

3.1 Embed in a Web Page

Embed the Meeting URL in IFAME 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 responsive page to ensure App’s responsiveness works. 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"/>

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

3.3 Embed in an iOS App

WKWebView supports embedded pages that use WebRTC from iOS 14.3 onwards. 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).

Customise with Query String Parameters

The Meeting URLs can be further qualified with Query String Parameters to pass the feature list and other data, which Is required to conduct Video Meetings.

  • 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?

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

4.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 he 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 landing page or to reach session page directly. With landing=no, name must be used.
  • 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.

4.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 he 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 landing page or to reach session page directly. With landing=no, name must be used.

Add-On Services Configuration

5.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 HTTP POST request.

  • To configure a Web Hook URL, go to the EnableX Portal and then proceed to “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

5.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 “Video Configuration” section.
  • For more details, refer to the Recording Delivery Documentation

5.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 a particular conference number.

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