Build Your Professional Meeting Platform Using ZEGO Cloud

Achref Ben El Hadj Salem — Thu, 05 Dec 2024 22:49:59 +0000

Build Your Professional Meeting Platform Using ZEGO Cloud
Are you looking to create a reliable and scalable meeting platform? In this article, I’ll walk you through how to set up and integrate a meeting platform using ZEGO Cloud, along with backend integration for managing meetings efficiently. You’ll also find complete code samples to help you get started.

Getting Started with ZEGO Cloud
Step 1: Create a Project
Log in to ZEGO Cloud.
Navigate to the Dashboard and click on Create Your Project.
Choose the Free Trial plan, which offers 1,000 free minutes for the meeting component.

Step 2: Select a Room Type
After creating your project, select the type of room you want for your application:

Voice & Video Calls
Video Conference
Live Streaming
Telehealth
Custom App
For this guide, we’ll use the Voice & Video Call option.

Step 3: Retrieve API Keys and Configuration
Once your project is created, you’ll find the AppID, Server Secret, and other parameters in the Basic Information section. Copy these details as they will be needed to integrate the SDK into your application.

Download the SDK
Visit the ZEGO Cloud Documentation to download the SDK and get detailed integration guides.

Backend Integration for Professional Meetings
Step 1: Create the Meeting Entity
Define a Meeting entity in your backend to manage meeting attributes such as date, type, and title.

export class Meeting {
idMeeting!: number;
dateMeeting!: Date;
typeMeet!: TypeMeet;
titleMeet!: string;
}

Step 2: Build the Meeting Management Component
Create a MeetingsComponent to handle filtering, adding, and deleting meetings. Here’s a snippet of the TypeScript logic:

@Component({
selector: 'app-meetings',
templateUrl: './meetings.component.html',
styleUrls: ['./meetings.component.css']
})
export class MeetingsComponent implements OnDestroy {
meetings: Meeting[] = [];
filteredMeetings: Meeting[] = [];
...

loadMeetings(): void {
this.meetingService.getAllMeetings().subscribe((meetings) => {
this.meetings = meetings;
this.filteredMeetings = meetings;
this.updatePage();
});
}
...
}
And the corresponding HTML structure to display and filter meetings:

html

Title	Date	Type	Actions
{{ meeting.titleMeet }}	{{ meeting.dateMeeting \| date }}	{{ meeting.typeMeet }}	Join

Integrating the API Room in Angular
To create a dynamic meeting room, use the Zego UIKit Prebuilt SDK. Here's how:

Import the Zego UIKit in your MeetinfRoomComponent:

import { ZegoUIKitPrebuilt } from '@zegocloud/zego-uikit-prebuilt';
...
initializeZego(userName: string) {
const kitToken = ZegoUIKitPrebuilt.generateKitTokenForTest(appID, serverSecret, roomID, userID, userName);
const zp = ZegoUIKitPrebuilt.create(kitToken);
zp.joinRoom({ container: document.querySelector("#root"), scenario: { mode: ZegoUIKitPrebuilt.GroupCall } });
}

Add an HTML container for the room interface:
html

#root {
    width: 80vw;
    height: 80vh;
}

Conclusion
By following this guide, you’ll have a fully functional meeting platform powered by ZEGO Cloud. With robust backend integration and the ability to customize your meeting experience, this solution is perfect for businesses and developers alike.

Feel free to clone and customize the provided code. Let me know in the comments if you have questions or suggestions!

DEV Community: Achref Ben El Hadj Salem

Build Your Professional Meeting Platform Using ZEGO Cloud