呈现网站时用电子捕获屏幕

Question

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

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

但显然，电子将通过权限被拒绝，因为不会弹出 'selecting window to capture' 授予它任何权限。

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

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

那么在这种情况下我应该怎么做才能使捕获屏幕正常工作？

Answer 1

您可以覆盖 navigator.mediaDevices.getDisplayMedia 来调用 Electron 的 desktopCapturer API，如下所示。此实现假设您启用了 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});

I have created a GitHub repo that has a working implementation of this solution

呈现网站时用电子捕获屏幕

capture screen with electron when rendering a web site

electron

screen-capture