Agora 屏幕在 electron 中与 react 共享，授予权限被拒绝

Question

我正在使用 Agora 构建一个用于通话的电子反应应用程序。我正在尝试实现屏幕共享功能。

如以下文档中所述，我尝试请求屏幕共享。 https://docs.agora.io/en/video/screensharing_web_ng?platform=Web#screen-sharing-on-electron

但是我收到以下错误

AgoraRTCError PERMISSION_DENIED: NotAllowedError: Permission denied

我尝试在 React 和 Electron 中调用相同的函数 AgoraRTC.createScreenVideoTrack 但结果是一样的。

electron中如何获取分享屏幕权限给agora？

Answer 1

经过一番研究，我找到了电子方式。

首先我请求共享屏幕。

const turnScreenSharingOn = async () => {
  const sources = await window.electron.media.getDesktopSources();
    setScreenSources(sources);
    setScreenSharePopupVisible(true);
  };

window.electron.media.getDesktopSources() 是一个电子预加载函数，用于获取屏幕源。

    getDesktopSources: async () =>
      await desktopCapturer
        .getSources({
          types: ['window', 'screen'],
        })
        .then((sources) =>
          sources.map((source) => ({
            id: source.id,
            name: source.name,
            appIconUrl: source?.appIcon?.toDataURL(),
            thumbnailUrl: source?.thumbnail
              ?.resize({ height: 160 })
              .toDataURL(),
          }))
        )

获得源后，我会显示弹出窗口，从中选择源并将源 ID 传递给下一个函数。

  const onScreenChoose = async (sourceId: string, cb?: () => void) => {
    const stream = await navigator.mediaDevices.getUserMedia({
      audio: false,
      video: {
        mandatory: {
          chromeMediaSource: 'desktop',
          chromeMediaSourceId: sourceId,
        },
      } as MediaTrackConstraints,
    });
    const track = stream.getVideoTracks()[0];
    const screenTrack = AgoraRTC.createCustomVideoTrack({
      mediaStreamTrack: track,
    });
    window.agora.screenTrack?.setEnabled(false);
    window.agora.screenTrack = screenTrack;

    setScreenTrack(screenTrack);
    await screenShareClient.publish(screenTrack);
    setScreenSharePopupVisible(false);
    cb?.();
  };

Agora 屏幕在 electron 中与 react 共享，授予权限被拒绝

Agora screen sharing in electron with react, Gives permission denied

reactjs

electron

agora.io

agora-web-sdk-ng