Flask口罩检测网页点击按钮无法切换静态图为摄像头视频流

核心问题点 #

• 前端使用jQuery语法操作DOM，但未引入jQuery依赖，点击按钮时绑定的start()/stop()函数直接报错，无法执行图片地址替换逻辑
• 后端App.py存在严重Python缩进错误，路由和帧生成逻辑无法正常执行，访问/video地址会直接报500/语法错误
• 摄像头读帧逻辑无容错处理，设备占用/权限不足时直接崩溃断流
• HTML页面未补全闭合标签，存在渲染异常风险

修复后代码 #

1. 前端页面代码（templates/FaceMaskDetection_HomePage.html） #

注意：代码中使用了jQuery选择器语法，需先引入jQuery库再执行自定义脚本，否则浏览器控制台会抛出$ is not defined错误。

<html>
<head>
    <link rel="stylesheet" type="text/css" href="/static/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- 必须引入jQuery，否则$语法无法使用 -->
    <script src="https://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script>
    <script>
        function stop(){
            $("#ciao").attr("src", "/static/1.png");
            $("#stop").attr("class","btn btn-danger active");
            $("#start").attr("class","btn btn-outline-success");
        }
        function start(){
            // 拼接时间戳避免浏览器缓存旧资源
            $("#ciao").attr("src", "{{url_for('video')}}?" + new Date().getTime());
            $("#start").attr("class","btn btn-success active");
            $("#stop").attr("class","btn btn-outline-danger");
        }
    </script>
</head>
<body>
    <div>
        <button id="start" onclick="start()" class="btn btn-outline-success"><i class="fa fa-video-camera"></i> start</button>
        <button id="stop" onclick="stop()" class="btn btn-danger active"><i class="fa fa-stop"></i> Stop</button> 
    </div>
    <img id="ciao" class="image1" src="/static/1.png">
</body>
</html>

2. 后端入口代码（App.py） #

Python为缩进敏感语言，需严格保持代码块层级一致：

from flask import Flask, render_template, Response
from cameraDetection import Video
app = Flask(__name__)
output=[]

@app.route('/')
@app.route('/FaceMaskDetection_HomePage')
def homepage():
    return render_template("FaceMaskDetection_HomePage.html", result = output)

def gen(camera):
    while True:
        frame = camera.get_frame()
        # 读帧失败直接退出循环，避免空帧导致流异常
        if not frame:
            break
        yield(b'--frame\r\n'
        b'Content-Type: image/jpeg\r\n\r\n' + frame +
        b'\r\n\r\n')

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

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

3. 摄像头捕获模块代码（cameraDetection.py） #

增加设备打开状态、读帧状态判断，避免无意义报错：

import cv2

class Video(object):
    def __init__(self):
        self.video = cv2.VideoCapture(0)
        # 初始化时检测摄像头是否可正常打开
        if not self.video.isOpened():
            raise RuntimeError("摄像头打开失败，请检查设备权限、是否被其他程序占用")
    
    def __del__(self):
        self.video.release()
    
    def get_frame(self):
        ret, frame = self.video.read()
        # 读帧失败返回空，由上层逻辑处理断流
        if not ret:
            return None
        ret, jpg = cv2.imencode('.jpg', frame)
        return jpg.tobytes()

验证步骤 #

• 提前安装依赖：执行pip install flask opencv-python确认环境完整
• 运行App.py，在浏览器访问http://127.0.0.1:5000
• 首次点击启动按钮时，浏览器会弹出摄像头权限申请，选择允许即可看到实时检测画面
• 若仍有异常，按F12打开浏览器控制台，查看Console、Network标签下的报错信息定位问题

内容的提问来源于stack exchange，提问作者Yi ting Chieng