DEV Community: Yash Srivastava

Building A Video Streaming App Using Screen Share Using React Native Toolkit

Yash Srivastava — Wed, 13 Jul 2022 05:37:47 +0000

While video meetings make communication more personal, screen sharing makes it more collaborative. With businesses embracing remote and hybrid work where one-to-one and multiparty video calls are a norm, screen sharing becomes all the more crucial.

This post is for you if you’re looking to build a video calling application with screen sharing using React Native.

We have provided a detailed step-by-step guide to explain how you can embed the screen sharing feature in the existing application using EnableX React-Native toolkit.

Technical Pre-Requisites

Nodejs framework
JDK
Android Studio (recommended to use LTS version)

What Is EnableX React Native SDK?

The EnableX-React Native SDK is used to build hybrid real-time communication applications for Android and iOS-based mobile devices.

Creating Project in EnableX

First, you need to create a project on the EnableX portal. Here are the steps are given below:

Go to the EnableX portal. If you do not have an account, Signup here.
Next, “Create Projects”, enter relevant information as required.
You get the option to copy App ID & APP Key when you create the project the first time. In case the project has already been created, users need to go to the Video Project, then select the option: ‘I like to Code’ and then they can view App ID & App Key.

Creating a ReactNative Project

Now, you need to create a ReactNative project. Follow the steps given below:

1. Installing the EnableX React Native SDK
To install the EnableX-ReactNative SDK, open the project, navigate to the ReactNative Project directory and run the following command:

2. Importing the Reactive Native Class
Once the installation is done successfully, import ‘enx-rtc-react-native’ in the class where you want to access the EnableX capability.

3. How To Start And Stop Screen Sharing
EnableX-ReactNative SDK is used to start and stop screen sharing, while events are used to handle acknowledgements. To start screen sharing, use the following function:

To stop screen sharing, use the following function:

Once the user starts or stops the screen sharing feature, EnableX-ReactNative SDK acknowledges the event by sending event notifications to other participants:

4. Installing Foreground Service

Foreground Service is required whenever an application needs to perform a task which is also noticeable by users even when they’re not directly interacting with the app.

Therefore, you need to install the Foreground Service. It is required to use the screen sharing feature in an app. Here are the steps you need to follow to start the foreground services:

A. Use the following command to add dependency in foreground services:

B. Add permissions in “AndroidManifest.xml File”:

C. Register for the Foreground Services in the AndroidManifest.xml File:

D. Go to the MainActivity class and add a variable:

E. Now, override onNewIntent and onStart function inside the MainActivity class.

F. MainActivty.java class is a vital component of an Android application through which activities are launched.

Here is how it’s used to add foregroundEmitter function.

5. Override onActivityResult
Next, you need to override the onActiveityResult function, which is inside the MainActivity class:

6. Inside the Color.xml file, set the notification color specified in AndroidManifest.xml file:

7. How to Start Foreground Service
A. Register a Headless Task (a way to run JavaScript tasks in the background) using .js file:

B. Add a task as shown below:

C. To start the Foreground Service class, use the function given below:

8. How to Stop The Foreground Service
A. To stop the Foreground Service, you’ll need to remove the task:

B. Now you can stop the Foreground Service:

Ahoy! you made it. You’re now ready to run the application with screen sharing.

To look at more examples & sample codes, visit our GitHub repository.

Build something exciting!

5 Things You Must Consider Before Choosing A Low Code Video Embed Platform

Yash Srivastava — Tue, 12 Jul 2022 06:45:04 +0000

As businesses increasingly focus on digital transformation to stay up with changing business dynamics, they’re seeking solutions that help shorten the development cycle while also making them more agile. To survive and grow, they must develop apps far more quickly in order to respond to customer needs effectively and efficiently. Unfortunately, that has not been possible so far because of the constraints of coding, which is tedious and time-consuming. All this is changing, thanks to the disruption being caused by ‘low code platforms’ which minimize or eliminate the need to code in order to build solutions through Graphical User Interfaces(GUI)and other visual tools.

“The goal of a low-code or no-code visual builder platform is to make the app-building process easier by decreasing the amount of coding required”

The growth in low code solutions has surpassed beyond expectations. According to a Gartner report, 65 percent of all application development by 2024 will be done on low-code platforms. In response to the growing demand for video meeting solutions, several Communication Platform as a Service (CPaaS) providers have launched low-code video embeds. However, most video embed platforms currently available come with multiple constraints, such as the limitations around UI templates or the number of available collaboration features, which greatly restrict the usability of such embeds. Only a few CPaaS low code providers address the core concerns of developers like UI/UX coding, which has been a major challenge for developers in building fully functional real-time video communication solutions fast.

The list of five things that you must consider while choosing the right Low-code Video Embed Platform for your business.

1. Granularity

Most people opt for a low code solution for the simple reason that it should allow them to design & deliver a highly customized video calling app quickly. Therefore, make sure the low code solution you choose is granular enough. Unfortunately, most low code video embeds that are currently available don’t offer the freedom to customize easily. They demand a fair degree of coding knowledge if you want to customize beyond the pre-defined UIs given. Therefore, ask these questions to check the level of granularity of the platform:

Does the video embed offer the freedom to customize various UI aspects like video grid layout, fonts, colors, and text size without coding?
Can I add my preferred features to create the desired user experience?
(If the answer to these questions is not affirmative, you may want to explore further

2. Advanced Features

A low code video embed platform should not necessarily be low in features. Many CPaaS providers offer low code platforms like a lightweight version having only basic video conferencing features. Therefore, it’s highly recommended to make a list of the features required to meet your business needs. Ensure that the list contains advanced features, such as a breakout room, a waiting lobby, room lock, backdrop blurring, and live streaming to offer a cutting-edge solution. Besides, it’s advisable to check whether the platform supports PSTN integration feature that enables users to join the video meeting through a dial-in or landline number.

3. Robust Video Meeting Capabilities

Never jump the gun after reading tempting marketing gimmicks; the realities are often hidden in the fine prints. Most CPaaS providers only offer basic low-code video conferencing apps that are typically limited to one on one video calling, or at most, a limited hosting capacity of 50 participants. There are only a few that offer the capacity to do large-scale events or webinars. You must certainly look for a partner that provides both of these capabilities while meeting your niche requirements. Your best bet is a platform that allows you to host at least 1,000 people while also providing essential associated features like lecture mode, raise hand, and many others, allowing it to act as a fully-functional and dependable video conferencing platform.

4. Device-Agnostic Experience

Check whether the video embed platform allows building a platform/device-agnostic video meeting app. That’s of crucial importance as people may access video conferencing through web, desktop, mobile, iOS, and Android. Unfortunately, not all platforms are mobile compatible, which can be a hindrance and detract from the overall experience.

5. Ease of Use

The goal of a low-code or no-code visual builder platform is to make the app-building process easier by decreasing the amount of coding required. Without the assistance of developers, even a non-technical individual, a.k.a. citizen developer, should be able to create a video calling app. This is because a well-built low-code platform, allows you to build custom apps with just a few clicks, drags and drops, letting you pick your preferred video layout, font, text size, and color along with the integration of other advanced features. Therefore, try out the platform before taking the final call and check how easily you can build a completely custom solution. The key characteristics determining the ease of use in the low code/no code video builders are ease of API integration, single-click deployment, and drag & drop functionality. The absence of any of these three characteristics raises a question mark over ease of use of the platform.

The full-stack CPaaS- a critical choice

Yash Srivastava — Mon, 11 Jul 2022 09:54:51 +0000

The millennial and digital-native customer of today no longer likes to be restricted to one or two mediums of communication and clearly votes for businesses that support omnichannel communication. Customer communication is evolving. Having only voice or email capabilities does not suffice as the customers today are inclined towards messaging, video and live chat (omnichannel communication). A recent survey by Walker indicates that by the time 2020 dawns on us, customer experience will overtake price as the top brand differentiator. For organisations that have adopted effective customer experience as a part of their strategy, embedding real-time communications (voice, video, messaging) into their applications is a great way of enhancing and ensuring seamless customer engagement.

Role of CPaaS in the omnichannel sphere

Imagine a customer on an e-commerce platform hitting a roadblock having to then exit the app to make a phone call or send an email to the customer service executive. This would result in built-up frustration and is also a waste of precious time. More so if it is a time-based app, as switching the app might result in having to input the information from scratch. An ideal situation would be to provide an in-app facility to the customer to be able to make a voice/video call to the agent.

Abovesaid is the scenario where CPaaS (Communication Platform as a Service) enables organisations to create an environment extremely hospitable for customers. CPaaS, which is a cloud-based communication platform, allows organisations/developers to integrate communication features like messaging, voice & video into their applications without having to invest in the back-end infrastructure. The CPaaS providers take care of everything including the servers, networking, storage et al. While the organisations only need to manage the applications. This becomes possible through the provision of open software development kits (SDKs) and open application programming interfaces (APIs) that developers can use to embed video, messaging and voice into their applications.

No wonder why a lot of businesses now are deploying CPaaS to create collaborative and contextual communication and also to ensure differentiated user experience.

Full-Stack CPaaS Provider is the key

A full-stack CPaaS provider is a platform that delivers a heavily integrated set of programmable APIs. These APIs are closely knit together to enable the delivery of customised voice, video or messaging solutions into applications or websites. Having anything less should not call itself a full-stack CPaaS provider. It is therefore critical that organisations work with a CPaaS Provider that has a broad range of communication functionalities.

Having said that, the soaring demand for CPaaS has resulted in many voice/messaging aggregators to dive-in as CPaaS vendors. However, they often do not exhibit the attributes of a true CPaaS provider that aims to provide omnichannel communications to organisations by offering a comprehensive set of communication platforms (voice, video and messaging).

Here are some reasons why the latter might not match up to your expectations when compared with a true full-stack provider:

- Need for an all-encompassing solution

It is possible an organisation might want to start off with one of the three categories – voice, video and messaging. However, once the organisation identifies the advantages of real-time communication, it might come up with a requirement for incorporating the other two as well. In which case, a full-stack provider is your best bet. For e.g. A customer contact centre choosing only voice to begin with might see value in a video chat for a more interactive communication.

- Need to integrate new components

Vendors that are not full-stack providers might not be able to offer seamless integration of all components. For example, if you opt for only messaging first and later decide to embed voice capabilities as well, a full-stack CPaaS provider will provide you with an effortless integration of platforms whereas the former might struggle since they have not designed the products themselves.

- An increase in overhead

There might even arise a scenario where the integration of these disparate platforms will become the organisation’s responsibility that might not possess the necessary capability. Moreover, it defeats the purpose of hiring a vendor if the organisation is required to integrate services into existing platforms.

- Lack of Expertise

The vendor’s lack of integration/trouble-shooting expertise might result in errors and might disrupt the communication cycle thereby increasing customer discontent. This is because you might be trying to synchronise components that were never meant to fit together and were not designed in collaboration with each other.

A full-stack service provider will take care of all the aforementioned requirements by creating all its components in complete harmony with each other. Hence, even if you start with just one of them, integrating the rest at a later stage is seamless. Also, you pay for what you use and never for the whole package unless you opt for the latter. With its open SDKs and APIs, it gives the freedom to the developers to design the applications as per requirement.

While on the lookout for a CPaaS vendor, you may also want to consider the role of intelligence in today’s communication. Voice, video, messaging being the fundamentals of communications, some CPaaS providers are now moving towards a broad range of communication APIs that support AI/IOT/VR capabilities too. Choose one that can provide your organisation with a distinct edge over the competitors.

EnableX is one of the few CPaaS providers offering full-stack CPaaS platform in Asia and beyond with voice, video, messaging and advanced features such as recording, AR and translation. With EnableX’s robust APIs, organisations can begin with one communication functionality (eg Voice chat) and easily add messaging and video chat as they enhance their applications and workflow to be omnichannel. This gives any organisation the trust and confidence that they will not have to select a second or third platform provider as their needs expand or change. Experience EnableX here.

Recording WebRTC-Enabled Sessions: Server-side or Client-side?

Yash Srivastava — Mon, 11 Jul 2022 09:43:02 +0000

WebRTC is an open-source project which makes it possible to add real-time communication features (e.g. live video calls) directly into browser applications and websites. Often used by different industries such as banking & finance, healthcare, and education, it’s a set of JavaScript APIs for easy integration without having to deal with the inherent complexities of requiring downloads or plugins to use them. However, there are a few capabilities that are not natively available in the WebRTC stack such as recording. To embed the recording function, many developers would typically use one of the following methods depending on the technology stack used for hosting the WebRTC application and the skillsets of the developers

Full-stack developers who are building applications using the native browser API tend to wrap one of the many browser-side screen recording plugins in their application. This works as a prototyping solution. At best, it is a way to circumvent the problem rather than providing a clean and robust solution that is tightly integrated into the end-user application.
Mobile application developers building native mobile applications on top of the WebRTC stack have few choices to record the session. They would often run another recording application in the background to record the session. These quick fixes and workaround solutions are prone to cyber hacks and numerous usability issues.
Developers could also leverage WebRTC or CPaaS providers. However, there are not many such service providers that offer APIs that help in recording. For those who do, the features and architecture for recording video sessions differ. In general, there are two broad mechanisms – server-side recording and client-side recording. Let’s look at them in more detail

Server-side or Client-side recording

Server-side recording

For server-side recording, the media is routed via a media server instead of directly between the browsers. In this case, the WebRTC session is terminated over the severs on both ends with the media routed to the receiving end. The decoded media is then simultaneously sent to post-processing and recording. Service providers with server-side recording APIs allow the developers to do the following:

Recording video/audio stream for each participant in the WebRTC session. These sessions could either be one-to-one or multi-party.
Mixing and transcoding all participants’ streams into a single composite video file.
Providing lay-outing API to manage the recording content layout.
Additionally, there can be additional features such as integrating chat with recording, watermarking, etc. which are often required for recreating the session as it happened and for copyrighting

Client-side recording

For client-side recording, videos are recorded locally, and then processed before uploading to the servers. In this case, an additional client endpoint is needed to connect to the WebRTC session. This end-point is expected to install a software binary containing the recording software image. The software could either be offered as a docker image or a simple ISO. One distinctive disadvantage is that you can’t control the client’s endpoint and its performance greatly varies according to the endpoint specifications. Large scale sessions require a high-end machine with a fast disk I/O access rate and a fast CPU.

So, what’s best?

When deciding whether to go for application-level recording or the recording capability offered by a WebRTC platform provider (i.e. Server-side or client-side recording), several factors need to be considered.

Supporting Endpoints

Browsers: You need to find the relevant screen recording plugins suitable for the specific browser. If you need it to be on all browsers, which happens in most cases, you will end up having multiple plugins for each of the browsers.
Mobile App: If you are developing native mobile or hybrid applications (i.e. REACT native etc) then it is recommended to go for a platform provider

Size of the Session

- Multiparty Sessions
In a multiparty session, the probability of users not having enough bandwidth to receive all of the participants’ video streams, is high. In realistic cases, some of the participants’ video quality will be below. As a result, video recording quality, if done solely at the client end will also have lower quality. For such cases, it is recommended to go for a service provider offering server-side recording

- One-to-one Sessions
Since bandwidth may not be a challenge here, you can choose client-side or server-side recording depending on whether you prefer installing a recording server at your end and dealing with all recording management issues.

- Concurrent Sessions
For multiple concurrent sessions, load balancing is required. In such cases, it is recommended to go for server-side recording to avoid dealing with the complexity of load balancing and recording management in your application layer.

Session Recording is a “Must-Have” Requirement

If it is required that the session must be recorded for legal or business process rules, it is recommended to go for server-side recording as it is least prone to errors.

In summary, you should carefully weigh all the above options before settling down on the final solution when adding recording capability to your WebRTC-enabled application.

Try our APIs Now!

Co-browsing: Redefine Your Contact Centre Operations

Yash Srivastava — Fri, 08 Jul 2022 11:57:58 +0000

Customer is the king’ is the proverbial cliché in marketing, yet it stands the test of time even in the digital era when users can desert your site even at the slightest inconvenience. When you have a frustrated customer stuck in front of the screen, their issue must be resolved immediately. That’s where co-browsing can make all the difference by offering initial handholding and guidance to help assuage irritated customers.

The timely help can dramatically improve customer satisfaction. With co-browsing, the customer-satisfaction rating increased to 78% from 47% for web self-service, says an Abardeen report.

What Is Co-browsing?

As the name implies, co-browsing solutions allow participants joining a video call to browse together with a website or webpage with a remote participant. That way both participants can see what the other person is doing on the screen. Since a co-browsing session is simultaneous and synchronous, it can have useful industry applications, especially in the contact centre and space domains. It lets agents work collaboratively, side by side with the customer, to troubleshoot and fix their problems on the spot.

However, between co-browsing and screen sharing, customer care representatives prefer co-browsing because the experience cannot be replicated.

Why Co-Browsing Solutions Matter In The Online-First World

In this era driven by virtual connect, co-browsing features in video calling can be a game-changer. Here are the following five co-browsing advantages that can transform customer contact centre operations:

- Onboarding New Customers
The importance of onboarding customers can never be overemphasised as it’s the first real contact with your brand. It can make the entire onboarding process hassle-free while saving a lot of time that can be usually wasted in miscommunication and confusion.

- Augmenting Conversion And Sales
Your customer executives or sales advisors can engage with customers at the right moment to navigate them effectively during a complex transaction process that would have otherwise resulted in cart- abandonment, resulting in fewer drop-offs. Thus, both conversion and sales improve.

With a powerful tool like co-browsing by their side, sales reps can give a feature demo depending on the customers’ needs, which can be much more persuasive than a live chat or a phone call.

An Aberdeen Group report says that collaborative browsing solutions help increase 10% year-on-year sales growth, compared to the 6.2% growth for firms not using this tool.

- Technical Support
Not only a powerful sales aid but it also offers the best way to troubleshoot issues, especially when a customer is not tech-savvy.

- Personalising Customer Experience
Traditional tools like chatbots and voice calling are helpful, but they’re no substitute for the human touch. With new-age tools like co-browsing, the lack of personal touch can be mitigated to a great extent.

- Improving First-Call Resolution (FCR) Rate
Customer demands have changed with changing times. They’re not ready to wait indefinitely to resolve their issues but expect to be addressed in the first call only. That’s why First Call Resolution Rate is a vital call centre metric. Enterprises can reduce the friction between customers and brands by capitalising on co-browsing, resulting in increased FCR and customer satisfaction.

Co-browsing: 4 Effective Use Cases For Different Industries

Here’s how it can help in four different industries:

Sales: Product demo, cross-selling or up-selling
Financial Services (Banking and Insurance): processing of loan requests and servicing, on-boarding new accounts, filling online forms, application submission and processing, verification and processing coverage claims
Ecommerce: Payment cart processing
Support: Technical and Remote Support

Co-browsing: Re-defining Customer Experience With EnableX Low Code Video Embed

With EnableX, developers can add the co-browsing feature quickly to their applications – both web and mobile. Using our visual builder that helps a developer generate a single line iFrame code, developers can easily add such collaboration features to their Android and iOS apps as well as websites.

How Does Co-browsing Work?

A certain level of preparation is required to enable the co-browsing feature on the website or web pages. You need to make your site or webpage ready for co-browsing before starting the session. It can be easily done by inviting remote participants to join an in-app co-browsing session by sending them a unique URL with Query String Parameters.

Once a remote participant joins by clicking on the link, both users are ready for a fruitful co-browsing session. Also, you are not required to install any third-party software for this purpose.

To Conclude

Co-browsing, of course, is not a cure-all for all problems plaguing contact centre operations, and nor should it be viewed as such. However, it can undoubtedly empower customer support agents to address pressing customers’ concerns.

Learn More

To know more about how you can set up a co-browsing session, click Co-Browsing with Video Embed

Experience the power of co-browsing with EnableX Video Embed: Start your free trial now.

WebRTC video performance compared to Zoom

Yash Srivastava — Fri, 08 Jul 2022 11:00:43 +0000

Research is clear that video calls make for a more efficient workforce, particularly those that work remotely. According to Gartner, by 2024, only 25% of meetings will take place in person, down from 60% today

However, using video calls today can be frustrating, with black frames, choppy audio and frequent network disconnects. More often than not, we end up spending precious time trying to switch from video to audio, switch from mobile to WiFi, or moving closer to the router.

To find out which meeting solution works best under poor network conditions, we performed benchmark tests, pitting the leaders of WebRTC API browser-based video calls against the Zoom desktop app, Gartner’s 2020 Magic Quadrant leader for Meeting Solutions.

Also read: The Most Comprehensive Guide On WebRTC

Three Factors Critical To Video Quality : WebRTC Vs Zoom

1. Packet loss

To understand the factors affecting the quality of a video call, we need to know that speed test is not the same as packet loss. In layman’s terms, packet loss represents gaps in data transmitted over the internet.

WebRTC video stream uses the User Datagram Protocol network stream. When packets go missing on the Internet, the most important video frame, the I-frame cannot be reconstructed by the receiver. Missing video frames result in frozen or jerky video call experience.

Unlike streaming a video from Netflix, video meetings are broadcast in real-time. When watching Netflix, missing packets are retransmitted until one receives a full buffer of error free video frames before streaming starts. This latency will make real-time video meetings impossible. In sum, video solutions will face the issue of packet loss and the ability to resume back to full video resolution quickly is critical.

2. Bandwidth

The second factor is the bandwidth. Upload bandwidth is required to publish your video stream and download bandwidth is needed to subscribe to another participant’s video stream. The more participants you have in a video conference, the greater the download bandwidth you need.

When upload bandwidth is insufficient, most video conferencing apps will mute the publishing video of the affected participants, leaving only audio capabilities, until upload bandwidth is fully restored.

3. CPU availability

WebRTC requires your computer’s CPU to transcode video. The higher the video’s resolution, the greater the CPU power required. The more participants you have in a video call, the more CPU power is needed to decode the videos for all participants.

Benchmark Network Congestion Test: WebRTC Vs Zoom

We conducted the basic 1-1 video call with leading WebRTC video chat API providers and then also with Zoom desktop App

The publishing bandwidth for one of the WebRTC participants is throttled at different bitrates ranging from 100kbps, 200kbps, 250kbps and 300kbps.

We then measured the time (T1) taken for the video to resume streaming normally, at more than 1 frame per second (>1fps). The bitrate and resolution may still be ramping up after this time until full adaptation. We also measured the time (T2) taken for full adaption or full resolution after bandwidth congestion is removed.

To measure the duration for which the video is muted or frozen, we used a camera video source with a real-time stop-watch counter accurate to one second. This methodology will clearly identify precisely when video stream froze (0 fps) and when it resumed to partial adaptation (greater than 1fps).

To measure when the video recovered to (full adaption) full resolution and full framerate we used chrome://WebRTC-internals for the browser base 1-1 video call and the Zoom app video statistics.

The raw results are tabularised for two different WebRTC CPaaS providers and the Zoom app below.

During the period when network bandwidth is throttled, a 0fps means that video freezing was evident during the test duration. A range 10fps-25fps means the framerate is inconsistent.

Observations : WebRTC Vs Zoom

The Zoom App froze the publishing video completely when the network bandwidth dropped below 300kbps while WebRTC A continued to publish at partial video adaptation at 200kbps and 250kbps bandwidths.
Both Zoom app and WebRTC froze the video when throttled below 100kbps. However, the initial recovery time by Zoom is shorter, taking less than 10 seconds compared, to WebRTC needing over 40 seconds. The recovery to full adaptation for Zoom is longer (needing 80 seconds), compared to the 41 seconds that WebRTC A needed.
WebRTC delivers acceptable smooth video quality at 300kbps bandwidth and even below that, whereas the Zoom app struggles to deliver a video frame every few seconds at 300kbps and the video froze occasionally during the throttled period.
The Zoom app excelled at providing acceptable video quality (>1fps) almost immediately after the bandwidth is unthrottled.
All the tests conducted show a high-quality freeze frame when partial video adaption is not available. We did not observe any black frames.

In summary the WebRTC video experience above 100kbps is considerably better than the Zoom App. Zoom shows a better video recovery time for low bandwidth condition (<100kbps).

Beyond video quality, the strength of WebRTC is the lightweight SDK toolkits provided by numerous CPaaS providers to easily integrate existing application for video and voice calls.

Disclaimer : WebRTC Vs Zoom

This is not meant to be an exhaustive comparison of either Zoom’s media stack nor WebRTC. It is a simple test to evaluate their performance under poor network conditions. Poor network conditions for WebRTC may be due to UDP packet loss and low CPU availability.

We did not perform an empirical evaluation of the audio quality but audio was present for all providers during the period when the bandwidth congested.

To limit the upload bandwidth for 30 seconds, we used traffic control (tc) utility that is available from the operating system.

The tests are all conducted with the same two virtual machines running ubuntu 18.04 with chrome browsers version 78 and above for Zoom & WebRTC app version 3.5.352596.0119.

We have not taken into consideration the location of the WebRTC media servers in the above tests. For completeness and comparison between WebRTC providers, we measured the RTT of the media server to the local test machines as approximately 70ms and 270ms for WebRTC provider A and B respectively. This may account for the slightly poorer performance of WebRTC B compared to WebRTC A.

Source : (1) 2019 Magic Quadrant for Meeting Solutions by Gartner.

To try it out, simply sign up here for free

Learn How to Use EnableX Visual Builder To Generate Video Call iFrame Code

Yash Srivastava — Thu, 07 Jul 2022 10:16:01 +0000

EnableX Visual Builder offers the easiest way to quickly add video calling to your website using an iFrame code. Once you select the required features, text size, font, colour that you want to see in your video calling, you receive a single line of iFrame code that you need to embed on website and mobile app.

A Step-by-Step Guide

For the sake of simplicity, this tutorial will walk you through the process on how to generate a low code iFrame embed using the EnableX Visual Builder.

Here is how you can do it step by step:

1. Create Project

A. Sign Up to create an account on the EnableX Portal. Once you are in the portal dashboard, press Add Project button. You are directed to your Project Dashboard where you can press the Create Project button to start creating a video call project.

B.Next, fill in the mandatory project details like Project Name, Application and Description **fields. Now, enable Video provided under **Capabilities, and Press the Create Project button.

Note: Fields marked with (*) are mandatory.

C. It throws a pop-up informing APP KEY and App ID are ready. Now, press the Get Started button on the Pop-Up.

2. Select Pre-built Template

A. Choose the ‘I Prefer Less Code’ option and click the Start Building button. It heads you to Low-Code Video Embed page.

B. Now, choose the relevant template per your use case requirement.

For example, if you select the Virtual Classroom template, you are directed on the page where you can review the Virtual Classroom UI template and features. You can also add or delete any feature if you want using this Visual Builder tool.

Now, click the **Next **button provided at the bottom right part. It directs you to Setup Sub-domain page.

C. Set subdomain and whitelisted domains

Now, you need to specify your subdomain, which will be hosted on the EnableX domain. You can select a sub-domain in the Set Your Sub–Domain field. Once, you select the preferred sub-domain, click the **Next **button.

_* After selecting the sub-domain, press the Check Availability button.

Whitelisted domains are list of allowed domains that you trust. You can do this later as well _

This directs you to the Edit Template page where you can customise it at the granular level of UI, features and capabilities. It has five tabs to perform different functions: On-screen Layout, Toolbar Display Settings, Feature Selection, Moderator Settings, Accessories.

3. Customise Your UI with Visual Builder

These UI templates are preloaded with relevant features based on the use case, but you can easily customise them further. Else, you can skip this step.

A. Go to the On-Screen Layout tab, select your preferred room layout, such as Room Size, Participant’s & Moderator’s View.

At EnableX, we can provide up to 100 participants’ room size. However, the Visual Builder gives you the option to choose up to 50 participants. If you need to extend your room size, please contact our sales.

B. Now, come to the Toolbar Display Settings tab and select the features you want to show on your toolbar. You can choose Meeting Room Name, Duration, Participants’ Number, Full-Screen options. It also gives you the option to keep the toolbar either fixed or movable.

C. Next, come to the Feature Selection tab, which provides you with the option to choose basic, collaborative and other advanced features. You can select collaborative features, such as recording, screen share, chat or whiteboard that you need in your video calling.

In addition, you also get many premium features, such as Co-browsing, Live Stream, Virtual Background. You can also select a preferred Video Grid layout like Gallery or Leader view or both.

* Only up to five features can be displayed on the toolbar. You have the option to decide which five features you want to display on the toolbar and which one will be hidden under (…).

D. Head to the Moderator Settings tab, you get plenty of options for moderator controls. It has all the basic features like such as Floor Access Control, Lobby, Breakout Room and Room Lock features. Based on your requirement, you can enable/disable the Administrator setting as shown in the picture given below.

If you don’t want to display Exit button, disable the Display Exit Button.

**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.
*Basic Terminologies:

Floor Access Control: Temporary permission to be a part of the video meeting.
Lobby: Allows you to let participants wait.
Breakout Room: Create a room of different groups where participants can discuss.
Room lock: Keep uninvited participants away from the meeting room. E. Once you’re done with the Moderators Settings, move to the Accessories tab, you reach now closer to being done. This section is all about aesthetics, look and feel. Here, you can select the preferred Design, Text and Filters. You can Play with different features and see how they look.

Design tab allows choosing colour, toolbar icons. Play with different options. See the image below. You can customise the background, Toolbar and can even change the Exit Button colour. Toolbar Icons allows you to select Line Icon or Solid Icon.

Whereas, on the **Text **tab, you can select the font size of chat text, top bar display and Meeting Room name text size.

Now, you can go to the Filters tab and enable the Background Blurring option if you want to allow for blurring your video background.

4. Get Code and Create Rooms

You are directed to the Low-Code Video Embed page. Now, under the Get Your Code Snippets, you have three options:

A. The first option is ‘I am good with 1 Meeting Room, Give me single virtual room code”. This is suitable if your requirement is limited to just one meeting room and you are just testing for now.

B. If you are satisfied with the video call, you can start creating more permanent rooms using our APIs. To know more about creating more permanent room, read this blog: https://www.enablex.io/developer/video/low-code-video-embed/create-meeting-room-using-rest-api/

C. In case you know how many concurrent rooms you need to support your use case, you can generate iFrame code for these rooms without coding. Select the third option ‘I would need a fixed number of meeting rooms. Please provide me with all the codes’.Here is how you can do this:

When you select this option, it opens a new box below where you can enter required inputs.
Press the Get Code button. A dropdown named ‘Get Your Code Snippets” opens. Next, enter different fields with relevant inputs.

Congrats! Your iFrame code is generated. Copy the iFrame codes to the HTML block of your website. You can now copy individual Rooms code snippets.

Or, you can also copy all Meeting Rooms codes by clicking on the Copy All button provided at the top right part of the page.

Now, your project is setup, and you can go live. However, you can still configure some more advanced features if you want. It’s purely optional.

5. Configure Add-on Features (Optional)

A. Go to Manage Video Embed and click the Configure button. Use this section to configure features, automate app workflow and more.

B. Now, you reach the Low Code Video Embed Page. It gives you eight advanced options.

Here it is to be noted that this is purely optional and required only if you are looking for advanced features and capabilities.

You can know more about these different options by separately clicking on each tab.

For example, when you click on the Features tab, you get three advanced features: Live Streaming URL, Virtual Backgrounds, Co-Browsing URLs.

C. To know more about each of them, just click the dropdown icon. You can upload an image or image URL as Virtual Background and click the **Save **button.

Hey, by now you must have realised that it’s super easy to build a meeting app—all it needs is few clicks, drags & drops, and you are done.  

You are not required to code at any stage, it’s so easy. Even if you are an absolute beginner, you can learn how to generate an iFrame code using EnableX Visual Builder.

The advantage of EnableX Visual Builder is it doesn’t require the use of a third-party plugin.

If you have any questions, feel free to leave them in the comments below. We’ll be happy to respond.

Build Something Exciting!

Creating a Production-Ready WebRTC App for Video Calls: 5 Considerations for Developers

Yash Srivastava — Thu, 07 Jul 2022 07:33:12 +0000

Live video calling is revolutionizing the way we interact with people across the globe. But video calls aren’t just about live video. The ability to integrate communication into the workflow to achieve specific goals — to make it contextual to daily work — is crucial, and WebRTC is one proven platform to help achieve those goals.

Unlike Skype, which is a stand-alone communication platform, WebRTC is an open-source technology, and it allows for adding real-time communication features such as live video calling directly into browser applications and websites. It is a set of JavaScript APIs for easy integration, without having to deal with the inherent complexities of requiring downloads or plugins for use.

Before you tackle using WebRTC on your own, there are a few questions to consider and issues to understand, especially when deploying large-scale video call apps.

Do I Need A Media Server?

A media server is not required if you only need to connect to two or three participants in a video call — but that assumes they are on a high-speed, uncongested network. Issues such as distribution and latency all kick in once you move from a one-to-one video session to more than two participants or anticipate large-scale webinars or broadcasting. And when you want to add in features such as recording, transcoding, and connecting calls to PSTN, the burden increases.

This is because WebRTC is built on a peer-to-peer (mesh) topology. Each participant in a session is connected directly to the other participants. When the number of participants increases, maintaining direct connections (including coding and decoding) between all participants becomes CPU-intensive and unsustainable (see diagram below). As a result, the quality of the video call degrades (in the form of frozen video and sound problems).

Server-based topologies like Selective Forwarding Unit (SFU) or multi-point control (MCU) can help address these limitations.

Server-based topologies for scalability

SFU-based topology is computationally less demanding. It does not require transcoding and mixing, making it more scalable and economical. Each participant sends their video stream to the server. The server then forwards those streams (in packets) to the other participants (the other subscribers’ browsers). This reduces the bandwidth requirement, as it minimizes the uplink bandwidth needed from each participant. Furthermore, with a server, developing other functions like transcoding, recording, and Session Initiation Protocol) (SIP) integration becomes simpler (which will be discussed below).

Bonus Tip: Plan for the long term: even if your current requirement is only 1-to-1 calling, make sure your implementation can scale easily in the future. There is no QoS guarantee with the WebRTC stack and a TURN server is required for peer discovery in WebRTC when the users are on a restricted network.

How Do I Optimize Bandwidth?

Let’s say you decided to go with an SFU. You might want to introduce simulcast as well. In a perfect scenario where bandwidth is not an issue, you’d have all participants on high-quality 720p video resolution, which requires 1.5Mpbs per participant. In the example below, each participant in the session sends out 1.5Mbps and receives three streams of 1.5Mbps. In a four-party call, the media server will need to receive 6Mbps and send out 18Mbps.

Realistically, sustained high bandwidth for each participant is unlikely — even more so with an increase in the number of participants. In a multiple-bandwidth scenario, without simulcast, the SFU will receive feedback from each participant about their network connection and will stream at the lowest bitrate to ensure all participants in the session can view the content. The obvious problem with this is that one participant’s stream can lower quality for all participants.

Simulcast-Optimized Video Quality

Simulcast, on the other hand, is a mechanism by which a device sends a video stream that contains multiple bitrates.

With simulcast, a user/client will encode their video into multiple different bitrates. These video streams are then received by the SFU, and the SFU can pick which stream to send to which participant, based on subscribers’ available bandwidth. This is extremely useful in a broadcast scenario. Each participant can consume whichever bitrate is best suited for them.

Using the above example, with simulcast the amount of bandwidth needed from the media server would be just 8.4Mbps outgoing and 8.8Mbps incoming (assuming two participants are on a smaller window, and thus only need 300kbps of bandwidth). As you can see, a simulcast environment improves the effectiveness of bandwidth consumption and the quality of group calls:

Bonus Tip: For large-scale calls, you don’t have to “squeeze” everyone onto the window. Instead, you can just display the last few active participants on the screen. We call this Active Talker. Together with simulcast, you get more realistic and efficient user experience. Active Talker is not a feature available in WebRTC.

How Do I Connect To VoIP/PSTN?

While web browsers and native apps tend to be the primary focus of modern communication, we cannot ignore users with a VoIP-based endpoint or mobile or landline connection over PSTN. Therefore, it’s imperative for users to be able to dial into an active WebRTC-based session from a phone or have their phone ring when invited to join.

SIP Signaling for WebRTC Apps

To do this, you need a gateway or switch that can speak the protocol used by VoIP phones everywhere: SIP. Although WebRTC uses the same underlying protocols that VoIP uses, including Real-time Transport Protocol (RTP), Real-time Control Protocol (RTCP), Secure Real-time Transport Protocol (SRTP), and Session Description Protocol (SDP), it has no native support for SIP-based signalling. Instead, choosing how to signal for call establishment is left to the developer. As a result, connecting WebRTC to PSTN/VoIP endpoints requires a WebRTC/SIP gateway. So you have two choices: either develop in-house or employ a gateway. This requires enough understanding of both WebRTC and SIP protocols to make the two work together cohesively.

Bonus Tip: To connect to a PSTN line you may also need to deal with legality issues. For example, you cannot legally mix VoIP and PSTN traffic for VoIP calls originating in the Indian subcontinent.

How Can I Add Recording As Part Of My Workflow?

Both client-side recording and server-side recording techniques help you work around the challenges of recording with mesh networks. JavaScript coders tend to favor client-side recording, but it comes with limitations. For instance, videos are recorded locally and stored for later use, so you have no visibility into how much available storage you need. And because WebRTC media is pushed over UDP transport, recorded video quality may be suboptimal if there is packet loss on the transport channel.

Server-side Recording

With server-side recording, media isn’t sent from browser to browser. Instead, it is sent directly over media servers. When the media is ready to be transmitted, the WebRTC session is initiated with the server as a session broker. The media is routed to the receiving end via the server and, at the same time, the decoded media is sent for recording and post-processing. Recording processing includes combining multiple media inputs from all participants into a single media file, changing the format for playback, and compressing the file size.

Bonus Tip: Recording media is just one step. You need to also think about archiving, processing metadata, and how, when, and where the playback takes place. Don’t forget to incorporate access security, too.

Is My Media Secure?

WebRTC is inherently safer in several ways. Because it does not use plug-ins, it eliminates one possible vector of attack through malicious plug-ins or malware. In addition, browser patches are deployed quickly and regularly. WebRTC also mandates all media be end-to-end encrypted and that applications be HTTPS-compliant.

Added Security

WebRTC sends encrypted media over secure Datagram Transport Layer Security (DTLS) channels and only permits sending encrypted RTP streams via SRTP. However, WebRTC’s signalling layer should be encrypted, as well as media servers. For additional security, you might want to consider hosting your media servers on-premises. This is a great option for organizations seeking maximum control and privacy of their data.

Bonus Tip: Make sure you’re aware of relevant regulations and compliance requirements when developing your apps. For example, healthcare organizations require Health Insurance Portability and Accountability Act (HIPAA) compliance for patient personal data privacy.

DIY or CPaaS?

While source code for WebRTC is free and easily available to developers, creating your own application can be challenging. There are many considerations, such as sourcing for media and signalling servers, integration, and security. There is no QoS guarantee in the WebRTC stack, and a TURN server is required for peer discovery when users are on a restricted network.

Currently, there are not many WebRTC experts available worldwide, making a CPaaS provider a more viable alternative. One such provider is EnableX. Built on a carrier-grade platform, EnableX offers developers all the necessary toolkits to develop engaging communication experiences, from one-to-one chats to large-scale broadcasts and webinars, without needing to build backend infrastructure and interfaces.

A feature-rich, scalable and secure platform, EnableX offers recording, Active Talker, translation, pre/post-call analysis capabilities, and more. The platform is continuously optimized for the highest video quality.

EnableX is a great option for those who are looking to reduce their time to market and their upfront development costs while maintaining a large degree of control over solutions design and development. Try our APIs Now!

EnableX Video API And SDK: Video Call Recording And Watermarking

Yash Srivastava — Wed, 06 Jul 2022 12:35:26 +0000

EnableX powerful Video API and SDK‘s call recording and watermarking enables you to record, store and brand your video calling sessions so that you can play them back anytime, anywhere. Organizations need recordings of video conversations for various purposes including:

To adhere to industry regulations, company policies and country-specific laws
Let your customers access their recordings at any time, from anywhere
For employee training and re-skilling in new roles
Generating additional revenue via on-demand access to recordings.

EnableX Video Call Recording

This feature is available as a standard feature on the Video API & SDK platform, which can be configured for auto-recording or a developer can also invoke APIs to start the recording on-demand. Let’s learn more about auto and on-demand video call recording:

- Auto-Recording
You can configure a meeting room with { settings: { auto_recording: true }} during Room Creation to automatically start recording a video call session. The recording can be stopped anytime by invoking the stopRecord() method.

- On-Demand Recording
Using the EnxRoom.startRecord() method, one can start recording the video session. With EnxRoom.stopRecord() method, the session can be stopped.

There is no limit to the number of times one can start/stop recording, which is a handy feature.

Types of Video Recording Files

- Individual participant (Stream)

Users’ stream are recorded individually and can be made available for download in the .MKV format.

- Transcoded Re-playable Session

These are the files created as single composite video file from individual participant’s streams, which are available for download in the .MP4 format

Here it is to be noted that individual session recordings are available for download immediately post-session. However, it can take up to 45 minutes to transcribe and create a single, playable MP4 file.

Video Recording Delivery

Besides, with EnableX Video Recording Delivery Service, recorded video sessions can be uploaded on to your preferred server location. We currently support file transfer to the following Services / Host Servers:

FTP / SFTP
SCP
AWS S3 bucket
Google Drive
Azure Blob Storage The recording feature is currently available for both web and mobile applications.

To know more about how to set up video recording delivery, click here.

Fetching Video Call Recording

Here are the following four ways to access video call recordings:

Use Server API to get the file details & fetch the recordings
Delivered to your FTP / SFTP Server automatically
Download through Portal Get notified through notification URL whenever video chat recording is ready to be downloaded.

Video Watermarking
Another feature with EnableX is you can add a watermark to your recorded video files by uploading an image file on the platform. It helps not only in branding but also prevents unauthorised use of your recorded videos.

To know more about how to enable video watermarking on recorded files, click here.

To Conclude
A flexible and scalable recording capability is essential for video calling applications. At EnableX, we’ve built the most feature-rich and complete solution to help businesses.

Learn More
For more information, see our documentation.

Experience the power of EnableX Video Call with Recording/Watermarking APIs & SDKs: Start your free trial now.

How To Develop A WebRTC-Based Audio/Video Communication With No Code

Yash Srivastava — Wed, 06 Jul 2022 12:13:10 +0000

WebRTC protocol has revolutionised the way real-time communications are designed, developed and deployed. Most real-time communications solutions are being created on top of the WebRTC framework.

WebRTC-based audio/video solutions can be challenging to build. But there is good news for you. It lets you create these solutions without coding them.

In this post, you’ll know various possibilities for developing such a solution to build a feature-rich solution quickly.

What Is WebRTC And How Does This Work?

WebRTC is a free, open-source framework developed in 2011 by Google to facilitate peer-to-peer data transfer without plugins, native applications or third-party proprietary software. It allows adding real-time communications capabilities to your application and is supported by all major browsers.

When developing a WebRTC-based application, a developer needs to consider the entire workflow of the application when connecting to remote users, and this is where things can be complicated.

Here are some broad scenarios that need to be taken into account while embarking on the path of building a power-packed audio-video real-time communication:

EnableX Low Code Video Embed And Visual Builder

Developing applications that run on multiple platforms requires knowledge of the skills involved in cross-platform development, such as web, mobile, and WebRTC. The reason is building such applications can be difficult, platform-as-a-service (PaaS) providers can provide low-code or no-code solutions to facilitate the process.

EnableX Low Code Video Embed solution and Visual Builder is currently the most advanced video/audio WebRTC based communication platform.

Some of the salient features are:

Screen sharing/annotation allows participants to annotate over a screen share.
Two-way annotation during a live video session
Audio join in / audio calling to a phone number from the video room
UIkit for mobile frameworks allows you to develop video-based apps in no time for mobile frameworks
Co-browsing
Picture-in-Picture mode for screen sharing allows you to view other participants while you are surfing other websites
Multiple layouts for video meeting rooms
Customisation/personalisation of audio/video rooms
Visual builder –configure your UI
Customized backgrounds
Multiple layouts for recording
Live recording/ Live streaming/ Multiple live streaming/ Transcoding/Water marking/ encrypted recording
Whiteboarding
Language personalisation
IP zoning I hope you’ll have a fair idea of the different scenarios by now. To gain hands-on experience on how to use Low Code Video Embed solution to build a real-time audio/video solution, try out EnableX Low Code Video Embed.

You can try our Free Video APIs Video Conferencing Platform with a Live Video Conference in a small group of 6 people for 15 minutes. Click here to try!

Build something exciting!

How To Create A Video Chat App Using EnableX UIKit – iOS Framework

Yash Srivastava — Tue, 05 Jul 2022 12:01:28 +0000

The popularity of real-time video calls around the world has exploded big-time. This exponential growth has been sparked by a rising number of use cases of live video streaming.

So, if you’re a developer looking to capitalise on the growing market for real-time video streaming, this post is exactly what you need.

Here’s a detailed step-by-step guide on how to create a video chat app with Low Code iOS Native UI using EnableX UIKit.

After reading this post, you’ll be able to build a powerful real-time video chat app all by yourself.

What You Will Get

A real time video call app that will allow you to live stream a video call or a virtual event to popular streaming platforms like YouTube, Vimeo or Facebook Live (Meta)
Smooth sync with all popular devices and compatibility with iOS and Android platforms
Multiple developer environment support that includes ReactNative / React JS / Flutter / Native Android and IOS etc.

After reading the post, you can add these features:

Screen sharing
Annotation on remote video
Security
Seamless switch between video and audio under normal network conditions
Auto – Reconnect in the event of intermediate network loss

Why Are We Using EnableX Low Code Video to Create A Video Chat App?

Creating a real-time multiparty video call app along with the capability to Live Stream the session is not an easy task because it involves several steps along the way that are complex, such as UI/UX coding, mobile development, video stack integration, security, and so on.

Try EnableX Low Code Video Embed

The same functionalities will help you quickly build a native mobile UI.

What Is UIKit Framework?

The UIKit framework is used for developing apps for iPhones and iPads. It provides the window and views architecture for implementing the UI interface, along with the required event-handling infrastructure for delivering the multi-touch feature and other types of inputs for your app. The framework’s main run loop is used for managing interactions between the users, the system and the app.

The framework also offers support on the following fronts:

Animation
Document
Drawing and Printing
Information about current devices
Text Management
Search and Accessibility
App extension support and resource management

What Is EnableX UIkit Framework?

The EnableX UIkit framework provides fully customizable native UI for mobile devices, with ready-to-go Video APIs and SDK required for integration of video sessions that are powered by the EnableX platform.

The EnableX UIKit framework for mobile platforms, such as phones and tablets, allows developers to easily integrate the video conference UI.

The UIKit framework provides 100% native experience of UI.

Video UI Kit

How To Use EnableX UIkit – iOS Framework

The EnableX UIKit-iOS framework is easy to use. Before we discuss the steps, let’s take a look at the prerequisites you need.

What You Need:

EnableX developer account (click Here)
Xcode 11.0 or a later version
An iOS device with a minimum 11.0 iOS
A basic understanding of iOS development
CocoaPods
A valid token to join the room
*To create the EnableX Room and generate a token, read this post: How to create the EnableX Room and token)
Camera permission
Mic permission
Getting Camera And Mic Permission In iOS

To get the camera permission, use this sample code:

Private Func getPrivacyAccess(){

Let vStatus = AVCaptureDevice.authorizationStatus(For: .video)

If(vStatus == AVAuthorizationStatus.notDetermined){

AVCaptureDevice.requestAccess(For: .video, completionHandler: { (granted: Bool) In

})

}

Let aStatus = AVCaptureDevice.authorizationStatus(For: .audio)

If(aStatus == AVAuthorizationStatus.notDetermined){

AVCaptureDevice.requestAccess(For: .audio, completionHandler: { (granted: Bool) In

})

}

Add NSCameraUsageDescription And NSMicrophoneUsageDescription in your app-> info.plist

Adding EnableX UIKit – IOS Framework

To add the UIKit framework, go to your project directory.

Now, you need to configure the pod library.

To initiate the pod library, use the following command in the terminal:

‘Pod Init’

Next, open your pod file and add the required library as stated below:

**Pod ‘EnxRTCiOS’

Pod ‘Socket.IO-Client-Swift’, ‘~> 15.0.0’**

Next, install the pod file through the command ‘Pod Install’.

The pod file installation is over your required dependency library has been installed.

Open your project.xcworkspace, drag and drop Enx_UIKit_iOS.framework to your project.

Now, click here to download Enx_UIKit_iOTS.framework.

After manually adding the Enx_UIKit_iOS.Framework, go to -> Target -> Framework, Library and Embedded Content and select Embed & Sign Up for your Enx_UIKit_iOS.Framework.

You are done with the manual setup.

Next, to install the pod Enx_UIKit_iOS.Framework, follow the first two steps as mentioned above.

After that, open your pod file and add the required library as given below:

‘pod Enx_UIKit_iOS’

After adding the **Enx_UIKit_iOS.Framework* through the pod, you’re not required to add the following dependencies:

pod ‘EnxRTCiOS’
pod ‘Socket.IO-Client-Swift’, ‘~> 15.0.0’ ** To install your pod file, here is the sample code shown below:

How To Install Pod

Go to your project directory through the terminal and hit the below-given command:

‘Pod Install’

Your setup is done the setup either manually or direct through POD.

*Note: The Enx_UIKit_iOS framework don’t work on simulator.

Next, go to your class and import the Enx_UIKit_iOS framework.

For example:

Swift

Import Enx_UIKit_iOS

Objective- c

@Import Enx_UIKit_iOS;

@Class Enx_UIKit_iOS;

@Interface yourmainclass: UIViewController

Now, your library has been imported to your project.

Here is how you can initiate and use:

Swift

//Initiate the EnxVideoViewClass

let enxViewer = EnxVideoViewClass(token: token, delegate: Self)

//Add this to your view

view.addSubview(enxViewer)

//Set the frame

enxViewer.frame = Self.view.bounds

//Set the constraint to auto manage UI if the orientation changes

enxViewer.autoresizingMask = [.flexibleWidth, .flexibleHeight]

Objective-C

//Initiate the EnxVideoViewClass

EnxVideoViewClass *videoView = [[EnxVideoViewClass alloc] initWithToken:@”token” delegate:Self];

//Add it to your view

[Self.view addSubview:videoView];

//Set the frame

videoView.frame = Self.view.bounds;

//Set the constraint to auto manage UI if the orientation changes

videoView.autoresizingMask = (UIViewAutoresizingFlexibleWidth |UIViewAutoresizingFlexibleHeight);

A user needs to implement Delegate for receiving callback.

Here, we have given two callback options for users to clear instances or for any other purpose.

Disconnect: Callback Response For Disconnect
func disconnect(response: [ If Any])
The callback response Disconnect carries information about the cause of disconnection.
Error: Callback Response For Connection Error
func connectError(reason: [Any]?)
Here, the Reason will carry information about the cause of the error.

When EnableX UI Kit Framework Starts Loading:

When the UI starts customizing, it will look like the following frame:

When the connection is established between both sides of a call:

You’re now ready to go live!

So, there you go. Now that you know how to create a video chat app, go ahead and enjoy streaming your feed.

You can also check out other similar resources and surprise everyone around you by building more cool stuff!

How to Build an iOS Video Call App with Few Lines of Code

Yash Srivastava — Tue, 05 Jul 2022 10:34:48 +0000

As digital communication is growing rapidly, app-to-app calling stands out as an exciting thing to try out. While it feels tempting to quickly add an audio/video calling feature into your iOS app, it’s not an easy job. That’s because building it from scratch involves plenty of coding and complex integration.

That’s where the EnableX CallKit framework comes into the picture. It makes the process quite simple and easy, and you do not need to invest much time and energy in writing unending lines of code!

This detailed tutorial on ‘How to Build an iOS Video Call App’ takes a look at how to leverage the WebRTC–based EnableX Video framework and the EnableX CallKit to enable Audio & Video features with a native dialer interface on your app.

What Is EnableX Calling UI Framework?

It’s a framework that helps developers to enable audio and video features in the app with just a few lines of code, that’s it! The framework consists of two parts:

EnableX UIKit – Built on top of the native UI components
EnableX iOS Audio/Video calling framework.

EnableX CallKit Framework: The Problem It Solves

Before we dive in, let’s first go over a few things that you need to know. Earlier, we had introduced iOS SDK so that you could build an iOS Video Call App with audio/video features. But it still required the creation of a Calling UI by the developers. In addition, all calling-related events also needed coding. The bottom line is that it still required plenty of coding from the developer’s side.

To make it easy & fast, EnableX introduced UIKit. Once it’s added to a project, it automatically installs required iOS SDKs, and automatically handles all the UI and calling-related events. It also helps create 100% native UI. So, with this feature, a developer can add the audio/video feature to an app with just a few lines of code. The UIKit enables a live video chat and also manages all calling-related events. Now, the question is, when you enter the room and want to add other participants/users to join the session, they need to be informed. This can be done by creating events to send notifications to end-users (or participants). But for that, a calling UI is required at their end, otherwise, they can’t join a call. It’s an essential feature for a seamless audio or video call experience. However, it again demands a lot of coding.

Apple’s CallKit tried to solve this issue by taking care of the UI part, but the problem of managing notification-related events still persisted.

The EnableX introduces the CallKit framework to take care of these issues. It intelligently replicates all native classes of CallKit framework. It wraps all classes into a single unified class, and also internally manages calling-related events. Thanks to the EnableX CallKit, a developer now needs to write just 4-5 lines of code instead of the usual 800-1,000 lines.

*The notifications can be handled by APNS or any third-party notification provider service.

Enable VoIP service on your certificate if you want to open CallKit through notifications.

Note: To try out this code, use iPhone with iOS 12.0 or a higher version.

Note: CallKit is not supported on simulators.

Prerequisites for Building iOS Video Call App

Basic-to-intermediate level understanding of Swift/objective-C and Xcode is required.
The Voice-Over IP feature needs to be enabled in the application under the background mode.
To visit the tutorial, create an EnableX Developer Account.
Xcode 10 or higher version is needed.
You’ll need iOS 12 or a higher version for installing EnableX CallKit.

Let’s now take a step-by-step look at how to build a simple and seamless app-to-app calling mechanism. Let’s start with installing the EnableX CallKit:

Use CocoaPods to install the project files and other dependencies.
To install Cocoa Pods, visit Cocoa Pods ‘Getting Started’ webpage.
Open your project podfile and add pod ‘Enx_CallKit_iOS’.
In the terminal, go to your project directory and type ‘pod install’.
Reopen your project in Xcode using the new *.xcworkspace file. That’s it, you’ve installed! But before moving ahead, there are a few basic things about the EnableX CallKit framework that you need to know.

Understanding EnableX Classes

Let’s check out what EnableX Classes are and what they’re for:

EnxRtc: It offers developers a way to connect with a meeting room and join in.
EnxRoom: It handles various room-related functions to communicate with EnableX media, such as the endpoint connected to the EnableX meeting room, publishing self-streaming, and subscribing to remote streams.
EnxStream: It manages all media stream-related functions, such as initiating, configuring, and transporting streams to EnableX media servers. It is also used to receive stream endpoints that need to be played.
EnxPlayerView: It displays video streams on the EnxPlayerview. If you want to know more about it, check out the EnableX Official Developer Documentation.

EnableX CallKit Framework Behaviors & Callbacks

The first step is to import Enx_CallKit_iOS. After that, create an object of EnxCallKit class.

For example:

** var callManager = EnxCallKit(self)**

First of all, you need to pass an instance of the class where you’ll receive event callbacks. You can open the EnableX CallKit UI after receiving push notifications on your app.

For example:

let backGroundTaskIndet = UIApplication.shared.beginBackgroundTask(expirationHandler: nil)

callManager.reportIncomingCall(uuid: UUID(), callerName: “Caller Name”, hasVideo: true/False){ _ in

UIApplication.shared.endBackgroundTask(backGroundTaskIndet)}

Users need to add a background task before the Calling UI loads. Once the UI loading is over, the background task should be closed. The reason behind this is simple: when an app opens in another app, the former app also remains open in the background.

To end the call, use the following API:

callManager.endCall()

After the user receives the call, EnableX CallKit starts notifying the behaviour of the user.

For example:

Call Answered: func callAnswer():when you receive the call
Call Rejected: func callReject(): when you reject the call
Call Timeout: func callTimeOut(): when you don’t respond to the call within 45seconds
Call Ended: func callEnd(): when you end the call
Call Hold: func callHold(): when you put the call on hold To join the EnableX room after receiving the call via CallKit, you must create an Access Token.

Generate Access Token

Every user needs a unique Access Token to connect to a room. This step is usually done by Rest API’s Call.

To generate the Access Token and Room ID, you use the link provided below: https://openapi.enablex.io/video/v1/api-docs/#/Rooms

To join the EnableX room, a user must have the Access Token from the EnableX server and EnableX iOS SDK.

This token can be generated by using EnableX UIKit or EnableX audio/video framework:

*With EnableX UIKit Framework *
Install the EnableX UIKit through the pod ‘Enx_UIKit_iOS’.

Follow the steps as shown below:

Step 1: Install the EnableX UIKit Using Pod

Add this to your pod file:

pod ‘Enx_UIKit_iOS’.

Then, install the pod. EnableX UIKit SDK is now integrated. You can use it in your application.

Step 2: Import UIKit in Your Controller Where You Want to Open Your Video Class

Import ‘Enx_UIKit_iOS’. Then, initiate the EnxVideoViewClass.

For example:

let enxViewer = EnxVideoViewClass(token: “a valid room token”, delegate: self)

Step 3: Add the Following Object to Your View

view.addSubview(enxViewer)

Step 4: Set the Frame
enxViewer.frame = self.view.bounds

Step 5: Set Constraints to Auto–Adjust UI When Orientation Changes

enxViewer.autoresizingMask = [.flexibleWidth, .flexibleHeight]

The video integration is now complete. You’ll receive a callback when a user gets disconnected or if there’s any error while joining the room:

When the room is disconnected:
** func disconnect (response: [Any]?)
**
Error while connecting:** func connectError (reason: [Any]?)

Using EnableX Audio/Video Framework ** Install EnableX iOS SDK through Pod. Add this to your pod file: pod ‘EnxRTCiOS’, and then install the Pod.

EnableX iOS SDK is now integrated and you can use it on your app. Here’s how to join the room:

func joinCall(_ token : String){

Set Video Size ** let videoSize : NSDictionary = [“minWidth” : 320 , “minHeight” : 180 , “maxWidth” : 1280, “maxHeight” :720]

Setup Room Configuration ** let roomInfo : [String : Any] = [“allow_reconnect” :true , “number_of_attempts” : 3 ,”timeout_interval” : 20,”activeviews” : “view

Local Stream Configuration
let localStreamInfo : NSDictionary = [“video” : true ,“audio” : true ,“data” :true ,“name” :“Jay”,“type” : “public”,“audio_only” : false , “videoSize” : videoSize]

Join EnableX room. This method will return the local stream instance.

guard let steam = self.objectJoin.joinRoom(token, delegate: self, publishStreamInfo: (localStreamInfo as! [AnyHashable : Any]), roomInfo: roomInfo, advanceOptions: nil) else{

            return

}

        self.localStream = steam

        self.localStream.delegate = self as EnxStreamDelegate

}

Once users join the EnableX room, they’ll get notified through EnxRoomDelegate as shown below. You’ll receive the following callback:

func room(room: EnxRoom?, didConnect roomMetadata: [AnyHashable : Any]?)

If a user fails to join the room due to any other reason, you’ll receive the following callback:
func room(room: EnxRoom?, didError reason: [Any]?)

Once a user publishes a local stream and subscribes to a remote stream, they’ll get a list of Active Talker updates. To get the complete Active Talker view:

func room(_ room: EnxRoom?, didActiveTalkerView view: UIView?)

To get the list of Active Talkers (EnxStream for all Talkers in the conference)

func room(room: EnxRoom?, didActiveTalkerList Data: [Any]?)

When A User Gets Disconnected ** func didRoomDisconnect(_ response: [Any]?)

To know more about EnableX iOS SDK and APIs, check out this link:

Calling UI Screen (Audio/Video Framework)

(From left to right)

When the call starts.
When the screen unlocks.
After the call is received by the end-user, the native dialer interface (for audio-only call).

Calling UI Screen (UIKit)

When you join using UIKit.
When you’re waiting for other users to join the call.
When a user joins the room.
When multiple users join the room.

Final Words

The era of time-consuming and energy-sapping coding is gone, thanks to the EnableX CallKit framework!

Let’s Build Something Exciting!