如何根据 Div Size 维护 HTML5 视频宽高比

Question

I am using react with typescript. In my project, I have JSON data that contains the information of the faces detected on the video. Now I am creating bounding boxes on faces in the video, but I am facing one problem is that the bounding box information is for the video resolution 3840 x 2160, but my div has height is 500px and width is 800px and I am also using object-fill property as fill . Now when I am rendering the bounding boxes on video it displays out from the div.

How to do this so that bounding boxes display an accurate position on the div.

sample JSON data look like this:

[
  { "frame": 0, "x": 332, "y": 624, "width": 291, "height": 306 },
  { "frame": 1, "x": 1724, "y": 539, "width": 241, "height": 309 },
  { "frame": 2, "x": 2943, "y": 503, "width": 266, "height": 354 }

]

and my code:

<div ref={divRef}>
        <Video videoSource={source} ref={vRef}/>
        <svg id="svg" ref={sRef}>
        {!flag &&
            boundingBoxData.filter((x: IDataFrame) => currentFrame === x.frame).map((y: IData) => {
                return <BoundingBox x={y.x} y={y.y} height={y.height} width={y.width}/>
            })
        }
        </svg>
      </div>

Answer 1

Maybe I am missing something here, but it should be a simple math problem.

1) Get the height and width of the div that contains the video (500 X 800). 2) See how many times it is smaller than the origin (3840 X 2160)

small video width / big video width = X ratio
    
small video height / big video height = Y ratio

Multiple X and Y values with these to find the right location at smaller video.

For frame 0, X should be : Old X * X aspect ratio

For frame 0, Y should be : Old Y * Y aspect ratio

That same logic goes for width and height. So you can loop through the JSON object to create a new object with expected values and map it in SVG.