1

我有一个在互联网上加载网页的电子应用程序。该网站的主要功能之一是捕获屏幕的能力，它使用

navigator.mediaDevices.getDisplayMedia({video: true});

但显然，电子将通过 Permission denied 被拒绝，因为不会弹出“选择捕获窗口”来授予它任何权限。

我已经查看了一些文章并看到了desktopCapture

问题是，这是通过网页javascript而不是我的应用程序代码发生和运行的，所以我不知道如何影响它。

那么我应该怎么做才能在这种情况下捕获屏幕呢？

4

1 回答 1

1

您可以重写navigator.mediaDevices.getDisplayMedia以调用 Electron 的desktopCapturerAPI，如下所示。此实现假设您已contextIsolation启用这是 Electron >= 12 中的默认行为

// preload.js

const { desktopCapturer, contextBridge } = require("electron");
const { readFileSync } = require("fs");
const { join } = require("path");

// inject renderer.js into the web page
window.addEventListener("DOMContentLoaded", () => {
  const rendererScript = document.createElement("script");
  rendererScript.text = readFileSync(join(__dirname, "renderer.js"), "utf8");
  document.body.appendChild(rendererScript);
});

contextBridge.exposeInMainWorld("myCustomGetDisplayMedia", async () => {
  const sources = await desktopCapturer.getSources({
    types: ["window", "screen"],
  });

  // you should create some kind of UI to prompt the user
  // to select the correct source like Google Chrome does
  const selectedSource = sources[0]; // this is just for testing purposes

  return selectedSource;
});

// renderer.js

navigator.mediaDevices.getDisplayMedia = async () => {
  const selectedSource = await globalThis.myCustomGetDisplayMedia();

  // create MediaStream
  const stream = await navigator.mediaDevices.getUserMedia({
    audio: false,
    video: {
      mandatory: {
        chromeMediaSource: "desktop",
        chromeMediaSourceId: selectedSource.id,
        minWidth: 1280,
        maxWidth: 1280,
        minHeight: 720,
        maxHeight: 720,
      },
    },
  });

  return stream;
};

现在，当调用此 API 时，将按预期将流返回给调用者

navigator.mediaDevices.getDisplayMedia({video: true});

我创建了一个 GitHub 存储库，其中包含此解决方案的有效实现

于 2021-07-26T18:22:33.457 回答