Cacher is the code snippet organizer for pro developers

<canvas id="canvas"></canvas>
<video id="video" width="640" height="480" autoplay></video>
<button id="btn-take-photo">写真を撮影する</button>

export default class Webcam {
    constructor(opts={}) {
        this.video = document.getElementById("video")
        this.canvas = document.getElementById("canvas")
        this.ctx = this.canvas.getContext('2d')
        this.button = document.getElementById("btn-take-photo")
        
        this.init()
        this.initListener()
    }

    init() {
        const media = navigator.mediaDevices.getUserMedia({
            video: true,
            audio: false,
        })
        media.then(stream => {
            this.video.srcObject = stream
        })
    }

    initListener() {
        this.button.addEventListener("click", () => {
            this.take_photo()
        })
    }

    take_photo() {
        const width = this.video.offsetWidth;
        const height = this.video.offsetHeight;
        this.canvas.width = width
        this.canvas.height = height
        this.ctx.drawImage(this.video, 0, 0, width, height)
    }
}