[wip] now display user's camera

next tricky thing is connecting users

scratch/webrtc01.ts

@@ -0,0 +1,127 @@
+/**
+ * webrtc page script
+ *
+ * Author: Peter Harpending <peterharpending@qpq.swiss>
+ * Date: 2026-02-04
+ * Copyright: Copyright (c) 2026 QPQ AG
+ *
+ * Reference: https://git.qpq.swiss/QPQ-AG/research-megadoc/src/commit/c7c4592d4b21ad120145ef63334471a1a7ec1e60/paste/2026-02/grok-webrtc.html
+ *
+ * @module
+ */
+
+type state =
+    {whoami: string,
+     roster: Array<string>};
+
+let st: state =
+    {whoami: "",
+     roster: []};
+
+main();
+
+async function
+main
+    ()
+    : Promise<void>
+{
+    // start websocket immediately
+    let ws: WebSocket;
+    let init = document.getElementById('init') as HTMLDivElement;
+    let init_join = document.getElementById('init-join') as HTMLButtonElement;
+
+    // handle button click
+    init_join.addEventListener('click',
+        function() {
+            init.hidden = true;
+            document.getElementById('run')!.hidden = false;
+            ws = new WebSocket('/ws/webrtc');
+            ws.onopen    = function(e) { console.log('ws open'); };
+            ws.onclose   = function(e) { console.warn('ws closed'); };
+            ws.onerror   = function(e) { console.error('ws error:', e); };
+            ws.onmessage =
+                function(e) {
+                    // console.log('ws message:', e.data);
+                    let message = JSON.parse(e.data) as ws_msg;
+                    handle_ws_msg(message);
+                };
+        }
+    );
+}
+
+type ws_msg = ["whoami", string]
+            | ["roster", Array<string>];
+
+function
+handle_ws_msg
+    (message: ws_msg)
+    : void
+{
+    console.log('message from server:', message);
+    switch(message[0]) {
+        case "whoami":
+            st.whoami = message[1];
+            break;
+        case "roster":
+            st.roster = (message[1] as Array<string>);
+            break;
+        default:
+            console.warn("unknown message", message);
+    }
+
+    render_state();
+}
+
+
+
+function
+ws_send_json
+    (ws : WebSocket,
+     x  : any)
+    : void
+{
+    let s: string = JSON.stringify(x, undefined, 4);
+    console.log('sending:\n', s);
+
+    ws.send(s);
+}
+
+
+
+function
+render_state
+    ()
+    : void
+{
+    console.log('st', st);
+    // whoami
+    document.getElementById('whoami')!.innerText = st.whoami;
+    //
+    let roster_ul = document.getElementById('roster-ul') as HTMLUListElement;
+    let newChildren : Array<HTMLElement> = [];
+    for (let nick of st.roster) {
+        if (!(nick === st.whoami)) {
+            let li = nickkk(nick);
+            newChildren.push(li);
+        }
+    }
+    roster_ul.replaceChildren(...newChildren);
+}
+
+function
+nickkk
+    (nick: string)
+    : HTMLElement
+{
+    let li = document.createElement('li');
+
+    li.innerText += nick;
+    li.innerText += ' ';
+
+    let call_a = document.createElement('button');
+    call_a.innerText = 'call';
+
+    li.appendChild(call_a);
+
+    return li;
+}