1 00:00:00,520 --> 00:00:07,280 So for the video calling features, we'll be using a production grade platform called Jetstream. 2 00:00:07,560 --> 00:00:13,680 You can find the link in the description because we'll go ahead and sign up to create an application. 3 00:00:14,080 --> 00:00:21,560 So they will provide us all the APIs and SDKs that we would need to build the video calling applications. 4 00:00:21,800 --> 00:00:25,840 And on top of it you can build a chat applications and feeds. 5 00:00:26,040 --> 00:00:29,720 But in this video we'll be using the video calling SDK. 6 00:00:30,240 --> 00:00:38,320 And they will give you $100 worth of free credit each month so you can build anything without paying 7 00:00:38,320 --> 00:00:38,960 anything. 8 00:00:39,320 --> 00:00:46,720 And when you take a look at the customers they have, such as Adobe, you can tell this is a great product 9 00:00:46,720 --> 00:00:51,120 in the first place with a great uptime SLA, right? 10 00:00:51,160 --> 00:00:54,040 So let's go ahead and try to create an account. 11 00:00:54,960 --> 00:00:58,640 So I'll just actually try to sign up from scratch with this account. 12 00:01:03,240 --> 00:01:03,600 Okay. 13 00:01:03,600 --> 00:01:06,790 So we'll just go ahead and complete the sign up. 14 00:01:06,790 --> 00:01:14,070 So our role let's say engineering industry should be not gaming but let's just say education. 15 00:01:14,070 --> 00:01:16,310 You can go with a different thing. 16 00:01:16,750 --> 00:01:23,870 Um, I think yeah we can go with the education because we are trying to build a platform for the interviews. 17 00:01:23,870 --> 00:01:26,110 You can go with the live events as well. 18 00:01:27,190 --> 00:01:31,910 So how many monthly active users will have probably less than 50 K. 19 00:01:31,950 --> 00:01:32,470 Right. 20 00:01:32,510 --> 00:01:37,230 And technology let's say web okay. 21 00:01:37,270 --> 00:01:40,990 We'll just say video and audio and complete the sign up. 22 00:01:44,710 --> 00:01:45,070 Okay. 23 00:01:45,110 --> 00:01:47,190 So let's try to create an organization. 24 00:01:47,190 --> 00:01:49,110 I'll just give my name. 25 00:01:49,710 --> 00:01:49,910 Right. 26 00:01:49,950 --> 00:01:51,230 You can put anything. 27 00:01:51,910 --> 00:01:53,710 Let's put an email address. 28 00:01:53,710 --> 00:01:58,390 Maybe we don't really need to let's say submit okay. 29 00:01:58,430 --> 00:01:59,070 There we go. 30 00:01:59,110 --> 00:01:59,870 We are in. 31 00:02:00,110 --> 00:02:02,310 Let's try to create an application. 32 00:02:02,310 --> 00:02:06,390 I believe this is the very first one, but I would like to create a new one. 33 00:02:06,390 --> 00:02:08,790 Let's just say code sync. 34 00:02:10,540 --> 00:02:14,620 for the server location, choose the one that is closest to you. 35 00:02:14,620 --> 00:02:20,540 In this case, I'll select this one and we'll be in the development for now. 36 00:02:21,220 --> 00:02:21,500 Okay. 37 00:02:21,500 --> 00:02:23,260 Let's say create application. 38 00:02:23,420 --> 00:02:26,060 It says app with this name already exists. 39 00:02:26,060 --> 00:02:28,740 So let's say code sync YouTube. 40 00:02:32,180 --> 00:02:32,660 Okay. 41 00:02:32,820 --> 00:02:36,060 Now we got the API key as well as the secret. 42 00:02:36,260 --> 00:02:42,660 I'll go ahead and copy this and put it into the dot env dot local file. 43 00:02:42,820 --> 00:02:45,540 So let's say next public. 44 00:02:48,060 --> 00:02:51,340 Stream API key. 45 00:02:52,060 --> 00:02:52,900 Paste this in. 46 00:02:52,940 --> 00:02:56,020 Then we'll have stream secret key. 47 00:02:56,420 --> 00:03:01,100 Now you might be asking why did you put next public in front of this. 48 00:03:01,100 --> 00:03:03,860 And you didn't put next public in front of this one. 49 00:03:04,100 --> 00:03:06,540 It's because we'll be using this in the client. 50 00:03:06,540 --> 00:03:09,580 So it should be prefixed with next public. 51 00:03:09,580 --> 00:03:11,380 And we'll be using this on the server. 52 00:03:11,700 --> 00:03:14,760 So it should be kept in the server, right? 53 00:03:14,800 --> 00:03:16,920 This should not be exposed to the client. 54 00:03:16,960 --> 00:03:18,800 This is a secret as you can tell. 55 00:03:19,280 --> 00:03:23,040 So we are going to go ahead and copy this and paste this in. 56 00:03:23,840 --> 00:03:24,400 There we go. 57 00:03:24,440 --> 00:03:25,800 I got my secret key. 58 00:03:26,040 --> 00:03:26,960 So let's save. 59 00:03:27,000 --> 00:03:29,880 This is going to be it for the environment variables. 60 00:03:30,040 --> 00:03:36,440 Later in the video we'll be using them to be able to have the video audio calling features. 61 00:03:36,640 --> 00:03:39,760 So you can go ahead visit the overview. 62 00:03:39,960 --> 00:03:43,880 Currently we don't really have any calls any live streams. 63 00:03:44,080 --> 00:03:47,960 But once we implement that we can see everything in the dashboard. 64 00:03:48,480 --> 00:03:55,000 Okay, I'll just leave it as it is here where we just set it up the environment variables for the stream 65 00:03:55,000 --> 00:03:57,800 and we can import our SDKs as well. 66 00:03:58,160 --> 00:04:00,040 So I will open up my terminal. 67 00:04:00,360 --> 00:04:03,200 Let me go ahead and actually create a new one. 68 00:04:03,200 --> 00:04:11,880 Shrink the left hand side and I will say npm install and paste this in which is ad stream IO slash video 69 00:04:12,240 --> 00:04:13,880 react dash SDK. 70 00:04:14,320 --> 00:04:15,840 Let's go ahead and install it. 71 00:04:16,120 --> 00:04:18,950 And you can find this from the documentation as well. 72 00:04:20,190 --> 00:04:23,750 So if you're wondering how did I get this, let's say video. 73 00:04:24,070 --> 00:04:32,630 And from the docs in the react quick start, let's say video and audio calling tutorial. 74 00:04:34,110 --> 00:04:36,790 There is even a video tutorial here. 75 00:04:36,790 --> 00:04:41,790 But you're watching this, so probably you're going to learn it from this video. 76 00:04:41,790 --> 00:04:42,670 But there we go. 77 00:04:42,710 --> 00:04:45,350 This is how we can get this package. 78 00:04:45,590 --> 00:04:49,070 And we'll be using another package for the server. 79 00:04:49,270 --> 00:04:51,390 As you can tell this is for the client right. 80 00:04:51,430 --> 00:04:53,030 It is called as react. 81 00:04:53,510 --> 00:05:02,150 So let's go ahead and get the one for the back end which is going to be stream dash IO slash node SDK. 82 00:05:05,990 --> 00:05:10,830 So we'll be using this package to be able to create tokens on the server side. 83 00:05:12,150 --> 00:05:12,630 Okay. 84 00:05:12,830 --> 00:05:18,110 So with this we have just set it up everything that we would need for the stream that we'll be using 85 00:05:18,110 --> 00:05:19,150 later in the video. 86 00:05:19,350 --> 00:05:21,550 So with that I'll see you in the next section.