如何在多页面间保持摄像头流活跃，避免每次跳转重新初始化？

核心思路是让后端维持摄像头的持久化捕获进程，前端页面跳转后仅重新连接到已在运行的流，避免每次加载页面都初始化摄像头。

后端实现（Flask） #

1. 用后台线程保持OpenCV摄像头实例持续运行，通过线程安全队列缓存帧数据：

from flask import Flask, Response
import cv2
import threading
from queue import Queue

app = Flask(__name__)

# 线程安全队列存储摄像头帧，限制容量避免溢出
frame_queue = Queue(maxsize=10)
camera_running = False

def capture_frames():
    global camera_running
    cap = cv2.VideoCapture(0)
    if not cap.isOpened():
        camera_running = False
        return
    camera_running = True
    while camera_running:
        ret, frame = cap.read()
        if not ret:
            break
        # 将帧转为JPEG格式存入队列
        ret, buffer = cv2.imencode('.jpg', frame)
        if frame_queue.full():
            frame_queue.get()  # 移除旧帧，保持队列最新
        frame_queue.put(buffer.tobytes())
        cv2.waitKey(1)  # 控制帧率
    cap.release()

# 首次请求前启动捕获线程（仅初始化一次）
@app.before_first_request
def start_capture():
    threading.Thread(target=capture_frames, daemon=True).start()

# 提供摄像头流接口
@app.route('/video_feed')
def video_feed():
    def generate():
        while True:
            frame = frame_queue.get()
            yield (b'--frame\r\n'
                   b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')
    return Response(generate(), mimetype='multipart/x-mixed-replace; boundary=frame')

2. 关键点：摄像头实例仅初始化一次，后台线程持续捕获帧，所有前端请求复用同一流源。

前端实现 #

每个页面的顶部嵌入同一流地址，页面跳转后新页面直接连接已运行的流：

<!-- 所有页面的顶部都添加这段代码 -->
<div class="camera-header">
    <img src="{{ url_for('video_feed') }}" alt="实时摄像头流">
</div>

• 优化：用sessionStorage记录摄像头启动状态，页面加载时直接渲染流，避免感知到连接延迟。

通过单页应用模式，页面切换时仅更新局部内容，摄像头流的DOM元素始终存在，不会被销毁导致流中断。

后端实现 #

与方案一的/video_feed接口完全一致，无需额外修改。

前端实现 #

用轻量路由库（如Page.js）实现无刷新页面切换，摄像头流放在固定布局区域：

<!DOCTYPE html>
<html>
<head>
    <title>SPA摄像头流</title>
    <script src="https://unpkg.com/page/page.js"></script>
    <style>
        .fixed-camera { position: fixed; top: 0; width: 100%; }
    </style>
</head>
<body>
    <!-- 固定顶部的摄像头流，始终保留在DOM中 -->
    <div class="fixed-camera">
        <img id="camera-feed" src="{{ url_for('video_feed') }}" alt="实时摄像头流">
    </div>

    <!-- 路由切换的内容区域 -->
    <div id="page-content" style="margin-top: 150px;"></div>

    <script>
        // 配置路由规则
        page('/', () => {
            document.getElementById('page-content').innerHTML = '<h1>首页</h1><p>这是首页内容</p>';
        });
        page('/settings', () => {
            document.getElementById('page-content').innerHTML = '<h1>设置页</h1><p>调整摄像头参数</p>';
        });
        page('/profile', () => {
            document.getElementById('page-content').innerHTML = '<h1>个人中心</h1><p>用户信息</p>';
        });

        // 启动路由
        page();
    </script>
</body>
</html>

• 优势：页面切换时摄像头流元素从未被销毁，流完全无中断，体验最优。如果用Vue/React等框架，只需将摄像头流放在根组件的固定位置即可。

• 后端：用flask-socketio替代HTTP流，实现双向通信，降低延迟，同时支持断连后快速恢复。
• 前端：添加流加载状态提示，处理异常断连自动重连逻辑。
• OpenCV：降低捕获分辨率、调整帧率，减少服务器资源占用，提升流的流畅度。

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