使用 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 对象在您的客户端应用程序中可用,您将需要:

  1. 附加到 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) {
//...
  1. 使用此句柄发送“注册消息”
 const register = { "request": "join", "room": myroom, "ptype": "publisher",   "display": reg };
  vroomHandle.send({ "message": register });
  1. 处理 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();    //...
  1. 订阅其他参与者的新提要 
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 代码示例。

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

使用 Janus WebRTC 媒体服务器构建视频会议应用程序
连接多个参与者的基本 Web 应用程序演示。

您可以在此处查看使用 React 的快速破解:https://github.com/agonza1/reunitus

注意:要在本地使用 Janus,并且通常使用 WebRTC,您需要在 chrome://flags/#allow-insecure-localhost 中启用不安全来源

就是这样!您已经创建了自己的自定义视频会议!如果您想查看一些可能的示例,这里有一个演示页面,其中显示了几个使用 Janus 插件的有趣用例,例如 SIP 网关、VP9-SVC 视频室、直播、录制等。

原文链接:https://webrtc.ventures/2020/12/janus-webrtc-media-server-video-conference-app/

本文来自作者投稿,版权归原作者所有。如需转载,请注明出处:https://www.nxrte.com/jishu/webrtc/15585.html

(0)

相关推荐

发表回复

登录后才能评论