0

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

<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>

我遇到的问题是保持全屏的纵横比。视频保持其比例，但画布没有。

代码的 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);
}

我能做些什么来完成这项工作吗？

4

1 回答 1

1

<video> 元素默认object-fit设置为，contain而 <canvas> 默认为fill.

您可以将 <canvas> 设置为相同的值以具有相同的纵横比：

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>

于 2019-10-28T06:53:21.113 回答