带有渲染模板的 Flask 视频流

Question

I've implemented DWA path planning algorithm in C with Python bindings and I want to create a web application as a demo.我已经用 Python 绑定在 C 中实现了 DWA 路径规划算法，我想创建一个 Web 应用程序作为演示。 The "robot" will follow the mouse using the DWA and the user can draw walls to create objects. “机器人”将使用 DWA 跟随鼠标，用户可以绘制墙壁来创建对象。 I have implemented this in Python using OpenCV mouse events.我已经使用 OpenCV 鼠标事件在 Python 中实现了这一点。 To port this to a web application, I started by getting the mouse positions from the page.为了将其移植到 Web 应用程序，我首先从页面获取鼠标位置。

<script type=text/javascript>
    $(function() {
        $(document).bind('mousemove', function(event) {
            $.post( "/mouse_events", {
                x: event.clientX,
                y: event.clientY,
            });
            return false;
        });
        $(document).bind('mousedown', function() {
            $.post( "/mouse_events", {
                click: 'true'
            });
            return false;
        });
    });
</script>

@app.route('/')
def index():
    print(type(render_template('mouse.html')))
    return render_template('mouse.html')

@app.route('/mouse_events', methods=['POST'])
def background_process_test():
    data = request.form
    print(data)
    return ""

This part of the code works perfectly.这部分代码完美运行。 I can retrieve the x, y positions of the mouse from the page.我可以从页面中检索鼠标的 x、y 位置。 Next, I need to stream the rendered simulation data to the page.接下来，我需要将渲染的模拟数据流式传输到页面。 The below code streams from the webcam for testing.以下代码流来自网络摄像头以进行测试。

@app.route('/stream')
def streamed_response():
    global cap
    @stream_with_context
    def generate():
        while True:
            ret, frame = cap.read()
            test = cv2.imencode('.jpg', frame)[1].tobytes()
            yield (b'--frame\r\n'
                    b'Content-Type: image/jpeg\r\n\r\n' + test + b'\r\n')
    return Response(generate(), mimetype='multipart/x-mixed-replace; boundary=frame')

Finally, I need to combine them together.最后，我需要将它们组合在一起。 I have tried to concat the rendered template with the frame.我试图将渲染的模板与框架连接起来。 Although the streaming works, I can no longer retrieve the mouse data.尽管流式传输有效，但我无法再检索鼠标数据。 Is there a way to combine these two ?有没有办法将这两者结合起来？ I will probably have a problem with the frame position because the mouse position data is relative to the top left corner.我可能会遇到框架位置的问题，因为鼠标位置数据是相对于左上角的。 It will be awesome if I can stream frames at the top left corner.如果我可以在左上角流式传输帧，那就太棒了。

yield (str.encode(render_template('mouse.html')) + b'\r\n' + b'--frame\r\n'
         b'Content-Type: image/jpeg\r\n\r\n' + test + b'\r\n')

Answer 1

The solution was very simple.解决方案非常简单。 The video is streamed in another /page and referenced from the index page.视频在另一个 /page 中流式传输并从索引页面引用。 I have added the below code to my template HTML.我已将以下代码添加到我的模板 HTML 中。 I have used CSS to make the video appear at the top left corner without gaps.我使用 CSS 使视频无间隙地出现在左上角。 <img src="{{ url_for('frame') }}"> the frame is the name of the function. <img src="{{ url_for('frame') }}"> frame 是函数名。

<style type="text/css">
body {
    margin: 0;
    padding: 0;
}
</style>

<html>
  <body>
    <img src="{{ url_for('frame') }}">
  </body>
</html>

带有渲染模板的 Flask 视频流

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-12-25 18:44:09

带有渲染模板的 Flask 视频流

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-12-25 18:44:09

解决方案1
0 已采纳 2019-12-25 18:44:09