рисовать видео на холсте точно так же

Question

пытается нарисовать видеоэлемент на холсте именно так, как он есть, но видео на холсте увеличено:

<canvas></canvas>
<video autoplay="true"></video>
<script>
    let video = document.querySelector("video")
    navigator.mediaDevices.getUserMedia({video: true})
        .then((stream) => {
            video.srcObject = stream
        })
    canvasWidth = 0
    canvasHeight= 0
    video.addEventListener("playing", () => {
        canvasWidth = video.videoWidth
        canvasHeight = video.videoHeight
        canvas = document.querySelector("canvas")
        canvas.style.width = canvasWidth+"px"
        canvas.style.height = canvasHeight+"px"
        function draw() {
            let ctx = canvas.getContext('2d');
            ctx.drawImage(video, 0, 0, canvasWidth,canvasHeight, 0, 0 ,canvasWidth, canvasHeight)
            setTimeout(draw, 1)
        }

        setTimeout(() =>{
            draw()
        }, 1000);
    })


</script>

есть изображение того, что он отображает в браузере:

введите описание изображения здесь

Answer 1

Я думаю, вы пропустили правильную настройку ширины и высоты canvas, получаемых из элемента video.

const video = document.querySelector("#vid");
const ctx = document.querySelector("#cvs").getContext("2d");
navigator.mediaDevices.getUserMedia({video: true}).then((stream) => video.srcObject = stream);

function draw() {
  ctx.canvas.width = video.clientWidth;
  ctx.canvas.height = video.clientHeight;
  ctx.drawImage(video, 0, 0, ctx.canvas.width, ctx.canvas.height);
  requestAnimationFrame(draw);
}
video.addEventListener("playing", draw);

<canvas id="cvs"></canvas>
<video id="vid" autoplay="true"></video>