Implement Interactive Live Streaming

---

This guide describes how to implement the core features of an interactive live streaming client using the ZEGO Express-Video SDK.

1 Basic Flowchart

The following flowchart shows the basic processing flow of an interactive live streaming client.

2 Implementation

2.1 Core API Call Sequence

The following diagram shows the API call sequence of a live streaming scenario where the viewer initiates the request to interact with the host live.

2.2 Core Code Snippets

To help you better understand the above processing logic of our VideoLive demo, we will explain the core snippets of our demo source code in the following sections. You can also read the full demo source code for further study.

2.2.1 Initialize ZegoExpressEngine

Before any other SDK operations, you need to create and initialize a ZegoExpressEngine instance. Since it requires quite a lot of SDK internal processing, it is recommended to perform this step when the client app starts up.

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

ZegoEngineProfile profile = new ZegoEngineProfile();
/** Use the AppID and AppSign assigned by ZEGO when you create your project in the ZEGO Admin Console. */
/** AppID format: 123456789L */
profile.appID = appID;
/** AppSign format: "0123456789012345678901234567890123456789012345678901234567890123"（64 characters）*/
profile.appSign = appSign;
/** General scenario */
profile.scenario = ZegoScenario.GENERAL;
/** Set application object of App */
profile.application = getApplication();
/** Create a ZegoExpressEngine instance */
engine = ZegoExpressEngine.createEngine(profile, null);

For more details on how to initialize the engine, please refer to ZEGO Express-Video SDK QuickStart - 3 Implementation steps.

2.2.2 Join a room

The host and the viewers need to log into a room before they can start or join a live streaming session.

After a user initiates to log into a room, the ZEGO Express-Video SDK will fire an event through the callback onRoomStateUpdate to notify whether the login is successful. Upon successful login, the user can start publishing or playing streams by calling the corresponding APIs.

The host can join an existing room or create a new room to start a live streaming session. During the login process, if the room specified does not exist, it will be created automatically. So, there is no need to manually create a room first.

Viewers can get a room list from the back-end Room Service and select an existing room to join.

//  Create a user.
ZegoUser user = new ZegoUser("Anchor1");
ZegoRoomConfig roomConfig = new ZegoRoomConfig();
// Whether to receive event notifications when other users join or leave the room. 
roomConfig.isUserStatusNotify = true;
// Log into the room.
ZegoExpressEngine.getEngine().loginRoom("LiveRoom", user, roomConfig);

For more details on how to log in to a room, please refer to ZEGO Express-Video SDK QuickStarts - Implementation - 3.2 Log in.

2.2.3 The host publishes a stream to the room

The ZEGO Express-Video SDK allows a client to publish streams to ZEGO's media servers or a CDN for stream delivery.

Compared with CDN, ZEGO's media servers provide a better interactive live streaming experience with much lower streaming latency. A stream published to ZEGO's streaming media servers can be played by the stream ID, while a stream published to a CDN can be played via the corresponding playback URL. If you choose to publish streams to CDN, you can perform the setup before starting to publish streams.

Our VideoLive demo app publishes streams to ZEGO's media server.

// Set the view for rendering local video preview.
TextureView preview = onStartPreview(); 
ZegoCanvas canvas = new ZegoCanvas(preview);
canvas.viewMode = ZegoViewMode.ASPECT_FILL;
// Start the local video preview.
ZegoExpressEngine.getEngine().startPreview(canvas);
// Start publishing the stream.
ZegoExpressEngine.getEngine().startPublishingStream("Anchor1");

For more details on how to start local video preview and start publishing streams, please refer to ZEGO Express-Video SDK QuickStart - - Implementation - 3.3 Publish streams.

2.2.4 The viewer subscribes to the stream published by host

To view the stream published by the host, the viewer needs to get the stream ID from the callback onRoomStreamUpdate and play the stream by the stream ID.

// Set the view for rendering a remote stream.
TextureView playView = onGetPlayView(streamInfo);
ZegoCanvas canvas = new ZegoCanvas(playView);
canvas.viewMode = ZegoViewMode.ASPECT_FILL;
// Start playing the stream.
ZegoExpressEngine.getEngine().startPlayingStream(streamInfo.streamID, canvas);

For more details on how to play remote streams with SDK, please refer to ZEGO Express-Video SDK QuickStart - - Implementation - 3.4 Play streams.

2.2.5 The viewer and the host start a live interaction

You can perform the following steps to start a live interaction between the host and the viewer (in this example, the viewer initiates the request to interact) :

1. The viewer sends a request to the host to start a live interaction.
2. The host sends an Accept or Reject response to the request upon receiving it.
3. If the viewer receives an Accept response, the viewer can start publishing a stream to the room (refer to 2.2.3 for how to publish a stream).
4. Once the viewer's stream is published to the room successfully, the host will get the stream ID of the stream added through the callback onRoomStreamUpdate and start playing the stream. Thus, the viewer and the host are connected for a live interaction.

// Send a request message for live interaction.
ArrayList<ZegoUser> users = new ArrayList<>();
// User info of the host (the message recipient).
ZegoUser anchor = new ZegoUser(mAnchorID, mAnchorName);
users.add(anchor);
// Send the request message (messages should be verified on both sides).
ZegoExpressEngine.getEngine().sendCustomCommand(mRoomID, VideoLiveConstants.REQUEST_JOIN_LIVE, users,
                new IZegoIMSendCustomCommandCallback() {
                    @Override
                    public void onIMSendCustomCommandResult(int i) {
                        if (i != 0) {
                            // Failed to send the request message. Implement the retry logic here.
                        }
                    }
                });

// Receive the request message for live interaction.
private IZegoEventHandler eventHandler = new IZegoEventHandler() {
  ...
  @Override
  public void onIMRecvCustomCommand(String roomID, ZegoUser fromUser, String command) {
      super.onIMRecvCustomCommand(roomID, fromUser, command);
      // Check if it is a request for live interaction.
      if (command.equals(VideoLiveConstants.REQUEST_JOIN_LIVE)) {
         ArrayList<ZegoUser> users = new ArrayList<>();
         users.add(zegoUser);
         // Send the Accept or Reject response message.
         ZegoExpressEngine.getEngine().sendCustomCommand(mRoomInfo.getRoomID(), content, zegoUsers,
                new IZegoIMSendCustomCommandCallback() {
                    @Override
                    public void onIMSendCustomCommandResult(int i) {
                        if (i != 0) {
                            // Failed to send the response message. Implement the retry logic here.
                        }
                    }
                });
      }
  }
  ...
}

2.2.6 The host or the viewer ends the live interaction

Either the host or the viewer can end the live interaction.

// Case 1: the host ends the live interaction.

// The host sends a message to the viewer for ending the interaction.
ZegoExpressEngine.getEngine().sendCustomCommand(...);
// Upon receiving the message from the host to end the interaction, the viewer stops publishing the stream. Once the viewer's stream stops, the event (stream deleted from the room) will be fired through the callback `onRoomStreamUpdate`. Upon receiving the stream deleted event,  the host can stop playing the viewer's stream and remove the corresponding view from the UI.  

// Case 2: the viewer ends the live interaction.

// The viewer stops publishing the stream, stops local video preview, and remove the view for local preview accordingly.
ZegoExpressEngine.getEngine().stopPublishingStream("Audience");
// Once the viewer's stream stops, the event (stream deleted from the room) will be fired through the callback `onRoomStreamUpdate`. Upon receiving the stream deleted event,  the host can stop playing the viewer's stream and remove the corresponding view from the UI.

3 API Reference

4 More Features

Beauty Features

The ZEGO Express-Video SDK allows you to implement beauty features using third-party SDKs. Check out the guide ZEGO Express-Video SDK - Custom Video Pre-processing for more details on this topic.

Media Player

With the ZEGO Express-Video SDK, you can also stream out background music along with the main media stream. Check out the guide ZEGO Express-Video SDK - Media Player for more details on this topic.

Stream Mixing

Through stream mixing, you can combine multiple media streams into a single one on the cloud. When the host and viewers have live interactions during a live streaming session, all the streams of the participating users can be mixed into a single stream, so that other viewers only need to play the mixed stream to view all the videos of users engaged in interaction. Check out the guide ZEGO Express-Video SDK - Stream Mixing for more details on this topic.

Live Streaming through CDN

For more details on how to publish/play streams to/from CDN, please refer to:

ZEGO Express-Video SDK - Publishing/Playing streams via CDN.

ZEGO Express-Video SDK - Playing Streams via URL