Html canvas video streaming

I have this code which playing my camera's view in a video tag and then into canvas element at the same page, the page has 2 squares one for the video tag(playing camera's view) and the other is for canvas(playing the same video of the video tag). How I can edit my code to make the video play in a canvas at another page to let my user watch it live, and if there is a method to let users watch it at the same page not another page and see the canvas only, it's also accepted.

here is my html file:

<html>
    <head>
        <meta charset="UTF-8">
        <title>With canvas</title>
    </head>
    <body>
        <div class="booth">
            <video id="video" width="400" height="300" autoplay></video>
            <canvas id="canvas" width="400" height="300" style="border: 1px solid black;"></canvas>
        </div>
        <script src="video.js"></script>
    </body>
</html>

And here is my js file:

(function() {
    var canvas= document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    video = document.getElementById('video'),
    vendorUrl = window.URL || window.webkitURL;

    navigator.getMedia = navigator.getUserMedia ||
                         navigator.webkitGetUserMedia ||
                         navigator.mozGetUserMedia ||
                         navigator.msGetUserMedia;

    navigator.getMedia ({
        video: true,
        audio: false
    }, function(stream) {
        //video.src = vendorUrl.createObjectURL(stream);
        if ('srcObject' in video) {
            video.srcObject = stream;
          } else {
            video.src = vendorUrl.createObjectURL(stream);
          }
        video.play();
    }, function(error) {
        // An error occured
        //error.code
    });


    video.addEventListener('play', function() {
        setInterval(() => {
        draw(this, context, 400, 300);
        }, 100);

    }, false );
    function draw(video, context, width, height) {
        context.drawImage(video, 0, 0, width, height);
    }
    
}) ();

Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW