开发本机或Web技术时,最好使用什么? 关于这一主题的Holivar不会很快结束,但是很少有人会认为复制用于浏览器或WebView的本机功能很有用。 而且,如果曾经有呼叫应用程序与浏览器完全分开存在,那么现在它们很容易在Web上实现。 开发人员Grigory Kuznetsov解释了如何将WebRTC技术用于P2P连接。
-众所周知,近年来,有很多基于两个浏览器即P2P之间直接数据交换的应用程序。 这些是各种即时通讯程序,聊天,拨号程序,视频会议。 也可能是执行某种分布式计算的应用程序。 幻想的极限没有任何限制。
我们如何制造这样的技术? 假设我们要从一个浏览器打到另一个浏览器。 并想象我们需要采取什么步骤来实现这个目标。 首先,呼叫似乎是我们的照片,声音,图像,我们需要访问连接到计算机的媒体设备:相机和麦克风。 获得访问权限后,您需要两个浏览器,两个客户端来彼此查找。 有必要帮助他们以某种方式联系,联系并传达元信息。
到达后,您需要开始以P2P模式传输数据,即确保媒体流的传输。 我们拥有所有必要的物品,我们准备实施酷炫的新自行车。 但这是个玩笑,我们是工程师,我们知道这很昂贵,不合理且有风险。 因此,作为经典工程师,让我们首先考虑一下已经存在的解决方案。
首先,是过时的垂死的Adobe Flash技术。 她真的快死了,Adobe将在2020年停止支持它。 该技术将真正使您能够访问媒体设备,在其中可以实现所有必要的机制来帮助浏览器进行连接,以便它们开始传输P2P信息,但是由于没有统一的标准,因此您将再次发明自行车,只有一种方法可以实现此方法数据传输。
您可以编写一个浏览器插件。 这就是Skype在不支持更现代技术的浏览器中的工作方式。 您必须实现自己的自行车,因为没有统一的标准,对用户也不利,因为用户必须在浏览器中安装某种插件,然后执行其他操作。 用户不喜欢这样做,也不想这样做。
还有WebRTC技术-Google Hangouts,Facebook Messenger都可以使用。 Voximplant使用它,因此您可以拨打电话。 让我们更详细地讨论它。 这是一项新兴技术,它于2011年出现并不断发展。 她允许做什么? 可以使用相机和麦克风。 在两台计算机和两个浏览器之间建立P2P连接。 自然地,它允许您实时传输媒体流。 另外,它允许您传输信息,即任何二进制日期,您也可以传输P2P,您可以制作自己的分布式计算系统。
重要的一点:WebRTC不会为浏览器提供相互查找的方法。 我们可以生成有关亲人的所有必要的元信息,但是一个浏览器如何才能了解另一个的存在呢? 如何连接它们? 考虑一个例子。

有两个客户。 第一个客户要打给第二个客户。 WebRTC为您提供识别身份所需的所有信息。 但是问题仍然是如何找到另一个浏览器,如何发送此元信息,如何初始化调用。 这受开发人员的摆布,我们可以使用任何方法,使用此元信息,将其打印在纸上,通过快递发送,其他人将使用它,并且一切正常。
我们可以提出一些信号机制。 在这种情况下,这是一种第三方机制,如果我们了解客户,这将使我们能够确保在客户之间传输建立连接所必需的某些信息。
考虑使用信号服务器的示例。 有一个信号服务器,例如通过Web套接字或使用HTTP与我们的客户端保持稳定的连接。 第一个客户端生成元信息,并使用Web套接字或HTTP将其发送到信号服务器。 它还发送要与之连接的信息的某些部分,例如昵称或其他信息。
使用此标识符的信号服务器确定哪个客户端需要重定向我们的元信息,并将其转发。 第二个客户端接收它,使用它,自行安装,形成响应,然后使用信令机制将其发送到信号服务器,后者再将其中继到第一个客户端。 因此,两个客户端当前都具有建立P2P连接的所有必需的日期和元信息。 做完了
让我们仔细看看客户端正在交换的内容;它们正在交换SDP数据报,会话描述协议。

这实际上是一个文本文件,其中包含建立连接的所有必要信息。 存在有关IP地址,使用的端口,在客户端之间追逐什么样的信息,它是什么的信息-音频,视频,使用的编解码器。 我们需要的一切都在那里。
注意第二行。 它显示客户端的IP地址192.168.0.15。 显然,这是某些本地网络上计算机的IP地址。 如果我们有两台计算机,每台计算机都在本地网络上,并且每台计算机都知道其在该网络中的IP地址,则他们要呼叫。 他们将能够使用这样的数据报来做到这一点吗? 显然不是,他们不知道外部IP地址。 如何成为

让我们暂且看看NAT是如何工作的。 在Internet上,许多计算机都隐藏在路由器后面。 在本地网络中,计算机知道它们的地址,有一台具有外部IP地址的路由器,所有这些计算机都以该路由器的IP地址突出显示。 当来自本地网络上的计算机的数据包到达路由器时,路由器将查看应将其转发到的位置。 如果在此本地网络的另一个网络上,则他只是将其中继,如果需要将其发送到外部,则将其转发到Internet,然后会编译一个路由表。

我们填写要转发数据包的计算机的内部IP地址,端口,设置外部IP地址,路由器的IP地址以及更改端口。 这是为了什么 想象两台计算机正在访问同一资源,并且我们需要正确地路由响应数据包。 我们将通过端口识别它们,该端口对于每台计算机都是唯一的,而外部IP地址将匹配。
如果存在NAT,并且计算机在同一IP地址下伸出,但内部却彼此了解,该如何生存?
互联网连接建立的ICE框架得以解决。 它描述了绕过NAT的方法,如果我们有NAT,如何建立连接。
该框架使用所谓的STUN服务器属性。

这是一个特殊的服务器,参照它,您可以找到您的外部IP地址。 因此,在建立P2P连接的过程中,每个客户端必须向此STUN服务器发出请求,以找出其IP地址,并生成附加信息IceCandidate,并使用IceCandidate交换此信令机制。 然后,客户端将使用正确的IP地址相互了解,并能够建立P2P连接。
但是,情况更为复杂。 例如,当计算机隐藏在双NAT后面时。 在这种情况下,ICE框架需要使用TURN服务器。

这是一种特殊的服务器,它可以将客户端-客户端连接P2P转换为客户端-服务器-客户端连接,即它充当中继器。 对于开发人员而言,好消息是,无论连接到三种情况中的哪一种,无论是在本地网络上,还是需要转向STUN或TURN服务器,API技术对我们来说都是相同的。 我们仅在开始时简单地指出ICE和TURN服务器的配置,指出如何访问它们,然后该技术就可以为我们做所有事情。

简短摘要。 要建立连接,您需要选择并实现某种信令机制,这是一种特定的中介,可以帮助我们发送元信息。 WebRTC将为此提供所有必要的元信息。
我们必须与NAT作战,这是我们现阶段的主要敌人。 但是要解决此问题,我们使用STUN服务器找出我们的外部IP地址,然后使用TURN服务器作为中继。
我们到底在传输什么? 关于媒体流。

媒体流是在其内部包含曲目的通道。 媒体流中的轨道已同步。 音频和视频不会发散,它们只会有一个定时。 您可以在媒体流中制作任意数量的轨道,可以分别控制轨道,例如,您可以使音频静音,仅留下图片。 您还可以传输任意数量的媒体流,例如,允许您实施会议。
如何从浏览器访问媒体? 让我们谈谈API。

有一个getUserMedia方法,它接受一组常量作为输入。 这是一个特殊的对象,您可以在其中指示要访问的设备,相机和麦克风。 您可以指定要具有的特征,分辨率和两个参数-successCallback和errorCallback,在成功或失败的情况下会调用它们。 更多的现代技术实现使用承诺。
还有一个方便的enumerateDevices方法,该方法返回连接到计算机的所有媒体设备的列表,这使您有机会向用户展示它们,绘制某种选择器,以便用户选择他要使用的特定相机。

API中的中心对象是RTCPeerConnection。 建立连接时,我们使用RTCPeerConnection类,该类返回peerConnection对象。 作为配置,我们指定一组ICE服务器,即STUN和TURN服务器,在安装过程中将对其进行访问。 每当我们需要信号机制的帮助时,都会触发一个重要的onicecandidate事件。 就是说,WebRTC技术向一个STUN服务器发出了一个请求,例如,我们识别了我们的外部IP地址,一个新的ICECandidate出现了,我们需要使用第三方机制转发该事件,这很麻烦。

当我们建立连接并希望初始化调用时,我们使用createOffer()方法形成初始SDP,向SDP提供需要发送给伙伴的相同元信息。
要将其设置为PeerConnection,我们使用setLocalDescription()方法。 对话者通过信令机制接收此信息,使用setRemoteDescription()方法将其设置为自己,并使用createAnswer()方法生成响应,该响应也使用信令机制发送给第一客户端。

当我们访问媒体时,获得了媒体流,我们使用addStream方法将其传输到我们的P2P连接中,我们的对话者找到了它,并对其onaddstream事件进行了调整。 他将收到我们的信息流并将能够显示它。

您也可以使用数据流。 这与形成常规的peerConnection非常相似,只需指定RtpDataChannels:true并调用createDataChannel()方法即可。 我不会对此进行详细介绍,因为这种工作与使用Web套接字非常相似。
关于安全性的几句话。 WebRTC仅在HTTPS上有效,您的网站必须使用证书签名。 媒体流也使用DTLS加密。 这项技术不需要安装任何额外的东西,没有插件,这很好。 而且,制作间谍软件应用程序将不起作用,该站点也不会窃听或监视用户,他将向用户显示一个特殊提示,要求用户访问并仅在用户允许访问音频和媒体设备时收到。

至于浏览器支持-IE保持不变。 去年年底,增加了对Safari的支持,也就是说,所有现代浏览器都已经可以使用该技术,并且我们可以安全地使用它。
我想共享一组各种实用程序,如果您想使用WebRTC可以为您提供帮助。 这主要是一个
适配器 。 技术在不断发展,浏览器API也有所不同。 适配器库消除了这种差异,并使工作更加轻松。
Peerjs是用于处理数据流的便捷库。 您还可以查看
STUN和
TURN服务器的开源实现。 在
awesome-webrtc页面上有大量的教程,示例和文章,我强烈推荐它。
最后一个有用的调试工具是webrtc-internals。 在开发过程中,您可以在地址栏中键入特殊命令-例如,在Chrome浏览器中,这是Chrome:// webrtc-internals。 您将看到一个页面,其中包含有关当前WebRTC连接的所有信息。 方法中将有一系列调用,浏览器之间交换的所有数据报,以及以某种方式表征您的连接的图。 通常,在调试和开发过程中将需要所有信息。 谢谢您的关注。