WebRTC点对点应用架构研究-唐霜

这是我在公司内部的一次分享，想要让小伙伴原创内容，盗版必究。转载请注明出处：www.tangshuang.net对WebRTC都有所了解，并且可以上手去本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。做一个基于webrtc的应用。虽然几乎所【作者：唐霜】【版权所有】唐霜 www.tangshuang.net有人都知道，webrtc是一个浏览器端内【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。置的点对点接口，甚至是准标准了。但是，到转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net底怎么利用这一个已经不是新特性，但是很不本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net幸的是，大家对这东西还是只停留在听说过，【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】怎么才能使用它呢？怎么利用webrtc作未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。出一个我们想要的p2p应用呢？这篇文章结未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net合我的分享，再加一些补充，把关于webr本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。tc入门的东西讲清楚。

著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】

什么是WebRTC？

到底什么是WebRTC？其实这个问题并没本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】有三两句那么清除，要解释很多词。我总结起未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net来，只能用一些侧面的，但是容易理解的内容著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。进行解释：

本文版权归作者所有，未经授权不得转载。【本文受版权保护】

全称为Web Real-Time Com【转载请注明来源】未经授权，禁止复制转载。munications，即web实时通讯

【原创内容，转载请注明出处】

本文作者：唐霜，转载请注明出处。

Peer-to-peer，点对点

未经授权，禁止复制转载。

【未经授权禁止转载】

to capture and optio【作者：唐霜】原创内容，盗版必究。nally stream audio a【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。nd/or video media, a【未经授权禁止转载】【原创不易，请尊重版权】s well as to exchang【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.nete arbitrary data bet【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】ween browsers 抓取用户的视【本文受版权保护】【版权所有，侵权必究】频或音频流，也可以传输任意数据类型，在浏【原创内容，转载请注明出处】未经授权，禁止复制转载。览器之间（between是两个之间的意思【本文受版权保护】【作者：唐霜】，所以是说webrtc仅是两个之间的事，本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。没法整3个之间的事）。另外，还要注意“浏著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net览器”这个点，webrtc是浏览器内置的【本文受版权保护】著作权归作者所有，禁止商业用途转载。，跟很多其他浏览器自带的接口，例如web转载请注明出处：www.tangshuang.net【本文受版权保护】sql一样。但是实际上，webrtc的接本文作者：唐霜，转载请注明出处。原创内容，盗版必究。口完全独立出来，所以也不一定非得在浏览器【作者：唐霜】原创内容，盗版必究。环境下，目前node、react-nat【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。ive都有对应的包使得它们支持使用web本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netrtc。

本文作者：唐霜，转载请注明出处。

【本文受版权保护】

【原创不易，请尊重版权】

without requiring an本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。 intermediary 不需要中间就【原创内容，转载请注明出处】【转载请注明来源】可以传输（忽悠吧）

转载请注明出处：www.tangshuang.net

本文版权归作者所有，未经授权不得转载。

without requiring th著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】at the user install 未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.netplug-ins or any othe【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。r third-party softwa【本文受版权保护】未经授权，禁止复制转载。re 不需要插件或第三方软件

【转载请注明来源】

【本文受版权保护】

这是从MDN上面抄来的解释，这里面有个坑，就是，we【关注微信公众号：wwwtangshuangnet】【作者：唐霜】brtc的初衷，是为了解决点对点的媒体传【本文受版权保护】【未经授权禁止转载】输问题，从这个点考虑，视频通话这样的场景本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。是最适合的，没有之一。但是，我们还想把这【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net个事情整深入一点。不过，在这之前，我们必转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。须了解，作为开发者，怎么一行一行，把这些转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】接口都使用起来。

【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】

历史和现状

作为一篇完整的文章，还是需要有一些废话把【版权所有】唐霜 www.tangshuang.net【作者：唐霜】webrtc的前世今生讲一下。讲到点对点本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】媒体通讯技术，不得不讲到一家公司。201本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。1年的时候，Google 收购了GIPS著作权归作者所有，禁止商业用途转载。【作者：唐霜】，它是一个为RTC开发出许多组件的一个公【原创内容，转载请注明出处】【作者：唐霜】司，例如编解码和回声消除技术。Googl【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】e收购了它才一年，就在2012年开源了G本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netIPS开发的技术，开源的时候，就以Web【转载请注明来源】本文作者：唐霜，转载请注明出处。RTC作为开源技术的名称，并开始积极与相【作者：唐霜】本文版权归作者所有，未经授权不得转载。关机构IET和W3C制定行业标准。

【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net【转载请注明来源】

可以说这家公司开发了从早期开始，点对点媒转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。体通讯领域最可靠的技术，被全球各家公司使【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。用。因此，它们的技术不可言喻的属于顶级。著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】谷歌拿到它们的技术之后，就把它们开源了，【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。可以说对于其他开发厂商而言真的是福音中的【本文受版权保护】【作者：唐霜】福音。而这个被开源出来的东西，就叫web【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。rtc。

未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。

目前，webrtc已经得到了多个浏览器的【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】支持，主要是chrome、firefox本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。、opera，但是ie和safari还不原创内容，盗版必究。【版权所有，侵权必究】完全支持。如果想要做一款基于webrtc【版权所有】唐霜 www.tangshuang.net【作者：唐霜】的应用，就必须在你的客户端里面去使用支持【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.netwebrtc的浏览器内核。不过幸运的是，本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。node和react-native都已经【未经授权禁止转载】【原创内容，转载请注明出处】有人做了包，可以实现将webrtc集成到原创内容，盗版必究。【本文首发于唐霜的博客】应用中，这样，基于electron和re本文作者：唐霜，转载请注明出处。原创内容，盗版必究。act-native的点对点应用就显得非未经授权，禁止复制转载。【版权所有，侵权必究】常容易了。

著作权归作者所有，禁止商业用途转载。【转载请注明来源】【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】

WebRTC的API

webrtc给了我们三个主要的api接口【本文受版权保护】原创内容，盗版必究。，我们可以利用这三个接口创建完整的媒体传【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。输，甚至是任意数据的传输通道。

未经授权，禁止复制转载。【作者：唐霜】【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。

MediaStream (getUser原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。Media)

【本文首发于唐霜的博客】

RTCPeerConnection

【访问 www.tangshuang.net 获取更多精彩内容】

【关注微信公众号：wwwtangshuangnet】

【本文受版权保护】

RTCDataChannel

未经授权，禁止复制转载。

MediaStream(getUserMedia)

MediaStream是获取用户媒体输入【原创内容，转载请注明出处】【原创内容，转载请注明出处】信息的接口，比如设备的摄像头输入、麦克风著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。输入等，将来可能还支持其他类型的设备输入【作者：唐霜】【未经授权禁止转载】，不过目前而言，主要就是这两个。在获取到本文作者：唐霜，转载请注明出处。【本文受版权保护】这些输入之后，它以“流”（stream）【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】的形式返回给程序代码使用，而“流”又由“本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】轨”组成，比如音轨和视轨。获得这些流之后【转载请注明来源】【原创内容，转载请注明出处】，直接把它塞到html里面的一个vide【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】o或audio标签上，就可以看到或听到输【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。入的内容了。传送给peer连接的另外一端本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。时，也是要把流传过去，不过现在已经改成了【作者：唐霜】【版权所有】唐霜 www.tangshuang.net传轨。

著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。【作者：唐霜】

我们用代码来实现：

转载请注明出处：www.tangshuang.net【未经授权禁止转载】

navigator.mediaDevices.getUserMedia({
  audio: true,
  video: true,
}).then((stream) => {
  let video = document.querySelector('#video')
  video.srcObject = stream
  video.onloadedmetadata = () => video.play()
})

【作者：唐霜】【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】

RTCPeerConnection

这个接口主要用于创建一个peer实例，得【转载请注明来源】【版权所有】唐霜 www.tangshuang.net到这个实例之后，利用这个实例的各种方法，【版权所有，侵权必究】【未经授权禁止转载】创建出真实的peer to peer连接【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net。这个过程里面需要了解STUN、TURN【本文受版权保护】【本文受版权保护】协议，ICE框架，Signaling服务【原创不易，请尊重版权】原创内容，盗版必究。，SDP等知识，这我会在下文讲。

未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】未经授权，禁止复制转载。

创建peer实例

let peer = new RTCPeerConnection(servers)

听上去，p2p挺方便的，但是并不是一个简【未经授权禁止转载】【转载请注明来源】单的创建过程。要建立一个peer-to-【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.netpeer连接，可没想的那么容易，用一个n原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。ew就可以建立？不可能的。要建立一个真正本文版权归作者所有，未经授权不得转载。【转载请注明来源】的peer connection，需要用转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net实例化出来的peer的方法进行一系列的操著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net作。

交换身份

peer.addIceCandidate(candidate)

【未经授权禁止转载】转载请注明出处：www.tangshuang.net【本文受版权保护】

但是，实际上的网络环境往往会是，clie【版权所有，侵权必究】【作者：唐霜】nt会隐藏在NAT网络背后。因此，要有一【版权所有，侵权必究】【原创内容，转载请注明出处】种方法，从这种复杂的网络环境下，得到对方【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】peer的识别信息。怎么整呢？这个时候，本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。就要用到STUN协议，这个协议的作用，就【本文受版权保护】本文作者：唐霜，转载请注明出处。是要从NAT网络中，找出另一端在网络中可本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】以被正常访问到的网络路径。

本文作者：唐霜，转载请注明出处。原创内容，盗版必究。

可是，在一些极端情况下，STUN也无法搞原创内容，盗版必究。未经授权，禁止复制转载。定，某些网络设备屏蔽了STUN的识别能力【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net。在这种情况下，只能采用另外一种办法来解本文作者：唐霜，转载请注明出处。【未经授权禁止转载】决两个peer之间的数据传输了，就是采用本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。TURN协议，实现一个媒体中转服务。所谓【原创不易，请尊重版权】【版权所有，侵权必究】媒体中转，其实就是先把视频发送到服务器上原创内容，盗版必究。原创内容，盗版必究。面，再由另外一个peer把它下载下来。

【作者：唐霜】【未经授权禁止转载】

上面这套方案被webrtc内置了，它采用【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。ICE框架来实现这套方案，作为开发者，要【本文受版权保护】本文版权归作者所有，未经授权不得转载。做的是，告诉程序，你的STUN服务器信息【本文受版权保护】原创内容，盗版必究。和TURN服务器地址和认证信息。也就是说【未经授权禁止转载】【本文受版权保护】，作为产品级架构，需要自己搭建STUN和本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】TURN服务器。

怎么把这些服务器信息传给webrtc呢？【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net就是在new RTCPeerConnec【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】tion的时候，作为参数传进去。

let peer = new RTCPeerConnection({
  iceServers: [
    {
      urls: 'stun:stun.l.google.com:19302',
    },
    {
      url: 'turn:my_username@<turn_server_ip_address>',
      credential: 'my_password',
    },
  ],
})

这样就可以让程序使用你自己的stun &转载请注明出处：www.tangshuang.net【转载请注明来源】amp; turn服务器了。

本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。

但是，怎么最终把candidate身份信【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。息传给对方呢？单凭webrtc是无法做到未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】的，我们需要借助一个服务器来实现，这个就【本文首发于唐霜的博客】【未经授权禁止转载】是signaling服务器。这个sign著作权归作者所有，禁止商业用途转载。【本文受版权保护】aling服务器的作用，就是在利用pee本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。r的传输能力之前，建立连接阶段，传输各自未经授权，禁止复制转载。原创内容，盗版必究。的身份信息、描述信息（下面会讲）的。

不是说peer to peer是点对点通【版权所有】唐霜 www.tangshuang.net【作者：唐霜】讯吗？怎么还要一个服务器呢？这也是没办法【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。的，webrtc实现的时候，完全放开了上【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】述信息交换的协议，因此开发者需要自己实现著作权归作者所有，禁止商业用途转载。【转载请注明来源】这块。一般我们会使用一个websocke【原创不易，请尊重版权】【转载请注明来源】t来实现这个signaling服务，当一转载请注明出处：www.tangshuang.net【版权所有，侵权必究】个peer需要发送一个signaling转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。的时候，发送一个socket消息到服务器【版权所有，侵权必究】未经授权，禁止复制转载。，再由服务器发送一个socket消息给另本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。外一个peer，这样，它们就可以交换信息【本文首发于唐霜的博客】【版权所有，侵权必究】。

peer.onicecandidate = function(e) {
  socket.emit('icecandidate', e.candidate) // socket是假设的一个websocket实例
}

socket.on('icecandidate', function(e) {
  let data = e.message
  peer.addIceCandidate(data)
})

本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。本文作者：唐霜，转载请注明出处。【未经授权禁止转载】

交换描述信息

什么是描述信息呢？大概就是一个设备的信息未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。，当一个peer打算把自己的设备stre未经授权，禁止复制转载。【原创不易，请尊重版权】am发送给另外一个peer使用的时候，需【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】要将设备信息告诉给对方，比如视频的编码之本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。类的。怎么交换呢？peer需要通过一个o【版权所有，侵权必究】【本文首发于唐霜的博客】ffer和answer操作来实现。

未经授权，禁止复制转载。【原创内容，转载请注明出处】

let desc = await peer.createOffer()
await peer.setLocalDescription(desc)
socket.emit('offer', desc)

socket.on('offer', async function(e) {
  let data = e.message
  await peer.setRemoteDescription(data)
  
  let desc = await peer.createAnswer()
  peer.setLocalDescription(desc)
  socket.emit('answer', desc)
})

socket.on('answer', async function(e) {
  let data = e.message
  await peer.setRemoteDescription(data)
})

上面这段代码，实际上会在不同的情况下运行转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】不同的部分。当它作为首先发出消息的一方时【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】，它要发送一个offer给远端的peer未经授权，禁止复制转载。未经授权，禁止复制转载。。而发送的内容，就是通过createOf本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】fer创建的description。这个【原创内容，转载请注明出处】【本文首发于唐霜的博客】description叫做Session本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】 Description Protoco【未经授权禁止转载】原创内容，盗版必究。l，即很多文档里面说的SDP。当远端pe著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】er发送了SDP之后，远端的peer通过本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。websocket接收到之后，用setR原创内容，盗版必究。未经授权，禁止复制转载。emoteDescription把信息塞【作者：唐霜】【未经授权禁止转载】到本地。

著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。

WebRTC建立连接过程示意图

【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。

上图里面还反映了一个问题，那就是onic著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】ecandidate被触发的时间。我原本【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】以为，这个事件会在new完成之后，但事实【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net上，它会在createOffer或者cr本文作者：唐霜，转载请注明出处。【本文受版权保护】eateAnswer的时候发生。

原创内容，盗版必究。【原创不易，请尊重版权】【转载请注明来源】

著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。

发送媒体流

通过前面的getUserMedia接口，【原创不易，请尊重版权】【作者：唐霜】我们已经可以拿到当前用户的摄像头、麦克风转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】输入了。怎么把这些输入发送给远端的pee原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】r呢？这个时候就不需要借助signali本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】ng服务器了，当上面的连接创建之后，只需【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】要调用peer的对应方法，就可以做到了，【版权所有，侵权必究】【未经授权禁止转载】这里才是真正的点对点数据传输了。

转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。

function sendStream(stream) {
  let tracks = stream.getTracks()
  tracks.forEach((track) => {
    peer.addTrack(track, stream)
  })
}

peer.ontrack = function(e) {
  let stream = e.streams[0]
  // 把stream塞到video上
}

这样就可以做到将自己的视频流信息发送给远著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。端的peer，并触发远端peer的ont【原创不易，请尊重版权】转载请注明出处：www.tangshuang.netrack。当然，反过来也是一样，对方也可原创内容，盗版必究。【转载请注明来源】以把自己的stream发送给自己，自己执【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。行ontrack里面的操作。

著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】

RTCDataChannel

在使用RTCPeerConnection未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。创建了peer实例，并且创建了连接之后，未经授权，禁止复制转载。【本文首发于唐霜的博客】就可以使用RTCDataChannel接原创内容，盗版必究。【原创内容，转载请注明出处】口创建出一个数据传输通道，用来传输任意数本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】据的信息。虽说官方给出的解释是“任意数据著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net”，但是在实际编码中，传输的是字符串……

原创内容，盗版必究。【原创内容，转载请注明出处】

它的使用就简单的多了：

【原创内容，转载请注明出处】【原创内容，转载请注明出处】【本文首发于唐霜的博客】

let channel = peer.createDateChannel('a channel')

通过peer的createDataCha【原创内容，转载请注明出处】【原创不易，请尊重版权】nnel方法创建一个channel，然后【未经授权禁止转载】【本文首发于唐霜的博客】它拥有：

【本文受版权保护】本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。

channel.onopen = function() {}
channel.onmessage = function(e) {
  let data = e.data
}
channel.onerror = function() {}
channel.onclose = function() {}

channel.send(data)
channel.close()

这些方法，一看就知道是干嘛用的，就不赘述【原创内容，转载请注明出处】【转载请注明来源】了。

【原创内容，转载请注明出处】【本文受版权保护】

其实，使用RTCDataChannel接【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。口的大多数场景，都是为了实现文件传输，特本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net别是一些大文件传输。当两台处于同一个网络转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。里面的电脑使用webrtc进行文件传输的著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】时候，由于不用经过服务器，所以可以实现更【原创不易，请尊重版权】原创内容，盗版必究。高效的文件传输。但是，由于datacha原创内容，盗版必究。转载请注明出处：www.tangshuang.netnnel其实并不能直接发送二进制流，而是未经授权，禁止复制转载。未经授权，禁止复制转载。只能发送文本（Firefox除外），所以【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】没办法，我们还必须利用html5的特性把【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】文件转换为可转码文本，再进行分片，通过启【关注微信公众号：wwwtangshuangnet】【作者：唐霜】用多个peer（下文会解释）把文件发送给【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net另外一个客户端，再由另外一个客户端组装文【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。件。

本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。

不过在firefox里面，就方便的多，注意，下面的代码仅适用于Firefox：

document.querySelector('input[type=file]').onchange = function () {
    var file = this.files[0];
    dataChannel.send(file);
};

dataChannel.onmessage = function (event) {
    var blob = event.data; // Firefox allows us send blobs directly

    var reader = new window.FileReader();
    reader.readAsDataURL(blob);
    reader.onload = function (event) {
        var fileDataURL = event.target.result; // it is Data URL...can be saved to disk
        SaveToDisk(fileDataURL, 'fake fileName');
    };
};

上面的代码出自这里。

原创内容，盗版必究。【作者：唐霜】

原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。原创内容，盗版必究。

基于WebRTC的P2P网络

上一部分我们已经了解到了，如何用代码去实【版权所有】唐霜 www.tangshuang.net【作者：唐霜】现创建一个peer to peer的通讯转载请注明出处：www.tangshuang.net【未经授权禁止转载】。现在的问题是，我们如何利用webrtc【本文首发于唐霜的博客】【版权所有，侵权必究】技术，实现一套应用解决方案，真正把这套技转载请注明出处：www.tangshuang.net【转载请注明来源】术用到自己的产品里面。要了解这套知识，我著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】把它分为四个层面：

【本文受版权保护】著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】

Level 1: Peer Instan本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】ce

本文版权归作者所有，未经授权不得转载。

【原创不易，请尊重版权】

Level 2: Client (nod本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。e)

未经授权，禁止复制转载。

【作者：唐霜】

Level 3: Network

【原创不易，请尊重版权】

本文版权归作者所有，未经授权不得转载。

Level 4: Complete Se【转载请注明来源】本文作者：唐霜，转载请注明出处。rvice

未经授权，禁止复制转载。

第一层：peer实例层面

这其实就是前面关于webrtc api的转载请注明出处：www.tangshuang.net原创内容，盗版必究。一整套知识。如何利用api接口，创建实例【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】，并且使得两个实例能够创建连接，实现视频【原创内容，转载请注明出处】未经授权，禁止复制转载。、音频甚至是任意类型数据的交换。

【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】【本文受版权保护】

但是有一个点不知道你有没有发现？

【原创不易，请尊重版权】【原创内容，转载请注明出处】

webrtc顶多在两个peer之间建立连【转载请注明来源】【原创不易，请尊重版权】接，不能有第三个peer插足进来。我们看著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netpeer的方法就会发现，setLocal著作权归作者所有，禁止商业用途转载。【本文受版权保护】Description, setRemo【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netteDescription等方法，都仅是未经授权，禁止复制转载。未经授权，禁止复制转载。为了把peer分为local和remot【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】e两个角色。这也就是说，peer to 未经授权，禁止复制转载。【本文受版权保护】peer是指两个peer实例之间的故事，著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】而不是我们平时里说的点对点（node t【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。o node），也可能是因为我们平日里对【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。“点对点”这个概念有所误解。
【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net【转载请注明来源】

webrtc peer to peer

【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】【转载请注明来源】

既然一个连接仅能在两个peer之间通信，本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】那怎么可能让很多用户使用这项技术来实现点【原创内容，转载请注明出处】【本文受版权保护】对点传输呢？

第二层：client层面

我们平时说的“点对点”其实是指“节点对节著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net点”，一个节点（node）是一个客户端的著作权归作者所有，禁止商业用途转载。【本文受版权保护】架构设计，对于一个应用客户端而言，你需要原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】把它想象为一个容器。这个容器会与网络中的本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。其他节点进行p2p连接。但是前面已经说了著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】，一个peer to peer只会包含一【未经授权禁止转载】【作者：唐霜】对peer实例，那么怎么构建多人网络呢？【版权所有，侵权必究】【转载请注明来源】那就是要在容器中放置多个peer实例，每【作者：唐霜】本文版权归作者所有，未经授权不得转载。一个实例与另外一个节点容器中的某个pee【原创不易，请尊重版权】【原创不易，请尊重版权】r实例建立连接。

webrtc client

【本文首发于唐霜的博客】【未经授权禁止转载】

就像图里面显示的一样，一个客户端，想和其【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。他的客户端建立连接，就new一个新的pe【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.neter出来，用这个peer和对方建立连接。【本文受版权保护】本文作者：唐霜，转载请注明出处。一个client里面有多少个peer，取本文作者：唐霜，转载请注明出处。【转载请注明来源】决于它想和多少个客户端建立连接。

转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。

第三层：network层面

当一个一个的节点连接在一起，所有能够相互【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。通信的节点的集合，就是一个network【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net。而对于一个应用而言，可能会出现多个ne原创内容，盗版必究。本文作者：唐霜，转载请注明出处。twork。这理解起来非常简单，我们以聊【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】天室为例子，一个聊天室里面的所有人，都是【版权所有，侵权必究】【作者：唐霜】一个节点，而整个聊天室就是一个网络。但是原创内容，盗版必究。【版权所有，侵权必究】，假如我们有两个聊天室，那就会有两个网络原创内容，盗版必究。未经授权，禁止复制转载。。但是很显然，这两个聊天室可能存在相同的【原创不易，请尊重版权】【原创不易，请尊重版权】一个用户（客户端），而他之所以能在两个不【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。同的聊天室聊天，是因为他的客户端起来了n【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。个peer实例，每个实例跟不同的远端pe【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】er连接。

著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】

webrtc network

【未经授权禁止转载】【转载请注明来源】【本文受版权保护】

转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。

【本文受版权保护】转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net

同一个client属于不同的networ未经授权，禁止复制转载。【转载请注明来源】k

第四层：service层面

如何保证应用给用户提供完整的可靠的点对点【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。服务呢？比如迅雷下载、微信聊天等等。在上著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】面3层我们已经做好了对peer的管理，也【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。就是在client中创建多个peer，每【版权所有，侵权必究】【本文首发于唐霜的博客】一个peer完成自己的使命。但是，如何管著作权归作者所有，禁止商业用途转载。【作者：唐霜】理好用户在不同network之间的连接和【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】内容传输，需要客户端、服务器通过严格的逻【本文首发于唐霜的博客】未经授权，禁止复制转载。辑进行分发。这里包括用户的认证、权限的分【原创不易，请尊重版权】【版权所有，侵权必究】配、组别划分等等。因此，说一个webrt【关注微信公众号：wwwtangshuangnet】【转载请注明来源】c应用无法离开服务端，也是没有错的。

【作者：唐霜】【转载请注明来源】未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。

webrtc service

本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net【作者：唐霜】【作者：唐霜】

本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】

本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】原创内容，盗版必究。【本文受版权保护】

然而，你有没有发现一个更严重的问题？如果未经授权，禁止复制转载。未经授权，禁止复制转载。P2P网络依赖于服务端，那么倘若服务端发【本文受版权保护】本文版权归作者所有，未经授权不得转载。生故障，也就会导致整个网络瘫痪。有没有一著作权归作者所有，禁止商业用途转载。【本文受版权保护】种可能使得提供服务的能力，也通过p2p网原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】络来实现呢？其实，我们有一种方案，就是将【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。stun、turn、signaling服本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。务内置于客户端内部，当用户打开客户端的时本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】候，也起一个本地的服务器。这样，只要当两【本文首发于唐霜的博客】未经授权，禁止复制转载。个客户端可以相互访问时，就可以不在依靠一转载请注明出处：www.tangshuang.net【版权所有，侵权必究】个中心化的服务器了。

去中心化的webrtc应用架构示意图

【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】

未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】

不过这里面有一点需要注意，就是两个客户端【转载请注明来源】转载请注明出处：www.tangshuang.net可以相互访问对方起的服务器。做到这一点其著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net实不难，对于同一局域网下面客户端，一般都【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】是可以相互访问的，但是，即使处于局域网下【关注微信公众号：wwwtangshuangnet】【作者：唐霜】面的客户端不能被访问，整个网络中，只要节原创内容，盗版必究。【本文首发于唐霜的博客】点数量足够多，也一定存在于公网，能够被任本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。何客户端访问的节点，这样它就可以作为一个【转载请注明来源】【原创内容，转载请注明出处】对其他可以访问他的节点的signalin转载请注明出处：www.tangshuang.net原创内容，盗版必究。g服务器了。当然，如果要作为turn服务【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net器，感觉还是不是很好，一方面是安全性受到【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】质疑，另一方面是消耗的资源比较多，如果几未经授权，禁止复制转载。【版权所有，侵权必究】千个节点同时连到它，那它估计马上就挂了。

未经授权，禁止复制转载。原创内容，盗版必究。

但是无论如何，这都给了我们想象的空间。这【作者：唐霜】【原创不易，请尊重版权】种架构下面，利用webrtc做一款区块链转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。应用也是非常容易的。怎么做到呢？我们可以本文作者：唐霜，转载请注明出处。【未经授权禁止转载】使用electron来做，它既提供了we未经授权，禁止复制转载。【原创内容，转载请注明出处】b的能力，又提供了node的能力，因此是【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】非常好的选择。

小结

至此，有关如何利用webrtc这项技术来【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】开发一个应用的知识就介绍完了。这篇文章仅【作者：唐霜】【原创不易，请尊重版权】仅介绍了技术层面，如何把基于webrtc本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net的通信搭起来，但是有关webrtc的东西【未经授权禁止转载】【作者：唐霜】其实还有挺多可以探讨，例如：

本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】

如何实现视频通话

【访问 www.tangshuang.net 获取更多精彩内容】

转载请注明出处：www.tangshuang.net

如何创建多人视频会议

【本文受版权保护】

转载请注明出处：www.tangshuang.net

如何实现文件传输与分享

【原创不易，请尊重版权】

如何实现一个区块链

【转载请注明来源】

著作权归作者所有，禁止商业用途转载。

用户认证的细节是什么

转载请注明出处：www.tangshuang.net

原创内容，盗版必究。

如何保证安全问题

【未经授权禁止转载】

【转载请注明来源】

【本文受版权保护】

本文作者：唐霜，转载请注明出处。

性能如何，最大支持创建多少个peer 实本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】例

原创内容，盗版必究。

【作者：唐霜】

【访问 www.tangshuang.net 获取更多精彩内容】

原创内容，盗版必究。

网络差的情况下，如何保证连接

转载请注明出处：www.tangshuang.net

【关注微信公众号：wwwtangshuangnet】

【转载请注明来源】本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net

【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】【原创不易，请尊重版权】【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】【转载请注明来源】【作者：唐霜】【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。

2018-07-02 6119 WebRTC

唐霜

WebRTC点对点应用架构研究

什么是WebRTC？

历史和现状

WebRTC的API

MediaStream(getUserMedia)

RTCPeerConnection

创建peer实例

交换身份

交换描述信息

发送媒体流

RTCDataChannel

基于WebRTC的P2P网络

第一层：peer实例层面

第二层：client层面

第三层：network层面

第四层：service层面

小结

为价值买单，打赏一杯咖啡

声明

关于

生态