在视频播放器的人脸上方绘制画布矩形

Question

我必须在视频的脸部上方显示边框。我已经使用了视频js媒体播放器。对于每个场景/帧，我都获得了该视频中存在的每个脸部的多边形顶点坐标。由于我必须使用来自后端的坐标，因此无法使用任何人脸检测库。我可以在视频上绘制画布。现在我需要根据坐标移动画布。而且如果存在多个面孔，我需要动态绘制该数量的画布。 我必须在我的有角度的项目中实现这一点。

现在我该如何动态创建与该特定场景中存在的面孔数量相等的画布。

我该如何使用边界多边形在视频上绘制画布。

我用于在视频上显示画布的代码。

 <div id="video-overlays">
                <canvas id="myCanvas" width="100" height="100" style="border: 2px solid #000000;"></canvas>
            </div>
          <div>
            <video id="demo" class="video-js vjs-default-skin vjs-16-9
                        vjs-big-play-centered vjs-show-big-play-button-on-pause"
              controls (play)="videoPlayed()" #videoPlayer>
              <source src="{{videoUrl}}" type="video/mp4">
              Your browser does not support HTML5 video.
            </video>
          </div>

使用CSS

       #video-overlays{
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 300000;
}