main_feed.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Display Webcam Stream</title>

    <style>

        div:before {
            position: absolute;
            content:"";
            height: 100vw;
            width: 20px;
            /* border-radius: 100%; */
            border-spacing: 50vh;
            top: 0;
            left: 50vw;
            z-index: 1;
            background-color: rgb(255, 0, 0);
        }

        video {
            -webkit-transform: scaleX(-1);
            transform: scaleX(-1);
            /* clip: rect(600px, 300px, 0, 0); */
        }
/* 
        .container{
            left: 50vw;
            width: 1000px;
            overflow:hidden;
            display:block;
            height: 1000px;
        } */
    </style>
</head>


<body>

    <!-- <canvas id="videoElement" width="300" height="600"> 

    </canvas> -->
    <center>

        <div id="container" width="1000" height="100" >
            <video autoplay="true" width="1000" height="1000" id="videoElement">
    
            </video>
        </div>
    </center>
    <script>

    </script>
</body>

</html>
<!-- 
<video autoplay="true" id="videoElement">

</video> -->

<script>

    var video = document.querySelector("#videoElement");

    const constraints = {
                audio: false,
                video: {
                    width: 700, height: 1200
                }
            };

    if (navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia(constraints, { video: true})
            .then(function (stream) {
                video.srcObject = stream;
            })
            .catch(function (err0r) {
                console.log("Something went wrong!");
            });
    }
</script>