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

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

【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。【本文受版权保护】【本文首发于唐霜的博客】

什么是WebRTC？

全称为Web Real-Time Com未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。munications，即web实时通讯

【转载请注明来源】

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

Peer-to-peer，点对点

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

【未经授权禁止转载】

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

【本文受版权保护】

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

without requiring an【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。 intermediary 不需要中间就【原创不易，请尊重版权】未经授权，禁止复制转载。可以传输（忽悠吧）

原创内容，盗版必究。

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

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

【关注微信公众号：wwwtangshuangnet】

without requiring th【转载请注明来源】【转载请注明来源】at the user install 转载请注明出处：www.tangshuang.net【版权所有，侵权必究】plug-ins or any othe著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】r third-party softwa转载请注明出处：www.tangshuang.net原创内容，盗版必究。re 不需要插件或第三方软件

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

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

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

历史和现状

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

著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net【作者：唐霜】

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

【本文受版权保护】原创内容，盗版必究。

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

【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】

WebRTC的API

webrtc给了我们三个主要的api接口【转载请注明来源】【转载请注明来源】，我们可以利用这三个接口创建完整的媒体传【未经授权禁止转载】原创内容，盗版必究。输，甚至是任意数据的传输通道。

MediaStream (getUser【作者：唐霜】【关注微信公众号：wwwtangshuangnet】Media)

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

原创内容，盗版必究。

RTCPeerConnection

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

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

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

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

RTCDataChannel

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

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

原创内容，盗版必究。

MediaStream(getUserMedia)

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

【本文受版权保护】【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】

我们用代码来实现：

本文作者：唐霜，转载请注明出处。【本文受版权保护】【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】

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

在html里面放一个video#vide著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。o，就可以把摄像头和麦克风的stream本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。塞给它，看到自己的影像了。

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

RTCPeerConnection

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

创建peer实例

let peer = new RTCPeerConnection(servers)

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

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

交换身份

peer.addIceCandidate(candidate)

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

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

【本文首发于唐霜的博客】【未经授权禁止转载】原创内容，盗版必究。【原创内容，转载请注明出处】

上面这套方案被webrtc内置了，它采用【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】ICE框架来实现这套方案，作为开发者，要著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。做的是，告诉程序，你的STUN服务器信息未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。和TURN服务器地址和认证信息。也就是说【未经授权禁止转载】【作者：唐霜】，作为产品级架构，需要自己搭建STUN和未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.netTURN服务器。

怎么把这些服务器信息传给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身份信【作者：唐霜】本文作者：唐霜，转载请注明出处。息传给对方呢？单凭webrtc是无法做到著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。的，我们需要借助一个服务器来实现，这个就【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net是signaling服务器。这个sign【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。aling服务器的作用，就是在利用pee【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。r的传输能力之前，建立连接阶段，传输各自【原创内容，转载请注明出处】【版权所有，侵权必究】的身份信息、描述信息（下面会讲）的。

转载请注明出处：www.tangshuang.net【作者：唐霜】著作权归作者所有，禁止商业用途转载。

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

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

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

在onicecandidate的回调函数原创内容，盗版必究。【原创不易，请尊重版权】里面使用socket发送candidat著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。e，在另外一个peer里面，通过soke本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.nett的事件接收candidate，并且把c未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。andidate加入到自己本地。

【本文受版权保护】本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】

交换描述信息

什么是描述信息呢？大概就是一个设备的信息未经授权，禁止复制转载。【未经授权禁止转载】，当一个peer打算把自己的设备stre【本文首发于唐霜的博客】未经授权，禁止复制转载。am发送给另外一个peer使用的时候，需原创内容，盗版必究。本文作者：唐霜，转载请注明出处。要将设备信息告诉给对方，比如视频的编码之未经授权，禁止复制转载。原创内容，盗版必究。类的。怎么交换呢？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 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。，它要发送一个offer给远端的peer本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】。而发送的内容，就是通过createOf著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。fer创建的description。这个本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】description叫做Session【原创内容，转载请注明出处】【作者：唐霜】 Description Protoco【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.netl，即很多文档里面说的SDP。当远端pe本文作者：唐霜，转载请注明出处。【转载请注明来源】er发送了SDP之后，远端的peer通过【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。websocket接收到之后，用setR【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】emoteDescription把信息塞著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】到本地。

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

WebRTC建立连接过程示意图

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

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

总之，完成上面的offer和answer【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】之后，两个peer就建立了连接，之后才能著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。传输stream或者其他数据。

本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】

发送媒体流

通过前面的getUserMedia接口，【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】我们已经可以拿到当前用户的摄像头、麦克风【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。输入了。怎么把这些输入发送给远端的pee【作者：唐霜】【本文首发于唐霜的博客】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.net 获取更多精彩内容】rack。当然，反过来也是一样，对方也可未经授权，禁止复制转载。【原创内容，转载请注明出处】以把自己的stream发送给自己，自己执【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net行ontrack里面的操作。

【原创内容，转载请注明出处】原创内容，盗版必究。【作者：唐霜】【转载请注明来源】

RTCDataChannel

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

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

它的使用就简单的多了：

【本文受版权保护】【未经授权禁止转载】

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

通过peer的createDataCha转载请注明出处：www.tangshuang.net原创内容，盗版必究。nnel方法创建一个channel，然后本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。它拥有：

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

channel.send(data)
channel.close()

这些方法，一看就知道是干嘛用的，就不赘述本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。了。

转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】

其实，使用RTCDataChannel接【版权所有，侵权必究】【作者：唐霜】口的大多数场景，都是为了实现文件传输，特【本文受版权保护】【本文受版权保护】别是一些大文件传输。当两台处于同一个网络【原创内容，转载请注明出处】【原创内容，转载请注明出处】里面的电脑使用webrtc进行文件传输的本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。时候，由于不用经过服务器，所以可以实现更【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】高效的文件传输。但是，由于datacha【转载请注明来源】【原创不易，请尊重版权】nnel其实并不能直接发送二进制流，而是本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net只能发送文本（Firefox除外），所以【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。没办法，我们还必须利用html5的特性把【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。文件转换为可转码文本，再进行分片，通过启转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。用多个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');
    };
};

上面的代码出自这里。

基于WebRTC的P2P网络

上一部分我们已经了解到了，如何用代码去实【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。现创建一个peer to peer的通讯【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。。现在的问题是，我们如何利用webrtc【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。技术，实现一套应用解决方案，真正把这套技【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。术用到自己的产品里面。要了解这套知识，我【本文首发于唐霜的博客】【转载请注明来源】把它分为四个层面：

【转载请注明来源】未经授权，禁止复制转载。【转载请注明来源】

Level 1: Peer Instan【版权所有】唐霜 www.tangshuang.net【作者：唐霜】ce

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

原创内容，盗版必究。

【本文受版权保护】

Level 2: Client (nod本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】e)

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

原创内容，盗版必究。

Level 3: Network

原创内容，盗版必究。

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

Level 4: Complete Se转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。rvice

【关注微信公众号：wwwtangshuangnet】

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

【转载请注明来源】

第一层：peer实例层面

【转载请注明来源】【作者：唐霜】

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

本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。

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

webrtc peer to peer

本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】

既然一个连接仅能在两个peer之间通信，转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】那怎么可能让很多用户使用这项技术来实现点转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。对点传输呢？

转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】【转载请注明来源】

第二层：client层面

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

【本文受版权保护】【关注微信公众号：wwwtangshuangnet】

webrtc client

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

转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】【作者：唐霜】

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

【未经授权禁止转载】【未经授权禁止转载】

第三层：network层面

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

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

webrtc network

原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。

简单的说，一个client可能同时属于多【本文受版权保护】本文作者：唐霜，转载请注明出处。个network。

转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】

第四层：service层面

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

著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】【本文首发于唐霜的博客】【原创内容，转载请注明出处】

webrtc service

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

通过更为复杂的网络架构，可以提高你不同地【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】域、不同网络间的性能或者实现特别的功能。【未经授权禁止转载】【本文首发于唐霜的博客】总之，在基于前面的技术基础上，你可以在任【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】何一个环节进行变化，以适应实际的需求。

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

【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】

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

【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】

本文版权归作者所有，未经授权不得转载。【作者：唐霜】

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

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

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

小结

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

如何实现视频通话

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

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

【作者：唐霜】

如何创建多人视频会议

原创内容，盗版必究。

【未经授权禁止转载】

【关注微信公众号：wwwtangshuangnet】

如何实现文件传输与分享

【关注微信公众号：wwwtangshuangnet】

原创内容，盗版必究。

如何实现一个区块链

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

原创内容，盗版必究。

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

用户认证的细节是什么

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

【作者：唐霜】

【未经授权禁止转载】

另外，也有一些遗留问题有待深入探讨，例如【原创内容，转载请注明出处】【原创内容，转载请注明出处】：

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

如何保证安全问题

【关注微信公众号：wwwtangshuangnet】

性能如何，最大支持创建多少个peer 实【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。例

【关注微信公众号：wwwtangshuangnet】

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

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

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

【作者：唐霜】

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

2018-07-02 5957 WebRTC

唐霜

WebRTC点对点应用架构研究

什么是WebRTC？

历史和现状

WebRTC的API

MediaStream(getUserMedia)

RTCPeerConnection

创建peer实例

交换身份

交换描述信息

发送媒体流

RTCDataChannel

基于WebRTC的P2P网络

第一层：peer实例层面

第二层：client层面

第三层：network层面

第四层：service层面

小结

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

声明

关于

生态