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 the 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.
Can I Use WebRTC for Live Video Streaming?
WebRTC is a free and open-source technology that allows real-time communication between web browsers and mobile applications. It has built-in support for audio and video streaming, along with data channels for peer-to-peer communication. It can be used for various use cases such as video conferencing, online education, remote work, and of course, live video streaming. You can achieve low-latency, high-quality video streaming without the need for plugins or third-party software with WebRTC.
Get Started with ZEGOCLOUD WebRTC Live Streaming Kit
ZEGOCLOUD Live Streaming SDK is a powerful video streaming solution that provides high-quality, low-latency real-time video streaming services for iOS, Android, Web, Flutter, and React Native. It enables one-to-one and group live video streaming.
The SDK provides rich API interfaces, allowing developers to freely customize live streaming features such as beauty filters, watermarking, etc. It also supports multiple encoding formats such as H.264 and H.265, ensuring video quality and compatibility.
In addition, ZEGOCLOUD provides pre-built UIKits that include Live Streaming Kit, which 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 to Implement Live Stream SDK
- 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.
Step by Steps for Live Streaming Kit SDK Integration
Follow the steps below to get ZEGOCLOUD’s Live Streaming Kit up and running :
Step 1: Login to the 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.
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.
After clicking the add button. You’ll be prompted to select the type of app we want to build. Select Live Streaming.
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.
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 this as my platform for this project. Congratulations! We’ve successfully created our first web live streaming application with ZEGOCLOUD’s Live Streaming Kit.
Click on Get configuration and integration files to download project files.
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.
Run a 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. ZEGOCLOUD live streaming SDK also works with iOS live streaming, Android live streaming, Flutter live streaming and React Native live streaming.
If you have any questions, you can always reach our 24-hour technical support.
Talk to Expert
Learn more about our solutions and get your question answered.
