brecert/compact.html

## readme.md

      
    Raw
  

              readme.md
            
          
## compact.html
data:text/html,<body id=B style=display:grid;place-items:center;white-space:pre-line><input id=O type=button value=click_to_start><input id=A placeholder=paste_shared_token><script>D="Description",L="ocal"+D,J=JSON,S=J.stringify,P=J.parse,p=new RTCPeerConnection({iceServers:[{urls:"stun:stun.stunprotocol.org:3478"}]}),C=e=>{W=e=>B.append(e+"\n"),e.onopen=n=>{W`Connected!`,O.value="Send",A.placeholder="Type a message",A.value="",A.oninput=null,R=n=>{v=A.value,W("you:"+v),e.send(v),A.value=""},A.onkeydown=e=>{"Enter"==e.key&&R()},O.onclick=e=>R()},e.onmessage=e=>W("them:"+e.data)},U=e=>p["create"+e]().then(()=>p["setL"+L]()),U=async e=>p["setL"+L](await p["create"+e]()),O.onclick=e=>{C(p.createDataChannel(L)),U`Offer`},A.oninput=async e=>{p.ondatachannel=e=>C(e.channel),v=P(A.value),await p["setRemote"+D](v),"offer"==v.type&&U`Answer`},p.onicecandidate=e=>e.candidate&&p["l"+L]&&(A.value=S(p["l"+L]))</script></body>

## long.js
const tokenInput = document.getElementById('tokenInput')
const button = document.getElementById('button')
const messages = document.getElementById('messages')

const conn = new RTCPeerConnection({ iceServers: [{ urls: "stun:stun.stunprotocol.org:3478" }] })
const create = async e => conn.setLocalDescription(await conn["create" + e]())

/**
 * @param {RTCDataChannel} channel
 */
const createPeerChannelInstance = channel => {
    const write = msg => {
        const node = document.createElement('article')
        node.textContent = msg
        messages.append(node)
    }

    const sendMessage = n => {
        const val = tokenInput.value
        write("you:" + val)
        channel.send(val)
        tokenInput.value = ""
    }

    channel.onopen = n => {
        write`Connected!`
        button.value = "Send"
        tokenInput.placeholder = "Type a message"
        tokenInput.value = ""
        tokenInput.oninput = null

        tokenInput.onkeydown = e => {
            if (e.key === "Enter") sendMessage()
        }

        button.onclick = e => sendMessage()
    }

    channel.onmessage = e => write("them:" + e.data)
}

button.onclick = e => {
    createPeerChannelInstance(conn.createDataChannel("chat"))
    create`Offer`
}

tokenInput.oninput = async e => {
    conn.ondatachannel = e => {
        createPeerChannelInstance(e.channel)
    }

    const val = JSON.parse(tokenInput.value)
    await conn.setRemoteDescription(val)
    if (val.type === "offer") {
        create`Answer`
    }
}

conn.onicecandidate = e => {
    if (e.candidate && conn.localDescription) {
        tokenInput.value = JSON.stringify(conn.localDescription)
    }
}

## names(outdated?).txt
  type mode = 'Offer' | 'Answer'

  where
    p = peerConnection
    c = peerChannel

  where
    O = createOffer (element)
    A = createAnswer (element)
    U = create[mode]
    C = createPeerChannelInstance
    J = JSON
    S = JSON.stringify
    D = 'Description'
    L = 'ocalDescription'
    W = write
    B = body
    R = Reset

## tinywebrtc.html
<body id=B style=display:grid;place-items:center;white-space:pre-line><input id=O type=button value=click_to_start><input id=A placeholder=paste_shared_token><script>
D="Description"
L="ocal"+D
J=JSON
S=J.stringify
P=J.parse
p=new RTCPeerConnection({iceServers:[{urls:"stun:stun.stunprotocol.org:3478"}]})
C=e=>{W=e=>B.append(e+"\n")
e.onopen=n=>{W`Connected!`
O.value="Send"
A.placeholder="Type a message",A.value=""
A.oninput=null,R=n=>{v=A.value,W("you:"+v)
e.send(v),A.value=""}
A.onkeydown=e=>{"Enter"==e.key&&R()},O.onclick=e=>R()}
e.onmessage=e=>W("them:"+e.data)}
U=e=>p["create"+e]().then(()=>p["setL"+L]())
U=async e=>p["setL"+L](await p["create"+e]())
O.onclick=e=>{C(p.createDataChannel(L)),U`Offer`}
A.oninput=async e=>{p.ondatachannel=e=>C(e.channel),v=P(A.value)
await p["setRemote"+D](v)
"offer"==v.type&&U`Answer`}
p.onicecandidate=e=>e.candidate&&p["l"+L]&&(A.value=S(p["l"+L]))
</script></body>
	const tokenInput = document.getElementById('tokenInput')
	const button = document.getElementById('button')
	const messages = document.getElementById('messages')

	const conn = new RTCPeerConnection({ iceServers: [{ urls: "stun:stun.stunprotocol.org:3478" }] })
	const create = async e => conn.setLocalDescription(await conn["create" + e]())

	/**
	* @param {RTCDataChannel} channel
	*/
	const createPeerChannelInstance = channel => {
	const write = msg => {
	const node = document.createElement('article')
	node.textContent = msg
	messages.append(node)
	}

	const sendMessage = n => {
	const val = tokenInput.value
	write("you:" + val)
	channel.send(val)
	tokenInput.value = ""
	}

	channel.onopen = n => {
	write`Connected!`
	button.value = "Send"
	tokenInput.placeholder = "Type a message"
	tokenInput.value = ""
	tokenInput.oninput = null

	tokenInput.onkeydown = e => {
	if (e.key === "Enter") sendMessage()
	}

	button.onclick = e => sendMessage()
	}

	channel.onmessage = e => write("them:" + e.data)
	}

	button.onclick = e => {
	createPeerChannelInstance(conn.createDataChannel("chat"))
	create`Offer`
	}

	tokenInput.oninput = async e => {
	conn.ondatachannel = e => {
	createPeerChannelInstance(e.channel)
	}

	const val = JSON.parse(tokenInput.value)
	await conn.setRemoteDescription(val)
	if (val.type === "offer") {
	create`Answer`
	}
	}

	conn.onicecandidate = e => {
	if (e.candidate && conn.localDescription) {
	tokenInput.value = JSON.stringify(conn.localDescription)
	}
	}
	type mode = 'Offer' \| 'Answer'

	where
	p = peerConnection
	c = peerChannel

	where
	O = createOffer (element)
	A = createAnswer (element)
	U = create[mode]
	C = createPeerChannelInstance
	J = JSON
	S = JSON.stringify
	D = 'Description'
	L = 'ocalDescription'
	W = write
	B = body
	R = Reset
	<body id=B style=display:grid;place-items:center;white-space:pre-line><input id=O type=button value=click_to_start><input id=A placeholder=paste_shared_token><script>
	D="Description"
	L="ocal"+D
	J=JSON
	S=J.stringify
	P=J.parse
	p=new RTCPeerConnection({iceServers:[{urls:"stun:stun.stunprotocol.org:3478"}]})
	C=e=>{W=e=>B.append(e+"\n")
	e.onopen=n=>{W`Connected!`
	O.value="Send"
	A.placeholder="Type a message",A.value=""
	A.oninput=null,R=n=>{v=A.value,W("you:"+v)
	e.send(v),A.value=""}
	A.onkeydown=e=>{"Enter"==e.key&&R()},O.onclick=e=>R()}
	e.onmessage=e=>W("them:"+e.data)}
	U=e=>p["create"+e]().then(()=>p["setL"+L]())
	U=async e=>p["setL"+L](await p["create"+e]())
	O.onclick=e=>{C(p.createDataChannel(L)),U`Offer`}
	A.oninput=async e=>{p.ondatachannel=e=>C(e.channel),v=P(A.value)
	await p["setRemote"+D](v)
	"offer"==v.type&&U`Answer`}
	p.onicecandidate=e=>e.candidate&&p["l"+L]&&(A.value=S(p["l"+L]))
	</script></body>