首页 > 解决方案 > 如何在 Electron App 中进行屏幕共享?

问题描述

我正在尝试使用 Electron、React 和 TypeScript 在 LAN 环境中构建两个用于屏幕共享的应用程序。一个应用程序将捕获屏幕流并进行 UDP 广播,另一个将在多个设备上运行的应用程序将接收流并显示它。我查看了desktopCapturerElectron 提供的 API,但运行此代码示例时出现错误:

desktopCapturer
      .getSources({ types: ["window", "screen"] })
      .then(async (sources) => {
        for (const source of sources) {
          if (source.name === "Entire Screen") {
            const displayMediaOptions = {
              video: {
                cursor: "always",
                mandatory: {
                  chromeMediaSource: "desktop",
                  chromeMediaSourceId: source.id,
                  maxWidth: 800,
                  maxHeight: 700,
                },
              },
              audio: false,
            };

            try {
              const stream = await navigator.mediaDevices.getUserMedia(
                displayMediaOptions
              );
              handleStream(stream);
            } catch (e) {
              handleError(e);
            }
            return;
          }
        }
      });

错误是:

Argument of type '{ video: { cursor: string; mandatory: { chromeMediaSource: string; chromeMediaSourceId: string; maxWidth: number; maxHeight: number; }; }; audio: boolean; }' is not assignable to parameter of type 'MediaStreamConstraints'.
  Types of property 'video' are incompatible.
    Type '{ cursor: string; mandatory: { chromeMediaSource: string; chromeMediaSourceId: string; maxWidth: number; maxHeight: number; }; }' is not assignable to type 'boolean | MediaTrackConstraints'.
      Type '{ cursor: string; mandatory: { chromeMediaSource: string; chromeMediaSourceId: string; maxWidth: number; maxHeight: number; }; }' has no properties in common with type 'MediaTrackConstraints'.ts(2345)

我查看了一下MediaTrackConstraints,发现它不支持该mandatory属性。我还发现 WebRTC 可能会有所帮助,但不知道它是否可以在没有任何服务器支持的 LAN 环境中工作?

所以我想知道这个问题是否有任何解决方法,或者我可以使用哪些其他技术在本地网络中进行屏幕共享?

标签: node.jstypescriptelectronwebrtcelectron-forge

解决方案


推荐阅读