human: 如何处理七牛云的实时音视频Electron 环境下使用

gpt: [实时音视频](https://developer.qiniu.com/rtc) > 使用指南 > Web >Electron 环境下使用

#  Electron 环境下使用

最近更新时间: 2024-06-20 19:25:13

自 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](https://www.electronjs.org/docs/latest/api/desktop-capturer) 接口。

可以自己调用该接口来获取数据源，然后结合 SDK 提供的
[createCustomVideoTrack](https://developer.qiniu.com/rtc/9070/WebQNRTC#createCustomVideoTrack)
接口来创建自定义视频 Track 发布到房间。

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

由于 Electron 在 17.0 中 [删除](https://www.electronjs.org/docs/latest/breaking-
changes#planned-breaking-api-changes-170) 了在 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
    });
    

以上内容是否对您有帮助？