，略有删节，本文根据知识共享署名4.0国际许可协议共享，BYTroland。这是JavaScript工作原理的第18章。概述什么是WebRTC？首先，很多关于这个技术的资料已经字面给出了，RTC就是RealTimeCommunicationTechnology。WebRTC填补了web开发平台的一个重要空白。过去，只有桌面聊天程序等P2P技术才能实现实时通信，网页还不能。但是WebRTC的出现改变了这种情况。WebRTC本质上允许Web应用程序创建点对点通信，我们将在后续章节中介绍。我们将讨论以下主题，以便向开发人员全面介绍WebRTC的内部结构：点对点通信防火墙和NAT穿越信令、会话和协议WebRTC接口点对点通信浏览器点对点通信:同意发起通信知道如何定位另一个点绕过安全和防火墙限制实时传输所有多媒体通信我们都知道基于浏览器的点对点通信的最大挑战之一是如何定位和建立通信与另一个网页一个网络套接字，浏览器通过它进行双向数据传输通信。我们将克服与建立此类网络连接相关的困难。每当web程序需要数据或静态资源时，都会直接从相应的服务器获取，仅此而已。但是，直接连接用户的浏览器是无法建立点对点视频聊天的，因为其他浏览器不是已知的网络服务器，所以用户不知道需要建立视频聊天的IP地址。因此，需要更多的技术来建立p2p连接。防火墙和NAT穿越一般计算机没有分配静态公共IP地址。原因是计算机位于防火墙和网络访问转换设备(NAT)之后。NAT设备将防火墙内的私有IP地址转换为公共IP地址。NAT设备对于安全和有限的可用公共IP地址是必需的。这就是开发人员的Web应用程序无法将当前设备视为具有静态公共IP地址的原因。让我们了解NAT设备的工作原理。当开发者在企业网络中加入WIFI时，电脑会被分配一个IP地址，只存在于NAT后面。比方说172.0.23.4。但是，在外部，用户的IP地址可能类似于164.53.27.98。这样，外界就会看到所有请求都来自164.53.27.98，NAT设备会确保目标用户计算机对请求的响应数据返回到对应的内部172.0.23.4IP地址计算机。这要归功于映射表。请注意，除了IP地址，网络通信还需要通信端口。由于涉及NAT设备，浏览器需要知道与之通信的机器的IP地址。这就需要使用NAT会话穿透程序（STUN）和NAT穿透中继转发服务器。为了使用WebRTC技术，开发人员需要为其公共IP地址请求STUN服务器。就好像您的计算机向远程服务器询问远程服务器从中进行查询的客户端的IP地址。远程服务器会返回对应的客户端IP地址。假设这个过程顺利，开发者将获得一个公共IP地址和端口，它可以告诉其他点如何与你直接通信。同理，这些peer也可以请求STUN或者TURN服务器获取公网IP地址，然后告知自己通信地址。信令、会话和协议上述网络信息检索过程只是一个更大的信令主题的一部分，在WebRTC中，该主题基于JavaScript会话建立协议(JSEP)标准。信令涉及网络检索和NAT穿越、会话创建和管理、通信安全、媒体功能元数据和调制以及错误处理。为了使通信顺利进行，节点必须确定有关本地媒体环境的元数据（例如分辨率和编码能力等）并收集可用的节目主机网络地址。WebRTC接口中没有集成用于重复传输此重要信息的信令机制。WebRTC标准没有指定信令，也没有在接口中实现它，以允许更灵活地使用其他技术和协议。信令和处理它的服务器由WebRTC程序开发人员控制。假设开发者基于浏览器的WebRTC程序使用前面提到的STUN服务器获得了它的公共IP地址，下一步就是与其他对等点协商并建立网络会话连接。使用特定于多媒体通信的任何信令/通信协议发起会话协商和通信连接。该协议负责管理会话和中断的规则。会话发起协议（SIP）是协议之一。由于WebRTC信令的灵活性，SIP不是唯一可用的信令协议。所选的通信协议必须与WebRTC中使用的称为会话描述协议(SDP)的应用层协议兼容。所有多媒体特定的元数据都通过SDP协议传输。任何试图与其他对等点通信的对等点（例如WebRTC程序）都会生成一组交互式连接建立协议(ICE)候选者。候选集表示可用IP地址、端口和传输协议的集合。注意，一台计算机可以有多个网络接口（有线和无线等），因此可以有多个IP地址，每个接口分配一个IP地址。下面是MDN上描述这种通信交换的图表：要建立连接，每个节点首先获得上述公共IP地址。然后动态创建信令数据“通道”以检索其他节点并支持对等协商和会话创建。这些“通道”无法从外部检索和访问，只能通过唯一标识符访问。需要注意的是，由于WebRTC的灵活性，以及??标准中没有规定信令创建过程，所使用的技术不同，“通道”的概念和使用会有一些异同。事实上，有些协议并不需要“通道”机制来进行通信。本文将假设“渠道”的存在。一旦两个或多个对等点连接到同一个“通道”，节点就可以通信和协商会话信息。这个过程有点类似于发布/订阅模型。基本上，发起者使用会话发起协议(SIP)和SDP等信令协议发送“提议”数据包。发起者等待来自连接到指定“通道”的接收者的“应答”响应。一旦收到确认，将开始选择和协商每个节点生成的最佳互连建立协调候选（ICE）集。一旦选择了一组最佳的ICE候选者，特别是所有节点通信、网络路由（IP地址和端口）和媒体信息所需的元数据就会被识别出来。这将完全建立并激活节点之间的Web套接字会话。接下来，每个节点创建本地数据流和数据通道端点，最后使用任意双向通信技术传输多媒体数据。如果识别最佳ICE候选者的过程失败，就像使用中的防火墙和NAT技术经常发生的那样，回退使用TURN服务器作为中继转发器。这个过程主要是使用服务器作为中介，然后在节点之间转发和传输数据。请注意，这不是真正的点对点通信，因为真正的点对点通信是节点之间直接的双向数据传输。每当TURN用作回退通信时，每个节点都不必知道如何连接和传输数据到另一个节点。相反，节点只需要知道在会话通信期间实时发送和接收多媒体数据的公共TURN服务器。重要的是要了解这只是故障保险和最后的手段。TURN服务器需要相当健壮，具有昂贵的带宽和强大的处理能力来处理潜在的大量数据。因此，使用TURN服务器会增加大量开销和复杂性。WebRTC接口WebRTC中有三个主要接口：MediaCapture和Streaming-允许开发人员访问麦克风和网络摄像头等输入设备。此接口允许开发人员获取麦克风或IP摄像机媒体流。RTCPeerConnection-开发人员可以将捕获的视频和音频流实时流式传输到另一个WebRTC端点。开发人员使用这些接口连接本地机器和远程节点。此接口提供用于创建到远程节点的连接、维护和监视连接以及关闭不再活动的连接的方法。RTCDataChannel-此接口允许开发人员传输任意数据。每个数据通道都与RTCPeerConnection相关联。我们将分别介绍这三类接口。MediaCaptureandStreamingMediaCaptureandStreaming接口，通常被称为MediaStreamingInterface或StreamingInterface，支持音频或视频流数据，处理音频和视频流的方法，与数据类型相关的约束，以及异步获取数据时的成功以及API调用期间触发的错误回调和事件。MediaDevices的getUserMedia()方法提示用户允许使用媒体输入设备，创建包含指定媒体类型的轨道的媒体流。媒体流可以包括视频轨道（由相机、视频录制设备、屏幕共享服务等硬件创建，或虚拟视频源）、音频轨道（类似于视频，由物理对象创建，如麦克风、A/D转换器等）或虚拟音频源）以及可能的其他类型的音轨。此方法返回解析为MediaStream对象的Promise。当用户拒绝授权或没有匹配的属性可用时，promise将分别返回PermissionDeniedError或NotFoundError。可以通过导航器对象访问MediaDevice单例：navigator.mediaDevices.getUserMedia(constraints).then(function(stream){/*使用流*/}).catch(function(err){/*处理错误*/});注意需要传入constraints对象指定返回的媒体流类型。开发人员可以配置各种配置，包括使用的摄像头（前置或后置）、帧速率、分辨率等。从25版本开始，基于Chromium的浏览器允许将通过getUserMedia()获取的音频数据分配给音频或视频元素（但请注意，媒体元素的默认值为空）。可以使用getUserMedia作为网页音频接口的输入节点：functiongotStream(stream){window.AudioContext=window.AudioContext||window.webkitAudioContext;varaudioContext=newAudioContext();//从流中创建一个音频节点varmediaStreamSource=audioContext.createMediaStreamSource（流）；//连接到目标节点监听自己或被其他节点处理mediaStreamSource.connect(audioContext.destination);}navigator.getUserMedia({audio:true},gotStream);由于该接口的隐私限制可能会导致明显的隐私问题，规范在通知用户和权限管理方面对getUserMedia()方法有非常明确的规定。getUserMedia()在打开媒体输入设备（例如用户的网络摄像头或麦克风）时必须始终获得用户的授权。浏览器可能提供为每个域名授予一次权限的能力，但必须至少在第一次请求授权，然后用户必须指定要授予的权限。通知中的规则同样重要。除了可能的其他硬件指示器之外，浏览器还必须显示一个窗口，显示正在使用的摄像头或麦克风。即使此时设备没有在录制，浏览器也必须显示一个提示窗口，指示哪个设备被授权用作输入设备。RTCPeerConnectionRTCPeerConnection表示本地计算机和远程节点之间的WebRTC连接。它提供了连接到远程节点、维护和监视连接以及关闭不再活动的连接的方法。下面是一张WebRTC图，展示了RTCPeerConnection的作用：从JavaScript的角度来看，图中需要理解的主要方面是RTCPeerConnection将复杂的底层内部结构抽象为一个接口供开发者使用。WebRTC使用的编解码器和协议为创建即使在不稳定的网络环境中也尽可能实时的通信做了很多工作：丢包恢复回声消除网络自适应视频抖动缓冲自动增益控制降噪和抑制图像“清洁”RTCDataChannel不仅仅是音视频，WebRTC还支持其他类型数据的实时传输。RTCDataChannel接口允许任意数据的点对点交换。这个接口有很多用途，包括：游戏实时文本聊天文件传输分布式网络这个接口有几个功能可以充分利用RTCPeerConnection并创建强大而灵活的对等通信：使用RTCPeerConnection创建会话多个并发通道优先级可靠性和不可靠的消息语义内置安全（DTLS）和消息拥塞控制语法与现有的WebSocket相似，包括send()方法和消息事件：varpeerConnection=newwebkitRTCPeerConnection(servers,{optional:[{RtpDataChannels:true}]});peerConnection.ondatachannel=function(event){receiveChannel=event.channel;receiveChannel.onmessage=function(event){document.querySelector("#receiver").innerHTML=event.data;};};sendChannel=peerConnection.createDataChannel("sendDataChannel",{reliable:false});document.querySelector("button#send").onclick=function(){vardata=document.querySelector("textarea#send"）。价值;sendChannel.send(数据);};由于直接在浏览器之间进行通信，因此即使使用中继转发服务器(TURN)，RTCDataChannel也将比WebSocket更快。WebRTC在实践中实际上，WebRTC需要一个服务器，但它很简单，所以会发生这种情况：每个用户检索一个节点，然后交换名称等详细信息。WebRTC客户端程序（对等点）交换网络信息。点交换媒体信息，例如视频格式和分辨率。WebRTC客户端程序穿透NAT网关和防火墙。换言之，WebRTC需要四种服务器端功能：用户检索和通信信令通过中继转发服务器穿透NAT/防火墙，防止点对点通信失败ICE使用STUN协议及其扩展TURN协议创建RTCPeerConnection连接处理NAT渗透和其他网络变化。如前所述，ICE是一种节点协议，用于连接例如两个视频聊天客户端。最初，ICE将尝试使用UDP使用尽可能低的网络延迟直接连接到节点。在这个过程中，STUN服务器只有一个任务：使NAT后面的节点能够找到它的公共地址和端口。开发人员可以检查可用的STUN服务器列表（Google有很多）。检索连接候选者如果UDP失败，ICE会尝试TCP，首先是HTTP，然后是HTTPS。如果直接连接失败-例外情况，由于企业NAT穿越和防火墙-ICE使用中间（转发）TURN服务器。换句话说，ICE首先使用基于UDP的STUN服务器直接连接到节点，如果失败，它会回退到使用TURN中继转发服务器。“RetrieveConnectionCandidates”是指检索网络接口和端口的过程。安全即时消息程序或插件可能会带来一些安全问题。例如：未加密的媒体或数据可能在浏览器之间或浏览器与服务器之间被窃取。本程序有可能在未经用户授权和同意的情况下录制和传播音频和视频。可疑软件或病毒可能会与看似无害的插件或程序一起安装。WebRTC有几种方法来解决上述问题：WebRTC实现使用安全协议，例如DTLS和SRTP。所有WebRTC组件（包括信令机制）都必须加密。WebRTC不是插件：它的组件运行在浏览器沙盒中而不是在单独的进程中，不需要单独安装并且随着浏览器升级而更新。摄像头和麦克风必须明确启用，并且必须在摄像头或麦克风运行时显示在用户窗口中。对于需要在浏览器之间实现一些实时通信流功能的产品，WebRTC是一项令人难以置信的强大技术。参考资料：https://www.html5rocks.com/en...https://www.innoarchitech.com...
