index.html 2.2 KB

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