aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--README.md2
-rw-r--r--public/index.html9
-rw-r--r--public/style/logger.css47
-rw-r--r--public/style/master.css16
-rw-r--r--source/client/helper.ts3
-rw-r--r--source/client/local_user.ts1
-rw-r--r--source/client/logger.ts38
-rw-r--r--source/client/remote_user.ts14
-rw-r--r--source/client/rnnoise.ts6
-rw-r--r--source/client/user.ts7
-rw-r--r--source/server/room.ts2
11 files changed, 97 insertions, 48 deletions
diff --git a/README.md b/README.md
index 0e428cb..5da3720 100644
--- a/README.md
+++ b/README.md
@@ -13,7 +13,7 @@ Booleans can be either `1`, `true`, `yes` or their opposites.
| `username` | string | "guest" | Sets the username |
| `rnnoise` | boolean | true | Enables noise suppression with rnnoise |
| `audio_enabled` | boolean | false | Enables audio transmission by default |
-| `video_enabled` | boolean | false | Enables video transmission by default |
+| `camera_enabled` | boolean | false | Enables video transmission by default |
| `mic_gain` | number | 1 | Sets the microphone volume |
## Licence
diff --git a/public/index.html b/public/index.html
index 9817d6f..1ab2bee 100644
--- a/public/index.html
+++ b/public/index.html
@@ -8,14 +8,7 @@
<link rel="stylesheet" href="/style/master.css" />
<title>keks webrtc meeting</title>
- <style>
- * {
- margin: 0px;
- padding: 0px;
- }
- </style>
</head>
- <body>
- </body>
+ <body></body>
</html>
diff --git a/public/style/logger.css b/public/style/logger.css
new file mode 100644
index 0000000..77f0d41
--- /dev/null
+++ b/public/style/logger.css
@@ -0,0 +1,47 @@
+.logger-container {
+ position: absolute;
+ top: 0px;
+ right: 0px;
+ transition: width 1s;
+
+ background-color: rgba(0, 0, 0, 0.376);
+ border-radius: 0.2em;
+ border: 0px solid transparent;
+ padding: 0.2em;
+
+
+}
+
+.logger-line {
+ font-size: 1em;
+ height: 1.2em;
+
+ animation-name: appear, disappear;
+ animation-timing-function: linear, linear;
+ animation-delay: 0s, 3s;
+ animation-duration: 0.3s, 2s;
+ animation-fill-mode: forwards, forwards;
+}
+
+
+@keyframes appear {
+ from {
+ margin-top: -1.2em;
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+
+
+@keyframes disappear {
+ from {
+ opacity: 1;
+ }
+ to {
+ margin-top: -1.2em;
+ opacity: 0;
+ }
+}
diff --git a/public/style/master.css b/public/style/master.css
index 31c8eeb..89c0e4a 100644
--- a/public/style/master.css
+++ b/public/style/master.css
@@ -1,4 +1,5 @@
-@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;700&display=swap");
+@import url("https://s.metamuffin.org/static/font-ubuntu/include.css");
+@import url("./logger.css");
* {
font-family: "Ubuntu", sans-serif;
@@ -65,12 +66,9 @@ input[type="text"] {
.room {
width: 100%;
height: 100%;
- /* display: flex; */
- /* justify-content: center; */
}
.user {
- /* display: grid; */
background-color: var(--bg);
border: 0px soly transparent;
border-radius: 5px;
@@ -105,16 +103,6 @@ input[type="text"] {
border-radius: 5px;
}
-.media.maximized {
- position: absolute;
- top: 50vh;
- left: 50vw;
- width: 100vw;
- height: 100vh;
- z-index: 1000;
- transform: translate(-50%, -50%);
-}
-
.start-box {
position: absolute;
top: 50vh;
diff --git a/source/client/helper.ts b/source/client/helper.ts
index 9725091..37da7b9 100644
--- a/source/client/helper.ts
+++ b/source/client/helper.ts
@@ -4,7 +4,7 @@ import { parameters } from "./index.ts"
export function get_query_params(): { [key: string]: string } {
const q: { [key: string]: string } = {}
- for (const kv of window.location.search.substr(1).split("&")) {
+ for (const kv of window.location.search.substring(1).split("&")) {
const [key, value] = kv.split("=")
q[decodeURIComponent(key)] = decodeURIComponent(value)
}
@@ -16,7 +16,6 @@ export function hex_id(len = 8): string {
return Math.floor(Math.random() * 16 ** len).toString(16).padStart(len, "0")
}
-
export function parameter_bool(name: string, def: boolean): boolean {
const v = parameters[name]
if (!v) return def
diff --git a/source/client/local_user.ts b/source/client/local_user.ts
index 05b5578..ca91a19 100644
--- a/source/client/local_user.ts
+++ b/source/client/local_user.ts
@@ -19,6 +19,7 @@ export class LocalUser extends User {
this.local = true
this.create_controls()
this.add_initial_tracks()
+ log("usermodel", `added local user: ${this.name}`)
}
async add_initial_tracks() {
diff --git a/source/client/logger.ts b/source/client/logger.ts
index f4f4727..1f7139c 100644
--- a/source/client/logger.ts
+++ b/source/client/logger.ts
@@ -1,13 +1,16 @@
/// <reference lib="dom" />
-export type LogTag = "webrtc" | "ws" | "media" | "*" | "misc"
-const log_tag_color: { [key in LogTag]: string } = {
- "*": "#FF0000",
- webrtc: "#FF00FF",
- media: "#FFFF00",
- ws: "#00FFFF",
- misc: "#2222FF",
+const log_tag_color = {
+ "*": "#FF4444",
+ webrtc: "#FF44FF",
+ media: "#FFFF44",
+ ws: "#44FFFF",
+ rnnoise: "#2222FF",
+ usermodel: "#44FF44",
}
+export type LogTag = keyof typeof log_tag_color
+
+let logger_container: HTMLDivElement
// TODO maybe log time aswell
// deno-lint-ignore no-explicit-any
@@ -17,4 +20,25 @@ export function log(tag: LogTag, message: string, ...data: any[]) {
if (e instanceof MediaStreamTrack) data[i] = `(${e.kind}) ${e.id}`
}
console.log(`%c[${tag}] ${message}`, "color:" + log_tag_color[tag], ...data);
+
+ if (logger_container) {
+ const e = document.createElement("p")
+ e.classList.add("logger-line")
+ e.textContent = `[${tag}] ${message}`
+ e.style.color = log_tag_color[tag]
+ logger_container.append(e)
+ setTimeout(() => {
+ e.remove()
+ }, 6000)
+ }
}
+
+globalThis.addEventListener("load", () => {
+ const d = document.createElement("div")
+ d.classList.add("logger-container")
+ document.body.append(d)
+ logger_container = d
+
+ // clear the console every hour so logs dont accumulate
+ setInterval(() => console.clear(), 1000 * 60 * 60)
+})
diff --git a/source/client/remote_user.ts b/source/client/remote_user.ts
index bd2df1c..a0fdeaf 100644
--- a/source/client/remote_user.ts
+++ b/source/client/remote_user.ts
@@ -12,6 +12,7 @@ export class RemoteUser extends User {
constructor(room: Room, name: string) {
super(room, name)
+ log("usermodel", `added remote user: ${name}`)
this.peer = new RTCPeerConnection(servers)
this.peer.onicecandidate = ev => {
if (!ev.candidate) return
@@ -19,11 +20,11 @@ export class RemoteUser extends User {
}
this.peer.ontrack = ev => {
const t = ev.track
- log("media", "remote track", t)
+ log("media", `remote track: ${this.name}`, t)
this.add_track(new TrackHandle(t))
}
this.peer.onnegotiationneeded = async () => {
- log("webrtc", "negotiation needed")
+ log("webrtc", `negotiation needed: ${this.name}`)
while (this.negotiation_busy) {
await new Promise<void>(r => setTimeout(() => r(), 100))
}
@@ -36,12 +37,12 @@ export class RemoteUser extends User {
const offer_description = await this.peer.createOffer()
await this.peer.setLocalDescription(offer_description)
const offer = { type: offer_description.type, sdp: offer_description.sdp }
- log("webrtc", "sent offer", { a: offer })
+ log("webrtc", `sent offer: ${this.name}`, { a: offer })
this.room.websocket_send({ receiver: this.name, offer })
}
async on_offer(offer: RTCSessionDescriptionInit) {
this.negotiation_busy = true
- log("webrtc", "got offer", { a: offer })
+ log("webrtc", `got offer: ${this.name}`, { a: offer })
const offer_description = new RTCSessionDescription(offer)
await this.peer.setRemoteDescription(offer_description)
this.answer()
@@ -50,12 +51,12 @@ export class RemoteUser extends User {
const answer_description = await this.peer.createAnswer()
await this.peer.setLocalDescription(answer_description)
const answer = { type: answer_description.type, sdp: answer_description.sdp }
- log("webrtc", "sent answer", { a: answer })
+ log("webrtc", `sent answer: ${this.name}`, { a: answer })
this.room.websocket_send({ receiver: this.name, answer })
this.negotiation_busy = false
}
async on_answer(answer: RTCSessionDescriptionInit) {
- log("webrtc", "got answer", { a: answer })
+ log("webrtc", `got answer: ${this.name}`, { a: answer })
const answer_description = new RTCSessionDescription(answer)
await this.peer.setRemoteDescription(answer_description)
this.negotiation_busy = false
@@ -66,6 +67,7 @@ export class RemoteUser extends User {
}
leave() {
+ log("usermodel", `remove remote user: ${this.name}`)
this.peer.close()
this.room.el.removeChild(this.el)
}
diff --git a/source/client/rnnoise.ts b/source/client/rnnoise.ts
index 4c07bcb..71c73e6 100644
--- a/source/client/rnnoise.ts
+++ b/source/client/rnnoise.ts
@@ -15,13 +15,13 @@ declare global {
// TODO fix leak
export async function get_rnnoise_node(context: AudioContext): Promise<RNNoiseNode> {
- log("misc", "rnnoise enabled")
+ log("rnnoise", "enabled")
//@ts-ignore asfdasfd
let RNNoiseNode: typeof RNNoiseNode = window.RNNoiseNode;
let script: HTMLScriptElement;
if (!RNNoiseNode) {
- log("misc", "loading rnnoise...")
+ log("rnnoise", "loading wasm...")
script = document.createElement("script")
script.src = "/rnnoise/rnnoise-runtime.js"
script.defer = true
@@ -30,7 +30,7 @@ export async function get_rnnoise_node(context: AudioContext): Promise<RNNoiseNo
while (!window.RNNoiseNode) await new Promise<void>(r => setTimeout(() => r(), 100))
//@ts-ignore asfdsadfsafd
RNNoiseNode = window.RNNoiseNode;
- log("misc", "rnnoise loaded")
+ log("rnnoise", "loaded")
}
await RNNoiseNode.register(context)
diff --git a/source/client/user.ts b/source/client/user.ts
index 13b8545..bda875f 100644
--- a/source/client/user.ts
+++ b/source/client/user.ts
@@ -37,13 +37,6 @@ export abstract class User {
t.addEventListener("unmute", () => {
log("media", "track unmuted", t)
})
- //@ts-ignore a
- window.blub = t
- // setTimeout(() => {
- // console.log("ev");
- // t.dispatchEvent(new Event("ended"))
- // // t.dispatchEvent(new MediaStreamTrackEvent("ended", { track: t, bubbles: false, cancelable: true, composed: false }))
- // }, 5000)
}
setup_view() {
diff --git a/source/server/room.ts b/source/server/room.ts
index 34d847c..049a626 100644
--- a/source/server/room.ts
+++ b/source/server/room.ts
@@ -41,6 +41,8 @@ api.get("/signaling/:id", c => {
try { in_packet = JSON.parse(message) }
catch (_e) { return }
+ if (JSON.stringify(in_packet) == "{}") return // drop ping
+
console.log(`[${room_name}] ${user_name} -> ${in_packet.receiver ?? "*"}: ${message.substr(0, 100)}`)
const out_packet: SCPacket = { sender: user_name, data: in_packet }
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-10-08 19:09:24 +0000