SignalR+WebRTC技术实现音视频即时通讯功能

最新推荐文章于 2025-11-12 13:11:50 发布

原创

最新推荐文章于 2025-11-12 13:11:50 发布 · 2.1k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#webrtc #音视频 #c#

文章介绍了如何使用SignalR建立信令服务器，包括创建Hub、定义连接池和方法，以及客户端的连接建立过程。接着，文章讨论了WebRTC的即时通讯步骤，如媒体协商、Candidate交换和端对端数据流通信，强调了信令服务器在其中的作用。

一、建立信令服务器

1、后台项目中新建一个对应的集线器类，取名VideoHub，并继承Hub类，Hub是SignalR的一个组件，它使用RPC接收从客户端发送来的消息，也能把消息发送给客户端。

2、VideoHub中定义一个静态的ConcurrentDictionary作为连接池，客户端与服务端建立连接后，会生成一个唯一的connectionId。后续的业务中会通过这个connectionId进行识别。

public class VideoHub: Hub
{
	public string Error = "Error";
	public static ConcurrentDictionary<string, VideoChatModel> Connection = new ConcurrentDictionary<string, VideoChatModel>();
	public Video(){}
}

3、在VideoHub中定义一系列方法，例如DeviceLogin（学生端设备登录）、TeacherLogin（教师登录）、SendMessage（教师端、学生端发送指令）等，集线器中的方法可以由客户端调用，调用时使用SignalR连接对象的invoke方法。
在这里插入图片描述

4、信令服务器向客户端发送消息时，通过Clients.Client.SendAsync()方法
在这里插入图片描述

5、使用ExamVideoHub之前，在builder.Build之前调用builder.Services.AddSignalR注册所有SignalR的服务，并在startup.cs中调用app.MapHub(“/ExamVideoHub”)启用SignalR中间件，不然客户端无法找到对应集线器。

在这里插入图片描述

protected override void BuildEndpoints(IEndpointrouteBuilder endpoints)
{
	base.BuildEndpoints(endpoints);
	endpoints.MapHub<VideoHub>("/VideoHub");
}

二、客户端与信令服务器通过SignalR建立连接

第一步，使用HubConnectionBuilder来创建客户端到服务端的连接；
第二步，通过withURL方法来设置服务器端集线器的地址，这个地址必须是包含域名等信息的全路径，必须和在服务器端设置的路径一致；
第三步，通过withAutomaticReconnect方法设置自动连接机制，自动连接机制不是必须设置的，但是设置自动连接机制后如果连接被断开，客户端会尝试重新连接（客户端重新连接之后，当前连接就是一个全新的连接，隐藏服务器端获取到的ConnectionId是一个新的值）；第四步，完成HUBConnectionBuilder的设置之后调用build方法构建一个客户端到服务器端集线器的连接；
第五步，调用build之后获得的连接只是逻辑上的连接，下一步通过调用start方法实际启动该连接。
连接实际建立完成之后，就可以通过连接对象的invoke方法来调用集线器中的方法，invoke方法的第一个参数是对应集线器中请求方法的名字，第二个参数是调用方法携带的参数；同时也可以通过连接对象的on 方法来注册监听服务器端使用SendAsync函数发送的消息指令。

教师端通过SignalR与信令服务器建立连接::

 this.connection = new signalR.HubConnectionBuilder()
      .withUrl(`${
     
      AppConfig.settings.apiServer.server_url}ExamVideoHub`)
      .withAutomaticReconnect