From ac68f06d230fd589edb9b1d13af50836d554f23e Mon Sep 17 00:00:00 2001 From: metamuffin Date: Sun, 25 Dec 2022 13:53:26 +0100 Subject: optimize accessability (screen readers 'n stuff) --- client-web/source/preferences/ui.ts | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) (limited to 'client-web/source/preferences') diff --git a/client-web/source/preferences/ui.ts b/client-web/source/preferences/ui.ts index bc0d123..2b1d0c7 100644 --- a/client-web/source/preferences/ui.ts +++ b/client-web/source/preferences/ui.ts @@ -5,7 +5,7 @@ */ /// -import { ebr, ebutton, ediv, elabel, espan, etd, etr, OverlayUi } from "../helper.ts"; +import { ebr, ebutton, ediv, eh2, elabel, espan, etd, etr, OverlayUi } from "../helper.ts"; import { PREF_DECLS } from "./decl.ts"; import { change_pref, on_pref_changed, PrefDecl, PREFS } from "./mod.ts"; @@ -65,7 +65,7 @@ export class PrefUi extends OverlayUi { if (decl.default === undefined || decl.optional) { const use_opt = document.createElement("input") use_opt.type = "checkbox" - use_opt.id = id + use_opt.id = "enable-" + id use_opt.checked = PREFS[key] !== undefined if (prim_control) prim_control.disabled = !use_opt.checked use_opt.onchange = () => { @@ -79,10 +79,10 @@ export class PrefUi extends OverlayUi { use_opt_ = use_opt; } - const label = elabel(decl.description ?? `[${key}]`, { id }) + const label = elabel(decl.description ?? `[${key}]`, { for: id }) return etr({ class: "pref" }, etd({}, label), etd({}, use_opt_ ?? ""), etd({}, prim_control ?? "")) }) - + const notification_perm = Notification.permission == "granted" ? ediv() : ediv({}, espan("For keks-meet to send notifications, it needs you to grant permission: "), ebutton("Grant", { onclick: () => Notification.requestPermission() }), @@ -95,7 +95,6 @@ export class PrefUi extends OverlayUi { const table = document.createElement("table") table.append(...rows) - super(ediv({ class: "prefs-overlay" }, notification_perm, reset, ebr(), table)) + super(ediv({ class: "prefs-overlay" }, eh2("Settings"), notification_perm, ebr(), table, ebr(), reset)) } - } -- cgit v1.2.3-70-g09d2 From 028c382c9f5408422832b29a8fa466a6386c86f7 Mon Sep 17 00:00:00 2001 From: metamuffin Date: Sun, 25 Dec 2022 14:31:03 +0100 Subject: show voice activity --- client-web/public/assets/style/room.css | 14 +++++++++++++ client-web/source/preferences/decl.ts | 2 ++ client-web/source/resource/track.ts | 35 +++++++++++++++++++++++++++++++-- 3 files changed, 49 insertions(+), 2 deletions(-) (limited to 'client-web/source/preferences') diff --git a/client-web/public/assets/style/room.css b/client-web/public/assets/style/room.css index 3f62685..928ab4e 100644 --- a/client-web/public/assets/style/room.css +++ b/client-web/public/assets/style/room.css @@ -23,9 +23,11 @@ .user .info .name { font-weight: 400; } + .user.local .info .name { text-decoration: underline; } + .user .info { margin-bottom: 1em; } @@ -44,6 +46,7 @@ .local-controls { display: inline; } + .local-controls::before { content: "|"; } @@ -51,6 +54,7 @@ .transfer-status { background-color: #00000040; } + .progress-bar { z-index: -1; padding: 0px; @@ -59,3 +63,13 @@ border-radius: 3px; background-color: var(--ac-light); } + + +.resource-track>div { + border: 2px solid transparent; + border-radius: 4px; +} + +.resource-track>div.audio-active { + border: 2px solid rgb(37, 228, 37); +} diff --git a/client-web/source/preferences/decl.ts b/client-web/source/preferences/decl.ts index effd885..f3f8e84 100644 --- a/client-web/source/preferences/decl.ts +++ b/client-web/source/preferences/decl.ts @@ -32,6 +32,8 @@ export const PREF_DECLS = { camera_facing_mode: { type: optional(string), possible_values: ["environment", "user"], description: "Prefer user-facing or env-facing camera" }, auto_gain_control: { type: bool, description: "Automatically adjust mic gain" }, echo_cancellation: { type: bool, description: "Cancel echo" }, + audio_activity_threshold: { type: number, optional: true, default: 0.003, description: "Audio activity threshold" }, + // TODO differenciate between mic, cam and screen optional_audio_default_enable: { type: bool, default: true, description: "Enable audio tracks by default" }, optional_video_default_enable: { type: bool, default: false, description: "Enable video tracks by default" }, diff --git a/client-web/source/resource/track.ts b/client-web/source/resource/track.ts index 7d53522..58157cf 100644 --- a/client-web/source/resource/track.ts +++ b/client-web/source/resource/track.ts @@ -62,24 +62,55 @@ export function new_local_track(info: ProvideInfo, track: TrackHandle): LocalRes } function create_track_display(track: TrackHandle): HTMLElement { - const el = document.createElement("div") const is_video = track.kind == "video" - const media_el = is_video ? document.createElement("video") : document.createElement("audio") + const is_audio = track.kind == "audio" + const stream = new MediaStream([track.track]) + + const el = document.createElement("div") + + const media_el = is_video + ? document.createElement("video") + : document.createElement("audio") + media_el.srcObject = stream media_el.classList.add("media") media_el.autoplay = true media_el.controls = true media_el.addEventListener("pause", () => media_el.play()) + if (track.local) media_el.muted = true el.append(media_el) track.addEventListener("ended", () => { media_el.srcObject = null // TODO // TODO figure out why i wrote todo here el.remove() }) + + if (is_audio && PREFS.audio_activity_threshold !== undefined) check_volume(stream, vol => { + const active = vol > PREFS.audio_activity_threshold + if (active != el.classList.contains("audio-active")) { + if (active) el.classList.add("audio-active") + else el.classList.remove("audio-active") + } + }) + return el } +function check_volume(track: MediaStream, cb: (vol: number) => void) { + const ctx = new AudioContext(); + const s = ctx.createMediaStreamSource(track) + const a = ctx.createAnalyser() + s.connect(a) + const samples = new Float32Array(a.fftSize); + setInterval(() => { + a.getFloatTimeDomainData(samples); + let sum = 0.0; + for (const amplitude of samples) { sum += amplitude * amplitude; } + cb(Math.sqrt(sum / samples.length)) + }, 1000 / 15) +} + export async function create_camera_res() { log("media", "requesting user media (camera)") const user_media = await window.navigator.mediaDevices.getUserMedia({ -- cgit v1.2.3-70-g09d2