Talk to us
Talk to us
menu

Blog Post

start building
Developer

How To Build App With Live Streaming Kit

How To Build App With Live Streaming Kit

We make use of live streaming technologies on a daily basis, even without realizing it. For instance, placing a video call, be it a Zoom meeting, conference call, or normal one-on-one call, requires real-time data transfer that the live streaming kit provides.

We’ll learn how to use Live Streaming Kit from ZEGOCLOUD to build a full-fledged live streaming application with ease.

Live Streaming Kit SDK Introduction

The ZEGOCLOUD Live Streaming Kit is a flagship and full-featured live streaming component. 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.

You can easily set up your live streaming application (web or mobile) easily with just a few lines of code. The Live Streaming Kit has done the heavy lifting for you. Hence, you only have to worry about the business logic without worrying about live streaming core implementation.

When do you need the Live Streaming Kit

You may be wondering how ZEGOCLOUD’s Live Streaming Kit will help in your live streaming application.

Below are some top-notch advantages that the Live Streaming Kit provides :

Live streaming capabilities that are platform independent and highly performant:

The Live Streaming Kit handles complex device and network exceptions in a rigid manner. For instance, you can easily set up a mobile live streaming application on Android and IOS, i.e., the iPhone live streaming kit, and devices with ease without worrying about the network composition of each platform. Sounds cool, right? That’s the type of freedom the Live Streaming Kit offers!

Live Streaming UI customization:

You can easily customize your live streaming UI by changing your parameters. And besides, you can tweak the Live Streaming Kit open source code for further UI customization.

Apart from the aforementioned advantages, the following are features of ZEGOCLOUD’s Live Streaming Kit:

  • Out-of-the-box live stream interface
  • 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

From the above features, you can see for yourself that ZEGOCLOUD’s Live Streaming Kit is indeed the best live streaming kit out there. It’s complete and full-featured. All the features you could ever need for live streaming in your application are right there for you out of the box.

Preparation

  • A ZEGOCLOUD developer account — Sign in
  • VS Code or any other IDE/Editor.
  • A decent computer with a camera (webcam)
  • Basic understanding of web development.

Live Streaming Kit SDK Integration

Follow the steps below to get ZEGOCLOUD’s Live Streaming Kit up and running :

Step 1: Login to ZEGOCLOUD admin console

To make the whole process easier, ZEGOCLOUD has a powerful admin console where you can manage your projects. You can create projects through the ZEGOCLOUD admin console. And of course, the Live Streaming Kit is among the types of projects you can create. Pretty cool, right? Hit the login button to get started with the best live streaming kit.

log in

Step 2: Add a new project

You’ll see the add button after logging in to your admin console. Click on it to get started with Live Streaming Kit integration.

zegocloud-console

After clicking the add button. You’ll be prompted to select the type of app we want to build. Select Live Streaming.

create-live-streaming-project

Step 3: Type in the project name.

From the steps so far, you can see that creating real-time applications with ZEGOCLOUD is very straightforward and simple.

Back to our Live Streaming Kit integration. At this point, we’re required to pick a name for our project.

Note: a project name will only contain numbers, letters, and underlines (_).

You can choose whatever name you like. Provided that you follow the rules.

Step 4: UI customization kits.

If you scroll down after entering the project name, you’ll see a window where you can select UI customization options. Two options exist. There are “Prebuilt UIkit” and “Custom UIkit”. The custom UIkit gives you advanced customization options and low-level SDK customization. I will be going with Prebuilt UIKit since we’re just testing our Live Streaming Kit

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

create-project

Step 5: Choose a platform and download configuration files.

At this point, All that you’re required to do is to select the platform for our Live Streaming SDK. I will be using Web as my platform for this project. Congratulations! We’ve successfully created our first web live streaming application with ZEGOCLOUD’s Live Streaming Kit.

select-platform

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

download-live-streaming-code

Opening the downloaded configuration and integration file 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"></script>
<script src="https://resource.ZEGOCLOUD.com/prebuilt/prebuiltToken.js"></script>
<script src="https://unpkg.com/@ZEGOCLOUD/zego-uikit-prebuilt/zego-uikit-prebuilt.js"></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 = YourAppID;
    const serverSecret = "YourServerSecret";
    const TOKEN = generatePrebuiltToken(appID, serverSecret, roomID, userID, userName);


        // You can assign different roles based on url parameters.
        let role = getUrlParams(window.location.href)['role'] || 'Host';
        role = role === 'Host' ? ZegoUIKitPrebuilt.Host : ZegoUIKitPrebuilt.Audience;
        let config = {}
        if(role === 'Host'){
            config = {
               turnOnCameraWhenJoining: true,
               showMyCameraToggleButton: true,
               showAudioVideoSettingsButton: true,
               showScreenSharingButton: true,
               showTextChat: true,
               showUserList: true,
         }
        }
        const zp = ZegoUIKitPrebuilt.create(TOKEN);
        zp.joinRoom({
            container: document.querySelector("#root"),
            scenario: {
                mode: ZegoUIKitPrebuilt.LiveStreaming,
                config: {
                            role,
                },
            },
            sharedLinks: [{
                name: 'Join as an audience',
                url:
                window.location.origin +
                window.location.pathname +
                '?roomID=' +
                roomID +
                '&role=Audience',
            }],
            ...config
            });
}
</script>

</html>

You can click on projects to see information about them.

project-app-id

Run a Demo

live-streaming-kit-demo

We’ve successfully created our first live streaming project. It is now time to test it out and see how it goes. Testing this project is very easy based on the fact that it is a web application. Hence, you can test it on any browser of your choice, irrespective of the platform.

Conclusion

The ZEGOCLOUD Live Streaming Kit makes the development of live streaming applications simple. You don’t have to worry about complex programming concepts like API development and native network configurations as the Live Streaming Kit does that behind the scenes.

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