🛠️ Guide: Enabling USB Camera Support for WALL-E

 

This guide outlines the steps to replace the default PiCamera module with a USB Webcam using OpenCV in the WALL-E Flask web interface. ( by Gemini )

 

1. Prerequisites

 

First, install the OpenCV library for Python on your Raspberry Pi.

Bash

sudo apt update
sudo apt install python3-opencv

 

2. Modify Backend (app.py)

 

We need to update the Python Flask server to capture frames from the USB camera.

A. Import OpenCV and Response Add cv2 and Response to the imports at the top of the file.

Python

from flask import Flask, ..., Response  # Add Response
import cv2                              # Add cv2

B. Add Camera Class Insert the USBCameraStreamer class before the app = Flask(__name__) line.

Python

class USBCameraStreamer:
    def __init__(self):
        self.camera = cv2.VideoCapture(0) # 0 is usually the default USB camera
        self.is_running = False

    def start_stream(self):
        if not self.camera.isOpened():
            self.camera.open(0)
        self.is_running = True
        return True, "USB Camera Started"

    def stop_stream(self):
        self.is_running = False
        if self.camera.isOpened():
            self.camera.release()
        return True

    def is_stream_active(self):
        return self.is_running

    def get_frame(self):
        if self.is_running:
            success, frame = self.camera.read()
            if success:
                ret, buffer = cv2.imencode('.jpg', frame)
                return buffer.tobytes()
        return None

C. Initialize Camera Replace the existing PiCameraStreamer initialization with our new class (around line 34).

Python

# camera: PiCameraStreamer = PiCameraStreamer()  <-- Comment this out
camera = USBCameraStreamer()                     # <-- Add this

D. Add Video Route Add the generator function and route at the bottom of the file (before if __name__ == ...).

Python

def gen(camera):
    while True:
        frame = camera.get_frame()
        if frame is not None:
            yield (b'--frame\r\n'
                   b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')
        else:
             time.sleep(0.1)

@app.route('/video_feed')
def video_feed():
    return Response(gen(camera),
                    mimetype='multipart/x-mixed-replace; boundary=frame')

 

3. Modify Frontend (index.html)

 

Update the HTML to load the video from our new route.

• File: web_interface/templates/index.html

• Action: Find the <img> tag with id="stream" and change the src attribute.

HTML

<img id="stream" src="{{ url_for('static', filename='streamimage.jpg') }}">

<img id="stream" src="{{ url_for('video_feed') }}">

 

4. Update Logic (main.js)

 

Prevent the JavaScript from overwriting the camera URL with the old port 8080 address.

• File: web_interface/static/js/main.js

• Action: Search for $("#stream").attr("src", ...) and replace the URL in two places (inside sendSettings function and window.onload section).

JavaScript

// Replace this logic in both locations:
$("#stream").attr("src", "/video_feed");

 

5. Run

 

Restart the service to apply changes.

Bash

sudo systemd stop walle.service
python3 app.py

---

이 매뉴얼이 나중에 도움이 되길 바랍니다! 📝