Flask结合multipart/x-mixed-replace实现摄像头流显示空白问题求助

我开发了一个Flask Web应用，旨在读取本地摄像头画面并在浏览器中展示，但实际运行后画面显示为空白。以下是我的代码实现：

Python文件代码 #

import cv2
import numpy
from flask import Flask, render_template, Response, stream_with_context, Request

video = cv2.VideoCapture(0)
app = Flask(__name__)

def video_stream():
    while(True):
        ret, frame = video.read()
        if not ret:
            break
        else:
            ret, buffer = cv2.imencode('.jpeg',frame)
            frame = buffer.tobytes()
            yield (b'--frame\r\n' b'Content-type: image/jpeg\r\n\r\n' + frame + b'\r\n')

@app.route('/siteTest')

def siteTest():
    return render_template('siteTest.html')

@app.route('/video_feed')

def video_feed():
    return Response(video_stream(), mimetype= 'multipart/x-mixed-replace; boundary = frame')

app.run(host ='0.0.0.0', port= '5000', debug=False)

（出于安全考虑已修改IP）

HTML文件代码 #

<html>
 <head>
    <meta name = "viewport" content = "width = device-width, initial-scale=1">
    <style>
        img{ display: block;
            margin-left: auto;
            margin-right: auto;
        }
        h1 {text-align: center;}
    </style>
 </head>
 <body>
    <img id="bg" src = "{{ url_for('video_feed') }}" style="width: 88%;">
 </body>
</html>

我尝试修改Response和video_stream()函数，但问题仍未解决，恳请各位提供帮助。

问题排查与修复方案 #

1. 修正HTTP边界符格式 #

multipart/x-mixed-replace的boundary参数存在多余空格，HTTP头参数不允许空格，这会导致浏览器无法正确解析视频流。修改video_feed函数：

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

2. 确认摄像头设备索引 #

cv2.VideoCapture(0)不一定适配所有设备，部分摄像头可能需要使用索引1或其他值，也可能被其他程序占用。可以尝试遍历索引验证：

# 尝试不同设备索引
video = None
for i in range(3):
    temp_cap = cv2.VideoCapture(i)
    if temp_cap.isOpened():
        video = temp_cap
        print(f"成功打开摄像头，索引: {i}")
        break
if not video:
    print("无法打开任何摄像头设备")

3. 规范视频流生成格式 #

确保yield的字节流严格符合HTTP多部分响应规范，拆分yield语句避免拼接错误，同时添加编码质量参数：

def video_stream():
    while True:
        ret, frame = video.read()
        if not ret:
            break
        # 设置JPEG编码质量，避免编码失败
        ret, buffer = cv2.imencode('.jpg', frame, [cv2.IMWRITE_JPEG_QUALITY, 80])
        if not ret:
            continue
        frame_bytes = buffer.tobytes()
        # 按规范拆分响应头和内容
        yield b'--frame\r\n'
        yield b'Content-Type: image/jpeg\r\n\r\n'
        yield frame_bytes
        yield b'\r\n'

4. 修复路由定义格式 #

路由装饰器与函数定义之间的换行可能导致潜在的注册问题，调整为紧凑格式：

@app.route('/siteTest')
def siteTest():
    return render_template('siteTest.html')

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

5. 检查系统摄像头权限 #

• Linux系统：确保当前用户属于video组，执行命令后重新登录：

  sudo usermod -aG video $USER
  

• Windows/macOS：检查系统设置中是否允许该程序访问摄像头。

6. 单独测试视频流 #

直接访问http://你的IP:5000/video_feed，如果页面能不断刷新显示摄像头画面，说明视频流正常，问题可能出在HTML页面渲染；如果仍空白，重点排查Python端的摄像头读取和编码逻辑。

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