...
Working example can be viewed here https://jsfiddle.net/gunyhake/btpqLrs4/
...
To test call, please open the example in 2 different tabs / browsers or best 2 different computers.
Enter the username and token for each of the session and click Join
...
You should see 2 ways call
...
| Expand |
|---|
|
| Code Block |
|---|
<html itemscope itemtype="http://schema.org/Product" prefix="og: http://ogp.me/ns#" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
</head>
<body>
<noscript>
<div>JavaScript is disabled. </br>For this site to work you have to enable JavaScript.</div>
</noscript>
<div class="container-fluid" id="vsee-container">
<div class="row justify-content-center" style="height: 100%;">
<div class="align-self-center text-center" id="loading-container">
<div>Connecting...</div>
<div class="spinner-border " role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<div class="col-lg-5 col-md-7 col-sm-11 col-xs-11 align-self-center" id="form-container">
<div class="card">
<div class="card-body">
<form onsubmit="return false;" id="form">
<div class="mb-3">
<label for="userName" class="form-label">Username</label>
<input type="text" class="form-control" id="userName" required>
</div>
<div class="mb-3">
<label for="authToken" class="form-label">Auth token</label>
<input type="password" class="form-control" id="authToken" required>
</div>
<div class="mb-3">
<label for="domain" class="form-label">Path</label>
<input type="text" class="form-control" id="domain" aria-describedby="domainHelp" required value="clinic.vsee.me">
<div id="domainHelp" class="form-text">Please fill the domain e.g clinic.vsee.me</div>
</div>
<div class="mb-3">
<label for="roomName" class="form-label">Conference ID</label>
<input type="text" class="form-control" id="roomName" aria-describedby="roomNameHelp" required value="demo_jitsi">
<div id="roomNameHelp" class="form-text">Please fill the conference ID without space and end with _jitsi</div>
</div>
<button type="submit" class="btn btn-primary">Join</button>
</form>
</div>
</div>
</div>
</div>
</div>
<div id="vseeBrowserCall">
</div>
<script src='https://api.vseepreview.com/vc/next/meet/libs/external_api.min.js?_=10'></script>
</body>
</html> |
|
| Expand |
|---|
|
| Code Block |
|---|
body {
font-family: sans-serif;
}
#vsee-container {
height: 100%;
padding-top: 50px;
}
#loading-container {
display: none;
}
#vseeBrowserCall {
height: 100vh;
display: none;
}
|
|
| Expand |
|---|
|
| Code Block |
|---|
(function (window) {
$('#form').submit(function() {
$('#form-container').hide();
$('#loading-container').show();
const domain = $('#domain').val() + "/meet";
const conferenceID = $('#roomName').val();
const iframeNode = window.document.querySelector("#vseeBrowserCall");
const userName = $('#userName').val();
const authToken = $('#authToken').val();
const options = {
roomName: conferenceID,
noSsl: false,
parentNode: iframeNode,
userName: userName,
authToken: authToken,
onload: function () {
$('#vsee-container').hide();
$('#vseeBrowserCall').show();
}
};
const conferenceObject = new JitsiMeetExternalAPI(domain, options);
// listen to "participantJoined" event
/* e.g "participantJoined", {
displayName: "New guest 24",
formattedDisplayName: "New guest 24",
id: "41b24d0d"
} */
conferenceObject.addListener("participantJoined", function(data){
console.log("participantJoined", data);
});
// change display name for the current user
conferenceObject.executeCommand('displayName', 'New guest ' + Math.floor(Math.random() * 100));
})
})(window);
|
|
...