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

一、建立信令服务器

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()
      .build();
    this.connection.start()
      .then(() => {
        this.connection.invoke('TeacherLogin', this.tableId).then(() => {
          console.log('教师端登录成功!');
        })
        .catch((error: { toString: () => any; }) => {
          return console.error('教师端登录失败:', error.toString())
        });
      })
      .catch((error: { toString: () => any; }) => {
        return console.error('connection1 start error:', error.toString());
    });

学生端通过SignalR与信令服务器建立连接:

this.connection = new signalR.HubConnectionBuilder()
      .withUrl(`${ AppConfig.settings.apiServer.server_url}ExamVideoHub`)
      .withAutomaticReconnect()
      .build();
    this.connection.start().then(() => {
      this.connection.invoke('DeviceLogin',"").then(() => {
        console.log('考生端登录成功!');
      })
      .catch((error: { toString: () => any; }) => {
        return console.error('考生端登录失败:', error.toString())
      });
    })
    .catch((error: { toString: () => any; }) => {
      return console.error('connection start error:', error.toString());
    })

客户端通过on方法监听信令:
在这里插入图片描述

客户端通过invoke方法携带参数请求服务器端SendMessage方法:
在这里插入图片描述

三、WebRTC即时通讯

使用RTC技术进行即时通讯之前,教师端(请求者)和学生端(响应者)都要与信令服务器建立连接,这样他们就可以经过信令服务器进行信令消息的中转。

WebRTC的即时通讯大体上分为三大步:首先请求者和响应者之间交换SDP进行“媒体协商”,SDP是一种会话描述格式,专门用于描述媒体信息,例如IP地址、网络类型、解码器信息等等;然后是候选者交换与检测连接;最后一步就是媒体数据流的通讯部分。

媒体协商

第一步,请求者如果要发起请求,首先需要新建一个PeerConnect实例,然后通过getUserMedia获取本地的媒体流信息,将这个流加入到连接中。
在这里插入图片描述

第二步,调用PeerConnect实例对象的CreatOffer方法创建一个Offer的SDP(SDP包含了本地设备的媒体描述信息),创建好SDP之后在调用setLocalDescription方法,把SDP设置到LocalDescription中。调用完setLocalDescription之后,通过信令服务器中转把刚创建的SDP信息发送给学生端,到这一步学生端就拿到了教师端的Offer。
在这里插入图片描述

第三步,学生端首先也要新建一个PeerConnect实例,当学生端接收到教师端的Offer后,会首先调用setRemoteDescription设置远程描述。然后学生端PeerConnect实例对象调用createAnswer方法,调用createAnswer方法是会产生本机相关的媒体的信息也就是Answer SDP。创建好之后也要调用setLocalDescription设置本地Answer SDP,这样对学生端来说它的媒体协商就完成了(也就是说学生端既有远端的SDP同时也有本地SDP)。然后学生端通过信令服务器中转把createAnswer时产生的本机的SDP发送给教师端,教师端拿到学生端的SDP后,调用setRemoteDescription方法设置远程描述,这时候教师端的媒体协商也就完成了。
在这里插入图片描述

交换候选者(Candidate)与连接检测

媒体协商全部完成后,教师端会首先触发监听器onIceCandidate,监听器触发后会收集本机Candidate信息并通过信令服务器中转发送给学生端,让学生端知道教师端有哪些Candidate,学生端收到Candidate之后会调用AddIceCandidate方法将它添加到候选者列表(onIceCandidate事件会触发多次,所以会有不只一个Candidate);
在这里插入图片描述

同理,学生端收到教师端的Candidate后本身也会触发监听器onIceCandidate,并通过信令服务器将本机Candidate信息发送给教师端,这样两端就完成了双方可以互通的候选者交换,然后RTC会在底层进行连接检测,当选择一个最优的线路之后,就可以实现端对端的通讯了。

端对端通讯时,首先是教师端向学生端发送数据流,当学生端收到数据流后,并不会进行显示,而是调用onAddStream方法把这个数据流添加进来,然后学生端把本身的数据流发送给教师端,教师端收到数据流后,同样调用onAddStream方法,然后我们在onAddStream的回调方法中,把接收到的数据流进行渲染和显示。
在这里插入图片描述

附一张网上找到的端对端连接基本流程图:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/311.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

java-正装照换底色小demo-技术分享

文章目录前言java-正装照换底色小demo-技术分享01 实现思路02 效果02::01 原图:02::02 执行单元测试:02::03 效果:03 编码实现前言 如果您觉得有用的话&#xff0c;记得给博主点个赞&#xff0c;评论&#xff0c;收藏一键三连啊&#xff0c;写作不易啊^ _ ^。   而且听说点赞…

js逆向爬取某音乐网站某歌手的歌曲

js逆向爬取某音乐网站某歌手的歌曲一、分析网站1、案例介绍2、寻找列表页Ajax入口&#xff08;1&#xff09;页面展示图。&#xff08;2&#xff09;寻找部分歌曲信息Ajax的token。&#xff08;3&#xff09;寻找歌曲链接&#xff08;4&#xff09;获取歌曲名称和id信息3、寻找…

XXE漏洞复现

目录XML基础概念XML数据格式DTD基础定义DTD作用分类DTD实体实体的分类DTD元素XXE漏洞介绍实操如何探测xxe漏洞XML基础 概念 什么是XML 是一种可扩展标记语言 (Extensible Markup Language, XML) &#xff0c;标准通用标记语言的子集&#xff0c;可以用来标记数据、定义数据类型…

30个题型+代码(冲刺2023蓝桥杯)(中)

2023.3.13~4.13持续更新 目录 &#x1f34e;注意 &#x1f33c;前言 &#x1f33c;十&#xff0c;KMP&#xff08;留坑&#xff09; &#x1f33c;十一&#xff0c;Trie&#xff08;留坑&#xff09; &#x1f33c;十二&#xff0c;BFS &#x1f44a;(一)1562. 微博转发…

OpenAI 发布GPT-4——全网抢先体验

OpenAI 发布GPT-4 最近 OpenAI 犹如开挂一般&#xff0c;上周才刚刚推出GPT-3.5-Turbo API&#xff0c;今天凌晨再次祭出GPT-4这个目前最先进的多模态预训练大模型。与上一代GPT3.5相比&#xff0c;GPT-4最大的飞跃是增加了识图能力&#xff0c;并且回答准确性也得到显著提高。…

写给20、21级学生的话

写给20、21级学生的话前言一、关于招聘变招生&#xff0c;你怎么看&#xff1f;二、对于即将实习/已经实习的学生&#xff0c;你有什么建议&#xff1f;1.学习方面2.提升方面三、思想成年真的很重要前言 最近&#xff0c;有一些同学遇到的实习问题&#xff0c;我统一回复下&…

第十二届蓝桥杯省赛详解

试题A&#xff1a;空间 1B是8位&#xff0c;32位二进制数占用4B空间&#xff0c;1MB2^10KB2^20B 那么可以存放32位二进制数的个数为256*2^20*8/3267108864 试题B&#xff1a;卡片 分析&#xff1a;因为数据只有2021&#xff0c;所以直接模拟即可 结果为&#xff1a;3181&…

MySQL基础------sql指令1.0(查询操作->select)

目录 前言&#xff1a; 单表查询 1.查询当前所在数据库 2.查询整个表数据 3.查询某字段 4.条件查询 5.单行处理函数&#xff08;聚合函数&#xff09; 6.查询时给字段取别名 7.模糊查询 8.查询结果去除重复项 9.排序&#xff08;升序和降序&#xff09; 10. 分组查询 1…

Linux 如何使用 git | 新建仓库 | git 三板斧

文章目录 专栏导读 一、如何安装 git 二、注册码云账号 三、新建仓库 配置仓库信息 四、克隆远端仓库到本地 五、git 三板斧 1. 三板斧第一招&#xff1a;git add 2. 三板斧第二招&#xff1a;git commit 解决首次 git commit 失败的问题 配置机器信息 3. 三…

最新!Windows 11 更新将整合 AI 技术

微软MVP实验室研究员张雅琪&#xff08;阿法兔&#xff09;微软最有价值专家&#xff08;MVP&#xff09;&#xff0c;毕业于外交学院和香港大学&#xff0c;IT 技术社区创始人&#xff0c;中关村互联网金融研究院兼职研究员&#xff0c;多次受邀在微软 Reactor 进行公开演讲&a…

电子工程师必须掌握的硬件测试仪器,你确定你都掌握了?

目录示波器示例1&#xff1a;测量示波器自带的标准方波信号输出表笔认识屏幕刻度认识波形上下/左右移动上下/左右刻度参数调整通道1的功能界面捕获信号设置Menu菜单触发方式触发电平Cursor按钮捕捉波形HLEP按钮参考资料频谱分析仪器信号发生器示波器 示例1&#xff1a;测量示波…

STM32F103R8T6 SPWM实现正弦波输出

前言 PWM合成正弦波&#xff0c;原理什么的不详细说了&#xff0c;概括一下就是 PWM有效面积的积分 正弦波的有效面积。PWM的频率越快&#xff0c;细分的越多&#xff0c;锯齿也就越不明显。 做法是&#xff1a;首先利用正弦波取点软件&#xff0c;取点1000个&#xff0c;生…

求职(怎么才算精通JAVA开发)

在找工作的的时候,有时候我们需要对自己的技术水平做一个评估。特别是Java工程师,我们该怎么去表达自己的能力和正确认识自己所处的技术水平呢。技术一般的人,一般都不敢说自己精通JAVA,因为你说了精通JAVA几乎就给了面试官一个可以随便往死里问的理由了。很多不自信的一般…

《ChatGPT是怎样炼成的》

ChatGPT 在全世界范围内风靡一时&#xff0c;我现在每天都会使用 ChatGPT 帮我回答几个问题&#xff0c;甚至有的时候在一天内我和它对话的时间比和正常人类对话还要多&#xff0c;因为它确实“法力无边&#xff0c;功能强大”。 ChatGPT 可以帮助我解读程序&#xff0c;做翻译…

在 4G 内存的机器上,申请 8G 内存会怎么样?

在 4GB 物理内存的机器上&#xff0c;申请 8G 内存会怎么样&#xff1f; 这个问题在没有前置条件下&#xff0c;就说出答案就是耍流氓。这个问题要考虑三个前置条件&#xff1a; 操作系统是 32 位的&#xff0c;还是 64 位的&#xff1f;申请完 8G 内存后会不会被使用&#x…

cmd命令教程

小提示&#xff1a; 在本文中&#xff0c;我将向您展示可以在 Windows 命令行上使用的 40 个命令 温馨提示&#xff1a;在本教程中学习使用适用于 Windows 10 和 CMD 网络命令的最常见基本 CMD 命令及其语法和示例 文章目录为什么命令提示符有用一、cmd是什么&#xff1f;如何在…

一年经验年初被裁面试1月有余无果,还遭前阿里面试官狂问八股,人麻了

最近接到一粉丝投稿&#xff1a;年初被裁员&#xff0c;在家躺平了6个月&#xff0c;然后想着学习下再去面试&#xff0c;现在面试了1个月有余&#xff0c;无果&#xff0c;天天打游戏到半夜&#xff0c;根本无法静下心来学习。下面是他这些天面试经常会被问到的一些问题&#…

手机解锁方法:8个顶级的 Android 手机解锁软件

一般来说&#xff0c;太简单的密码是不安全的&#xff0c;所以我们设置一个安全的密码&#xff0c;可能会稍微复杂一点。然而&#xff0c;我们可能经常会忘记复杂的密码并锁定我们的 Android 智能手机。 8个顶级的 Android 手机解锁软件 如果您遇到过这种情况并且正在寻找一种…

【Android -- 软技能】聊聊程序员的软技能

什么是软技能&#xff1f; 所谓软技能&#xff0c;就是相对于「硬技能」而言的技能&#xff0c;对于程序员来说&#xff0c;「硬技能」就是计算机专业技术能力&#xff0c;软技能则是专业之外的所有技能&#xff0c;包括职业规划能力、处理人际关系能力、专业态度、做事的方式…

linux基本功系列之uname实战

文章目录前言一. uname命令介绍二. 语法格式及常用选项三. 参考案例3.1 输出全部信息3.2 输出内核名称及版本3.3 输出网络节点的主机名3.4 输出主机硬件架构3.5 输出操作系统名称3.6 显示版本信息总结前言 大家好&#xff0c;又见面了&#xff0c;我是沐风晓月&#xff0c;本文…
最新文章