| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869 |
- <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>
|