Video Calls in Lowcoder
Collaboration features, especially interactive video calls, in customer-facing and internal employee apps are crucial for modern Applications.
For customer-facing apps, this enhances engagement, provides immediate support, and personalizes the user experience, fostering customer satisfaction and loyalty.
For internal apps, it streamlines communication, enables real-time problem-solving, and promotes team cohesion, boosting productivity and innovation. Combining these collaboration tools ensures seamless interaction, reduces response times, and creates a more connected and efficient workflow, which is essential for maintaining a competitive edge and achieving business success.
We wanted to give you, as an application developer, the maximum freedom at the smallest cost possible. After a research phase, we decided to integrate Agora SDK in Lowcoder so that you can build Video-Meeting Experiences inside your Apps.
To make the docs readable, we will name the user who is in a Video Meeting "You" and other users who are in the same Meeting Room "Attendees".
Preparation
To use Video Meetings based on Agora SDKs in Lowcoder, you need to create an Account with Agora.
Step 1: Create an Agora Account
Sign Up: Go to Agora Console and sign up for a new account if you don't already have one.
Log In: After creating your account, log in to the Agora Console.
The first steps and even some meeting hours are free. Only if you have a higher volume of meeting hours than your app users spend do you need to purchase a plan. This allows you to get to know and test intensely - free of charge.
Step 2: Create a New Project
Navigate to Projects: Once logged in, go to the "Projects" section on the Agora Console.
Create a Project:
Click on "Create" to start a new project.
Enter a name for your project (e.g., "MeetingProject").
Select "App ID without Certificate" or "App ID with Certificate" based on your security needs. For production environments, it is recommended to use "App ID with Certificate".
If you use App ID with Certificate, you will need the additional component to install, which is the Agora Token Server.
Step 3: Obtain App ID
App ID: After creating the project, you will see your newly created project listed. Click on the project name to view its details.
Copy the App ID: In the project details, you will find your App ID. Copy this App ID as you will need it for integrating Agora SDKs.
Step 4: Enable Required Services
RTM Service: Ensure that the Real-Time Messaging (RTM) service is enabled for your project. This can be done from the "Projects" settings.
RTC Service: Ensure that the Real-Time Communication (RTC) service is enabled for your project.
Step 5: Set Up Token Generation (Optional but Recommended)
Enable App Certificate: If you opted for "App ID with Certificate," you need to enable the App Certificate.
Go to the "Security" tab in your project settings.
Enable the App Certificate.
Copy the App Certificate as it will be used to generate tokens.
To use the App Certificate (a token-based additional security layer for your meetings and real-time communication), you will need to operate your own Token Server. This is easy, based on the prepared standard Docker image.
You can read more details about Agora Token Management here. However, the public docker image and the ready integration in Lowcoder make it truly easy.
The public Standard Docker Image of the Token Server needs 3 ENV Variables:
As soon as the Token Server is up and running, you can create a Rest Data Query like this:
As a Response, you will get back a JSON, which contains 2 Tokens.
If you have activated "App Certificates" in the Agora Project Settings and so use the Agora Token Server, then you will need both Tokens to Start a Meeting at the Agora Meeting Controller Component.
We strongly recommend to use Agora Meeting Tokens to ensure a secure Meeting and Realtime Messages Experience for your Users.
Agora Token Handling
The flow of the Agora Tokens for Meetings is like this:
User clicks 'Start Meeting' button:
The user initiates the process by clicking the "Start Meeting" button in the application.
Token Server is Requested:
The application sends a request to the Token Server to obtain the necessary tokens for the session.
Token Server responds with rtcToken and rtmToken:
The Token Server responds with the required
rtcTokenandrtmTokenfor the session.
App Developer binds Data Query Response using Handlebars:
The response data containing the tokens is processed and bound to the application using Handlebars templating.
Tokens are assigned to Agora Meeting Controller Component:
The tokens are assigned to the appropriate fields in the Agora Meeting Controller Component, enabling the meeting session to start.
Call the function startMeeting by JavaScript or Event Handler
By the help of an Event Handler or by JavaScript the App Creator can now call the yourMeetingController.startMeeting() Function of the Meeting Controller. (before that, a single Agora Meeting Controller Component must be placed in the App)
Video Meeting Components
There are 3 components to build a Video-Call Meeting experience.
Agora Meeting Controller - the central controlling component
Camera Stream - show the camera stream of you or the attendees
Screen Share Stream - shows the screen share stream of you
Agora Meeting Controller
The Agora Meeting Controller is the central Component that controls all aspects of the meeting and provides the necessary data objects and functions.
We built the Agora Meeting Controller around the "Drawer" Component, so you can have a visual space where the App Creator can display Meeting Configuration Settings.
The following settings are mandatory:
Agora Application ID (copied from the Agora Project Console. Must be identical to the one used at the Agora Token Server)
Meeting Name: This is the Meeting Room Name. Everyone who knows this name can attend the Meeting. It should be a dynamic value, and you need to manage in your own Backend / Database the management of the Meeting Room Names
Host User ID: This is the Unique Identifier for a User in Agora Meetings. It could be the UserID of Lowcoder Users - if your scenario offers Meetings only for Lowcoder Users. It should be a dynamic value, and you need to manage it in your own Backend / Database the management of the User IDs.
RTM and RTC Token are used when an Agore App Certificate and a Token Server is used. For each meeting instance, you need a fresh Token Pair.
A Meeting Room can be used for multiple Meetings. The Room is "open" as soon as created. Users who specify the same channel name (In Lowcoder: "Meeting Name") join a common channel and interact with each other. "A channel is created when the first user joins. It ceases to exist when the last user leaves." The Agora Docs can give more & deeper information to it.
Tokens have to be generated at each start of a meeting for a meeting attendee. When the Tokens are fetched and bound to the Meeting Controller, the Meeting Controller Function startMeeting() can be called.
Meeting Name (Meeting Room) & Host User ID have to be managed in your own Backend / Database. In regards to the Lowcoder App, they must be dynamic - as multiple Users may want to join the meeting - which is based on the same single Lowcoder App.
Meeting Controller Data & Functions
Main Data Objects
localUser: An object representing the local user, including properties like
user,audiostatus,streamingVideo,speaking, etc.participants: An array of objects representing the "remote" participants in the meeting, each with properties like
user,audiostatus,streamingVideo, etc.messages: An array of messages exchanged in the RTM channel.
meetingActive: A boolean indicating whether the meeting is currently active.
meetingName: The name of the meeting.
Functions
openDrawer(): Opens the meeting drawer (UI component).
startSharing(): Toggles screen sharing on and off.
audioControl(): Toggles the microphone on and off.
videoControl(): Toggles the local camera on and off.
startMeeting(): Initiates the meeting, joins the RTC and RTM channels, and sets up the local user.
startSharing(): Initiates the Screen Sharing at the local User
broadCast(): Sends a message to the RTM channel or to specific peers.
setMeetingName(): Sets the name of the meeting.
setUserName(): Sets the name of the local user.
setRTCToken(): Sets the RTC token for the session.
setRTMToken(): Sets the RTM token for the session.
endMeeting(): Ends the meeting, leaves the RTC and RTM channels, and updates the local user's state.
Camera Stream
The Camera Stream allows you to show your own Camera Stream or the Video Stream of the Cameras of the other Attendees. You can place this component like any other on the canvas.
The Camera Stream Component has 2 special features to enable good styling options.
Vide Aspect Ratio - a CSS property that, in combination with Auto-Height, makes sure that you have perfect squares/circles of the Camera Streams.
Profile Image URL - Here you can set an actual user Profile Image - or a Profile Image Generator like in our Example https://www.dicebear.com/playground. The Profile image is displayed as long as the Camera Video Stream is not active.
The Video Stream ID is the Meeting User ID.
To set the video Stream of the local user (you), you can bind the value of localUser.
{{meetingController.localUser}}To set the video Stream of the Attendee user, you can make use of the participants Array. You would need a repeater component like the List Component for example to keep the meeting attendee display dynamic. In the listItem (currentItem) you would set then for example:
{{meetingController.participants[currentItem]}}
The Video Stream get's automatic visible, as soon as the respective Camera is ready and active.
The incoming Sharing Screen Stream, unfortunately, is currently in Agora Meeting tight connected to the Camera Stream (in fact, there is only a single stream per attendee). That means, that the control of the displayed Stream (Camera or Screen Sharing) has to be managed by the App Creator
Screen Share Stream
The Screen Share Stream Component is almost identical to the Camera Stream component. It is meant to enable you to choose a place where to display Shareing Stream. Often this will be in a bigger content area.
To set (display) the Sharing Stream of the local user (you), you can bind the value of localUser. {{meetingController.localUser}}.
Realtime Messages
In a Meeting Room, you can send and receive messages, either to all Attendees or to selected Users (selected Attendees).
You can send messages as soon as the meeting has started. To do so, you can use the JavaScript Query and use, for example, a function call like this:
Messages sent in the Meeting Room (Channel) are collected for each Meeting Attendee at the local Data Object messages (meetingController.messagesf.e.) as an Array.
the Data Object messages will contain only the latest 100 Messages. As App Creator you are responsible for any further storage of these Messages.
Why Video Meetings in Lowcoder?
A picture says more than 100 words. Or?
Despite all the amazing Developments in IT, the bridge between Meeting and "Working" or "Shopping," "Learning," or any other online Activity is not made.
We encourage you to use Lowcoder and the first fully Lowcode Meeting App Generator in it, to create completely new and useful experiences for your App Users and Customers.
Face-to-face online Support
Social Shopping - but together
Meetings, where people can actually work together within - not only talk about
Customer Relationship Management with real-time alignment
A new style of eLearning - interactive content + face-to-face with the Tutors
Business Apps with enabled Collaboration to speed up business processes
MIX IT! Shake the World and enable the Future for your Users!
Last updated
