🩺WebRTC 实时音视频 1v1
00 分钟
2023-5-10
2023-5-10
type
status
date
slug
summary
tags
category
icon
password
Edited
May 10, 2023 03:39 PM
Created
May 10, 2023 03:35 PM

了解信令前,需要了解的几个概念

STUN (Session Traversal Utilities for NAT)

我们需要知道的是:主机要想访问公网资源,必须有自己的公网地址,只有这样,我们才能在访问资源主机的时候,让它通过我们主机的公网地址找到我们的主机,并把你想要访问的资源发送给你。
一般情况下,在一个网段内的主机只有内网 IP 和端口号,那内网的主机是如何访问公网资源的呢?实际上,内网的网关都有 NAT 的功能,NAT 的功能是将内网 IP 映射转换成公网地址。当我们的内网主机想要访问公网资源的时候,内网网关会将请求的内网地址映射成公网地址,然后将请求发送到要访问的公网服务器上,服务器处理好请求之后,将响应数据传递给请求中携带的公网地址上,该公网接收到响应数据之后,它的网关就会通过之前的地址映射最终中转给内网的主机。通过这种方式实现内网主机访问公网资源的需求。
基于以上的这种方式,我们可以知道内网主机虽然不知道自己在公网的地址,但是内网主机访问的服务器是知道内网主机对应的公网 IP 的,于是我们在公网中架设一台服务器,通过这台服务器可以询问到自己的公网地址。实际上这一询问流程已经被定义成了一套规范,就是 STUN 协议。
NAT 遍历操作由 Session Traversal Utilities for NAT (STUN) 服务器执行。 STUN 方法是一种用于终端检查其“公共 IP 地址和端口”的过程的协议。当客户端向 STUN 服务器发送请求时,它会发送通信所需的信息以及客户端用来与其他设备通信的公共 IP 地址。但是,即使在这种情况下,如果无法进行通信,也会将其传输到 TURN 服务器。
简单概括就是,我们要知道自己的外网 IP 地址,依靠的就是 STUN 服务。客户端通过给公网的 STUN 服务器发送请求获得自己的公网地址信息,以及是否能够被(穿过路由器)访问。
notion image

TURN (Session Traversal Utilities for NAT)

WebRTC 通信双方通过 P2P 的方式无法建立链接的情况下,会使用 relay 服务进行中转服务。 relay 是所有候选者中优先级最低的链接方式,但是 relay 也是连通率最高的方式。WebRTC 通信双方通过向 TURN 服务器发送 Allocation 指令获得在 relay 服务器上的端口,用于中转 UDP 数据。
总结上面的内容,WebRTC 的通信双方在进行链接之前会按照优先级收集链接的候选者,按照优先级的高低,分别是:在本级收集所有的 host 类型的候选者进行内网链接,通过 STUN 协议收集 srflx 候选者进行 P2P 链接,通过 TURN 协议收集 relay 候选者通过中转服务器链接并传输 UDP 数据。
很显然这种方式是开销很大的,所以只有在没得选择的情况下采用。
notion image
 

什么叫信令?

我们知道 WebRTC 想要直接通过 P2P 连接进行通信,需要一个中继的过程(在两个终端之间传递控制信息的过程),这个中继的过程就称之为信令
所以简单来说,信令就是在两个设备之间发送控制信息以确定通信协议、信道、媒体编解码器和格式以及数据传输方法以及任何所需的路由信息的过程,而执行此操作的服务器称为信令服务器
信令服务器按照与聊天室相同的方式对连接的节点进行逻辑分组,并帮助各端相互交换 SDP 等信息。
notion image
关于 WebRTC 的信令流程最重要的一点是: 「信令在规范中并没有定义」 所以开发者需要自己决定如何实现这个过程。开发者可以为应用程序引擎选择任意的信息协议(如 SIP 或 XMPP),任意双向通信信道(如 WebSocket 或 XMLHttpRequest) 与持久连接服务器的 API(如 Google Channel API)一起工作。
 

自签证书

在实现信令服务器之前,我们需要证书来实现https服务,来保证WebRTC的服务。因为WebRTC服务只能在localhost上或者https中实现。
mkcert 是一个用 Go 语言编写的工具,它可以轻松地为本地开发生成有效的 TLS 证书。它使用了一个名为 local CA 的根证书,这个根证书是由 mkcert 生成的,它会被安装到系统的受信任的根证书列表中。

安装 mkcert 并生成证书

github网址
mkcert
FiloSottileUpdated Aug 11, 2024
下载地址
 
下载完成后,直接执行下面命令就可以直接生成证书了
notion image
将它们复制到服务器中即可

信令服务器的实现

配置证书

文件的路径或名称自行修改

信令服务的逻辑实现

socket.io配置

信令服务

具体逻辑

handleUserJoin中,当一位用户加入时,会emit让另一位用户createOffer,在将得到的offersdp通过offer emit就收到,并在转发给新用户,新用户收到后,整理并通过answer emit 返回answersdp,在转发回给另一位用户,让其添加answersdp从而实现了WebRTC异步连接的主要逻辑

加入房间

离开房间

通知创建offersdp

创建answersdp

启动服务

客户端

首先我们需要安装并引入 socket.io-client,然后连接到启动的信令服务器

监听事件

具体逻辑

加入房间

离开房间

发送消息

信令服务

createOffer

createAnswer

addAnswer

到这里大体逻辑就差不多完成了,最后我附上完整代码

完整代码

服务端

客户端

客户端我使用的时 Next + TailwindCSS + daisyUI
 

参考链接

  1. 疫情当下,远程工作兴起!前端音视频通话?学!🔥 - 掘金 (juejin.cn)
 
上一篇
图片懒加载 — IntersectionObserver
下一篇
粘贴图片到网页

评论
Loading...