@mux/ai

Dave: Live streaming

used to be a pretty

complicated feature

to build into

your applications,

but not anymore.

With the use

of Mux's simple

APIs, you can

start building

live streaming

features into your

application in

just a few minutes.

In this video,

we're going to

talk through three

different steps that

you'll need to take

to build out live

streaming features

into your app.

The first is

create a unique

live stream.

Then we're going to

start streaming to

that live stream.

And then finally,

we'll figure out how

to play back that

live stream in your

own video player.

Let's get started

in the Mux

dashboard by Going

to create a brand

new access token

that we can use

with the MUX API.

I'm heading down to

the corner settings

and choosing

access tokens.

And I want to click

on the generate

new token button.

First, we'll

want to select

the environment

that we're

working within.

We only need

permissions to

work with MUX

video in this

particular use case.

You can change

the name of your

access token if it's

helpful and click

generate token.

So we'll need

both of these

values to create

the live stream.

Make sure to copy

them and paste them

somewhere safe.

You can also

click the green

button to download

the environment

variables file.

Cool.

So now we're ready

to start writing a

little bit of code.

I'm in a brand

new project

in my editor.

And the approach

that I'll take for

this particular demo

is to create a node

JS file that will

interact with the

mux API and create

the resources that

we need to start

live streaming.

So we'll have

one main entry

file, and I'll

call that index.

js, and this

file will perform

the actions that

we need to get

up and running.

To make working with

the Mux API super

easy, we can install

the MuxNode SDK

into our project.

You don't need to

be using Javascript

for your project.

You can be using

any language

that is right for

your application.

So now looking

at the project

structure, we

have a package.

json file, an index.

js, and our

associated packages.

That's all great,

but we really

only need a few

lines of code to

get started here.

So, the first

thing I want to

do is import the

muxnode SDK that

we just installed

to this project.

Perfect.

And now we'll need

to instantiate

it using those

environment

variables that

contain the access

token and the

secret key that

we created within

the MUX dashboard,

I downloaded

the environment

variables over here,

and I'm going to go

ahead and copy this

file right over to

our project back

over in our index JS

file, we can create

a new instance of

the MUX node SDK

by instantiating

it and assigning

it to a variable.

We'll call this

variable MUX

in this case.

You'll see we're

loading the mux

token ID and

mux token secret

from the process.

env object.

To make sure we're

appropriately

loading our env

file, I'm going

to use the env

package to ensure

we're loading those

variables correctly.

So I'll go over to,

uh, CLI and I'll do

NPM install and I'll

just add this little

config line of code

here at the top.

Perfect.

Now we're ready to

start interacting

with the Mux API.

First thing we want

to do is create the

actual live stream.

So this basically

acts as a container

for the live

stream itself.

When we create

a live stream,

nothing's going

to go live

automatically or

by default, but

we'll have the

option to turn that

live stream on.

On or off when we

are ready to publish

live video to create

a new live stream.

It only takes a

few lines of code.

We'll provide a

playback policy,

which basically says

anybody can access

this particular

live stream by

calling it a public

playback policy.

And we'll also say

that the new asset

that's created as

a result of going

live can be accessed

by anyone as well.

Every live stream

is automatically

recorded and

archived into mux

so that you can

play it back at

a future time.

Because this is an

async operation, I'm

going to wrap it in

an async function.

Now the lesson to

consider is that

this code will

typically be running

on your server as a

result of a request

that was made by

one of your users.

Maybe they clicked a

button to say create

a new live stream

or perhaps you

create a live stream

automatically when

a new user signs up.

So this code won't

typically be running

in a CLI environment

but the whole

interaction process

is the same idea

where This code will

run as a result of,

uh, your application

taking action.

One other small

refactor to make

sure that this runs

appropriately in the

CLI environment is

to just change this

import method to

let's say, const mux

equals require node.

Let's give

this a shot.

I'm going to head

over to the CLI and

run node index JS.

And it looks like

our dot M file

is not loading

appropriately.

So we'll make one

more change here

to make sure that

that gets loaded

in to make sure

our environment

variables get

picked up.

I'm going to just

rename this file

from the original

name to simply dot

M now we should

be ready to go.

I'm going to head

over to the CLI

and run the script.

Great.

You can see that

our script executed

successfully.

We have an

interesting payload

that was returned as

a result of running

that request.

This payload

contains all of the

information that

we need to be able

to turn this live

stream on and off

when we're ready.

To, most

importantly, is

the stream key.

This is basically

a password that

allows you to

connect to this live

stream container

and send live

videos that will

then be broadcast

to wherever this

live stream is

meant to be played.

You can also see

that the live stream

status is idle

because we're not

currently sending

any live video.

Let's go ahead

and change that.

This stream key

value is going

to be commonly

used between all

of the different

live streaming

applications

out there,

whether that's

OBS, Restream,

StreamYard, or

whatever other live

stream application

you might be using.

For this demo, I'm

going to use OBS.

I'll copy the stream

key, head on over

to OBS, go into the

preferences, and

under the stream

tab, I'll be able to

choose the service

that I'm going to be

streaming through.

You can find mux

in the list of

services in the

stream key field.

Simply paste the

stream key that

was returned as a

result of making

the API request.

Then click.

Okay.

We're all configured

to start our

live streaming.

So I'm going to

go ahead and click

start streaming.

Now let's check out

the mux dashboard

and see if we

can check in on

our live stream.

I'm going to go

into my development

environment, head

on over to the

video tab and click

on live streams.

Looks like we

have one active

live stream, which

is good news.

And there's me in

that yellow hat

seems to be working.

So our live video

was delivered into

mugs successfully.

That's great news,

but we probably

aren't going to be

playing back the

live stream within

the MUX dashboard

every time we want

our viewers to be

able to load up

this live stream

and watch it as

we stream live.

So let me show you

how to load this

live stream into

a player that you

can then place on

your own website.

If you go to

the Playback

in Thumbnails

tab, you'll see

a Playback ID.

Now this Playback

ID is basically the

reference for this

livestream that

allows you to load

it up in any of

the video players

that are out there.

One of the easiest

ways to playback

your livestream is

by using MuxPlayer.

You can just copy

and paste this

code that's given

to you right on

this dashboard page

and you should be

able to see this

livestream load up

with no problems.

I'm going to click

on this little

clipboard to

copy this code.

Head on over to a

new code sandbox and

in the body, I'll

go ahead and paste

our mux player code.

Cool.

And you can see the

video that we were

live streaming is

now appearing right

on the website.

So that's it.

Really with just a

few lines of code,

we were able to

create a new live

stream and then

show you how to

take that stream

key, plug it into

your video streaming

application

and go live

without a hitch.

Then we can take

that playback ID

that was created

and throw it into

MuxPlayer to watch

the live stream

across all the

different devices

that are out there.

Now you're ready

to get up and

running with

your live stream.

Let us know if you

have any questions

along the way.

We're here to help.