webRTC初体验

    又好久不见了，感觉自己的懒癌越来越严重，下班回家就不想动，打打王者，阴阳师就过去了，导致都没怎么写东西，不过按照我写东西的质量，写不写好像也没差，哈哈哈哈~

    最近有个需求是需要web调用安卓端的摄像头，实现视频通话，查了下，webrtc的api是支持的，虽然兼容性不太好，不过后期可以直接用nw打包成应用，也就释然了~

    关于什么是webrtc我就不多介绍了，百度一下一大堆，反正就是实现端对端的特殊传输通道，这个通道可以传输各种，包括文件也可以。当然，网络上的教程也有很多写的不是很清楚，我当时也浏览了挺多的，由于我这边只做demo，所以我就简单介绍下视频通话的实现，先偷别人博客的一张流程图：

上述序列中，WebRTC并不提供Stun服务器和Signal服务器，服务器端需要自己实现。Stun服务器可以用google提供的实现stun协议的测试服务器（stun:stun.l.google.com:19302），Signal服务器则完全需要自己实现了，它需要在ClientA和ClientB之间传送彼此的SDP信息和candidate信息，ClientA和ClientB通过这些信息建立P2P连接来传送音视频数据。由于网络环境的复杂性，并不是所有的客户端之间都能够建立P2P连接，这种情况下就需要有个relay服务器做音视频数据的中转，本文本着源码剖析的态度，这种情况就不考虑了。这里说明一下， stun/turn、relay服务器的实现在WebRTC源码中都有示例，真是个名副其实的大宝库。

上述序列中，标注的场景是ClientA向ClientB发起对聊请求，调用描述如下：

• ClientA首先创建PeerConnection对象，然后打开本地音视频设备，将音视频数据封装成MediaStream添加到PeerConnection中。

• ClientA调用PeerConnection的CreateOffer方法创建一个用于offer的SDP对象，SDP对象中保存当前音视频的相关参数。ClientA通过PeerConnection的SetLocalDescription方法将该SDP对象保存起来，并通过Signal服务器发送给ClientB。

• ClientB接收到ClientA发送过的offer SDP对象，通过PeerConnection的SetRemoteDescription方法将其保存起来，并调用PeerConnection的CreateAnswer方法创建一个应答的SDP对象，通过PeerConnection的SetLocalDescription的方法保存该应答SDP对象并将它通过Signal服务器发送给ClientA。

• ClientA接收到ClientB发送过来的应答SDP对象，将其通过PeerConnection的SetRemoteDescription方法保存起来。

• 在SDP信息的offer/answer流程中，ClientA和ClientB已经根据SDP信息创建好相应的音频Channel和视频Channel并开启Candidate数据的收集，Candidate数据可以简单地理解成Client端的IP地址信息（本地IP地址、公网IP地址、Relay服务端分配的地址）。

• 当ClientA收集到Candidate信息后，PeerConnection会通过OnIceCandidate接口给ClientA发送通知，ClientA将收到的Candidate信息通过Signal服务器发送给ClientB，ClientB通过PeerConnection的AddIceCandidate方法保存起来。同样的操作ClientB对ClientA再来一次。

• 这样ClientA和ClientB就已经建立了音视频传输的P2P通道，ClientB接收到ClientA传送过来的音视频流，会通过PeerConnection的OnAddStream回调接口返回一个标识ClientA端音视频流的MediaStream对象，在ClientB端渲染出来即可。同样操作也适应ClientB到ClientA的音视频流的传输。

以上引用 出自博客 http://www.cnblogs.com/fangkm/p/4364553.html  我觉得还是很好的介绍了这个通话建立的过程以及需要注意的地方。

如果关于其他webrtc的介绍可以参考这篇文章  https://segmentfault.com/a/1190000000436544

原谅我懒，我一般都只提供自己写的demo：

demo 下载地址 https://github.com/mikoshu/webRTC-demo

demo 下载后，先 npm install 下载依赖，然后运行 node server ， 在谷歌浏览器（版本新一些，我的是55.xx）里先打开 localhost:3000/answer.html 之后再打开localhost:3000/index.html即可，此时你电脑如果有摄像头，就可以看到两个相同的画面，证明链接建立成功。

注意：由于谷歌浏览器限制 webrtc只能在 https下传输，所以本地调试只能使用localhost的url 不能使用 ip来局域网传输，除非你自己搭一个https协议哦

此 demo 若有疑问，可以加我qq一起探讨 ：452753617