电子应用中使用Angular Spa的桌面录制

Question

我大家。我在包含Angular的水疗中心的电子中应用。电子通过使用IPCrender和包含从ipcmain.on派生的事件的JavaScript文件来揭示其API的服务，以便它可以在电子和Angular之间进行通信。 Angular调度发送事件：

// The event in the Javascript file

ipcMain.on('desktop-capture', async () => {
    const sources = await desktopCapturer.getSources({ types: ['window', 'screen'] });
    console.log(sources); // qui è dove si interrompe l’esecuzione
    for (const source of sources) {
      if (source.name === ‘Entire ’Screen) mainWindow.webContents.send('desktop-capture-res', [source]);
    }
  });

在TS文件中，我通过发送“桌面捕获”事件来初始化桌面捕获对电子API的响应。 （下图）我使用电子API的源要求用户允许记录屏幕：

initializeDesktop() {
this.ipc.send('desktop-capture');
this.ipc?.on('desktop-capture-res', (event, source: Electron.DesktopCapturerSource) => {
  navigator.mediaDevices.getUserMedia({}).then((stream: MediaStream) => this.getDesktop(stream));
  console.log('DESKTOP_CAPTURE_STREAM', source);
})
};

我使用电子API的源来要求用户允许记录屏幕：

getDesktop(stream: MediaStream) {
setInterval(() => {
  const mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm' });
  mediaRecorder.start();
  const chunks: any[] = [];
  mediaRecorder.ondataavailable = (e) => {
    chunks.push(e.data);
  };
  setTimeout(() => {
    mediaRecorder.stop();
  }, API_SEND_TIMEOUT);
  mediaRecorder.onstop = (e) => {
    const blob = new Blob(chunks.splice(0, chunks.length));
    console.log('DESKTOP_CAPTURE_BLOB', blob);
    this.videos.push(blob);
  };
}, API_SEND_TIMEOUT)};

不幸的是，这是行不通的。 electron文档建议使用此说法来指定源桌面，但是TS不认识视频的强制性属性。

try {
      mediaDevices.getUserMedia({
          audio: false,
          video: {
              mandatory: {
                  chromeMediaSource: 'desktop',
                  chromeMediaSourceId: source.id,
                  minWidth: 1280,
                  maxWidth: 1280,
                  minHeight: 720,
                  maxHeight: 720
              }
          }
      }).then((stream) => {
      });
  }

感谢您的帮助。