Как наложить холст на видео HTML5, используя обложку с подгонкой объекта? - PullRequest
Новая
       10

Как наложить холст на видео HTML5, используя обложку с подгонкой объекта?

0 голосов
/ 01 июля 2018

Я выполняю рефакторинг этого кода: https://github.com/idevelop/predator-vision для наложения тепловой карты на видео (с любым разрешением и соотношением сторон).

У меня есть следующий HTML-код: 

<div id="videos" class="embed-responsive">
    <canvas id="heatmap" class="embed-responsive-item"></canvas>
    <video id="remote-video" autoplay muted playsinline class="embed-responsive-item"></video>
</div>

CSS: 

#remote-video {
    display: block;
    height: 100%;
    max-height: 100%;
    max-width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    /* no letterboxing */
    opacity: 1;
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    transition: opacity 1s;
    width: 100%;
}

#remote-video.active {
    opacity: 1;
}

#heatmap {
    display: block;
    height: 100%;
    max-height: 100%;
    max-width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    /* no letterboxing */
    opacity: 1;
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    transition: opacity 1s;
    width: 100%;
}

#heatmap.active {
    opacity: 1;
    z-index: 1;
}

#videos {
    font-size: 0;
    /* to fix whitespace/scrollbars problem */
    height: 100%;
    pointer-events: none;
    position: absolute;
    transition: all 1s;
    width: 100%;
}

#videos.active {
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

Javascript:

Я рендерил холст, используя: 

context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight,
                  0, 0, canvas.width, canvas.height);

Где canvas.width и canvas.height изначально установлены из video.offsetWidth и video.offsetHeight соответственно.

Когда я отрисовываю этот код, холст точно не накладывается на видео. Я не уверен, как это исправить.

Примечание: Canvas корректно накладывается, если я использую object-fit = fill для видео. Но видео растянуто.

...