鹅厂原创 | React性能探索 --- 避免不必要渲染
鹅厂原创 | React性能探索 --- 避免不必要渲染
戳蓝字“IMWeb前端社区”关注我们哦！
文/blue
腾讯SNG事业群——前端开发 工程师
1写在前面
WebRTC是一个开源的项目，可以提供浏览器，手机应用之间实时通信能力。 同时，这一功能已经内置于现代浏览器中，所以它可以做到无须借助第三方软件或插件便可以在开发网络中传输高质量音视频流。
- 主要JavaScript API
- MediaStream 音视频流对象
- RTCPeerConnection 端对端音视频连接对象
- RTCDataChannel 端对端数据通道对象
- 适用设备
- Firefox，Opera，Chrome浏览器支持并默认启用了WebRTC功能，并且能够实现互相通信
- IE浏览器直到11版本还未支持WebRTC，但是Edge15版本已经开始支持WebRTC，最新浏览器支持可以查看Can I use
- 原生安卓和ios应用均已支持
（左右滑动查看代码）
2建立连接过程
2.1 概述
首先我们可以分析一下，建立连接需要哪些条件：
我们需要知道对方浏览器的网络地址才能连接到它，需要获取到对方的IP地址和端口号。
我们需要对对方支持的音频和视频编解码器等电脑软硬件信息有所了解 当我们互相拿到了对方的地址和电脑软硬件信息后，就可以通过RTCPeerConnection对象来建立连接了。
2.2 获取地址
在获取对方地址时，因为现实网络情况的复杂性，可能不能直接获取到对方的地址，这时就需要用到STUN，TURN和ICE组件来处理不同类型网络间的呼叫连接。现实网络环境有三种情况：
- 公共网络
这类网络IP之间可以不受限制地进行互相访问。
- NAT网络
这类网络主机在私有内网中，没有单独的公网IP，STUN协议就是解决此网络问题 首先发一个请求给STUN服务器，以开启STUN协议，之后服务器识别出发出请求的客户端IP地址，并将其返回给客户端，客户端就能通过返回的IP地址来识别自己。
- 严格受限的NAT网络
这类网络中的主机在内网内，只能单向访问外网，外网不能直接访问它，所以这类网络需要通过在公共网络上的服务器来进行数据中转，TURN协议就是解决此网络问题 TURN服务器可以在对等连接的双方之间增加一个转播，TURN服务器去下载、处理并重定向每一个用户发过来的数据包 最后，ICE则是一个将STUN和TURN结合在一起的标准，它会判断主机是上面三种类型之一，并用相应的方法来建立主机之间的连接。
2.3 获取电脑软硬件信息
我们需要获取到对方所支持的音频和视频编解码器，他们使用哪种网络以及他们电脑可以处理多少数据，我们就需要一个有用户所有信息的字符串名片来传送给其他用户，这里我们可以使用SDP（会话描述协议） SDP涵盖了一个指定用户的描述、时间配置和对媒体的限制，类似于你电脑的名片，其他用户可以通过它来试着联系到你。
3创建应用
这里可以创建一个WebRTC本地应用来熟悉一下以上建立连接的流程，主要的功能就是从用户摄像头获取图像，最终在页面上显示两个视频流，一个来自摄像头，另一个来自本地WebRTC连接。 这里我们使用的两个连接对象都在同一个浏览器中，直接浏览器中传输即可，在真实环境中，连接的用户和自己并不在同一个浏览器中，这就需要一个websocket服务器，用于在浏览器中连接双方。
1.由于浏览器API有相应的前缀，需要有两个兼容函数来首先处理一下：
function hasUserMedia() {
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia; return !!navigator.getUserMedia;
}function hasRTCPeerConnection() { window.RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection || window.msRTCPeerConnection; return !!window.RTCPeerConnection;
}2.可以通过配置自己的STUN服务器地址，或者不写配置使用浏览器默认的STUN服务器地址，来创建两个RTCPeerConnection对象来模拟连接：
var configuration={ //iceServers: [{ url: "stun:127.0.0.1:9876" }]
};
youConnection = new RTCPeerConnection(configuration);
otherConnection = new RTCPeerConnection(configuration);3.通信双方交换ICE候选路径，也就是通过ICE获取到自己的IP和端口号后，再互相交换此信息：
youConnection.onicecandidate = function (event) {
if (event.candidate) {
console.log(event.candidate);
otherConnection.addIceCandidate(new RTCIceCandidate(event.candidate));
}
};
otherConnection.onicecandidate = function (event) {
if (event.candidate) {
console.log(event.candidate);
youConnection.addIceCandidate(new RTCIceCandidate(event.candidate));
}
};4.通信双方通过交换offer和answer来互换SDP信息：
var offerOptions={
offerToRecceiveAudio: 1,
offerToReceiveVideo: 1};
youConnection.createOffer(offerOptions)
.then(function(offer){
console.log(offer);
youConnection.setLocalDescription(offer);
otherConnection.setRemoteDescription(offer);
otherConnection.createAnswer(offerOptions)
.then(function(answer){
console.log(answer);
otherConnection.setLocalDescription(answer);
youConnection.setRemoteDescription(answer);
});
});5.这样通信双方的连接就建立起来了，可以向连接对象中添加媒体流，另一个连接对象就能读出媒体流，并实时显示在video标签中：
youConnection.onaddstream=function(event){
you.srcObject=event.stream;
};
otherConnection.addStream(stream);4参考资料
- 《Learning WebRTC》
- 《WebRTC权威指南》
- 《WebRTC零基础开发者教程》
腾讯云开发者
