首页 > 其他分享 >WebRTC入门

WebRTC入门

时间:2023-08-23 18:11:53浏览次数:47  
标签:入门 用户 WebRTC TURN NAT 服务器 STUN 连接

1、概念

WebRTC (Web Real-Time Communications) 是一项实时通讯技术,它允许网络应用或者站点,在不借助中间媒介的情况下,建立浏览器之间点对点(Peer-to-Peer)的连接,实现视频流和(或)音频流或者其他任意数据的传输。

2、通讯流程的建立

首先,从概念可以看出,WebRTC 通讯过程不需要中间媒介(P2P)。但实现起来仍然存在以下几个问题:

1.如果需要通讯的两台设备的网络环境是局域网,该如何建立连接?
2.如果通讯的两台设备建立连接后,无法解析对方的音视频格式该如何?

这里需要明白一个概念,两者进行连接当然是需要通过 IP + 端口进行连接,毕竟只有通过 IP 才能找到对应的设备

第一个问题可以通过内网映射(NAT)的方式解决;

第二个问题可以在连接之前先互相确定好双方支持的格式(一方支持 H264 和 VP8,另一方支持 H264 和 VP9,那么就可以在连接之前确定好双方的编解码格式是 H264 格式,此格式是双方都支持的)。

第二个问题需要在连接之前相互确定,那还没连接上,怎么相互确定呢?这时就可以通过一台中间的服务器来传递双方的信息了(双方 NAT 后的 IP 和端口也可以通过此服务器进行传递)。

所以基于以上问题,通讯过程可能如下:

  1. 用户 A 和 用户 B 通过 NAT 服务进行映射;
  2. 用户 A 和 用户 B 通过一台中间服务器进行交换各自支持的格式和映射后的 IP + 端口;
  3. 各自得知对方的信息后就可以开始连接通讯。

 

3、通讯流程

上面得知了一个简单粗糙的建立通讯的流程,但要知道更加细节的流程就需要明白以下几个概念:

  • 媒体协商(SDP):两个用户在连接之前相互确定并交换双方支持的音视频格式的过程就是媒体协商。SDP 是描述信息的一种格式,其格式组成可自行查找了解;
  • 网络协商(candidate):两个用户在 NAT 后交换各自的网络信息的过程就是网络协商。candidate 也是一种描述信息的一种格式,其格式组成可自行查找了解。
  • 信令服务器:传递双方信息的服务器就是信令服务器,此服务其实就是 web 服务,其职责也不止传输媒体格式以及网络信息,还可传输业务信息。其传输信息的协议可是 HTTP 或 Socket 等。
  • STUN:STUN 是一种网络协议,其目的是进行 NAT 穿越。 内网进行 NAT 后进行 P2P 连接会有两个问题:
  1. 由于 NAT 的安全机制,NAT 会过滤掉一些外网主动发送到内网的报文,而 P2P 恰恰就需要主动发起访问;
  2. NAT 后,会得到一个 IP + 端口的地址,而在进行 P2P 连接时并不知道这个地址,难道要用户手动填写吗。

所以 STUN 的作用就是能够检测网络中是否存在 NAT 设备,有就可以获取到 NAT 分配的 IP + 端口地址,然后建立一条可穿越 NAT 的 P2P 连接(这一过程就是打洞)。

  • TURN:TURN 是 STUN 协议的扩展协议,其目的是如果 STUN 在无法打通的情况下,能够正常进行连接,其原理是通过一个中继服务器进行数据转发,此服务器需要拥有独立的公网 IP。

TURN 很明显的一个问题就是其转发数据所产生的带宽费用需要由自己承担!

  • ICE:ICE(Interactive Connectivity Establishment),是一种用于实现网络连接的技术框架,用于在对等连接(如实时通信、P2P 文件共享等)中解决 NAT(Network Address Translation)和防火墙等网络障碍的问题。 ICE 是一种框架,可以通过使用多种技术(如 STUN、TURN、NAT 透明性检测等)来搜索可用的网络路径,并选择最优的路径建立连接,从而解决了 NAT 和防火墙等网络障碍的问题。 ICE 框架包含了以下几个步骤:
  1. 收集网络接口信息,包括本地 IP 地址、端口等;
  2. 通过 STUN 服务器获取公网 IP 地址和端口号;
  3. 通过 NAT 透明性检测来确定 NAT 类型和行为;
  4. 尝试直接连接对等端点;
  5. 如果直接连接失败,则使用 TURN 服务器作为中继节点进行连接。 也就是,ICE 更好的进行 NAT 穿越效果,从而提高实时通信的质量和效率。

明白以上概念后,那么就来看看更加详细的流程吧,先看下图:

 

根据上图,整体流程是:

  1. 用户 A 和用户 B 都需要先连接到信令服务器;
  2. 用户 A 和用户 B 都创建一个 PeerConnection(此时 WebRTC 会自动向 STUN/TURN 服务获取 candidate 信息, WebRTC 内置了 ICE);
  3. 用户 A 将本地音视频流添加到 PeerConnection 中(通过 getUserMedia 获取音视频流);
  4. 用户 A 作为发起方创建 offer(offer 中包含了 SDP 信息),并将获取的本地 SDP 信息添加到 PeerConnection 中(setLocalDescription),然后再通过信令服务器转发给用户 B;
  5. 用户 B 接收到用户 A 的 offer 后,将其添加到 PeerConnection 中(setRemoteDescription);
  6. 用户 B 将本地音视频流添加到 PeerConnection 中(通过 getUserMedia 获取音视频流);
  7. 用户 B 创建一个 Answer,并添加到 PeerConnection 中(setLocalDescription);
  8. 用户 B 通过信令服务器将 answer 转发给用户 A;
  9. 用户 A 接收到 answer 后将其添加到 PeerConnection 中;
  10. 用户 A 和 用户 B 都接收到了 candidate 信息后,都通过信令服务器转发给对方并添加到 PeerConnection 中(addIceCandidate);
  11. 媒体信息和网络信息交换完毕后,WebRTC 开始尝试建立 P2P 连接;
  12. 建立成功后,双方就可以通过 onTrack 获取数据并渲染到页面上。

上图是以用户 A 为发起方,用户 B 为接收方。

 

4、实现一对一实时通信

根据上面流程,我们需要:

  • STUN/TURN 服务

使用 coturn 搭建 STUN/TURN 服务

  • 充当转发的服务(信令服务)

使用 node 的 第三方库实现 websocket 服务

coturn 搭建

coturn 是开源的服务器应用,完整实现了 STUN 和 TURN 协议。借助 coturn,我们可以快捷方便的搭建一个 STUN/TURN 服务。

 

 

 

参考:https://zhuanlan.zhihu.com/p/624357784

 

 

标签:入门,用户,WebRTC,TURN,NAT,服务器,STUN,连接
From: https://www.cnblogs.com/handsomeziff/p/17652437.html

相关文章

  • 1000:入门测试题目
    1000:入门测试题目时间限制:1000ms      内存限制:32768KB提交数:300841   通过数:180737【题目描述】求两个整数的和。【输入】一行,两个用空格隔开的整数。【输出】两个整数的和。【输入样例】23【输出样例】5#include<iostream>intm......
  • H.265视频无插件流媒体播放器EasyPlayer.js播放webrtc断流重连的异常修复
    H5无插件流媒体播放器EasyPlayer属于一款高效、精炼、稳定且免费的流媒体播放器,可支持多种流媒体协议播放,可支持H.264与H.265编码格式,性能稳定、播放流畅,能支持WebSocket-FLV、HTTP-FLV,HLS(m3u8)、WebRTC等格式的视频流,并且已实现网页端实时录像、在iOS上实现低延时直播等功能。测试......
  • 初学者如何高效的学习Flutter?这份快速入门Flutter学习指南,拿走不谢
    什么是FlutterFlutter是Google推出并开源的移动端开发框架,主打跨平台、高保真、高性能。开发者可以通过Dart语言开发App,一套代码可以同时运行在iOS和Android平台。2018年12月,Google发布Flutter1.0。从那时候开始,Flutter以迅雷不及掩耳之势,迅速崛起,并稳固了其在市场上......
  • 私密信息管理工具 Vault 快速入门
    什么是VaultVault是一个基于身份的秘密和加密管理系统。秘密是您想要严格控制访问的任何内容,例如API加密密钥、密码和证书。Vault提供由身份验证和授权方法控制的加密服务。使用Vault的UI、CLI或HTTPAPI,可以安全地存储和管理、严格控制(限制)和审核对机密和其他敏感数据......
  • 2023 React 18 系统入门 进阶实战《欢乐购》
    课程下载——2023React18系统入门进阶实战《欢乐购》提取码:c61a 分享课程——React18系统入门进阶实战《欢乐购》,2023年新课,附源码。React主要的原理VirtualDOM虚拟DOM传统的web应用,操作DOM一般是直接更新操作的,但是我们知道DOM更新通常是比较昂贵的。而React为了尽可......
  • Apache ECharts简单介绍及入门案例
    1.ApacheECharts1.1介绍ApacheECharts是一款基于Javascript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。官网地址:https://echarts.apache.org/zh/index.html常见效果展示:1).柱形图2).饼形图3).折线图总结:不管是哪种形式的图形,最本......
  • Furion入门
         http://furion.baiqian.ltd/docs/serverun/ ......
  • Python基础入门学习笔记 077 GUI的终极选择:Tkinter14
    Tkinter提供了三种标准对话框模块,分别是:messagebox、filedialog、colorchoosermessagebox(消息对话框)实例1:askokcancel函数1fromtkinterimport*23print(messagebox.askokcancel("FishCDemo","发射核弹?"))45mainloop() 实例2:askquestion函数 实例3:asire......
  • Python基础入门学习笔记 074 GUI的终极选择:Tkinter11
    事件绑定对于每个组件来说,可以通过bind()方法将函数或方法绑定到具体的事件上。当被触发的事件满足该组件绑定的事件时,Tkinter就会带着事件描述去调用handler()方法实例1:捕获单击鼠标位置1fromtkinterimport*23root=Tk()45defcallback(event):6prin......
  • Python基础入门学习笔记 075 GUI的终极选择:Tkinter12
    Message组件Message(消息)组件是Label组件的变体,用于显示多行文本信息。Message组件能够自动换行,并调整文本的尺寸使其适应给定得尺寸。实例1:1fromtkinterimport*23root=Tk()4w1=Message(root,text="这是一则消息",width=100)5w1.pack()6w2=Message(root,......