I am running a object detection analysis and I need the output to be displayed in the browser instead of idle I couldn’t identify the issue I am still a novice

I am running a object detection analysis (It needs to be displayed to the user so they can define dynamic ROI themselves )so that I need the output to be displayed in the browser instead of idle. I have a button called start analysis When i click the button the video uploaded by the user is moved to the flask backend and i need the result to be displayed in the browser instead of idle.The output should be in real time.

Here is the code

    # Global variables to store ROI coordinates
    roi_start = None
    roi_end = None

    # Function to handle mouse events for selecting ROI
    def mouse_callback(event, x, y, flags, param):
        nonlocal roi_start, roi_end

        if event == cv2.EVENT_LBUTTONDOWN:
            # Start selecting ROI
            roi_start = (x, y)
        elif event == cv2.EVENT_LBUTTONUP:
            # End selecting ROI
            roi_end = (x, y)
            cv2.rectangle(param, roi_start, roi_end, (0, 255, 0), 2)
            cv2.imshow("Image", param)

    # Function to check if a point is inside a rectangle
    def point_inside_rect(x, y, rect):
        x1, y1, x2, y2 = rect
        return x1 <= x <= x2 and y1 <= y <= y2

    cap = cv2.VideoCapture(video_file)

    frame_width = int(cap.get(3))
    frame_height = int(cap.get(4))

    model = YOLO("../YOLO-Weights/yolov8l.pt")
    classNames = ["person"]

    # Define the limit for number of persons in ROI
    LIMIT_PERSONS = 7

    # Create a window to display the video
    cv2.namedWindow("Image")

    # Set mouse callback function
    cv2.setMouseCallback("Image", mouse_callback)

    while True:
        success, img = cap.read()

        if roi_start and roi_end:
            # Draw the ROI rectangle
            cv2.rectangle(img, roi_start, roi_end, (0, 255, 0), 2)

            # Get ROI coordinates
            x1 = min(roi_start[0], roi_end[0])
            y1 = min(roi_start[1], roi_end[1])
            x2 = max(roi_start[0], roi_end[0])
            y2 = max(roi_start[1], roi_end[1])

            # Define the ROI rectangle
            roi_rect = (x1, y1, x2, y2)

            # Doing detections using YOLOv8 frame by frame
            results = model(img)

            # Count the number of people within the ROI
            people_in_roi = 0

            for r in results:
                boxes = r.boxes
                for box in boxes:
                    x1, y1, x2, y2 = box.xyxy[0]
                    x1, y1, x2, y2 = int(x1), int(y1), int(x2), int(y2)

                    # Check if the center of the bounding box is inside the ROI
                    center_x = (x1 + x2) // 2
                    center_y = (y1 + y2) // 2
                    if point_inside_rect(center_x, center_y, roi_rect):
                        people_in_roi += 1

                    cv2.rectangle(img, (x1, y1), (x2, y2), (255, 0, 255), 3)

                    conf = math.ceil((box.conf[0] * 100) / 100)
                    cls = int(box.cls[0])
                    if cls < len(classNames):  # Ensure class index is within range
                        class_name = classNames[cls]
                        label = f'{class_name}{conf}'
                        t_size = cv2.getTextSize(label, 0, fontScale=1, thickness=2)[0]
                        c2 = x1 + t_size[0], y1 - t_size[1] - 3
                        cv2.rectangle(img, (x1, y1), c2, [255, 0, 255], -1, cv2.LINE_AA)  # filled
                        cv2.putText(img, label, (x1, y1 - 2), 0, 1, [255, 255, 255], thickness=1, lineType=cv2.LINE_AA)

            # Display the number of people within the ROI
            cv2.putText(img, f'People in ROI: {people_in_roi}', (10, 50), cv2.FONT_HERSHEY_SIMPLEX, 1, (255, 255, 255), 2)

            # Check if the number of people exceeds the limit
            if people_in_roi > LIMIT_PERSONS:
                # Display message
                cv2.putText(img, 'Please move to other counters', (10, 100), cv2.FONT_HERSHEY_SIMPLEX, 1, (0, 0, 255), 2)

            # Yield the processed frame as a byte array
            yield (b'--framern'
                   b'Content-Type: image/jpegrnrn'
                   + cv2.imencode('.jpg', img)[1].tobytes()
                   + b'rn')

        # Display the frame
        cv2.imshow("Image", img)

        # Check for user input to exit the loop (if necessary)
        if cv2.waitKey(1) & 0xFF == ord('q'):
            break

    # Release the video capture object and close windows
    cap.release()
    cv2.destroyAllWindows()

@app.route('/save-file', methods=['POST'])
def save_file():
    if 'file' not in request.files:
        return redirect(request.url)

    file = request.files['file']

    if file.filename == '':
        return redirect(request.url)

    if file and allowed_file(file.filename):
        filename = secure_filename(file.filename)
        file_path = os.path.join(UPLOAD_FOLDER, filename)
        file.save(file_path)
        
        # Create a Flask response object with the frame generator
        return Response(process_video(file_path), mimetype='multipart/x-mixed-replace; boundary=frame')

    return redirect(request.url)```