Copy <canvas> image from a BrowserWindow to another at 60fps in Atom Electron

Question

It is posible to copy in real time the image of a element in BrowserWindow rendered at 60fps to other multiple BrowserWindows in Atom Electron?

Answer 1

Option 1: Use window.open()

As of May 2017, it is now possible to open a new window in Electron using window.open(), in a similar way to how nwjs does it. This means there is no need to worry about sending the image over different processes. See the electron documentation for more details. With a DOM reference to the canvas in the new window, you can easily copy the image from the old canvas every frame.

newCanvas.drawImage(oldCanvas, 0, 0, width, height)

Option 2: Use WebRTC

You can do a stream from a canvas to a video element via WebRTC, locally between two windows. My solution is based on an answer to a related question as well as a useful WebRTC canvas example. Open the below two links and click connect.

The canvas to be streamed: https://jsfiddle.net/f5y48hcd/26/

var stream = canvas.captureStream();
    
...

stream.getTracks().forEach(
    function(track) {
      pc.addTrack(
        track,
        stream
      );
    }
);

The video element receiving the stream: https://jsfiddle.net/rfqhwo4z/10/

pc.ontrack = gotRemoteStream;

...

function gotRemoteStream(e) {
  if (video.srcObject !== e.streams[0]) {
    video.srcObject = e.streams[0];
  }
}

Please note that you'll need the canvas tab actively running for it to be animating on the video tab. I'm yet to test this in an electron build.