Flask与JavaScript实现摄像头滤镜切换时请求冲突及参数混乱问题求助

你遇到的核心问题是每次点击按钮都会发起一个新的视频流请求，而旧的请求并没有被终止——这导致多个Capture_data生成器同时在后台运行，各自打印对应的filter参数，所以控制台会出现1和0交替的混乱输出。浏览器会默认保持这些长连接，直到客户端主动断开或者服务器终止它们。

下面是针对前端和后端的具体解决方案：

前端修改：终止旧请求再发起新请求 #

我们需要保存当前的AJAX请求对象，每次点击按钮时先终止之前的请求，确保只有一个视频流连接在运行：

$(function(){
  let currentVideoRequest = null; // 保存当前的视频流请求

  $(document).ready(function(){
    $("#filterOn").click(filterOn);
    $("#filterOff").click(filterOff);
  });

  function filterOn(){
    // 终止之前的请求（如果存在）
    if (currentVideoRequest) {
      currentVideoRequest.abort();
    }
    // 发起新的滤镜开启请求
    currentVideoRequest = $.get('/video_feed/1');
  }

  function filterOff(){
    if (currentVideoRequest) {
      currentVideoRequest.abort();
    }
    currentVideoRequest = $.get('/video_feed/0');
  }
});

后端优化：用全局状态控制滤镜（避免多线程冲突） #

你的后端代码每次请求都会启动一个新的Capture_data循环，这是导致多实例运行的根源。我们可以改用全局变量保存滤镜状态，并配合线程锁保证多线程环境下的安全：

from flask import Flask, Response
import cv2
from threading import Lock

app = Flask(__name__)
# 初始化摄像头（根据你的实际设备调整）
video_capture = cv2.VideoCapture(0)
# 全局滤镜状态：0=关闭，1=开启
current_filter_state = 0
# 线程锁，防止多线程同时修改状态导致的竞态条件
filter_lock = Lock()

def filtered_spectrum(image):
    # 这里是你的滤镜处理逻辑，示例为灰度化
    return cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)

def generate_video_stream():
    global current_filter_state
    while True:
        success, frame = video_capture.read()
        if not success:
            break
        
        # 安全读取当前滤镜状态
        with filter_lock:
            active_filter = current_filter_state
        
        print(active_filter)  # 现在会稳定输出当前状态
        
        # 应用滤镜（如果开启）
        if active_filter == 1:
            frame = filtered_spectrum(frame)
        
        # 编码为JPEG
        encode_param = [int(cv2.IMWRITE_JPEG_QUALITY), 90]
        ret, jpeg_frame = cv2.imencode('.jpg', frame, encode_param)
        if not ret:
            continue
        
        # 生成视频流响应
        yield (b'--frame\r\n'
               b'Content-Type: image/jpeg\r\n\r\n' + jpeg_frame.tobytes() + b'\r\n\r\n')

# 修正路由的斜杠（之前的路由缺少开头的/，会导致404）
@app.route('/video_feed')
@app.route('/video_feed/<int:toggle>')
def video_feed(toggle=None):
    global current_filter_state
    # 如果传入了toggle参数，更新全局滤镜状态
    if toggle is not None:
        with filter_lock:
            current_filter_state = toggle
    # 始终返回同一个视频流生成器，避免多循环并发
    return Response(generate_video_stream(), mimetype='multipart/x-mixed-replace; boundary=frame')

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

关键原理说明 #

1. 前端层面：通过abort()终止旧的XHR请求，浏览器会断开与旧视频流的连接，后端对应的generate_video_stream循环会因为客户端断开而抛出异常并终止，从而避免多个循环同时运行。
2. 后端层面：改用全局状态控制滤镜，所有请求共享同一个视频流生成逻辑，不管点击多少次按钮，只有一个循环在读取摄像头并生成帧，打印的参数始终是当前的全局状态，不会出现混乱。

另外需要注意：Flask默认是多线程模式，所以必须用Lock来保证全局变量的线程安全，防止多个请求同时修改current_filter_state导致的状态不一致。

内容的提问来源于stack exchange，提问作者Andres V