libdatachannel/web-client/script.js

(function (){
    console.log('Hello');
    const connectButton = document.getElementById('createConnectionBtn')
    connectButton.addEventListener('click', createConnection, false)
})();

function createConnection() {
    const localConnection = new RTCPeerConnection();
    const sendChannel = localConnection.createDataChannel('channel');
    console.dir(sendChannel);
    sendChannel.onopen = e => {
        console.log('open')
        console.log(e)
    }
    sendChannel.onclose = e => {
        console.log('close')
        console.log(e)
    }
    const connectionInfo = {};
    localConnection.onicecandidate = e => {
        if (e.candidate) {
            const candidate = e.candidate.candidate;
            connectionInfo.candidate = candidate;
            const answererUrl = 'http://localhost:8080/answerer.html?connection=' + btoa(JSON.stringify(connectionInfo));
            const createLink = document.createElement('a');
            createLink.setAttribute('href', answererUrl);
            createLink.setAttribute('target', 'new');
            createLink.append('Open me ;)');
            document.body.append(createLink);
            const pollForConnection = setInterval(() => {
                fetch(
                    'http://localhost:8000/state/json'
                ).then(response => {
                    if (response.status !== 200) {
                        throw new Error('bad status ' + response.status);
                    }
                    return response.json();
                }).then(data => {
                    if (data.description) {
                        console.log('yes');
                        clearInterval(pollForConnection);
                        createRemoteConnection(data.description);
                    }
                    else {
                        console.log('no');
                    }
                })
            }, 5000)
        }
    }
    localConnection.onicecandidateerror = err => {
        console.log(err)
    }
    
    localConnection.createOffer().then((desc) => {
            connectionInfo.description = desc.sdp;
            localConnection.setLocalDescription(desc);
        }
    )

    function createRemoteConnection(desc) {
        const remoteDesc = {
            type: "answer",
            sdp: desc
        }
        localConnection.setRemoteDescription(remoteDesc).then((e) => {
            console.log(e)
        });
    }

    const sendButton = document.getElementById('sendDataBtn')
    sendButton.addEventListener('click', sendMessage, false)
    function sendMessage() {
        const messageText = document.getElementById('sendData').value;
        sendChannel.send(messageText);   
    }
    sendChannel.onmessage = (msg) => {
        document.body.append(msg.data);
    }
}