Игорь Шеко

Front-end team lead

Voximplant

Почему WebRTC это просто и сложно?

Почему WebRTC это просто и сложно?

const pc = new RTCPeerConnection();
await localDescription = pc.createOffer();
await pc.setLocalDescription(localDescription);
ws.send(JSON.stringify(localDescription));
ws.addEventListener('message',(data)=>{
	await pc.setRemoteDescription(JSON.parse(data));
})

Почему WebRTC это просто и сложно?

const pc = new RTCPeerConnection();
await localDescription = pc.createOffer();
await pc.setLocalDescription(localDescription);
ws.send(JSON.stringify(localDescription));
ws.addEventListener('message',(data)=>{
	await pc.setRemoteDescription(JSON.parse(data));
})

Почему WebRTC это просто и сложно?

const pc = new RTCPeerConnection();
await localDescription = pc.createOffer();
await pc.setLocalDescription(localDescription);
ws.send(JSON.stringify(localDescription));
ws.addEventListener('message',(data)=>{
	await pc.setRemoteDescription(JSON.parse(data));
})

SDP

UDP

ICE

TURN

STUN

RTP

RTCP

VAD

.....

Основные проблемы, с которыми столкнетесь

  • Все очень просто, когда оно работает и очень сложно, когда нет

Основные проблемы, с которыми столкнетесь

  • AAAA "Ярость тысячи солнц!!!"

Основные проблемы, с которыми столкнетесь

  • AAAA "Ярость тысячи солнц!!!"

  • SDP aka Session Description Protocol

Основные проблемы, с которыми столкнетесь

  • AAAA "Ярость тысячи солнц!!!"

  • SDP aka Session Description Protocol

v=0
o=VIMS 234 3 IN IP4 82.202.208.157
s=VIMS
c=IN IP4 82.202.208.157
b=TIAS:13888000
t=0 0
a=fingerprint:sha-256 A8:9E:DF:90:91:96:82:E6:75:6B:EA:B7:40:01:B8:2C:C4:B3:66:77:32:46:A4:D4:0F:1F:C2:38:2E:FF:0A:0F
a=msid-semantic:WMS *
a=group:BUNDLE 0 1
a=ice-ufrag:147B29E6
a=ice-pwd:FBD23B73886E790A61BD19E2D5EF
m=audio 11552 UDP/TLS/RTP/SAVPF 111 126
b=TIAS:64000
b=AS:64
a=mid:0
a=rtpmap:111 opus/48000/2
a=fmtp:111 minptime=10; useinbandfec=1; stereo=0; usedtx=1
a=rtpmap:126 telephone-event/8000
a=fmtp:126 0-15
a=recvonly
a=rtcp-mux
a=setup:actpass
a=candidate:1 1 UDP 100 82.202.208.157 11552 typ host generation 0
a=end-of-candidates
a=msid:FFE3AD86B874A2DB728FB39D0C59FDBEC9276AD2246D738E50D136E323C117FD BEC5275300EC4A1B0E9CC33E29295B019C6C4BF4CE0082B9045D89BA2D378382
a=ssrc:1801710709 msid:FFE3AD86B874A2DB728FB39D0C59FDBEC9276AD2246D738E50D136E323C117FD BEC5275300EC4A1B0E9CC33E29295B019C6C4BF4CE0082B9045D89BA2D378382
a=ssrc:1801710709 cname:cname_140498853493008
a=ssrc:1801710709 mslabel:EB2392158ECBD6A3
a=ssrc:1801710709 label:EB2392158ECBD6A300
a=extmap:2 http://www.webrtc.org/experiments/rtp-hdrext/abs-send-time
a=ptime:20
m=video 11552 UDP/TLS/RTP/SAVPF 96 97
b=TIAS:500000
b=AS:500
a=mid:1
a=rtpmap:96 VP8/90000
a=rtcp-fb:96 ccm fir
a=rtcp-fb:96 nack
a=rtcp-fb:96 nack pli
a=rtcp-fb:96 goog-remb
a=rtcp-fb:96 transport-cc
a=rtpmap:97 rtx/90000
a=fmtp:97 apt=96
a=recvonly
a=rtcp-mux
a=setup:actpass
a=candidate:1 1 UDP 100 82.202.208.157 11552 typ host generation 0
a=end-of-candidates
a=msid:DFEE9389E7E906F55A9CE4890619BA189F632EC05AA509A634228AB80D2B7330 3226883E95655FA3BC64E7A65622DC60E8761A5AFBF5B9865FA464ACBCE89487
a=ssrc-group:FID 379754258 1387682306
a=ssrc:379754258 msid:DFEE9389E7E906F55A9CE4890619BA189F632EC05AA509A634228AB80D2B7330 3226883E95655FA3BC64E7A65622DC60E8761A5AFBF5B9865FA464ACBCE89487
a=ssrc:379754258 cname:cname_140498853493008
a=ssrc:379754258 mslabel:9347F4C9E1A8C0B0
a=ssrc:379754258 label:9347F4C9E1A8C0B010
a=ssrc:1387682306 msid:DFEE9389E7E906F55A9CE4890619BA189F632EC05AA509A634228AB80D2B7330 3226883E95655FA3BC64E7A65622DC60E8761A5AFBF5B9865FA464ACBCE89487
a=ssrc:1387682306 cname:cname_140498853493008
a=ssrc:1387682306 mslabel:D8C90C628D5BD751
a=ssrc:1387682306 label:D8C90C628D5BD75110
a=extmap:2 http://www.webrtc.org/experiments/rtp-hdrext/abs-send-time
a=extmap:3 http://www.ietf.org/id/draft-holmer-rmcat-transport-wide-cc-extensions-01
a=extmap:7 http://www.webrtc.org/experiments/rtp-hdrext/video-timing
a=extmap:11 http://www.webrtc.org/experiments/rtp-hdrext/video-content-type
a=extmap:13 urn:3gpp:video-orientation
a=extmap:14 urn:ietf:params:rtp-hdrext:toffset

Основные проблемы, с которыми столкнетесь

  • AAAA "Ярость тысячи солнц!!!"

  • SDP aka Session Description Protocol

v=0
o=VIMS 234 3 IN IP4 82.202.208.157
s=VIMS
c=IN IP4 82.202.208.157
b=TIAS:13888000
t=0 0
a=fingerprint:sha-256 A8:9E:DF:90:91:96:82:E6:75:6B:EA:B7:40:01:B8:2C:C4:B3:66:77:32:46:A4:D4:0F:1F:C2:38:2E:FF:0A:0F
a=msid-semantic:WMS *
a=group:BUNDLE 0 1
a=ice-ufrag:147B29E6
a=ice-pwd:FBD23B73886E790A61BD19E2D5EF
m=audio 11552 UDP/TLS/RTP/SAVPF 111 126
b=TIAS:64000
b=AS:64
a=mid:0
a=rtpmap:111 opus/48000/2
a=fmtp:111 minptime=10; useinbandfec=1; stereo=0; usedtx=1
a=rtpmap:126 telephone-event/8000
a=fmtp:126 0-15
a=recvonly
a=rtcp-mux
a=setup:actpass
a=candidate:1 1 UDP 100 82.202.208.157 11552 typ host generation 0
a=end-of-candidates
a=msid:FFE3AD86B874A2DB728FB39D0C59FDBEC9276AD2246D738E50D136E323C117FD BEC5275300EC4A1B0E9CC33E29295B019C6C4BF4CE0082B9045D89BA2D378382
a=ssrc:1801710709 msid:FFE3AD86B874A2DB728FB39D0C59FDBEC9276AD2246D738E50D136E323C117FD BEC5275300EC4A1B0E9CC33E29295B019C6C4BF4CE0082B9045D89BA2D378382
a=ssrc:1801710709 cname:cname_140498853493008
a=ssrc:1801710709 mslabel:EB2392158ECBD6A3
a=ssrc:1801710709 label:EB2392158ECBD6A300
a=extmap:2 http://www.webrtc.org/experiments/rtp-hdrext/abs-send-time
a=ptime:20
m=video 11552 UDP/TLS/RTP/SAVPF 96 97
b=TIAS:500000
b=AS:500
a=mid:1
a=rtpmap:96 VP8/90000
a=rtcp-fb:96 ccm fir
a=rtcp-fb:96 nack
a=rtcp-fb:96 nack pli
a=rtcp-fb:96 goog-remb
a=rtcp-fb:96 transport-cc
a=rtpmap:97 rtx/90000
a=fmtp:97 apt=96
a=recvonly
a=rtcp-mux
a=setup:actpass
a=candidate:1 1 UDP 100 82.202.208.157 11552 typ host generation 0
a=end-of-candidates
a=msid:DFEE9389E7E906F55A9CE4890619BA189F632EC05AA509A634228AB80D2B7330 3226883E95655FA3BC64E7A65622DC60E8761A5AFBF5B9865FA464ACBCE89487
a=ssrc-group:FID 379754258 1387682306
a=ssrc:379754258 msid:DFEE9389E7E906F55A9CE4890619BA189F632EC05AA509A634228AB80D2B7330 3226883E95655FA3BC64E7A65622DC60E8761A5AFBF5B9865FA464ACBCE89487
a=ssrc:379754258 cname:cname_140498853493008
a=ssrc:379754258 mslabel:9347F4C9E1A8C0B0
a=ssrc:379754258 label:9347F4C9E1A8C0B010
a=ssrc:1387682306 msid:DFEE9389E7E906F55A9CE4890619BA189F632EC05AA509A634228AB80D2B7330 3226883E95655FA3BC64E7A65622DC60E8761A5AFBF5B9865FA464ACBCE89487
a=ssrc:1387682306 cname:cname_140498853493008
a=ssrc:1387682306 mslabel:D8C90C628D5BD751
a=ssrc:1387682306 label:D8C90C628D5BD75110
a=extmap:2 http://www.webrtc.org/experiments/rtp-hdrext/abs-send-time
a=extmap:3 http://www.ietf.org/id/draft-holmer-rmcat-transport-wide-cc-extensions-01
a=extmap:7 http://www.webrtc.org/experiments/rtp-hdrext/video-timing
a=extmap:11 http://www.webrtc.org/experiments/rtp-hdrext/video-content-type
a=extmap:13 urn:3gpp:video-orientation
a=extmap:14 urn:ietf:params:rtp-hdrext:toffset

Основные проблемы, с которыми столкнетесь

  • AAAA "Ярость тысячи солнц!!!"

  • SDP aka Session Description Protocol

v=0
o=VIMS 234 3 IN IP4 82.202.208.157
s=VIMS
c=IN IP4 82.202.208.157
b=TIAS:13888000
t=0 0
a=fingerprint:sha-256 A8:9E:DF:90:91:96:82:E6:75:6B:EA:B7:40:01:B8:2C:C4:B3:66:77:32:46:A4:D4:0F:1F:C2:38:2E:FF:0A:0F
a=msid-semantic:WMS *
a=group:BUNDLE 0 1
a=ice-ufrag:147B29E6
a=ice-pwd:FBD23B73886E790A61BD19E2D5EF
m=audio 11552 UDP/TLS/RTP/SAVPF 111 126
b=TIAS:64000
b=AS:64
a=mid:0
a=rtpmap:111 opus/48000/2
a=fmtp:111 minptime=10; useinbandfec=1; stereo=0; usedtx=1
a=rtpmap:126 telephone-event/8000
a=fmtp:126 0-15
a=recvonly
a=rtcp-mux
a=setup:actpass
a=candidate:1 1 UDP 100 82.202.208.157 11552 typ host generation 0
a=end-of-candidates
a=msid:FFE3AD86B874A2DB728FB39D0C59FDBEC9276AD2246D738E50D136E323C117FD BEC5275300EC4A1B0E9CC33E29295B019C6C4BF4CE0082B9045D89BA2D378382
a=ssrc:1801710709 msid:FFE3AD86B874A2DB728FB39D0C59FDBEC9276AD2246D738E50D136E323C117FD BEC5275300EC4A1B0E9CC33E29295B019C6C4BF4CE0082B9045D89BA2D378382
a=ssrc:1801710709 cname:cname_140498853493008
a=ssrc:1801710709 mslabel:EB2392158ECBD6A3
a=ssrc:1801710709 label:EB2392158ECBD6A300
a=extmap:2 http://www.webrtc.org/experiments/rtp-hdrext/abs-send-time
a=ptime:20
m=video 11552 UDP/TLS/RTP/SAVPF 96 97
b=TIAS:500000
b=AS:500
a=mid:1
a=rtpmap:96 VP8/90000
a=rtcp-fb:96 ccm fir
a=rtcp-fb:96 nack
a=rtcp-fb:96 nack pli
a=rtcp-fb:96 goog-remb
a=rtcp-fb:96 transport-cc
a=rtpmap:97 rtx/90000
a=fmtp:97 apt=96
a=recvonly
a=rtcp-mux
a=setup:actpass
a=candidate:1 1 UDP 100 82.202.208.157 11552 typ host generation 0
a=end-of-candidates
a=msid:DFEE9389E7E906F55A9CE4890619BA189F632EC05AA509A634228AB80D2B7330 3226883E95655FA3BC64E7A65622DC60E8761A5AFBF5B9865FA464ACBCE89487
a=ssrc-group:FID 379754258 1387682306
a=ssrc:379754258 msid:DFEE9389E7E906F55A9CE4890619BA189F632EC05AA509A634228AB80D2B7330 3226883E95655FA3BC64E7A65622DC60E8761A5AFBF5B9865FA464ACBCE89487
a=ssrc:379754258 cname:cname_140498853493008
a=ssrc:379754258 mslabel:9347F4C9E1A8C0B0
a=ssrc:379754258 label:9347F4C9E1A8C0B010
a=ssrc:1387682306 msid:DFEE9389E7E906F55A9CE4890619BA189F632EC05AA509A634228AB80D2B7330 3226883E95655FA3BC64E7A65622DC60E8761A5AFBF5B9865FA464ACBCE89487
a=ssrc:1387682306 cname:cname_140498853493008
a=ssrc:1387682306 mslabel:D8C90C628D5BD751
a=ssrc:1387682306 label:D8C90C628D5BD75110
a=extmap:2 http://www.webrtc.org/experiments/rtp-hdrext/abs-send-time
a=extmap:3 http://www.ietf.org/id/draft-holmer-rmcat-transport-wide-cc-extensions-01
a=extmap:7 http://www.webrtc.org/experiments/rtp-hdrext/video-timing
a=extmap:11 http://www.webrtc.org/experiments/rtp-hdrext/video-content-type
a=extmap:13 urn:3gpp:video-orientation
a=extmap:14 urn:ietf:params:rtp-hdrext:toffset

Основные проблемы, с которыми столкнетесь

  • AAAA "Ярость тысячи солнц!!!"

  • SDP aka Session Description Protocol

v=0
o=- 5347596606922166072 2 IN IP4 127.0.0.1
s=-
t=0 0
a=group:BUNDLE 0 1
a=msid-semantic: WMS FvmNLU19WeY9BUV1gADTjIClqPoD9kLEQRM8
m=audio 9 UDP/TLS/RTP/SAVPF 111 103 104 9 0 8 106 105 13 110 112 113 126
c=IN IP4 0.0.0.0
a=rtcp:9 IN IP4 0.0.0.0
a=ice-ufrag:kEZv
a=ice-pwd:UVVeJzFoQtu3q/Ce7ZHxALL/
a=ice-options:trickle
a=fingerprint:sha-256 9F:01:6A:41:DB:4C:51:24:D0:03:88:54:82:39:36:D4:8D:9F:98:6E:E3:91:0F:EA:0C:B1:DC:B8:9D:86:23:BF
a=setup:actpass
a=mid:0
a=extmap:1 urn:ietf:params:rtp-hdrext:ssrc-audio-level
a=extmap:2 http://www.webrtc.org/experiments/rtp-hdrext/abs-send-time
a=extmap:3 http://www.ietf.org/id/draft-holmer-rmcat-transport-wide-cc-extensions-01
a=extmap:4 urn:ietf:params:rtp-hdrext:sdes:mid
a=extmap:5 urn:ietf:params:rtp-hdrext:sdes:rtp-stream-id
a=extmap:6 urn:ietf:params:rtp-hdrext:sdes:repaired-rtp-stream-id
a=sendrecv
a=msid:FvmNLU19WeY9BUV1gADTjIClqPoD9kLEQRM8 e77fa72f-bfd5-44c2-9484-ece0bcccc608
a=rtcp-mux
a=rtpmap:111 opus/48000/2
a=rtcp-fb:111 transport-cc
a=fmtp:111 minptime=10;useinbandfec=1
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:106 CN/32000
a=rtpmap:105 CN/16000
a=rtpmap:13 CN/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:3612809170 cname:ryzJvE++b30SqEMY
a=ssrc:3612809170 msid:FvmNLU19WeY9BUV1gADTjIClqPoD9kLEQRM8 e77fa72f-bfd5-44c2-9484-ece0bcccc608
a=ssrc:3612809170 mslabel:FvmNLU19WeY9BUV1gADTjIClqPoD9kLEQRM8
a=ssrc:3612809170 label:e77fa72f-bfd5-44c2-9484-ece0bcccc608
m=video 9 UDP/TLS/RTP/SAVPF 96 97 98 99 100 101 102 121 127 120 125 107 108 109 124 119 123 118 114 115 116
c=IN IP4 0.0.0.0
a=rtcp:9 IN IP4 0.0.0.0
a=ice-ufrag:kEZv
a=ice-pwd:UVVeJzFoQtu3q/Ce7ZHxALL/
a=ice-options:trickle
a=fingerprint:sha-256 9F:01:6A:41:DB:4C:51:24:D0:03:88:54:82:39:36:D4:8D:9F:98:6E:E3:91:0F:EA:0C:B1:DC:B8:9D:86:23:BF
a=setup:actpass
a=mid:1
a=extmap:14 urn:ietf:params:rtp-hdrext:toffset
a=extmap:2 http://www.webrtc.org/experiments/rtp-hdrext/abs-send-time
a=extmap:13 urn:3gpp:video-orientation
a=extmap:3 http://www.ietf.org/id/draft-holmer-rmcat-transport-wide-cc-extensions-01
a=extmap:12 http://www.webrtc.org/experiments/rtp-hdrext/playout-delay
a=extmap:11 http://www.webrtc.org/experiments/rtp-hdrext/video-content-type
a=extmap:7 http://www.webrtc.org/experiments/rtp-hdrext/video-timing
a=extmap:8 http://www.webrtc.org/experiments/rtp-hdrext/color-space
a=extmap:4 urn:ietf:params:rtp-hdrext:sdes:mid
a=extmap:5 urn:ietf:params:rtp-hdrext:sdes:rtp-stream-id
a=extmap:6 urn:ietf:params:rtp-hdrext:sdes:repaired-rtp-stream-id
a=sendrecv
a=msid:FvmNLU19WeY9BUV1gADTjIClqPoD9kLEQRM8 89a636c3-3036-4b4b-8a39-e074bd6a5371
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=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=fmtp:98 profile-id=0
a=rtpmap:99 rtx/90000
a=fmtp:99 apt=98
a=rtpmap:100 VP9/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 profile-id=2
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=42001f
a=rtpmap:121 rtx/90000
a=fmtp:121 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=0;profile-level-id=42001f
a=rtpmap:120 rtx/90000
a=fmtp:120 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=42e01f
a=rtpmap:107 rtx/90000
a=fmtp:107 apt=125
a=rtpmap:108 H264/90000
a=rtcp-fb:108 goog-remb
a=rtcp-fb:108 transport-cc
a=rtcp-fb:108 ccm fir
a=rtcp-fb:108 nack
a=rtcp-fb:108 nack pli
a=fmtp:108 level-asymmetry-allowed=1;packetization-mode=0;profile-level-id=42e01f
a=rtpmap:109 rtx/90000
a=fmtp:109 apt=108
a=rtpmap:124 H264/90000
a=rtcp-fb:124 goog-remb
a=rtcp-fb:124 transport-cc
a=rtcp-fb:124 ccm fir
a=rtcp-fb:124 nack
a=rtcp-fb:124 nack pli
a=fmtp:124 level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=4d001f
a=rtpmap:119 rtx/90000
a=fmtp:119 apt=124
a=rtpmap:123 H264/90000
a=rtcp-fb:123 goog-remb
a=rtcp-fb:123 transport-cc
a=rtcp-fb:123 ccm fir
a=rtcp-fb:123 nack
a=rtcp-fb:123 nack pli
a=fmtp:123 level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=64001f
a=rtpmap:118 rtx/90000
a=fmtp:118 apt=123
a=rtpmap:114 red/90000
a=rtpmap:115 rtx/90000
a=fmtp:115 apt=114
a=rtpmap:116 ulpfec/90000
a=ssrc-group:FID 3399325948 3051746980
a=ssrc:3399325948 cname:ryzJvE++b30SqEMY
a=ssrc:3399325948 msid:FvmNLU19WeY9BUV1gADTjIClqPoD9kLEQRM8 89a636c3-3036-4b4b-8a39-e074bd6a5371
a=ssrc:3399325948 mslabel:FvmNLU19WeY9BUV1gADTjIClqPoD9kLEQRM8
a=ssrc:3399325948 label:89a636c3-3036-4b4b-8a39-e074bd6a5371
a=ssrc:3051746980 cname:ryzJvE++b30SqEMY
a=ssrc:3051746980 msid:FvmNLU19WeY9BUV1gADTjIClqPoD9kLEQRM8 89a636c3-3036-4b4b-8a39-e074bd6a5371
a=ssrc:3051746980 mslabel:FvmNLU19WeY9BUV1gADTjIClqPoD9kLEQRM8
a=ssrc:3051746980 label:89a636c3-3036-4b4b-8a39-e074bd6a5371

На самом деле я его порезал ...

Основные проблемы, с которыми столкнетесь

  • AAAA "Ярость тысячи солнц!!!"

  • SDP aka Session Description Protocol

  • STUN\TURN + NAT

Основные проблемы, с которыми столкнетесь

  • AAAA "Ярость тысячи солнц!!!"

  • SDP aka Session Description Protocol

  • STUN\TURN + NAT

  • Hardware

Основные проблемы, с которыми столкнетесь

  • AAAA "Ярость тысячи солнц!!!"

  • SDP aka Session Description Protocol

  • STUN\TURN + NAT

  • Hardware

  • Windows не дает 1 микрофон 2 приложениям ...

  • iOS не дает микрофон 2 раза 1 приложению ...

  • Linux не даст вам спать ...

Основные проблемы, с которыми столкнетесь

  • AAAA "Ярость тысячи солнц!!!"

  • SDP aka Session Description Protocol

  • STUN\TURN + NAT

  • Hardware

  • Браузеры. Их слишком много.

The 

The WebRTC 

The WebRTC adapter

The WebRTC adapter

npm install webrtc-adapter

Peer-to-Peer

const pc = new RTCPeerConnection();
await localDescription = pc.createOffer();
await pc.setLocalDescription(localDescription);
ws.send(JSON.stringify(localDescription));
ws.addEventListener('message',(data)=>{
	await pc.setRemoteDescription(JSON.parse(data));
})

Peer-to-Peer

Плюсы

Минусы

Peer-to-Peer

Плюсы

Минусы

  • P2P = End-to-end encryption
  • Практически не нужен сервер 
  • Браузеры договариваются напрямую

Peer-to-Peer

Плюсы

Минусы

  • P2P = End-to-end encryption
  • Практически не нужен сервер 
  • Браузеры договариваются напрямую
  • Нужен STUN
  • 15% звонков не пройдут без TURN
  • Ограниченные функции

STUN | TURN и NAT

STUN | TURN и NAT

NAT

STUN | TURN и NAT

STUN - Simple Traversal of UDP through NATs

stun.l.google.com:19302
stun1.l.google.com:19302
stun2.l.google.com:19302
stun3.l.google.com:19302
stun4.l.google.com:19302

STUN | TURN и NAT

STUN - Simple Traversal of UDP through NATs

STUN | TURN и NAT

STUN - Simple Traversal of UDP through NATs

TURN - Traversal Using Relay NAT

STUN | TURN и NAT

STUN - Simple Traversal of UDP through NATs

TURN - Traversal Using Relay NAT

https://github.com/coturn/coturn

coturn

STUN | TURN и NAT

STUN - Simple Traversal of UDP through NATs

TURN - Traversal Using Relay NAT

https://github.com/coturn/coturn

coturn

P2P и конференция

P2P и конференция

3

3

3

3

P2P и конференция

N-1

N-1

N-1

N-1

Проблемы с CPU и браузерными ресурсами

  • N-1 энкодер видео

  • N-1 декодер видео

1080p

N-1

Проблемы с CPU и браузерными ресурсами

4G

3G

Fiber

N-1

Проблемы с CPU и браузерными ресурсами

4000 KBps

2000 KBps

500 KBps

N-1

Проблемы с CPU и браузерными ресурсами

4000 KBps

2000 KBps

500 KBps

1900 KBps

550 KBps

Общий принцип серверных конференций

Общий принцип серверных конференций

4G

3G

Fiber

Fiber

Управление битрейтом и разрешениями

720p

500 kBps

480p

500 kBps

Управление битрейтом и разрешениями

function limitBitrateBy(maxBitrate){
  const promiseList = [];
  pc.getTransceivers().forEach((tr) => {
    const params = tr.sender.getParameters();
    if (scale != -1) {
      params.encodings[0].maxBitrate = maxBitrate;
    } else {
      delete params.encodings[0].maxBitrate;
    }
    promiseList.push(tr.sender.setParameters(params));
  }
  return Promise.all(promiseList);
}

Управление битрейтом и разрешениями

function scaleDownBy(scale){
  const promiseList = [];
  pc.getTransceivers().forEach((tr) => {
    const params = tr.sender.getParameters();
    if (scale != -1) {
      params.encodings[0].scaleResolutionDownBy = scale;
    } else {
      delete params.encodings[0].scaleResolutionDownBy;
    }
    promiseList.push(tr.sender.setParameters(params));
  }
  return Promise.all(promiseList);
}

Simulcast

Simulcast

Simulcast

Simulcast

Simulcast

const videoTracks = stream.getVideoTracks();
if (videoTracks.length) {
  const initSettings = { direction: 'sendrecv', streams: [stream] };
  if (this._call && this._call.settings.isConference) {
    initSettings.sendEncodings = [
      { rid: 'h', active: true, maxBitrate: 900000 },
      { rid: 'm', active: true, maxBitrate: 300000, scaleResolutionDownBy: 2 },
      { rid: 'l', active: true, maxBitrate: 100000, scaleResolutionDownBy: 4 },
    ];
  }
  videoTracks.forEach((track) => {
    this.impl.addTransceiver(track, initSettings);
  });
}

Simulcast

Плюсы

Минусы

  • Лучше работа с разными сетями
  • Возможность ручного управления потоками

Simulcast

Плюсы

Минусы

  • Лучше работа с разными сетями
  • Возможность ручного управления потоками
  • 2+ энкодера
  • Дополнительный исходящий канал

Управление потоками и лейауты

Управление потоками и лейауты

Управление потоками и лейауты

function updateLayerActivity(enableH,enableM,enableL){
  const promiseList = [];
  pc.getTransceivers().forEach((tr) => {
    const params = tr.sender.getParameters();
    params.encodings[0].active = enableH;
    params.encodings[1].active = enableM;
    params.encodings[2].active = enableL;
    promiseList.push(tr.sender.setParameters(params));
  }
  return Promise.all(promiseList);
}

Renegotiation

Renegotiation

Renegotiation

Perfect negotiation

if (pc.signalingState !== 'stable') {
  Promise.all([
    pc.setLocalDescription({ type: 'rollback' }),
    pc.setRemoteDescription(description),
  ])
    .then(() => this.impl.createAnswer())
    .then((localSession) => {
    	ws.send(JSON.stringify(localSession));
    	pc.setLocalDescription(localSession);
  })
}

Объем трафика

const fullBitrate = 5000;
pc.getTransceivers().forEach(({ transceiver }) => {
  const params = transceiver.sender.getParameters();
  params.encodings[0].maxBitrate = fullBitrate * 1000;
  transceiver.sender.setParameters(params);
});

VAD и звук на 50+ человек

VAD и звук на 50+ человек

function notifyActive(ev){
    const id = ev.call.id();
    const message = {
        cmd:'srvVAD',
        from:id,
        content:ev.active,
        sessionId: sessionId+""
    }
    ws.send(JSON.stringify(message));
    nLast.update(ev.call.id());
}

call.addEventListener(CallEvents.MicStatusChange,notifyActive)

Хочу видеть не всех

  • Управление видимостью вручную

  • N-last

Хочу видеть не всех

switch (message.event) {
  case "showOnly":
    participant.manageEndpoint({[message.endpoint]:{video:['default']}});
    nLast.removeNlast(participant.id());
    break
  case "showAll":
    participant.manageEndpoint({'all':{video:['default']},'new':{video:['default']}});
    nLast.removeNlast(participant.id());
    break
  case "hideAll":
    participant.manageEndpoint({});
    nLast.removeNlast(participant.id());
    break
  case "nLast":
    nLast.setNlast(participant.id(),participant.manageEndpoint);
    break
}

"Плохой" WebRTC сигналинг

RTCPeerConnection

  • onconnectionstatechange

  • onsignalingstatechange

  • onicecandidate

  • oniceconnectionstatechange 

  • onicegatheringstatechange 

  • onidentityresult 

  • onnegotiationneeded

End to End Encryption

End to End Encryption

https://developers.chrome.com/origintrials/#/view_trial/731834939447705601

WebRTC Insertable Streams

End to End Encryption

WebCodecs

https://developers.chrome.com/origintrials/#/view_trial/-7811493553674125311

End to End Encryption

Demo

https://webrtc.github.io/samples/src/content/peerconnection/endtoend-encryption/

SVC (Scalable Video Coding)

SVC (Scalable Video Coding)

SVC (Scalable Video Coding)

Спасибо!

Вопросы?

Игорь Шеко

Front-end team lead

Voximplant

Made with Slides.com