I am trying to send the canvas to client, But no luck because not Sure if I am doing the right way... But I when I tried it using the camera on my laptop, the camera work and I can send the local video without a canvas. What I am trying to do is capture the media video from the html and draw it as a canvas and send the video that capture video canvas to client:

Here is the code that ive tried:

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);
    });
});

reciever:

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