Estoy tratando de crear botones en mi página web que apliquen un filtro a la transmisión de una cámara usando un backend de Python.
Mis dos botones de javascript, Filter on / Filter off tienen un problema de ejecución. Cuando se presiona un botón por primera vez, el sistema funciona. Pero cuando se presiona el siguiente botón, no se 'despresiona' el primer botón y, por lo tanto, las solicitudes al matraz se mezclan.
Incluí una declaración de impresión en el código para demostrar el problema. Cuando se presiona el botón de filtro por primera vez, el ciclo es consistente y muestra el parámetro presionado 1, 1, 1, 1, 1, 1, 1. Una vez que presiono el segundo botón, los resultados se vuelven inconsistentes 1, 0, 0, 0 , 1, 0, 1, 1, 1
El mismo comportamiento es cierto independientemente de qué botón presione primero.
Necesito que los resultados sean 1, 1, 1, 1, 1... etc. o 0, 0, 0, 0, 0 según el botón que se presione.
La ayuda será muy apreciada, gracias
#### Javascript ### $(function(){ $(document).ready(function(){ $("#filterOn").click(function(){ filterOn(); }); $("#filterOff").click(function(){ filterOff(); }); }); function filterOn(){ $.get('/video_feed/1'); } function filterOff(){ $.get('/video_feed/0'); }######### Backend Python usando Flask ##########
def Capture_data(filter): while True: success, image = video.read() print(filter) ###### Troubleshooting line here ######### if filter == 1: image = filtered_spectrum(image) encode_param = [int(cv2.IMWRITE_JPEG_QUALITY), 90] ret, jpeg2 = cv2.imencode('.jpg', image, encode_param) frame = jpeg2.tobytes() yield (b'--frame\r\n' b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n\r\n') @app.route('video_feed') @app.route('video_feed/<int:toggle>') def video_feed(toggle): if toggle == 0: return Response(Capture_data(0), mimetype='multipart/x-mixed-replace; boundary=frame') if toggle == 1: return Response(Capture_data(1), mimetype='multipart/x-mixed-replace; boundary=frame')Si son radios, necesitan el mismo nombre
También envuelve demasiadas directivas de carga
function filterOn(){ $.get('/video_feed/1'); // normally one needs to do something with that } function filterOff(){ $.get('/video_feed/0'); } $(function(){ $("#filterOn").on("click",filterOn) $("#filterOff").on("click",filterOff) }) <label><input type="radio" name="filter" id="filterOn">On</label> <label><input type="radio" name="filter" id="filterOff">Off</label>Cuando presiona el primer botón, el video comienza a alimentarse desde Capture_data (0). Cuando presiona el segundo botón, el video comienza a alimentarse desde Capture_data (1). Por lo tanto, se alimenta de dos fuentes al mismo tiempo.
Cuando presiona el segundo botón, la primera fuente de suministro debe detenerse. Para esto, una señal debe ir a la primera fuente de suministro. Pero dado que las fuentes de suministro funcionan de forma independiente, una vez llamadas, no puede enviar una señal nuevamente.
Creo que la solución más simple es actualizar la página con la opción de fuente de alimentación en lugar de js cuando se presiona el botón.
Pero si desea resolverlo sin actualizar la página, puede intentar comunicar js con socket con Flask.
Excepto socket, no sé cuáles funcionarán, pero puedo pensar en 3 formas diferentes: