Question

我试图根据我的视频尺寸设置画布的尺寸。出于某种原因，我的视频高度和宽度始终为0.我认为这与我的课程有关，而不是更新细节。

Webcam.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Get User Media Code Along!</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <div class="photobooth">

    <canvas class="photo"></canvas>
    <video class="player"></video>
  </div>

  <script src="./webcam.js"></script>

</body>
</html>

webcam.js

class Webcam {

    constructor(){
        this.video = document.querySelector('.player');
        this.canvas = document.querySelector('.photo');
        this.canvasContext = this.canvas.getContext("2d");
        this.strip = document.querySelector('.strip');
        this.snap = document.querySelector('.snap');
    }

    captureVideo(){
        navigator.mediaDevices.getUserMedia({video: true, audio: false})
        .then(browserVideoStream => {
            console.log(browserVideoStream);
            this.video.src = window.URL.createObjectURL(browserVideoStream);
            this.video.play();
        }).then(video => {
            this.videoToCanvas();
        })
        .catch(err => alert(err));
    }

   videoToCanvas(){
    let videoWidth = this.video.videoWidth;
    let videoheight = this.video.videoHeight;
    console.log(`${videoWidth} - ${videoheight}`); // THIS IS ALWAYS 0,0
   }

}

video = new Webcam();
video.captureVideo();
video.videoToCanvas();

Answer 1

ALTER TABLE my_table modify my_coumn BOOL NOT NULL DEFAULT false;可能需要时间，因此您需要更改

.play()

到

this.video.play();

以便以下return this.video.play();处理程序在调用.then之前等待视频开始播放。

视频宽度＆amp;在ES6课程中，身高并不令人耳目一新

1 个答案: