WebRTC介绍
WebRTC 是由一家名为 Gobal IP Solutions，简称 GIPS 的瑞典公司开发,是为浏览器之间提供实时数据传输(Web Real-Time Communication)的javascript API。提供了视频会议的核心技术，包括音视频的采集、编解码、网络传输、显示等功能，并且还支持跨平台：windows，linux，Mac，android。
WebRTC 可以在 Web 应用程序中实现音频，视频和数据的实时通信的开源项目。在实时通信中，音视频的采集和处理是一个很复杂的过程。比如音视频流的编解码、降噪和回声消除等，但是在 WebRTC 中，这一切都交由浏览器的底层封装来完成。我们可以直接拿到优化后的媒体流，然后将其输出到本地屏幕和扬声器，或者转发给其对等端。
WebRTC兼容性
WebRTC在浏览器中支持PC和移动端，具体兼容性见下图。
如何测试电脑上的浏览器兼容性呢？这里有篇文章教程写的非常详细--关于WebRTC 浏览器兼容性测试那些事,具体用的工具是Troubleshooting，由声网工程师开发团队开发的。Troubleshooting测试工具地址。
WebRTC主要API
实现一个浏览器到浏览器的点对点（P2P）连接，从而进行音视频实时通信。当然，WebRTC 提供了一些 API 供我们使用，在实时音视频通信的过程中，我们主要用到以下三个：
getUserMedia : 获取音频和视频流（MediaStream）
RTCPeerConnection: 浏览器之间音视频流点对点连接通信对象
RTCDataChannel: 浏览器数据流连接对象
浏览器解决很多的音频视频的处理，但是在浏览器请求音频和视频时，需要注意流的大小和质量。如果硬件高导致的捕获高清质量流，那么CPU和带宽也跟不上。
接下来根据上面的三个AP来看一下WebRTC 实时通信实现的流程。
getUserMedia
getUserMedia是用来获取设备的流媒体(MediaStream),可以接受一个约束对象 constraints 作为参数，用来指定需要获取到什么样的媒体流。获取本地的媒体流，并绑定到一个video标签上输出，当有连接者连接时发送这个媒体流给其他客户端。
//兼容浏览器的getUserMedia写法
let that = this
let getUserMedia = (navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
return new Promise((resolve, reject) => {
getUserMedia.call(navigator, {
"audio": true,
"video": true
}, (stream) => {
that.localStream = stream;
resolve();
}, function(error){
reject(error);
// console.log(error);
//处理媒体流创建失败错误
});
指定视频流的宽高、帧率以及理想值
// 获取指定宽高，这里需要注意：在改变视频流的宽高时，
// 如果宽高比和采集到的不一样，会直接截掉某部分
{ audio: false,
video: { width: 1280, height: 720 }
}
// 设定理想值、最大值、最小值
{
audio: true,
video: {
width: { min: 1024, ideal: 1280, max: 1920 },
height: { min: 776, ideal: 720, max: 1080 }
}
}
RTCPeerConnection
RTCPeerConnection 作为创建点对点连接的 API，是我们实现音视频实时通信的关键。在点对点通信的过程中，需要交换一系列信息，通常这一过程叫做 — 信令（signaling）。在信令阶段需要完成的任务：
1.为每个连接端创建一个 RTCPeerConnection，并添加本地媒体流。
2.获取并交换本地和远程描述：SDP 格式的本地媒体元数据。
3.获取并交换网络信息：潜在的连接端点称为 ICE 候选者。
在信令阶段，需要一个通信服务来帮助建立起这个连接。WebRTC 本身没有指定某一个信令服务，所以，在工作中采用websocket进行网络通信、数据传输。
首先要为每个连接端创建一个 RTCPeerConnection，注意这是端对端的，当有一个连接者时，就创建一个。
getPeerConnection(username){
let that = this;
let configuration = {
"iceServers": [{ "url": "stun:stun.l.google.com:19302",
"url": "stun:stun1.l.google.com:19302",
"url": "stun:stun2.l.google.com:19302",
"url": "stun:stun3.l.google.com:19302",
"url": "stun:stun4.l.google.com:19302" }] //公共服务
};
let myConnection = new RTCPeerConnection(configuration);
// 如果检测到媒体流连接到本地，将其绑定到一个video标签上输出
myConnection.onaddstream = function (event){
console.log('视频回调');
that.videos.push(username);
that.videoStreams[username] = event.stream;
console.log(that.videos)
that.$nextTick(function(){
let video = document.querySelector('#video-' + username);
video.srcObject = event.stream;
})
}
let touser = username;
myConnection.onicecandidate=(e)=>{
if (e.candidate !== null) {
that.sendMessage(JSON.stringify({
"event": "_ice_candidate",
"sender": that.account,
"receiver": touser,
"roomId": that.roomid,
"data": {
"candidate": e.candidate
}
}));
}
};
myConnection.ondatachannel = (event) => {
}
myConnection.oniceconnectionstatechange = (evt) => {
};
this.peerList[username] = myConnection;
},
RTCPeerConnection 一个参数 — iceServers
{
iceServers: [
{ url: "stun:stun.l.google.com:19302"}, // 谷歌的公共服务
{
url: "turn:***",
username: ***, // 用户名
credential: *** // 密码
}
]
}
要想搭建私有 ICE，可根据我这篇文章《WERTC-在Ubuntu中搭建ICE服务器》
接下来进行获取并交换本地和远程描述，就是上面提到的信令（signaling）,WebRTC通过信令建立一个SDP（会话描述协议）握手的过程。只有通过SDP握手，双方才知道对方的信息，这是建立p2p通道的基础。
例如：打开/关闭连接的指令；视频信息，比如解码器，解码器的设置，带宽，以及视频的格式等；网关信息，比如双方的 IP，port...
一个简单的SDP格式：
具体字段含义可查询： https://datatracker.ietf.org/doc/draft-nandakumar-rtcweb-sdp/?include_text=1
通过SDP握手后，浏览器之间就会建立起一个点对点点直接通讯通道。但是由于我们所处的网络环境错综复杂，用户可能处在私有内网内，使用p2p传输时，将会遇到NAT以及防火墙等阻碍。这个时候我们就需要在SDP握手时，通过STUN/TURN/ICE相关NAT穿透技术来保障p2p链接的建立。
下图就是整体sdp过程
上图可以看出，anchor先创建本地的offer,然后通过setLocalDescription设置好在本地，通过webscoket发送给audience
createOffer(username, myConnection) {
let that = this;
let touser = username;
myConnection.createOffer().then((desc) =>{
console.log("sendoffer");
// 将创建好的offer设置为本地offer
myConnection.setLocalDescription(desc).then((e)=>{
that.sendMessage(JSON.stringify({
"event": "_offer",
"sender": that.account,
"receiver": touser,
"roomId": that.roomid,
"data": {
"sdp": desc,
}
})
)
});
})
},
audience收到anchor发送的offer信息后，通过setRemoteDescription设置RTCPeerConnection的远端信息,然后创建answer信息，设置在本地，发送给远端anchor
this.peerList[sender].setRemoteDescription(new RTCSessionDescription(data.sdp), () => {
this.createAnswer(sender,this.peerList[sender])
console.log('sendAnswer')
})
}
createAnswer(username, myConnection){
let that = this;
let touser = username;
myConnection.createAnswer().then((desc) =>{
// 将创建好的answer设置为本地Answer
// myConnection.setLocalDescription
myConnection.setLocalDescription(desc).then((e)=>{
// 通过socket发送answer
that.sendMessage(JSON.stringify({ // 发送answer
"event": "_answer",
"sender": that.account,
"receiver": touser,
"roomId": that.roomid,
"data": {
"sdp": desc,
}
})
);
});
}, function(error){
// 创建answer失败
console.log("创建answer失败");
})
},
这个过程会收集到Candidate信息，回调myConnection.onicecandidate函数，在这个回调中发送Candidate信息，接收端接收到信息后添加Candidate信息
//发送Candidate信息
myConnection.onicecandidate=(e)=>{
if (e.candidate !== null) {
that.sendMessage(JSON.stringify({
"event": "_ice_candidate",
"sender": that.account,
"receiver": touser,
"roomId": that.roomid,
"data": {
"candidate": e.candidate
}
}));
}
};
//添加Candidate信息
setIceCandidate(candidate, myConnection){
myConnection.addIceCandidate(new RTCIceCandidate(candidate));
},
上边流程全部正常后，会通过myConnection.onaddstream 返回流,显示视频到页面
myConnection.onaddstream = function (event){
console.log('视频回调');
that.videos.push(username);
that.videoStreams[username] = event.stream;
console.log(that.videos)
that.$nextTick(function(){
let video = document.querySelector('#video-' + username);
video.srcObject = event.stream;
})
}
全程流程图
代码地址
QQ:328555416
