搭建WebRtc环境

╰+攻爆jí腚メ 2022-06-16 08:25 232阅读 0赞

#     #

**0.前言**

这次的需求，准备做的是一个类似与QQ视频一样的点对点视频聊天。这几天了解了一些知识后，决定使用HTML5新支持的WebRtc来作为视频通讯。客户端使用支持HTML5浏览器即可。服务器段需要提供两个主要的服务功能，一个是信令服务器(Signaling Server)，一个是NAT穿透服务器(ICE Server)。简单的框架图如下:

![485067-20160523153500491-1948887887.png][]

**1.安装e2esoft vcam 虚拟摄像头**

由于我本地是台式电脑，没有摄像头，另一方面，为了调试的方便，安装这个虚拟摄像头。  
我是在这里下载的http://www.loveliao.com/downfiles/VCam\_v4.5.exe

**2.安装信令服务器**

网上信令服务器大多是以nodejs写的。这里以skyrtc为例，进行演示。

1 apt-get install nodejs npm
    2 git clone https://github.com/LingyuCoder/SkyRTC-demo
    3 cd SkyRTC-demo
    4 npm install
    5 nodejs server.js

这样浏览器访问本地http://localhost:3000就可以访问了。(主要chrome好像46以上版本，除了本地localhost和127.0.0.1本地调试外，其他的访问方式，必须要https。否则不能运行。PC端和移动端好像都是这样) Chrome报错如下:

![485067-20160523152520491-1639021344.png][]

这里准备用Firefox进行演示。移动端也是用Firefox进行演示。

![485067-20160523152942819-1535343616.png][]![485067-20160523152952631-926454130.png][]

手机端，用Firefox浏览器查看的效果。

![485067-20160523205725444-470338535.png][] ![485067-20160523205750866-736828522.png][]

**3.安装coturn(开源的iceserver)**

这个跟谷歌开源的rfc5766-turn-server 是类似的，这里我使用coturn

1 git clone https://github.com/coturn/coturn
    2 cd coturn
    3 ./configure
    4 make
    5 make install

安装后在coturn/examples/etc 目录下使用该命令执行

turnserver -o -a -f -v --mobility -m 10 --max-bps=100000 --min-port=32355 --max-port=65535 --user=ling:ling1234 --user=ling2:ling1234 -r demo

![485067-20160524092526756-275479141.png][]

这样就启动好了，默认的监听端口是3478

**4.修改WebRtc 客户端配置**

修改Skyrtc-demo/publi/SkyRTC-client.js

![485067-20160524093150725-1594663169.png][]

免费公开的stun+turn 服务器 :　[https://gist.github.com/yetithefoot/7592580][https_gist.github.com_yetithefoot_7592580]

**5.运行，查看效果**

root@debian-srv:~/workspace/SkyRTC-demo# nodejs server.js

浏览器打开两个页面

![485067-20160524093844756-24247967.png][]  ![485067-20160524093901350-1028468543.png][]

一个PC端 一个移动端

![485067-20160524094534694-477240252.png][]  ![485067-20160524094549569-789074055.png][]

亲测，移动4G可以跟我当前的网络穿透成功，但是移动3G不行。其他的网络网络运营商没有测试。单靠这些，做着玩玩还可以，距离产品还差十万八千里呢。当下的网络还是比较复杂的，IPv4告急，有些ISP分配的IP的还有可能是内网的，有些大机构的网络还是对称性NAT。而对于对称型NAT是基本不能穿透的。要经过转发， 而转发视频对带宽的消耗是很大的。真的是希望IPv6早点普及。

**参考资料:**

webrtc资料:

https://segmentfault.com/a/1190000000439103  
　　https://bitbucket.org/webrtc/codelab/overview  
　　https://github.com/LingyuCoder/SkyRTC-demo  
　　http://xiaol.me/2014/08/24/webrtc-stun-turn-signaling/  
　　http://www.mamicode.com/info-detail-513556.html  
　　https://simplewebrtc.com/  
　　https://gist.github.com/yetithefoot/7592580

ICEServer资料

https://github.com/coturn/coturn  
　　http://www.cnblogs.com/lingdhox/p/4209659.html

转载地址: [http://www.cnblogs.com/wunaozai/p/5520084.html][http_www.cnblogs.com_wunaozai_p_5520084.html]

[485067-20160523153500491-1948887887.png]: /images/20220616/6b705ed658704cbb9506150d31b9db73.png
[485067-20160523152520491-1639021344.png]: /images/20220616/4da8fe115d21468f840a3f2193c9d9af.png
[485067-20160523152942819-1535343616.png]: http://images2015.cnblogs.com/blog/485067/201605/485067-20160523152942819-1535343616.png
[485067-20160523152952631-926454130.png]: /images/20220616/0797b6ca039145849e0589b4a4a11c1b.png
[485067-20160523205725444-470338535.png]: http://images2015.cnblogs.com/blog/485067/201605/485067-20160523205725444-470338535.png
[485067-20160523205750866-736828522.png]: /images/20220616/b779b85be00547fe9108e08052f2153d.png
[485067-20160524092526756-275479141.png]: /images/20220616/87e2540d512042ddad9f7bec3e407b0d.png
[485067-20160524093150725-1594663169.png]: /images/20220616/4905f83ef0f144eea961415c047dcd8b.png
[https_gist.github.com_yetithefoot_7592580]: https://gist.github.com/yetithefoot/7592580
[485067-20160524093844756-24247967.png]: http://images2015.cnblogs.com/blog/485067/201605/485067-20160524093844756-24247967.png
[485067-20160524093901350-1028468543.png]: /images/20220616/16a4a37cea644a22b02976db544fb81a.png
[485067-20160524094534694-477240252.png]: http://images2015.cnblogs.com/blog/485067/201605/485067-20160524094534694-477240252.png
[485067-20160524094549569-789074055.png]: /images/20220616/ed538a86e56447e38f22f91cc2a17cfb.png
[http_www.cnblogs.com_wunaozai_p_5520084.html]: http://www.cnblogs.com/wunaozai/p/5520084.html