WGShare.Client.Electron/preload.js

// 在 preload 脚本中。
const { ipcRenderer, contextBridge } = require('electron')
const {
  createAgoraRtcEngine,
  ClientRoleType,
  VideoSourceType,
  VideoViewSetupMode,
  ScreenCaptureSourceType,
  RenderModeType,
} = require("agora-electron-sdk");
const agoraAonfig = require('./src/utils/package/agoraConfig')
const rtcEngine = createAgoraRtcEngine();
rtcEngine.initialize({
  appId: agoraAonfig.appid,
});

let videoID = '';
const getDom = () => {
  return document.getElementById(videoID);
}

const EventHandles = {
  // 监听本地用户加入频道事件
  onJoinChannelSuccess: ({ channelId, localUid }, elapsed) => {
    const dom = document.getElementById('video1')
    // 本地用户加入频道后，设置本地视频窗口
    rtcEngine.setupLocalVideo({
      renderMode: RenderModeType.RenderModeFit,
      sourceType: VideoSourceType.VideoSourceScreen,
      uid: localUid,
      view: dom,
      // view: getDom(),
      setupMode: VideoViewSetupMode.VideoViewSetupAdd,
    });
  },
  // 监听远端用户加入频道事件
  onUserJoined: ({ channelId, localUid }, remoteUid, elapsed) => {
    console.log('远端用户 ' + remoteUid + ' 已加入');
    const dom = document.getElementById('video2')
    // 远端用户加入频道后，设置远端视频窗口
    rtcEngine.setupRemoteVideo(
      {
        renderMode: RenderModeType.RenderModeFit,
        sourceType: VideoSourceType.VideoSourceRemote,
        uid: remoteUid,
        view: dom,
        setupMode: VideoViewSetupMode.VideoViewSetupAdd,
      },
      { channelId },
    );

  },
  // 监听用户离开频道事件
  onUserOffline: (info, remoteUid, reason) => {
    console.log('远端用户 ' + remoteUid + ' 已离开频道');
    // 远端用户离开频道后，关闭远端视频窗口
    const dom = document.getElementById('video2')
    rtcEngine.setupRemoteVideo(
      {
        renderMode: RenderModeType.RenderModeFit,
        sourceType: VideoSourceType.VideoSourceRemote,
        uid: remoteUid,
        view: dom,
        setupMode: VideoViewSetupMode.VideoViewSetupRemove,
      },
    );
  },
};
rtcEngine.registerEventHandler(EventHandles);


contextBridge.exposeInMainWorld(
  'electron',
  {
    // 桌面捕获音频和视频的媒体源的信息
    getDesktopCapturerVideo: async () => {
      return rtcEngine.getScreenCaptureSources({ width: 300, height: 300 }, { width: 300, height: 300 }, true);
    },

    // 设置视频播放
    setDesktopCapturerVideo: (targetSource) => {
      rtcEngine.stopScreenCapture()
      if (
        targetSource.type ===
        ScreenCaptureSourceType.ScreencapturesourcetypeScreen
      ) {
        rtcEngine.startScreenCaptureByDisplayId(
          targetSource.sourceId,
          {},
          {
            windowFocus: true,
            enableHighLight: true,
            highLightColor: 0xFF99CC00,
          }
        );
      } else {
        rtcEngine.startScreenCaptureByWindowId(
          targetSource.sourceId,
          {},
          {
            windowFocus: true,
            enableHighLight: true,
            highLightColor: 0xFF99CC00,
          }
        );
      }
      videoID = `vidoe-${123}-${agoraAonfig.channelId}`;
      rtcEngine.joinChannel(agoraAonfig.token, agoraAonfig.channelId, 123, {
        autoSubscribeAudio: true, //设置是否自动订阅所有音频流
        autoSubscribeVideo: true, //设置是否自动订阅所有视频流
        publishMicrophoneTrack: false, //设置是否发布麦克风采集到的音频
        publishCameraTrack: false, //设置是否发布摄像头采集的视频
        clientRoleType: ClientRoleType.ClientRoleBroadcaster, //用户角色 1主播 2观众
        publishScreenTrack: true, //设置是否发布屏幕采集的视频
      });
    },
    // 加入频道
    setJoinChannel: () => {
      videoID = `vidoe-${234}-${agoraAonfig.channelId}`;
      rtcEngine.joinChannelEx(agoraAonfig.token, {
        channelId: agoraAonfig.channelId,
        localUid: 234,
      }, {
        autoSubscribeAudio: true, //设置是否自动订阅所有音频流
        autoSubscribeVideo: true, //设置是否自动订阅所有视频流
        publishMicrophoneTrack: false, //设置是否发布麦克风采集到的音频
        publishCameraTrack: false, //设置是否发布摄像头采集的视频
        clientRoleType: ClientRoleType.ClientRoleAudience, //用户角色 1主播 2观众
        publishScreenTrack: true, //设置是否发布屏幕采集的视频
      });
    },
    // 获取当前生成的视频id
    getVideoId: () => {
      return videoID;
    },
    // 获取摄像头以及音频内容
    getCameraAndMicrophoneMedia: async () => {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({
          video: true,
          audio: true,
        });
        stream.getTracks().forEach(track => track.stop());
        return stream
      } catch (error) {
        return false;
      }
    },
    // 设置窗口大小
    setMainWindowSize: (config) => {
      ipcRenderer.invoke('setMainWindowSize', { ...config })
    },
    // 设置窗口状态
    setViewStatus: (status) => {
      ipcRenderer.invoke('setViewStatus', status)
    },
    // 获取当前是否全屏
    getIsMaximized: () => {
      return ipcRenderer.invoke('getIsMaximized')
    }
  }
)