本文主要介绍如何快速地将腾讯云 TRTC Electron SDK 集成到您的项目中。
支持的平台
- Windows(PC)
- Mac
集成 TRTC Electron SDK
步骤1：安装 Node.js
Windows 平台安装指引：
- 根据 Windows 操作系统选择下载最新版本的 Node.js 安装包
Windows Installer (.msi) 64-bit。 - 打开应用程序列表中的 Node.js command prompt，启动命令行窗口，用于输入后续步骤中的各项命令。
Mac OS 平台安装指引：
- 打开终端（Terminal）窗口，执行以下命令安装 Homebrew，如果已经安装请跳过此步骤。
$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" - 执行以下命令，安装 Node.js，必须大于 10.0 版本。
$ brew install node - 如果使用 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
在您的 Electron 项目中使用 npm 命令安装 SDK 包：
$ npm install trtc-electron-sdk@latest --save说明：TRTC Electron SDK 最新版可在 trtc-electron-sdk 中查看。
在项目脚本里引入模块并使用：
const TRTCCloud = require('trtc-electron-sdk'); this.rtcCloud = new TRTCCloud(); // 获取 SDK 版本号 this.rtcCloud.getSDKVersion();从v7.0.149起，TRTC Electron SDK 增加了 trtc.d.ts 文件，方便使用 TypeScript 的开发者：
// 开启了 ES Module 融合模式 (esModuleInterop=true) import * as trtc_namespace from 'trtc-electron-sdk'; const TRTCCloud = require('trtc-electron-sdk'); const rtcCloud: trtc_namespace.TRTCCloud = new TRTCCloud(); // 获取 SDK 版本号 rtcCloud.getSDKVersion();
打包可执行程序
步骤1：安装打包工具
- 推荐使用打包工具
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步骤2：修改 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 配置。
- 首先使
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 位。
- 然后在
rules选项中添加以下配置，targetPlatform变量可以使rewritePath可以根据不同的目标平台切换不同的配置：
rules: [
{
test: /\.node$/,
loader: 'native-ext-loader',
options: {
rewritePath: targetPlatform === 'win32' ? './resources' : '../Resources'
}
},
]该配置的含义是：
- 打包 Windows 下的 .exe 文件时，让
native-ext-loader到[应用程序根目录]/resources目录下加载 TRTC SDK。 - 打包 Mac 下的 .dmg 时，让
native-ext-loader到[应用程序目录]/Contents/Frameworsk/../Resources目录下加载 TRTC SDK。
还需要在 package.json 中的构建脚本中添加 --target_platform 参数，将在下一步进行。
步骤3：修改 package.json 配置
package.json 位于项目的根目录，其中包含了项目打包所必须的信息。但默认情况下，package.json 中的路径是需要修改才能顺利实现打包的，我们可以按如下步骤修改此文件：
- 修改
main配置。
// 多数情况下，main 文件名称可以任意配置，例如 TRTCSimpleDemo 中的可以配置为：
"main": "main.electron.js",
// 但是，使用 create-react-app 脚手架创建的项目，main 文件必须配置为：
"main": "public/electron.js",- 复制以下
build配置，添加到您的package.json文件中，这是electron-builder需要读取到的配置信息。
"build": {
"appId": "[appId 请自行定义]",
"directories": {
"output": "./bin"
},
"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"
}
]
}
},在
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": "node_modules/.bin/electron-builder --mac",
"compile:win64": "node_modules/.bin/electron-builder --win --x64",
"pack:mac": "npm run build:mac && npm run compile:mac",
"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": "node_modules/.bin/electron-builder --mac",
"compile:win64": "node_modules/.bin/electron-builder --win --x64",
"pack:mac": "npm run build:mac && npm run compile:mac",
"pack:win64": "npm run build:win && npm run compile:win64"
}说明：
main：Electron 的入口文件，一般情况下可以自由配置。但如果项目使用create-react-app脚手架创建，则入口文件必须配置为public/electron.js。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：先调用 compile:win64 构建代码，再调用 compile:win64 打包成 .exe 安装文件。
步骤4：执行打包命令
- 打包 Mac .dmg 安装文件：
$ cd [项目目录]
$ npm run pack:mac成功执行后，打包工具会生成 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 文件）。目前我们正在研究跨平台打包方案，敬请期待。
常见问题
1. 防火墙有什么限制？
由于 SDK 使用 UDP 协议进行音视频传输，所以对 UDP 有拦截的办公网络下无法使用，如遇到类似问题，请参考 应对公司防火墙限制。
2. Electron 安装或打包异常
如果您在集成 Electron 过程中遇到异常：例如安装超时或失败，打包后出现 trtc_electron_sdk.node 文件加载失败等情况，请参考 Electron 常见问题收录。
