javascript 渲染过程中未定义的电子桌面捕获器

mxg2im7a 于 2023-10-14 发布在 Java

关注(0)|答案(1)|浏览(89)

我是新的电子和尝试按照本教程here中概述的步骤。我的主要挑战似乎是在渲染过程中遇到了桌面捕获器的undefined问题。
我知道这个视频很旧，有些功能可能不完全像教程中描述的那样工作，比如启用远程（我也不确定我是否正确修复了）和上下文隔离。目前，我的文件结构如下：
html.index

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Electron Screen Recorder</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
    <link rel="stylesheet" href="index.css" />
    <script defer src="renderer.js"></script>
  </head>
  <body>
    
    <h1>Electron Screen Recorder</h1>

    <video></video>

    <button id="startBtn" class="button is-primary">Start</button>
    <button id="stopBtn" class="button is-warning">Stop</button>

    <hr />

    <button id="videoSelectionBtn" class="button is_text">
      Choose a video source
    </button>
  </body>
</html>

index.js

const { app, BrowserWindow } = require('electron');
const path = require('path');

// Handle creating/removing shortcuts on Windows when installing/uninstalling.
if (require('electron-squirrel-startup')) {
  app.quit();
}

const createWindow = () => {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 1280,
    height: 720,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      enableRemoteModule: true,
    },
  });

  // and load the index.html of the app.
  mainWindow.loadFile(path.join(__dirname, 'index.html'));

  // Open the DevTools.
  mainWindow.webContents.openDevTools();
};

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  /*
     It is common on OS X to create a new window in the app when the
     dock icon is clicked, especially if there are no other windows
     already open.
  */
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

 // In this file, you can incorporate the remaining components of your app's specific main process.
 // code. You can also put them in separate files and import them 
 here.

renderer.js

// buttons
const videoElement = document.querySelector('video');
const startBtn = document.getElementById('startBtn');
const stopBtn = document.getElementById('stopBtn');
const videoSelectionBtn = document.getElementById('videoSelectionBtn');

// imports
const { desktopCapturer } = require('electron');
// creating pop-menu
const { Menu } = require('@electron/remote/main').enable;

videoSelectionBtn.onclick= getVideoSrcs();

//Getting access to all available screens
async function getVideoSrcs(){
    // method returns promise 
    console.log(desktopCapturer);
    const inputSources = await desktopCapturer.getSources({
        types:['window', 'screen']
    });

    const videoOptionsMenu = Menu.buildFromTemplate(
        inputSources.map(source =>{
            return{
                label: source.name,
                click: () => selectSource(source)
            };
        })
    );
    console.log(inputSources);
    videoOptionsMenu.popup();
}

然后我得到这个：