Tutorial: Live Streaming with Mux & Stream Chat

Mux provides high-quality live streaming, accessible through an easy to use API, so you can focus on building your product. It’s an extremely flexible platform and offers functionality for even the most demanding live stream use cases.

Here at Stream, our team specializes in real-time Feeds and Chat technology, so, naturally, we thought it would be a great idea to pair up with Mux and build the ultimate chat and live stream video tutorial.

For a sneak peek into what we’ve developed, head over to this link and drop an emoji in the chat room. Be sure to use the “fallback video” unless of course, you have a .m3u8 file ready to go (HLS format).

First Thing First

Let’s discuss the protocols behind live streaming, how they work, and what they entail.

What is RTMP?

Both RTMP and M3U8 (otherwise known as HLS) are protocols used for streaming live video and audio.

RTMP started out back in the days of Macromedia, which is now owned by Adobe. RTMP was the proprietary protocol for streaming audio, video and data over the internet between Macromedia Flash and a server. Due to its popularity and ability to maintain persistent connections and low-latency communication between a device and the server, it’s now become the defacto standard for live streaming applications from a device.

What About M3U8/HLS?

M3U8, also known as HLS, on the other hand, was developed by Apple in order to stream video and audio to QuickTime, Safari, macOS and iOS devices. Since its inception, it has become a widely supported protocol that allows for live streaming of video and audio across various platforms, even those that are not Apple-specific.

Using The Protocols

Simply put, the device you record with (e.g. iOS, Android or Desktop via OBS) will use the RTMP protocol; whereas the device playback will use the M3U8 or HLS format.

RTMP goes directly to the server where it’s transcoded into an M3U8/HLS format. From there, it’s streamed directly to your device, in real-time.

The term “real-time” is variable as it depends on many factors, some of which include:

• Network connectivity
• Size of the video (720p vs 1080p, etc.)
• Audio layer(s)
• Speed of the transcoding

Prerequisites

• Node.js (v11+)
• Yarn (preferred) or npm
• A free trial account with Mux
• Free chat trial with Stream
• Understanding of git

Note: We’ll be using yarn throughout this tutorial; however, it’s totally fine if you’d like to install your dependencies with npm.

Getting Started

To get started, we’re going to clone two repositories from GitHub. For simplicity, we’ll run both projects locally on your machine; however, feel free to take it a step further and deploy to Heroku or another hosting provider of your choice.

First things first, create a new directory on your machine called mux. From there, copy and paste the following code snippet into your terminal to clone the frontend:

$ cd mux
$ git clone https://github.com/GetStream/livestream-chat-mux.git web && cd web && yarn

Now that you have the web repo cloned into your mux directory, let’s go ahead and clone the backend API. This is especially important as you need to generate a token for users who are entering the chat. Back out of the web directory and move into the main mux directory. Within the mux directory, run the following commands:

$ cd ../
$ git clone https://github.com/GetStream/livestream-chat-api.git api && cd api && yarn

Once you have both repositories cloned and the dependencies installed, we can move to the next step, where we’ll enter our credentials.

1. Gather Stream Credentials

Before we start, let’s go ahead and grab your credentials from Stream Chat. If you don’t already have an account with Stream, you can create one at https://getstream.io/chat/ – this includes a free 14-day trial with zero obligation for a credit card.

Next, you will need to copy the outlined credentials in the image below and save them somewhere safe (we’ll use them later on in the tutorial).

1. Go to the Stream Dashboard
2. Create a new application
3. Click on Chat in the top navigation
4. Scroll down to “App Access Keys” and view your credentials

2. Generate Environment Files and Add Your Credentials

In the root of the web directory, create a new file called .env and add the following values:

REACT_APP_API_ENDPOINT=http://localhost:8080
REACT_APP_STREAM_KEY=<YOUR_STREAM_API_KEY>
SASS_PATH=./node_modules

Next, let’s tackle the API. Similar to the above, create a .env file and add the following values inside of the api directory:

NODE_ENV=development
PORT=8080
STREAM_API_KEY=<YOUR_STREAM_API_KEY>
STREAM_API_SECRET=<YOUR_STREAM_API_SECRET>

3. Start the Web App and API

Now that we’ve set up our environment variables for both web and the API, it’s time to fire them up and see what we’ve got to work with.

Head over to the api directory and run the yarn start command. You’ll want to open a new terminal and start the web application using the yarn start command, as well. Once up and running, your API will be available on port 8080 and the web will be running on port 3000. Both will be available locally at http://localhost:<PORT>.

Drop http://localhost:3000 in your browser and have a little bit of fun. At first, the only option will be to use a “fallback video”; however, chat should be working. Try typing “rocket” or adding an emoji of your choosing.

Your web application should look something like this once logged in:

Streaming with Mux

Now that you have a custom application up and running, let’s have a bit of fun with Mux! Start by creating a free Mux account here.

Once your account is provisioned, head over to the dashboard and click on “Video”, then click on the third option (Live Streams).

Click the “Create New Live Stream” button in the top right-hand side of the page.

Next, click the “Run Request” button to execute the API call that will create a new live stream for you.

Once created, click “View Live Stream”.

The page shown above contains the various pieces of connection information that you will need. Grab the “Stream Key” value and store it somewhere. You’ll need this value to live stream from your device.

On iOS, download “Broadcaster”, an RTMP app for iPhone’s – you can find this in the Apple Store for iOS and it’s 100% FREE. If you are running Android, there are various RTMP applications available. Once downloaded, enter the “RTMP URL” as the host, as well as the “Stream Key”. Click “Go Live” from within the app, or the equivalent button if you’re using a different RTMP app.

Now that you’re “live streaming” video from your device to Mux, update your web app with the playback URL (HLS feed URL) so that you can see your video in near real-time.

Once you’re “live”, the “asset” will be available through the Mux dashboard. Grab the “Public URL” and drop it in your app dashboard.

The URL should end in .m3u8, and if working properly, you should see your live video rendered in the app!

Final Thoughts

Live video is all the rage these days. Whether you’re watching a pro gamer on Twitch in beast mode playing Fortnite, or an eagle nesting, watching in real-time with Mux is the way to go.

With a combination of Mux and Stream Chat, you can not only watch what’s happening live but chat in real-time about what’s happening in the live video. Not only is it fun, but it’s useful, and most importantly, powerful. Using the tutorial that walked you through the steps above as a starting point, you can now create your own experience within any application of your choice.

For more information on Mux and the platform’s various offerings, have a look at their website at https://mux.com. If you’re interested in Stream Chat, you can try the interactive API Tour.

If you’re interested in building a fully custom version of this, Stream Chat offers SDKs for iOS and React Native (among other SDKs), in addition, to React Components, for easy integration.

Happy coding! ✌️