The simplest WebRTC you'll ever see

webrtc_peer1.html

<script>
let conn = new RTCPeerConnection()
let ch = conn.createDataChannel("channel")

function appendMessage(text) {
  let messages = document.getElementById("messages")
  let node = document.createElement("li");
  let textnode = document.createTextNode(text);
  node.appendChild(textnode);
  messages.appendChild(node);
}

ch.onmessage = m => {
  appendMessage(`< ${m.data}`)
}

ch.onopen = () => {
  appendMessage("Data channel opened")
}

ch.onclose = () => {
  appendMessage("Data channel closed")
}

conn.createOffer()
  .then(o => {
    document.getElementById("offer").innerText = JSON.stringify(o)
    conn.setLocalDescription(o)
  })
  .then(() => console.log("offer made"))

function connect() {
  conn.setRemoteDescription(JSON.parse(document.getElementById("answer").value))
    .then(() => console.log("Remote description set"))
    .catch(e => console.error(`Failed to set remote description: ${e}`))
}

function sendMessage() {
  if (ch.readyState !== "open") {
    alert("Data channel is not open, have you connected yet?")
    return
  }

  const msg = document.getElementById("msg_box").value
  ch.send(msg)
  appendMessage(`> ${msg}`)

  document.getElementById("msg_box").value = ""
}
</script>

<!-- the design was never meant to be good, dont laugh at me using <br/>s -->

<ul id="messages"></ul>
Send message: <input type="text" id="msg_box"/><button onclick="sendMessage()">send</button>

<br/><br/>

Our offer:<br/>
<textarea id="offer" rows=10 readonly></textarea>

<br/><br/>

Other peer's answer:<br/>
<textarea id="answer" rows=10></textarea><button onclick="connect()">set</button>

webrtc_peer2.html

<script>
let ch = undefined
let conn = new RTCPeerConnection()

conn.onicecandidate = () => {
  // for some reason, the ans you get on `createAnswer()` doesn't work!??!?!
  document.getElementById("answer").value = JSON.stringify(conn.localDescription)
}

function appendMessage(text) {
  let messages = document.getElementById("messages")
  let node = document.createElement("li");
  let textnode = document.createTextNode(text);
  node.appendChild(textnode);
  messages.appendChild(node);
}

conn.ondatachannel = d => {
	ch = d.channel
	ch.onmessage = m => appendMessage(`< ${m.data}`)
	ch.onopen = () => appendMessage("Data channel opened")
	ch.onclose = () => appendMessage("Data channel closed")
}

function connect() {
  conn.setRemoteDescription(JSON.parse(document.getElementById("offer").value))
  	.then(() => console.log("Remote description set"))
    .then(() => conn.createAnswer())
    .then(ans => conn.setLocalDescription(ans))
    .then(() => console.log("answer made and set"))
}

function sendMessage() {
  if (ch.readyState !== "open") {
    alert("Data channel is not open, have you connected yet?")
    return
  }

  const msg = document.getElementById("msg_box").value
  ch.send(msg)
  appendMessage(`> ${msg}`)

  document.getElementById("msg_box").value = ""
}
</script>

<!-- the design was never meant to be good, dont laugh at me using <br/>s -->

<ul id="messages"></ul>
Send message: <input type="text" id="msg_box"/><button onclick="sendMessage()">send</button>

<br/><br/>

Other peer's offer:<br/>
<textarea id="offer" rows=10></textarea><button onclick="connect()">set</button>

<br/><br/>

Our answer:<br/>
<textarea id="answer" rows=10 readonly></textarea>