Untitled

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
        <html lang="en">
        <head>
        <script src="three.js"></script>
        <script src="aframe.min.js"></script>
        <script src="aframe-ar.js"></script>
        <script src="https://code.jquery.com/jquery-1.12.4.js">
        </script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js">
        </script>
        </head>
        <body>
        <button onclick="callMe()" style="margin-top:150px;
        padding:20px;">Click Me</button>
        <a-scene embedded arjs='sourceType: webcam;'><a-assets>
        <img id="my_image" src="Samplee.jpg" draggable="true"
        crossorigin="anonymous">><img>
        </a-assets >
        <a-image id="image_disp"  src="#my_image" rotation="90 180 0"
        visible="true"></a-image>
        <a-marker-camera preset='hiro'></a-marker-camera>
        </a-scene>
        </body>
        <script>
        function callMe(){
        var video = document.querySelector('video');
        navigator.mediaDevices.enumerateDevices().
        then(function(devices)
        {
          var userMediaConstraints = {
          audio: false,
          video: {
          facingMode: 'user',
          width: 1920,
          height: 1080
        }
        }
        navigator.mediaDevices.getUserMedia(userMediaConstraints)
        .then(function success(stream) {
        video.srcObject = stream;
        document.body.addEventListener('click', function(){
        video.play();
        })
        var interval = setInterval(function() {
        if (!video.videoWidth)  return;
        clearInterval(interval)
        }, 1000/50);
        }).catch(function(error) {
        console.log("Can't access user media", error);
        alert("Can't access user media :()");
        });
        }).catch(function(err) {
        console.log(err.name + ": " + err.message);
        });
        }
        </script>
        </html>