How to Build a Live Streaming App

What is a Live Streaming App?

Live streaming technology allows you to broadcast, watch, create and share videos in real-time. All you need to be able to live stream is an internet-enabled device, like a smartphone or tablet, and a platform (such as a website or app) to live stream.

Live streaming apps are rapidly developing, given this trend's tremendous opportunities in many fields.

Depending on the domain, the basic requirements for building a live streaming app differ as follows:

Game live streaming app - The picture must be clear and smooth to construct a game live streaming app.
Entertainment live streaming app - Building an entertainment app requires various interactive functions such as gifts, barrage, and mini-games.
Shopping live streaming app - It must provide functions such as shopping cart and live broadcast playback.
Sports live streaming app - It is necessary to ensure a clear and smooth picture and provide a variety of resolutions for users to choose from.
Educational live streaming app - Interactive whiteboard, file sharing, screen sharing, and other functions are essential to delivering the best teaching experience to students.

Must-Have Features Of a Live Streaming app

Despite the differences, there are some standard functions that all live streaming apps should have, such as:

Client join/sign-in - A straightforward enrollment structure for the clients to make a record and sign in to the application with the certification.
Search - A search box allowing users to search content by topic, popularity, trending, channel, location, or interests.
Client profile - Show the client's data and profile picture to companions and subscribers.
Live streaming - The app's core permits the client to record and communicate a live stream to individuals who subscribe to their channel or the public.
Chats - Adding a chat function helps the host communicate with the audience in real-time.

Building a live streaming app in different fields will require integrating some unique features. Relevant examples are:

Screen Sharing - For a game live streaming app, you must share the game screen with the audience through the screen sharing function.
Host PK - Required for the entertainment live streaming apps. Through the PK between anchors, one can enrich the content of the live streaming app, enhancing the audience's enthusiasm by sending gifts.
Shopping Cart - The live shopping streaming app provides a shopping portal for viewers to place orders and purchase products directly in the live streaming room.
Share whiteboard or file - The education live streaming app must share various teaching courseware, so providing functions such as shared whiteboard and transferred files to enrich the teaching form is necessary.

What is a Live Streaming SDK?

The Live Streaming App is complex, especially if each function is self-developed. It requires a vast technical team and consumes many human and financial resources.

Many companies encapsulate the standard functions of Live Streaming apps into SDK, thus, developing a Live Streaming app only needs to focus on business interaction development.

Among these functions:

Express SDK - Audio and video transmission service SDK encapsulates audio and video capture, preprocessing, encoding, transmission, decoding, rendering, and so on.
ZIM SDK - Message communication SDK, which encapsulates the transmission, and broadcasting of text messages, picture messages, video messages, and other messages, ability to notify.
SuperBoard SDK - Encapsulates interactive whiteboard, file management, file rendering, and other capabilities.
RoomKit SDK - Encapsulates a complete educational scene, including audio and video calls, barrage messages, shared whiteboards, shared files, equipment management, student management, and other teaching scene logic.

Steps to Build a Live Streaming App

Prerequisites

Before you begin, make sure you complete the following steps:

Create a project in ZEGOCLOUD Console, and get the AppID of your project.
The ZEGO Express SDK has been integrated into the project. For details, see Integration.

Implementation process

The following diagram shows the basic process of User A playing a stream published by User B:

The following sections explain each step of this process in more detail.

Create a ZegoExpressEngine instance

To create a singleton instance of the ZegoExpressEngine class, call the createEngine method with the AppID of your project.

/** Define a ZegoExpressEngine object */
ZegoExpressEngine engine;

ZegoEngineProfile profile = new ZegoEngineProfile();
/** AppID format: 123456789L */
profile.appID = appID;
/** General scenario */
profile.scenario = ZegoScenario.GENERAL;
/** Set application object of App */
profile.application = getApplication();
/** Create a ZegoExpressEngine instance */
engine = ZegoExpressEngine.createEngine(profile, null);

Log in to a room

To log in to a room, call the loginRoom method.

/** create a user */
ZegoUser user = new ZegoUser("user1");


ZegoRoomConfig roomConfig = new ZegoRoomConfig();
/** Token is generated by the user's own server. For an easier and convenient debugging, you can get a temporary token from the ZEGOCLOUD Admin Console */
roomConfig.token = "xxxx";
/** onRoomUserUpdate callback can be received only by passing in a ZegoRoomConfig whose "isUserStatusNotify" parameter value is "true".*/
roomConfig.isUserStatusNotify = true;

/** log in to a room */
engine.loginRoom("room1", user, roomConfig, (int error, JSONObject extendedData)->{
    // (Optional callback) The result of logging in to the room. If you only pay attention to the login result, you can use this callback.
});

Then, to listen for and handle various events that may happen after logging in to a room, you can implement the corresponding event callback methods of the event handler as needed. The following are some common event callbacks related to room users and streams:

engine.setEventHandler(new IZegoEventHandler() {

    /** Common event callbacks related to room users and streams. */

    /** Callback for updates on the current user's room connection status. */
    @Override
    public void onRoomStateUpdate(String roomID, ZegoRoomState state, int errorCode, JSONObject extendedData) {
        /** Implement the callback handling logic as needed. */
    }

    /** Callback for updates on the status of other users in the room. */
    @Override
    public void onRoomUserUpdate(String roomID, ZegoUpdateType updateType, ArrayList<ZegoUser> userList) {
        /** Implement the callback handling logic as needed. */
    }

    /** Callback for updates on the status of the streams in the room. */
    @Override
    public void onRoomStreamUpdate(String roomID, ZegoUpdateType updateType, ArrayList<ZegoStream> streamList, JSONObject extendedData){
        /** Implement the callback handling logic as needed. */
     }

});

Start the local video preview

To start the local video preview, call the startPreview method with the view for rendering the local video passed to the canvas parameter.

You can use a SurfaceView, TextureView, or SurfaceTexture to render the video.

/**
 *  Set up a view for the local video preview and start the preview with SDK's default view mode (AspectFill).
 *  The following play_view is a SurfaceView, TextureView, or SurfaceTexture object on the UI.
 */
engine.startPreview(new ZegoCanvas(preview_view));

Publish streams

To start publishing a local audio or video stream to remote users, call the startPublishingStream method with the corresponding Stream ID passed to the streamID parameter.

/** Start publishing a stream */
engine.startPublishingStream("stream1");

Then, to listen for and handle various events that may happen after stream publishing starts, you can implement the corresponding event callback methods of the event handler as needed. The following is a common event callback related to stream publishing:

engine.setEventHandler(new IZegoEventHandler() {
    /** Common event callbacks related to stream publishing. */

    /** Callback for updates on stream publishing status.   */
    @Override
    public void onPublisherStateUpdate(String streamID, ZegoPublisherState state, int errorCode, JSONObject extendedData){
        /** Implement the callback handling logic as needed. */
    }
});

Play streams

To start playing a remote audio or video stream, call the startPlayingStream method with the corresponding Stream ID passed to the streamID parameter and the view for rendering the video passed to the canvas parameter.

You can obtain the stream IDs of the streams published by other users in the room from the callback onRoomStreamUpdate.

You can use a SurfaceView, TextureView, or SurfaceTexture to render the video.

/**
 *  Start playing a remote stream with the SDK's default view mode (AspectFill).
 *  The play_view below is a SurfaceView/TextureView/SurfaceTexture object on UI.
 */
engine.startPlayingStream("stream1", new ZegoCanvas(play_view));

Stop publishing and playing streams

To stop publishing a local audio or video stream to remote users, call the stopPublishingStream method.

/** Stop publishing a stream */
engine.stopPublishingStream();

If local video preview is started, call the stopPreview method to stop it as needed.

/** Stop local video preview */
engine.stopPreview();

To stop playing a remote audio or video stream, call the stopPlayingStream method with the corresponding stream ID passed to the streamID parameter.

/** Stop playing a stream*/
engine.stopPlayingStream(streamID);

Log out of a room

To log out of a room, call the logoutRoom method with the corresponding room ID passed to the roomID parameter.

/** Log out of a room */
engine.logoutRoom("room1");

Destroy the `ZegoExpressEngine` instance

To destroy the ZegoExpressEngine instance and release the resources it occupies, call the destroyEngine method.

/** Destroy the ZegoExpressEngine instance */
ZegoExpressEngine.destroyEngine(null);

API call sequence diagram

The following diagram shows the API call sequence of the stream publishing and playing process:

Did You Know? 👏

Like and Follow is the biggest encouragement to me

Follow me to learn more technical knowledge

Thank you for reading :)

Learn More

This is one of the live technical articles. Welcome to other articles:

Also published here.