自 v4.0.9 开始，QNRTC Web SDK 支持直接在 Electron 中使用。

首先初始化一个 Electron 项目，package.json 文件大概如下：

{
  "name": "rtc-electron-demo",
  "version": "1.0.0",
  "private": true,
  "description": "rtc electron demo",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-builder -mwl"
  },
  "license": "MIT",
  "devDependencies": {
    "electron": "^17.0.0",
    "electron-builder": "^22.14.13"
  },
  "build": {
    "appId": "qiniu.pili-rtc-web",
    "mac": {
      "category": "public.app-category.business"
    }
  }
}

可以看到，这里定义的入口文件为 main.js，下面是一个简单的例子：

const { app, BrowserWindow } = require('electron')
const { ipcMain, desktopCapturer } = require('electron')

// 注意这里，Electron 中实现屏幕共享的一个步骤
ipcMain.handle(
  'QNRTC_DESKTOP_CAPTURER_GET_SOURCES',
  (event, opts) => desktopCapturer.getSources(opts)
)

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    },
  })

  // 直接加载牛会议 Demo
  win.loadURL('https://demo-rtc.qiniuapi.com/')
}

app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

最后安装相关依赖，即可启动：

npm install
npm run start

Electron 中可以直接调用 Web SDK 的接口，但是屏幕共享功能在 Electron 环境中比较特殊，需要调用单独的接口。

Electron 中实现屏幕共享，需要调用 Electron 提供的 desktop capturer 接口。

可以自己调用该接口来获取数据源，然后结合 SDK 提供的 createCustomVideoTrack 接口来创建自定义视频 Track 发布到房间。

SDK 也对该功能提供了一定程度的封装，提供了两种方法，方便直接调用。下面来看如何使用 SDK 提供的接口完成屏幕共享。

由于 Electron 在 17.0 中 删除 了在 renderer 中直接引用 desktopCapturer，因此需要在主进程中将该方法提供给 renderer，供 SDK 运行时调用。代码如下：

const { ipcMain, desktopCapturer } = require('electron')

// 注意参数不可修改，SDK 需要根据这里的参数定义来做相应的调用
ipcMain.handle(
  'QNRTC_DESKTOP_CAPTURER_GET_SOURCES',
  (event, opts) => desktopCapturer.getSources(opts)
)

然后下面就可以开始调用 SDK 的方法来完成屏幕共享了。

第一种方法，直接调用 createScreenVideoTrack 方法，调用与正常逻辑完全一致，SDK 会自动判断是否处于 Electron 环境，并调用相应的方法来完成屏幕数据采集。

使用这个方法，SDK 提供了一个默认的 UI 选择框，用户点击相应的数据源之后就会直接采集了。

第二种方法，可以先调用接口获取数据源列表，然后再指定特定的数据源进行屏幕数据采集。这种方法针对需要进行更多自定义的场景。示例代码如下：

import QNRTC, { QNElectronScreenSourceType } from "qnweb-rtc";

// 获取数据源列表
const sources = await QNRTC.getElectronScreenSources(QNElectronScreenSourceType.ALL);

// 选择特定的数据源
const targetSourceID = sources[0].ID;

// 采集特定 sourceID 的屏幕数据
const mScreenVideoTrack = await QNRTC.createScreenVideoTrack({
    electronScreenSourceID: targetSourceID
});