|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>trickle-ice</title>
|
|
|
|
|
<!-- <script src="index.js"></script> -->
|
|
|
|
|
<script>
|
|
|
|
|
window.globaltuber = {
|
|
|
|
|
peerConnection: new RTCPeerConnection({
|
|
|
|
|
iceServers: [
|
|
|
|
|
{
|
|
|
|
|
urls: 'stun:stun.l.google.com:19302'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}),
|
|
|
|
|
signaling: {},
|
|
|
|
|
};
|
|
|
|
|
(function(tuber, undefined){
|
|
|
|
|
|
|
|
|
|
const isHTTPS = window.location.protocol.indexOf("https") == 0;
|
|
|
|
|
const socket = new WebSocket(`${isHTTPS ? "wss" : "ws"}://${window.location.host}/tuber-websocket`)
|
|
|
|
|
tuber.signaling.sendQueue = [];
|
|
|
|
|
tuber.signaling.socketOpen = false;
|
|
|
|
|
tuber.signaling.send = (message) => {
|
|
|
|
|
if(tuber.signaling.socketOpen) {
|
|
|
|
|
socket.send(message);
|
|
|
|
|
} else {
|
|
|
|
|
tuber.signaling.sendQueue.push(message);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
socket.onopen = () => {
|
|
|
|
|
tuber.signaling.socketOpen = true;
|
|
|
|
|
tuber.signaling.sendQueue.forEach(message => {
|
|
|
|
|
socket.send(message);
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
tuber.addIceCandidate = (candidate) => {
|
|
|
|
|
tuber.peerConnection.addIceCandidate(candidate);
|
|
|
|
|
};
|
|
|
|
|
tuber.setRemoteDescription = (sessionDescription) => {
|
|
|
|
|
tuber.peerConnection.setRemoteDescription(sessionDescription);
|
|
|
|
|
|
|
|
|
|
tuber.peerConnection.createAnswer().then(answer => {
|
|
|
|
|
tuber.peerConnection.setLocalDescription(answer)
|
|
|
|
|
tuber.signaling.send(JSON.stringify(answer))
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
tuber.peerConnection.onicecandidate = event => {
|
|
|
|
|
if (event.candidate && event.candidate.candidate !== "") {
|
|
|
|
|
socket.send(JSON.stringify(event.candidate))
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
tuber.peerConnection.oniceconnectionstatechange = () => {
|
|
|
|
|
let el = document.createElement('p')
|
|
|
|
|
el.appendChild(document.createTextNode(tuber.peerConnection.iceConnectionState))
|
|
|
|
|
|
|
|
|
|
document.getElementById('iceConnectionStates').appendChild(el);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
})(window.globaltuber);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<h3> ICE Connection States </h3>
|
|
|
|
|
<div id="iceConnectionStates"></div> <br /><hr/>
|
|
|
|
|
|
|
|
|
|
<h3> Inbound DataChannel Messages </h3>
|
|
|
|
|
<div id="inboundDataChannelMessages"></div> <br /><hr/>
|
|
|
|
|
|
|
|
|
|
<h3> debug Messages </h3>
|
|
|
|
|
<div id="debugMessages"></div>
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// const isHTTPS = window.location.protocol.indexOf("https") == 0;
|
|
|
|
|
// const socket = new WebSocket(`${isHTTPS ? "wss" : "ws"}://${window.location.host}/websocket`)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// socket.onmessage = event => {
|
|
|
|
|
// let msg = JSON.parse(event.data)
|
|
|
|
|
// if (!msg) {
|
|
|
|
|
// return console.log('failed to parse msg')
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// let el = document.createElement('p')
|
|
|
|
|
// el.appendChild(document.createTextNode(event.data))
|
|
|
|
|
|
|
|
|
|
// document.getElementById('debugMessages').appendChild(el);
|
|
|
|
|
|
|
|
|
|
// if (msg.candidate) {
|
|
|
|
|
// pc.addIceCandidate(msg)
|
|
|
|
|
// } else {
|
|
|
|
|
// pc.setRemoteDescription(msg)
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// let dc = pc.createDataChannel('data');
|
|
|
|
|
// dc.onopen = event => {
|
|
|
|
|
// dc.send("client connected!");
|
|
|
|
|
// }
|
|
|
|
|
// dc.onmessage = event => {
|
|
|
|
|
// let el = document.createElement('p')
|
|
|
|
|
// el.appendChild(document.createTextNode(event.data))
|
|
|
|
|
|
|
|
|
|
// document.getElementById('inboundDataChannelMessages').appendChild(el);
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// socket.onopen = () => {
|
|
|
|
|
// pc.createOffer().then(offer => {
|
|
|
|
|
// pc.setLocalDescription(offer)
|
|
|
|
|
// socket.send(JSON.stringify(offer))
|
|
|
|
|
// })
|
|
|
|
|
// }
|
|
|
|
|
</script>
|
|
|
|
|
</html>
|
