An last video we started to set up OBSS on our local machine to eventually stream video over to our
RCMP server.
We didn't actually set up the streaming part just yet.
We're going to take care of that in just a moment.
First we're going to work on implementing this video player on our show stream page.
So whenever a user goes to a very particular stream we want to show a big video player that is going
to eventually receive some video from the RCMP server.
Now in order to get some video into this video player I'm going to first pull open the documentation
for node media server again inside my browser.
Now on this page for node media server I'll scroll down a little bit and somewhere down here.
Come on where is it.
Here we go.
Publishing live streams up.
Nope not that one accessing laughter and that's what we're looking for.
So when we try to access a live stream of video there are many different formats that we can use to
access it with.
So we've got the classic RCMP right here.
We've got h t TPA F.L. V Filby is like Flash video HLS and dash and dash are some of the more popular
types of video formats that are used for streaming these days but enabling either them takes a little
bit of additional setup on your machine to get your team server to transcode video over to these other
formats.
So ideally we would use those but it would be a lot of additional work and a little bit of tricky stuff
to get that working.
So instead we're going to be making use of a much easier to setup video format.
HTP f LV.
So this is a flash video format and I'm talking about like Flash player from back in the day even though
it might seem like it's a legacy thing it's going to work perfectly for the type of video that we are
trying to stream.
Now you'll notice if you scroll down a little bit more there is an example of how to set up F.L. the
type streaming with the library called F.L. B.Com J.S..
So inside this example right here you can see that they import the F.L. the library.
LBJ Yes that's a no third party dependency.
They then create a video element right here.
They then select that video element inside of some javascript code and use that video element to create
a player and attach that player to that video element and then eventually they play the video by calling
F.L. the player play.
So this is essentially what we're going to do.
But you'll notice that this example is written out with just normal javascript and HDMI.
So we need to essentially take the code you see right here and translate it into normal re-act code.
So it'll be a nice little exercise that will go through.
All right.
Now the next thing I want to show you is the Filby J.S. library itself.
So we're going to install this as a dependency into our project and that's going to be our actual video
player so we can pull up in the documentation for effluvia.
Yes at NPM J.S. dot com slash package Filby dot J.S..
So I will open up a new browser tab and go over to that package.
So again this is what we're going to use to get that video player to appear on the screen.
So we can take a look at the documentation here.
If you go down to getting started you will actually see the exact same example that we were just looking
at over on the Noad media server.
So essentially Yep that's how we want to do things.
So let's install this library and we're going to start to set it up inside of our stream.
Show page.
So I going to flip on over to my terminal I'm going to find my client terminal window.
So the terminal window running our client or re-act project I'm going to stop the running reac server
and then I will run NPM install dash dash save F.L. V.
Yes.
All right that's going to take just a second to install.
So we're going to let it do its thing and then we'll start to set it up in the next video.