Modern WebRTC remote call w/chat (source: https://jsfiddle.net/jamiesmith/Lcpk143y/)

fiddle.html

<video id="video1" height="120" width="160" autoplay muted></video>
<video id="video2" height="120" width="160" autoplay></video>

<br>

<button id="button" onclick="createOffer()">Offer:</button>

<textarea id="offer" placeholder="Paste offer here"></textarea>

<br> 

Answer: <textarea id="answer"></textarea>

<br>

<div id="div"></div>

Chat: <input id="chat" />

<br>

<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

fiddle.js

    const video1 = document.getElementById('video1')
    const video2 = document.getElementById('video2')
    const button = document.getElementById('button')

    const server = { urls: "stun:stun.l.google.com:19302" };

    const enterPressed = e => e.keyCode == 13
    const log = msg => div.innerHTML += `<p>${msg}</p>`

    const getMedia = navigator.mediaDevices.getUserMedia({video:true, audio:true})
        .then(stream => pc.addStream(video1.srcObject = stream)).catch(log)

    
    const pc = new RTCPeerConnection({ iceServers: [server] })
    pc.onaddstream = e => video2.srcObject = e.stream
    
    let dc // data channel
    pc.ondatachannel = e => dcInit(dc = e.channel)
    pc.oniceconnectionstatechange = e => log(pc.iceConnectionState)


    function dcInit() {

        dc.onopen = () => log("Chat!")
        dc.onmessage = e => log(e.data)
    }

    function createOffer() {
        
        button.disabled = true

        dcInit(dc = pc.createDataChannel("chat"));
        getMedia.then(() => pc.createOffer()).then(d => pc.setLocalDescription(d))
            .catch(log);
            
        pc.onicecandidate = e => {

            if(e.candidate){
                return
            }

            offer.value = pc.localDescription.sdp
            offer.select()
            answer.placeholder = 'Paste answer here'
        }
    }

    offer.onkeypress = e => {

        if (!enterPressed(e) || pc.signalingState != "stable"){
            return
        }

        button.disabled = true
        offer.disabled = true

        //const desc = new RTCSessionDescription({ type:"offer", sdp:offer.value })
        pc.setRemoteDescription(new RTCSessionDescription({ type:"offer", sdp:offer.value }))
            .then(() => pc.createAnswer()).then(d => pc.setLocalDescription(d))
            .catch(log)
        
        pc.onicecandidate = e => {

            if (e.candidate){
                return
            }

            answer.focus()
            answer.value = pc.localDescription.sdp
            answer.select()
        }
    }

    answer.onkeypress = e => {
        
        if(!enterPressed(e) || pc.signalingState != "have-local-offer"){
            return
        }

        answer.disabled = true;
        const desc = new RTCSessionDescription({ type:"answer", sdp:answer.value });
        pc.setRemoteDescription(new RTCSessionDescription({ type:"answer", sdp:answer.value }))
            .then(x => console.log(x))
            .catch(log)
    }

    chat.onkeypress = e => {
        
        if (!enterPressed(e)){
            return
        }

        dc.send(chat.value)
        log(chat.value)
        chat.value = ''
    }