camfeed.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Camera</title>

    <video id="myVidPlayer" controls muted autoplay></video>
    <button onclick="snapshot()" >Snapshot</button>

<div class="mycanvas">
    <h6>Captured snapshot</h6>
    <canvas></canvas>
</div>
</head>
<body>
    
</body>
</html>
<script type="text/javascript">
    var canvas = document.querySelector("canvas");
    var context = canvas.getContext("2d");
    const video = document.querySelector('#myVidPlayer');

    //w-width,h-height
    var w, h;
    canvas.style.display = "none";

    //new
    function snapshot(){
        context.fillRect(0, 0, w, h);
        context.drawImage(video, 0, 0, w, h);
        canvas.style.display = "block";
    }

    window.navigator.mediaDevices.getUserMedia({ video: true, audio: true })
        .then(stream => {
            video.srcObject = stream;
            video.onloadedmetadata = (e) => {
                video.play();

                //new
                w = video.videoWidth;
                h = video.videoHeight

                canvas.width = w;
                canvas.height = h;
            };
        })
        .catch(error => {
            alert('Please Enable The Camera Permission!');
        });

        if (window.location.href== "http://127.0.0.1:5500/camfeed.html") {
   alert("Welcome To CamFeed Software v1.0 - Developed By shoelaze");alert("We Value Your Privacy So , We Don't Collect Any Information In This Page. Enjoy!")

}
</script>