I want to know what approach should I take to stream the inference video on a webapage?
I am using inference pipeline and after that I am showing the the video in the window using the open cv but now I want to show the video in a video player on a webpage.
I am thinking of using flask backend and unable to figure out how to send the stream(annotated frames from the inference pipeline) to the route
This is all on my local network for now
So code for now
def on_prediction(self, result: dict, frame: VideoFrame) -> None:
self.fps_monitor.tick()
fps = self.fps_monitor.fps
detections = sv.Detections.from_ultralytics(result)
detections = detections[find_in_list(detections.class_id, self.classes)]
detections = self.tracker.update_with_detections(detections)
annotated_frame = frame.image.copy()
annotated_frame = sv.draw_text(
scene=annotated_frame,
text=f"{fps:.1f}",
text_anchor=sv.Point(40, 30),
background_color=sv.Color.from_hex("#A351FB"),
text_color=sv.Color.from_hex("#000000"),
)
annotated_frame = self.process_zones(annotated_frame, detections)
# how to extract the frame and send to the url from inferenc pipeline
self.latest_frame = annotated_frame
// I don't think this is a good(right) approach
def generate_frames_new():
while True:
if custom_sink.latest_frame is not None:
ret, buffer = cv2.imencode('.jpg', custom_sink.latest_frame)
frame = buffer.tobytes()
yield (b'--frame\r\n'
b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')
@app.route('/video')
def video():
return render_template('video.html')
@app.route('/video_feed')
def video_feed():
return Response(generate_frames_new(), mimetype='multipart/x-mixed-replace; boundary=frame')
video template
<body>
<h1>helo
</h1>
<img width="800" height="1200" src="{{ url_for('video_feed') }}" alt="Video Stream">
<script src="/static/serve.js" charset="utf-8"></script>
</body>