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

Question

我正在使用与 typescript 的反应。 在我的项目中，我有 JSON 数据，其中包含在视频中检测到的人脸信息。 现在我正在视频中的面部创建边界框，但我面临一个问题是边界框信息适用于视频分辨率 3840 x 2160，但我的 div 的height为500px ， width为800px ，我也在使用object-fill属性为fill 。 现在，当我在视频上渲染边界框时，它会从 div 中显示出来。

如何做到这一点，以便边界框在 div 上显示准确的 position。

样本 JSON 数据如下所示：

[
  { "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 }

]

和我的代码：

<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

也许我在这里遗漏了一些东西，但这应该是一个简单的数学问题。

1）获取包含视频的div的高度和宽度（500 X 800）。 2）看比原点小多少倍（3840 X 2160）

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

多个 X 和 Y 值与这些以在较小的视频中找到正确的位置。

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

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

同样的逻辑也适用于宽度和高度。 So you can loop through the JSON object to create a new object with expected values and map it in SVG.