如何使用object fit cover在HTML5视频上叠加画布?

我正在重构此代码: 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);
}

我使用以下方法渲染画布:

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

哪里画布宽度以及画布高度初始设置从视频.offsetWidth以及视频。远视分别。

当我渲染这个代码时,画布并没有完全叠加在视频上。我不知道怎么解决这个问题。

注意:如果我在视频中使用object fit=fill,画布似乎可以正确叠加。但视频被拉伸了。