webRTC初体验

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

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

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

250050215053233.png

上述序列中,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

 

1条评论在 “webRTC初体验”

发表评论

电子邮件地址不会被公开。 必填项已用*标注