Рисование прямоугольника холста над лицами человека в видеоплеере - PullRequest
Новая
       14

Рисование прямоугольника холста над лицами человека в видеоплеере

0 голосов
/ 27 июня 2019

Я должен показать ограничивающую рамку над лицами в видео.Я использовал видео JS Media Player.Для каждой сцены / кадра я получаю ограничивающие координаты вершин многоугольника для каждого лица, присутствующего в этом видео.Так как я должен использовать координаты, поступающие с бэкэнда, я не могу использовать какую-либо библиотеку распознавания лиц.Я могу нарисовать холст поверх видео.Теперь мне нужно переместить этот холст в соответствии с координатами.А также, если присутствует несколько граней, мне нужно динамически нарисовать это количество холста.Я должен реализовать это в своем угловом проекте.

Теперь, как я могу динамически создать холст, равный количеству граней, присутствующих в этой конкретной сцене.

И как я могу использовать эти ограничивающие поли вершинырисовать холст на видео.

код, который я использовал для отображения холста поверх видео. 

 <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;
}
...