Flask Camera StreamThis guide demonstrates how to create a Python program using the Flask framework to build a web service. This service allows you to remotely view video from a USB camera connected to a single-board computer (SBC) via a web browser on a phone or computer. Through this experiment, you will gain a basic understanding of Flask and its application.

Building upon previous experiments with OpenCV for viewing USB camera video on an SBC, we now leverage Flask to establish a web service for remote monitoring.

Experiment Objectives

1. Understand the basic concepts and usage of the Flask library.
2. Explore Flask's graphical programming mode.
3. Explore Flask's code programming mode.

Required Resources

Hardware:

• Computer
• USB Camera
• Single-Board Computer (e.g., Xing Kong Board)
• Data cable (Type-C)

The experiment uses a Windows 7 desktop, a V0.3.5 version SBC, and a Type-C data cable.

Software:

• Mind+ software enstalled on the computer (Version V1.8.0 RC3.1 used in this experiment).
• Python environment with Flask and OpenCV libraries (provided by Mind+).

Understanding Flask

Flask is a lightweight Python web framework that provides the essential tools for building web applications. It is designed to be simple and easily extensible. Key characteristics include:

• Lightweight Framework: Flask is simple and easy to understand, making it suitable for rapid development of small to medium-sized web applications.
• Based on Werkzeug and Jinja2: Werkzeug handles low-level HTTP requests and responses, while Jinja2 is used for generating HTML pages.
• Routing: Uses decorators (@app.route) to map URLs to corresponding handler functions, simplifying HTTP request processing.
• Template Engine: Utilizes the Jinja2 template engine to render dynamic content, allowing Python code embeddding in HTML and supporting template inheritance and variable substitution.
• Request and Response Handling: Provides a concise API to access request data (like form data), set response content and status codes, and handle file uploads.
• Extensibility: Flask supports numerous extensions for functionalities like form handling, authentication, and database integration.

Basic Flask Usage

Here are the fundamental steps to use Flask:

4.1 Install Flask:

First, install Flask in your Python environment using pip:

pip install Flask

4.2 Create a Flask Application Instance:

In your Python script, import the Flask class and create an instance:

from flask import Flask
app = Flask(__name__)

4.3 Define Routes and View Functions:

Routes map URLs to Python functions. Use the @app.route() decorator to define a route and write the view function to handle the request.

@app.route('/')
def hello_world():
    return 'Hello, World!'

4.4 Run the Flask Application:

At the end of your program, call app.run() to start the Flask development server. By default, it listens on port 5000. Setting debug=True enables debugging mode.

if __name__ == '__main__':
    app.run(debug=True)

4.5 Using Templates (Optional):

Flask supports the Jinja2 template engine. You can create HTML template files, and Flask renders them to generate dynamic content.

• Create a folder named templates in your project directory.
• Write template files (e.g., index.html) in this folder.
• Use the render_template() function in your view function to render the template.

4.6 Access the Application:

Access localhost:5000 (default port) in your browser to see the "Hello, World!" page.

Graphical (Module) Programming for Remote Camera Viewing

Connect the USB camera to the SBC, then connect the SBC to your computer via the data cable. Open the Mind+ software and select Python mode.

5.1 Create a New Project in Python Mode, selecting "Module" mode.

5.2 Add the "SBC" library from the official extensions.

5.3 Add the Flask library from the user extensions.

If Flask is not visible, search for "ext" to add it.

5.4 Connect to the remote terminal after adding the libraries.

5.5 Add Flask modules to the Python main program in the specified order.

For demonstration, the program automatically generates an HTML file on each run. In practice, the web page should be edited separately, with Flask only adding data to the template. The empty route tag means accessing the root directory (e.g., http://localhost:5000/). If a tag is added, it must be appended to the URL (e.g., /video_feed for the camera feed).

5.6 Click "Run" to upload the program to the SBC.

Monitor the "Terminal Information Output Area" for upload and execution status. Once the Flask service starts, devices on the same network can access it via a browser. Mapping the service to a public IP would theoretically allow internet-wide access for remote monitoring.

The example shows a computer accessing http://10.1.2.3:8000/. The URL can be the SBC's assigned address, which varies by network. If other addresses fail, check your network configuration. The image below shows how to find the SBC's IP address:

For demonstration, a phone can access the stream by connecting directly to the SBC's hotspot and navigating to 192.168.123.1:8000.

Users may notice the video is inverted or that the web page lacks flexibility. These limitations are inherent to graphical programming due to encapsulated modules. The following section demonstrates achieving the same functionality with code mode, offering greater flexibility at the cost of a steeper learning curve.

Code Mode Programming for Remote Camera Viewing

6.1 Create a New Project in Python Mode, selecting "Code" mode.

6.2 In the "File System", create a templates folder (for HTML templates) and an index.html file within it. Also, create an app.py file in the root directory.

6.3 Install the Flask library via "Library Management" in PIP mode.

Ensure the OpenCV library is also installed.

6.4 Open index.html and input the following code:

<!-- HTML5 Document Declaration -->
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Camera Stream</title> 
</head>
<body> 
    <h1>Camera Stream</h1> 
    <img src="{{ url_for('video_stream') }}" alt="Live Camera Feed"> 
</body>
</html>

6.5 Open app.py and input the following code:

import cv2  # Import OpenCV library
from flask import Flask, render_template, Response  # Import Flask modules

# Create a Flask application instance
web_app = Flask(__name__)

# Initialize camera capture object, 0 represents the default camera
camera = cv2.VideoCapture(0)
if not camera.isOpened():  # Check if camera opened successfully
    print("Camera failed to open. Please check the connection.")

def generate_frames():  # Define a function to generate video frames
    while camera.isOpened():  # Loop while camera is open
        ret, frame = camera.read()  # Read a frame from the camera
        if not ret:  # If frame read fails
            print('Failed to read frame from camera')
            break  # Exit loop
        else:  # If frame read is successful
            # Encode the frame as a JPEG image
            success, buffer = cv2.imencode('.jpg', frame)
            frame_bytes = buffer.tobytes()  # Convert encoded frame to bytes
            # Yield the frame as part of a multipart stream
            yield (b'--frame\r\n'
                   b'Content-Type: image/jpeg\r\n\r\n' + frame_bytes + b'\r\n')

# Define the root route
@app.route('/')
def show_index():
    return render_template('index.html')  # Render and return the index.html template

# Define the video stream route
@app.route('/video_stream')
def stream_video():
    return Response(generate_frames(), mimetype='multipart/x-mixed-replace; boundary=frame')  # Return the video stream

if __name__ == '__main__':  # Execute when script is run directly
    web_app.run(host='0.0.0.0', port=8000)  # Start the Flask app, listening on all network interfaces, port 8000

6.6 Connect the SBC and run the program.

The results are identical to the graphical mode, but without issues like inverted video, repeated HTML generation, or inflexible server parameters. This example illustrates how to quickly build a web server that responds to client requests and generates dynamic content. Flask is an excellent framework for developers entering web development or seeking lightweight solutions.