mirror of
https://github.com/pion/webrtc.git
synced 2025-10-04 23:02:48 +08:00
70 lines
1.6 KiB
HTML
70 lines
1.6 KiB
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>
|