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

wnavrhmk  于 2023-05-04  发布在  Electron
关注(0)|答案(2)|浏览(203)

在Atom Electron中,可以将BrowserWindow中以60fps渲染的元素图像真实的复制到其他多个BrowserWindow中。

iyzzxitl

iyzzxitl1#

选项一:使用window.open()

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

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

选项二:使用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];
  }
}

请注意,您需要画布选项卡积极运行,它是动画上的视频选项卡。我还没在电子模型上测试过

5fjcxozz

5fjcxozz2#

如何创建一个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处理窗口位置和操作系统事件等内容,因此您不希望通过数据流来减慢它。

相关问题