将<canvas>图像从BrowserWindow复制到Atom Electron的60fps的另一个图像

Question

可以将以60fps渲染的BrowserWindow中元素的图像实时复制到Atom Electron中的其他多个BrowserWindows吗？

Answer 1

选项1：使用window.open()

截至2017年5月，现在可以使用window.open()在Electron中打开一个新窗口，其方式与nwjs的方式类似。这意味着无需担心通过不同的进程发送图像。有关详细信息，请参阅electron documentation。通过在新窗口中对画布的DOM引用，您可以轻松地从每个帧中复制旧画布中的图像。

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

选项2：使用WebRTC

您可以通过WebRTC在两个窗口之间本地执行从画布到视频元素的流。我的解决方案基于对related question的回答以及有用的WebRTC canvas example。打开以下两个链接，然后单击“连接”。

要流式传输的画布： https://jsfiddle.net/f5y48hcd/26/

var stream = canvas.captureStream();

...

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

接收流的视频元素： https://jsfiddle.net/rfqhwo4z/10/

pc.ontrack = gotRemoteStream;

...

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

请注意，您需要主动运行画布标签才能在视频标签上设置动画。我还没有在电子版本中对此进行测试。

Answer 2

如何创建一个Unix套接字并将字节汇总到那个并从其他进程读取它？：

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 否则你可以在端口上打开一个套接字并通过它进行通信。

您不希望数据从BrowserWindow来回传递到主进程的主要原因是您的BrowserWindow处理窗口位置和操作系统事件之类的内容，因此您不希望减慢它的速度通过它传输数据。