Normal

small_t02cw29ka-u04jtt0jcg3-549047173ac2-512.jpeg

thumbnail_t02cw29ka-u04jtt0jcg3-549047173ac2-512.jpeg

t02cw29ka-u04jtt0jcg3-549047173ac2-512.jpeg

Artem Matinian

Tutorials

React Native

NodeJS

Next.js

How do you make sure that your live stream viewer stays **engaged**? what are the tools that you can leverage in order to make **the most out of the experience**? and how can you **analyze the viewer's reaction**?

In this article, you can learn about the way you can integrate real-time communication into your live stream in order to make an engaging user experience with your live streams.

Although we will only learn how to share emojis between viewers in your live stream, you will be able to leverage the example in order to build **robust analytics** that will provide you **great insight into when and how the viewers reacted to the stream**.

We’ll leverage [api.video](http://api.video) with **Ably** to create a real-time communication scenario where one viewer of the live stream will post an emoji, and all of the other viewers of the same live stream will be able to see the reaction.

Check out the diagram below on how this works:

livestream-with-realtime-communication-diagram-ably

large_livestream-with-realtime-communication-diagram-ably.jpeg

medium_livestream-with-realtime-communication-diagram-ably.jpeg

small_livestream-with-realtime-communication-diagram-ably.jpeg

thumbnail_livestream-with-realtime-communication-diagram-ably.jpeg

livestream-with-realtime-communication-diagram-ably.jpeg

## Why do Livestream viewers need to be engaged?

Live streaming is growing at a very rapid pace. Let’s talk statistics:

Did you know that the revenue for the entire video streaming app industry reached **$82.3 billion in 2022**, and is projected to reach **$115 billion by 2026.** according to some resources it’s going to be **$118 billion by 2025**. ([Business of Apps](https://www.notion.so/5c096d5c490d48ba989db87d3ffb1ed0))

Live commerce-initiated sales could account for as much as **10 to 20 percent** of all e-commerce by 2026 ([McKinsey](https://www.mckinsey.com/capabilities/mckinsey-digital/our-insights/its-showtime-how-live-commerce-is-transforming-the-shopping-experience)) and **41.2%** of consumers said they tune in to live streams focused on home products, and **37.5%** said they watch [live shopping events](https://tinuiti.com/blog/paid-social/live-shopping-tips/) for electronics ([Retail Touchpoints](https://www.retailtouchpoints.com/topics/digital-commerce/livestreaming-update-coresight-debunks-5-common-myths)).

In 2022, there were **532 million** esports viewers worldwide ([Insider Intelligence](https://www.insiderintelligence.com/insights/esports-ecosystem-market-report/)).

**52%** of live video viewers stream content through social media ([eMarketer](https://www.insiderintelligence.com/content/livestream-viewers-social-media)).

Brands earn nearly **40%** more engagement with Instagram Reels compared to other Instagram content formats ([Business Wire](https://www.businesswire.com/news/home/20220907005644/en/Brands-Earn-Nearly-40-More-Engagement-with-Reels-Compared-to-Other-Instagram-Content-Formats)).

And this is just a small part of some impressive live stream and video content statistics. So you ask yourself, how do I start integrating livestream into my app or website? 

## How to build a scalable and engaging live stream quickly?

What we’ll be leveraging:

- [api.video](http://api.video) to create and deliver the live stream
- [Ably](https://ably.com/) for the real-time communication handling
- For streaming, you can use OBS, [one of our live streaming SDKs](https://docs.api.video/docs/react-native-livestream-component), or stream directly from the [api.video](http://api.video) dashboard

With [api.video](http://api.video), you can integrate livestream into any project in a few minutes. You can find the article on how to get started here: https://docs.api.video/docs/create-a-live-stream

We’ll start with this simple example that was built using Next.js. You can go ahead and clone it from here: https://github.com/apivideo/livestream-with-realtime-ably

Let’s break it down; what are we looking at here? 

### The [api.video](http://api.video) React Player module

We are using [api.video](http://api.video) in order to create a stream and then the api.video React player SDK in order to create a responsive on-screen video delivery while removing the control elements. 

If you navigate to the `src/pages/index.tsx` file, here’s where we consume the player and buildout the video delivery:

We consume the [api.video](http://api.video) React player SDK here:
`import ApiVideoPlayer from '@api.video/react-player';`

And we pass it as a component to be rendered:

**Disclaimer! In this example, the streamId is hardcoded in the index file, however, you’ll probably want to serve the streamId dynamically from your backend when you get to production.** 

You can notice that we are passing the `ApiVideoPlayer` component all of these parameters; let’s break it down a bit; I’ll focus on the important ones:

- With Style, we are passing CSS parameters in order for the video to fit the screen first while the `size` parameter is dynamic, as `size` is a state:

Each time you resize the window, the video player size will adapt to the size of the screen.

- `chromeless` parameter removes all the player controls, which will give the user a better experience.
- With the `video` parameter, we are passing an object that includes the stream id and the optional parameter `live` that is set to true in order to give the player the indication that we are passing in a live stream and not a video

Getting the live stream id can be done in two ways. 

**Programmatically**:

1. You can leverage the livestream endpoint in order to get the list of livestream ids from your workspace: https://docs.api.video/reference/get_live-streams

2. You’ll get a JSON response from which you can get the stream id you need:


**Manually from the dashboard:**

1. Click on the live stream in Live Streams

large_get-livestream-id.png

medium_get-livestream-id.png

small_get-livestream-id.png

thumbnail_get-livestream-id.png

get-livestream-id.png

large_copy-livestream-id-from-dashboard.png

medium_copy-livestream-id-from-dashboard.png

small_copy-livestream-id-from-dashboard.png

thumbnail_copy-livestream-id-from-dashboard.png

copy-livestream-id-from-dashboard.png

You can find more information about the [api.video](http://api.video) React Player in our documentation: https://github.com/apivideo/api.video-react-player

### Everyone loves Emojis!

Now let’s get to the fun part; the example gives you the ability to share emojis between all the viewers of the stream; each person in the stream gets an emoji picker; once the emoji is clicked, a cool little animation will play where the emoji is hovering and then disappearing. The cool thing about that is that the animation will be played to all the viewers.

large_Demo.gif

medium_Demo.gif

small_Demo.gif

thumbnail_Demo.gif

Demo.gif

This example is very basic; however, you can take the example and **expand** on it in order to create **real-time statistics** for the live stream session, for example: 

- Count the reactions from the users
- Map the different reaction emojis and get the timeframe with the most reactions
- Get real-time feedback from the users
- And more

The emoji animation is built with **React Simple Animate**  https://www.npmjs.com/package/react-simple-animate, it has a bit of complex logic, but you are free to reuse it in your app. You can find the actual animation parameters in `src/utils/randomframevalues.tsx`  

The random values are being passed to the `<AnimateKeyframes>` component that includes the actual emoji:

Go ahead and play around with the random values and the parameters, should be fun 😃

### Spread the emojis

And now we get to the challenge, how do you get these emojis across to all other users? this was an interesting task, but with Ably, it wasn’t that difficult to implement. 

We created a new class that is called `MessageHandler` where we use the Ably node library:

`import Ably from 'ably';`

Ably has a great API that allows you to create channels, get users to subscribe to them, and then broadcast and listen to any events that happen inside these channels; that’s a great fit for our use case! 

In the example, all you need to do is to replace the values of the `#apiKey`  with the one that you get from Ably:

large_get-ably-api-key.png

medium_get-ably-api-key.png

small_get-ably-api-key.png

thumbnail_get-ably-api-key.png

get-ably-api-key.png

**Disclaimer! Please note that these keys should be consumed from the backend. In this example, just to make it easy, we expose the keys on the front end. Please ensure that the backend serves the keys when you go to production.**

**Briefly on what we are doing in the `MessageHandler` class:**

When we use Ably there are a few things we need to understand and utilize:

- Channels
- Users
- Subscriptions (listeners)
- Message publishing

Every time the user opens a new window, they will be assigned a user id for a session (this logic works in the `index.tsx` file); the userId is passed to the class when it is initialized in order to create a unique user id for each user that watches the stream. 

Then we use the stream id as the channel id for Ably, of course, you can generate any channel id, however, it’s easier to just leverage the values that we already have. 

We then subscribe to the same channel and also broadcast the messages to it at the same time. 

The caveat is that we set the listener in the `/src/components/emoji.tsx` file, if you look closely at the listener, we have a logic that will make sure that the listener is not getting duplicated. We check if there are no listeners created already; if there aren’t, we create one. This situation is caused by the fact that each time the state changes, React will re-render and will run the same code again, causing the listener to be created multiple times, so we do something like this:

Finally, we have two functions to generate the message (which will include the emoji) and publish the message to the channel.

Now that you know how it works, you can run the example and play around with it. Just make sure to install all the dependent modules by running `npm install` or `yarn install`

After the installation is done, run the example by `npm run dev`

The example will run on `localhost:3000`

Happy Hacking! 🙂

If you have any questions about the article, feel free to raise issues on the [Github repo](https://github.com/apivideo/livestream-with-realtime-ably), reach out to me directly: artem@api.video, or just open a ticket with our support team.

Boost your live streams

large_boost-live-stream-engagement.png

medium_boost-live-stream-engagement.png

small_boost-live-stream-engagement.png

thumbnail_boost-live-stream-engagement.png

boost-live-stream-engagement.png

Boost your live streams with user engagement 

live - create

API client

large_img_8063-min-1.jpg

medium_img_8063-min-1.jpg

small_img_8063-min-1.jpg

thumbnail_img_8063-min-1.jpg

img_8063-min-1.jpg

github-brands.svg

GitHub Yohann

5a22d420c9a5a7-416105621512231968826.png

LinkedIn Yohann

Yohann Martzolff

JavaScript

In this tutorial, you will learn how to build our own live streaming broadcast application with React Native and api.video.
We're also going to use TypeScript, but you can choose either TypeScript or JavaScript. Both work well with api.video's clients. For further details, check out our [official repository](https://github.com/apivideo/api.video-reactnative-live-stream).

Congratulations! The live streaming app is done!

ezgif-com-gif-maker-2.gif

## Getting started

First, follow the development setup steps from [React Native's official documentation](https://reactnative.dev/docs/environment-setup).

If you're new to React Native, you may also need to [learn the basics](https://reactnative.dev/docs/tutorial).

Make sure that you have the latest Node stable version installed.

*Quick reminder: iOS development is only enabled for macOS users. If you're on Windows or Linux, you can develop for Android.*

The official React Native documentation states, "you can follow the **Expo CLI Quickstart** to learn how to build your iOS app using Expo instead."


## Create a new React Native app

Open a new terminal. Go to the folder of your choice and run the following command to create a new React Native application with TypeScript:

### Launch the application

Inside your new project start Metro to bundle your application:

Once Metro is connected and ready, open another terminal. Go to your project folder, and launch your application.

This command line can take several minutes to finish, stay calm and grab a coffee ☕

If everything is set up correctly, you should see your new app running in your iOS / Android emulator like this

thumbnail_screenshot-2022-03-21-at-11-56-07-2.png

screenshot-2022-03-21-at-11-56-07-2.png

## Add the live stream client to your app

Congratulations! 🎉 You've just created a React Native application!
Now, it's time to install the [api.video RTMP live stream client](https://github.com/apivideo/api.video-reactnative-live-stream) into it to live stream directly from your mobile device for free.


### Installation

At this time, the `npx react-native init` command creates a React Native application with `yarn`.

Yarn is a package manager, like NPM. Don't worry if you've not worked with it before; it's easy to use and similar to NPM.


To install the api.video RTMP live stream client, open a terminal. Go to your project folder and run this command:

For iOS usage, you will need to complete two more steps:
1. Install the native dependencies with [Cocoapods](https://cocoapods.org/):

2. This project contains Swift code. If it's your first dependency with swift code, you’ll need to create an empty Swift file in your project (with the bridging header) from Xcode. [You can find instructions here](https://github.com/apivideo/api.video-reactnative-live-stream/#ios).


### Permissions

⚠️ Both iOS and Android need permission to broadcast from your device's camera and record audio.

You will also need to ask for internet permission for Android.

#### Android

From your project folder, open the `AndroidManifest.xml` file. It’s located in the `LiveStreamApp/android/app/src/main` directory.
Add the following content just under the opening `<manifest>` tag to enable internet, audio recording, and the camera for your application:

#### iOS

From your project folder, open the `Info.plist` file. It’s located in the `LiveStreamApp/ios/LiveStreamApp` directory.
Add the following content just under the opening `<dict>` tag to enable the camera and microphone:

Don't forget to add the app description, as shown above, if you want to deploy your application in stores.

#### Sign your iOS application (optional)

You may need to [sign your iOS application](https://github.com/apivideo/api.video-reactnative-live-stream#ios). I recommend doing it now to avoid issues later. 

### Usage

#### Component

Change your `App.tsx` file with the following code:

⚠️ You may need to relaunch your Metro after this.

A black screen with a round button at the bottom should appear in your emulator: it's your live stream view.

thumbnail_screenshot-2022-03-30-at-15-06-54-2.png

screenshot-2022-03-30-at-15-06-54-2.png

#### Launch your first live stream

If you want to test to live stream from an actual device (iOS in our case), open Xcode. Click on “Open a project or file,” select the `LiveStreamApp/ios` folder, and open it.
Connect your device to your iMac/Macbook and run your application.
For Android, you can check the [official documentation](https://developer.android.com/studio/run/device).

You will need to change `YOUR_STREAM_KEY` to a real one. You can find yours in the [api.video dashboard](https://dashboard.api.video/). If you don't have an account yet, create one, it's free.
Then, create a livestream from the overview or the “Live streams” page.

Find this action card and click on "Start live stream"

large_screenshot-2022-03-22-at-08-24-00.png

medium_screenshot-2022-03-22-at-08-24-00.png

small_screenshot-2022-03-22-at-08-24-00.png

thumbnail_screenshot-2022-03-22-at-08-24-00.png

screenshot-2022-03-22-at-08-24-00.png

A modal will appear with several pieces of information in it, including the shareable link and stream key. Save the shareable link to access your live stream later.

This modal should appear once you click on "Start live stream"

large_screenshot-2022-03-25-at-17-1-1.png

medium_screenshot-2022-03-25-at-17-1-1.png

small_screenshot-2022-03-25-at-17-1-1.png

thumbnail_screenshot-2022-03-25-at-17-1-1.png

screenshot-2022-03-25-at-17-1-1.png

💡 You can also use the [api.video](https://api.video/) API to create a live stream and retrieve your stream key dynamically. [Find how to do this right here](https://docs.api.video/reference/post_live-streams).

Paste your stream key in place of `YOUR_STREAM_KEY`.

Click on the button in your application; it should turn red. Them, go to the shareable link you just saved. There you go! You can see what your mobile is streaming in real-time! If it's not the case, wait a few seconds and check your stream key value.


## Make it dynamic

Our application is working; we can now do an actual live stream directly from our smartphone. 
But api.video RTMP live stream client allows us to customize our live stream the way we want. 
In this section, we will see how to customize our live stream parameters and make our application UI better.

Check the [official README](https://github.com/apivideo/api.video-reactnative-live-stream/tree/v1.0.0) for exhaustive information about the `@api.video/react-native-livestream` package.

Some properties can be updated during the live stream:

- Camera: front or back
- Audio: muted or not

We can leave these properties on the live stream view. This way, we can update them during our live stream.


### Add icons

We will need icons in our application.
Install the corresponding dependency before going further.

1. Stop your application
2. Delete the pods (only for iOS usage.)

3. Add the [react-native-vector-icons](https://www.npmjs.com/package/react-native-vector-icons) NPM package:

4. Go into `/ios` and install your pods (only for iOS usage.)

5. To display an icon, import it and use it as a component

⚠️ An import error could be displayed in Visual Studio Code, but it should work anyway.


### Live stream view

Right now, we only have a single button at the bottom of our live stream view, contained in the `App.tsx` file.

We can customize this component a little bit to make it more obvious.

#### Streaming button

Let's add text if our live stream is not running and an icon when it is.
Replace the above code by this one:

Don't forget to update your style to display the streaming button conditionally:

#### Camera button

To change the camera input (front or back), we need to add a button we can access during our live stream.

To do this, a local state is needed, like the `streaming` one:

1. Add it in your `App` component and replace your static string for the camera props:

2. Handle the change of camera with this handler. Place it in your `App` component:

3. Add this code under your streaming button. It’s our camera icon component:

When you press the camera icon, displayed in the bottom right corner, you should switch from the back camera to the front and vice versa.

#### Muted button

We may want to mute our stream at a specific time. For this, we also need a local state and a button.

1. Add a new local state under the other ones and replace your static boolean for the `isMuted` props:

2. Handle the change of `muted` state with this handler. Place it in your `App` component:

3. Add this code under your camera button. It’s our mute icon component:

When you press the mute icon, displayed in the bottom left corner, you should switch from muted to unmuted.

And voilà! You can now launch a live stream directly from your device, choose which camera you want to use, and allow sound recording or not.

## And now what?

Congratulations! You just created a fully functional live streaming broadcast application. You can go further and implement the logic to modify all other settings provided by [api.video](https://api.video).
You can check the [React Native live streaming sample application](https://github.com/apivideo/api.video-reactnative-live-stream/tree/main/example) to get an idea of the potential of this tool (product?).

api.video provides two development environments. The sandbox allows you to live stream directly from your computer or mobile, but a watermark will be applied to your video and there is a 30 minute limit for live streams. 

To avoid these limitations, try one of the plans found [here](https://api.video/pricing) and go into production mode 🚀

large_image.png

medium_image.png

small_image.png

thumbnail_image.png

image.png

How to build a live streaming app in 3 steps

Featured article

# api.video blog

Blog

Follow the api.video Blog to explore tutorials, video use cases, and learn about on-demand and live-streaming video updates.