Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Scott Idem
2025-09-18 16:54:46 -04:00
parent 7fd3ef4f63
commit 811876e36a
1 changed files with 87 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
static/idaa_novi_iframe_jitsi.html
View File

@@ -8,49 +8,102 @@
<body> <body>
<!-- Jitsi Meet External API --> <h1>Jitsi Meetings External API</h1>
<h1>Jitsi Meet 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> <div id="jitsi_meet_external_api_container" style="height: 750px; width: 100%;"></div>
<script src="https://jitsi.dgrzone.com/external_api.js"></script> <script src="https://jitsi.dgrzone.com/external_api.js"></script>
<script lang="ts"> <script lang="ts">
// https://jitsi.dgrzone.com/it-is-hot-outside // Get user info from URL parameters. Generated by the Novi page that contains this iframe.
let base_url = 'https://jitsi.dgrzone.com'; let novi_url_params = new URLSearchParams(document.location.search);
let room_name = 'it-is-hot-outside'; // Set externally by URL param 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'; // Jitsi Meet External API variables
let room_moderator = true; // Set based on Novi API response let domain = 'jitsi.dgrzone.com';
let display_name = 'John Doe'; // Set based on Novi API response let room_name = 'it-is-hot-outside';
let email = 'test+john@oneskyit.com'; // Set based on Novi API response 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 // 1. Function to fetch the JWT from your backend
const options = { async function getJitsiJwt() {
roomName: room_name, // This is the URL of your backend API endpoint.
width: '100%', // It's a server-side route that will create the JWT for you.
height: 750, const tokenEndpoint = 'https://dev-api.oneskyit.com/api/jitsi_token';
parentNode: document.getElementById('jitsi_meet_external_api_container'),
userInfo: { // Pass user information and moderator status to the backend
displayName: display_name, const payload = {
room: room_name,
name: display_name,
email: email, email: email,
}, is_moderator: isModerator
configOverwrite: { };
prejoinPageEnabled: false,
// Optionally, mute audio and video on join try {
startWithAudioMuted: true, const response = await fetch(tokenEndpoint, {
startWithVideoMuted: true, method: 'POST',
enablePrejoinPage: false, headers: {
enableWelcomePage: false, 'Content-Type': 'application/json',
enableClosePage: false, },
// Enable lobby for moderators body: JSON.stringify(payload)
enableLobby: room_moderator, });
},
// The key is to pass the JWT here if (!response.ok) {
// jwt: your_generated_jwt 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> </script>
</body> </body>
</html> </html>