Copy 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.

Answer 2

How about creating a Unix socket and piping the bytes to that and reading it from your other process?:

var net = require('net');

// This server listens on a Unix socket at /var/run/mysocket
var unixServer = net.createServer(function(client) {
    // Do something with the client connection
});
unixServer.listen('/var/run/mysocket');

https://nodejs.org/api/net.html Otherwise you could just open a socket on a port and communicate over that.

The main reason you don't want data going from the BrowserWindow back and forth to the main process is that your BrowserWindow handles stuff like window position and OS events so you don't want to slow it down by streaming your data through it.