I am working on an application which will detect faces from live stream. I have a front-end application in react.js and backend is serverless AWS which will call rekognition api to detect faces and return co-ordinates of bounding boxes of the detected faces. My video source is aws kinesis video stream.

In UI, ReactPlayer is being used to play the video from hlsurl. Now my question is, how can I draw bounding boxes on detected faces/mask on the real time stream and show the video from UI?

my approach:

return bounding-boxes from a lambda function and draw using html canvas, but due to latency it won't give the feel of real time detection.

So, how can I show the kinesis real time video stream with bounding boxes is there any other approach to follow? I have gone through the documentations but those are for static images only.