【WebRTC 01】基本概念及环境搭建

公司最近准备做一个跟直播比较类似的产品，需要获取用户的桌面和摄像头内容。做了一些功课，最后选择WebRTC这个Google维护的项目进行二次开发。刚好Google官方给了很好的培训材料，代码比较新，于是结合自身的实际操作，记录下这个学习过程。

我是T型人小付，一位坚持终身学习的互联网从业者。喜欢我的博客欢迎在csdn上关注我，如果有问题欢迎在底下的评论区交流，谢谢。

什么是WebRTC

WebRTC是Google的一个开源项目，其允许在Web和Native应用中传递音视频和数据。现在几乎绝大多数浏览器都内置了WebRTC，像桌面版和安卓端的Firefox、Opera和Chrome浏览器。同时也可以在ios或者Android中开发WebRTC应用。

当然，Web开发者是没必要去关注太多WebRTC的实现细节的，例如音视频的编码解码，丢包的处理等等。做为上层的开发，我们只需要根据其暴露出来的几个API进行使用即可。

WebRTC有如下4个Javascript的API供使用：（点击链接可以查看demo，不过要科学上网）

• getUserMedia() 从麦克风和摄像头获取音视频
• MediaRecorder 录制音视频
• RTCPeerConnection 用户之间利用p2p传递音视频流
• RTCDataChannel 用户之间利用p2p传递数据流，例如文字

什么是Signaling

如下图所示，在使用RTCPeerConnection进行数据传输之前，两个客户端必须要知道彼此的存在以及所在地址，这些客户端之间的协调工作都是由服务器来完成的，这一过程就叫做Signaling

WebRTC没有规定Signaling用何种协议去实现，图中用的是HTTP或者WebSocket，当然还有很多种，例如官方教程中使用的Socket.io，更多的可用方案参考这里。

值得一提的是，虽然p2p的连接方式高效，但是不稳定。很多商业方案都采用服务器转发的形式进行音视频传递

什么是STUN和TURN

这两者都是隧道技术，用于打通异地的局域网络。现在绝大多数设备都只有内网ip，通过NAT访问外网。外网想主动连接NAT下的内网设备是不可能的。这种情况下p2p的连接方式肯定就会出错，于是WebRTC的API使用STUN和TURN去连接两个NAT下的内网设备。更多细节可以参考WebRTC in the real world 。

WebRTC安全吗

Javascript的API只有在https或者是localhost下才会被允许使用，所以数据安全性是没问题的。但是Signaling不受WebRTC的控制，需要用户去多考虑其安全性了。

搭建环境

说了这么多理论知识，下面开始实际操作下。整个操作的目的就是搭建一个简易网站，实现多个网页之间音视频和照片的互相发送。这一节我们先搭好环境，从下一节开始，我们来一步步实现这个目的。

首先下载官方练习代码

直接git克隆到本地即可

git clone https://github.com/googlecodelabs/webrtc-web

在webrtc-web目录中，有一个work目录就是我们进行操作的项目目录，而step-xx目录是官方给我们的每一步的参考代码

然后需要在本地搭建一个网页服务器

最简单的方法莫过于Chrome自带的Web Server for Chrome，直接安装好就可以把本地的一个目录变为网站供局域网内设备访问

将上面的work目录添加进来即可

修改了设定记得停掉再重启服务器，然后用给出的几个ip任意一个去访问，应该能看到如下界面

现在这个网站还没有任何功能，只是一个骨架，从下一节开始我们就在这个基础上进行我们的操作。

参考

1. Google的官方WebRTC培训网站：https://codelabs.developers.google.com/codelabs/webrtc-web/#0