Проблема с обнаружением в реальном времени с использованием - Yolov5 & Django & React

Я пытаюсь получить процент обнаружения, который показывается в видео (когда есть обнаружение), которое я транслирую, на клиент и отобразить его в таблице для каждого момента и в ту же секунду, когда происходит обнаружение, но пока я получаю только небольшую часть данных и это происходит через несколько секунд

Я использую Django для потоковой передачи видео с обнаружением с помощью yolov5, и я отображаю видео на клиенте с помощью react. Моя проблема в том, что я создаю функцию, которая дает мне процент обнаружения для моего пользовательского объекта, когда он показывается в видео. Я хочу использовать эти данные и отобразить их рядом с видео.

Мне нужно, чтобы каждый раз и в тот же момент, когда происходит обнаружение, я получал эти данные и отображал их. Но сейчас это не работает для меня, это только посылает данные и отображает их один/два раза, и через несколько секунд. Я уверен, что у меня проблемы с функцией detection() и, возможно, с detection_percentage()

но к сожалению я не нашел способа решить эту проблему

views.py

def stream():
    cap = cv2.VideoCapture(source)
    model.iou=0.5
    model.conf=0.15
    while (cap.isOpened()):
        ret, frame = cap.read()
        if not ret:
            print("Error: failed to capture image")
            break
        results = model(frame,augment=False,size=640)

        for i in results.render():
            data=im.fromarray(i)
            data.save('demo.jpg')

        det = results.pred[0]


        annotator = Annotator(frame, line_width=2, pil=not ascii)

        im0 = annotator.result()
        image_bytes = cv2.imencode('.jpg', im0)[1].tobytes()
        yield (b'--frame\r\n'
               b'Content-Type: image/jpeg\r\n\r\n' + image_bytes + b'\r\n')
    cap.release()
    cv2.destroyAllWindows()

def detection():
    model.iou=0.5
    model.conf=0.15
    cap = cv2.VideoCapture(source)
    while (True):
        ret, frame = cap.read()
        if not ret:
            print("Error: failed to capture image")
            break
        results = model(frame, augment=False,size=640)
        det = results.pred[0]

        if det is not None and len(det):
            xywhs = xyxy2xywh(det[:, 0:4])
            confs = det[:, 4]
            clss = det[:, 5]
            outputs = deepsort.update(xywhs.cpu(), confs.cpu(), clss.cpu(), frame)

            for j, (output, conf) in enumerate(zip(outputs, confs)):
                    label = f'{conf:.2f}'
                    print(label)
                    return label
    cap.release()
    cv2.destroyAllWindows()


if __name__ == '__main__':
    p1 = Process(target = stream)
    p2 = Process(target = detection)

    p1.start()
    p2.start()

    p1.join()
    p2.join()


def video_feed(request):
    return StreamingHttpResponse(stream(), content_type='multipart/x-mixed-replace; boundary=frame')

def detection_percentage(request):
    return HttpResponse(detection())

сторона клиента

const Streamvideo = () => {
  const urlStream = "http://127.0.0.1:8000/video_feed";
  const urlDetaction="http://127.0.0.1:8000/detection_percentage";

  const [data, setData] = useState("None");
  const [children, setChildren] = useState([]);


  const getPrecentOfDetection = async () => {
    try {
      const resp = await axios.get(urlDetaction);
      console.log(resp.data);
      setData(resp.data);
    } catch (err) {
      // Handle Error Here
      console.error(err);
    }
  };

  useEffect(() => {
    getPrecentOfDetection ();
  }, []);

  useEffect(() => {
    setChildren((prev) => [
      ...prev,
      <div>
        <h6>Detection:{data}</h6>
        <h6> Cureent Time:{showTime}</h6>
      </div>,
    ]);
  }, [data, showTime]);

  return (
    <div>
      <img className={css.img} src={urlStream} alt="" />
      <div>
        <div className={css.cat}>{children}</div>
      </div>
    </div>
  );
};

export default Streamvideo;

Вернуться на верх