Problem with Detection in real time using - Yolov5 & Django & React - reactjs

Question

I am trying to get the percent of detection that showing in the video (when having a detection) that I am Streaming,
to the client and display it on a table for every moment and in the same second that detection happening, but for now I get only a little part of the data and it’s happening after a few seconds
I using Django to stream a video with, detection using yolov5 , and I display the video in the client using react.
my problem is that I create a function that give me the percent of the detection for my custom object when it's show in the video.
I want to use this data and display beside the video.
i need that every time and in the same moment ,that have a detect I’ll get this data and display It.but now it’s not work for me, it’s only send the data and display it for one/two times , and after few seconds . I’m sure that I have some problem with detection() function and maybe with the detection_percentage()
but unfortunately I am not found a way to solve it
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())
client side
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;