github.com/pion/webrtc/v3@v3.2.24/examples/trickle-ice/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>trickle-ice</title>
     8    </head>
     9  
    10    <body>
    11      <h3> ICE Connection States </h3>
    12      <div id="iceConnectionStates"></div> <br />
    13  
    14      <h3> Inbound DataChannel Messages </h3>
    15      <div id="inboundDataChannelMessages"></div>
    16    </body>
    17  
    18    <script>
    19      const socket = new WebSocket(`ws://${window.location.host}/websocket`)
    20      let pc = new RTCPeerConnection({
    21        iceServers: [
    22          {
    23            urls: 'stun:stun.l.google.com:19302'
    24          }
    25        ]
    26      })
    27  
    28      socket.onmessage = e => {
    29        let msg = JSON.parse(e.data)
    30        if (!msg) {
    31          return console.log('failed to parse msg')
    32        }
    33  
    34        if (msg.candidate) {
    35          pc.addIceCandidate(msg)
    36        } else {
    37          pc.setRemoteDescription(msg)
    38        }
    39      }
    40  
    41      let dc = pc.createDataChannel('data')
    42      dc.onmessage = event => {
    43        let el = document.createElement('p')
    44        el.appendChild(document.createTextNode(event.data))
    45  
    46        document.getElementById('inboundDataChannelMessages').appendChild(el);
    47      }
    48  
    49      pc.onicecandidate = e => {
    50        if (e.candidate && e.candidate.candidate !== "") {
    51          socket.send(JSON.stringify(e.candidate))
    52        }
    53      }
    54  
    55      pc.oniceconnectionstatechange = () => {
    56        let el = document.createElement('p')
    57        el.appendChild(document.createTextNode(pc.iceConnectionState))
    58  
    59        document.getElementById('iceConnectionStates').appendChild(el);
    60      }
    61  
    62      socket.onopen = () => {
    63        pc.createOffer().then(offer => {
    64          pc.setLocalDescription(offer)
    65          socket.send(JSON.stringify(offer))
    66        })
    67      }
    68    </script>
    69  </html>