Talk to us
Talk to us
menu

Blog Post

start building
Developer

What Is UIKits And How To Use It

What Is UIKits And How To Use It

Building a great user interface (UI) from scratch can be very challenging. There are many UI components that you’re going to be responsible for. from color combination to usability and brand guidelines. The problem becomes more complex if you have limited time to build the UI.

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 functionality to users. Some examples of UI components include input forms, navigation menus, and buttons.

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

Many UIKits 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’s UIKit.

ZEGOCLOUD UIKit supports wide-range of platforms. Hence, you can build the user interface of your application on many platforms with ease. With ZEGOCLOUD’s UIKit, 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 and 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 has 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:

  • 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 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: Login 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 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 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?

If you are interested in developing live streaming applications, you can download the sample demo source code in this article.

If you have any questions, you can always reach our 24-hour technical support.

Read More

ZEGOCLOUD
ZEGOCLOUD With our fully customizable and easy-to-integrate Live SDK, you can quickly build reliable, scalable, and interactive live streaming into your mobile, web, and desktop apps.

Related posts

Contact us