Html canvas video not showing-CodePudding

I have this code which playing my camera's view in a video tag and also into canvas, How I can edit it to make it share my screen(instead of my camera's view) into that canvas.

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>

and here is the 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);
}

}) ();

please, help!

CodePudding user response：

You must drawImage many times to simulate video not once time. So try to add setInterval to draw the frame every 100ms

video.addEventListener('play', function() {
    draw(this, context, 400, 300);
}, false );

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