In the last video we got a video player to display on the screen.
So now we need to make sure that this video player somehow requests video to come from that RCMP server
in order to do so.
We're going to be making use of that F.L. the package at this point you might be all a bit confused
why we installed FLC at all because we just appeared to get a video player on the screen without it
will essentially F.L. Wii is about downloading that video stream and then converting it to some file
that can actually played inside of this normal HVM video player.
You can almost think of LBJ as being a little bit like X-posts in that it's going to reach out to some
remote server get some resource and then serve up that data to their application to be consumed on the
screen.
So in this video we're going to start to set up F.L. the inside of our streams show component the actual
setup of this is going to be just about identical to what we just saw inside of the node Media Server
documentation specifically F.L. veejay us over FLC.
So as we saw just a moment ago when we looked at this documentation we're going to take the rest to
the video element and then pass it off to this create player call.
You'll notice that inside of create player we also have to specify the or else that we're going to get
that stream from.
So we'll have to investigate that in just a little bit.
Right now I want to think about where we should be writing this code inside of streams show to set up
that video player.
I think that inappropriate place to do it would be the component did MT lifecycle method.
So we'll say that right after we call that stream it we could write this code before just to be clear.
Doesn't really matter what side of this we place the creation of the video player on of fecche Stream
we're going to call F.L..
Create player and we'll pass in an options object the options object is going to have type Filby to
designate the type of video we're trying to receive.
And then we're also going to specify a or L right here.
So let's take a look at the node Media Server documentation again and figure out how we specify that
your l.
So you'll see right here we're going to specify localhost eight thousand member.
We had said that that is where video is going to be served up from from that RCMP server port eight
thousand and then we're going to access the live route and then stream name right here.
So this is going to be the name of our stream of video.
Now you might think that this is going to be like the title of our stream from the API.
Remember the title of a stream that is stored on our API is completely separate and independent from
all of this actual RTM piece server stuff.
The stream name right here is actually specified when a user streams video from their video streaming
software.
In our case OBSS if you actually scroll up in this documentation right here just a little bit there's
a section on how to configure OBSS to stream to our RCMP server.
So inside of OBSS we're going to go to settings then stream we're going to select a custom streaming
server and we're going to attempt to stream video from OBSS over to our GMP local host live and then
we're also going to designate and site of OBSS something called a stream key.
And that stream key is going to be equal to our stream name.
So the stream name is actually designated by OBSS essentially when a streamer starts to stream video
to our application.
They are going to designate a stream name and so we just need to make sure that our viewers receive
or make use of the exact same stream name right there.
So the approach that we're going to take for this is going to be really straightforward.
We're going to say that our stream name is going to be the idea of the stream that we're looking at.
So in this case I'm looking at stream with ID number one that is going to be our stream name.
So a streamer using OBSS is going to enter a stream key of like ID one if they're trying to stream to
stream with idea of one.
And then on site of our video player when we set that up we'll put the ID of the stream that the user
is looking at in place of this little stream name part right here.
Now I know that's a little bit confusing but honestly once we put all that stuff together it'll definitely
make a lot of sense.
All right so I'm going to flip back over to my editor and for my you are Elle I'm going to use a little
bit of a template string right here so yes 20:15 syntax.
We're going to say HTP colon slash slash localhost 8000 slash live slash curly braces like so.
And inside of here we want to put the idea of our stream now.
We already accessed the ID right up here on the line above it.
So I think that we can probably save a little bit of typing here by destructuring off id from destock.
Props.
Match.com prams.
And then when we call fecche dream we can just pass in the ID like so and now we can reuse that ID variable
inside of R U R L as well.
So we're going to get video from Live ID Daut F.L. be like so OSL looks pretty good.
So now the next thing we're going to do if we follow the documentation you saw over here is a sign that
create player call to some variable and then we're going to take that variable and we're going to call
attached media elements.
We're going to pass in the reference to the actual video element that we are rendering inside of our
component.
So back over here I'm going to assign the result of create player to this dot player like so and then
right after it I'll say this dot player dot attach media element and I'll pass in a reference to this.
The video ref.
Current like so.
And then finally to load up the player we'll call this player.
Load.
Now you might notice back in the documentation they've got the play call on here as well.
Play is going to attempt to get the video player playing automatically.
But I've actually found that that doesn't quite work so well a lot of modern browsers browsers prevent
video from being played automatically when the user first accesses the page.
So for you and me we're just going to load up the player and we're not going to try to automatically
play any video.
We'll allow the user to click on the play button to get the video to start to play.
OK.
Let's save this and then we'll flip back over to our browser and you'll notice that we very quickly
get a nasty error message right here which is totally fine.
Let's take a quick pause when we come back the next section we're going to start to investigate this
air and figure out what's going on because it definitely seems like something is not quite going expected
when we attempt to attach the video player to that video ref.
So quick pause and I'll see you in just a minute.