DEV Community

Cover image for How to build a live streaming app?
DavidRelo for ZEGOCLOUD

Posted on • Edited on • Originally published at blog.zegocloud.com

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:

  1. Game live streaming app - The picture must be clear and smooth to construct a game live streaming app.
  2. Entertainment live streaming app - Building an entertainment app requires various interactive functions such as gifts, barrage, and mini-games.
  3. Shopping live streaming app - It must provide functions such as shopping cart and live broadcast playback.
  4. 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.
  5. 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:

process of playing a stream

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.

Login to a room

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

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:

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.

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.

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:

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.

Stop publishing and playing streams

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

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

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

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.

Destroy the ZegoExpressEngine instance

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

API call sequence diagram

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

API call sequence


Sign up with ZEGOCLOUD, and get 10,000 minutes free every month.

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:

Top comments (0)