Hi, welcome to a very interesting video.
In this video, you learn how to use Python to start the computer webcam and create a flask web app
where you stream the video being captured from the webcam.
And you learn how to capture the video from one device and watch it through the web app on another device
within the same network.
So this is the live video, and you can see the IP address, this is being captured in another computer,
but I'm watching it on B.
It's another computer.
So we will build that app from scratch.
I'm going to be using my charm on my local computer for this app.
I cannot use the report because we have to access the computer.
Webcam and rappel is just a Linux server without a graphical user interface.
It doesn't give us access to the webcam over that server.
So the computer where I'm coding will be the computer which have the webcam, and then you can access
the web app from your mobile phone.
And given that your mobile phone is connected to the same network, for example, to the same wireless
network with your computer, there are also ways to make the webcam streaming IP public so everyone
can access it from outside your network.
But you have to do additional admin configurations for that.
So we will not cover that part, just the part where you can access the web app from the same network.
So I've opened a new folder on Point Sean and I will create an anti file here and name it.
Maybe that's why the libraries we will be using here are to first.
It's open c v to get the video from the webcam and then flask to build the web app and then send the
streaming of Open C V to flask so that you can see the streaming on the web app on the browser.
So first, we're going to build the open sea port, so I'm going to import CB2 and install V to first
on my system.
It's enough to see people install C v Dash Python.
I'm using a virtual environment, so all I have to write is PIP.
If you are not using a virtual environments, you know you might have to use PIP 3.10 or whatever Python
version you're using.
Once oversee is installed, I can go ahead and create a video variable, which is equal to that video
capture video capture is the class that will star the video.
Now here you have to input either a zero or a one, or maybe a two, but it's probably zero or one,
depending on the configuration of your webcam on your laptop.
So if it's a laptop, it's probably zero.
If you have a second camera, it's probably one.
But sometimes it could be one if all we have is just a laptop.
So for me, it works with one, and then we'll be using a function, which is going to be something
like get framed.
This function is responsible for returning frames of the video.
Actually, it's not a function.
This is going to be a generator, but for generators, you also use the different keywords.
And the difference is that with generators, you use a yield statement instead of a return statement.
You'll see what exactly that is.
So we're going to capture the first frame, which is equal to video, so that object that reads success
will be true if the frame is captured successfully and frame will be the actual frame of the video because
a video is made of different frames, different images.
This is how open sea view works.
So we're going to get each frame every immediately, seconds or so and then send it to flasks so that
flask serves those frames.
It's plays those frames on the web page.
Once we have a frame, we want to encode that frame.
Normally, if we just wanted to display aids on our computer, not on a web, we wouldn't have to encode
it.
But this is not the case here, so we can encode using Siri to encode.
And we will work with JPG, so we will encoded in JPG format.
So I'm going to pass you as a stream the jpg, then the frame object and the outputs of this expression
will be stored in a variable.
Let's see as see for success and.
And encoded image, so we have two variables, because this returns actually a tipple, the first value
of vegetable is either true or false.
So that will be stored in this variable.
We don't need that in our case.
So what we need is the other item of vegetable which will be stored in this next in this second variable
encode encoded image that is the actual encoded frame.
And then we want to.
Get that encoded image and.
Converted to Boyd's using the two bites methods, so that objects we convert to Boyd's so frame now
will override that variable.
You can also use another variable, but this is fine, we don't need that first value, so that's fine.
And finally, we will use the old keywords to return a byte object, which looks like this.
And inside these quotes goes the header or the frame.
So basically, we are constructing an image and images are made in voids.
So this is the header of the image and it goes like this frame slash or slash and which will create
basically a brake line.
And then after the end, without a slash directly after the end, you should say content dash type column
space, image, JPEG, slash or slash and invest the header.
Now this will be concatenated with a frame that we created in here, so that frame contains the bytes.
So we are concatenating this header, the bytes of this header to the frame.
And then lastly, after the frame, after the actual dots on that to make of the image, we want to
add another byte object, which is going to be just our and and so some break lines.
Let's have a look.
I hear we should have actually another hour and another and and that should do it.
So that's our generator function, and that's all we have to do regarding the open sea port.
Now start the flask port.
So let's import flask.
Or flat from flask import flask, glass and render template as well.
And the respawns and I need to install flask
with PIP Install Flask.
Right then the first thing you do is you create a flask instance, which goes like this.
So we have covered Flask already.
So I'm not going to explain the details here in the course, you can find the lectures about creating
a flask with that.
And then we're going to handle two routes.
So with a decorator over at Dot's routes.
We handle the home page of the app, which is going to be served by this function.
So define index.
Or define home.
Whatever you call that, it doesn't matter.
This will return render template.
Index dots H.M., which is going to be a file we have to create in the project directory.
So this is a root directory of my projects where main point is and in the same directory, I want to
create a new directory called templates.
This has to be exactly templates with lowercase letters, not templates or other words, exactly templates
inside that.
We want to create.
An index that HD and they'll file this file is going to contain the system of codes, which builds,
which makes all the actual web page that I show you earlier where the camera was displaying and.
You see, so we're going to have this text here and then the actual streaming part of the video now
it's frozen because I've stopped the webapp, so I'm just going to paste some codes here so you can
pose the video and cope with this codes.
This is actually a male.
It's not Python, so I'm not going to type that in.
Basically, what we have is some female declarations here, but then we have had support.
We have title.
This is a title that will show in the tab.
If there was a tap here and this other text then that you see in here is generated by this H1 tag life
webcam streaming.
So there's a body over the web page.
This inside these body tags goes all the contents of the visible, the visible contents of the web page.
In our case, we have this text and we have the video.
So that is the H1 text.
And then we have a video.
Now the video is represents us through an image element, a female image.
So you see, I am G, and the source of this image is equal to this quotes.
And then we have this double curly brackets here and here.
And these are ginger templates tags.
So this is part of flask.
Inside these, we say you are L4, so you are a underscore for.
And so that is a function.
Inside that function, we see video feeds.
Now what is video feeds?
Well, video feed is going to be another function.
So this function serves the web page.
When the user goes to the webpage, they enter the IP address and they see the webpage.
But we need another function, which will handle the actual video streaming part.
And this needs its own your URL, such as video feed slash URL.
You can choose whatever you like here.
But then the name of the function is going to be video feeds because it has to be the same name with
this URL for it.
So this image is going to display images that come from the video feed function.
That one here, this one here.
Now this function, what it does is it returns a response.
Object's response is the class.
We import it in here and response now expects.
A generator, which is get frame, so you need to call that generator like that.
That is the first argument.
Then you also need to declare what type of dots are streaming.
And that would be the string multipart slash x mixed dash replace semicolon boundary eagle to frame.
And that's it.
Make sure you have saved all your files unless your I.D. saves them automatically.
And we're almost done here, expects we need to run the App Flask app to do that.
We say if your name is equal to.
Maine, then we say that's run.
He calls it true.
That's it.
You could also avoid all that and just say Abdul to run, and it will work, but this is a good practice
for running scopes.
So now I'm ready to run this code and the codes I have to run is mean.
That's P y.
So that's the entry points of the flask app.
So I'm going to run Maine, that's why.
And you're going to see this on the command line unless you have some errors, which you need to figure
out, what's the issue there?
And you see this, you tell, that's now the URL of the web app.
If you click that, normally we should see the video streaming.
But this is just a static image, which I guess if I refresh it is going to show different images as
I'm moving, so I'll lift my hands now.
There you go.
As I refresh the app, we can fix that by going to the gets frame function and implements a while through
a loop.
So all you have to say is watch through and then you get all that codes and indented under the hoop,
then save the script.
Flasks should get the changes automatically if you save that script, otherwise you have to go here,
click the Control C to stop the app or Command C and then run the app again and then go again to the
Webpage Reloaded.
And now we're seeing a live video, so it seems to be working.
However, we have an issue here, so now what I just did is I wrote the codes on one computer I run,
it's in the same computer.
And then I access it.
I access the web from the same computer.
Now, if you want to access the web app from another computer on the same network, then you need to
go down here and copy that part.
So duplicate, it's your common that out.
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
one, then you run the app again.
You might have to stop it first by going here, control C or use the button and then run again.
And then to be able to access the Web from another computer, you need to find the IP address of this
computer where where your code is on Mac, you can find it by going to the Apple icon system preferences
and then go to the network.
And then down here, you will find your IP address.
On Windows, to find the IP address on Windows, you have to open the command prompt.
And then type in IPconfig.
If I look for the line that says IP v4 address, so that is the IP address.
So once you get to the IP address beat on Mac or Windows, then you should have another device connected
to the same wireless network and go to the browser of the device.
It could be another laptop, a tablet or a mobile phone.
You should go to that browser and type in that IP address if that's a Windows or Mac, which you get
it from there.
As I showed you a then type in a column.
So the IP address goes there or whatever it is, and then type in a column and five zero zero one,
that is the port that we set in here.
So press enter and that should normally show you the web.
We have a live streaming from the webcam of the other computer connected to the same network.
So I hope this works for you if you have a problem with the IP address.
Try to Google how to access the internal IP of a device from another device and try different instructions
on how to do that on your own environment because some environments may be different from each other.
And that's the codes.
The complete codes for this app, I hope you enjoyed it, and I'll talk to you later.
Thank you.