Estoy tratando de enviar el lienzo al cliente, pero no tuve suerte porque no estoy seguro de si lo estoy haciendo de la manera correcta... Pero cuando lo intenté usando la cámara de mi computadora portátil, la cámara funciona y puedo enviar el video local sin un lienzo Lo que estoy tratando de hacer es capturar el video multimedia del html y dibujarlo como un lienzo y enviar el video que captura el lienzo de video al cliente:

Aquí está el código que he intentado:

 var inputCtx = $( '.input-canvas canvas' )[ 0 ].getContext( '2d' ); var outputCtx = $( '.output-canvas canvas' )[ 0 ].getContext( '2d' ); const video = document.querySelector("video"); video.addEventListener('canplay', () => { video.srcObject = stream; drawToCanvas(); socket.emit("broadcaster"); }); function drawToCanvas() { inputCtx.drawImage( localVideo, 0, 0, width, height ); var pixelData = inputCtx.getImageData( 0, 0, width, height ); outputCtx.putImageData( pixelData, 0, 0 ); requestAnimationFrame( drawToCanvas ); } socket.on("watcher", id => { const peerConnection = new RTCPeerConnection(config); peerConnections[id] = peerConnection; let stream = outputCtx.streamCapture; stream.getTracks().forEach(track => peerConnection.addTrack(track, stream)); peerConnection.onicecandidate = event => { if (event.candidate) { socket.emit("candidate", id, event.candidate); } }; peerConnection .createOffer() .then(sdp => peerConnection.setLocalDescription(sdp)) .then(() => { socket.emit("offer", id, peerConnection.localDescription); }); });

receptor:

 socket.on("broadcaster", () => { socket.emit("watcher"); });