李超老师的项目
先肯定分为两个两个端，一个是服务器端一个是客户端。客户端用于UI界面的显示，服务器端用于处理客户端发来的消息。
我们先搭建stun和turn服务器
首先介绍一下什么是stun协议，
它是用来干什么的？
stun协议存在的目的就是进行NAT穿越。stun是典型的客户端、服务器模式。客户端发送请求，服务器进行响应。
那么是什么NAT穿越呢？
首先我们先了解一下为什么要进行NAT穿越。下面举个例子，在两个浏览器之间进行实时的音视频互动，对于底层来说，这就是两个端点之间进行高效的网络传输。
为了解决音视频网络传输的问题，webrtc引入了一些网络传输协议。
1.NAT：那么此时我们介绍NAT，简单理解为将内网的地址转换为公网的地址，内网地址无法通讯，通过NAT转换为公网之后，才有通信的可能。
2.说到这里那么顺便介绍一下stun，这个stun充当的是中介的作用，在NAT的基础上，交换两个公网的信息，使得；两个公网之间可以建立连接。
3.turn，stun是有一定几率是不成功的，因此turn会在云端架设一个服务器，在p2p连接不成功的情况下，保证音视频的互通，它就相当于一个中转站。
4.ICE， 罗列所有通信可能性，选择最优解。
NAT又分为四种类型：
完全锥型
地址限制锥型
端口限制锥型
对称型
根据图中所示很好理解，caller与信令服务器连接，同时callee也跟信令服务器连接，第二个callee也跟信令服务器连接；caller向信令服务器发出join请求，信令服务器响应返回joined信息，第一个callee同理，但是第二个callee发送完join之后服务器发现成员已满，因此返回一个full信息，该callee不能join。然后caller和callee进行媒体协商，协商成功之后进行媒体流的数据传输。之后callee主动发出leave请求，服务器响应跟caller发出bye信息并返回callee leaved信息。
我们来看一下服务器端的代码。主要就是处理客户端发来的信令消息。也就是以上的流程转换为代码。
io.sockets.on('connection', (socket)=> {socket.on('message', (room, data)=>{socket.to(room).emit('message',room, data);});socket.on('join', (room)=>{socket.join(room);var myRoom = io.sockets.adapter.rooms[room]; var users = (myRoom)? Object.keys(myRoom.sockets).length : 0;logger.debug('the user number of room is: ' + users);if(users < USERCOUNT){socket.emit('joined', room, socket.id); //发给自己if(users > 1){socket.to(room).emit('otherjoin', room, socket.id);//发给除自己之外的房间内的所有人}}else{socket.leave(room); socket.emit('full', room, socket.id);}//socket.emit('joined', room, socket.id); //发给自己//socket.broadcast.emit('joined', room, socket.id); //发给除自己之外的这个节点上的所有人//io.in(room).emit('joined', room, socket.id); //发给房间内的所有人});socket.on('leave', (room)=>{var myRoom = io.sockets.adapter.rooms[room]; var users = (myRoom)? Object.keys(myRoom.sockets).length : 0;logger.debug('the user number of room is: ' + (users-1));//socket.emit('leaved', room, socket.id);//socket.broadcast.emit('leaved', room, socket.id);socket.to(room).emit('bye', room, socket.id);socket.emit('leaved', room, socket.id);//io.in(room).emit('leaved', room, socket.id);});});
iceRestart是一个很好的方案，能够帮助我们重新选择数据传输的线路
下面了解一下状态机是什么这点蛮重要
下面介绍一下客户端代码编写的流程图
首先写函数start
start函数用于采集音视频数据
采集成功则与信令服务器连接，并注册信令函数
注册以上这些消息的处理函数
如果是joined则设置状态为joined，创建PC并绑定媒体流。
如果是otherjoin，则判断自身的状态是否为joined_unbind，如果是则需要重新创建PC并绑定媒体流并将状态设置为joined_conn，如果一开始状态为joined则直接将状态转换为joined_conn，接着开始媒体协商。
如果是full则状态设置为full并关闭PC，并关闭本地媒体流
客户端的实现需要注意的几点是
1.网络连接要在音视频数据获取到之后，否则可能导致绑定音视频流失败
2.当一端退出房间之后，另一端的PeerConnection要关闭重建，否则与新用户互通时媒体协商会失败。
3.所有的处理流程为异步处理
这里要了解一下什么是异步处理：
异步事件处理：要等待收到一个消息或事件后，才能做下一步的操作
同步处理：做完一步，直接做下一步
接下来我们介绍一下客户端的代码
首先先了解一个api
其中较为关键的是iceServers
第二个api
根据流程写以下代码：
首先start函数获取音视频数据
function start(){if(!navigator.mediaDevices ||!navigator.mediaDevices.getUserMedia){console.error('the getUserMedia is not supported!');return;}else {var constraints;if( shareDeskBox.checked && shareDesk()){constraints = {video: false,audio: {echoCancellation: true,noiseSuppression: true,autoGainControl: true}}}else{constraints = {video: true,audio: {echoCancellation: true,noiseSuppression: true,autoGainControl: true}}}navigator.mediaDevices.getUserMedia(constraints).then(getMediaStream).catch(handleError);}}与信令服务器连接，注册处理函数
function conn(){socket = io.connect();socket.on('joined', (roomid, id) => {console.log('receive joined message!', roomid, id);state = 'joined'//如果是多人的话，第一个人不该在这里创建peerConnection//都等到收到一个otherjoin时再创建//所以，在这个消息里应该带当前房间的用户数////create conn and bind media trackcreatePeerConnection();bindTracks();btnConn.disabled = true;btnLeave.disabled = false;console.log('receive joined message, state=', state);});socket.on('otherjoin', (roomid) => {console.log('receive joined message:', roomid, state);//如果是多人的话，每上来一个人都要创建一个新的 peerConnection//if(state === 'joined_unbind'){createPeerConnection();bindTracks();}state = 'joined_conn';call();console.log('receive other_join message, state=', state);});socket.on('full', (roomid, id) => {console.log('receive full message', roomid, id);hangup();closeLocalMedia();state = 'leaved';console.log('receive full message, state=', state);alert('the room is full!');});socket.on('leaved', (roomid, id) => {console.log('receive leaved message', roomid, id);state='leaved'socket.disconnect();console.log('receive leaved message, state=', state);btnConn.disabled = false;btnLeave.disabled = true;});socket.on('bye', (room, id) => {console.log('receive bye message', roomid, id);//state = 'created';//当是多人通话时，应该带上当前房间的用户数//如果当前房间用户不小于 2, 则不用修改状态//并且，关闭的应该是对应用户的peerconnection//在客户端应该维护一张peerconnection表，它是//一个key:value的格式，key=userid, value=peerconnectionstate = 'joined_unbind';hangup();offer.value = '';answer.value = '';console.log('receive bye message, state=', state);});socket.on('disconnect', (socket) => {console.log('receive disconnect message!', roomid);if(!(state === 'leaved')){hangup();closeLocalMedia();}state = 'leaved';});socket.on('message', (roomid, data) => {console.log('receive message!', roomid, data);if(data === null || data === undefined){console.error('the message is invalid!');return; }if(data.hasOwnProperty('type') && data.type === 'offer') {offer.value = data.sdp;pc.setRemoteDescription(new RTCSessionDescription(data));//create answerpc.createAnswer().then(getAnswer).catch(handleAnswerError);}else if(data.hasOwnProperty('type') && data.type == 'answer'){answer.value = data.sdp;pc.setRemoteDescription(new RTCSessionDescription(data));}else if (data.hasOwnProperty('type') && data.type === 'candidate'){var candidate = new RTCIceCandidate({sdpMLineIndex: data.label,candidate: data.candidate});pc.addIceCandidate(candidate); }else{console.log('the message is invalid!', data);}});roomid = getQueryVariable('room');socket.emit('join', roomid);return true;
}
媒体协商call函数
function call(){if(state === 'joined_conn'){var offerOptions = {offerToRecieveAudio: 1,offerToRecieveVideo: 1}pc.createOffer(offerOptions).then(getOffer).catch(handleOfferError);}
}
function getOffer(desc){pc.setLocalDescription(desc);offer.value = desc.sdp;offerdesc = desc;//send offer sdpsendMessage(roomid, offerdesc); }
function getAnswer(desc){pc.setLocalDescription(desc);answer.value = desc.sdp;//send answer sdpsendMessage(roomid, desc);
}每个端都维护一个自己的peerconnection
var pcConfig = {'iceServers': [{'urls': 'turn:stun.al.learningrtc.cn:3478','credential': "mypasswd",'username': "garrylea"}]
};
function createPeerConnection(){//如果是多人的话，在这里要创建一个新的连接.//新创建好的要放到一个map表中。//key=userid, value=peerconnectionconsole.log('create RTCPeerConnection!');if(!pc){pc = new RTCPeerConnection(pcConfig);pc.onicecandidate = (e)=>{if(e.candidate) {sendMessage(roomid, {type: 'candidate',label:event.candidate.sdpMLineIndex, id:event.candidate.sdpMid, candidate: event.candidate.candidate});}else{console.log('this is the end candidate');}}pc.ontrack = getRemoteStream;}else {console.warning('the pc have be created!');}return;
}
