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

Question

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

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 处理窗口位置和操作系统事件等内容，因此您不想通过流式传输数据来减慢速度它。