How to Display Video Streaming From A Webcam Using Flask

Original Source Here


Importing libraries

The first thing that we have to do is to import libraries. In this case, we will import the Flask library for implementing our web application. Also, we import the OpenCV library for implementing our computer vision solution.

From Flask, we will import the Flask for generating the web app. Also, we will import the Response object for receiving images from the webcam. Here is the code for doing that:

Initializing objects

After we import the library, the next step is to initialize several objects.

  • The first one is the Flask object.
    As I’ve mentioned before, the Flask object will initialize things that we need for building a web app, so we can focus on building our solution.
  • The second is the VideoCapture object from the OpenCV library.
    This object will catch outputs, where the web camera is the source. We will set a parameter ‘0’ for taking images from the web camera.
  • The last one is the CascadeClassifier from the OpenCV library.
    This object will initialize a face detection model, where the model is based on combinations of AdaBoost and Cascade Classifier. This model is already trained with lots of images that are represented as a feature called Haar. I don’t explain this classifier further, but one day I will explain to you, Insha Allah.

In this article, we will not train our model from scratch. We will use the pre-trained model from OpenCV, which you can download here.

Here is the code for initializing the objects:

Implementing the face detection

After you initialize the object, the next step is to implement a function for our face detection. Here are the steps that our function will do:

  • This function below will take an input, which in this case, from the webcam, that is processed per frame.
  • On each frame, the function will detect the face from it and set a bounding box that is surrounding our face.
  • After the function detects the face, the function generates an image with the .jpeg format and converts it into bytes.
  • These bytes from the image will be attached to an HTTP response.
  • Because we send the image more than once, we will use the yield keyword rather than the return keyword. The reason is that the yield keyword returns a generator that always generates values, as long there is no threshold to it.

Here is the code for the implementation:

Display the image on the web

After we create our face detection function, the next step is to build a function for displaying our face detection results on the website. In the function below, you can see that there is something called app.route above our function’s name.

This app.route is used as an identifier, so we can access our images easier. For example, we have a website called We set a parameter on our app.route parameter with /video_feed. For accessing our webcam result, we can access it by using this link:

Inside the function, we will return the Response object that contains the image that is generated by the gen function, and it takes input from a global variable called video.

The reason for using the global keyword is to emphasize that we don’t declare a video variable inside the function. And also, we need to use it to distinguish it from any variables on a function.

Here is the code for displaying our face detection result:

Lastly, initialize the for running our flask app. Here is the code for doing that:

Run the code

Alright, now we have implemented the code. Now let’s run it on our computer. To run the code, you can use the ‘python’ or the ‘flask run’ command like this one below:

flask run

If it succeeds, our terminal will display this:

The screenshot is captured by the author.

Here is the preview on the website:

The GIF is captured by the author.

It works! Well done.

Final Remarks

Well done! We have implemented a code for displaying face detection streaming from our webcam using Flask and OpenCV in Python. I hope it helps you to implement your computer vision project, especially on a web app.

If you are interested in my article, you can follow me on Medium. If you have any questions or want to say hi, you can connect with me on LinkedIn.

Thank you for reading my article!

In case that you have an error from the code snippet, you can check the complete code here:


Trending AI/ML Article Identified & Digested via Granola by Ramsey Elbasheer; a Machine-Driven RSS Bot

%d bloggers like this: