实时音视频
文档捉虫大赛：人工智能与机器学习专题> HOT
文档中心 > 实时音视频 > 无 UI 集成方案 > 1. 导入 SDK 到项目中 > Electron

Electron

最近更新时间：2023-05-29 17:06:30

我的收藏

本页目录：

本文主要介绍如何快速地将腾讯云 TRTC Electron SDK 集成到您的项目中，只要按照如下步骤进行配置，就可以完成 SDK 的集成工作。



支持的平台

Windows（PC）
Mac

导入 SDK

步骤1. 安装 Node.js

Windows 平台安装指引
MacOS 平台安装指引
1. 根据 Windows 操作系统选择下载最新版本的 Node.js 安装包 Windows Installer (.msi) 64-bit。
2. 打开应用程序列表中的 Node.js command prompt，启动命令行窗口，用于输入后续步骤中的各项命令。


1. 打开终端（Terminal）窗口，执行以下命令安装 Homebrew，如果已经安装请跳过此步骤。
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
2. 执行以下命令，安装 Node.js，必须大于 10.0 版本。
brew install node
3. 如果使用 Homebrew 的默认地址安装 Node.js 较慢，您可以考虑替换为国内镜像地址。
cd `brew --repo`
git remote set-url origin https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/brew.git
brew update


步骤2：安装 Electron

在命令行窗口中执行如下命令，安装 Electron，建议版本号 >= 4.0.0。
npm install electron@latest --save-dev
说明
在国内网络安装 Electron 可能会遇到一系列下载过程的障碍。如果您安装 Electron 没有成功，可以参考 Electron 常见问题收录 进行处理。

步骤3：安装 Electron 版的 TRTC SDK

1. 在您的 Electron 项目中使用 npm 命令安装 SDK 包：
npm install trtc-electron-sdk@latest --save
说明
TRTC Electron SDK 最新版可在 trtc-electron-sdk 中查看。
2. 在项目脚本里引入模块并使用：
const TRTCCloud = require('trtc-electron-sdk').default;
// import TRTCCloud from 'trtc-electron-sdk';
this.rtcCloud = new TRTCCloud();
// 获取 SDK 版本号
this.rtcCloud.getSDKVersion();
从v7.9.348起，TRTC Electron SDK 增加了 trtc.d.ts 文件，方便使用 TypeScript 的开发者：
import TRTCCloud from 'trtc-electron-sdk';
const rtcCloud: TRTCCloud = new TRTCCloud();
// 获取 SDK 版本号
rtcCloud.getSDKVersion();

步骤4：打包可执行程序

安装打包工具：推荐使用打包工具 electron-builder 进行打包，您可以执行如下命令安装 electron-builder。
npm install electron-builder@latest --save-dev
为了正确打包 Electron 版本的 TRTC SDK（也就是 trtc_electron_sdk.node 文件），您还需要执行如下命令以安装 native-ext-loader 工具。
npm install native-ext-loader@latest --save-dev

步骤5：修改打包配置，以 webpack.config.js 为例

webpack.config.js 包含了项目构建的配置信息，webpack.config.js 文件的位置如下：
通常情况下，webpack.config.js 位于项目的根目录。
使用 create-react-app 创建项目的情况下，此配置文件为 node_modules/react-scripts/config/webpack.config.js。
使用 vue-cli 创建项目的情况下，webpack 的配置存放在 vue.config.js 配置中的 configureWebpack 属性中。
如您的工程文件经过了定制化，还请自行查找 webpack 配置。

1. 首先使 webpack.config.js 在构建时可以接收名为 --target_platform 的命令行参数，以使代码构建过程按不同的目标平台特点正确打包，在 module.exports 之前添加以下代码：
const os = require('os');
const targetPlatform = (function(){
     let target = os.platform();
     for (let i=0; i<process.argv.length; i++) {
         if (process.argv[i].includes('--target_platform=')) {
             target = process.argv[i].replace('--target_platform=', '');
             break;
         }
     }
     if (!['win32', 'darwin'].includes) target = os.platform();
     return target;
})();
注意
os.platform() 返回的结果中，"darwin" 表示 Mac 平台。"win32" 表示 Windows 平台，不论 64 位还是 32 位。
2. 然后在 rules 选项中添加以下配置，targetPlatform 变量可以使 rewritePath 可以根据不同的目标平台切换不同的配置：
rules: [
  { 
       test: /\\.node$/, 
       loader: 'native-ext-loader', 
       options: { 
           rewritePath: targetPlatform === 'win32' ? './resources' : '../Resources'
           // 针对开发环境
           // rewritePath: './node_modules/trtc-electron-sdk/build/Release'
       } 
   },
]
该配置的含义是：
打包 Windows 下的 .exe 文件时，让 native-ext-loader 到 [应用程序根目录]/resources 目录下加载 TRTC SDK。
打包 Mac 下的 .dmg 时，让 native-ext-loader 到 [应用程序目录]/Contents/Frameworsk/../Resources 目录下加载 TRTC SDK。
本地开发运行时，让 native-ext-loader 到 ./node_modules/trtc-electron-sdk/build/Release 目录下加载 TRTC SDK，请参见 simple demo 配置。
还需要在 package.json 中的构建脚本中添加 --target_platform 参数，将在下一步进行。

步骤6：修改 package.json 配置

package.json 位于项目的根目录，其中包含了项目打包所必须的信息。但默认情况下，package.json 中的路径是需要修改才能顺利实现打包的，我们可以按如下步骤修改此文件：
1. 修改 main 配置。
// 多数情况下，main 文件名称可以任意配置，例如 TRTCSimpleDemo 中的可以配置为：
"main": "main.electron.js",

// 但是，使用 create-react-app 脚手架创建的项目，main 文件必须配置为：
"main": "public/electron.js",
2. 复制以下 build 配置，添加到您的 package.json 文件中，这是 electron-builder 需要读取到的配置信息。Mac 下因合规和设备原因，不同 SDK 版本需要使用不同的配置。
10.3 以下版本
10.3 版本
10.3 以上版本
"build": {
  "appId": "[appId 请自行定义]",
  "directories": {
    "output": "./bin"
  },
  "asar": true,
  "win": {
    "extraFiles": [
      {
          "from": "node_modules/trtc-electron-sdk/build/Release/",
          "to": "./resources",
          "filter": ["**/*"]
        }
      ]
  },
  "mac": {
     "extraFiles": [
        { 
          "from": "node_modules/trtc-electron-sdk/build/Release/trtc_electron_sdk.node", 
          "to": "./Resources" 
        }
      ]
   }
},
从 10.3 版本开始，Mac 因合规要求，拆解出了运行时的两个动态库，安装 SDK 后位于 node_modules/trtc-electron-sdk/build/mac-framework/ 目录下，构建应用安装包时，需要在 build.mac.extraFiles 下配置这两个动态库，否则会导致应用包运行时奔溃。
"build": {
  "appId": "[appId 请自行定义]",
  "directories": {
    "output": "./bin"
  },
  "asar": true,
  "win": {
    "extraFiles": [
      {
          "from": "node_modules/trtc-electron-sdk/build/Release/",
          "to": "./resources",
          "filter": ["**/*"]
        }
      ]
  },
  "mac": {
     "extraFiles": [
        { 
          "from": "node_modules/trtc-electron-sdk/build/Release/trtc_electron_sdk.node", 
          "to": "./Resources" 
        },
        {
          "from": "node_modules/trtc-electron-sdk/build/mac-framework/",
          "to": "./Frameworks"
        }
      ]
   }
},
从 10.6 版本开始，Mac 下支持原生 ARM64 指令架构的包，同时提供 X64 和 ARM64 指令架构的动态库文件，支持使用 electron-builder 的 “--universal” 参数，构建双指令架构的应用包，优点是可同时在 X64 和 ARM64 芯片的设备上提供优良的性能体验，缺点是应用的包体积大约会增加 70%。不使用 “--universal” 参数时，构建的是单指令架构的应用包，默认与构建时使用的计算机 CPU 芯片类型一致，此时应用安装包在另一种 CPU 芯片类型的机器上将无法安装。

注意：electron-builder 需要升级到 23.0.2 或更高版本。
"build": {
  "appId": "[appId 请自行定义]",
  "directories": {
    "output": "./bin"
  },
  "asar": true,
  "asarUnpack": "**\\\\*.{node,dll}",
  "win": {
    "extraFiles": [
      {
          "from": "node_modules/trtc-electron-sdk/build/Release/",
          "to": "./resources",
          "filter": ["**/*"]
        }
      ]
  },
  "mac": {
     "extraFiles": [
        {
          "from": "node_modules/trtc-electron-sdk/build/Release/${arch}/trtc_electron_sdk.node",
          "to": "./Resources"
        },
        {
          "from": "node_modules/trtc-electron-sdk/build/mac-framework/${arch}/",
          "to": "./Frameworks"
        }
      ]
   }
},

3. 在 scripts 节点下添加以下构建和打包的命令脚本： 本文以 create-react-app 和 vue-cli 项目为例，其它工具创建的项目也可以参考此配置：
// create-react-app 项目请使用此配置
"scripts": {
  "build:mac": "react-scripts build --target_platform=darwin",
  "build:win": "react-scripts build --target_platform=win32",
  "compile:mac": "electron-builder --mac",
  "compile:mac-universal": "electron-builder --mac --universal",                // 10.3 及以下版本不支持
  "compile:win64": "electron-builder --win --x64",
  "pack:mac": "npm run build:mac && npm run compile:mac",
  "pack:mac-universal": "npm run build:mac && npm run compile:mac-universal",   // 10.3 及以下版本不支持
  "pack:win64": "npm run build:win && npm run compile:win64"
}

// vue-cli 项目请使用此配置
"scripts": {
  "build:mac": "vue-cli-service build --target_platform=darwin",
  "build:win": "vue-cli-service build --target_platform=win32",
  "compile:mac": "electron-builder --mac",
  "compile:mac-universal": "electron-builder --mac --universal",                // 10.3 及以下版本不支持
  "compile:win64": "electron-builder --win --x64",
  "pack:mac": "npm run build:mac && npm run compile:mac",
  "pack:mac-universal": "npm run build:mac && npm run compile:mac-universal",   // 10.3 及以下版本不支持
  "pack:win64": "npm run build:win && npm run compile:win64"
}
参数
说明
main
Electron 的入口文件，一般情况下可以自由配置。但如果项目使用 create-react-app 脚手架创建，则入口文件必须配置为 public/electron.js
build.asar
是否开启 Electron 应用安装包的压缩功能，默认开启。
build.asarUnpack
添加 build.asar 配置的例外文件。10.3 以后的版本，使用 `electron-builder --mac --universal` 命令构建双指令架构的应用包时，需要此配置，否则可能出现文件合并的失败或报错。
build.win.extraFiles
打包 Windows 程序时，electron-builder 会把 from 所指目录下的所有文件复制到 bin/win-unpacked/resources（全小写）
build.mac.extraFiles
打包 Mac 程序时，electron-builder 会把 from 指向的 trtc_electron_sdk.node 文件复制到 bin/mac/your-app-name.app/Contents/Resources（首字母大写）
build.directories.output
打包文件的输出路径。例如这个配置会输出到 bin 目录下，可根据实际需要修改
build.scripts.build:mac
以 Mac 平台为目标构建脚本
build.scripts.build:win
以 Windows 平台为目标构建脚本
build.scripts.compile:mac
编译为 Mac 下的 .dmg 安装文件
build.scripts.compile:win64
编译为 Windows 下的 .exe 安装文件
build.scripts.pack:mac
先调用 build:mac 构建代码，再调用 compile:mac 打包成 .dmg 安装文件
build.scripts.pack:win64
先调用 build:win 构建代码，再调用 compile:win64 打包成 .exe 安装文件

步骤7：执行打包命令

打包 Mac.dmg 安装文件：
cd [项目目录]
npm run pack:mac
// or
npm run pack:mac-universal
成功执行后，打包工具会生成 bin/your-app-name-0.1.0.dmg 安装文件，请选择此文件发布。
打包 Windows.exe 安装文件：
cd [项目目录]
npm run pack:win64
成功执行后，打包工具会生成 bin/your-app-name Setup 0.1.0.exe 安装文件，请选择此文件发布。
注意
TRTC Electron SDK 暂不支持跨平台打包（例如在 Mac 下打包 Windows 的 .exe 文件，或在 Windows 平台下打包 Mac 的 .dmg 文件）。目前我们正在研究跨平台打包方案，敬请期待。

常见问题

防火墙有什么限制？

由于 SDK 使用 UDP 协议进行音视频传输，所以对 UDP 有拦截的办公网络下无法使用，如遇到类似问题，请参见 应对公司防火墙限制。

Electron 安装或打包异常？

如果您在集成 Electron 过程中遇到异常：例如安装超时或失败，打包后出现 trtc_electron_sdk.node 文件加载失败等情况，相关问题解答请参见 Electron 相关常见问题。
若相关答疑仍未能解决问题，那推荐您参见 Electron 常见问题收录 的手动离线安装 Electron章节。

参考文档

SDK API 手册
SDK 更新日志
Simple Demo 源码
API Example 源码
Electron 常见问题
中国站