WebRTC成为HTML5标准？SDPSTUNTURN你想知

　　大家好，很高兴又见面了，我是web前端分享，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！
　　上一篇文章《WebRTC已成为HTML5标准？是时候开始学习了？》发布后反响不错，特定再出一文详细论述WebRTC、SDP、STUN、TURN等诸多内容，创作不易，拒绝转发到其他平台，万望理解！1。前言1。1什么是WebRTC？
　　下图展示了不同协议出现的时间线：
　　各传输协议时间线
　　在计算机网络中，协议是一组规则，用于管理数据在设备之间的交换方式。协议定义了通信的规则、语法、语义和同步以及可能的错误恢复方法，本文中讨论的WebRTC协议定义了应用层软件如何相互交互。
　　WebRTC（WebRealTimeCommunication）也被称为网络实时通信，是由Google、Mozilla和其他公司推动的一个开源项目，它通过JavascriptAPI实现无插件的实时通信，建立浏览器之间点对点（PeertoPeer）的连接。1。2WebRTC的优点？
　　WebRTC的优点可以归纳为以下几个方面：开源、免费，开发者不需要承担高昂的专利费用基于浏览器，不需要安装插件，只要调用API就可以实现音视频互动被纳入了HTML5标准，主流浏览器全面支持WebRTC不仅支持Web之间的音视频通讯，还支持Android以及IOS端，由于该项目是开源的，我们也可以通过编译C代码，从而达到全平台的互通
　　在WebRTC诞生之前，开发实时音视频应用的成本是非常高，需要考虑的技术问题很多，如音视频的编解码，数据传输延时、丢包、网络抖动、回音处理和消除等，如果要兼容浏览器端的实时音视频通信，还需要额外安装插件。可喜的是，本文的主角WebRTC在2021年1月被W3C和IETF发布为正式标准，而且得到了大多数主流浏览器的支持。
　　CanIUse中WebRTC的浏览器支持情况
　　WebRTC项目的愿景：实时通信web化，让WebRTC成为互联网音视频实时通信的规范，让开发者基于此规范快速开发出安全、可靠的应用。WebRTC必须在HTTPS环境下运行，你可以在https：appr。tc、https：snapdrop。net体验WebRTC应用，或者在https：nashaofu。github。iowebrtcdemo，https：webrtc。github。iosamples查看WebRTC示例。2。了解SDP和OfferAnswer模型2。1什么是RTPRTCP？
　　大多数人已经了解TCP和UDP等传输协议，当您要保证传输数据准确（例如：邮件）时，TCP协议更好，而UDP则更加偏向传输速度（例如：YouTube视频）。
　　实时传输协议（RealtimeTransportProtocol，RTP）又是一种用于通过IP网络传送音频和视频的网络协议。RTP广泛用于涉及流媒体的通信和娱乐系统，例如电话、视频电话会议、电视服务等。作为一种电信标准，WebRTC正在使用RTP传输实时数据。
　　RTP控制协议（RTPControlProtocol，即RTCP）是实时传输协议（RTP）的兄弟协议。RTCP为RTP会话提供额外统计和控制信息。使用RTCP您可以获得有关数据传输成功的数据，例如传输过程中发生了多少数据包丢失、数据包延迟是多少或视频通话的分辨率是多少等等。
　　RTP和RTCP数据包的传输发生在媒体通道上，而WebRTC负责媒体通道上的媒体传输。作为应用程序开发人员，您的责任是管理信令通道。所以你通常不知道这些概念，而且大多数时候你不需要它们，但在开始SDP和OfferAnswer模型之前有必要先了解下RTPRTCP。2。2什么是SDP（SessionDescriptionProtocol）？
　　现实生活中，如果您想让人们联系到您，您会分享您的联系信息，比如电子邮件、电话号码、Instagram帐户、家庭住址等。分享此类信息的最简单方法是向他们提供您的名片，而为了能够找到对方，互联网数字名片可能包含以下信息：主叫方和被叫方IP地址支持哪些媒体类型（音频、视频、屏幕共享等）当前启用或禁用了哪些媒体类型（视频开关保持取消保持等）对方都支持哪些编解码器类型
　　互联网数字名片
　　在电信领域，称这种数字名片为会话描述协议（SDP），SDP包含对等点相互交谈所需的信息。WebRTC也使用SDP作为通信标准来发起呼叫，SDP只是一个可以被端点解析和操作的文本。
　　例如，如果用户想要保持通话，您可以通过将SDP作为应用程序进行操作来禁用启用视频和音频流。或者您的系统需要特定的视频编解码器，比方说H。264，您可以删除除H。264之外的任何其他编解码器。
　　这就是SDP的强大之处，它很容易根据您的要求进行操作
　　下面是一个SDP示例，可能包含以下信息：oalice28908445262890844526INIP410。48。1。2O表示呼叫的发起者、会话ID和发起者的IP地址t00t表示会话结束时间。如果为0，则表示会话不受时间限制maudio49170UDPTLSRTPSAVPF1110m表示medialine，是session中可以存在的媒体属性。在这种情况下，它表示音频媒体线。此行还包含将在会话中使用的传输协议（UDPTLSRTPSAVPF）。最后，此行包含将在会话中使用的编解码器有效载荷编号（111，0）cINIP4217。345。789。123c表示连接信息，比如你要调用的远程设备的IP地址asendrecvartpmap：111opus480002artpmap：0PCMU8000a表示属性线。它定义会话和媒体行属性。在第一行中，asendrcv属性表示设备愿意发送和接收音频媒体，他还可以有其他值，如recvonly、sendonly或inactive用于不同的场景，如保持或视频关闭Rtpmap属性指示音频编解码器编号的映射。在这种情况下，111映射到具有48，000bps带宽的Opus，而0映射到具有8，000bps带宽的PCMU编解码器，标准SDP中可以有更多的属性行。mvideo51372UDPTLSRTPSAVPF98100m也表示媒体行，在这种情况下，它表示视频媒体线。同样，它包含传输协议和编解码器有效负载编号。asendrecvartpmap：98VP990000artpmap：100H26490000a表示属性行。在第一行中，asendrcv属性表示设备愿意发送和接收视频媒体rtpmap值，98映射到具有90，000bps带宽的VP9视频编解码器，100映射到具有90，000bps带宽的H。264视频编解码器
　　SDP的更多属性配置可以阅读文末资料，这里不再展开。2。3什么是OfferAnswer模型？
　　到目前为止，解释了WebRTC如何在媒体通道中传输数据？（RTPRTCP）和如何在信令通道中根据需要指定会话属性？（SDP）。接下来回答应用程序应该如何相互传输会话属性（SDP）？。
　　你可能有一张华丽的名片，但如果你不把它送给任何人，它就毫无用处，此规则也适用于SDP。我们需要在对等点之间交换SDP以发起呼叫。OfferAnswer模型是在WebRTC中用作电信标准的SDP交换过程，交换方式由申请时决定。应用程序可以通过HTTPHTTPS请求、Web套接字、推送通知等方式发送它。这完全取决于应用程序。
　　OfferAnswer模型
　　OfferAnswer模型顾名思义，在这个模型中有一个Offerer和一个Answerer。提供者是启动信令过程的人，例如开始拨出电话或发送通话事件的人，包括保持和关闭视频开关。回答者是回答传入提议的人，例如接听来电或向通话中事件发送合适的数据。
　　OfferAnswer模型有4个基本步骤；Offerer创建一个OfferSDP并将其发送到远程节点。应答者收到提议者的SDP，并自行设置。Answerer创建一个AnswerSDP并将其发送给offerer提供者收到应答者的SDP，并自行设置。
　　之后，如果一切正常，呼叫开始。2。4WebRTC的OfferAnswer模型交换流程
　　下图显示了WebRTC上使用OfferAnswer模型的SDP（SessionDescriptionProtocol，即会话描述协议）交换过程：
　　WebRTC信令流程
　　接下来一一说明这些步骤：Peer1获取用户媒体，然后从WebRTC创建一个PeerConnection对象创建PeerConnection后，应用程序需要调用WebRTC的createOffer接口WebRTC创建一个OfferSDP，并且可以根据需要操作SDP应用程序应将OfferSDP设置回WebRTC应用程序应向Peer2发送OfferSDPPeer2上的应用程序收到OfferSDP，Peer2应该获取用户媒体并创建PeerConnection对象（如果目前尚未创建）Peer2上的应用程序将OfferSDP设置给WebRTCPeer2上的应用程序使用WebRTC的createAnswerAPI生成应答SDPWebRTC创建一个应答SDP并将其提供给应用程序，应用程序可以根据需要操作SDP应用程序应将AnswerSDP设置给WebRTCPeer2上的应用程序应将应答SDP发送给Peer1Peer1上的应用程序设置应答SDP如果一切正常，RTP媒体流将通过WebRTC在媒体通道上启动。
　　上面可能有很多步骤，但其中大部分都是重复性任务。WebRTC交换offer与网络参数之后，就会尝试直接使用对方的IP地址与端口进行直连，这个过程会根据双方网络情况，使用的不同的方式建立连接，后文NAT（NetworkAddressTranslation，即网络地址转换）打洞就是介绍这部分内容。3。什么是信令服务器？什么是STUN？什么是TURN？
　　A与B在建立WebRTC连接过程中，需要互相知道对方的IP与通信端口。那么A与B要如何知道对方的IP与端口呢？答案就是通过信令服务器。信令服务器的作用是作为一个中间人帮助双方在尽可能少的暴露隐私的情况下建立连接。WebRTC并没有提供信令传递机制，你可以使用任何方式如WebSocket或者XMLHttpRequest等，来交换彼此的令牌信息。
　　STUN和TURN服务器是两种类型的WebRTC信令服务器，可用于在构建实时通信应用程序时创建对等（P2P）连接。3。1什么是STUN？
　　STUN（NAT会话遍历实用程序）使用UDP协议通过NAT来实现ICE能力。STUN允许应用程序发现它们之间和公共互联网上的NAT、防火墙的存在和类型。任何设备都可以使用它来确定NAT分配给它的IP地址和端口。
　　通常，STUN客户端可以向STUN服务器发送消息以获取公共IP和端口信息，然后基于此公共IP和端口信息即可在客户端之间通过互联网进行点对点通信。3。2什么是TURN？
　　TURN（TraversalUsingRelaysaroundNAT）是一种协议，可协助webRTC应用程序穿越网络地址转换器（NAT）或防火墙。TURNServer允许客户端通过中间服务器发送和接收数据，TURN协议是STUN的扩展。
　　在少数情况下，客户端通信端点在不同类型的NAT后面，或者当使用对称NAT时，通过中继服务器及其称为TURN服务器发送媒体可能更容易。4。WebRTCAPI调用4。1RTCPeerConnection
　　RTCPeerConnection用于点对点之间建立连接以传输音视频数据流，这是RTCPeerConnection的任务，为此需要借助一个信令服务器（signalingserver）来进行，信令包括3种类型的信息：Sessioncontrolmessages：初始化和关闭通信，及报告错误；Networkconfiguration：双方的IP地址和端口号（局域网内部IP地址需转换为外部的IP地址）；Mediacapabilities：双方的浏览器支持使用何种编码以及多高的视频分辨率。varPeerConnectionwindow。RTCPeerConnectionwindow。mozRTCPeerConnectionwindow。webkitRTCPeerCnavigator。getUserMedianavigator。getUserMedia？getUserMedia：navigator。mozGetUserMedia？mozGetUserMedia：navigator。webkitGetUserMedia？webkitGetUserMedia：getUserMvarvdocument。createElement（video）；创建信令（createOffer）varpcnewPeerConnection（）；pc。addStream（video）；pc。createOffer（function（desc）｛pc。setLocalDescription（desc，function（）｛sendtheoffertoaserverthatcannegotiatewitharemoteclient｝）；｝）；创建回复（createAnswer）varpcnewPeerConnection（）；pc。setRemoteDescription（newRTCSessionDescription（offer），function（）｛pc。createAnswer（function（answer）｛pc。setLocalDescription（answer，function（）｛sendtheanswertotheremoteconnection｝）；｝）；｝）；4。2RTCDataChannel
　　RTCDataChannel接口代表在两者之间建立了一个双向数据通道的连接，可以用RTCPeerConnection。createDataChannel（）或者在现有的RTCPeerConnection上用RTCDataChannelEvent类型的datachannel事件接收，创建出RTCDataChannel类型的对象。varpcnewRTCPeerConnection（）；获取RTCPeerConnection对象vardcpc。createDataChannel（mychannel）；创建DataChannel对象dc。onmessagefunction（event）｛console。log（received：event。data）；｝；dc。onopenfunction（）｛console。log（datachannelopen）；｝；dc。onclosefunction（）｛console。log（datachannelclose）；｝；4。3访问用户摄像头及麦克风getUserMedia
　　WebRTC支持直接传输音频流和视频流（https：appr。tc）：constpcnewRTCPeerConnection（）；获取RTCPeerConnectionnavigator。getUserMedia（｛video：true｝，stream｛添加视频流到会话中stream。getTracks（）。forEach（trackpc。addTrack（track，stream））在网页中预览自己摄像头拍摄到的内容，其中localVideo表示一个Video对象localVideo。srcO｝）
　　navigator。getUserMedia（）还可以和webAudioAPI相结合，用来处理音频效果：varrangedocument。querySelector（input）；window。AudioContextwindow。AudioContextwindow。webkitAudioCvaraudioCtxnewAudioContext（）；navigator。getUserMedia（｛audio：true｝，function（stream）｛创建音频流varsourceaudioCtx。createMediaStreamSource（stream）；双二阶滤波器varbiquadFilteraudioCtx。createBiquadFilter（）；biquadFilter。biquadFilter。frequenc。value1000；biquadFilter。gain。valuerange。source。connect（biquadFilter）；biquadFilter。connect（audioCtx。destination）；｝，function（error）｛console。log（error）；｝）；
　　其实，WebRTC并不只是用来做视频、音频，它还可以用来传输任意数据，包括文件，文本等。上面代码示例可以看到，WebRTC规定了dataChannel这个双工数据通道，而https：snapdrop。net这个网站就是通过WebRTC进行文件分享。constpcnewRTCPeerConnection（）constdataChannelpc。createDataChannel（chat）监听datachannel事件pc。addEventListener（datachannel，event｛接收通信方发送过来的数据event。channel。addEventListener（message，event｛console。log（message，event。message）｝）｝）dataChannel。addEventListener（open，（）｛发送数据，可发送任意数据dataChannel。send（Hi！）｝）dataChannel。addEventListener（close，event｛｝）4。4candidate事件
　　当RTCPeerConnection实例执行setLocalDescription（）后，RTCPeerConnection就会探测自己的网络环境，然后用candidate事件返回候选网络环境数据，网络环境数据中最重要的是IP地址与端口组成的候选通信地址。candidate事件中的event。candidate主要包含以下几个部分：本机IP地址本机用于WebRTC通信的端口号候选者类型，包括host、srflx和relay优先级传输协议
　　具体数据结构的示例如下：｛address：192。168。31。67，candidate：candidate：21476061011udp2122260223192。168。31。6757959typhostgeneration0ufragEaWwnetworkid1networkcost10，component：rtp，foundation：2147606101，port：57959，priority：2122260223，protocol：udp，relatedAddress：null，relatedPort：null，sdpMLineIndex：0，sdpMid：0，tcpType：null，type：host，usernameFragment：EaWw，｝；
　　candidate事件type字段取值分别为host、srflx、relay：host（Hostcandidate）：从本地网卡上获取的地址srflx（Serverreflexivecandidate）：STUN（SessionTraversalUtilitiesforNAT，即NAT会话穿越应用程序）返回的该客户端的地址relay（Relayreflexivecandidate）：：TURN（TraversalUsingRelayNAT，即通过Relay方式穿越NAT）服务器为该客户端分配的中继地址
　　本地的candidate与远端candidate构成的每一对都有一定的优先级，按优先级排序进行连通性检查。最后从有效的candidate组合中选择优先级最高的作为传输地址，用于建立P2P连接。5。网络地址转换（NAT）
　　网络地址转换（英语：NetworkAddressTranslation，缩写：NAT；又称网络掩蔽、IP掩蔽）在计算机网络中是一种在IP数据包通过路由器或防火墙时重写来源IP地址或目的IP地址的技术。这种技术被普遍使用在有多台主机但只通过一个公有IP地址访问互联网的私有网络中。要建立一个连接需要知道对方的IP地址和端口号，在局域网里面一台路由器（基站）可能会连接着很多台设备，例如家庭路由器接入宽带的时候，宽带服务商会分配一个公网的IP地址，所有连到这个路由器的设备都共用这个公网IP地址。如果两台设备都用了同一个公网IP：port去发送请求，服务器返回数据在经过路由器时它就不知道应该转发给哪一个设备。因此路由器需要重写IP地址端口号进行区分，如下图所示：
　　NAT设备通常会自动设置各个设备的映射关系，也可以在路由器端去手动设置。如上图的NAT维护的映射关系还会和要访问的目标IP地址进行绑定，例如同一终端使用同一端口访问不同的目标IP，就会建立不同的映射关系。
　　如上示例NAT上建立的映射关系如下：
　　内网IP端口
　　外网IP端口
　　NAT对外IP与端口
　　192。168。1。2：8080
　　39。182。39。30：443
　　10。188。20。10：8000
　　192。168。1。2：8080
　　39。182。39。40：443
　　10。188。20。10：8001
　　所以实际存储的映射关系会包含上面3部分内容，这样做的目的是保证网络安全。想象如下例子，终端192。168。1。2：8080通过路由器使用10。188。20。10：8000访问服务器A，建立NAT映射如果为192。168。1。2：808010。188。20。10：8000，那么如果有人向10。188。20。10：8000发送数据就会转发到192。168。1。2：8080，这样就会导致内网的服务被外部随意访问，所以NAT映射会记录目标地址。当然，由于NAT有多种类型，NAT映射也会存不同，更多内容可参考维基百科或者WebRTC网络基础九、第二节NAT打洞原理，下表进行一个简单的归纳。
　　5。1NAT打洞
　　由于NAT有上面4种类型，所以两个设备要建立P2P连接就要使用不同的方式。5。1。1完全锥型NAT
　　完全锥型是非常简单的，左边是内网的主机，它有自己的内网IP地址和端口，通过防火墙之后，它形成一个外网的IP地址，那么外网的主机要想与内网的主机进行通信的时候，首先要由内网的主机向外发送一个请求，请求外网中的其中一台主机，这样会形成的结果就是它会在NAT服务上打一个洞，这样会形成一个外网的IP地址和端口。形成了外网的IP地址和端口之后，其他的主机只要获得了这个IP地址和端口它都可以向它发送数据。并且可以顺利的通过防火墙发送给内网的主机。这样就可以进行通讯了，这是完全锥型，也是最好穿越的一种NAT类型。但是安全性就差很多。
　　NAT内网计算机IP地址为10。0。0。1，其在端口8000上收发消息，映射到NAT上的外部IP和端口为202。123。211。25：8000。这样Internet上的任何人都可以向NAT上的内网IP：端口发送数据包，这些数据包将被传递到10。0。0。1：8000的客户端机器。5。1。2地址限制锥型NAT
　　它的安全性好一些，它会在防火墙上形成一个五元组，即内网主机的IP地址和端口、映射后的公网IP地址和端口、请求的主机IP地址。他们首先有一个公共的步骤，第一步就是要先由内网的主机向外网发送一个请求，在这个防火墙上或者NAT服务上形成一个映射表，那形成之后外网的主机就可以和内网的主机进行通讯了。
　　客户端向服务器1（IP192。248。22。100）发送数据包，然后NAT将客户端的10。0。0。1：8000映射到外网的202。123。211。25：8000，现在server1可以将数据包发送到目的地。但是，NAT将阻止来自服务器2（IP192。248。22。200）的数据包，直到客户端向服务器2的IP地址发送数据包。一旦客户端将数据包发送到服务器2，服务器1和服务器2都可以将数据包发送回客户端。5。1。3端口限制锥型NAT
　　端口限制型就更加严格一些了，不光是对IP地址，还要对端口做限制，所以在防火墙上就形成了六元组，不光有内网的IP地址和端口、映射后的公网的IP地址和端口、还有你请求的主机的IP地址和端口。
　　如果客户端将数据包发送到192。248。22。100：10100（包含IP和端口），NAT将只允许来自192。248。22。131：10100的数据包（到客户端），它丢弃来自192。248。22。131：10200（相同ip但不同端口）的数据包。5。1。4对称型NAT
　　对称限制型就更加严格了，以前的类型是在防火墙上形成映射后的公网的IP地址是保持不变的，大家要找还是能找到它的，虽然不通，但是对于这个对称型它就不一样了，它就发生了变化，不光是形成了一个IP地址和端口，而且还会形成多个，对于每一台主机都会形成一个不同的IP地址和端口对。
　　如果客户端从10。0。0。1：8000发送数据到server1，其外网地址被映射为202。123。211。25：12345，而如果客户端从同一个端口（10。0。0。1：8000）发送到不同的IP，则映射的外网地址也会不同（即外网地址被映射为202。123。211。25：45678）。server1只能响应自己的映射，server2也只能响应自己的映射，两者无法公用。如果任何一个地址尝试发送到另一个映射的IP：port，这些数据包将被丢弃。5。2WebRTC打洞这么复杂么？
　　WebRTC本身就已经实现NAT打洞功能，只需要连接的双方交换了网络端口和IP之后，WebRTC就会自动进行打洞。WebRTC使用一个叫做交互式连接设施（ICE，InteractiveConnectivityEstablishment，即交互式连接建立）协议框架，ICE整合了STUN与TURN。STUN是用来探测终端NAT类型、IP和端口的服务，WebRTC获取到NAT类型、IP和端口后就会触发candidate事件，然后连接双方交换IP与端口，开始打洞。如果打洞失败，那么就会使用TURN服务器转发流量。
　　由于WebRTC提供了ICE，所以使用非常简单，只需在newRTCPeerConnection时传入iceServers参数即可。googel提供了免费的STUN服务器去帮助打洞，也可以自己架设服务器。constpcnewRTCPeerConnection（｛可以传入多个stun服务器或者turn服务器iceServers：〔｛url：stun：stun。l。google。com：19302｝，｛url：stun：stun1。l。google。com：19302｝，｛url：stun：stun2。l。google。com：19302｝，｛url：stun：stun3。l。google。com：19302｝，｛url：stun：stun4。l。google。com：19302｝，〕，｝）；6。WebRTCvsWebSocket区别用途区别WebSocket允许浏览器和Web服务器之间进行全双工通信。WebRTC允许两个浏览器之间的全双工通信。
　　2。协议区别WebSocket使用TCP协议WebRTC使用UDP协议
　　3。流量路径WebSocket浏览需要经过服务器WebRTC是直接连接，浏览不会经过第三方服务器，是一个去中心化的架构模型，简单说就是省带宽。
　　4。实时性WebSocket延迟高（不是直接连接）WebRTC延迟低
　　通常WebRTC会与WebSocket配合使用，WebSocket的作用主要是用来交换客户端的SDP与网络信息，Websocket传输的内容与真正通信数据无关，只是协助WebRTC建立连接。参考资料
　　https：medium。comorioninnovationturkeywebrtcinanutshellepiica8cb33f8ff3
　　https：datatracker。ietf。orgdochtmlrfc4566
　　https：medium。comrahasaknetworkaddresstranslationnatdf84dc1cb06c
　　https：developer。mozilla。orgenUSdocsWebAPIRTCDataChannel
　　https：caniuse。com？searchWebRTC
　　https：www。jianshu。comp1022f559a805
　　https：zhuanlan。zhihu。comp421503695
　　https：github。comnashaofuwebrtcdemo
　　https：blog。csdn。netxyphfarticledetails107297616
　　https：medium。comavtranscodewhatiswebrtcandhowtosetupstunturnserverforwebrtccommunication63314728b9d0
　　https：webrtc。ventures202012webrtcsignalingstunvsturn