Video Streaming in Web Browsers with OpenCV & Flask | by Nakul Lakhotia | Towards Data Science

You took the trouble of installing a webcam or a surveillance camera at your home, or office or any place that you own. Obviously, you would want to be able to watch the live stream of the video anyplace and anytime you like.
Most of the people use IP cameras (Internet Protocol cameras) instead of CCTV (Closed-Circuit Television) for surveillance purposes as they have a much higher resolution and reduced cost for cabling. You can find the detailed differences between both these systems here. In this article we will be focusing on IP cameras.
IP camera, is a type of digital video camera that receives control data and sends image data via an IP network and require no local recording device. Most IP cameras are RTSP (Real Time Streaming Protocol) based and is therefore “not supported” natively in internet browsers.
In this article we will learn how to do that using Computer Vision.
Computer Vision is an interdisciplinary field that deals with how computers can be made to gain a high-level understanding from digital images or videos.
For implementing the computer vision part we will use the OpenCV module in Python and to display the live stream in the web browser we will use the Flask web framework. Before diving into the coding part let us first know about these modules briefly. If you are already familiar with these modules, you can directly jump to the next section.
According to the Wikipedia, Flask is a micro web framework written in Python. It is classified as a microframework because it does not require particular tools or libraries. It has no database abstraction layer, form validation, or any other components where pre-existing third-party libraries provide common functions.
According to GeeksForGeeks, OpenCV is the huge open-source library for the computer vision, machine learning, and image processing and now it plays a major role in real-time operation which is very important in today’s systems.
You can use the ‘pip install flask’ and ‘pip install opencv-python’ command. I use the PyCharm IDE to develop flask applications. To easily install libraries in PyCharm follow these steps.
We will now import the necessary libraries and initialize our flask app.
#Import necessary librariesfrom flask import Flask, render_template, Responseimport cv2#Initialize the Flask appapp = Flask(__name__)
Create a VideoCapture() object to trigger the camera and read the first image/frame of the video. We can either provide the path of the video file or use numbers to specify the use of local webcam. To trigger the webcam we pass ‘0’ as the argument. To capture the live feed from an IP Camera we provide the RTSP link as the argument. To know the RTSP address for your IP Camera go through this — Finding RTSP addresses.
camera = cv2.VideoCapture(0)'''for ip camera use - rtsp://username:password@ip_address:554/user=username_password='password'_channel=channel_number_stream=0.sdp' for local webcam use cv2.VideoCapture(0)'''
The gen_frames() function enters a loop where it continuously returns frames from the camera as response chunks. The function asks the camera to provide a frame then it yields with this frame formatted as a response chunk with a content type of image/jpeg, as shown above. The code is shown below :
Routes refer to URL patterns of an app (such as myapp.com/home or myapp.com/about). @app.route("/") is a Python decorator that Flask provides to assign URLs in our app to functions easily.
@app.route('/')def index():    return render_template('index.html')
The decorator is telling our @app that whenever a user visits our app domain (localhost:5000 for local servers) at the given .route(), execute the index() function. Flask uses the Jinja template library to render templates. In our application, we will use templates to render HTML which will display in the browser.
@app.route('/video_feed')def video_feed():    return Response(gen_frames(), mimetype='multipart/x-mixed-replace; boundary=frame')
The ‘/video_feed’ route returns the streaming response. Because this stream returns the images that are to be displayed in the web page, the URL to this route is in the “src” attribute of the image tag (see ‘index.html’ below). The browser will automatically keep the image element updated by displaying the stream of JPEG images in it, since multipart responses are supported in most/all browsers
Let’s have a look at our index.html file :
<body><div class="container">    <div class="row">        <div class="col-lg-8  offset-lg-2">            <h3 class="mt-5">Live Streaming</h3>            <img src="{{ url_for('video_feed') }}" width="100%">        </div>    </div></div></body>
if __name__ == "__main__":    app.run(debug=True)
app.run() is called and the web-application is hosted locally on [localhost:5000].
“debug=True” makes sure that we don’t require to run our app every time we makes changes, we can simply refresh our web page to see the changes while the server is still running.
The project is saved in a folder called “Camera Detection”. We run the ‘app.py’ file. On running this file, our application is hosted in the local server at port 5000.
You can simply type “localhost:5000” on your web browser to open your web-application after running ‘app.py’
app.py — This is the Flask application we created above
templates — This folder contains our ‘index.html’ file. This is mandatory in Flask while rendering templates. All HTML files are placed under this folder.
Let’s see what happens when we run ‘app.py’ :
On clicking on the provided URL, our web browser opens up with the live feed. Since I used VideoCapture(0) above, the webcam feed is displayed on the browser:
And that’s it !!
You have the live video stream from your IP camera/webcam on your web browser which can be used for security and surveillance purposes.
Refer to my GitHub Code.
Note: All the resources that you will require to get started have been mentioned and their links provided in this article as well. I hope you make good use of it :)
I hope this article will get you interested in trying out new things in the Computer Vision domain and help you add to your knowledge. If you have enjoyed reading this article do share it with your friends and family. Thank you for your time.