Live video streaming is a fast-growing video transmission technology. We use this incredible technology in different areas of video communication. Most of us consume so much video through live video streaming without even realizing it. Today, we will learn the top 3 things about live video streaming.
What is Live Video Streaming?
Live video streaming is the real-time transfer and instantaneous usage of video content as they download bit by bit, without waiting for the entire video to finish downloading before we can use them. We interact with the server that holds the video data when we live to stream a video. Because of the continuous client-server interaction, we need a stable internet connection to live-stream video.
It can be very challenging to build a live video streaming feature into an application from scratch, but with ZEGOCLOUD, you can set it up quickly, irrespective of platform. Be it mobile, desktop, or web applications, with wide varieties of use cases such as one-on-one and group video calls, online education, entertainment, live video streaming, and a whole lot of others.
The use cases of live video are just as numerous as those that keep popping up in the market. I know you’re surprised to see that you’ve been using thisincrediblee technology all this time! You’ll learn a lot about live video streaming. Just hang on as we progress with the sections.
Benefits of Live Video Streaming
Why live stream video when you can download it? I know this is the question running through your mind right now. You’ll learn about the importance of live video streaming in this section.
Without further ado, below are some benefits of live video:
1. Wider audience coverage
Live video streaming is an effective way of transmitting or distributing messages toa large audiences. All you have to do is host the video and share the link with your audience.Theym will access the video as long as permission is granted, irrespective of their location.
2. Cost-effective means of transmission
Like I sair, you can reach a large audience at no extra cost with the help of live video streaming. That’s even the reason why you should integrateexcellentt live video streaming services like Zego Live into your apps. as more users are beginning to see the endless benefits of live-streaming video.
3. Live interactivity
Live video streaming brings about a new level of interactivity. Customers are more attached to companies that allow them to interact with their products virtually;that type of interactivityt comes from live video streams. Embracing this technology will encourage many people to patronize your service as they believe more value will be added to every product they purchase.
4. Enablement of real-time audience feedback
How about getting feedback from people who make use of your services? Sounds cool, right? That’s one of the things live streaming does. Real-time audience feedback is possible with live streaming.
There’s no better time to startusingf live video streaming than now. The use cases keep increasing, and the market growth rate isalso skyrocketingl.
Where You Can Use Live Video Streaming
Live video streaming is used in different areas. Its use cases keep increasing every time. To keep the article short, we’lllookg atsomew of the most notable use cases. Below are some of them.
1. Live game streaming
If you’re an avid gamer, you should know the joyofh playing multiplayer games with people all over the globe. This feature is possible because of live video streams. Some good examples of popular games that utilize live streaming are Call of Duty (COD), Garena Free Fire, etc. Zego Live supports Unity3D, the most popular game engine in the world right now, and Cocos2D.Supposef you’re looking to build games with a live streaming featur. In that case,, Zego Live is your go-to solution.Youu can easily integrate the feature into your app without worrying about complex programming concepts.
2. Online live classes
The best way to learn is through interactive teaching.The livee streaming video provides this level of interactivity. Students can engage with learning materialsmore easilyr by live streaming videos with academiccontents. Many institutions have recognized this great feature of live streaming and are already taking down their old teaching methods to embrace this online education format.
3. Live Shopping
Don’t you think it’s nice to give customers a physical-like shopping experience from the comfort of theirhomese? Cool, right? That’s one of the use cases of live video streaming. Customers can inspect a product in real-life form from their device with the help of a webcam that captures and relays the product details inreal timee.
4. Social media live
This is indeed one of the most popular use cases of live streaming. We see people or even go live on Facebook, YouTube, Instagram, Snapchat, etc. Live streaming videos promote interactivity between the audience and thevideo hosto. Live-streaming videosares the best way to talk and interact with your audience on social media in real-time.
5. Medicine and healthcare
Some delicate surgical operations require the use of robotics. Andtoo promote effective andpreciser details of the areas being operated on, A high-definition camera is mounted in the room to receive and broadcast the live video stream with authorized doctors.
There are many use cases for live video streaming; the above are just some more popular ones.
How to Build a Live Video Streaming App
Building live video streaming applications from scratch is quitetricky. The storydifferst with a top-notch live video streaming service like ZEGOCLOUD SDK.
With the ZEGOCLOUD SDK, you can build reliable and highly scalable video calling and interactive live video streaming features into applications irrespective of the platform. The setup and integration process is easy and straightforward.
Why use the Zego Live SDK?
There are many reasons why you should build live video streaming applications with the ZEGOCLOUD SD for many reasons. Below are some powerful features that the ZEGOCLOUD SDK offers.
1. Supports massive concurrency
Are you worried about how to scale applications when the user base rises? That’s never been a problem with the ZEGOCLOUD SDK. This live streaming service can serve over 10 million concurrent users with a single implementation.
2. Instant messaging
ZEGOCLOUD SDK is fully featured. It comes with all the features you could ever want in a live video streaming application. It supports instant messaging; users can have text chat or send bullet-screen messages while watching a live stream.
3. HD with low bitrate
Deliver high-quality live video at a lower bitrate using H.265/High-Efficiency Video Coding (HEVC). This is just like spending less to get more value. With the ZegoAvatar SDK, you will enjoy high-quality live video with minimal system resources.
4. Comprehensive streaming media processing
ZEGOCLOUD SDK is extremely powerful, as it comes with a full array of streaming media features. You can set up live video streaming applications that feature stream mixing, snapshotting, super resolution, recording, and lots more.
5. Multiple live engagement formats
The programming has been done for you by ZegoCloud. With minimal configuration, you can set up live video streaming apps with different customization options for users. You can create single-host, multi-host, and cross-room co-hosted live streaming sessions with Zego Live.
I’m not blabbing; we’re going to do it here. And you’ll certainly be amazed to see how easy the whole process is.
Preparation
- A ZEGOCLOUD developer account — Sign in
- VS Code or any other IDE or editor.
- A decent computer with a camera (webcam)
- Browser compatibility check: See Web SDK compatibility.
- Basic understanding of web development
Without further ado, let’s build our live video streaming app!
Web ZEGOCLOUD SDK Integration for Live Video Stream
In order to build our live video streaming web app, we have to integrate the ZEGOCLOUD SDK into our project. We can do so through the following steps :
Create a new project.
Creating a project is the starting point of our application. You can skip this step if you already have the project. Follow the steps below to create a project :
- Create a folder with the name of your project.
- Create these three files:
index.html,index.jsinsidethe js directory, andindex.cssinside the css directory, all inside the folder created in step (1).
Here’s a breakdown of what the files we created do:
index.htmlfile: The front page file of the audio and video call application.index.jsfile under the js directory: The JavaScript code that is used to implement the audio and video featuresindex.cssfile under the css directory: used to set the page style.
After creating these files, open them with your favorite IDE or text editor. I will be using Visual Studio Code. Your folder structure should look like the one in the image below after adding the files we created in step (2).
├── index.html
├── js
│ └── index.js
└── css
└── index.cssFollow the steps below to create root files and test the setup:
1. Copy the following code to the index.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Zego RTC Video Call</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<h1>
Zego RTC Video Call
</h1>
<h4>Local video</h4>
<video id="local-video" autoplay muted playsinline controls></video>
<h4>Remote video</h4>
<video id="remote-video" autoplay muted playsinline controls></video>
<script src="./js/index.js"></script>
</body>
</html>2. Copy the following code to the index.css file:
*{
font-family: sans-serif;
}
h1,h4{
text-align: center;
}
video {
width: 300px;
height: auto;
}
#local-video{
position: relative;
margin: 0 auto;
display: block;
}
#remote-video{
display: flex;
height: auto;
margin: auto;
position: relative !important;
}3. Run and test out your project on the local Web server.
You can do this by simply opening the index.html file we created with any web browser of your choice as long as it passes the Zego Live compatibility test or by using the live-server extension.
Run the code below to install Live-Server:
npm i live-server -gEnter your root directory and run a live-server command to test the project.
Import the SDK
Follow the steps below to import the ZEGOCLOUD SDK into our project:
- Run the command below to install ZEGOCLOUD SDK.
npm i zego-express-engine-webrtc- Import the ZEGOCLOUD SDK by copying the code below to the index.js file.
import {ZegoExpressEngine} from 'zego-express-engine-webrtc'Implementation steps
We have so far imported our ZEGOCLOUD SDK, which we are going to use to set up our live video streaming.
The diagram below shows the working principle of the ZEGOCLOUD SDK when User A plays a stream published by User B:
Create a ZegoExpressEngine instance.
Create a single instance of the ZegoExpressEngine class and pass in your app ID as the appIDparameter and the server URL as the server parameter. You can obtain them from the ZegoCloud Admin Console.
// Initialize the ZegoExpressEngine instance
const zg = new ZegoExpressEngine(appID, server);Log in to a room
To log in to a room, call the loginRoom with the following parameters:
- Enter a unique room ID in the
roomIDparameter. - Enter the login token in the token parameter. See User privilege control for more details.
- The user ID and user name are the
roomIDanduserNameparameters. - Optional: Pass the corresponding object to the config parameter based on the actual situation.
// Log in to a room. It returns `true` if the login is successful.
// The roomUserUpdate callback is disabled by default. To receive this callback, you must set the `userUpdate` property to `true` when logging in to a room.
const result = await zg.loginRoom(roomID, token, {userID, userName}, {userUpdate: true});Note: If the roomID you entered does not exist, a new room will be created, and you will log in automatically when you call the loginRoom method.
We’ll create some callback events that return information on the status of a room. Below are some common event callbacks related to room users and streams:
- roomStateUpdate: Callback for updates on the current user’s room connection status. ZEGOCLOUD SDK sends a notification event when the current status of the user’s room changes. for instance, when a login authentication fails or a user is disconnected.
- roomUserUpdate: This callback is for information or an update on the current status of other users in the room. When other users join or leave the room, the SDK sends out the event notification through this callback.
- roomStreamUpdate: Callback for updates on the status of the streams in the room. When new streams are published to the room or existing streams in the room stop, the SDK sends out the event notification through this callback.
// Callback for updates on the current user's room connection status.
zg.on('roomStateUpdate', (roomID,state,errorCode,extendedData) => {
if (state == 'DISCONNECTED') {
// Disconnected from the room
}
if (state == 'CONNECTING') {
// Connecting to the room
}
if (state == 'CONNECTED') {
// Connected to the room
}
})
// Callback for updates on the status of other users in the room.
zg.on('roomUserUpdate', (roomID, updateType, userList) => {
console.warn(
`roomUserUpdate: room ${roomID}, user ${updateType === 'ADD' ? 'added' : 'left'} `,
JSON.stringify(userList),
);
});
// Callback for updates on the status of the streams in the room.
zg.on('roomStreamUpdate', async (roomID, updateType, streamList, extendedData) => {
if (updateType == 'ADD') {
// New stream added, start playing the stream.
} else if (updateType == 'DELETE') {
// Stream deleted, stop playing the stream.
}
});Publish streams
You can create a local audio and video stream on Zego Live by calling the createStream method. This activates our camera and microphone for real-time video and audio data capture.
// After calling the CreateStream method, you need to wait for the ZEGO server to return the local stream object before any further operation.
const localStream = await zg.createStream();
// Obtain the video tag of the local video.
const localVideo = document.getElementById('local-video');
// The local stream is a MediaStream object. You can render audio and video by assigning the local stream to the SrCObject property of video or audio.
localVideo.srcObject = localStream;Note: After calling the createStreammethod, you need to wait for the ZEGO server to return the media stream object (localStream) before any further operations.
If you wish to start publishing a local audio and video stream to remote users, call the startPublishingStream method with the following parameters:
// localStream is the MediaStream object created by calling creatStream in the previous step.
zg.startPublishingStream(streamID, localStream)- a stream ID as the
streamIDparameter - The media stream object obtained in the previous step is passed as the localStream parameter.
You can get information about your published streams with the following callbacks:
zg.on('publisherStateUpdate', result => {
// Callback for updates on stream publishing status.
// ...
})
zg.on('publishQualityUpdate', (streamID, stats) => {
// Callback for reporting stream publishing quality.
// ...
})- publisherStateUpdate: Callback for updates on stream publishing status. After stream publishing starts, if the status changes, the SDK sends out the event notification through this callback.
- publishQualityUpdate: Callback for reporting stream publishing quality. After stream publishing starts, the SDK sends out the streaming quality data (resolution, frame rate, bit rate, etc.) regularly through this callback.
Play streams
To start playing a remote audio and video stream from the ZEGO server, call the startPlayingStream method with the corresponding stream ID passed to the streamIDparameter.
You can obtain the stream ID of the streams published by remote users from the callback roomStreamUpdate.
const remoteStream = await zg.startPlayingStream(streamID);
// The remoteVideo object is the <video> or <audio> element on your webpage.
remoteVideo.srcObject = remoteStream;Stop publishing and playing streams.
We are done streaming; how then do we terminate it? You can easily do so with the command below.
Stop publishing stream command:
zg.stopPublishingStream(streamID)Destroy stream command:
// localStream is the MediaStream object created when calling the createStream method.
zg.destroyStream(localStream)stop playing stream command:
zg.stopPlayingStream(streamID)Log out of a room
You can see that the ZEGOCLOUD SDK is very straightforward. To log out of a room, just call the logoutRoom method with the corresponding room ID passed to the roomID parameter.
js zg.logoutRoom(roomID)Conclusion
The ZEGOCLOUD SDK makes the development of live video streaming applications simple. You don’t have to worry about complex programming concepts. All you have to do is call already existing APIs and make some business logic used in authentication.
Talk to Expert
Learn more about our solutions and get your question answered.
