未捕获（承诺）TypeError：无法读取 HTMLButtonElement

Question

我按照 firespace 的教程进行操作，这是一个电子教程，我得到了这个按摩，说这是一个错误，即使教程没有

未捕获（承诺）TypeError：无法读取 HTMLButtonElement.getVideoSources 处未定义的属性“buildFromTemplate”

const { writeFile } = require("fs");

const dialog = remote;

const Menu = remote;

// Global state

let mediaRecorder; // MediaRecorder instance to capture footage

const recordedChunks = [];

// Buttons

const videoElement = document.querySelector("video");

const startBtn = document.getElementById("startBtn");

startBtn.onclick = (e) => {

  mediaRecorder.start();

  startBtn.classList.add("is-danger");

  startBtn.innerText = "Recording";

};

const stopBtn = document.getElementById("stopBtn");

stopBtn.onclick = (e) => {

  mediaRecorder.stop();

  startBtn.classList.remove("is-danger");

  startBtn.innerText = "Start";

};

const videoSelectBtn = document.getElementById("videoSelectBtn");

videoSelectBtn.onclick = getVideoSources;

// Get the available video sources

async function getVideoSources() {

  const inputSources = await desktopCapturer.getSources({

    types: ["window", "screen"],

  });

  const videoOptionsMenu = Menu.buildFromTemplate(

    inputSources.map((source) => {

      return {

        label: source.name,

        click: () => selectSource(source),

      };

    })

  );

  videoOptionsMenu.popup();

}

// Change the videoSource window to record

async function selectSource(source) {

  videoSelectBtn.innerText = source.name;

  const constraints = {

    audio: false,

    video: {

      mandatory: {

        chromeMediaSource: "desktop",

        chromeMediaSourceId: source.id,

      },

    },

  };

  // Create a Stream

  const stream = await navigator.mediaDevices.getUserMedia(constraints);

  // Preview the source in a video element

  videoElement.srcObject = stream;

  videoElement.play();

  // Create the Media Recorder

  const options = { mimeType: "video/webm; codecs=vp9" };

  mediaRecorder = new MediaRecorder(stream, options);

  // Register Event Handlers

  mediaRecorder.ondataavailable = handleDataAvailable;

  mediaRecorder.onstop = handleStop;

  // Updates the UI

}

此代码来自教程 github 的源文件。

你能帮忙解决一下吗，谢谢

Answer 1

const {remote} = require("electron");const {dialog, Menu} = remote;不是const dialog = remote;const Menu = remote;而且我相信您使用的是较新版本的 Electron，您需要像这样创建 BrowserWindowconst mainWindow = new BrowserWindow({    width: 800,    height: 600,    webPreferences: {      nodeIntegration: true,      enableRemoteModule: true    }  })因为你不允许remote在渲染器上使用，默认情况下enableRemoteModuel从falsev9开始