Talk to us
Talk to us
menu

Blog Post

start building
Developer

Top 3 Things You Need To Know About Live Video Streaming

Top 3 Things You Need To Know About Live Video Streaming

Live video streaming is a fast-growing video transmission technology. We use this awesome technology in different areas of video communication. We use it for video calls, video conferencing, and so on. Most of us consume so much video through live video streaming without even realizing it. For instance, when we go live on Facebook or Instagram, the people that view the video message you’re sharing engage in a live video stream. We’ll learn more about this incredible technology in the next sections.

What is live video streaming

Live video streaming is the real-time transfer and instantaneous usage of video contents as they download bit by bit. without having to wait for the entire video to finish downloading before we can use them. When we live stream a video, we interact with the server that holds the video data. Because of the continuous client-server interaction, we need a stable internet connection to be able to live stream video.

It can be very challenging to build live video streaming feature into an application from scratch, but with ZEGOCLOUD’s Zego Live, you can set it up with ease 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 the use cases that keep popping up in the market. I know you’re surprised to see that you’ve been using this awesome 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 to a large number of audiences. All you have to do is host the video and share the link with your audience. All of them will access the video as long as permission is granted, irrespective of their location.

2. cost-effective means of transmission

Like I said earlier, 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 integrate great 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’s the type of interactivity that comes from live video streams. Embracing this technology will encourage many people to patronize your service as they believe that 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 start making use of live video streaming than now. The use cases keep increasing, and the market growth rate is skyrocketing as well.

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’ll be looking at a few 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 joy that comes with 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, which is unarguably the most popular game engine in the world right now, and Cocos2D. If you’re looking to build games with a live streaming feature, Zego Live is your go-to solution. as you 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. Live streaming video provides this level of interactivity. Students can engage with learning materials easier by live streaming videos with academic contents. 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 their home? 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 in real-time.

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 the host of the video. Live-streaming videos is 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. And in order to promote effective and clear 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 of the more popular ones.

How to Build a Live Video Streaming App

Building live video streaming applications from scratch is quite difficult. The story is different with a top-notch live video streaming service like Zego Cloud’s 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 set-up 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 SDK. 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

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 :

  1. Create a folder with the name of your project.
  2. Create these three files: index.html,index.jsinside the js directory, and index.css inside the css directory, all inside the folder created in step (1).

Here’s a breakdown of what the files we created do:

  • index.html file: The front page file of the audio and video call application.
  • index.js file under the js directory: The JavaScript code that is used to implement the audio and video features
  • index.css file 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.css

Follow 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 -g

Enter 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:

  1. Run the command below to install ZEGOCLOUD SDK.
npm i zego-express-engine-webrtc
  1. 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:

live video stream sequence

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 roomID parameter.
  • Enter the login token in the token parameter. See User privilege control for more details.
  • The user ID and user name are the roomID and userName parameters.
  • 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 streamID parameter
  • 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.
    // ... 
})
  1. 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.
  2. 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.

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