Streaming Video to a web-page using Open CV

Published on 03 Jul 2021. Written by Athulya Menon

Surveillance equipment helps prevent thefts and mishaps around the world on a large scale. Have you ever faced a situation wherein having a camera around would have made things easier? For example, if your car got stolen, and you had a camera in the walkway, you might have gotten a photo of the culprit, helping to solve the case. That is why having a camera around can be quite useful in several cases.

Read more..

Also, streaming video helps you keep track of what’s going around in your home or office when you aren’t there. It works as a sort of surveillance and is a great way to monitor things. In this OpenCV project, we will be taking a look at how to stream videos onto a web page directly.

Project Description

If you have ever tried live video streaming using OpenCV, then you already know that there are a lot of different options available. Users can choose between using Raspberry Pi cameras or IP cameras. They can also rely on different programs or modules, such as Flask or even ImageZMQ. IP cameras tend to be more complicated when compared to Raspberry Pi cams, better known as Raspis as they do not allow

Real-time Streaming Protocol access. Several types of IP cameras are not compatible with the cv2.VideoCapture function, making their usage a tad bit difficult. Furthermore, they tend to be more expensive than Raspi and that is why for this OpenCV project, we are going to be using a Raspberry Pi camera. So, let’s get started with the basics.

In this project, we will use our basic knowledge of Flask, which is a micro web framework built for Python and integrated with the OpenCV framework to enable the streaming of videos onto a specified URL, which may then be viewed on a browser. We will make use of background subtraction techniques to build a motion detection algorithm which will help us switch the Raspberry Pi camera on and off whenever required. We will then utilize Flask to access the footage captured, process them and then stream the resulting video onto a web page.

Concepts Used

• Fundamentals of Programming
• Python Programming
• Fundamentals of OpenCV
• Basics of Flask
• Database Management
• Segmentation and Image Processing
• Motion Detection Algorithms
• Background Subtraction Techniques

Components Required

1. A device with a suitable OS installed, such as Windows/Linux or Mac
2. Adequate RAM
3. Adequate Disc-space on the hard disk
4. Python 2 or above installed
5. OpenCV library installed
6. Flask installed
7. Required extended libraries- NumPy and imutils

Project Implementation

• Flask and Django are the most popular Python web frameworks available. The first towards completing this project is successfully installing Flask on your device.
• Use $ pip install flask to install the framework.
• Also, install the libraries NumPy and imutils.
• Next, define a major class to perform the required background subtraction and motion detection, this class should be the one that does most of the image processing and is a major part of the project.
• The output frames from this function have to go through Flask and then on to our web browser.
• To allow the web browser to display the video, we have to use some basic HTML markup and then use Flask to send the stream to the browser for us.
• Now to build the motion detector algorithm we need to understand the concept of background subtraction.
• Background subtraction works by first calculating the weighted average of all the previous frames.
• It then subtracts that value from the current frame’s value.
• Thresholding allows you to differentiate between the outputs of the subtraction, so that you can make out between regions in the frames that have undergone substantial differences in pixel values, indicating motion or change.
• By utilising image processing techniques like erosion and dilation, we remove the background noise and create a softer and more even image.
• Next, we make use of contour detection to extract only the regions which have undergone a change.
• Now, import the motion detection function onto a new Python workstation.
• Use a VideoStream class to access the Raspberry Pi camera module you are using to record the images.
• Next, import the required Flask packages to create an index.html template, and also a threading library so that multiple browsers can utilise the same IP address.
• Now create a function to gather footage from the camera, pass it through the motion detection module, and then display the results.
• Finally, use app.route to establish a URL endpoint and serve footage to http://your_ip_address/video_feed.
• The output is then encoded as a byte array and displayed by the web browser as a live feed.
• You can also add a final code block to handle parsing and launching of the Flask app.

Kit required to develop Streaming Video to a web-page using Open CV:

• No kit required

Technologies you will learn by working on Streaming Video to a web-page using Open CV:

• Python
• Open CV

Any Questions?