1
00:00:00,740 --> 00:00:05,810
We now have a full crud example put together with react and read us so we can see a list of records

2
00:00:06,200 --> 00:00:14,390
we can create a new record we can edit that record and then we can go ahead and delete it if we want

3
00:00:14,390 --> 00:00:15,310
to.

4
00:00:15,380 --> 00:00:18,590
And of course we can show a individual record as well.

5
00:00:18,590 --> 00:00:23,870
These are the basic operations that are included for the vast majority of web apps out there just about

6
00:00:23,900 --> 00:00:29,960
every app as we discussed much earlier on has these very basic operations around reading showing listing

7
00:00:30,020 --> 00:00:32,480
all that kind of good stuff different records.

8
00:00:32,750 --> 00:00:39,290
So at this point this application for the most part is complete and I would encourage you to do a get

9
00:00:39,290 --> 00:00:44,990
commit if you're making use of get or even just copy the project directory and just have all the code

10
00:00:44,990 --> 00:00:49,610
we've put together as a backup so that you can reference it in the future because what you see right

11
00:00:49,610 --> 00:00:54,110
here is a pretty good base for creating any application you might want to work on.

12
00:00:54,110 --> 00:00:59,180
So at this point moving forward we're going to start continuing on the streaming aspect of this application.

13
00:00:59,180 --> 00:01:04,640
Now remember the streaming part is 100 percent optional and a lot of what we're going to do here is

14
00:01:04,640 --> 00:01:07,270
not really related to react in redux at all.

15
00:01:07,280 --> 00:01:11,870
I just want to complete the application I told you we were going to build but going to the string stuff

16
00:01:11,900 --> 00:01:17,630
is not at all a requirement for underthings understanding how react and redux works to that end.

17
00:01:17,660 --> 00:01:21,950
If you have any trouble going through the streaming stuff and getting it to work I'm probably not going

18
00:01:21,950 --> 00:01:27,620
to offer you a lot of support for troubleshooting issues because again this is just not really relevant

19
00:01:27,620 --> 00:01:28,530
for the course.

20
00:01:28,550 --> 00:01:31,660
I just want to make sure that we can complete the example nonetheless.

21
00:01:31,720 --> 00:01:31,980
Okay.

22
00:01:32,000 --> 00:01:35,480
So we're gonna start working on the streaming aspect of the supplication now.

23
00:01:35,480 --> 00:01:37,620
So let me tell you about exactly what we need to do.

24
00:01:38,490 --> 00:01:40,470
I guess we looked at this diagram previously.

25
00:01:40,540 --> 00:01:45,850
Remember we had said that we were going to develop that API that had a list of streams and we've already

26
00:01:45,850 --> 00:01:51,460
gone through that process and our web application running inside of a browser has the ability to list

27
00:01:51,460 --> 00:01:55,480
out those different streams create new ones and do all that good stuff.

28
00:01:55,480 --> 00:02:00,520
So now the next thing we're going to do is set up this RCMP server which is going to be responsible

29
00:02:00,550 --> 00:02:05,940
for receiving different video streams and broadcasting them out to different users browsers.

30
00:02:05,950 --> 00:02:11,620
Now remember I had told you setting up this RTM RCMP server was going to be really easy and straightforward

31
00:02:11,920 --> 00:02:13,000
and that's not a lie at all.

32
00:02:13,000 --> 00:02:15,810
It really will be very simple to put together.

33
00:02:15,820 --> 00:02:17,640
So here's what we're going to do.

34
00:02:18,250 --> 00:02:25,340
I'm going to flip on over to my terminal where I'm inside of my client directory right here.

35
00:02:25,420 --> 00:02:30,550
So remember the client folder is where we have put together all the react and redux parts of our application.

36
00:02:30,610 --> 00:02:36,760
So I'm going to go up one level and out here I've got the API project and the client project as well.

37
00:02:36,790 --> 00:02:42,280
So inside of this folder inside of the streams overall general project folder I'm going to make a new

38
00:02:42,280 --> 00:02:52,180
folder called Arti MP server like zone and then I'm going to change into that directory and inside of

39
00:02:52,180 --> 00:02:56,660
there I'm going to generate a new package not just on file with NPM in it.

40
00:02:58,150 --> 00:03:03,280
Once I run NPM minute I'll be prompted for a couple of different inputs and I'm going to hit enter to

41
00:03:03,280 --> 00:03:07,160
go through each of them and I eventually get kicked back out to my terminal.

42
00:03:07,660 --> 00:03:11,370
OK so now we've generated a package not just on file.

43
00:03:12,070 --> 00:03:15,030
Let me tell you about how we're going to put that server together.

44
00:03:15,640 --> 00:03:15,940
All right.

45
00:03:15,940 --> 00:03:21,310
So I've got some documentation on here on the screen or a link to some documentation for the RCMP server

46
00:03:21,310 --> 00:03:23,040
that we're going to make use of.

47
00:03:23,040 --> 00:03:28,080
So I'm going to open up a new browser tab and navigate to that link.

48
00:03:28,180 --> 00:03:33,820
All right so this is a no js implementation of a RCMP server and this is how we are going to eventually

49
00:03:33,820 --> 00:03:41,440
stream video from a program like say OBSS member that's open broadcaster over to the RCMP server making

50
00:03:41,440 --> 00:03:46,420
use of the node media server package is really easy and straightforward as a matter of fact we're just

51
00:03:46,420 --> 00:03:52,540
going to take the default example that you can see if you scroll down a little bit and find the usage

52
00:03:52,600 --> 00:03:54,420
section.

53
00:03:54,490 --> 00:03:59,660
So underneath the usage section you'll see NPM version right here and it says single core mode.

54
00:03:59,710 --> 00:04:03,910
So there's a single core mode and a multi-core cluster mode.

55
00:04:03,910 --> 00:04:08,620
We're going to use single core because we do not really expect to have a lot of traffic on this RCMP

56
00:04:08,620 --> 00:04:10,400
server that we are putting together.

57
00:04:10,840 --> 00:04:16,210
So essentially all we have to do is install this package node media server and then you and I are going

58
00:04:16,210 --> 00:04:18,870
to run exactly the code you see right here.

59
00:04:18,880 --> 00:04:20,290
We're not going make any changes to it.

60
00:04:20,290 --> 00:04:24,850
We're just going to use the base default configuration.

61
00:04:25,180 --> 00:04:30,310
All right so I'm going to flip back over to my RCMP server directory and over here I'm going to run

62
00:04:30,350 --> 00:04:40,660
NPM install dash dash save node dash media dash server Lexa and then well that runs I'm going to also

63
00:04:40,660 --> 00:04:45,190
open up my code editor inside of that RCMP server directory.

64
00:04:45,190 --> 00:04:49,070
So I've got a new code editor open here inside of RCMP server.

65
00:04:49,940 --> 00:04:54,770
There's the package on file that we just created and there's the node modules directory where our packages

66
00:04:54,770 --> 00:04:56,600
are currently being installed.

67
00:04:56,600 --> 00:05:02,670
So inside if you're going to create a new file called index dot J.S. I'm going to go back over to the

68
00:05:02,670 --> 00:05:06,220
Get help repository copy this example code right here.

69
00:05:07,690 --> 00:05:10,090
And then paste it inside the index not just file

70
00:05:12,880 --> 00:05:16,080
and then going to save this file and then to start up our project.

71
00:05:16,090 --> 00:05:21,910
I'm going to open up the packaged case on file and I will add in a new script inside of your and replace

72
00:05:21,910 --> 00:05:25,300
the existing test script to start up our project.

73
00:05:25,360 --> 00:05:31,520
So I'm going to delete test and I'm going to add in a new script called start anytime we run that script.

74
00:05:31,540 --> 00:05:33,720
We're going to run node index Dutch.

75
00:05:33,760 --> 00:05:36,770
Yes like the OK.

76
00:05:36,810 --> 00:05:38,340
And that's pretty much it.

77
00:05:38,340 --> 00:05:43,490
So now if I flip back over to my terminal I should see my package is finished installing the node medius

78
00:05:43,490 --> 00:05:44,720
server package.

79
00:05:44,730 --> 00:05:52,060
So inside of our server I'm going to run NPM starts and that's going to start up our streaming server.

80
00:05:52,080 --> 00:05:56,210
So I should see a message like this node media server whatever version you are running.

81
00:05:56,430 --> 00:05:59,640
And then we'll see some other output in here over time.

82
00:05:59,640 --> 00:06:04,030
So now our server for streaming is running on port eight thousand.

83
00:06:04,350 --> 00:06:04,540
OK.

84
00:06:04,560 --> 00:06:05,870
So this looks pretty good.

85
00:06:06,140 --> 00:06:07,670
So let's take a quick pause right here.

86
00:06:07,680 --> 00:06:13,530
When we come back the next section we're going to start to configure our OBSS software to or whatever

87
00:06:13,590 --> 00:06:16,230
streaming software you're using to stream to the server.

88
00:06:16,380 --> 00:06:18,600
So quick pause and I'll see you in just a minute.