feat: support electron 25+

example/package.json

@@ -70,21 +70,22 @@
     ]
   },
   "dependencies": {
+    "@lwahonen/ffi-napi": "^4.0.12",
+    "@lwahonen/ref-napi": "^4.0.8",
     "agora-electron-sdk": "4.2.6",
     "antd": "^4.20.3",
     "download": "^8.0.0",
-    "ffi-napi": "^4.0.3",
     "react": "^18.1.0",
     "react-color": "^2.19.3",
     "react-dom": "^18.1.0",
     "react-router-dom": "^5.2.0",
     "recharts": "^2.1.13",
-    "ref-napi": "^3.0.3",
+    "semver": "^7.5.4",
     "source-map-support": "^0.5.16"
   },
   "devDependencies": {
     "@babel/preset-react": "^7.16.7",
-    "@electron/rebuild": "^3.2.10",
+    "@electron/rebuild": "^3.3.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.6",
     "@teamsupercell/typings-for-css-modules-loader": "^2.5.1",
     "@types/download": "^8.0.2",
@@ -94,8 +95,8 @@
     "@types/react-dom": "^18.0.3",
     "@types/react-router-dom": "^5.1.6",
     "@types/ref-napi": "^3.0.7",
-    "electron": "18.2.3",
-    "electron-builder": "^23.1.0",
+    "electron": "26.4.0",
+    "electron-builder": "^24.8.0",
     "electron-webpack": "^2.8.2",
     "fork-ts-checker-webpack-plugin": "^4.1.2",
     "react-refresh": "^0.13.0",
@@ -104,6 +105,6 @@
     "style-loader": "^2.0.0",
     "ts-loader": "^8.4.0",
     "typescript": "^4.5.2",
-    "webpack": "^4.43.0"
+    "webpack": "^4.47.0"
   }
 }

example/src/main/index.js

@@ -1,6 +1,9 @@
 import path from 'path';
 import { format as formatUrl } from 'url';
 
+import createAgoraRtcEngine, {
+  ScreenCaptureSourceType,
+} from 'agora-electron-sdk';
 import { BrowserWindow, app, ipcMain, systemPreferences } from 'electron';
 
 const isDevelopment = process.env.NODE_ENV !== 'production';
@@ -50,6 +53,66 @@ function createMainWindow() {
         return await systemPreferences.askForMediaAccess(arg.type);
       }
     });
+    // Fix for https://bugs.chromium.org/p/chromium/issues/detail?id=306348
+    ipcMain.handle('IPC_AGORA_RTC_INITIALIZE', (_, { appId }) => {
+      const engine = createAgoraRtcEngine({ webEnvReady: false });
+      const result = engine.initialize({ appId });
+      engine.enableVideo();
+      engine.addListener(
+        'onVideoDeviceStateChanged',
+        (deviceId, deviceType, deviceState) => {
+          window.webContents.send(
+            'IPC_AGORA_RTC_VIDEO_DEVICE_STATE_CHANGED',
+            deviceId,
+            deviceType,
+            deviceState
+          );
+        }
+      );
+      return result;
+    });
+    ipcMain.handle('IPC_AGORA_RTC_RELEASE', () => {
+      const engine = createAgoraRtcEngine();
+      return engine.release();
+    });
+    ipcMain.handle('IPC_AGORA_RTC_ENUMERATE_VIDEO_DEVICES', () => {
+      const engine = createAgoraRtcEngine();
+      return engine.getVideoDeviceManager().enumerateVideoDevices();
+    });
+    ipcMain.handle(
+      'IPC_AGORA_RTC_START_SCREEN_CAPTURE',
+      (_, { source, captureParams }) => {
+        const engine = createAgoraRtcEngine();
+        let result;
+        if (
+          source.type === ScreenCaptureSourceType.ScreencapturesourcetypeScreen
+        ) {
+          result = engine.startScreenCaptureByDisplayId(
+            source.sourceId,
+            {},
+            captureParams
+          );
+        } else {
+          result = engine.startScreenCaptureByWindowId(
+            source.sourceId,
+            {},
+            captureParams
+          );
+        }
+        return result;
+      }
+    );
+    ipcMain.handle(
+      'IPC_AGORA_RTC_UPDATE_SCREEN_CAPTURE_PARAMETERS',
+      (_, { captureParams }) => {
+        const engine = createAgoraRtcEngine();
+        return engine.updateScreenCaptureParameters(captureParams);
+      }
+    );
+    ipcMain.handle('IPC_AGORA_RTC_STOP_SCREEN_CAPTURE', () => {
+      const engine = createAgoraRtcEngine();
+      return engine.stopScreenCapture();
+    });
   });
 
   window.webContents.on('devtools-opened', () => {

example/src/renderer/examples/advanced/DeviceManager/DeviceManager.tsx

@@ -12,7 +12,9 @@ import {
   VideoSourceType,
   createAgoraRtcEngine,
 } from 'agora-electron-sdk';
+import { ipcRenderer } from 'electron';
 import React, { ReactElement } from 'react';
+import semver from 'semver';
 
 import {
   BaseComponent,
@@ -131,16 +133,36 @@ export default class DeviceManager
   /**
    * Step 3-1: enumerateDevices
    */
-  enumerateDevices = () => {
+  enumerateDevices = async () => {
     const playbackDevices = this.engine
       ?.getAudioDeviceManager()
       .enumeratePlaybackDevices();
     const recordingDevices = this.engine
       ?.getAudioDeviceManager()
       .enumerateRecordingDevices();
-    const videoDevices = this.engine
-      ?.getVideoDeviceManager()
-      .enumerateVideoDevices();
+    let videoDevices;
+    if (
+      semver.gt(process.versions.electron, '25.0.0') &&
+      process.platform === 'darwin'
+    ) {
+      ipcRenderer.on(
+        'IPC_AGORA_RTC_VIDEO_DEVICE_STATE_CHANGED',
+        (_, deviceId: string, deviceType: number, deviceState: number) => {
+          this.onVideoDeviceStateChanged(deviceId, deviceType, deviceState);
+        }
+      );
+
+      await ipcRenderer.invoke('IPC_AGORA_RTC_INITIALIZE', {
+        appId: Config.appId,
+      });
+      videoDevices = await ipcRenderer.invoke(
+        'IPC_AGORA_RTC_ENUMERATE_VIDEO_DEVICES'
+      );
+    } else {
+      videoDevices = this.engine
+        ?.getVideoDeviceManager()
+        .enumerateVideoDevices();
+    }
 
     this.setState({
       playbackDevices,
@@ -233,6 +255,7 @@ export default class DeviceManager
    * Step 5: releaseRtcEngine
    */
   protected releaseRtcEngine() {
+    ipcRenderer.invoke('IPC_AGORA_RTC_RELEASE');
     this.engine?.unregisterEventHandler(this);
     this.engine?.release();
   }

example/src/renderer/examples/advanced/ProcessVideoRawData/ProcessVideoRawData.tsx

@@ -2,17 +2,17 @@
 import os from 'os';
 import path from 'path';
 
+import ffi, {
+  LibraryObject,
+  LibraryObjectDefinitionToLibraryDefinition,
+} from '@lwahonen/ffi-napi';
 import {
   ChannelProfileType,
   ClientRoleType,
   IRtcEngineEventHandler,
   createAgoraRtcEngine,
 } from 'agora-electron-sdk';
 import download from 'download';
-import ffi, {
-  LibraryObject,
-  LibraryObjectDefinitionToLibraryDefinition,
-} from 'ffi-napi';
 import React, { ReactElement } from 'react';
 
 import {

example/src/renderer/examples/advanced/ScreenShare/ScreenShare.tsx

@@ -8,14 +8,17 @@
   RenderModeType,
   RtcConnection,
   RtcStats,
+  ScreenCaptureParameters,
   ScreenCaptureSourceInfo,
   ScreenCaptureSourceType,
   UserOfflineReasonType,
   VideoSourceType,
   createAgoraRtcEngine,
 } from 'agora-electron-sdk';
+import { ipcRenderer } from 'electron';
 import React, { ReactElement } from 'react';
 import { SketchPicker } from 'react-color';
+import semver from 'semver';
 
 import {
   BaseComponent,
@@ -167,7 +170,7 @@
   /**
    * Step 3-2: startScreenCapture
    */
-  startScreenCapture = () => {
+  startScreenCapture = async () => {
     const {
       targetSource,
       width,
@@ -187,47 +190,72 @@
       return;
     }
 
+    let captureParams: ScreenCaptureParameters = {};
+    if (
+      targetSource.type ===
+      ScreenCaptureSourceType.ScreencapturesourcetypeScreen
+    ) {
+      captureParams = {
+        dimensions: { width, height },
+        frameRate,
+        bitrate,
+        captureMouseCursor,
+        excludeWindowList,
+        excludeWindowCount: excludeWindowList.length,
+        highLightWidth,
+        highLightColor,
+        enableHighLight,
+      };
+    } else {
+      captureParams = {
+        dimensions: { width, height },
+        frameRate,
+        bitrate,
+        windowFocus,
+        highLightWidth,
+        highLightColor,
+        enableHighLight,
+      };
+    }
+
+    if (
+      semver.gt(process.versions.electron, '25.0.0') &&
+      process.platform === 'darwin'
+    ) {
+      await ipcRenderer.invoke('IPC_AGORA_RTC_INITIALIZE', {
+        appId: Config.appId,
+      });
+      await ipcRenderer.invoke('IPC_AGORA_RTC_START_SCREEN_CAPTURE', {
+        source: targetSource,
+        captureParams,
+      });
+    }
+
+    // Keep screen capture in the renderer process
     if (
       targetSource.type ===
       ScreenCaptureSourceType.ScreencapturesourcetypeScreen
     ) {
       this.engine?.startScreenCaptureByDisplayId(
         targetSource.sourceId,
         {},
-        {
-          dimensions: { width, height },
-          frameRate,
-          bitrate,
-          captureMouseCursor,
-          excludeWindowList,
-          excludeWindowCount: excludeWindowList.length,
-          highLightWidth,
-          highLightColor,
-          enableHighLight,
-        }
+        captureParams
       );
     } else {
       this.engine?.startScreenCaptureByWindowId(
         targetSource.sourceId,
         {},
-        {
-          dimensions: { width, height },
-          frameRate,
-          bitrate,
-          windowFocus,
-          highLightWidth,
-          highLightColor,
-          enableHighLight,
-        }
+        captureParams
       );
     }
+
     this.setState({ startScreenCapture: true });
   };
 
   /**
    * Step 3-2 (Optional): updateScreenCaptureParameters
    */
-  updateScreenCaptureParameters = () => {
+  updateScreenCaptureParameters = async () => {
     const {
       width,
       height,
@@ -240,7 +268,8 @@
       highLightColor,
       enableHighLight,
     } = this.state;
-    this.engine?.updateScreenCaptureParameters({
+
+    const captureParams: ScreenCaptureParameters = {
       dimensions: { width, height },
       frameRate,
       bitrate,
@@ -251,7 +280,22 @@
       highLightWidth,
       highLightColor,
       enableHighLight,
-    });
+    };
+
+    if (
+      semver.gt(process.versions.electron, '25.0.0') &&
+      process.platform === 'darwin'
+    ) {
+      await ipcRenderer.invoke(
+        'IPC_AGORA_RTC_UPDATE_SCREEN_CAPTURE_PARAMETERS',
+        {
+          captureParams,
+        }
+      );
+    }
+
+    // Keep screen capture in the renderer process
+    this.engine?.updateScreenCaptureParameters(captureParams);
   };
 
   /**
@@ -286,8 +330,18 @@
   /**
    * Step 3-5: stopScreenCapture
    */
-  stopScreenCapture = () => {
+  stopScreenCapture = async () => {
+    if (
+      semver.gt(process.versions.electron, '25.0.0') &&
+      process.platform === 'darwin'
+    ) {
+      await ipcRenderer.invoke('IPC_AGORA_RTC_STOP_SCREEN_CAPTURE');
+      await ipcRenderer.invoke('IPC_AGORA_RTC_RELEASE');
+    }
+
+    // Keep screen capture in the renderer process
     this.engine?.stopScreenCapture();
+
     this.setState({ startScreenCapture: false });
   };
 
@@ -542,7 +596,7 @@
                   };
                 })}
               value={excludeWindowList}
               onValueChange={(value, index) => {
                 if (excludeWindowList.indexOf(value) === -1) {
                   this.setState((preState) => {
                     return {

example/webpack.renderer.additions.js

@@ -81,8 +81,8 @@ module.exports = function (config) {
     // ...config.externals,
     'webpack',
     'agora-electron-sdk',
-    'ffi-napi',
-    'ref-napi',
+    '@lwahonen/ffi-napi',
+    '@lwahonen/ref-napi',
   ];
   console.log('config', config.module.rules);
   return config;