Flask+Web接入RTSP视频流教程

Flask+Web接入RTSP视频流教程

展示RTSP视频流需要前端和后端配合。

1. 后端Flask代码

主要包含 gen_frames函数，/video_feed 路由返回
rtspUrl = 0时为调用本机摄像头， 此处为路侧感知站摄像头rtsp地址
最终流程：摄像头rtsp地址->输入算法模型->模型输出检测后rtsp地址->展示检测后rtsp地址

from flask import Flask, Response
import cv2

app = Flask(__name__)
CORS(app, resources={r'/*': {'origins': '*'}}, supports_credentials=True)   #允许跨域
rtspUrl = 'rtsp://admin:ls123456@192.168.2.61/h264/ch1/main/av_stream'

def gen_frames():
    # 从摄影机逐帧生成
    camera = cv2.VideoCapture(rtspUrl)
    while True:
        # 逐帧捕获
        success, frame = camera.read()  # 读取相机帧
        if not success:
            # print('输出地址捕获帧失败')
            pass
        else:
            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')  # 逐帧显示结果

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


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

2. 前端代码（Vue/HTML均可）

<v-img src="http://127.0.0.1:5000/video_feed" style="height: 220px;"></v-img>

此处src地址 “http://127.0.0.1:5000/video_feed” 为本机地址：http://127.0.0.1:5000 + 上面Flask配置的路由地址 @app.route(‘/video_feed’)