let canvas = document.getElementById('camera');
let video = document.getElementById('video');

const width = 320; // We will scale the photo width to this
let height = 0; // This will be computed based on the input stream
let streaming = false;

function startup() {
    video = document.getElementById("video");
    canvas = document.getElementById("canvas");

    navigator.mediaDevices
        .getUserMedia({ video: true, audio: false })
        .then((stream) => {
            video.srcObject = stream;
            video.play();
        })
        .catch((err) => {
        console.error(`An error occurred: ${err}`);
        });

    video.addEventListener(
        "canplay",
        (ev) => {
            if (!streaming) {
                height = video.videoHeight / (video.videoWidth / width);

                // Firefox currently has a bug where the height can't be read from
                // the video, so we will make assumptions if this happens.

                if (isNaN(height)) {
                    height = width / (4 / 3);
                }

                video.setAttribute("width", width);
                video.setAttribute("height", height);
                canvas.setAttribute("width", width);
                canvas.setAttribute("height", height);
                streaming = true;
                drawVideoOnCanvas();
            }
        },
        false
    );
}

window.addEventListener("load", startup, false);

const drawVideoOnCanvas = () => {
    canvas.getContext("2d").drawImage(video, 0, 0, width, height);
    requestAnimationFrame(drawVideoOnCanvas);
}