index.html 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. <html>
  2. <!--
  3. SPDX-FileCopyrightText: 2023 The Pion community <https://pion.ly>
  4. SPDX-License-Identifier: MIT
  5. -->
  6. <head>
  7. <title>ice-tcp</title>
  8. </head>
  9. <body>
  10. <h1>ICE TCP</h1>
  11. <h3> ICE Connection States </h3>
  12. <div id="iceConnectionStates"></div> <br />
  13. <h3> Inbound DataChannel Messages </h3>
  14. <div id="inboundDataChannelMessages"></div>
  15. </body>
  16. <script>
  17. let pc = new RTCPeerConnection()
  18. let dc = pc.createDataChannel('data')
  19. dc.onmessage = event => {
  20. let el = document.createElement('p')
  21. el.appendChild(document.createTextNode(event.data))
  22. document.getElementById('inboundDataChannelMessages').appendChild(el);
  23. }
  24. pc.oniceconnectionstatechange = () => {
  25. let el = document.createElement('p')
  26. el.appendChild(document.createTextNode(pc.iceConnectionState))
  27. document.getElementById('iceConnectionStates').appendChild(el);
  28. }
  29. pc.createOffer()
  30. .then(offer => {
  31. pc.setLocalDescription(offer)
  32. return fetch(`/doSignaling`, {
  33. method: 'post',
  34. headers: {
  35. 'Accept': 'application/json, text/plain, */*',
  36. 'Content-Type': 'application/json'
  37. },
  38. body: JSON.stringify(offer)
  39. })
  40. })
  41. .then(res => res.json())
  42. .then(res => {
  43. pc.setRemoteDescription(res)
  44. })
  45. .catch(alert)
  46. </script>
  47. </html>