1 00:00:00,650 --> 00:00:04,080 All right my friends inside this video we're going to start talking about the next big application that 2 00:00:04,080 --> 00:00:05,130 we are going to work on. 3 00:00:05,230 --> 00:00:10,200 Now I'm really excited about this next application because it is going to be far more complex and advanced 4 00:00:10,200 --> 00:00:12,060 than anything we've worked on previously. 5 00:00:12,090 --> 00:00:14,950 So let's just dive right in and talk about what we're going to build. 6 00:00:15,120 --> 00:00:17,080 First off a quick little disclaimer. 7 00:00:17,100 --> 00:00:22,170 The application that we're going to build at first glance is going to look crazy complicated and it's 8 00:00:22,170 --> 00:00:26,490 going to look like there is a lot of kind of back end servers and whatnot do you have to put together. 9 00:00:26,520 --> 00:00:30,390 I can tell you right now that at the end of the day the application we're going to build is going to 10 00:00:30,390 --> 00:00:34,410 have a total 100 percent focus on react and redux. 11 00:00:34,410 --> 00:00:35,290 That's why we're here for it. 12 00:00:35,310 --> 00:00:36,660 That's all we're going to learn. 13 00:00:36,670 --> 00:00:41,130 We're going to put together a little bit of backend servers but that's going to be towards the end of 14 00:00:41,130 --> 00:00:41,900 the application. 15 00:00:41,910 --> 00:00:46,230 And at the end of the day it's going to be pretty darn straightforward much easier than you might think 16 00:00:46,230 --> 00:00:46,900 it will be. 17 00:00:47,100 --> 00:00:47,560 OK. 18 00:00:47,710 --> 00:00:48,870 So enough of that. 19 00:00:48,870 --> 00:00:49,900 What are we going to build. 20 00:00:50,040 --> 00:00:57,320 Well essentially we're going to build a clone of a very popular web application called Twitch TV which 21 00:00:57,330 --> 00:00:59,620 thought TV is extraordinarily popular. 22 00:00:59,640 --> 00:01:05,100 It is used by people all over the world to record video on their desktop and stream it live to viewers 23 00:01:05,130 --> 00:01:11,100 across the world so other people can view some streamer inside their browser and see some continuous 24 00:01:11,100 --> 00:01:14,990 stream of video which is really popular for video gaming. 25 00:01:15,120 --> 00:01:21,690 And so you'll see a lot of PC games on here and some P.S. for games as well but it's also used for other 26 00:01:21,690 --> 00:01:23,310 topics as well. 27 00:01:23,310 --> 00:01:27,580 Me personally I really like this one particular topic called science and technology. 28 00:01:27,630 --> 00:01:32,580 It has a lot of streams around people building software so you can watch other people building software 29 00:01:32,640 --> 00:01:36,870 and in general just kind of fun to see how other people approach problems and whatnot. 30 00:01:36,870 --> 00:01:37,160 All right. 31 00:01:37,170 --> 00:01:39,330 So this is more or less what we're going to build. 32 00:01:39,330 --> 00:01:45,290 There's going to be you know one or two small little tweaks because twitch is a very very large product. 33 00:01:45,360 --> 00:01:50,780 So we're going to really just be building out the core experience which is streaming video. 34 00:01:50,790 --> 00:01:55,050 Now one thing I want to tell you right now is that we are going to have the ability inside of our application 35 00:01:55,050 --> 00:01:57,260 to stream video from our desktop. 36 00:01:57,570 --> 00:02:05,290 However the actual twitch backend servers like the actual twitch application is extraordinarily complex. 37 00:02:05,310 --> 00:02:12,210 OK I can tell you that right now twitch is a like million dollar billion dollar product and it has thousands 38 00:02:12,210 --> 00:02:16,640 and thousands of years of engineering time put into it to make it work as it works. 39 00:02:16,800 --> 00:02:21,050 So we're going to build something very similar but it's going to be like a pretty straightforward approach. 40 00:02:21,060 --> 00:02:23,950 I just want to kind of set that expectation right now. 41 00:02:24,230 --> 00:02:24,500 Okay. 42 00:02:24,510 --> 00:02:29,070 So on a first now began by showing you a couple of diagrams to help you understand exactly how twitch 43 00:02:29,100 --> 00:02:33,030 or video streaming in general works right. 44 00:02:33,780 --> 00:02:34,030 Okay. 45 00:02:34,040 --> 00:02:37,670 So here's what's going on at a very simple level behind the scenes. 46 00:02:37,670 --> 00:02:42,830 Essentially we have some streamer running a computer and on their computer they are running some streaming 47 00:02:42,830 --> 00:02:46,570 software very common software to be running to stream video. 48 00:02:46,570 --> 00:02:50,640 It's called Open broadcaster software that is an actual program. 49 00:02:50,660 --> 00:02:56,600 So it's a program called Open broadcast or software or OBSS for short as you were watching this video 50 00:02:56,750 --> 00:02:59,080 of me talking and presenting to you right now. 51 00:02:59,210 --> 00:03:01,280 I actually am using OBSS right now. 52 00:03:01,280 --> 00:03:07,250 So this is obvious that I am using OBSS not only used for streaming video it is also used for recording 53 00:03:07,250 --> 00:03:12,170 your desktop to a video file as well so many purposes to Oh yes. 54 00:03:12,170 --> 00:03:17,960 Now there are other uses or other software other programs to use to streaming but OBSS extremely popular 55 00:03:17,960 --> 00:03:19,340 in the community. 56 00:03:19,400 --> 00:03:24,290 So when you run OBSS on your computer thats going to essentially record your desktop and stream that 57 00:03:24,290 --> 00:03:27,050 video to some outside server. 58 00:03:27,050 --> 00:03:32,510 One way of putting this video streaming service together is to create something called a Aarthi MP server 59 00:03:32,540 --> 00:03:35,410 or a real time messaging protocol. 60 00:03:35,420 --> 00:03:40,730 This is a specialized server that is going to receive an incoming video feed and then broadcast that 61 00:03:40,730 --> 00:03:47,390 video feed out to a bunch of different viewers who can watch from their browser a RTM server is not 62 00:03:47,390 --> 00:03:49,590 limited to just one stream or at a time. 63 00:03:49,670 --> 00:03:54,620 So we could potentially have several different streamers all sending video to our single server right 64 00:03:54,620 --> 00:03:55,070 here. 65 00:03:55,160 --> 00:04:00,240 And then many different viewers could be watching each of these different streamers at the same time. 66 00:04:00,260 --> 00:04:05,750 And you and I are going to put together this RCMP server but we're going to use a third party package 67 00:04:05,750 --> 00:04:08,750 to make it really really easy and straightforward. 68 00:04:08,930 --> 00:04:13,700 Remember Like I said just a moment ago this application is going to look really complicated but the 69 00:04:13,700 --> 00:04:18,770 our team server like the video broadcasting part is going to be incredibly straightforward and simple 70 00:04:18,770 --> 00:04:22,030 for us to setup so don't feel like that's going to be a really hard thing to do. 71 00:04:22,990 --> 00:04:23,250 All right. 72 00:04:23,260 --> 00:04:28,420 So this is kind of like a very simple and straightforward approach of the video streaming process. 73 00:04:28,480 --> 00:04:33,220 But in a real streaming application like twitch and the one that you and I built there's actually one 74 00:04:33,220 --> 00:04:35,400 other server inside this mix. 75 00:04:35,440 --> 00:04:38,970 You see the RCMP server here is only about streaming video. 76 00:04:39,010 --> 00:04:41,020 That is its sole purpose. 77 00:04:41,020 --> 00:04:45,530 But we also have some other information that we want to share with our users or example. 78 00:04:45,700 --> 00:04:51,550 A user is going to need to know what streams are currently broadcasting or what streams exist inside 79 00:04:51,550 --> 00:04:52,840 of application. 80 00:04:52,900 --> 00:04:55,450 So we're going to have a separate API server up here. 81 00:04:55,480 --> 00:05:00,700 That essentially is just going to store a list of all the different streams or channels that are available 82 00:05:00,700 --> 00:05:02,260 inside of application. 83 00:05:02,380 --> 00:05:08,470 So a user is essentially going to first inside the browser visit that server and see the list of streams 84 00:05:08,470 --> 00:05:09,690 that are available. 85 00:05:09,880 --> 00:05:14,310 Once they see an appropriate stream they can then select that stream and that will essentially make 86 00:05:14,310 --> 00:05:19,570 a request over to this Aarthi impedes server to get the live video feed and then show it on the screen 87 00:05:19,750 --> 00:05:21,560 to the user inside their browser. 88 00:05:21,850 --> 00:05:25,510 So in total we're really going to have three different moving pieces here. 89 00:05:25,540 --> 00:05:29,310 We're going to have our re-act application running inside the user's browser. 90 00:05:30,180 --> 00:05:35,520 We're going to have a tiny tiny API server that essentially lists out all these dreams or channels that 91 00:05:35,520 --> 00:05:36,580 a video can watch. 92 00:05:36,690 --> 00:05:40,770 And then finally we're going to have this RCMP server that is actually responsible for handling the 93 00:05:40,770 --> 00:05:42,290 video streams itself. 94 00:05:42,660 --> 00:05:48,630 Now the like I said the RCMP here really straightforward very simple to put together the API right here 95 00:05:48,630 --> 00:05:53,540 that's going to record what streams or channels exist even more straight forward. 96 00:05:53,550 --> 00:05:58,050 So these two API servers right here really simple very easy put together. 97 00:05:58,050 --> 00:06:02,580 Like I said our unending focus is going to be on the react in redux application. 98 00:06:02,640 --> 00:06:06,300 OK so now that we have a little bit better idea of what we're going to build Let's take a quick pause 99 00:06:06,300 --> 00:06:06,980 right here. 100 00:06:07,020 --> 00:06:10,830 We'll continue in the next step in the next video excuse me and we're going to start taking a look at 101 00:06:10,830 --> 00:06:14,700 a couple of mock ups that are going to tell you exactly what our application is going to look like and 102 00:06:14,700 --> 00:06:15,780 how it's going to work.