examples/trickle-ice/index.html

<html>
  <!--
		SPDX-FileCopyrightText: 2023 The Pion community <https://pion.ly>
		SPDX-License-Identifier: MIT
	-->
  <head>
    <title>trickle-ice</title>
  </head>

  <body>
    <h3> ICE Connection States </h3>
    <div id="iceConnectionStates"></div> <br />

    <h3> Inbound DataChannel Messages </h3>
    <div id="inboundDataChannelMessages"></div>
  </body>

  <script>
    const socket = new WebSocket(`ws://${window.location.host}/websocket`)
    let pc = new RTCPeerConnection({
      iceServers: [
        {
          urls: 'stun:stun.l.google.com:19302'
        }
      ]
    })

    socket.onmessage = e => {
      let msg = JSON.parse(e.data)
      if (!msg) {
        return console.log('failed to parse msg')
      }

      if (msg.candidate) {
        pc.addIceCandidate(msg)
      } else {
        pc.setRemoteDescription(msg)
      }
    }

    let dc = pc.createDataChannel('data')
    dc.onmessage = event => {
      let el = document.createElement('p')
      el.appendChild(document.createTextNode(event.data))

      document.getElementById('inboundDataChannelMessages').appendChild(el);
    }

    pc.onicecandidate = e => {
      if (e.candidate && e.candidate.candidate !== "") {
        socket.send(JSON.stringify(e.candidate))
      }
    }

    pc.oniceconnectionstatechange = () => {
      let el = document.createElement('p')
      el.appendChild(document.createTextNode(pc.iceConnectionState))

      document.getElementById('iceConnectionStates').appendChild(el);
    }

    socket.onopen = () => {
      pc.createOffer().then(offer => {
        pc.setLocalDescription(offer)
        socket.send(JSON.stringify(offer))
      })
    }
  </script>
</html>