1<html>
2  <head>
3    <title>ice-restart</title>
4  </head>
5
6  <body>
7    <button onclick="window.doSignaling(true)"> ICE Restart </button><br />
8
9
10    <h3> ICE Connection States </h3>
11    <div id="iceConnectionStates"></div> <br />
12
13    <h3> ICE Selected Pairs </h3>
14    <div id="iceSelectedPairs"></div> <br />
15
16    <h3> Inbound DataChannel Messages </h3>
17    <div id="inboundDataChannelMessages"></div>
18  </body>
19
20  <script>
21    let pc = new RTCPeerConnection({
22      iceServers: [
23        {
24          urls: 'stun:stun.l.google.com:19302'
25        }
26      ]
27    })
28    let dc = pc.createDataChannel('data')
29
30    dc.onopen = () => {
31      setInterval(function() {
32        let el = document.createElement('template')
33        let selectedPair = pc.sctp.transport.iceTransport.getSelectedCandidatePair()
34
35        el.innerHTML = `<div>
36          <ul>
37             <li> <i> Local</i> - ${selectedPair.local.candidate}</li>
38             <li> <i> Remote</i> - ${selectedPair.remote.candidate} </li>
39          </ul>
40        </div>`
41
42        document.getElementById('iceSelectedPairs').appendChild(el.content.firstChild);
43      }, 3000);
44    }
45
46    dc.onmessage = event => {
47      let el = document.createElement('p')
48      el.appendChild(document.createTextNode(event.data))
49
50      document.getElementById('inboundDataChannelMessages').appendChild(el);
51    }
52
53    pc.oniceconnectionstatechange = () => {
54      let el = document.createElement('p')
55      el.appendChild(document.createTextNode(pc.iceConnectionState))
56
57      document.getElementById('iceConnectionStates').appendChild(el);
58    }
59
60
61    window.doSignaling = iceRestart => {
62      pc.createOffer({iceRestart})
63        .then(offer => {
64          pc.setLocalDescription(offer)
65
66          return fetch(`/doSignaling`, {
67            method: 'post',
68            headers: {
69              'Accept': 'application/json, text/plain, */*',
70              'Content-Type': 'application/json'
71            },
72            body: JSON.stringify(offer)
73          })
74        })
75        .then(res => res.json())
76        .then(res => pc.setRemoteDescription(res))
77        .catch(alert)
78    }
79
80    window.doSignaling(false)
81  </script>
82</html>
83