1 00:00:00,780 --> 00:00:03,840 In the last video we got a video player to display on the screen. 2 00:00:03,940 --> 00:00:08,970 So now we need to make sure that this video player somehow requests video to come from that RCMP server 3 00:00:09,660 --> 00:00:10,600 in order to do so. 4 00:00:10,620 --> 00:00:15,000 We're going to be making use of that F.L. the package at this point you might be all a bit confused 5 00:00:15,000 --> 00:00:19,800 why we installed FLC at all because we just appeared to get a video player on the screen without it 6 00:00:20,180 --> 00:00:26,040 will essentially F.L. Wii is about downloading that video stream and then converting it to some file 7 00:00:26,040 --> 00:00:30,110 that can actually played inside of this normal HVM video player. 8 00:00:30,150 --> 00:00:36,270 You can almost think of LBJ as being a little bit like X-posts in that it's going to reach out to some 9 00:00:36,270 --> 00:00:41,190 remote server get some resource and then serve up that data to their application to be consumed on the 10 00:00:41,190 --> 00:00:42,360 screen. 11 00:00:42,360 --> 00:00:47,160 So in this video we're going to start to set up F.L. the inside of our streams show component the actual 12 00:00:47,160 --> 00:00:52,530 setup of this is going to be just about identical to what we just saw inside of the node Media Server 13 00:00:52,530 --> 00:00:58,230 documentation specifically F.L. veejay us over FLC. 14 00:00:58,230 --> 00:01:02,670 So as we saw just a moment ago when we looked at this documentation we're going to take the rest to 15 00:01:02,670 --> 00:01:06,980 the video element and then pass it off to this create player call. 16 00:01:07,020 --> 00:01:11,670 You'll notice that inside of create player we also have to specify the or else that we're going to get 17 00:01:11,670 --> 00:01:13,020 that stream from. 18 00:01:13,020 --> 00:01:16,100 So we'll have to investigate that in just a little bit. 19 00:01:16,170 --> 00:01:20,580 Right now I want to think about where we should be writing this code inside of streams show to set up 20 00:01:20,580 --> 00:01:21,990 that video player. 21 00:01:22,050 --> 00:01:27,090 I think that inappropriate place to do it would be the component did MT lifecycle method. 22 00:01:27,090 --> 00:01:31,550 So we'll say that right after we call that stream it we could write this code before just to be clear. 23 00:01:31,560 --> 00:01:37,470 Doesn't really matter what side of this we place the creation of the video player on of fecche Stream 24 00:01:37,950 --> 00:01:39,390 we're going to call F.L.. 25 00:01:39,450 --> 00:01:46,900 Create player and we'll pass in an options object the options object is going to have type Filby to 26 00:01:46,900 --> 00:01:49,320 designate the type of video we're trying to receive. 27 00:01:49,510 --> 00:01:52,760 And then we're also going to specify a or L right here. 28 00:01:52,780 --> 00:01:56,840 So let's take a look at the node Media Server documentation again and figure out how we specify that 29 00:01:56,860 --> 00:01:58,420 your l. 30 00:01:58,550 --> 00:02:02,800 So you'll see right here we're going to specify localhost eight thousand member. 31 00:02:02,890 --> 00:02:08,010 We had said that that is where video is going to be served up from from that RCMP server port eight 32 00:02:08,020 --> 00:02:14,730 thousand and then we're going to access the live route and then stream name right here. 33 00:02:14,730 --> 00:02:17,840 So this is going to be the name of our stream of video. 34 00:02:17,860 --> 00:02:21,420 Now you might think that this is going to be like the title of our stream from the API. 35 00:02:21,420 --> 00:02:27,420 Remember the title of a stream that is stored on our API is completely separate and independent from 36 00:02:27,450 --> 00:02:30,280 all of this actual RTM piece server stuff. 37 00:02:30,570 --> 00:02:36,120 The stream name right here is actually specified when a user streams video from their video streaming 38 00:02:36,120 --> 00:02:36,600 software. 39 00:02:36,600 --> 00:02:42,140 In our case OBSS if you actually scroll up in this documentation right here just a little bit there's 40 00:02:42,150 --> 00:02:47,510 a section on how to configure OBSS to stream to our RCMP server. 41 00:02:47,820 --> 00:02:53,100 So inside of OBSS we're going to go to settings then stream we're going to select a custom streaming 42 00:02:53,100 --> 00:03:00,240 server and we're going to attempt to stream video from OBSS over to our GMP local host live and then 43 00:03:00,240 --> 00:03:04,290 we're also going to designate and site of OBSS something called a stream key. 44 00:03:04,470 --> 00:03:07,580 And that stream key is going to be equal to our stream name. 45 00:03:07,740 --> 00:03:14,070 So the stream name is actually designated by OBSS essentially when a streamer starts to stream video 46 00:03:14,070 --> 00:03:15,560 to our application. 47 00:03:15,600 --> 00:03:22,530 They are going to designate a stream name and so we just need to make sure that our viewers receive 48 00:03:22,550 --> 00:03:25,490 or make use of the exact same stream name right there. 49 00:03:26,580 --> 00:03:29,700 So the approach that we're going to take for this is going to be really straightforward. 50 00:03:29,880 --> 00:03:35,430 We're going to say that our stream name is going to be the idea of the stream that we're looking at. 51 00:03:35,430 --> 00:03:40,380 So in this case I'm looking at stream with ID number one that is going to be our stream name. 52 00:03:40,650 --> 00:03:48,030 So a streamer using OBSS is going to enter a stream key of like ID one if they're trying to stream to 53 00:03:48,180 --> 00:03:49,510 stream with idea of one. 54 00:03:49,770 --> 00:03:54,570 And then on site of our video player when we set that up we'll put the ID of the stream that the user 55 00:03:54,570 --> 00:03:57,990 is looking at in place of this little stream name part right here. 56 00:03:57,990 --> 00:04:02,550 Now I know that's a little bit confusing but honestly once we put all that stuff together it'll definitely 57 00:04:02,550 --> 00:04:04,200 make a lot of sense. 58 00:04:04,200 --> 00:04:09,840 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 59 00:04:09,840 --> 00:04:13,860 bit of a template string right here so yes 20:15 syntax. 60 00:04:14,130 --> 00:04:23,940 We're going to say HTP colon slash slash localhost 8000 slash live slash curly braces like so. 61 00:04:23,950 --> 00:04:27,320 And inside of here we want to put the idea of our stream now. 62 00:04:27,400 --> 00:04:30,560 We already accessed the ID right up here on the line above it. 63 00:04:30,580 --> 00:04:37,360 So I think that we can probably save a little bit of typing here by destructuring off id from destock. 64 00:04:37,390 --> 00:04:37,910 Props. 65 00:04:37,990 --> 00:04:39,830 Match.com prams. 66 00:04:40,240 --> 00:04:45,910 And then when we call fecche dream we can just pass in the ID like so and now we can reuse that ID variable 67 00:04:46,180 --> 00:04:48,260 inside of R U R L as well. 68 00:04:48,340 --> 00:04:57,080 So we're going to get video from Live ID Daut F.L. be like so OSL looks pretty good. 69 00:04:57,440 --> 00:05:03,410 So now the next thing we're going to do if we follow the documentation you saw over here is a sign that 70 00:05:03,410 --> 00:05:09,680 create player call to some variable and then we're going to take that variable and we're going to call 71 00:05:09,680 --> 00:05:10,930 attached media elements. 72 00:05:10,970 --> 00:05:14,480 We're going to pass in the reference to the actual video element that we are rendering inside of our 73 00:05:14,480 --> 00:05:15,840 component. 74 00:05:15,840 --> 00:05:23,040 So back over here I'm going to assign the result of create player to this dot player like so and then 75 00:05:23,070 --> 00:05:30,520 right after it I'll say this dot player dot attach media element and I'll pass in a reference to this. 76 00:05:30,690 --> 00:05:32,720 The video ref. 77 00:05:32,760 --> 00:05:34,650 Current like so. 78 00:05:34,950 --> 00:05:38,420 And then finally to load up the player we'll call this player. 79 00:05:38,550 --> 00:05:41,850 Load. 80 00:05:41,900 --> 00:05:45,960 Now you might notice back in the documentation they've got the play call on here as well. 81 00:05:46,070 --> 00:05:49,370 Play is going to attempt to get the video player playing automatically. 82 00:05:49,490 --> 00:05:54,980 But I've actually found that that doesn't quite work so well a lot of modern browsers browsers prevent 83 00:05:54,980 --> 00:05:58,930 video from being played automatically when the user first accesses the page. 84 00:05:59,060 --> 00:06:03,260 So for you and me we're just going to load up the player and we're not going to try to automatically 85 00:06:03,260 --> 00:06:04,450 play any video. 86 00:06:04,670 --> 00:06:09,650 We'll allow the user to click on the play button to get the video to start to play. 87 00:06:09,850 --> 00:06:10,110 OK. 88 00:06:10,130 --> 00:06:16,170 Let's save this and then we'll flip back over to our browser and you'll notice that we very quickly 89 00:06:16,170 --> 00:06:19,630 get a nasty error message right here which is totally fine. 90 00:06:19,830 --> 00:06:22,930 Let's take a quick pause when we come back the next section we're going to start to investigate this 91 00:06:22,950 --> 00:06:27,600 air and figure out what's going on because it definitely seems like something is not quite going expected 92 00:06:27,810 --> 00:06:31,410 when we attempt to attach the video player to that video ref. 93 00:06:31,510 --> 00:06:33,770 So quick pause and I'll see you in just a minute.