【寻声征文】基于Agora Electron SDK实现多人视频通话入门教程 - 专栏

我正在参加「寻声 2.0」征文活动，感兴趣的小伙伴可以点击：活动链接 参加！

Agora Electron SDK 是 Agora 原生 SDK 的 Electron 封装，它可以帮助 Electron 应用快速接入实时音视频功能。本文将带你一步步使用 Agora Electron SDK 构建一个简洁的多人视频通话应用。

准备工作

在开始之前，你需要准备以下内容：

* 一个有效的Agora开发者账号，如果没有，可以在Agora官网免费注册。你需要在声网控制台上创建一个项目，并获取项目的App ID和临时Token，这两个参数在后续的代码中会用到。

* 一个Electron项目，如果没有，可以参考Electron官方文档创建一个。你需要确保你的Electron项目能够正常运行，并且有一个基本的界面和逻辑。

* 安装Agora Electron SDK，可以通过npm或者yarn安装，也可以从源码编译。具体方法请参考Agora Electron SDK文档。你需要将Agora Electron SDK添加到你的Electron项目中，并且在代码中引入相关的模块和方法。

开发者账号

开发者账号的注册与项目创建不赘述，这儿给出官网链接

Electron项目初始化

见图1 elctron项目初始化

需要注意的是，electron的入口为main.js，在npm init的时候需要手动修改一下，其它地方默认配置即可。此时package.json应该是这样的：

{
 "name": "elc-video-call",
 "version": "1.0.0",
 "description": "A video call app powered by agora electron SDK",
 "main": "main.js",
 "author": "shentu",
 "license": "MIT"
}

接下来引入electron和agora的依赖，可以编辑package.json，添加：

"agora_electron": {
 "platform": "darwin",
 "prebuilt": true
},
 "dependencies": { "agora-electron-sdk": "latest" },
 "devDependencies": {"electron": "latest" }

然后执行`npm install`，如图2

基本的界面和逻辑

创建一个index.html并简单创建一个本地视频窗口和远程视频窗口

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8"/>
 <title>Electron Quickstart</title>
</head>
<body>
<h1>elc-video-call</h1>
<div
 id="join-channel-local-video"
 style="width: 450px; height: 450px; float: left"
></div>
<!--在界面中添加远端视频窗口 -->
<div
 id="join-channel-remote-video"
 style="width: 450px; height: 450px; float: left"
></div>
</body>
<script src="./renderer.js"></script>
</html>

初始化Agora SDK

页面创建好后，接下来我们处理核心的视频通话逻辑。首先创建index.html中引用的renderer.js。

要使用Agora Electron SDK的功能，你需要先初始化SDK，并创建一个RtcEngine实例。RtcEngine是SDK的核心类，它提供了音视频通话的主要方法和事件。

首先，你需要导入Agora Electron SDK，并调用createAgoraRtcEngine函数，来创建一个RtcEngine实例，然后，你需要调用initialize方法，传入你的Agora App ID，来初始化SDK。App ID是你在声网控制台上创建项目时获取的唯一标识，它用于鉴权和区分不同的应用。：

const {
 createAgoraRtcEngine,
 VideoMirrorModeType,
 VideoSourceType,
 RenderModeType,
 ChannelProfileType,
 ClientRoleType,
} = require("agora-electron-sdk");
...
// 创建 RtcEngine 实例
 rtcEngine = createAgoraRtcEngine();


 // 初始化 RtcEngine 实例
 rtcEngine.initialize({
 appId: APPID,
 logConfig: { filePath: sdkLogPath }
 });

加入频道

为了实现多人视频通话，你需要让不同的用户加入同一个频道。**频道是声网SDK的逻辑概念，它相当于一个虚拟的房间，只有加入同一个频道的用户才能互相看到和听到对方**。图3 声网平台注册项目的时候，可以生成频道与临时token。

你可以调用joinChannel方法，传入以下参数来加入频道：

- token: 一个字符串，用于安全认证。如果你没有启用安全认证，可以传入null。

- channel: 一个字符串，用于标识频道的名称。不同的频道名称代表不同的频道，只有使用相同频道名称的用户才能加入同一个频道。

- info: 一个字符串，用于传递额外的信息。这个参数是可选的，一般不需要使用，可以传入null。

- uid: 一个整数，用于标识用户的ID。如果你没有指定用户ID，可以传入0，SDK会自动分配一个唯一的ID给你。

用户加入频道后，处理远程视频窗口：

 rtcEngine.setupRemoteVideoEx(
 {
 sourceType: VideoSourceType.VideoSourceRemote,
 uid: remoteUid,
 view: remoteVideoContainer,
 mirrorMode: VideoMirrorModeType.VideoMirrorModeDisabled,
 renderMode: RenderModeType.RenderModeFit,
 },
 { channelId },
 );

发布和订阅音视频流

当用户加入频道后，就可以发布自己的音视频流，并订阅其他用户的音视频流。音视频流是声网SDK的另一个逻辑概念，它相当于一个数据流，包含了用户的音频和视频数据。

你可以调用enableVideo和enableAudio方法来启用视频和音频模块：

rtcEngine.enableVideo();
rtcEngine.enableAudio();

然后，你需要调用setupLocalVideo方法来设置本地视频的显示属性，比如窗口的位置和大小：

rtcEngine.setupLocalVideo({
 view: document.getElementById("local"),
 renderMode: 1,
});

接着，你需要调用startPreview方法来启动本地视频预览：

rtcEngine.startPreview();

最后，你需要调用publish方法来发布本地音视频流：

rtcEngine.publish();

离开频道

当用户不想继续视频通话时，可以调用leaveChannel方法来离开频道，并停止发送和接收音视频流。离开频道后，用户还可以重新加入频道或者加入其他频道。

rtcEngine.leaveChannel();

如果用户想要结束整个通话过程，可以调用release方法来释放RtcEngine实例和相关的资源。释放资源后，用户不能再使用RtcEngine的任何方法和事件。

rtcEngine.release();

完成

最后，编辑main.js，引入index.html，即可完成最基础的视频通话应用了。如图4

至此，你已经完成了一个基于Agora Electron SDK的多人视频通话应用。你可以运行你的Electron项目，邀请其他用户加入同一个频道，体验实时音视频通话的效果。

如果你想了解更多关于Agora Electron SDK的功能和API，请参考Agora Electron SDK文档和Github中的示例