Video Streaming Using Flask and OpenCV
By: Anmol Behl
Tags: Machine Learning, Flask, Computer Vision, Opencv, Python

Stream video using OpenCV and Flask. (Image Source)

My name is Anmol Behl and I am a member of team Bits-N-Bytes.We are a group of three team members pursuing B.Tech in Computer Science and Engineering from KIET Group of Institutions,Ghaziabad.This article explains how to stream video using Flask and OpenCV taking face detection as an example.

Nowadays, machine learning is becoming a highly popular field. Due to the daily needs and rapid increase in development, there is a need for deploying machine learning models. But it is very difficult or impossible to deploy them on mobile devices. One option is to use machine learning mobile frameworks such as TensorFlow Lite to call pre-trained models.

Are there any easier options? Yes! With the 5G approaching, it will take only 0.01 seconds to upload a 100KB image at a speed of about 100Mbps, so we can deploy almost everything including face recognition as a service on the server-side. Considering an example of Face Detection this article will demonstrate how to stream video on Linux servers using Python Flask and OpenCV.

Let’s Begin…

STEP 1: Creating and activating Environment

We will create a virtual environment for the project.

The virtualenv package is required to create virtual environments. You can install it with pip:

$ pip install virtualenv

To create a virtual environment, you must specify a path. We are creating our environment’s local directory called ‘Videorecognition in the home folder, to create the folder type the following:

$ virtualenv Videorecognition

To activate the environment execute the following command:

$ source Videorecognition/bin/activate

STEP 2: Installing Flask and OpenCV

First, we need to refresh/upgrade the pre-installed packages/libraries with the apt-get package manager:

$ sudo apt-get upgrade

$ sudo apt-get upgrade

Now we will execute the following commands to install OpenCV and Flask:

$ sudo apt install python3-opencv

$ pip install Flask

STEP 3: Creating Project Structure

Now that all the pre-requisites are installed let’s set up our project:

├── VideoStreaming/

│ ├── camera.py

│ ├── main.py

│ ├── haarcascade_frontalface_alt2.xml

│ ├── templates/

│ │ ├── index.html

STEP 4: Detecting faces using OpenCV

Now as we have created our project structure we will detect face using OpenCV.We will use the most basic and easiest way to detect face i.e, by using Haarcascades.

#camera.py # import the necessary packages

import cv2 # defining face detector

face_cascade=cv2.CascadeClassifier("haarcascade_frontalface_alt2.xml")

ds_factor=0.6 class VideoCamera(object):

def __init__(self):

#capturing video

self.video = cv2.VideoCapture(0)



def __del__(self):

#releasing camera

self.video.release() def get_frame(self):

#extracting frames

ret, frame = self.video.read()

frame=cv2.resize(frame,None,fx=ds_factor,fy=ds_factor,

interpolation=cv2.INTER_AREA)

gray=cv2.cvtColor(image,cv2.COLOR_BGR2GRAY)

face_rects=face_cascade.detectMultiScale(gray,1.3,5)

for (x,y,w,h) in face_rects:

cv2.rectangle(frame,(x,y),(x+w,y+h),(0,255,0),2)

break # encode OpenCV raw frame to jpg and displaying it

ret, jpeg = cv2.imencode('.jpg', frame)

return jpeg.tobytes()

STEP 5: Creating a webpage for displaying video

Now as we will create a webpage to display our video.

<-- index.html -->

<html>

<head>

<title>Video Streaming Demonstration</title>

</head>

<body>

<h1>Video Streaming Demonstration</h1>

<img id="bg" src="{{ url_for('video_feed') }}">

</body>

</html>

STEP 6: Creating Streaming Server

Now as we have detected faces using haarcascade and created a webpage to display video, we will integrate these two modules with our server.

# main.py # import the necessary packages

from flask import Flask, render_template, Response

from camera import VideoCamera app = Flask(__name__)

def index():

# rendering webpage

return render_template('index.html') @app .route('/')def index():return render_template('index.html') def gen(camera):

while True:

#get camera frame

frame = camera.get_frame()

yield (b'--frame\r

'

b'Content-Type: image/jpeg\r

\r

' + frame + b'\r

\r

')

def video_feed():

return Response(gen(VideoCamera()),

mimetype='multipart/x-mixed-replace; boundary=frame') @app .route('/video_feed')def video_feed():return Response(gen(VideoCamera()),mimetype='multipart/x-mixed-replace; boundary=frame') if __name__ == '__main__':

# defining server ip address and port

app.run(host='0.0.0.0',port='5000', debug=True)

STEP 7: Starting and Accessing the Server

Open a terminal window in the project directory by executing the following commands:

$ cd Videorecognition

$ cd VideoStreaming

To start the server execute the following command:

python main.py

In order to access the server open browser and navigate to the Server URL:

Conclusion

I hope this tutorial can help others find their way of beginning with Flask and OpenCV!

For details and final code, please visit my GitHub depository: Video-Streaming-with-Flask

See you in my next tutorial!

Thank you,

Anmol