Using react with typescript, my project involves JSON data containing information about faces detected on a video. I am currently working on creating bounding boxes around the faces in the video; however, I have encountered an issue. The bounding box information is based on a video resolution of 3840 x 2160, but the div I am working with has a height of 500px and width of 800px, utilizing the object-fill property for filling. As a result, when I render the bounding boxes on the video, they extend beyond the div.
How can I adjust this to ensure that the bounding boxes are accurately positioned within the div?
A snippet of the sample JSON data:
[
{ "frame": 2, "x": 2943, "y": 503, "width": 266, "height": 354 }
]
Here is a portion of my code:
<div ref={divRef}>
<Video videoSource={source} ref={vRef}/>
<svg id="svg" ref={sRef}>
}
</svg>
</div>