Python 如何使用来自视频处理的数据流更新html页面数据字段_Python_Html_Opencv_Image Processing_Flask

Python 如何使用来自视频处理的数据流更新html页面数据字段

python html opencv image-processing flask

Python 如何使用来自视频处理的数据流更新html页面数据字段,python,html,opencv,image-processing,flask,Python,Html,Opencv,Image Processing,Flask,我正在使用opencv图像处理处理处理视频流。在每一帧中，我都会得到一个名为status的数据字段。现在，我正在使用flask应用程序在html页面上播放此视频。我想将这个“状态”数据流与html页面上的视频流一起添加 app.py： import cv2 import numpy as np from imports.vehicleDetection import BoundingBox from flask import Flask, render_template, Response, s

我正在使用opencv图像处理处理处理视频流。在每一帧中，我都会得到一个名为status的数据字段。现在，我正在使用flask应用程序在html页面上播放此视频。我想将这个“状态”数据流与html页面上的视频流一起添加

app.py：

import cv2
import numpy as np
from imports.vehicleDetection import BoundingBox
from flask import Flask, render_template, Response, session, request, stream_with_context, app

app = Flask(__name__)
app.secret_key = 'mahinsa@12345678'

def stream_template(template_name, **context):
    print('stream_template')
    # http://flask.pocoo.org/docs/patterns/streaming/#streaming-from-templates
    app.update_template_context(context)
    t = app.jinja_env.get_template(template_name)
    rv = t.stream(context)
    # uncomment if you don't need immediate reaction
    ##rv.enable_buffering(5)
    return rv

@app.route('/')
def index():
    # return the rendered template
    return render_template("form.html")


@app.route('/submit', methods = ['POST', 'GET'])
def start():
    if request.method == 'POST':
        inputVideo = request.form['input']
        cameraFocalLength = request.form['cfl']
        session["inputVideo"]=inputVideo
        session["cameraFocalLength"]=cameraFocalLength
        return render_template("view.html")

def gen():
    bb = BoundingBox()
    video=session.get("inputVideo",None)
    cameraFocalLength=session.get("cameraFocalLength",None) 
#    if int(video)==0:
#        capture = cv2.VideoCapture(0)
#    elif int(video)==1:
#        capture = cv2.VideoCapture(1)
#    else:
    capture = cv2.VideoCapture(video+'.mp4')

    def dataPass(status):
        print('datapass')
        def genarate(status):
            yield status
        return Response(stream_template("view.html", status = genarate(status)))


    while True:
        ret, frame = capture.read()
        if ret == False:
            continue
        pro_image, status = bb.getBoundingBox(frame, int(cameraFocalLength))
        dataPass(status)
        resized = cv2.resize(pro_image, (int(pro_image.shape[1]/2), int(pro_image.shape[0]/2)))
        # encode the frame in JPEG format
        encodedImage = cv2.imencode(".jpg", resized)[1].tobytes()
        yield (b'--frame\r\n'b'Content-Type: image/jpeg\r\n\r\n' + bytearray(np.array(encodedImage)) + b'\r\n')            

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


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

下面是html代码，我想将超车状态与视频流附带的状态数据流连接起来

html:


视频流演示
{{status}}

虽然我不确定答案，为什么不将文本放在框架上，而不是单独显示在html上？@Shweta Chandel可以这样做，但我想给用户一个响应，而不是将文本放在框架上。我尝试使用stream_模板，但它也不会在“status”数据字段的html页面上传输数据。

<html>
<head>
<link rel="stylesheet" href="{{ url_for('static', filename='css/my.css') }}">
</head>
<body>

    <div class="container">

                <div class="container2">
                    <h3>Video Streaming Demonstration</h3>
                    <img src="{{ url_for('video_feed') }}">
                </div>
                <div>
                    <h3>{{ status }}</h3>
                </div>

    </div>

</body>
</html>