今天的学习可以说是以失败告终了吧。也就知道了用js动态调试。大体看懂了participant.js和conference.js。但最大头的是kurento.js

关于频繁出现的 ICE candidate：

ICE stands for Interactive Connectivity Establishment , its a techniques used in NAT( network address translator ) for establishing communication for VOIP, peer-peer, instant-messaging, and other kind of interactive media.

Typically ice candidate provides the information about the IPaddress and port from where the data is going to be exchanged.

It’s format is something like follows

a=candidate:1 1 UDP 2130706431 192.168.1.102 1816 typ host

here UDP specifies the protocol to be used, the typ host specifies which type of ice candidates it is, host means the candidates is generated within the firewall. If you use wireshark to monitor the traffic then you can see the ports that are used for data transfer are same as the one present in ice-candidates.

Another type is relay , which denotes this candidates can be used when communication is to be done outside the firewall.

It may contain more information depending on browser you are using. Many time i have seen 8-12 ice-candidates are generated by browser.

Every ICE contains ‘a node’ of your network, until it has reached the outside. By this you send these ICE’s to the other peer, so they know through what connection points they can reach you. See it as a large building: one is in the building, and needs to tell the other (who is not familiar) how to walk through it. Same here, if I have a lot of network devices, the incoming connection somehow needs to find the right way to my computer. By providing all nodes, the RTC connection finds the shortest route itself. So when you would connect to the computer next to you, which is connected to the same router/switch/whatever, it uses all ICE’s and determine the shortest, and that is directly through that point. That your collegue got less ICE candidates has to do with the ammount of devices it has to go through. Please note that every network adapter inside your computer which has an IP adress (I have a vEthernet switch from hyper-v) it also creates an ICE for it.

参考链接：https://stackoverflow.com/a/21071464

Demo是王老师搭建了运行在服务器的，先通过给两个主要的js文件(participate.js和conference.js)下断点来弄明白流程吧。

~~我先建立一个房间登录用户banana房间号1234。然后用另一个浏览器进去开始调试。在participant.js第30行下了断点。~~

~~输入名字apple和房间号1234后，进入Participant(name)函数。name就是apple。仔细看这好像是Participant的类啊。整个participant.js就这一个函数。~~
~~然后这个函数开始写html~~

~~在一个container中把name、video框啥的加入。还会有video一些参数的设置。然后return这个container~~
~~到了conferenceroom.js，有个参与者的数组，下标是name，加入了刚刚的的用户~~
~~回到participant.js读到了banana。又是一系列的写入html。~~
~~然后到了conferenceroom.js的receiveVideo(sender)函数。就是接受sender这个用户发来的Video。~~

~~一会儿建立一个3人的看看sender会变成啥样。怎么接。~~
~~跳转到 conference.js的ws.onmessage = function(message),其中message里面有数据："id":"existingParticipants","data":["banana"]和源origin: "wss://192.168.139.218:8443"~~

~~message里的数据是JSON格式的。然后解包存到了parseMessage这个变量。通过id判断进去什么case。~~

~~明显我现在是属于存在用户的情况：~~
1
2
3
case 'existingParticipants':
onExistingParticipants(parsedMessage);
break;
~~下面看具体的onExistingParticipants(parsedMessage);执行了什么:~~
- ~~变量constranits是控制网页video大小的~~
- ~~控制台输出：apple在房间注册~~
- ~~新建一个Participate对象~~
~~break~~
~~至此图像还没有在网页显示。进入了kurento-utils.js。应该是实现WebRTC的了。~~

~~start()函数。不知道为啥，直接到了if (mode !== 'recvonly' && !videoStream && !audioStream) –>~~

navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
                videoStream = stream;
                start();
            }).catch(callback);

~~其中stream是一个MediaSteam.上午自己看资料看到有MediaSteamAPI。然后又start()有点懵。~~

~~到了window.RTCPeerConnection又是一阵懵之后。~~
~~回到了conference.js``ws.onmessage = funciton(message)解JSON数据包。并出现了apple的画面。此时的messsage里id成了receiveVideoAnser,通过id判断进入case。~~
~~break后又在ws.onmessage解JSON。id成了"iceCandidate"~~

进入iceCandidate的case：参与者的数组中取到apple然后.rtcPeer.addIceCandidate()是加入了参与者？但是也没看到读取banana啊。只读到一串这个："candidate:4 1 UDP 2013266431 2400:dd0a:1005:1390:250:56ff:fe86:a0c4 30325 typ host"
~~回到了window.RTCPeerConnection执行resolve()解码？~~

上面调试遇到一个问题就是，加了断点会在死循环里出不来啊。

我懂了。我应该在每种情况下加不同的断点。然后看代码是怎么走的。就是说我之前折腾这半天顶多就知道了个新建Participate对象的事。重来吧。

在conference.js的前4个case中下断点
第一个用户apple进入1234房间，分析
第二个用户banana进入1234房间，分析
第三个用户cabbage进入1234房间，分析
第二个用户banana退出1234房间，分析

第一个用户apple进入1234房间
- 虽然之前没有人。但还是进入了existingParticipants情况下。function onExistingParticipants(msg) 其中msg中：{id: "existingParticipants", data: Array(0)}
- 控制台输出，apple在房间注册
- 新建Participate对象participant = new Participant(name); name就是“apple” ，这个过程会在HTML写入video框，但还没有读到数据
- 存入数组participants[name]
- 读video
- participant.rtcPeer 进入了kurento-utils.js这里面好复杂没看懂
- break了case 'existingParticipants'
- 通过this.offerToReceiveVideo进入了receiveVideoResponse这个case。receiveVideoResponse(result)其中result内容有id、name和adpAnswer
- end？