1 00:00:01,490 --> 00:00:04,130 Hi, welcome to a very interesting video. 2 00:00:04,430 --> 00:00:13,190 In this video, you learn how to use Python to start the computer webcam and create a flask web app 3 00:00:13,550 --> 00:00:17,520 where you stream the video being captured from the webcam. 4 00:00:17,900 --> 00:00:24,860 And you learn how to capture the video from one device and watch it through the web app on another device 5 00:00:25,040 --> 00:00:26,750 within the same network. 6 00:00:29,880 --> 00:00:37,220 So this is the live video, and you can see the IP address, this is being captured in another computer, 7 00:00:37,230 --> 00:00:39,330 but I'm watching it on B. 8 00:00:39,390 --> 00:00:40,260 It's another computer. 9 00:00:43,010 --> 00:00:45,860 So we will build that app from scratch. 10 00:00:47,120 --> 00:00:51,590 I'm going to be using my charm on my local computer for this app. 11 00:00:52,280 --> 00:00:55,520 I cannot use the report because we have to access the computer. 12 00:00:55,520 --> 00:01:01,460 Webcam and rappel is just a Linux server without a graphical user interface. 13 00:01:01,460 --> 00:01:05,600 It doesn't give us access to the webcam over that server. 14 00:01:05,960 --> 00:01:11,810 So the computer where I'm coding will be the computer which have the webcam, and then you can access 15 00:01:11,810 --> 00:01:14,120 the web app from your mobile phone. 16 00:01:14,410 --> 00:01:20,720 And given that your mobile phone is connected to the same network, for example, to the same wireless 17 00:01:20,720 --> 00:01:27,680 network with your computer, there are also ways to make the webcam streaming IP public so everyone 18 00:01:27,680 --> 00:01:30,860 can access it from outside your network. 19 00:01:31,280 --> 00:01:35,120 But you have to do additional admin configurations for that. 20 00:01:35,420 --> 00:01:42,140 So we will not cover that part, just the part where you can access the web app from the same network. 21 00:01:42,680 --> 00:01:52,610 So I've opened a new folder on Point Sean and I will create an anti file here and name it. 22 00:01:52,790 --> 00:01:58,820 Maybe that's why the libraries we will be using here are to first. 23 00:01:59,060 --> 00:02:06,410 It's open c v to get the video from the webcam and then flask to build the web app and then send the 24 00:02:06,410 --> 00:02:12,950 streaming of Open C V to flask so that you can see the streaming on the web app on the browser. 25 00:02:13,550 --> 00:02:23,150 So first, we're going to build the open sea port, so I'm going to import CB2 and install V to first 26 00:02:23,780 --> 00:02:24,620 on my system. 27 00:02:24,620 --> 00:02:29,600 It's enough to see people install C v Dash Python. 28 00:02:31,700 --> 00:02:35,570 I'm using a virtual environment, so all I have to write is PIP. 29 00:02:35,780 --> 00:02:41,720 If you are not using a virtual environments, you know you might have to use PIP 3.10 or whatever Python 30 00:02:41,720 --> 00:02:42,770 version you're using. 31 00:02:45,850 --> 00:02:55,630 Once oversee is installed, I can go ahead and create a video variable, which is equal to that video 32 00:02:55,780 --> 00:03:01,030 capture video capture is the class that will star the video. 33 00:03:01,240 --> 00:03:08,950 Now here you have to input either a zero or a one, or maybe a two, but it's probably zero or one, 34 00:03:09,130 --> 00:03:12,460 depending on the configuration of your webcam on your laptop. 35 00:03:12,460 --> 00:03:15,040 So if it's a laptop, it's probably zero. 36 00:03:15,430 --> 00:03:17,710 If you have a second camera, it's probably one. 37 00:03:17,920 --> 00:03:21,910 But sometimes it could be one if all we have is just a laptop. 38 00:03:22,210 --> 00:03:30,490 So for me, it works with one, and then we'll be using a function, which is going to be something 39 00:03:30,490 --> 00:03:32,290 like get framed. 40 00:03:32,290 --> 00:03:38,170 This function is responsible for returning frames of the video. 41 00:03:38,170 --> 00:03:39,560 Actually, it's not a function. 42 00:03:39,580 --> 00:03:45,370 This is going to be a generator, but for generators, you also use the different keywords. 43 00:03:45,730 --> 00:03:53,240 And the difference is that with generators, you use a yield statement instead of a return statement. 44 00:03:53,260 --> 00:03:55,480 You'll see what exactly that is. 45 00:03:58,510 --> 00:04:08,890 So we're going to capture the first frame, which is equal to video, so that object that reads success 46 00:04:08,890 --> 00:04:16,990 will be true if the frame is captured successfully and frame will be the actual frame of the video because 47 00:04:16,990 --> 00:04:20,410 a video is made of different frames, different images. 48 00:04:20,950 --> 00:04:23,230 This is how open sea view works. 49 00:04:23,560 --> 00:04:30,190 So we're going to get each frame every immediately, seconds or so and then send it to flasks so that 50 00:04:30,190 --> 00:04:32,110 flask serves those frames. 51 00:04:32,530 --> 00:04:35,350 It's plays those frames on the web page. 52 00:04:36,780 --> 00:04:40,230 Once we have a frame, we want to encode that frame. 53 00:04:41,010 --> 00:04:48,630 Normally, if we just wanted to display aids on our computer, not on a web, we wouldn't have to encode 54 00:04:48,630 --> 00:04:48,840 it. 55 00:04:49,860 --> 00:04:56,130 But this is not the case here, so we can encode using Siri to encode. 56 00:04:56,940 --> 00:05:03,090 And we will work with JPG, so we will encoded in JPG format. 57 00:05:03,090 --> 00:05:11,490 So I'm going to pass you as a stream the jpg, then the frame object and the outputs of this expression 58 00:05:11,790 --> 00:05:13,170 will be stored in a variable. 59 00:05:13,620 --> 00:05:18,300 Let's see as see for success and. 60 00:05:20,230 --> 00:05:27,750 And encoded image, so we have two variables, because this returns actually a tipple, the first value 61 00:05:27,750 --> 00:05:29,880 of vegetable is either true or false. 62 00:05:30,120 --> 00:05:32,490 So that will be stored in this variable. 63 00:05:32,700 --> 00:05:35,040 We don't need that in our case. 64 00:05:35,040 --> 00:05:42,300 So what we need is the other item of vegetable which will be stored in this next in this second variable 65 00:05:42,540 --> 00:05:45,780 encode encoded image that is the actual encoded frame. 66 00:05:46,650 --> 00:05:48,000 And then we want to. 67 00:05:50,560 --> 00:05:52,660 Get that encoded image and. 68 00:05:54,230 --> 00:06:01,730 Converted to Boyd's using the two bites methods, so that objects we convert to Boyd's so frame now 69 00:06:02,090 --> 00:06:04,370 will override that variable. 70 00:06:05,720 --> 00:06:12,830 You can also use another variable, but this is fine, we don't need that first value, so that's fine. 71 00:06:14,510 --> 00:06:22,460 And finally, we will use the old keywords to return a byte object, which looks like this. 72 00:06:22,730 --> 00:06:26,930 And inside these quotes goes the header or the frame. 73 00:06:26,930 --> 00:06:32,150 So basically, we are constructing an image and images are made in voids. 74 00:06:32,930 --> 00:06:41,930 So this is the header of the image and it goes like this frame slash or slash and which will create 75 00:06:42,110 --> 00:06:43,760 basically a brake line. 76 00:06:44,420 --> 00:06:54,620 And then after the end, without a slash directly after the end, you should say content dash type column 77 00:06:54,740 --> 00:07:03,080 space, image, JPEG, slash or slash and invest the header. 78 00:07:03,380 --> 00:07:11,690 Now this will be concatenated with a frame that we created in here, so that frame contains the bytes. 79 00:07:11,930 --> 00:07:17,780 So we are concatenating this header, the bytes of this header to the frame. 80 00:07:17,780 --> 00:07:23,960 And then lastly, after the frame, after the actual dots on that to make of the image, we want to 81 00:07:23,960 --> 00:07:31,100 add another byte object, which is going to be just our and and so some break lines. 82 00:07:31,800 --> 00:07:32,960 Let's have a look. 83 00:07:34,120 --> 00:07:39,700 I hear we should have actually another hour and another and and that should do it. 84 00:07:40,030 --> 00:07:46,750 So that's our generator function, and that's all we have to do regarding the open sea port. 85 00:07:47,050 --> 00:07:50,170 Now start the flask port. 86 00:07:50,410 --> 00:07:52,360 So let's import flask. 87 00:07:54,150 --> 00:08:03,870 Or flat from flask import flask, glass and render template as well. 88 00:08:04,230 --> 00:08:07,890 And the respawns and I need to install flask 89 00:08:10,620 --> 00:08:12,210 with PIP Install Flask. 90 00:08:14,500 --> 00:08:21,310 Right then the first thing you do is you create a flask instance, which goes like this. 91 00:08:21,820 --> 00:08:23,860 So we have covered Flask already. 92 00:08:24,040 --> 00:08:30,940 So I'm not going to explain the details here in the course, you can find the lectures about creating 93 00:08:30,940 --> 00:08:31,990 a flask with that. 94 00:08:32,320 --> 00:08:34,600 And then we're going to handle two routes. 95 00:08:35,320 --> 00:08:39,940 So with a decorator over at Dot's routes. 96 00:08:42,730 --> 00:08:49,300 We handle the home page of the app, which is going to be served by this function. 97 00:08:49,540 --> 00:08:50,980 So define index. 98 00:08:52,230 --> 00:08:53,620 Or define home. 99 00:08:53,640 --> 00:08:55,800 Whatever you call that, it doesn't matter. 100 00:08:56,700 --> 00:09:00,010 This will return render template. 101 00:09:00,350 --> 00:09:08,340 Index dots H.M., which is going to be a file we have to create in the project directory. 102 00:09:09,180 --> 00:09:15,000 So this is a root directory of my projects where main point is and in the same directory, I want to 103 00:09:15,000 --> 00:09:18,960 create a new directory called templates. 104 00:09:18,990 --> 00:09:27,780 This has to be exactly templates with lowercase letters, not templates or other words, exactly templates 105 00:09:28,360 --> 00:09:29,040 inside that. 106 00:09:30,210 --> 00:09:31,140 We want to create. 107 00:09:32,270 --> 00:09:40,370 An index that HD and they'll file this file is going to contain the system of codes, which builds, 108 00:09:40,370 --> 00:09:47,330 which makes all the actual web page that I show you earlier where the camera was displaying and. 109 00:09:48,610 --> 00:09:56,410 You see, so we're going to have this text here and then the actual streaming part of the video now 110 00:09:56,410 --> 00:10:03,280 it's frozen because I've stopped the webapp, so I'm just going to paste some codes here so you can 111 00:10:03,280 --> 00:10:06,070 pose the video and cope with this codes. 112 00:10:06,880 --> 00:10:07,780 This is actually a male. 113 00:10:07,780 --> 00:10:10,330 It's not Python, so I'm not going to type that in. 114 00:10:11,590 --> 00:10:18,340 Basically, what we have is some female declarations here, but then we have had support. 115 00:10:19,450 --> 00:10:20,470 We have title. 116 00:10:20,680 --> 00:10:23,950 This is a title that will show in the tab. 117 00:10:23,950 --> 00:10:33,100 If there was a tap here and this other text then that you see in here is generated by this H1 tag life 118 00:10:33,100 --> 00:10:34,060 webcam streaming. 119 00:10:34,660 --> 00:10:36,540 So there's a body over the web page. 120 00:10:36,560 --> 00:10:44,230 This inside these body tags goes all the contents of the visible, the visible contents of the web page. 121 00:10:44,440 --> 00:10:47,200 In our case, we have this text and we have the video. 122 00:10:47,530 --> 00:10:50,410 So that is the H1 text. 123 00:10:50,920 --> 00:10:52,600 And then we have a video. 124 00:10:52,750 --> 00:10:59,090 Now the video is represents us through an image element, a female image. 125 00:10:59,110 --> 00:11:06,010 So you see, I am G, and the source of this image is equal to this quotes. 126 00:11:06,010 --> 00:11:10,900 And then we have this double curly brackets here and here. 127 00:11:11,560 --> 00:11:15,340 And these are ginger templates tags. 128 00:11:15,490 --> 00:11:17,910 So this is part of flask. 129 00:11:18,340 --> 00:11:24,190 Inside these, we say you are L4, so you are a underscore for. 130 00:11:24,610 --> 00:11:26,680 And so that is a function. 131 00:11:27,280 --> 00:11:29,830 Inside that function, we see video feeds. 132 00:11:30,010 --> 00:11:31,630 Now what is video feeds? 133 00:11:32,290 --> 00:11:37,240 Well, video feed is going to be another function. 134 00:11:37,660 --> 00:11:41,020 So this function serves the web page. 135 00:11:41,020 --> 00:11:46,960 When the user goes to the webpage, they enter the IP address and they see the webpage. 136 00:11:47,200 --> 00:11:53,620 But we need another function, which will handle the actual video streaming part. 137 00:11:54,310 --> 00:12:00,910 And this needs its own your URL, such as video feed slash URL. 138 00:12:00,910 --> 00:12:02,620 You can choose whatever you like here. 139 00:12:02,920 --> 00:12:10,090 But then the name of the function is going to be video feeds because it has to be the same name with 140 00:12:10,210 --> 00:12:12,040 this URL for it. 141 00:12:12,040 --> 00:12:20,430 So this image is going to display images that come from the video feed function. 142 00:12:21,610 --> 00:12:24,040 That one here, this one here. 143 00:12:25,360 --> 00:12:30,280 Now this function, what it does is it returns a response. 144 00:12:30,280 --> 00:12:33,340 Object's response is the class. 145 00:12:33,340 --> 00:12:38,230 We import it in here and response now expects. 146 00:12:39,490 --> 00:12:46,230 A generator, which is get frame, so you need to call that generator like that. 147 00:12:46,960 --> 00:12:49,120 That is the first argument. 148 00:12:50,680 --> 00:12:54,790 Then you also need to declare what type of dots are streaming. 149 00:12:55,120 --> 00:13:08,470 And that would be the string multipart slash x mixed dash replace semicolon boundary eagle to frame. 150 00:13:09,310 --> 00:13:09,880 And that's it. 151 00:13:10,780 --> 00:13:18,220 Make sure you have saved all your files unless your I.D. saves them automatically. 152 00:13:20,480 --> 00:13:28,690 And we're almost done here, expects we need to run the App Flask app to do that. 153 00:13:28,700 --> 00:13:32,240 We say if your name is equal to. 154 00:13:34,710 --> 00:13:38,070 Maine, then we say that's run. 155 00:13:39,730 --> 00:13:41,070 He calls it true. 156 00:13:41,790 --> 00:13:42,360 That's it. 157 00:13:43,580 --> 00:13:52,370 You could also avoid all that and just say Abdul to run, and it will work, but this is a good practice 158 00:13:52,670 --> 00:13:53,850 for running scopes. 159 00:13:54,680 --> 00:13:59,930 So now I'm ready to run this code and the codes I have to run is mean. 160 00:13:59,930 --> 00:14:00,610 That's P y. 161 00:14:00,620 --> 00:14:03,710 So that's the entry points of the flask app. 162 00:14:05,130 --> 00:14:07,380 So I'm going to run Maine, that's why. 163 00:14:10,530 --> 00:14:16,440 And you're going to see this on the command line unless you have some errors, which you need to figure 164 00:14:16,440 --> 00:14:18,000 out, what's the issue there? 165 00:14:18,480 --> 00:14:23,910 And you see this, you tell, that's now the URL of the web app. 166 00:14:24,720 --> 00:14:30,630 If you click that, normally we should see the video streaming. 167 00:14:30,840 --> 00:14:37,740 But this is just a static image, which I guess if I refresh it is going to show different images as 168 00:14:37,740 --> 00:14:40,380 I'm moving, so I'll lift my hands now. 169 00:14:40,470 --> 00:14:40,980 There you go. 170 00:14:41,370 --> 00:14:51,260 As I refresh the app, we can fix that by going to the gets frame function and implements a while through 171 00:14:51,470 --> 00:14:52,170 a loop. 172 00:14:53,730 --> 00:15:01,800 So all you have to say is watch through and then you get all that codes and indented under the hoop, 173 00:15:02,580 --> 00:15:03,960 then save the script. 174 00:15:05,380 --> 00:15:11,980 Flasks should get the changes automatically if you save that script, otherwise you have to go here, 175 00:15:12,370 --> 00:15:21,880 click the Control C to stop the app or Command C and then run the app again and then go again to the 176 00:15:21,880 --> 00:15:23,230 Webpage Reloaded. 177 00:15:23,620 --> 00:15:28,450 And now we're seeing a live video, so it seems to be working. 178 00:15:29,870 --> 00:15:37,130 However, we have an issue here, so now what I just did is I wrote the codes on one computer I run, 179 00:15:37,130 --> 00:15:38,630 it's in the same computer. 180 00:15:38,810 --> 00:15:40,250 And then I access it. 181 00:15:40,580 --> 00:15:42,950 I access the web from the same computer. 182 00:15:43,560 --> 00:15:51,950 Now, if you want to access the web app from another computer on the same network, then you need to 183 00:15:51,950 --> 00:15:56,450 go down here and copy that part. 184 00:15:57,020 --> 00:16:00,050 So duplicate, it's your common that out. 185 00:16:00,050 --> 00:16:09,830 And then here you see the horse is going to be the stream 0.0.0.0 ports is going to be five zero zero 186 00:16:09,830 --> 00:16:12,860 one, then you run the app again. 187 00:16:13,310 --> 00:16:21,560 You might have to stop it first by going here, control C or use the button and then run again. 188 00:16:24,230 --> 00:16:31,370 And then to be able to access the Web from another computer, you need to find the IP address of this 189 00:16:31,370 --> 00:16:40,490 computer where where your code is on Mac, you can find it by going to the Apple icon system preferences 190 00:16:41,360 --> 00:16:43,550 and then go to the network. 191 00:16:46,020 --> 00:16:49,650 And then down here, you will find your IP address. 192 00:16:52,060 --> 00:16:58,750 On Windows, to find the IP address on Windows, you have to open the command prompt. 193 00:17:02,930 --> 00:17:05,849 And then type in IPconfig. 194 00:17:08,510 --> 00:17:14,900 If I look for the line that says IP v4 address, so that is the IP address. 195 00:17:15,680 --> 00:17:24,050 So once you get to the IP address beat on Mac or Windows, then you should have another device connected 196 00:17:24,050 --> 00:17:28,359 to the same wireless network and go to the browser of the device. 197 00:17:28,369 --> 00:17:32,480 It could be another laptop, a tablet or a mobile phone. 198 00:17:33,050 --> 00:17:41,750 You should go to that browser and type in that IP address if that's a Windows or Mac, which you get 199 00:17:41,750 --> 00:17:42,290 it from there. 200 00:17:42,390 --> 00:17:45,860 As I showed you a then type in a column. 201 00:17:47,940 --> 00:17:55,130 So the IP address goes there or whatever it is, and then type in a column and five zero zero one, 202 00:17:55,140 --> 00:17:59,100 that is the port that we set in here. 203 00:18:00,060 --> 00:18:05,120 So press enter and that should normally show you the web. 204 00:18:06,870 --> 00:18:12,510 We have a live streaming from the webcam of the other computer connected to the same network. 205 00:18:13,710 --> 00:18:19,950 So I hope this works for you if you have a problem with the IP address. 206 00:18:20,520 --> 00:18:31,830 Try to Google how to access the internal IP of a device from another device and try different instructions 207 00:18:31,830 --> 00:18:37,470 on how to do that on your own environment because some environments may be different from each other. 208 00:18:40,810 --> 00:18:42,010 And that's the codes. 209 00:18:44,520 --> 00:18:48,730 The complete codes for this app, I hope you enjoyed it, and I'll talk to you later. 210 00:18:48,750 --> 00:18:49,140 Thank you.