Click on " Xiaobai Learn Vision " above , choose to add " star " or " top "
Heavy dry goods, delivered immediately
Many small partners will not install webcams or surveillance cameras in their homes or offices. But sometimes, people want to be able to watch live video anytime, anywhere.
Most people will choose to use IP cameras (Internet Protocol Cameras) instead of CCTV (Closed Circuit Television) because they have higher resolution and reduce cabling costs. In this article, we will focus on IP cameras. An IP camera is a digital camera that can receive control data and send image data through an IP network , and does not require local recording equipment. Most IP cameras are based on RTSP (Real Time Streaming Protocol), so the Internet browser itself " does not support" it .
01. How to use a web browser to view live streaming media
Computer vision is an interdisciplinary field that involves how to make computers to gain high-level understanding from digital images or videos. In order to implement the computer vision part, we will use the OpenCV module in Python and display the real-time stream in a web browser, we will use the Flask web framework. Before entering the coding part, let us first briefly understand these modules. If you are already familiar with these modules, you can skip directly to the next section.
According to Wikipedia, Flask is a micro web framework written in Python. It is classified as a microframework because it does not require specific tools or libraries. It has no database abstraction layer, form validation or any other existing third-party library components that provide common functions.
According to GeeksForGeeks, OpenCV is a huge open source code library for computer vision, machine learning and image processing, and now it plays an important role in real-time operations, which is very important in today's systems.
02. Operation steps
Step 1-Install Flask and OpenCV:
You can use the " pip install flask" and" pip install opencv-python "commands. I use PyCharm IDE to develop flask applications.
Step 2-Import the necessary libraries and initialize the flask application:
Now, we will import the necessary libraries and initialize our flask application.
#Import necessary libraries
from flask import Flask, render_template, Response
import cv2
#Initialize the Flask app
app = Flask(__name__)
Step 3-Use OpenCV to capture video:
Create a VideoCapture() object to trigger the camera and read the first image/frame of the video. We can provide the path of the video file, or use numbers to specify the use of the local webcam. To trigger the webcam, we pass "0" as a parameter. In order to capture real-time source from IP camera, we provide RTSP link as a parameter.
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)
'''
Step 4-Add windows and generate frames from the camera:
The gen_frames() function enters a loop in which it continuously returns frames from the camera as response blocks. This function requires the camera to provide a frame, then formats it into a response block of content type, and makes it yield image/jpeg, as shown above. The code is as follows:
def gen_frames():
while True:
success, frame = camera.read() # read the camera frame
if not success:
break
else:
ret, buffer = cv2.imencode('.jpg', frame)
frame = buffer.tobytes()
yield (b'--frame\r\n'
b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n') # concat frame one by one and show result
Step 5 -Define the application route for the default page of the web application :
Routing refers to the URL pattern of the application (for example, myapp.com/home or myapp.com/about). @app.route("/") is a Python decorator provided by Flask, which is used to assign URLs in our applications for easy operation.
@app.route('/')
def index():
return render_template('index.html')
The decorator tells us @app that as long as the user visits the given application domain ( localhost:5000 on the local server) .route(), the index() function will be executed. Flask uses Jinja template library to render templates. In our application, we will use templates to render HTML, which will be displayed in the browser.
Step 6 -Define the application route of the video feed:
@app.route('/video_feed')
def video_feed():
return Response(gen_frames(), mimetype='multipart/x-mixed-replace; boundary=frame')
The "/video_feed" route returns a streaming response. Since this stream returns the image to be displayed in the web page, the routed URL is in the "src" attribute of the image tag (see "index.html" below). The browser will automatically update the image elements by displaying the JPEG image stream in it, because most/all browsers support multi-part responses
Let's take 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>
Step 7-Start the Flask server :
if __name__ == "__main__":
app.run(debug=True)
Call app.run() and host the web application locally on [localhost:5000] .
"Debug = True" ensures that we don’t need to run the application every time we make a change, just refresh the web page while the server is still running to see the changes.
Project structure:
The project is saved in a folder named "Camera Detection". We run the "app.py" file. After running this file, our application will be hosted on port 5000 of the local server.
Just type "localhost:5000" in the web browser after running "app.py" to open your web application
app.py-this is the Flask application we created above
Templates-this folder contains our "index.html" file. This is necessary in Flask when rendering the template. All HTML files are placed in this folder.
Let's see what happens when we run'app.py':
When clicking on the provided URL, our web browser will open a live feed. Since I used VideoCapture(0) above , the webcam summary will be displayed in the browser:
There are real-time video streams from IP cameras/network cameras, which can be used for security and surveillance purposes.
Code link: https://github.com/NakulLakhotia/Live-Streaming-using-OpenCV-Flask
Exchange group
Welcome to join the public account reader group to communicate with peers. There are currently WeChat groups such as SLAM, 3D vision, sensors, autonomous driving, computational photography, detection, segmentation, recognition, medical imaging, GAN, algorithm competitions (will be gradually subdivided in the future) Please scan the following WeChat account to add groups, remarks: "nickname + school/company + research direction", for example: "Zhang San + Shanghai Jiaotong University + Visual SLAM". Please follow the format remarks, otherwise it will not be approved. After successful addition, you will be invited to enter the relevant WeChat group according to the research direction. Please do not send advertisements in the group, otherwise you will be asked to leave the group, thank you for your understanding~