javascript - 视频+ Canvas 全屏问题

Question

我有一个视频元素，它在流期间被复制到 Canvas 元素。

<div id="video-panel">
    <canvas id="main-canvas" width="640" height="320"></canvas>

    <video id="video-remote" autoplay="autoplay" src=""></video>
    <video id="video-local" autoplay="autoplay" muted="true" src=""></video>
</div>

我遇到的问题是保持全屏的纵横比。视频会保持其比例，但 Canvas 不会。

代码的 CSS 部分是:

#video-panel {
    width: 100%;
    height: 100%;
}

#video-remote {
    width: 100%;
    height: 100%;
}

#video-local {
    width: 24%;
    position: absolute;
    z-index: 1;
    right: 10px;
    bottom: 10px;
    border: 1px solid white;
}

#main-canvas {
    position: absolute;
    background: url(https://.../image1.png) no-repeat;
    background-size: cover;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

我正在测试色度键效果，视频播放时调用的 JS 部分是:

/////
this.video = document.getElementById('video-remote');
this.canvas = document.getElementById('main-canvas');
this.context = this.canvas.getContext('2d');
////

computeFrame() {
    this.context.drawImage(this.video, 0, 0, this.canvas.width, this.canvas.height);
    ...        
    this.context.putImageData(frame, 0, 0);
}

有什么我可以做的吗？

Answer 1

您可以将 设置为相同的值以具有相同的纵横比:

const x = c.getContext('2d'); 
x.fillRect( 125, 50, 50, 50 );
x.strokeRect( 0, 0, 300, 150 );

#c {
  background: ivory;
  width: 100vw;
  height: 100vh;
}
#c:hover {
 object-fit: contain;
}

mouse over the canvas to fix the aspect-ratio
<canvas id="c"></canvas>