Estoy usando reaccionar con mecanografiado. En mi proyecto, tengo datos JSON que contienen la información de los rostros detectados en el video. Ahora estoy creando cuadros delimitadores en las caras del video, pero me enfrento a un problema: la información del cuadro delimitador es para la resolución de video 3840 x 2160, pero mi div tiene una height de 500 500px y un width 800px y también estoy usando object-fill la propiedad como fill . Ahora, cuando renderizo los cuadros delimitadores en el video, se muestra desde el div.
Cómo hacer esto para que los cuadros delimitadores muestren una posición precisa en el div.
los datos JSON de muestra se ven así:
[ { "frame": 2, "x": 2943, "y": 503, "width": 266, "height": 354 } ]y mi codigo:
<div ref={divRef}> <Video videoSource={source} ref={vRef}/> <svg id="svg" ref={sRef}> } </svg> </div>Tal vez me estoy perdiendo algo aquí, pero debería ser un problema matemático simple.
1) Obtenga la altura y el ancho del div que contiene el video (500 X 800). 2) Ver cuantas veces es menor que el origen (3840 X 2160)
small video width / big video width = X ratio small video height / big video height = Y ratioMúltiples valores X e Y con estos para encontrar la ubicación correcta en un video más pequeño.
For frame 0, X should be : Old X * X aspect ratio For frame 0, Y should be : Old Y * Y aspect ratioEsa misma lógica se aplica al ancho y al alto. Por lo tanto, puede recorrer el objeto JSON para crear un nuevo objeto con los valores esperados y mapearlo en SVG.