keks-meet

From e590ea788aefe0714bb9ce24976303566a648d42 Mon Sep 17 00:00:00 2001 From: metamuffin Date: Fri, 9 Sep 2022 12:45:37 +0200 Subject: reworked websocket stuff with encryption and new spec --- client-web/public/app.html | 32 +++++++++++---------- client-web/public/assets/style/master.css | 4 +-- client-web/public/start.html | 24 +++++++++------- client-web/source/index.ts | 2 +- client-web/source/local_user.ts | 4 +-- client-web/source/protocol/mod.ts | 46 +++++++++++++++++++++++++++++-- client-web/source/remote_user.ts | 12 ++++---- client-web/source/rnnoise.ts | 2 +- client-web/source/room.ts | 46 ++++++++++++------------------- client-web/source/user.ts | 13 +++++---- 10 files changed, 113 insertions(+), 72 deletions(-) (limited to 'client-web') diff --git a/client-web/public/app.html b/client-web/public/app.html index 493796f..693e9a2 100644 --- a/client-web/public/app.html +++ b/client-web/public/app.html @@ -1,20 +1,24 @@ - - - + + + - - + + - keks-meet - + keks-meet + - -

- keks-meet needs evil javascript to be enabled. Don't be afraid though, all - the code is free (AGPL-3.0-only)! Look at it on - codeberg -

- + +

+ keks-meet needs evil javascript to be enabled. Don't be afraid + though, all the code is free (AGPL-3.0-only)! Look at it on + codeberg +

+ If you have JS enabled, check the browser console to see if + something else failed +

+ diff --git a/client-web/public/assets/style/master.css b/client-web/public/assets/style/master.css index 0b9e205..8a22d1b 100644 --- a/client-web/public/assets/style/master.css +++ b/client-web/public/assets/style/master.css @@ -10,8 +10,8 @@ } :root { - --bg: #263238; - --bg-dark: #000a12; + --bg: #212121; + --bg-dark: #070707; --bg-light: #354b58; --bg-lighter: #4f5b62; --bg-disabled: #720000; diff --git a/client-web/public/start.html b/client-web/public/start.html index 4a04174..db62bcf 100644 --- a/client-web/public/start.html +++ b/client-web/public/start.html @@ -18,8 +18,9 @@ the third version of the GNU Affero General Public Licence only.

- To get started, just enter a unique idenfier, click 'Join', then - share the URL with your partner. + To get started, click 'Join' and share the URL with your + partner. You can also optionally customize the url by entering a + secure/unguessable(!!!) identifier below.

{ this.key = await crypto_seeded_key(room) @@ -14,10 +18,48 @@ export class SignalingConnection { log("ws", "connecting…") const ws_url = new URL(`${window.location.protocol.endsWith("s:") ? "wss" : "ws"}://${window.location.host}/signaling/${encodeURIComponent(this.signaling_id)}`) this.websocket = new WebSocket(ws_url) - await new Promise(r => this.websocket!.onopen = r) + this.websocket.onerror = () => this.on_error() + this.websocket.onmessage = e => { + if (typeof e.data == "string") this.on_message(e.data) + } + await new Promise(r => this.websocket!.onopen = () => { + this.on_open() + r() + }) log("ws", "connection opened") return this } + on_close() { + log("ws", "websocket closed"); + setTimeout(() => { + window.location.reload() + }, 1000) + } + on_open() { + log("ws", "websocket opened"); + setInterval(() => this.send_control({ ping: null }), 30000) // stupid workaround for nginx disconnecting inactive connections + } + on_error() { + log("error", "websocket error occurred!") + } + async on_message(data: string) { + const packet: ClientboundPacket = JSON.parse(data) // TODO dont crash if invalid + this.control_handler(packet) + if (packet.message) { + const inner_json = await crypt_decrypt(this.key, packet.message.message) + const inner: RelayMessage = JSON.parse(inner_json) // TODO make sure that protocol spec is met + this.relay_handler(packet.message.sender, inner) + } + } + send_control(data: ServerboundPacket) { + log("ws", `-> ${data.relay?.recipient ?? "*"}`, data) + this.websocket.send(JSON.stringify(data)) + } + async send_relay(data: RelayMessage, recipient?: number | null) { + recipient ??= undefined // null -> undefined + const message = await crypto_encrypt(this.key, JSON.stringify(data)) + this.send_control({ relay: { recipient, message } }) + } } diff --git a/client-web/source/remote_user.ts b/client-web/source/remote_user.ts index 6cc57a5..5283a7b 100644 --- a/client-web/source/remote_user.ts +++ b/client-web/source/remote_user.ts @@ -10,13 +10,13 @@ export class RemoteUser extends User { peer: RTCPeerConnection negotiation_busy = false - constructor(room: Room, id: number, name: string) { - super(room, id, name) - log("usermodel", `added remote user: ${id} ${JSON.stringify(name)}`) + constructor(room: Room, id: number) { + super(room, id) + log("usermodel", `added remote user: ${id}`) this.peer = new RTCPeerConnection(servers) this.peer.onicecandidate = ev => { if (!ev.candidate) return - room.websocket_send({ relay: { recipient: this.id, message: { ice_candidate: ev.candidate.toJSON() } } }) + room.signaling.send_relay({ ice_candidate: ev.candidate.toJSON() }, this.id) } this.peer.ontrack = ev => { const t = ev.track @@ -38,7 +38,7 @@ export class RemoteUser extends User { await this.peer.setLocalDescription(offer_description) const offer = { type: offer_description.type, sdp: offer_description.sdp } log("webrtc", `sent offer: ${this.name}`, { a: offer }) - this.room.websocket_send({ relay: { recipient: this.id, message: { offer } } }) + this.room.signaling.send_relay({ offer }, this.id) } async on_offer(offer: RTCSessionDescriptionInit) { this.negotiation_busy = true @@ -52,7 +52,7 @@ export class RemoteUser extends User { await this.peer.setLocalDescription(answer_description) const answer = { type: answer_description.type, sdp: answer_description.sdp } log("webrtc", `sent answer: ${this.name}`, { a: answer }) - this.room.websocket_send({ relay: { recipient: this.id, message: { answer } } }) + this.room.signaling.send_relay({ answer }, this.id) this.negotiation_busy = false } async on_answer(answer: RTCSessionDescriptionInit) { diff --git a/client-web/source/rnnoise.ts b/client-web/source/rnnoise.ts index d6efb3b..2e0f857 100644 --- a/client-web/source/rnnoise.ts +++ b/client-web/source/rnnoise.ts @@ -23,7 +23,7 @@ export async function get_rnnoise_node(context: AudioContext): Promise ${data.relay?.recipient ?? "*"}`, data) - // this.websocket.send(JSON.stringify(data)) - } - websocket_message(packet: ClientboundPacket) { - log("ws", `<- ${packet.message?.sender ?? "control packet"}: `, packet); + control_handler(packet: ClientboundPacket) { + if (packet.message) return // let the relay handler do that + log("ws", `<- [control packet]: `, packet); if (packet.init) { this.my_id = packet.init.your_id // no need to check compat for now because this is hosted in the same place @@ -33,9 +32,9 @@ export class Room { const p = packet.client_join log("*", `${p.id} joined`); if (p.id == this.my_id) { - this.local_user = new LocalUser(this, p.id, p.name); + this.local_user = new LocalUser(this, p.id); } else { - const ru = new RemoteUser(this, p.id, p.name) + const ru = new RemoteUser(this, p.id) this.local_user.add_initial_to_remote(ru) ru.offer() this.users.set(p.id, ru) @@ -48,26 +47,17 @@ export class Room { this.users.delete(p.id) this.remote_users.delete(p.id) return - } else if (packet.message) { - const p = packet.message; - const sender = this.users.get(p.sender) - if (sender instanceof RemoteUser) { - // if (p.message.ice_candidate) sender.add_ice_candidate(p.message.ice_candidate) - // if (p.message.offer) sender.on_offer(p.message.offer) - // if (p.message.answer) sender.on_answer(p.message.answer) - } else { - console.log("!", p, sender); - } } + } - websocket_close() { - log("ws", "websocket closed"); - setTimeout(() => { - window.location.reload() - }, 1000) - } - websocket_open() { - log("ws", "websocket opened"); - setInterval(() => this.websocket_send({ ping: null }), 30000) // stupid workaround for nginx disconnecting inactive connections + relay_handler(sender_id: number, message: RelayMessage) { + const sender = this.users.get(sender_id) + if (sender instanceof RemoteUser) { + if (message.ice_candidate) sender.add_ice_candidate(message.ice_candidate) + if (message.offer) sender.on_offer(message.offer) + if (message.answer) sender.on_answer(message.answer) + } else { + console.log("!", message, sender); + } } } \ No newline at end of file diff --git a/client-web/source/user.ts b/client-web/source/user.ts index dbf2862..057cdf4 100644 --- a/client-web/source/user.ts +++ b/client-web/source/user.ts @@ -6,13 +6,12 @@ import { TrackHandle } from "./track_handle.ts"; export abstract class User { - el: HTMLElement - - local = false - + protected el: HTMLElement + public local = false + public name?: string protected tracks: Set = new Set() - constructor(public room: Room, public id: number, public name: string) { + constructor(public room: Room, public id: number,) { this.el = document.createElement("div") this.el.classList.add("user") this.room.el.append(this.el) @@ -34,11 +33,13 @@ export abstract class User { }) } + get display_name() { return this.name ?? `guest (${this.id})` } + setup_view() { const info_el = document.createElement("div") info_el.classList.add("info") const name_el = document.createElement("span") - name_el.textContent = this.name + name_el.textContent = this.display_name name_el.classList.add("name") info_el.append(name_el) this.el.append(info_el) -- cgit v1.2.3-70-g09d2