Flask输出OpenCV目标检测视频嵌入iframe后运行不稳定如何解决

问题原因 #

Assertion avci->compat_decode_consumed == 0 failed at libavcodec/decode.c:731 是ffmpeg解码模块遇到损坏帧时抛出的断言错误，iframe嵌入场景下触发该问题的核心原因如下：

• 原代码未对OpenCV视频读取操作加锁，iframe嵌入后浏览器会额外发起一次视频流请求，两个并发请求同时读取同一个全局cv2.VideoCapture实例，导致读出的帧数据不完整，编码后得到损坏的JPEG数据，触发ffmpeg解码报错。
• 未给视频流接口加禁用缓存的响应头，浏览器缓存了部分帧片段，导致multipart流拼接异常，最终解码失败。
• 若父页面和Flask服务跨域，浏览器的安全策略会拦截部分流数据，也会导致帧损坏。

修复方案 #

1. 给视频流接口添加禁用缓存头 #

避免浏览器缓存帧数据导致流拼接异常，修改video_feed路由逻辑：

@app.route('/video_feed')
def video_feed():
    #Video streaming route. Put this in the src attribute of an img tag
    response = Response(gen_frames(), mimetype='multipart/x-mixed-replace; boundary=frame')
    # 新增禁止缓存的响应头
    response.headers['Cache-Control'] = 'no-cache, no-store, must-revalidate'
    response.headers['Pragma'] = 'no-cache'
    response.headers['Expires'] = '0'
    return response

2. 给视频读取操作加线程锁 #

避免多个并发请求争抢同一个视频捕获实例导致帧数据损坏，修改帧生成逻辑：

import threading

# 全局视频捕获对象定义处新增线程锁
cap = cv2.VideoCapture(0) # 替换为你的实际视频源
lock = threading.Lock()

def gen_frames():  
    while True:
        # 读取帧和目标检测逻辑加锁保证串行
        with lock:
            ret, frame = cap.read()
            if not ret:
                break
            # 你的目标检测核心逻辑写在这里
            ret, buffer = cv2.imencode('.jpg', frame)
            frame = buffer.tobytes()
        yield (b'--frame\r\n'
               b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')

3. 新增跨域嵌入允许头 #

如果是跨域iframe嵌入场景，新增全局响应头允许父页面嵌入：

@app.after_request
def add_security_headers(response):
    # 生产环境建议把*替换为实际父页面域名，提升安全性
    response.headers['Content-Security-Policy'] = "frame-ancestors 'self' *;"
    response.headers['X-Frame-Options'] = 'ALLOWALL'
    return response

4. 兼容性修复 #

如果上述操作后仍报错，升级opencv-python到最新版本即可，该断言报错是部分旧版本ffmpeg处理异常帧的已知bug，新版本已修复。

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