webrtc初探之一对一的连接过程（一）

说明，我研究的是muan-khan的一个github项目，针对的是chrome对chrome，也就是pc对pc的一对一，一对多通话，感兴趣的可以继续往下看。

github地址：https://github.com/muaz-khan/RTCMultiConnection

一、看下一对一的连接过程----------RTCMultiConnection.js文件

路径：RTCMultiConnection/dist/RTCMultiConnection.js

1.1 引入

var connection = new RTCMultiConnection();

注：RTCMultiConnection引入的是一个对象。这个对象来自RTCMultiConnection.js的如下一行，window.RTCMultiConnection = e，整个RTCMultiConnection.js就一个函数，里面包含了48个小函数。

1.2 修改

我把RTCMultiConnection.js改为：RTCMultiConnectionab.js

把window.RTCMultiConnectiona = e

把var connection = new RTCMultiConnection();改为

var connection = new RTCMultiConnectiona();一样能运行。

二、connection.onopen

找到四个onopen，在RTCMultiConnection.js，分别是：S.onopen，onopen，n.onopen，n.onopen，分别追踪一下。

2.1  S.onopen

S.onopen = function(e) {
 S.enableLogs && console.info("Data connection has been opened between you & ", e.userid)
},
这个函数好像没有走，连接成功，日志如下：
socket.io is connected at:  https://stt.dz101.com:9101/
RTCMultiConnection.js:1132 socket.io connection is opened.
RTCMultiConnection.js:961 Set local description for remote user 9371rzgaqm9
RTCMultiConnection.js:1395 Remote peer's sdp: v=0
o=- 479246417100367491 2 IN IP4 127.0.0.1
s=-
t=0 0
a=group:BUNDLE audio video data
a=msid-semantic: WMS XZA1ozrODMEiHOjYidwgKo16vIuue61yWIjj
m=audio 9 UDP/TLS/RTP/SAVPF 111 103 104 9 0 8 110 112 113 126
c=IN IP4 0.0.0.0
a=rtcp:9 IN IP4 0.0.0.0
a=ice-ufrag:5fj2
a=ice-pwd:m7b0GuabkOwhzkpmp3wpR34w
a=ice-options:trickle
a=fingerprint:sha-256 32:96:00:46:18:FC:BC:CB:C6:20:36:DC:D2:29:15:BE:AB:52:22:C0:48:C5:0C:92:44:14:1A:91:72:E5:18:23
a=setup:active
a=mid:audio
b=AS:128
a=extmap:1 urn:ietf:params:rtp-hdrext:ssrc-audio-level
a=sendrecv
a=rtcp-mux
a=rtpmap:111 opus/48000/2
a=rtcp-fb:111 transport-cc
a=fmtp:111 minptime=10;useinbandfec=1; stereo=1; sprop-stereo=1; maxaveragebitrate=1048576; maxplaybackrate=1048576; stereo=1; sprop-stereo=1; maxaveragebitrate=1048576; maxplaybackrate=1048576
a=maxptime:3
a=maxptime:3
a=rtpmap:103 ISAC/16000
a=rtpmap:104 ISAC/32000
a=rtpmap:9 G722/8000
a=rtpmap:0 PCMU/8000
a=rtpmap:8 PCMA/8000
a=rtpmap:110 telephone-event/48000
a=rtpmap:112 telephone-event/32000
a=rtpmap:113 telephone-event/16000
a=rtpmap:126 telephone-event/8000
a=ssrc:2025645211 cname:5L59ejGf9udWpbEK
a=ssrc:2025645211 msid:XZA1ozrODMEiHOjYidwgKo16vIuue61yWIjj 27d14612-8019-4982-b689-ba9ee2e724c8
a=ssrc:2025645211 mslabel:XZA1ozrODMEiHOjYidwgKo16vIuue61yWIjj
a=ssrc:2025645211 label:27d14612-8019-4982-b689-ba9ee2e724c8
m=video 9 UDP/TLS/RTP/SAVPF 96 97 98 99 100 101 102 123 127 122 125 107 108 109 124
c=IN IP4 0.0.0.0
a=rtcp:9 IN IP4 0.0.0.0
a=ice-ufrag:5fj2
a=ice-pwd:m7b0GuabkOwhzkpmp3wpR34w
a=ice-options:trickle
a=fingerprint:sha-256 32:96:00:46:18:FC:BC:CB:C6:20:36:DC:D2:29:15:BE:AB:52:22:C0:48:C5:0C:92:44:14:1A:91:72:E5:18:23
a=setup:active
a=mid:video
b=AS:512
a=extmap:2 urn:ietf:params:rtp-hdrext:toffset
a=extmap:3 http://www.webrtc.org/experiments/rtp-hdrext/abs-send-time
a=extmap:4 urn:3gpp:video-orientation
a=extmap:5 http://www.ietf.org/id/draft-holmer-rmcat-transport-wide-cc-extensions-01
a=extmap:6 http://www.webrtc.org/experiments/rtp-hdrext/playout-delay
a=extmap:7 http://www.webrtc.org/experiments/rtp-hdrext/video-content-type
a=extmap:8 http://www.webrtc.org/experiments/rtp-hdrext/video-timing
a=sendrecv
a=rtcp-mux
a=rtcp-rsize
a=rtpmap:96 VP8/90000
a=rtcp-fb:96 goog-remb
a=rtcp-fb:96 transport-cc
a=rtcp-fb:96 ccm fir
a=rtcp-fb:96 nack
a=rtcp-fb:96 nack pli
a=rtpmap:97 rtx/90000
a=fmtp:97 apt=96
a=fmtp:96 x-google-min-bitrate=4194304; x-google-max-bitrate=4194304
a=fmtp:96 x-google-min-bitrate=4194304; x-google-max-bitrate=4194304
a=rtpmap:98 VP9/90000
a=rtcp-fb:98 goog-remb
a=rtcp-fb:98 transport-cc
a=rtcp-fb:98 ccm fir
a=rtcp-fb:98 nack
a=rtcp-fb:98 nack pli
a=rtpmap:99 rtx/90000
a=fmtp:99 apt=98
a=rtpmap:100 H264/90000
a=rtcp-fb:100 goog-remb
a=rtcp-fb:100 transport-cc
a=rtcp-fb:100 ccm fir
a=rtcp-fb:100 nack
a=rtcp-fb:100 nack pli
a=fmtp:100 level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=42001f
a=rtpmap:101 rtx/90000
a=fmtp:101 apt=100
a=rtpmap:102 H264/90000
a=rtcp-fb:102 goog-remb
a=rtcp-fb:102 transport-cc
a=rtcp-fb:102 ccm fir
a=rtcp-fb:102 nack
a=rtcp-fb:102 nack pli
a=fmtp:102 level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=42e01f
a=rtpmap:123 rtx/90000
a=fmtp:123 apt=102
a=rtpmap:127 H264/90000
a=rtcp-fb:127 goog-remb
a=rtcp-fb:127 transport-cc
a=rtcp-fb:127 ccm fir
a=rtcp-fb:127 nack
a=rtcp-fb:127 nack pli
a=fmtp:127 level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=4d0032
a=rtpmap:122 rtx/90000
a=fmtp:122 apt=127
a=rtpmap:125 H264/90000
a=rtcp-fb:125 goog-remb
a=rtcp-fb:125 transport-cc
a=rtcp-fb:125 ccm fir
a=rtcp-fb:125 nack
a=rtcp-fb:125 nack pli
a=fmtp:125 level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=640032
a=rtpmap:107 rtx/90000
a=fmtp:107 apt=125
a=rtpmap:108 red/90000
a=rtpmap:109 rtx/90000
a=fmtp:109 apt=108
a=rtpmap:124 ulpfec/90000
a=ssrc-group:FID 168204466 3428275738
a=ssrc:168204466 cname:5L59ejGf9udWpbEK
a=ssrc:168204466 msid:XZA1ozrODMEiHOjYidwgKo16vIuue61yWIjj 405b4020-32ed-42d9-85b8-9f50e6d6a737
a=ssrc:168204466 mslabel:XZA1ozrODMEiHOjYidwgKo16vIuue61yWIjj
a=ssrc:168204466 label:405b4020-32ed-42d9-85b8-9f50e6d6a737
a=ssrc:3428275738 cname:5L59ejGf9udWpbEK
a=ssrc:3428275738 msid:XZA1ozrODMEiHOjYidwgKo16vIuue61yWIjj 405b4020-32ed-42d9-85b8-9f50e6d6a737
a=ssrc:3428275738 mslabel:XZA1ozrODMEiHOjYidwgKo16vIuue61yWIjj
a=ssrc:3428275738 label:405b4020-32ed-42d9-85b8-9f50e6d6a737
m=application 9 DTLS/SCTP 5000
c=IN IP4 0.0.0.0
a=ice-ufrag:5fj2
a=ice-pwd:m7b0GuabkOwhzkpmp3wpR34w
a=ice-options:trickle
a=fingerprint:sha-256 32:96:00:46:18:FC:BC:CB:C6:20:36:DC:D2:29:15:BE:AB:52:22:C0:48:C5:0C:92:44:14:1A:91:72:E5:18:23
a=setup:active
a=mid:data
a=sctpmap:5000 webrtc-datachannel 1024
RTCMultiConnection.js:1398 Remote peer's candidate pairs: candidate:1494317210 1 udp 2122255103 2001::9d38:6ab8:1830:34b3:3f57:fe53 60231 typ host generation 0 ufrag 5fj2 network-id 1 network-cost 50
RTCMultiConnection.js:1398 Remote peer's candidate pairs: candidate:2878102723 1 udp 2122194687 192.168.1.172 60232 typ host generation 0 ufrag 5fj2 network-id 2

注：以上输出是如下代码实现的：

S.onSettingLocalDescription = function(e) {
      S.enableLogs && console.info("Set local description for remote user", e.userid)
}

if (n.type && n.sdp)
return "answer" == n.type && e.peers[o] && e.peers[o].addRemoteSdp(n),
"offer" == n.type && (n.renegotiatingPeer ? this.renegotiatePeer(o, null, n) : this.createAnsweringPeer(n, o)),
void(e.enableLogs && console.log("Remote peer's sdp:", n.sdp));
if (n.candidate)
return e.peers[o] && e.peers[o].addRemoteCandidate(n),
void(e.enableLogs && console.log("Remote peer's candidate pairs:", n.candidate));

2.2 this.addNegotiatedMessage

向上追踪，追踪到了t(e)，如下：

2.3 t(e)向上追踪

没法追啦。

三、打日志

3.1 打醒目的错误日志如下：

醒目的日志打完了，如下 ：

注：接下来，就按照这个表追踪（fun32,fun33…..），就知道怎么连接的了。

3.2 追踪fun32

代码：

//fun32
    console.error('fun32==>2241==>2241');
    var A = !!window.opera || navigator.userAgent.indexOf(" OPR/") >= 0,
        U = void 0 !== window.InstallTrigger,
        I = Object.prototype.toString.call(window.HTMLElement).indexOf("Constructor") > 0,
        D = !!window.chrome && !A,
        L = !!document.documentMode,
        N = !!navigator.userAgent.match(/Android|iPhone|iPad|iPod|BlackBerry|IEMobile/i);
      console.info('fun32.01==>2248==>2248');
    "undefined" != typeof cordova && (N = !0, D = !0),
    navigator && navigator.userAgent && -1 !== navigator.userAgent.indexOf("Crosswalk") && (N = !0, D = !0);
      console.info('fun32.02==>2252==>2252');
    var V = !N && (I || L);
    console.info('fun32.03==>2255==>2255');
    V && "undefined" != typeof URL && (URL.createObjectURL = function() {});
    console.info('fun32.04==>2258==>2258');
    var W = (!!(window.process && "object" == typeof window.process
        && window.process.versions && window.process.versions["node-webkit"]), 50),
        B = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./);
    console.info('fun32.05==>2263==>2263');
    D && B && B[2] && (W = parseInt(B[2], 10));
    console.info('fun32.06==>2266==>2266');
    var F = 50;
    B = navigator.userAgent.match(/Firefox\/(.*)/),
    U && B && B[1] && (F = parseInt(B[1], 10)),
    window.addEventListener || (window.addEventListener = function(e, n, t) {
        e.attachEvent && e.attachEvent("on" + n, t)
    }),
    window.attachEventListener = function(e, n, t, o) {
        e.addEventListener(n, t, o)
    };
    console.info('fun32.07==>2277==>2277');
    //fun33-35
console.error('fun35==>2280==>2280');

运行截图如下：

接下来，一行一行的分析如下：

1）fun32.01

var A = !!window.opera || navigator.userAgent.indexOf(" OPR/") >= 0,
   U = void 0 !== window.InstallTrigger,
    I = Object.prototype.toString.call(window.HTMLElement).indexOf("Constructor") > 0,
    D = !!window.chrome && !A,
    L = !!document.documentMode,
    N = !!navigator.userAgent.match(/Android|iPhone|iPad|iPod|BlackBerry|IEMobile/i);
console.info('fun32.01==>2248==>2248');

注：定义了变量A、U、D、L、N，分别表示什么呢？

注：都是布尔类型的变量。

A用于判断是不是opera浏览器；

U用于判断安装没安装触发器；

I用于用于判断是不是IE8；

D用于判断是不是谷歌浏览器；

L中documentMode 属性返回浏览器渲染文档的模式，是IE浏览器的特定属性，所以L用于判断是不是IE浏览器；

N用于判断是不是安卓、苹果、iPad、iPod、黑莓、IE手机等；