This new Jitsi page is working well. Now with URL params.

2025-09-18 16:54:46 -04:00
parent 7fd3ef4f63
commit 811876e36a
1 changed files with 87 additions and 34 deletions
--- a/static/idaa_novi_iframe_jitsi.html
+++ b/static/idaa_novi_iframe_jitsi.html
@@ -8,49 +8,102 @@
  <body>


-<!-- Jitsi Meet External API -->
- <h1>Jitsi Meet External API</h1>
+<h1>Jitsi Meetings External API</h1>
+<p>The URL parameters are passed from the Novi page that (will) contains this as an iframe.</p>
 <div id="jitsi_meet_external_api_container" style="height: 750px; width: 100%;"></div>
 <script src="https://jitsi.dgrzone.com/external_api.js"></script>

 <script lang="ts">
-// https://jitsi.dgrzone.com/it-is-hot-outside
-let base_url = 'https://jitsi.dgrzone.com';
-let room_name = 'it-is-hot-outside'; // Set externally by URL param
+// Get user info from URL parameters. Generated by the Novi page that contains this iframe.
+let novi_url_params = new URLSearchParams(document.location.search);
+let user_id = novi_url_params.get('uuid');
+let user_full_name = novi_url_params.get('full_name');
+let user_email = novi_url_params.get('email');
+let user_moderator = novi_url_params.get('moderator') ?? false;

-let domain = 'jitsi.dgrzone.com'; // 'meet.jitsi';
-let room_moderator = true; // Set based on Novi API response
-let display_name = 'John Doe'; // Set based on Novi API response
-let email = 'test+john@oneskyit.com'; // Set based on Novi API response
+// Jitsi Meet External API variables
+let domain = 'jitsi.dgrzone.com';
+let room_name = 'it-is-hot-outside';
+let display_name = user_full_name ?? 'Not My Name';
+let email = user_email ?? 'test+john@oneskyit.com';
+let isModerator = (user_moderator === 'true' || user_moderator === true) ? true : false;

-// Jitsi Meet External API
-const options = {
-    roomName: room_name,
-    width: '100%',
-    height: 750,
-    parentNode: document.getElementById('jitsi_meet_external_api_container'),
-    userInfo: {
-        displayName: display_name,
+// 1. Function to fetch the JWT from your backend
+async function getJitsiJwt() {
+    // This is the URL of your backend API endpoint.
+    // It's a server-side route that will create the JWT for you.
+    const tokenEndpoint = 'https://dev-api.oneskyit.com/api/jitsi_token';
+
+    // Pass user information and moderator status to the backend
+    const payload = {
+        room: room_name,
+        name: display_name,
        email: email,
-    },
-    configOverwrite: {
-        prejoinPageEnabled: false,
-        // Optionally, mute audio and video on join
-        startWithAudioMuted: true,
-        startWithVideoMuted: true,
-        enablePrejoinPage: false,
-        enableWelcomePage: false,
-        enableClosePage: false,
-        // Enable lobby for moderators
-        enableLobby: room_moderator,
-    },
-    // The key is to pass the JWT here
-    // jwt: your_generated_jwt
-};
+        is_moderator: isModerator
+    };
+
+    try {
+        const response = await fetch(tokenEndpoint, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(payload)
+        });
+
+        if (!response.ok) {
+            throw new Error('Failed to fetch JWT token from the server.');
+        }
+
+        const data = await response.json();
+        return data.token; // Your backend should return a JSON object like { "token": "..." }
+
+    } catch (error) {
+        console.error("Error getting JWT:", error);
+        return null;
+    }
+}
+
+// 2. Main function to initialize the Jitsi API with the JWT
+async function initJitsiApi() {
+    const jwtToken = await getJitsiJwt();
+
+    if (!jwtToken) {
+        // Handle the error (e.g., show a message to the user)
+        document.getElementById('jitsi_meet_external_api_container').innerHTML = "<h1>Authentication Failed. Please try again.</h1>";
+        return;
+    }
+
+    const options = {
+        roomName: room_name,
+        width: '100%',
+        height: 750,
+        parentNode: document.getElementById('jitsi_meet_external_api_container'),
+        userInfo: {
+            displayName: display_name,
+            email: email,
+        },
+        configOverwrite: {
+            prejoinPageEnabled: false,
+            startWithAudioMuted: true,
+            startWithVideoMuted: true,
+            enablePrejoinPage: false,
+            enableWelcomePage: false,
+            enableClosePage: false,
+            enableLobby: isModerator,
+        },
+        // Pass the fetched JWT to the Jitsi API
+        jwt: jwtToken
+    };
+
+    const api = new JitsiMeetExternalAPI(domain, options);
+}
+
+// 3. Call the initialization function when the page loads
+document.addEventListener('DOMContentLoaded', initJitsiApi);

-const api = new JitsiMeetExternalAPI(domain, options);
 </script>


  </body>
-</html>
+</html>