如何使用 Agora Electron SDK 创建桌面视频通话APP

作为 JavaScript 开发人员，你真的可以仅使用一种语言为任何平台创建APP，而Electron框架可以帮助你创建跨平台的桌面APP。在本教程中，我们将使用适用于 macOS 和 Windows的Agora Electron SDK来逐步创建视频通话桌面APP。
使用 Electron，我们基本可以将网站捆绑为独立的桌面APP。这种方法……有时是有争议的。但它允许 Web 开发人员在数小时内创建桌面APP。因此，作为先决条件，你只需要知道 HTML、CSS 和 JavaScript就可以了。

使用 Agora 创建账户

building-a-desktop-video-calling-app-using-agora-electron-sdk-screenshot-1
在https://console.agora.io注册并登录仪表板。
导航到Project Management 选项卡下的 Project List 选项卡，然后单击蓝色的 Create 按钮创建项目。（当提示使用 App ID + 证书时，只选择 App ID。）检索 App ID。它将在你开发APP时授权你的请求。

注意：本指南不实施令牌身份验证，推荐用于在生产环境中运行的所有 RTE APP。更多关于 Agora 平台基于令牌的认证信息，请参见本指南：校验用户权限

我们示例的结构
这是我们正在创建的APP的结构：

.
├── src
│ └── index.css
│ └── index.html
│ └── index.js
│ └── render.js
├── package.json
.

运行APP

你需要安装 LTS 版本的 Node.js 和 NPM：
确保有一个 Agora 开发者账号，设置项目，并生成一个 App ID。
从master 分支下载并解压 ZIP 文件。
在 macOS 上运行npm install或在 Windows 上运行npm install — arch=ia32以在解压目录中安装APP依赖项。
导航到./src/render.js并输入我们生成的 App IDappId = “”;
你现在可以在项目根目录中运行npm start 以启动APP。

就是这样。你有一个视频通话桌面APP。该APP用"test” 作频道名称。该项目在引擎盖下使用 electron-forge 轻松开始使用Electron。
building-a-desktop-video-calling-app-using-agora-electron-sdk-screenshot-2

APP运行原理

我们的 Electron APP有四个文件：index.html是我们APP元素的标记、index.css处理APP的样式、render.js包含我们视频通话的APP逻辑以及index.js处理设置 Electron 的引导过程。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Agora Electron Quickstart</title>
  <link rel="stylesheet" href="index.css">
  <script defer src="render.js"></script>
</head>
<body>
  <h1>Agora Electron Quickstart</h1>
  <button id="start">Start Call</button>
  <button id="stop">Stop Call</button>
  <div id="video-container">
    Local Feed:
    <div id="local">
    </div>
    Remote Feed(s):
    <div id="remote">
    </div>
  </div>
</body>
</html>

我们正在向标记中添加一个脚本标记，并将源设置为 render.js，以便我们可以加载APP逻辑。defer 标签在执行 JS 之前需要等待页面加载。

我们有个简单的布局：两个用于开始和结束通话的按钮，以及两个 div，分别是在 video-container div 中包含本地和远程用户的视频。

索引文件
我们APP的样式如下所示：

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin: auto;
  max-width: 90vw;
  text-align: center;
  align-items: center;
}
h1 {
  margin-block-start: 0.4em;
  margin-block-end: 0.4em;
}
button {
  background-color: rgb(50, 153, 250); /* Green */
  border: none;
  color: white;
  padding: 8px 24px;
  text-align: center;
  text-decoration: none;
  border-radius: 4px;
  font-size: 16px;
  margin-bottom: 5px;
}
#local canvas {
  margin: 5px 0;
  height: 30vh;
}
#remote {
  flex-direction: row;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}
#remote div {
  flex: 1;
  margin: 5px;
}
#remote canvas {
  height: 27vh;
  zoom: 1.2 !important;
}

渲染.js
让我们进入正题看看我们的APP逻辑：

const AgoraRtcEngine = require('agora-electron-sdk').default;
const APPID = ""; //Enter App  ID here
if (APPID === "") {
  alert('Please enter APPID in src/render.jsx (line:2)');
}
let rtcEngine = new AgoraRtcEngine();
rtcEngine.initialize(APPID);
rtcEngine.on('joinedChannel', (channel, uid, elapsed) => {
  let localVideoContainer = document.querySelector('#local');
  rtcEngine.setupLocalVideo(localVideoContainer);
})
rtcEngine.on('userJoined', (uid) => {
  let remoteVideoContainer = document.querySelector('#remote')
  rtcEngine.setupViewContentMode(uid, 1);
  rtcEngine.subscribe(uid, remoteVideoContainer)
})
rtcEngine.setChannelProfile(0)
rtcEngine.enableVideo()
document.getElementById('start').onclick = () => {
  rtcEngine.joinChannel(null, "test", null, Math.floor(new Date().getTime() / 1000))
};
document.getElementById('stop').onclick = () => {
  rtcEngine.leaveChannel();
  document.getElementById('local').innerHTML = '';
  document.getElementById('remote').innerHTML = '';
};

我们从 SDK导入AgoraRtcEngine 类。如果用户没有输入 Agora App ID，会出现禁用警报。我们创建类的一个新实例 — rtcEngine，并使用 App ID 来初始化引擎实例。

Agora 使用的 SDK是基于事件的。例如，当我们成功加入一个视频频道时，我们会收到joinedChannel事件，然后我们可以使用它来执行函数。我们正在设置一个调用引擎上的setupLocalVideo 方法事件处理程序，并传入我们的 divlocalVideoContainer以呈现本地用户的视频源。

接下来，我们要为userJoined 设置一个事件，每当用户加入频道时就会触发该事件。我们使用setupViewContentMode方法来设置远程视频源，从事件和1 传入 UID 并使用适合模式。你可以用0将视频裁剪为 div 的大小。然后我们使用subscribe方法，该方法订阅远程用户并通过传入 UID 和 HTML 容器来初始化相应的渲染器。我们现在使用的是remoteVideoContainerdiv。

我们现在正在使用该setChannelProfile方法来使用通信配置文件。你也可以直播。我们正在使用enableVideo方法启用视频模块。

接下来，给按钮设置onClick 功能。开始按钮使用joinChannel方法加入频道：它接受令牌、频道名称、可选信息和 UID。我们为令牌传入 null 。如果你在安全模式下使用APP，则可以使用临时令牌。我们频道名称为“test” ，你也可以使用任何字符串。同一频道的用户可以互相交流。我们为 info 参数传入 null，并使用 Date 函数生成一个随机 UID。频道中的所有用户都应该具有唯一的 UID。
停止按钮调用该leaveChannel方法并清除远程视频。

索引.js
现在让我们创建我们的 Electron APP：

const { app, BrowserWindow } = require('electron');
const path = require('path');
app.allowRendererProcessReuse = false
if (require('electron-squirrel-startup')) { 
  app.quit();
}
const createWindow = () => {
  const mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
  },
  });
  mainWindow.loadFile(path.join(__dirname, 'index.html'));
};
app.on('ready', createWindow);
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

我们正在从Electron中导入app和BrowserWindow，以及使用Node中的path。我们通过将allowRendererProcessReuse属性设置为 false 来允许使用非上下文感知模块以使用 Agora SDK。该electron-squirrel-startup模块管理 Windows APP启动逻辑。

我们用Electron中的BrowserWindow 编写了一个新函数createWindow以生成一个新的浏览器窗口。我们在webPreferences 中上传nodeIntegration: true以及contextIsolation: false来支持集成Agora SDK 。我们使用loadFile方法在主要浏览器窗口上加载index.html 文件。

回到我们 Electron APP上的事件，我们有 ready 事件，它调用createWindow函数。对于 macOS，我们使用关闭窗口时退出APP的window-all-closed 事件。如果没有打开窗口，我们通过activate事件利用createWindow函数创建一个新窗口。

其他资源
使用 Agora SDK 和 Electron 框架创建桌面视频通话应用程序APP的过程很容易。查看Agora Electron Docs和Agora Electron API Reference以快速添加更多功能，例如静音摄像头和麦克风、设置视频配置文件和音频混合。
我也想邀请你加入Agora Developer Slack 社区。如有任何问题，可以在#electron-help-me频道中发布。
更多内容请访问plainenglish.io

原文作者 Author:Ekaansh Arora
原文链接 https://www.agora.io/en/blog/how-to-build-a-desktop-video-calling-app-using-the-agora-electron-sdk/

如何使用 Agora Electron SDK 创建桌面视频通话APP

使用 Agora 创建账户

运行APP

APP运行原理

分类