Talk to us
Talk to us
menu

UIKits: What It is & How to Use It

UIKits: What It is  & How to Use It

We all know that every problem has a corresponding solution or anecdote, so what then is the solution to building the UI of our applications faster and more efficiently? The solution is UIKit. A UIKit is basically a tool that can help you bring your UIs to life out of the box without putting much load on your creative energy. We’ll learn more about UIKits in the next section.

What is a UIKit?

A UIKit is a collection of assets containing a set of design elements such as UI components and styles. UI components provide the functionality to users. Some examples of UI components include input forms, navigation menus, and buttons.

With UIKit, you can easily implement complex UIs without worrying much about how to wrap everything or assemble the UI.

Many UIKit tools exist in the market today because of the tremendous benefits of these tools. Some app development tools now ship with UIKits. For instance, we have UIKit Flutter and React Native UIKit, which help with the development of cross-platform app UIs using Dart and JavaScript, respectively. Android Flutter is also used to build native Android UI with Dart.

Most of these UIKit tools make building tough as you’re forced to build in their native language. This is totally different from ZEGOCLOUD UIKits.

ZEGOCLOUD UIKits supports a wide range of platforms. Hence, you can build the user interface of your application on many platforms with ease. With it, you can launch your application to market faster with pre-built UIKits and UI Components. Instead of building from the ground up, build engaging apps in the shortest possible time.

In the following sections, we’ll explore and implement basic UIs with some of the popular UIKits in ZEGOCLOUD’s UIKits. Without further ado, let’s get started!

1. Call Kits

Call Kit is a richly featured flagship voice and video component. which can be used to implement high-fidelity one-on-one and group calls with just a few lines of code.

This UIKit helps you build video call features into any application without worrying much about complex programming concepts. You can embed the Call Kits module into any website or app and customize the in-call features by modifying its parameters or going “under the hood” with Call Kit open source code.

Features of Call Kits

Call Kits have a lot of benefits. The most important one is removing the complexity of coding everything from scratch by providing all the components that you could ever need out of the box. Apart from that, Call Kits has many other features that make it stand out from the crowd.

Below are some of the features:

  • The out-of-the-box video chat interface
  • Customizable UI
  • Meeting invitation
  • Text chat
  • Screen sharing
  • Recording
  • Participant list
  • Cross-browser compatibility
  • Built-in bandwidth management
  • Auto network reconnection
  • Network analytics display
  • Customizable branding logo

How to Build a Video Call App with the Call Kit

In this section, we will learn how to build video call applications with ZEGOCLOUD’s Call Kit. I believe you’ll fall in love with Call Kit after seeing how easy it is to build one-on-one calls and group calls into an application.

Preparation (same for other kits in this article)

  • A ZEGOCLOUD developer account —Sign up
  • VS Code or any IDE or text editor of choice.
  • computer with audio and video support.
  • Basic understanding of web development

Call Kit SDK Integration

Follow the steps below to integrate the Call Kit SDK into your project:

Step 1: Log in to the Zegocloud admin console.

ZegoCloud offers a powerful developer console where you can create your apps easily. The first step to integrating the Call Kit SDK is logging in to ZegoCloud’s admin console, or signing up if you don’t have an account.

uikit sign up

Step 2: Add a new project

Click on “Create new project” to get started with Call Kit project creation.

react native uikit create project page

After clicking the “Create new project” button, you’ll be prompted to select the type of app we want to build. Select “Video and voice” since we are making use of the Call Kit, and click on “Next.

Step 3: Enter the project name.

After creating a project in step (2), the next phase will be naming our application.

Note: You can only name a project with numbers, letters, and underlines (_).

project name live streaming

Step 4: Choose a UI build method.

This is where our topic comes into play. In this phase, you have the option to build with UIKit or go with the option that offers more customization. We will use the UIKit option as we can build our video call applications without worrying about the layout. ZEGOCLOUD’s prebuilt UIKit will take care of our layout.

call kit ui configuration options

You can proceed with the building process. Wait for the project to be completed.

call kit project creation project

Step 5: Choose a platform and download configuration files.

I will choose “Web” as the platform I’m building for. You can also choose other platforms as needed.

choose platform page with call kit uikit

Step 6: Download the project.

Click on “Get configuration and integration files” to download project files.

downlod and integrate callkit file
live streaming kit

Opening the application with development tools like an IDE or text editor reveals the following lines of code:

<html>
<head>
    <style>
        #root {
            width: 100vw;
            height: 100vh;
            }
    <style>
</head>
<body>
    <div id="root"></div>
</body>
<script src="https://resource.zegocloud.com/prebuilt/crypto-js.js">&lt;/script>
<script src="https://resource.zegocloud.com/prebuilt/prebuiltToken.js">&lt;/script>
<script src="https://unpkg.com/@zegocloud/zego-uikit-prebuilt/zego-uikit-prebuilt.js">&lt;/script>
<script>

window.onload = function () {
    function getUrlParams(url) {
        let urlStr = url.split('?')[1];
        const urlSearchParams = new URLSearchParams(urlStr);
        const result = Object.fromEntries(urlSearchParams.entries());
        return result;
    }

        // Generate a Token by calling a method.
        // @param 1: appID
        // @param 2: serverSecret
        // @param 3: Room ID
        // @param 4: User ID
        // @param 5: Username
    const roomID = getUrlParams(window.location.href)['roomID'] || (Math.floor(Math.random() * 10000) + "");
    const userID = Math.floor(Math.random() * 10000) + "";
    const userName = "userName" + userID;
    const appID = 839236438;
    const serverSecret = "235c98d0ee06c5ce99a590abe9cf72f9";
    const TOKEN = generatePrebuiltToken(appID, serverSecret, roomID, userID, userName);
        const zp = ZegoUIKitPrebuilt.create(TOKEN);
        zp.joinRoom({
            container: document.querySelector("#root"),
            sharedLinks: [{
                name: 'Join as a host',
                url: window.location.origin + window.location.pathname + '?roomID=' + roomID,
            }],
            scenario: {
                mode: ZegoUIKitPrebuilt.VideoConference,
            },
           turnOnMicrophoneWhenJoining: true,
           turnOnCameraWhenJoining: true,
           showMyCameraToggleButton: true,
           showMyMicrophoneToggleButton: true,
           showAudioVideoSettingsButton: true,
           showScreenSharingButton: true,
           showTextChat: true,
           showUserList: true,
           maxUsers: 2,
           layout: "Auto",
           showLayoutButton: false,
            });
}
</script>
</html>

One-on-one video call UI configuration

Like I said earlier, you can easily customize UIKit’s layout by modifying its configuration file.

Below is the configuration file for a one-on-one video call with Call Kit:

{
           turnOnMicrophoneWhenJoining: true,
           turnOnCameraWhenJoining: true,
           showMyCameraToggleButton: true,
           showMyMicrophoneToggleButton: true,
           showAudioVideoSettingsButton: true,
           showScreenSharingButton: true,
           showTextChat: true,
           showUserList: true,
           maxUsers: 2,
           layout: "Auto",
           showLayoutButton: false,
           scenario: {
               mode: "OneONoneCall",
           }
}

To test the application, open the file we downloaded in step 6 with any browser of your choice.

Group video call UI configuration

Below is the configuration file for group calls with Call Kit:

{
           turnOnMicrophoneWhenJoining: true,
           turnOnCameraWhenJoining: true,
           showMyCameraToggleButton: true,
           showMyMicrophoneToggleButton: true,
           showAudioVideoSettingsButton: true,
           showScreenSharingButton: true,
           showTextChat: true,
           showUserList: true,
           maxUsers: 50,
           layout: "Auto",
           showLayoutButton: true,
           scenario: {
               mode: "GroupCall",
           }
}

2. Video Conference Kit

The Video Conference Kit is a prebuilt, feature-rich component. It enables you to build powerful and reliable video conferences into your web and mobile apps in minutes. Coding a video conference application from scratch can take days. The story is completely different when you use the Video Conference Kit.

If you want more customization on your video conference app UI, you can make your customization based on the provided Video Conference Kit open source code.

Features of the Video Conference Kit

The Video Conference Kit offers many features out-of-the-box with the help of a prebuilt UIKit. The ease with which these features are made available is just mind-blowing.

The list of features this kit offers is extensive. Below are some cool features of the Video Conference Kit:

  • Out-of-the-box video conference
  • Customizable UI
  • Conference Invitation
  • Text chat
  • Screen sharing
  • Recording
  • Participant list
  • Built-in bandwidth management
  • Cross-browser compatibility
  • Network analytics display
  • Auto network reconnection
  • Customizable branding logo

How to Build a Video Conference App with the Video Conference Kit

from the aforementioned features. You can see that the Video Conference SDK is indeed powerful. In this section, we’ll be building a video conferencing web app using the Video Conference Kit SDK and UIKit. The process is almost the same as the process we used when building a video call application using Call Kit. So you can make reference to the steps there if you need more details.

Video Conference SDK Integration

Follow the steps below to integrate video conferencing into your project:

Step 1: Login to the Zegocloud admin console.

uikit sign up

Step 2: Add a new project

react native uikit create projecte page

After clicking the “Create new project” button, you’ll be prompted to select the type of app we want to build. Select “Video Conferencing” since we are making use of the Video Conferencing Kit and click on “Next.

iphone live stream kit

Step 3: Enter the project name.

project name live streaming

Step 4: Choose a UI build method.

video conference uikit ui build

After choosing the UI build method, you can proceed with the building process. Wait for the project to be completed.

video conference uikit building process

Step 5: Choose a platform and download configuration files.

I will choose “Web” as the platform I’m building for. You can also choose other platforms as needed.

choose platform page with call kit uikit

Step 6: Download the project

live streaming kit

3. Live Streaming Kit

The ZEGOCLOUD Live Streaming Kit is a full-featured and modular live streaming component. It helps you build custom live streaming features into web and mobile apps with just a few lines of code. It’s by far the best live-streaming kit out there. It’s user-friendly, powerful, and highly compact, as it’s built with modularity in mind.

Features of the Live Streaming Kit

Just like other UIKits here, the core aim of the Live Streaming Kit is the ease of integration and implementation. You can easily set up a powerful live streaming application in a few minutes using ZEGOCLOUD’s Live Streaming Kit.

If you need advanced features or more customization in your live streaming apps with Live Streaming Kit, you can tweak the open source code of Live Streaming Kit to meet your purpose.

Apart from the above features, below are other Live Streaming Kit features you should know about.

  • Out-of-the-box live stream interface
  • Customizable UI
  • Livestream invitation
  • Text chat
  • Screen sharing
  • Recording
  • Audience list
  • Cross-browser compatibility
  • Built-in bandwidth management
  • Auto network reconnection
  • Network analytics display
  • Customizable branding logo

How to Build a Live Streaming Web App with the Live Streaming Kit

Building live streaming applications with live streaming UIKit is not a difficult task to accomplish. It can be done in less than 10 minutes if you follow the steps well. I know you’re already pumped and ready to build your first live-streaming app with Live Streaming Kit. We’ll be doing just that in the next section!

Live Streaming SDK Integration

Follow the steps below to integrate Live Streaming into your project:

Step 1: Login to the Zegocloud admin console.

uikit sign up

Step 2: Add a new project

react native uikit create project page

After clicking the “Create new project” button, you’ll be prompted to select the type of app we want to build. Select “Live Streaming” since we are making use of the Live Streaming Kit. Click Next to proceed.

project type live streaming uikit

Step 3: Enter the project name.

live streaming uikit project name

Step 4: Choose a UI build method.

live streaming ui config with uikit

After choosing the UI build method, you can proceed with the building process. Wait for the project to be completed.

live streaming project build uikit

Step 5: Choose a platform and download configuration files.

I will choose “Web” as the platform I’m building for. You can also choose other platforms as needed.

choose platform page with call kit uikit

Step 6: Download the project.

live streaming kit

Conclusion

We have so far covered what UIKits, Call Kits, Video Conference Kits, and Live Streaming Kits are. and how to integrate their features into our applications. From what we’ve done so far, you can see that ZEGOCLOUD’s UIKits and its components are awesome and fully featured. It does everything behind the scenes, so you don’t have to worry about complex stuff. Cool, isn’t it?

Read More

Let’s Build APP Together

Start building with real-time video, voice & chat SDK for apps today!

Talk to us

Take your apps to the next level with our voice, video and chat APIs

Free Trial
  • 10,000 minutes for free
  • 4,000+ corporate clients
  • 3 Billion daily call minutes

Stay updated with us by signing up for our newsletter!

Don't miss out on important news and updates from ZEGOCLOUD!

* You may unsubscribe at any time using the unsubscribe link in the digest email. See our privacy policy for more information.