109 lines
3.4 KiB
HTML
109 lines
3.4 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Jitsi iframe API Test Page</title>
|
|
</head>
|
|
<body>
|
|
|
|
|
|
<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">
|
|
// 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;
|
|
|
|
// 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;
|
|
|
|
// 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,
|
|
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);
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
</html> |