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

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

什么是WebRTC？【版权所有】唐霜 www.tangshuang.net

到底什么是WebRTC？其实这个问题并没【关注微信公众号：wwwtangshuangnet】【转载请注明来源】有三两句那么清除，要解释很多词。我总结起本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】来，只能用一些侧面的，但是容易理解的内容著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】进行解释：

全称为Web Real-Time Com【本文首发于唐霜的博客】原创内容，盗版必究。munications，即web实时通讯

【关注微信公众号：wwwtangshuangnet】

Peer-to-peer，点对点【原创内容，转载请注明出处】

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

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

【关注微信公众号：wwwtangshuangnet】

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

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

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

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

【作者：唐霜】

【转载请注明来源】

without requiring an未经授权，禁止复制转载。【未经授权禁止转载】 intermediary 不需要中间就【关注微信公众号：wwwtangshuangnet】【本文受版权保护】可以传输（忽悠吧）

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

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

原创内容，盗版必究。

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

without requiring th【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。at the user install 【本文首发于唐霜的博客】【版权所有，侵权必究】plug-ins or any othe【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。r third-party softwa著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】re 不需要插件或第三方软件

原创内容，盗版必究。

【未经授权禁止转载】

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

原创内容，盗版必究。

【关注微信公众号：wwwtangshuangnet】

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

历史和现状未经授权，禁止复制转载。

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

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

GIPS早就被很多公司购买使用，例如QQ原创内容，盗版必究。本文作者：唐霜，转载请注明出处。（如图）

原创内容，盗版必究。【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。

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

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

【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】

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

【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】

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

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

webrtc给了我们三个主要的api接口【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。，我们可以利用这三个接口创建完整的媒体传【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】输，甚至是任意数据的传输通道。

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

MediaStream (getUser【本文受版权保护】【作者：唐霜】Media)

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

【未经授权禁止转载】

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

RTCPeerConnection原创内容，盗版必究。

【未经授权禁止转载】

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

RTCDataChannel原创内容，盗版必究。

【未经授权禁止转载】

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

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

MediaStream(getUserM【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】edia)

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

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

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

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

创建peer实例【访问 www.tangshuang.net 获取更多精彩内容】

转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】【本文首发于唐霜的博客】【本文受版权保护】

let peer = new RTCPeerConnection(servers)

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

交换身份【本文受版权保护】

【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】

peer.addIceCandidate(candidate)

原创内容，盗版必究。【本文受版权保护】本文版权归作者所有，未经授权不得转载。

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

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

未经授权，禁止复制转载。【作者：唐霜】【原创不易，请尊重版权】

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

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

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

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

这样就可以让程序使用你自己的stun &原创内容，盗版必究。未经授权，禁止复制转载。amp; turn服务器了。

【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】

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

不是说peer to peer是点对点通【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】讯吗？怎么还要一个服务器呢？这也是没办法【版权所有，侵权必究】转载请注明出处：www.tangshuang.net的，webrtc实现的时候，完全放开了上转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。述信息交换的协议，因此开发者需要自己实现原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net这块。一般我们会使用一个websocke本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】t来实现这个signaling服务，当一【本文受版权保护】【原创内容，转载请注明出处】个peer需要发送一个signaling【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】的时候，发送一个socket消息到服务器【未经授权禁止转载】本文作者：唐霜，转载请注明出处。，再由服务器发送一个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【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】e，在另外一个peer里面，通过soke【版权所有，侵权必究】【未经授权禁止转载】t的事件接收candidate，并且把c【版权所有，侵权必究】原创内容，盗版必究。andidate加入到自己本地。

交换描述信息【未经授权禁止转载】

什么是描述信息呢？大概就是一个设备的信息【本文受版权保护】未经授权，禁止复制转载。，当一个peer打算把自己的设备stre【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】am发送给另外一个peer使用的时候，需本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】要将设备信息告诉给对方，比如视频的编码之转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net类的。怎么交换呢？peer需要通过一个o本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。ffer和answer操作来实现。

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

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)
})

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

WebRTC建立连接过程示意图本文作者：唐霜，转载请注明出处。

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

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

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

发送媒体流【本文受版权保护】

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

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

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上
}

这样就可以做到将自己的视频流信息发送给远【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】端的peer，并触发远端peer的ont著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。rack。当然，反过来也是一样，对方也可本文作者：唐霜，转载请注明出处。【本文受版权保护】以把自己的stream发送给自己，自己执原创内容，盗版必究。本文作者：唐霜，转载请注明出处。行ontrack里面的操作。

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

RTCDataChannel【本文受版权保护】

【本文受版权保护】原创内容，盗版必究。【作者：唐霜】【本文受版权保护】【本文首发于唐霜的博客】

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

它的使用就简单的多了：【本文首发于唐霜的博客】

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

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

通过peer的createDataCha【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。nnel方法创建一个channel，然后【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】它拥有：

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

channel.send(data)
channel.close()

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

【关注微信公众号：wwwtangshuangnet】【本文受版权保护】【本文受版权保护】本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。

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

【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。【作者：唐霜】本文版权归作者所有，未经授权不得转载。

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

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网络【作者：唐霜】

本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】【原创内容，转载请注明出处】原创内容，盗版必究。

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

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

Level 1: Peer Instan转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。ce

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

【转载请注明来源】

原创内容，盗版必究。

Level 2: Client (nod著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】e)

【未经授权禁止转载】

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

Level 3: Network【版权所有，侵权必究】

【本文受版权保护】

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

【转载请注明来源】

Level 4: Complete Se原创内容，盗版必究。【本文首发于唐霜的博客】rvice

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

第一层：peer实例层面【作者：唐霜】

这其实就是前面关于webrtc api的【原创内容，转载请注明出处】【本文受版权保护】一整套知识。如何利用api接口，创建实例本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】，并且使得两个实例能够创建连接，实现视频本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net、音频甚至是任意类型数据的交换。

【作者：唐霜】【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。

但是有一个点不知道你有没有发现？本文版权归作者所有，未经授权不得转载。

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

webrtc peer to peer【本文受版权保护】

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

既然一个连接仅能在两个peer之间通信，【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。那怎么可能让很多用户使用这项技术来实现点【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】对点传输呢？

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

第二层：client层面【转载请注明来源】

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

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

webrtc client【作者：唐霜】

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

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

【作者：唐霜】【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】

第三层：network层面【未经授权禁止转载】

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

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

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

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

简单的说，一个client可能同时属于多【本文首发于唐霜的博客】原创内容，盗版必究。个network。

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

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

第四层：service层面原创内容，盗版必究。

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

webrtc service【关注微信公众号：wwwtangshuangnet】

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

通过更为复杂的网络架构，可以提高你不同地著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。域、不同网络间的性能或者实现特别的功能。原创内容，盗版必究。本文作者：唐霜，转载请注明出处。总之，在基于前面的技术基础上，你可以在任【本文受版权保护】原创内容，盗版必究。何一个环节进行变化，以适应实际的需求。

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

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

著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。【作者：唐霜】未经授权，禁止复制转载。

去中心化的webrtc应用架构示意图【本文首发于唐霜的博客】

【原创不易，请尊重版权】【本文受版权保护】原创内容，盗版必究。原创内容，盗版必究。

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

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

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

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

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

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

如何实现视频通话本文版权归作者所有，未经授权不得转载。

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

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

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

如何创建多人视频会议著作权归作者所有，禁止商业用途转载。

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

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

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

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

【作者：唐霜】

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

【转载请注明来源】

【未经授权禁止转载】

如何实现一个区块链未经授权，禁止复制转载。

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

【作者：唐霜】

用户认证的细节是什么原创内容，盗版必究。

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

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

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

另外，也有一些遗留问题有待深入探讨，例如【原创不易，请尊重版权】原创内容，盗版必究。：

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

如何保证安全问题著作权归作者所有，禁止商业用途转载。

【本文受版权保护】

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

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

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

性能如何，最大支持创建多少个peer 实著作权归作者所有，禁止商业用途转载。【本文受版权保护】例

【本文受版权保护】

原创内容，盗版必究。

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

网络差的情况下，如何保证连接未经授权，禁止复制转载。

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

【未经授权禁止转载】

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

这些问题都有待你深入了解，如果你对web【未经授权禁止转载】【转载请注明来源】rtc感兴趣，或者对本文的一些阐述有自己本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。的看法，可以在下方的留言框给我留言，一起【本文受版权保护】【未经授权禁止转载】探讨。

本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】

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

2018-07-02 5602 WebRTC

唐霜

WebRTC点对点应用架构研究

什么是WebRTC？【版权所有】唐霜 www.tangshuang.net

历史和现状未经授权，禁止复制转载。

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

MediaStream(getUserM【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】edia)

RTCPeerConnection【转载请注明来源】

创建peer实例【访问 www.tangshuang.net 获取更多精彩内容】

交换身份【本文受版权保护】

交换描述信息【未经授权禁止转载】

发送媒体流【本文受版权保护】

RTCDataChannel【本文受版权保护】

基于WebRTC的P2P网络【作者：唐霜】

第一层：peer实例层面【作者：唐霜】

第二层：client层面【转载请注明来源】

第三层：network层面【未经授权禁止转载】

第四层：service层面原创内容，盗版必究。

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

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

声明

关于

生态