Add minimal client example.

ac47a82e · Juliusz Chroboczek · bc512462 · ac47a82e · ac47a82e · ac47a82e
Commit ac47a82e authored Jun 08, 2024 by Juliusz Chroboczek
Show whitespace changes
Inline Side-by-side

Showing with 279 additions and 1 deletion

static/example/example.html static/example/example.html +22 -0

static/example/example.js static/example/example.js +255 -0

static/tsconfig.json static/tsconfig.json +2 -1

No files found.
--- a/static/example/example.html
+++ b/static/example/example.html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Galène client example</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="author" href="https://www.irif.fr/~jch/"/>
+  </head>
+
+  <body>
+    <p id="status">Disconnected</p>
+    <p id="error"></p>
+
+    <div><button id="show" disabled>Show/hide yourself</button></div>
+
+    <video id="video"></video>
+
+    <div id="chat"></div>
+
+    <script src="/protocol.js" defer></script>
+    <script src="example.js" defer></script>
+  </body>
+</html>
--- a/static/example/example.js
+++ b/static/example/example.js
+/* Galene client example.  Send-only for now. */
+
+/**
+ * The main function.
+ *
+ * @param {string} url
+ */
+async function start(url) {
+    // fetch the group information
+    let r = await fetch(url + ".status");
+    if(!r.ok) {
+        throw new Error(`${r.status} ${r.statusText}`);
+    }
+    let status = await r.json();
+
+    // parse a token in the URL.
+    let token = null;
+    let parms = new URLSearchParams(window.location.search);
+    if(parms.has('token'))
+        token = parms.get('token');
+
+    // connect to the server
+    if(token) {
+        await serverConnect(status, token);
+    } else if(status.authPortal) {
+        window.location.href = groupStatus.authPortal
+    } else {
+        serverConnect(status, null);
+    }
+}
+
+/**
+ * Display the connection status.
+ *
+ * @parm {string} status
+ */
+function displayStatus(status) {
+    let c = document.getElementById('status');
+    c.textContent = status;
+}
+
+/**
+ * Connect to the server.
+ *
+ * @parm {Object} status
+ * @parm {string} token
+ */
+async function serverConnect(status, token) {
+    // create the connection to the server
+    let conn = new ServerConnection();
+    conn.onconnected = async function() {
+        displayStatus('Connected');
+        let creds = token ?
+            {type: 'token', token: token} :
+            {type: 'password', password: ''};
+        // join the group and wait for the onjoined callback
+        await this.join("public", "example-user", creds);
+    };
+    conn.onchat = onChat;
+    conn.onusermessage = onUserMessage;
+    conn.ondownstream = function(s) {
+        // This should not happen, since we didn't ask to receive streams.
+        console.warn('Received unexpected stream from server');
+        s.abort();
+    }
+    conn.onclose = function() {
+        displayStatus('Disconnected');
+    }
+    conn.onjoined = onJoined;
+
+    // connect and wait for the onconnected callback
+    await conn.connect(status.endpoint);
+}
+
+/**
+ * Called whenever we receive a chat message.
+ *
+ * @this {ServerConnection}
+ * @parm {string} username
+ * @parm {string} message
+ */
+function onChat(id, dest, username, time, privileged, history, kind, message) {
+    let p = document.createElement('p');
+    p.textContent = `${username}${dest ? ' → ' + dest : ''}: ${message}`;
+    let container = document.getElementById('chat');
+    container.appendChild(p);
+}
+
+/**
+ * Called whenever we receive a user message.
+ *
+ * @this {ServerConnection}
+ * @parm {string} username
+ * @parm {string} message
+ * @parm {string} kind
+ */
+function onUserMessage(id, dest, username, time, privileged, kind, error, message) {
+    switch(kind) {
+    case 'kicked':
+    case 'error':
+    case 'warning':
+    case 'info':
+        if(!privileged) {
+            console.error(`Got unprivileged message of kind ${kind}`);
+            return;
+        }
+        displayError(message);
+        break;
+    case 'clearchat':
+        if(!privileged) {
+            console.error(`Got unprivileged message of kind ${kind}`);
+            return;
+        }
+        document.getElementById('chat').textContent = '';
+        break;
+    }
+}
+
+
+/**
+ * Find the camera stream, if any.
+ *
+ * @parm {string} conn
+ * @returns {Stream}
+ */
+function cameraStream(conn) {
+    for(let id in conn.up) {
+        let s = conn.up[id];
+        if(s.label === 'camera')
+            return s;
+    }
+    return null;
+}
+
+/**
+ * Enable or disable the show/hide button.
+ *
+ * @parm{ServerConnection} conn
+ * @parm{boolean} enable
+ */
+function enableShow(conn, enable) {
+    let b = /** @type{HTMLButtonElement} */(document.getElementById('show'));
+    if(enable) {
+        b.onclick = function() {
+            let s = cameraStream(conn);
+            if(!s)
+                showCamera(conn);
+            else
+                hide(conn, s);
+        }
+        b.disabled = false;
+    } else {
+        b.disabled = true;
+        b.onclick = null;
+    }
+}
+
+/**
+ * Called when we join or leave a group.
+ *
+ * @this {ServerConnection}
+ * @parm {string} kind
+ * @parm {string} message}
+ */
+async function onJoined(kind, group, perms, status, data, error, message) {
+    switch(kind) {
+    case 'fail':
+        displayError(message);
+        enableShow(this, false);
+        this.close();
+        break;
+    case 'redirect':
+        this.close();
+        document.location.href = message;
+        return;
+    case 'leave':
+        displayStatus('Connected');
+        enableShow(this, false);
+        this.close();
+        break;
+    case 'join':
+    case 'change':
+        displayStatus(`Connected as ${this.username} in group ${this.group}.`);
+        enableShow(this, true);
+        break;
+    default:
+        displayError(`Unexpected state ${kind}.`);
+        this.close();
+        break;
+    }
+}
+
+/**
+ * Enable the camera and broadcast yourself to the group.
+ *
+ * @parm {ServerConnection} conn
+ */
+async function showCamera(conn) {
+    let v = /** @type HTMLVideoElement */(document.getElementById('video'));
+    let ms = await navigator.mediaDevices.getUserMedia({audio: true, video: true});
+
+    /* Send the new stream to the server */
+    let s = conn.newUpStream();
+    s.label = 'camera';
+    s.setStream(ms);
+    s.onclose = function(replace) {
+        v.srcObject = null;
+    }
+
+    function addTrack(t) {
+        t.oneneded = function(e) {
+            ms.onaddtrack = null;
+            s.onremovetrack = null;
+            s.close();
+        }
+        s.pc.addTransceiver(t, {
+            direction: 'sendonly',
+            streams: [ms],
+        });
+    }
+
+    // Make sure all future tracks are added.
+    s.onaddtrack = function(e) {
+        addTrack(e.track);
+    }
+    // Add any existing tracks.
+    ms.getTracks().forEach(addTrack);
+
+    // Connect the MediaStream to the video element and start playing.
+    v.srcObject = ms;
+    v.muted = true;
+    v.play();
+}
+
+/**
+ * Stop broadcasting.
+ *
+ * @parm {ServerConnection} conn
+ * @parm {Stream} s
+ */
+async function hide(conn, s) {
+    s.stream.getTracks().forEach(t => t.stop());
+    s.close();
+}
+
+/**
+ * Display an error message.
+ *
+ * @parm {string} message
+ */
+function displayError(message) {
+    document.getElementById('error').textContent = message;
+}
+
+start("/group/public/").catch(e => displayError(e));
--- a/static/tsconfig.json
+++ b/static/tsconfig.json
@@ -15,6 +15,7 @@
    "files": [
        "protocol.js",
        "galene.js",
-        "management.js"
+        "management.js",
+        "example/example.js"
    ]
 }