1 00:00:00,740 --> 00:00:05,740 An last video we started to set up OBSS on our local machine to eventually stream video over to our 2 00:00:05,740 --> 00:00:07,000 RCMP server. 3 00:00:07,210 --> 00:00:09,310 We didn't actually set up the streaming part just yet. 4 00:00:09,310 --> 00:00:11,320 We're going to take care of that in just a moment. 5 00:00:11,320 --> 00:00:16,320 First we're going to work on implementing this video player on our show stream page. 6 00:00:16,540 --> 00:00:21,640 So whenever a user goes to a very particular stream we want to show a big video player that is going 7 00:00:21,640 --> 00:00:25,190 to eventually receive some video from the RCMP server. 8 00:00:25,540 --> 00:00:30,010 Now in order to get some video into this video player I'm going to first pull open the documentation 9 00:00:30,010 --> 00:00:34,020 for node media server again inside my browser. 10 00:00:34,050 --> 00:00:41,640 Now on this page for node media server I'll scroll down a little bit and somewhere down here. 11 00:00:41,640 --> 00:00:42,960 Come on where is it. 12 00:00:42,960 --> 00:00:43,330 Here we go. 13 00:00:43,340 --> 00:00:45,560 Publishing live streams up. 14 00:00:45,570 --> 00:00:48,650 Nope not that one accessing laughter and that's what we're looking for. 15 00:00:48,660 --> 00:00:52,710 So when we try to access a live stream of video there are many different formats that we can use to 16 00:00:52,710 --> 00:00:53,870 access it with. 17 00:00:53,880 --> 00:00:56,150 So we've got the classic RCMP right here. 18 00:00:56,310 --> 00:01:05,130 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 19 00:01:05,130 --> 00:01:10,230 types of video formats that are used for streaming these days but enabling either them takes a little 20 00:01:10,230 --> 00:01:15,870 bit of additional setup on your machine to get your team server to transcode video over to these other 21 00:01:15,870 --> 00:01:16,700 formats. 22 00:01:16,710 --> 00:01:21,150 So ideally we would use those but it would be a lot of additional work and a little bit of tricky stuff 23 00:01:21,150 --> 00:01:22,130 to get that working. 24 00:01:22,320 --> 00:01:26,820 So instead we're going to be making use of a much easier to setup video format. 25 00:01:26,920 --> 00:01:29,180 HTP f LV. 26 00:01:29,400 --> 00:01:35,670 So this is a flash video format and I'm talking about like Flash player from back in the day even though 27 00:01:35,670 --> 00:01:39,510 it might seem like it's a legacy thing it's going to work perfectly for the type of video that we are 28 00:01:39,510 --> 00:01:40,950 trying to stream. 29 00:01:41,010 --> 00:01:45,080 Now you'll notice if you scroll down a little bit more there is an example of how to set up F.L. the 30 00:01:45,090 --> 00:01:48,860 type streaming with the library called F.L. B.Com J.S.. 31 00:01:48,930 --> 00:01:53,080 So inside this example right here you can see that they import the F.L. the library. 32 00:01:53,140 --> 00:01:56,380 LBJ Yes that's a no third party dependency. 33 00:01:56,400 --> 00:01:59,290 They then create a video element right here. 34 00:01:59,310 --> 00:02:05,130 They then select that video element inside of some javascript code and use that video element to create 35 00:02:05,190 --> 00:02:10,590 a player and attach that player to that video element and then eventually they play the video by calling 36 00:02:10,620 --> 00:02:12,290 F.L. the player play. 37 00:02:12,600 --> 00:02:15,090 So this is essentially what we're going to do. 38 00:02:15,090 --> 00:02:19,760 But you'll notice that this example is written out with just normal javascript and HDMI. 39 00:02:19,950 --> 00:02:26,100 So we need to essentially take the code you see right here and translate it into normal re-act code. 40 00:02:26,430 --> 00:02:30,330 So it'll be a nice little exercise that will go through. 41 00:02:30,430 --> 00:02:31,210 All right. 42 00:02:31,210 --> 00:02:34,770 Now the next thing I want to show you is the Filby J.S. library itself. 43 00:02:34,960 --> 00:02:39,880 So we're going to install this as a dependency into our project and that's going to be our actual video 44 00:02:39,880 --> 00:02:43,620 player so we can pull up in the documentation for effluvia. 45 00:02:43,670 --> 00:02:48,960 Yes at NPM J.S. dot com slash package Filby dot J.S.. 46 00:02:49,140 --> 00:02:52,310 So I will open up a new browser tab and go over to that package. 47 00:02:52,530 --> 00:02:56,930 So again this is what we're going to use to get that video player to appear on the screen. 48 00:02:57,910 --> 00:03:00,100 So we can take a look at the documentation here. 49 00:03:00,190 --> 00:03:04,450 If you go down to getting started you will actually see the exact same example that we were just looking 50 00:03:04,450 --> 00:03:06,270 at over on the Noad media server. 51 00:03:06,460 --> 00:03:08,890 So essentially Yep that's how we want to do things. 52 00:03:08,950 --> 00:03:13,100 So let's install this library and we're going to start to set it up inside of our stream. 53 00:03:13,120 --> 00:03:15,150 Show page. 54 00:03:15,600 --> 00:03:21,270 So I going to flip on over to my terminal I'm going to find my client terminal window. 55 00:03:21,280 --> 00:03:25,660 So the terminal window running our client or re-act project I'm going to stop the running reac server 56 00:03:25,960 --> 00:03:30,590 and then I will run NPM install dash dash save F.L. V. 57 00:03:30,820 --> 00:03:31,990 Yes. 58 00:03:32,110 --> 00:03:33,980 All right that's going to take just a second to install. 59 00:03:34,030 --> 00:03:37,010 So we're going to let it do its thing and then we'll start to set it up in the next video.