Видео + холст полноэкранный выпуск - PullRequest
Новая
       37

Видео + холст полноэкранный выпуск

0 голосов
/ 28 октября 2019

У меня есть элемент видео, который копируется в элемент 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);
}

Могу ли я что-нибудь сделать для этой работы?

1 Ответ

1 голос
/ 28 октября 2019
Элемент

имеет значение по умолчанию object-fit, установленное на contain, в то время как по умолчанию fill.

Вы можете установить на одно и то же значение, чтобы иметь одинаковое соотношение сторон: 

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