Tengo este código que reproduce la vista de mi cámara en una etiqueta de video y también en el lienzo. Cómo puedo editarlo para que comparta mi pantalla (en lugar de la vista de mi cámara) en ese lienzo.
aquí está mi archivo html:
<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>y aquí está el archivo js:
(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); }}) ();
¡por favor ayuda!
Debe dibujar la imagen muchas veces para simular el video, no una vez. Así que intente agregar setInterval para dibujar el marco cada 100 ms
video.addEventListener('play', function() { draw(this, context, 400, 300); }, false );a
video.addEventListener('play', function() { setInterval(() => { draw(this, context, 400, 300); }, 100); }, false );