【寻声征文】基于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中的示例

推荐阅读
相关专栏
SDK 教程
164 文章
本专栏仅用于分享音视频相关的技术文章,与其他开发者和声网 研发团队交流、分享行业前沿技术、资讯。发帖前,请参考「社区发帖指南」,方便您更好的展示所发表的文章和内容。