github.com/pion/webrtc/v4@v4.0.1/examples/ice-restart/index.html (about)

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