使用 Microsoft SignalR 和 Angular 构建安全的 WebRTC 解决方案

本文介绍如何构建强大且安全的 WebRTC 解决方案：Microsoft SignalR（带有 .NET Core 3.1）作为我们的后端选择，Angular 11 作为我们的前端客户选择。

为什么选择 Microsoft SignalR

Microsoft SignalR 是一个开源库，可简化向各种应用程序添加实时 Web 功能的过程。它使服务器端代码能够即时向客户端推送内容，从而支持实时通知和即时消息等场景，就像 WebRTC 所需要的那样。但是，SignalR 超越类似技术的地方在于它的简单性、可扩展性和安全性。SignalR 的实现非常简单，这将在后面的示例中展示。此外，它的可扩展性主要建立在它的基础上有 .NET/.NET Core 的事实之上，它与 Microsoft Azure SignalR 服务相结合，甚至可以支持最苛刻的环境。最后，它的安全性也基于 .NET 实践，因此标准 .NET/.NET Core 应用程序支持的所有内容在开箱即用的 SignalR 中也可用。

构建解决方案

要使用上述技术构建完整的 WebRTC 解决方案，需要实现两个主要部分——信令服务器应用程序和 Web 客户端应用程序。尽管在上一篇文章中提到了构建 STUN/TURN 服务器，但对于本示例，我们将使用来自 Google 的免费公共 STUN 服务器：

stun:stun.1.google.com:19302 
stun:stun1.l.google.com:19302

解决方案本身将构建得尽可能简单，但所有功能都已实现并正常运行。这个想法是为了展示如何使用这些技术来构建一个安全且有效的 WebRTC 解决方案，而无需过多地研究高级 WebRTC 功能。下面给出的所有代码部分，以及其他将被引用但未显示的部分，都可以在本文的Github 存储库中找到。

WebRTC算法

本文代码示例中使用的简单 WebRTC 算法将允许两个 Web 客户端加入会话呼叫并启动对等媒体传输。该算法如下图所示。

如图所示，它由一些信令服务器方法/端点（例如“ CreateOrJoinRoom ”）组成，客户端必须调用这些方法/端点才能与服务器进行通信，以及一些信令消息（例如“ created ”）将确保每个客户端始终处于正确的信号状态。此外，该图像还显示了 WebRTC 进程正常工作所需的几个 Web 客户端本地标志和方法（例如“ isInitiator ”和“ setRemoteDescription() ”）。这些步骤按时间顺序从上到下进行，每一步完成后，媒体传输就应该开始了。

搭建信令服务器

使用 Microsoft SignalR 创建 WebRTC 信令服务器包括 3 个主要任务：

1) .NET Core (3.1) Web API项目

创建一个新的（空的）.NET Core Web API 项目并安装以下依赖项：

Microsoft.AspNetCore.SignalR
Microsoft.AspNetCore.SignalR.Common
Microsoft.AspNetCore.SignalR.Protocols.Json

2) SignalR 集线器

创建一个新类，例如名为“ SignalingHub ”，它扩展了 SignalR 的抽象类“ Hub ”。信令服务器的所有 WebRTC 业务逻辑都将在此类中编写。创建类后，使用以下行将其注册到Startup的ConfigureServices方法中：

services.AddSignalR();

此外，在Startup的Configure方法中使用以下代码将 Hub 注册为 .NET Core ：

app.UseEndpoints(endpoints =>
{
      endpoints.MapHub<SignalingHub>("/hubs/signaling");
});

3）WebRTC服务端算法实现

最后，需要在 Hub 中定义 WebRTC 算法的方法。我们需要确保此实现将允许客户端加入会话、向其他客户端发送消息以及离开会话。为此，我们将定义 3 个 Hub 端点/方法：

a) CreateOrJoinRoom——在信令服务器上创建一个新的会话室（如果尚未创建）并将客户端添加到会话室

b) LeaveRoom——如果连接的客户端是最后一个，则将客户端从会话室中移除并删除房间

c) SendMessage——在客户端之间传输各种消息（例如，SDP offer、SDP answers、ICE candidate 等）

可以在此处找到所有描述方法的代码。

构建客户端应用程序

要构建一个可用的 WebRTC Angular 客户端应用程序，需要实现三个主要内容：

1) Angular (11) 项目

创建一个新的 Angular (11) 项目并安装以下依赖项：

npm install webrtc-adapter
npm install @microsoft/signalr

2) SignalR 服务

例如，创建一个名为“ SignalrService ”的新服务，它将负责启动和维护与信令服务器的连接以及执行和接收套接字请求。为了确保它能够完成所有这些任务，需要实现以下方法：

a) connect——创建HubConnection类的新实例并启动与信令服务器的活动连接

b)定义——定义传入的套接字请求，即网络应用程序在收到套接字请求后执行的操作

c) invoke——执行给定的套接字请求

d) disconnect——断开与信令服务器的连接

可以在此处找到这些方法的代码以及整个 SignalR 服务类。

3）WebRTC客户端算法实现

Web 客户端应用程序上的 WebRTC 算法可以在单独的类或会话调用页面的应用程序组件中实现。对于这个例子，我们将选择后者。为了使客户端算法正常工作，需要配置三个主要内容：

a) 开始与信令服务器的连接——使用SignalR服务，连接到服务器并执行之前定义的“ CreateOrJoinRoom ”方法加入会议室

b) 定义信令通信——使用 SignalR 服务，定义将在 WebRTC 通信中使用的所有信令消息及其各自的回调（例如“ created ”、“ jointed ”等）

c) 获取用户媒体——使用 Javascript WebRTC API 获取本地音频/视频媒体流，如下所示：

navigator.mediaDevices.getUserMedia({
      audio: true,
      video: true
    }

执行完这三个步骤后，剩下的就是发送启动“ got user media ”消息，WebRTC 算法就可以启动了。可以在此处找到客户端代码的完整实现。

添加安全性

由于安全性应该是每个 Web 应用程序的重要组成部分，WebRTC 应用程序也不例外。使用 SignalR，在我们的信号服务器和客户端应用程序之间添加一个安全层相当容易实现。由于 SignalR 是在 .NET Core 环境中构建的，因此它支持所有 .NET Core 授权和身份验证过程。例如，使用 JWT 授权就像将“ [Authorize] ”属性添加到授权很重要的 SignalR Hub一样简单，并在与信令服务器建立连接之前使用 JWT 令牌将“ accessTokenFactory ”添加到 Web 客户端应用程序中的HubConnectionBuilder 。添加后，所有套接字请求都应使用 JWT 令牌进行保护。SignalR 的基本 JWT 授权示例也可以在本文的 Github 存储库。