Embed a Video Meeting in your Application or Website

For embedding a video meeting in a web application, add the URL of the meeting in IFRAME (see Sample Code 1). For embedding it in a mobile application, add it to Webview.

Note: You are recommended to further qualify Meeting URLs with Query String parameters to pass the feature list and other data to the video meeting. For more information, see Customize with Query String Parameters.

Embed in a Web Page

For Web applications, embed the Meeting URL in IFRAME as shown below.

Sample Code 1

<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 ensure that it is responsive. If your page is not responsive, add the following META tag within <HEAD></HEAD>.

Sample Code 2

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

The simplest responsive HTML page to embed responsive IFRAME is shown below.

Sample Code 3

<!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="ADD-YOUR-MEETING-URL-HERE">
	</iframe>
 </body>
</html>

Embed in Android Application

To embed video in an Android application, EnableX needs access to the camera of the Andriod device. To allow camera access, make the following changes to the WebView class:

  1. Override the WebChromeClient.onPermissionRequest method.

  2. Add the ?skipMediaPermissionPrompt Query String parameter.

For detailed instructions, see Embed Videos in Android Applications.

If you encounter issues while working with WebView, check the following documentation resources for troubleshooting the issues:

Embed in iOS Application

WKWebView supports embedded pages that use WebRTC on iOS 14.5 and later. SFSafariViewController supports embedded pages that use WebRTC on iOS 14.3 and later.

To embed video in earlier iOS versions, perform the following steps:

  1. Launch Safari on your iOS device.

  2. Use SFSafariViewController to open a website comprising of an IFRAME with a specified src attribute in the meeting URL and the custom user interface.

  3. Provide media permission on the iOS device to EnableX by adding NSMicrophoneUsageDescription and NSCameraUsageDescription keys to the app's Info.plist.

Embed in React Native Application

To embed video in a React Native app, perform the following steps:

  1. Install expo-permission by executing the following command:

expo install expo-permissions

  1. Provide the media device permission to EnableX before loading the view by using the following function:
async function loadPermission () {
  try {
    const {granted} = await permission.askAsync(
      permission.CAMERA,
      permission.AUDIO_RECORDING
    );




    if(granted) {
      // Device Access available. To code further
    } else {
      // Device Access not available. Code to handle
    }
  } catch(error) {
    alert(error);
  }  
}

Embed in Flutter Application

  1. Provide the media device permission to EnableX before loading the view by using the following function:

  2. Use flutter_inappwebview and permission_handler modules to handle media device permissions in webview.

  3. Update settings in your iOS and Android projects to match your requirements.

  4. Add the webView component to your code and specify properties, room URL, and parameters.

import 'dart:io';




import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:permission_handler/permission_handler.dart';




var _lowCodeUrl = "YOUR-LOW-CODE-EMBED-MEETING-URL"; 




void main() {
  runApp(const MyApp());
}




class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);




  @override
  Widget build(BuildContext context) {
    if (Platform.isAndroid) {
      _lowCodeUrl += '?skipMediaPermissionPrompt';
    }
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: InAppWebViewPage(),
    );
  }
}




class InAppWebViewPage extends StatefulWidget {
  const InAppWebViewPage();




  @override
  State<InAppWebViewPage> createState() => _InAppWebViewPageState();
}




class _InAppWebViewPageState extends State<InAppWebViewPage> {




  @override




  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Meeting")),
      body: Column(children: <Widget>[
        Expanded(
          child: InAppWebView(
            initialUrlRequest: URLRequest(url: Uri.parse(_lowCodeUrl)),
            initialOptions: InAppWebViewGroupOptions(
              crossPlatform: InAppWebViewOptions(
                mediaPlaybackRequiresUserGesture: false,
              ),
              ios: IOSInAppWebViewOptions(
                allowsInlineMediaPlayback: true,
              )
            ),
            androidOnPermissionRequest: (
              InAppWebViewController controller,
              String origin, List<String> resources) async {
                await Permission.camera.request();
                await Permission.microphone.request();
                return PermissionRequestResponse(
                  resources: resources,
                  action: PermissionRequestResponseAction.GRANT
                );
              },
            ),
          ),
        ]
      )
    );
  }
}

By performing these steps successfully, the EnableX video is integrated with your application or browser. You can customise it by including add-on video services such as recording, room settings, and notifications.

Note: Currently, the keyboard is not displayed in Android webviews.

After setting up Video Embed, you can add new features to it, customize its look and feel, and integrate it with other services and applications. For more information, see Integration Capabilities.

Low Code Setup WizardEmbed Video in Android Applications | Get Started with Low Code Video