使用 Agora 创建一对一交互式视频会议 Web 工具

许多传统的人际互动已经转移到网上。随着这类技术的普及,许多行业的转型都不可避免。在过去的一年中,我们看到许多公司和开发商推出了可以取代传统人机交互的数字解决方案。创建实时视频流和聊天网络应用程序现在可能比你想象得更容易。

在本教程中,我将向你展示如何创建自己的一对一视频会议工具。到最后,你会发现它其实它并不难。

这种工具在社会上的潜在用例:

  • 医患视频通话
  • 导师-学员视频通话
  • 客户-承包商视频通话
  • 一对一顾问视频通话

我们将使用 Agora 连接双方,以便他们进行视频会议。我们将使用 vanilla JavaScript 来创建这个项目。这里比较酷的部分是你可以输入并创建自己的版本!

最终结果将类似于以下演示:

image

要求

对于这个项目,你需要一个 Agora 帐户,可以按照声网注册指南创建 ;还需要具备 JavaScript 和 HTML 的基本知识,但别担心——我会指导你完成这个过程。

为了让本教程正常工作,我们将使用 Visual Studio Code 实时服务器 插件。

创建项目

对于这个项目,我们需要在我们的计算机上创建一个文件夹。我们称这个文件夹为 agora-demo。

创建此项目结构后,在 Visual Studio Code 中打开该文件夹。VSCode 中的项目结构如下所示:

1-to-1-interactive-meeting-video-call-on-web-2

这将是一个纯 JavaScript 驱动的教程,不包含任何框架。我们将使用SASS 编译器 将 SCSS 文件转换为 CSS 文件。

我们还将使用 Live Server 来启动我们的项目。

运行 Live Server 后,我们可以在127.0.0.1:5500/index.html上查看我们的项目。

首先,让我们使用 Agora。你可以按照有关如何设置帐户的文档进行操作:

设置您的agora账户

创建一对一的视频会议工具

让我们回到 Visual Studio,这样我们就可以开始创建我们的工具了。

注意: 演示仅提供一个频道。虽然 Agora 支持根据需要生成任意数量的频道,但在本指南中,我们不会提供 UI,因此用户将无法创建自己的频道。

HTML 结构

我们将从在 index.html 中设置 HTML 开始。在我们的例子中,我们正在创建一个非常基本的外观,用户将看到一个屏幕,其中遥控器的用户流位于中心,他们自己的流将在右上角,底部有一些控件。

我们还使用 CDN 将 Fontawesome 和 Agora 加载到我们的项目中。我们链接到 CSS 样式表和我们的 JavaScript 文件。HTML 部分到此结束。我们应该得到以下结果:

1-to-1-interactive-meeting-video-call-on-web-3

这看起来不太吸引人,是吧?

在下一步中,我们将添加一些样式以使其看起来更好。

设计应用程序

我们要做的第一件事是重置所有的内边距和边距。

* {
  margin: 0;
  padding: 0;
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

让 body 充当一个网格,这样我们就可以将我们的应用程序放在页面中间。

body {
  display: -ms-grid;
  display: grid;
  place-items: center;
  min-height: 100vh;
  width: 100%;
  background: #f15bb51f;
}

然后我们可以给容器一些基本的 flex 样式,填充标题,使其不那么密集。

image

我们还需要一个隐藏类来隐藏开始和停止按钮。

.hidden {
  display: none !important;
}

然后我们可以设置两个支架的样式(一个用于视频,一个用于按钮)。

视频样式如下所示:


image

这种样式能确保视频有一些空间,并且放置在其中的视频元素也有相应地定位。

你可能已经发现了之前的伪元素。我们使用这些来向用户反馈正在发生的事情。

然后按钮栏需要以下样式:

通过使用框阴影并给它们一些空间,使按钮具有很好的吸引力。我们还添加了一个活动类来表示哪个按钮是活动的。

我们的应用程序应如下所示:

好的,它开始有会议工具的雏形了。但它还不能做任何事情。

连接 Agora

让我们连接到 Agora。为此,我们需要在 script.js 文件中执行几个步骤。

首先,我们将创建一些变量。我们需要一些选项来保存我们的 appID 和Token。我们还将在此处添加我们的频道。

const options = {
  appId: "{APPID}",
  channel: "demo",
  token: "{TOKEN}",
};

另一个变量将保存用户自己的本地流。

let rtc = {
  client: null,
  localAudioTrack: null,
  localVideoTrack: null,
};

然后让我们一次性添加我们想要访问的所有前端元素。

下一步是创建一个连接函数,将我们连接到 Agora。

const join = async () => {
  rtc.client = AgoraRTC.createClient({ mode: "rtc", codec: "vp8" });
  return await rtc.client.join(
    options.appId,
    options.channel,
    options.token,
    null
  );
};

创建我们的视频会议

现在我们已经设置好了 Agora,运行这个APP并连接我们的按钮,这样我们就可以开始视频聊天了!

我们要连接的第一个按钮是加入按钮。

btnStart.addEventListener("click", () => {
  startBasicCall();
});

当我们点击这个按钮时,它应该运行 startBasicCall 函数。

这个函数将确保我们调用 join 函数,启动我们的视频和音频,并订阅音视频流。

image

如你所见,我们调用了 join 函数,在回调中,我们调用了开始视频和音频函数。然后我们连接到流以等待其他用户连接。如果连接完成,我们更新特定流以开始接收。

remoteVideoTrack.play() 接受远程的参数,其引用它应该呈现的 div 的 ID。

最后一部分是我们隐藏加入按钮并显示离开按钮。

现在,让我们创建 startVideo 函数。

image

这里的第一步是我们添加连接类,这将向用户展示我们正在做的事情。然后我们设置 rtc 变量以使用 Agora 连接的视频轨道更新 localVideoTrack。然后我们发布此曲目并删除连接类。

使用 rtc.localVideoTrack.play(“me”); 我们设置 ID 为“me”的 div 播放该用户的本地流。我们通过将活动类添加到我们的相机按钮来完成。

对于 startAudio 函数,操作相同,但我们使用 AgoraRTC.createMicrophoneAudioTrack 方法。

image

我们想停止流,就可以连接到我们的停止按钮。

btnStop.addEventListener("click", () => {
  leave();
});

leave 函数将如下所示:

image

这将调用停止视频和音频功能,并离开频道。我们还用加入按钮切换了离开按钮。

让我们创建这些停止函数。

image

我们关闭本地音频连接并为另一个接收器取消对其发布。然后我们从按钮中删除活动类。

视频也是如此。

image

在这种情况下,我们停止了整个流。但是如果我们只想暂时断开我们的视频 音频怎么办?

image

根据音频或视频的活动类,我们将调用相应的开始或停止函数。

确保是一对一通话

由于我们想确保通话是一对一的,并且没有其他人可以加入我们的频道,所以让我们使用 Agora RTC 添加一层安保。

一旦有人加入此频道,我们将检查该客户拥有的用户数。如果这个数字大于 1,它应该是无效的,并且应该删除尝试的用户。

让我们修改用户发布的回调:

image

roomFull 函数将为我们处理所有逻辑:

const roomFull = () => {
  leave();
  remote.classList.add("full");
};

这将调用我们之前制作的 leave 函数,并向远程用户 div 添加一个完整的类。

现在我们只需要为这个 div 添加一些样式:

.holder - video-remote.full:before {
  content: "Room is full!";
}

你可以在GitHub 上找到此演示代码。

测试

要测试应用程序,你可以从 GitHub 下载文件。确保你打开 script.js 文件并添加客户端详细信息。然后你可以在一个浏览器选项卡中打开 index.html 文件并在另一个选项卡中复制它。

你现在应该可以看到自己两次了。最好将麦克风静音,因为它会产生回声。

结论

就是这样——我们现在有了一个使用 Agora 和 vanilla JavaScript 的交互式会议工具!

感谢 Agora,创建这样一个交互式会议工具比以往任何时候都容易。希望你能找到使用Agora的其他方法并提出相应的视频解决方案。

原文作者 Chris Bongers
原文链接 https://www.agora.io/en/blog/creating-a-one-on-one-interactive-video-meeting-web-tool-using-agora/