Я реализовал алгоритм планирования пути DWA в C с привязками Python, и я хочу создать веб-приложение в качестве демонстрации. «Робот» будет следовать за мышью, используя DWA, и пользователь может рисовать стены для создания объектов. Я реализовал это в Python, используя события мыши OpenCV. Чтобы перенести это в веб-приложение, я начал с определения положения мыши на странице.

{amp}lt;script type=text/javascript{amp}gt; $(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; }); }); {amp}lt;/script{amp}gt; 
 @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'--framern' b'Content-Type: image/jpegrnrn'   test   b'rn') return Response(generate(), mimetype='multipart/x-mixed-replace; boundary=frame') 

Наконец, мне нужно объединить их вместе. Я попытался соединить представленный шаблон с рамкой. Хотя потоковая передача работает, я больше не могу получить данные мыши. Есть ли способ объединить эти два? У меня, вероятно, будут проблемы с положением кадра, потому что данные о положении мыши относительно левого верхнего угла. Будет здорово, если я смогу передавать кадры в верхнем левом углу.

 yield (str.encode(render_template('mouse.html'))   b'rn'   b'--framern' b'Content-Type: image/jpegrnrn'   test   b'rn') 
Гоктуг К.

новый участник этого сайта. Будьте внимательны, спрашивая разъяснения, комментируя и отвечая. Проверьте наш

Правила поведения

,

Решение было очень простым. Видео транслируется в другой / page и ссылается со страницы индекса. Я добавил приведенный ниже код в мой шаблон HTML. Я использовал CSS, чтобы видео появлялось в верхнем левом углу без пробелов. {amp}lt;img src="{{ url_for('frame') }}"{amp}gt; frame — это имя функции.

 {amp}lt;style type="text/css"{amp}gt; body { margin: 0; padding: 0; } {amp}lt;/style{amp}gt; {amp}lt;html{amp}gt; {amp}lt;body{amp}gt; {amp}lt;img src="{{ url_for('frame') }}"{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;/html{amp}gt; 
Гоктуг К.

новый участник этого сайта. Будьте внимательны, спрашивая разъяснения, комментируя и отвечая. Проверьте наш

Правила поведения

,