Question

我已经用Python绑定在C中实现了DWA路径规划算法，并且我想创建一个Web应用程序作为演示。 “机器人”将使用DWA跟随鼠标，并且用户可以绘制墙以创建对象。我已经使用OpenCV鼠标事件在Python中实现了这一点。要将其移植到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 ""

这部分代码可以完美运行。我可以从页面中检索鼠标的x，y位置。接下来，我需要将渲染的模拟数据流式传输到页面。下面的代码来自网络摄像头以进行测试。

@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')

最后，我需要将它们组合在一起。我试图用框架连接渲染的模板。尽管流式传输有效，但我无法再检索鼠标数据。有没有办法结合这两个？框架位置可能会出现问题，因为鼠标位置数据是相对于左上角的。如果我能串流帧就很棒在左上角。

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

解决方案非常简单。视频在另一个/ page中流式传输，并从索引页面引用。我已将以下代码添加到模板HTML中。我用CSS制作了视频出现在左上角且无间隙。 <img src="{{ url_for('frame') }}"> 框架是函数的名称。

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

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

带渲染模板的烧瓶视频流

1 个答案: