ok, i fixed the problem with the camera and the microphone, but it needs to be loaded in an iframe. I have created a file for this, which I am attaching here. Of course, there would have to be some code that generates the data from the user ID and the user name.
That's what I would ask of you, please.
The link on the server is :
tiktoki.de/apitest.de
Thus, the page would have to be opened with the wrapper with the option "in the same window".
So you would have to change the link again and put some code in my file a big please please.
Here is the code from my site i have createt, it needs a little bit code from you to make the links with User ID and Name.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test Meet</title>
<!-- change domain to match your Jitsi server -->
<script src='https://live.tiktoki.de/external_api.js'></script>
<style>
html {
overflow: auto;
}
html,
body,
div,
iframe {
margin: 0;
padding: 0;
height: 100%;
border: none;
}
#meet {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
}
#chat {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 33%;
background-color: rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
padding: 5px;
overflow-y: auto;
color: white;
font-weight: bold;
font-size: 18px;
}
#chat input[type="text"] {
width: 80%;
padding: 10px;
font-size: 16px;
border: none;
outline: none;
background-color: rgba(255, 255, 255, 0.1);
color: white;
}
#chat input[type="submit"] {
width: 18%;
padding: 10px;
font-size: 16px;
border: none;
outline: none;
background-color: magenta;
color: white;
cursor: pointer;
}
#chat hr {
border: none;
height: 1px;
margin: 5px 0;
background-color: magenta;
}
#chat p {
margin: 0;
white-space: pre-wrap;
}
#chat input[type="text"], #chat input[type="submit"], #chat hr {
margin-top: auto;
}
</style>
</head>
<body>
<div id='meet'></div>
<div id='chat'>
<hr>
<div id='message-container'></div>
<input type='text' id='input' placeholder='Type your message...'>
<input type='submit' id='submit' value='Send'>
</div>
<script>
const domain = 'live.tiktoki.de'; // change domain to match your Jitsi server
const options = {
roomName: 'AUniqueMeetingRoomName',
parentNode: document.querySelector('#meet'),
configOverwrite: {
toolbarButtons: []
}
};
const api = new JitsiMeetExternalAPI(domain, options);
const chat = document.querySelector('#chat');
const messageContainer = document.querySelector('#message-container');
const input = document.querySelector('#input');
const submit = document.querySelector('#submit');
submit.addEventListener('click', sendMessage);
input.addEventListener('keypress', function (e) {
if (e.key === 'Enter') {
sendMessage();
}
});
function sendMessage() {
const message = input.value;
if (message !== '') {
const name = api.getDisplayName();
const messageDiv = document.createElement('p');
messageDiv.textContent = name + ': ' + message;
messageContainer.insertBefore(messageDiv, messageContainer.firstChild);
input.value = '';
chat.scrollTop= chat.scrollHeight;
// remove last message if more than 10 messages
const messages = chat.getElementsByTagName('p');
if (messages.length > 10) {
chat.removeChild(messages[messages.length-1]);
}
}
}
</script>
</body>
</html>