# zego-electron-quick-start

**Repository Path**: kennethluff/zego-electron-quick-start

## Basic Information

- **Project Name**: zego-electron-quick-start
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2021-02-27
- **Last Updated**: 2024-11-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# zego-electron-quick-start 

1. 安装好node环境。[https://nodejs.org/dist/v10.14.1/node-v10.14.1-x86.msi](https://nodejs.org/dist/v10.14.1/node-v10.14.1-x86.msi)
2. 按照以下命令执行。

## 执行以下命令，下载工程源码
```
$ git clone https://github.com/zegoim/zego-electron-quick-start.git
```

## 进入`zego-electron-quick-start`目录
```
$ cd zego-electron-quick-start
```

## 先配置淘宝镜像，并安装依赖，命令如下
```
$ npm config set registry http://registry.npm.taobao.org/
$ npm install （或者使用 cnpm install 下载依赖速度会快很多）
```
## 如果使用淘宝镜像，npm install安装依赖时失败了，请切换到国外镜像，并设置通过代理访问，设置方法如下

+ 设置国外镜像，并通过代理访问国外镜像的方法是，执行以下命令
```
$ npm config set registry https://registry.npmjs.org/
  // 设置代理
$ npm config set proxy http://127.0.0.1:1080
  // 设置https代理
$ npm config set https-proxy http://127.0.0.1:1080
```
## 如果使用国外镜像，npm install安装依赖时失败了，请切换到国内淘宝镜像，设置方法如下
+ 设置npm淘宝镜像的方法是，执行以下命令
```
$ npm config set registry http://registry.npm.taobao.org/
  // 删除http代理
$ npm config delete proxy
  // 删除https代理
$ npm config delete https-proxy
```

<div STYLE="page-break-after: always;"></div>

## 修改填写`renderer.js`的第10行的 app_id 和 app_sign
```
// 请在 [即构管理控制台](https://console.zego.im/acount) 申请 SDK 初始化需要的 AppID 和 AppSign
// 获取 AppID 和 AppSign 指引](https://doc.zego.im/API/HideDoc/GetAppIDGuide/GetAppIDGuideline.html)。
// app id
const app_id = "";//向zego获取app id，ID为字符串
// app sign
const app_sign = [];//向zego获取测试app_sign，是一个数组，格式例如 [0x01, 0x03, 0x44, ....]
```

## 运行测试程序
```
$ npm start
```

## 打包发布测试程序
```
mac 平台打包，不使用签名时使用以下命令禁止
$ export CSC_IDENTITY_AUTO_DISCOVERY=false
```
```
$ npm run pkg
```

## 执行成功后，`dist`目录下生成

* 安装包文件：
`zego-electron-quick-start Setup 1.0.0.exe`

* 未打成安装包的可执行文件目录：
`win-ia32-unpacked`

<div STYLE="page-break-after: always;"></div>

# 要在自己项目中集成zego sdk的步骤

1. 参考文档末尾```实践 ```章节集成sdk。


2. 在工程项目中的renderer.js文件中添加以下代码，引入zego sdk，[参考代码 ](https://github.com/zegoim/zego-electron-quick-start//blob/master/renderer.js#L5)

```
var ZegoLiveRoom = require("zegoliveroom/ZegoLiveRoom.js");
var ZEGOCONSTANTS = require("zegoliveroom/ZegoConstant.js");
```
3. 创建zego client，[参考代码 ](https://github.com/zegoim/zego-electron-quick-start//blob/master/renderer.js#L14)
```
var zegoClient = new ZegoLiveRoom();
```
4. 配置当前环境，[参考代码 ](https://github.com/zegoim/zego-electron-quick-start//blob/master/renderer.js#L63)
```
  // 配置设置当前环境为测试环境
  zegoClient.setUseEnv({ use_test_env: true });
```
5. 初始化sdk，[参考代码 ](https://github.com/zegoim/zego-electron-quick-start//blob/master/renderer.js#L66)
```
  // 初始化sdk
  let ret = zegoClient.initSDK({
    app_id: app_id,           // appid
    sign_key: app_sign,       // app sign
    user_id: TEST_USER_ID,    // 用户id
    user_name: TEST_USER_NAME // 用户名字
  }, rs => {
    if (rs.error_code == 0) {
      console.log("sdk初始化成功");
    } else {
      console.log("sdk初始化失败,错误码为：" + rs.error_code);
      zegoClient.unInitSDK();
    }
  });
  if (ret) {
    console.log("正在初始化...");
  } else {
    console.log("sdk初始化失败");
    zegoClient.unInitSDK();
  }
```
6. 登录房间，[参考代码 ](https://github.com/zegoim/zego-electron-quick-start//blob/master/renderer.js#L91)
```
  // 登陆房间
  let ret = zegoClient.loginRoom({
    room_id: TEST_ROOM_ID,                    // 房间id
    room_name: TEST_ROOM_NAME,                // 房间名字
    role: ZEGOCONSTANTS.ZegoRoomRole.Audience // 房间角色
  }, rs => {
    console.log("登录结果返回 ", rs);
    if (rs.error_code == 0) {
      console.log("登录成功");
    } else {
      console.log("登录失败，错误码为：" + rs.error_code);
    }
  });
```

7. 选择设备，[参考代码](https://github.com/zegoim/zego-electron-quick-start//blob/master/renderer.js#L105)
```
  // 获取摄像头设备列表
  let video_devices_list = zegoClient.getVideoDeviceList();
  console.log("got video devices list:", video_devices_list);
  if(video_devices_list.length > 0){
    let cur_sel_index = 0; // 设备索引，选择第一个设备
    zegoClient.setVideoDevice({
      device_id: video_devices_list[cur_sel_index].device_id 
    });
  }
```

8. 预览摄像头，[参考代码 ](https://github.com/zegoim/zego-electron-quick-start//blob/master/renderer.js#L121)
```
  // 设置预览view
  let set_ret = zegoClient.setPreviewView({
    // 设置canvas
    canvas_view: document.getElementById("localVideo"),
    // 通道索引，默认主通道
    channel_index: ZEGOCONSTANTS.PublishChannelIndex.PUBLISH_CHN_MAIN
  });
  if (set_ret) {
    // 开始预览 
    let preview_ret = zegoClient.startPreview({
      channel_index: ZEGOCONSTANTS.PublishChannelIndex.PUBLISH_CHN_MAIN
    });
    console.log("预览结果", preview_ret);
  }
```

9. 开启回音消除、噪音消除和增益，[参考代码 ](https://github.com/zegoim/zego-electron-quick-start//blob/master/renderer.js#L132)

```
    // 开启回音消除
    zegoClient.enableAEC({enable:true});
    // 开启噪音消除
    zegoClient.enableANS({enable:true});
    // 开启自动增益控制
    zegoClient.enableAGC({enable:true});
```

10. 开始推流，发送音视频数据，[参考代码 ](https://github.com/zegoim/zego-electron-quick-start//blob/master/renderer.js#L144)
```
  // 开始推流
  let ret = zegoClient.startPublishing({
    title: "zego electron simple test xx",// 推流标题
    stream_id: TEST_PUB_STREAM_ID,// 推流id
    // 推流flag，连麦、混流还是单主播
    publish_flag: ZEGOCONSTANTS.ZegoPublishFlag.ZEGO_JOIN_PUBLISH, 
    params: ""// 推流参数
  });
```

11. 开始拉流，播放音视频数据，开发过程中，需要传递的流id参数是对方的流id，这里为了演示，拉取的是自己的流id。[参考代码 ](https://github.com/zegoim/zego-electron-quick-start//blob/master/renderer.js#L156)
```
 // 开始拉流播放
  zegoClient.startPlayingStream({
   stream_id: TEST_PLAY_STREAM_ID,                      // 拉流id
   canvas_view: document.getElementById("remoteVideo"), // 设置播放的canvas
   params: ""                                           // 拉流参数
  });
```
<div STYLE="page-break-after: always;"></div>

12. 停止拉流播放音视频数据，[参考代码 ](https://github.com/zegoim/zego-electron-quick-start//blob/master/renderer.js#L164)
```
  zegoClient.stopPlayingStream({ 
    stream_id: TEST_PLAY_STREAM_ID  // 流id
  });
```

13. 停止推流发送音视频数据，[参考代码 ](https://github.com/zegoim/zego-electron-quick-start//blob/master/renderer.js#L214)
```
  zegoClient.stopPublishing({
       // 通道
       channel_index: ZEGOCONSTANTS.PublishChannelIndex.PUBLISH_CHN_MAIN 
  });
```
14. 退出房间，[参考代码 ](https://github.com/zegoim/zego-electron-quick-start//blob/master/renderer.js#L219)
```
  zegoClient.logoutRoom(rs => { });
```
15. 反初始化sdk，[参考代码 ](https://github.com/zegoim/zego-electron-quick-start//blob/master/renderer.js#L224)
```
  zegoClient.unInitSDK();
```
16. 生产环境中，不打开调试栏，关闭方法为，注释掉main.js的第18行代码，[mainWindow.webContents.openDevTools()](https://github.com/zegoim/zego-electron-quick-start//blob/master/main.js#L18)

17. 更多的功能接口和触发通知事件，请查阅工程demo示例和 [官网SDK](https://doc.zego.im/CN/307.html) 的[ Electron API接口](https://doc.zego.im/API/ZegoLiveRoom/Electron/html/index.html)文档。

28. **注意点说明**
-  推流和拉流：Zego SDK 把采集我方的音视频，编码后发送到 Zego 实时网络，此步骤被称为“推流”。同时，Zego SDK 从 Zego 实时网络中接收对方的音视频数据流，解码得到对方的声音与画面，此步骤被称作“拉流”。通话双方各自推我方流和拉对方流，视频通话就建立起来了。
- 用户id设置：业务保证唯一即可。
- 推流时机：登陆房间成功后，在进行推流操作。
- 拉流时机：在实现过程中，拉取的是对方的流，所以拉流操作传递的流id参数是对方的流id。在onStreamUpdated事件的流新增事件时可以获取到对方的流id。当收到新增流事件时在进行拉流操作。
- 房间登录相关说明，查看官网[房间登录](https://www.zego.im/html/document/#Application_Scenes/FAQ/Login)。
<div STYLE="page-break-after: always;"></div>

# ZEGO LiveRoom Electron SDK 版本号迭代管理

### Electron SDK版本号

在工程package.json文件中，通过指定zego liveroom sdk版本号，可以下载到指定版本的sdk。

### 迭代版本号

包括两部分：前缀和sdk迭代版本号；
其中前缀表示对应的Electron版本号。
sdk迭代版本号是ZEGO每次迭代更新SDK后，以当前年月作为迭代版本号。

例如：2020年5月份zego发布的Electron sdk版本列表如下：

```
1.8.4-2020-05
1.8.8-2020-05
2.0.18-2020-05
3.0.16-2020-05
3.1.13-2020-05
4.0.8-2020-05
4.1.5-2020-05
4.2.11-2020-05
4.2.12-2020-05
5.0.8-2020-05
5.0.11-2020-05
5.0.12-2020-05
```

### latest版本

一些新特性的更新需要，ZEGO 提供latest版本.

通过以下版本号可以下载到对应electron版本的最新zego sdk。

```
1.8.4-latest
1.8.8-latest
2.0.18-latest
3.0.16-latest
3.1.13-latest
4.0.8-latest
4.1.5-latest
4.2.11-latest
4.2.12-latest
5.0.8-latest
5.0.11-latest
5.0.12-latest
6.0.12-latest
```

### 实践

使用5.0.12的Electron，要下载zego的2020年05月份的版本sdk。配置如下

**方式一：**

通过postinstall配置zegodown指定版本号。

```
{
  "name": "zego-electron-quick-start",
  "version": "1.0.0",
  "description": "A zego electron sdk quick start application",
  "main": "main.js",
  "scripts": {
    "postinstall": "node node_modules/zegodown/bin/zegodown -v 5.0.12-2020-05",
    "start": "electron ."
  },
  "author": "zego",
  "license": "MIT",
  "devDependencies": {
    "electron": "5.0.12",
    "electron-builder": "^20.28.4"
  },
  "dependencies": {
    "zegoliveroom": "latest",
    "zegodown": "latest"
  },
  "build": {
    "extraResources": [
      "./node_modules/zegoliveroom/**"
    ]
  }
}
```

如果指定下载32位,postinstall配置为
node node_modules/zegodown/bin/zegodown  -v 4.0.8 -a ia32

如果指定下载64位
node node_modules/zegodown/bin/zegodown  -v 4.0.8 -a x64

如果不指定，默认取值为node的os.platform()平台信息

mac 下不支持32位，都为64位。

**方式二：**

通过配置zegoDeps指定版本号。

```
{
  "name": "zego-electron-quick-start",
  "version": "1.0.0",
  "description": "A zego electron sdk quick start application",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "zegoDeps": {
    "electron": "5.0.12-2020-05",
    "arch": "auto"
  },  
  "author": "zego",
  "license": "MIT",
  "devDependencies": {
    "electron": "5.0.12",
    "electron-builder": "^20.28.4"
  },
  "dependencies": {
    "zegoliveroom": "latest",
    "zegodown": "latest"
  },
  "build": {
    "extraResources": [
      "./node_modules/zegoliveroom/**"
    ]
  }
}
```

"electron": "5.0.12" 表示对应的Electron版本号，

"arch": "auto"      表示自动根据平台下载32位或者64位信息。

"arch": "ia32"      表示指定32位的zego sdk。

"arch": "x64"       表示指定64位zego sdk。

 mac 下不支持32位，都为64位。

### postinstall 和 zegoDeps区别：

配置postinstall 下载zego sdk，用户每次执行npm install 时，都会从zego服务器下载sdk并替换更新本地的。

配置zegoDeps 只有第一次npm install 时会下载zego sdk，以后执行npm install时，不会再下载更新，除非删除掉node_modules文件夹，在执行npm install 才会重新下载。



目前支持指定以下版本Electron

```
['1.8.4', '1.8.8', '2.0.18', '3.0.16', '3.1.13', '4.0.8', '4.1.5', '4.2.11', '5.0.11', '5.0.12']

[
'1.8.4-2020-05',
'1.8.8-2020-05',
'2.0.18-2020-05',
'3.0.16-2020-05',
'3.1.13-2020-05',
'4.0.8-2020-05',
'4.1.5-2020-05',
'4.2.11-2020-05',
'4.2.12-2020-05',
'5.0.8-2020-05',
'5.0.11-2020-05',
'5.0.12-2020-05'
]

[
'1.8.4-latest',
'1.8.8-latest',
'2.0.18-latest',
'3.0.16-latest',
'3.1.13-latest',
'4.0.8-latest',
'4.1.5-latest',
'4.2.11-latest',
'4.2.12-latest',
'5.0.8-latest',
'5.0.11-latest',
'5.0.12-latest'
'6.0.12-latest'
]

```