Hello everyone! Today, we're going to learn how to stream video from a webcam using the Flask web framework. This is a fun and interactive project that will allow you to see live video from your webcam directly in your web browser. Let's get started!
What is Flask?
Flask is a web framework for Python that makes it easy to create web applications. It provides the tools you need to build web pages, handle user requests, and manage data. In this project, we'll use Flask to stream video from a webcam.
Setting Up Your Flask App
Before we start, let's set up a basic Flask app. Here's how you can do it:
Step 1: Install Flask and OpenCV
First, make sure you have Flask and OpenCV installed. You can do this by running the following commands in your terminal:
pip install flask
pip install opencv-pythonStep 2: Create a Flask App
Open your code editor and create a new file called app.py. Add the following code:
from flask import Flask, render_template, Response
import cv2
app = Flask(__name__)
camera = cv2.VideoCapture(0) # Use 0 for the default webcam
def generate_frames():
while True:
success, frame = camera.read()
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')
@app.route('/')
def index():
return render_template('index.html')
@app.route('/video')
def video():
return Response(generate_frames(), mimetype='multipart/x-mixed-replace; boundary=frame')
if __name__ == '__main__':
app.run(debug=True)Step 3: Run Your App
In your terminal, navigate to the folder where app.py is located and run:
python app.pyStep 4: Visit Your App
Open your web browser and go to http://127.0.0.1:5000/. You should see your webcam video streaming live!
Creating the HTML Template
To display the video stream, you'll need an HTML file. Here's how to create it:
Step 1: Create a Templates Folder
In the same directory as your app.py, create a folder named templates.
Step 2: Create an HTML File
Inside the templates folder, create a file named index.html. Add the following HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Live Streaming</title>
</head>
<body>
<h1>Live Streaming</h1>
<img src="{{ url_for('video') }}" width="640" height="480">
</body>
</html>Explanation: The <img> tag in the HTML file is used to display the video stream. The src attribute is set to the URL of the video stream, which is generated by the Flask app.
How It Works
Flask App: The Flask app captures video from the webcam using OpenCV. It reads frames from the webcam and encodes them as JPEG images.
Streaming: The generate_frames function continuously reads frames from the webcam and sends them to the browser as a stream of JPEG images.
HTML Template: The HTML file uses an <img> tag to display the video stream. The src attribute is set to the /video route, which streams the video frames.
Conclusion
Congratulations! You've learned how to stream video from a webcam using Flask and OpenCV. This project is a great way to explore the capabilities of Flask and OpenCV, and it can be extended to include features like face detection and recognition.
Stay tuned for more tutorials where we'll dive deeper into building interactive web applications with Flask. Happy coding!
Comments