使用 Janus WebRTC 媒体服务器构建视频会议应用程序

对于网络上基本的一对一视频通信，我们可以只使用 WebRTC 并直接连接对等点。但是，当我们需要高级功能（即录制或转码）时，或者如果我们有更多参与者，我们将需要媒体服务器的帮助。WebRTC 媒体服务器本质上是经过优化以更有效地接收和发送媒体的服务器。

市面上有许多很棒的开源 WebRTC 媒体服务器。在这篇文章中，我们将重点关注最受欢迎的 Janus 之一。正如其创建者 Meetecho 所述，Janus WebRTC 服务器本身不提供任何功能。它有一个重要的、更普遍的目的：Janus 实现了与浏览器建立 WebRTC 媒体通信的方法，与其交换 JSON 消息，并在浏览器和服务器之间中继 RTP/RTCP 和消息。

一般来说，媒体服务器，尤其是 Janus，可能有点复杂。特别是对于不熟悉 WebRTC 的 Web 开发人员。此外，还有其他媒体服务器可能会提供更多在线文档、npm 模块和更多框架和代码语言的 SDK，以帮助经验不足的 WebRTC 开发人员。然而，Janus 的出色性能、占用空间小以及活跃的开源存储库和社区使其成为希望使用最新支持的 WebRTC 功能的开发人员的热门选择。

所以现在，让我们试一试 Janus，并用它构建一个测试视频会议应用程序。

Janus 媒体服务器配置

要部署您的 Janus 媒体服务器，您可以手动安装它或使用 Docker 等工具来简化安装和部署。在他们的README中，您会找到所有需要的信息。但是，如果你想跳过手动安装和配置，你可以使用这个通用的Janus WebRTC Server docker container。一旦你在本地运行它，你可以通过打开http://localhost:8088/janus/info来测试它是否可以访问。它应该显示您尝试联系的 Janus 实例中可用的内容。

网络应用程序

为了让我们的视频会议应用程序正常工作，您的网络应用程序需要与 Janus WebRTC 服务器通信并让它连接多个参与者。为此，我们将使用 janus.js 与 Janus Media Server API 进行通信，并将每个客户端附加到 VideoRoom 插件。

使用 Janus WebRTC 媒体服务器构建视频会议应用程序 — 3个参与者如何连接到Janus VideoRoom插件，开始一个房间，并使用WebRTC发布媒体和订阅其他参与者的视频的示意图。

一旦您准备好 janus.js 并且 Janus 对象在您的客户端应用程序中可用，您将需要：

附加到 Janus VideoRoom 插件并获取句柄

Janus.init({debug: "all", callback: function() {
                // Make sure the browser supports WebRTC
                // Create session
                janusRoom = new Janus(
                    {
                        server: server,
                        success: function() {
                            // Attach to VideoRoom plugin
                            janusRoom.attach(
                                {
                                    plugin: "janus.plugin.videoroom",
                                    opaqueId: opaqueId,
                                    success: function (pluginHandle) {
//...

使用此句柄发送“注册消息”

 const register = { "request": "join", "room": myroom, "ptype": "publisher",   "display": reg };
  vroomHandle.send({ "message": register });

处理 Janus 的“已加入”响应并开始发布

onmessage: function (msg, jsep) {  var event = msg["videoroom"];
  if (event === "joined") {
    // Publisher/manager created, negotiate WebRTC and attach to feeds
    myid = msg["id"];
    Janus.log("Successfully joined room " + msg["room"] + " with ID " + myid);
    publishOwnFeed();    //...

订阅其他参与者的新提要

onmessage: function (msg, jsep) {
  var event = msg["videoroom"];
  if (event === "event") {
    if (msg["publishers"] !== undefined && msg["publishers"] !== null) {
      var list = msg["publishers"];
      for(var f in list) {
        var id = list[f]["id"];
        var display = list[f]["display"];
        var audio = list[f]["audio_codec"];
        var video = list[f]["video_codec"];
        newRemoteFeed(id, display, audio, video);
      }
    }
//...

newRemoteFeed 将创建一个新的插件句柄并作为订阅者附加到它。完整的 js 代码示例：https://github.com/meetecho/janus-gateway/blob/master/html/videoroomtest.js

然后使用 Chrome、Edge、Firefox 或 Safari，在三个或更多单独的选项卡上打开您的 Web 应用程序的 URL（即 http://localhost:3000），您应该能够与多个参与者联系。