Embedding Browser Call
VSee extend Jitsi Meet for browser call component. This version of Jitsi Meet allows calling capability with VSee Messenger on Windows, Mac, iOS, Android as well as VSeeKit on mobile platform (iOS / Android)
To get started, you need to
Step 1: Embed external_api.min.js
<script src='https://browser-call.vsee.me/meet/libs/external_api.min.js?_=10'></script>
Step 2: Define container
<div id="vseeBrowserCall"></div>
Step 3: Initialize browser call on iframe
const domain = $('#domain').val() + "/meet";
const options = {
roomName: $('#roomName').val(),
noSsl: false,
parentNode: window.document.querySelector("#vseeBrowserCall"),
userName: $('#userName').val(),
authToken: $('#authToken').val(),
onload: function () {
$('#vsee-container').hide();
$('#vseeBrowserCall').show();
}
};
const conferenceObject = new JitsiMeetExternalAPI(domain, options);
Step 4: Listening to events
You can add event listeners to the embedded Jitsi Meet using the addListener method:
conferenceObject.addListener(event, listener);
If you want to remove a listener you can use the removeListener method:
conferenceObject.removeListener(event, listener);
The event parameter is a string object with the name of the event.
The listener parameter is a function object with one argument that creates a notification when the event occurs along with related event data.
More detail list of events can be found here https://jitsi.github.io/handbook/docs/dev-guide/dev-guide-iframe
Step 5: Sending commands
You can control the embedded Jitsi Meet conference by calling executeCommand on the JitsiMeetExternalAPI object:
conferenceObject.executeCommand(command, ...arguments);
The command parameter is a string which contains the command name.
You can also execute multiple commands using the executeCommands method:
conferenceObject.executeCommands(commands);
The commands parameter is an object with the names of the commands as keys and the arguments for the commands as values:
conferenceObject.executeCommands({
displayName: [ 'nickname' ],
toggleAudio: []
});
More detail list of commands can be found here https://jitsi.github.io/handbook/docs/dev-guide/dev-guide-iframe
Example code
Working example can be viewed here https://jsfiddle.net/gunyhake/btpqLrs4/
HTML
<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">Domain</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 browser-call.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://browser-call.vsee.me/meet/libs/external_api.min.js?_=10'></script>
</body>
</html>
CSS
body {
font-family: sans-serif;
}
#vsee-container {
height: 100%;
padding-top: 50px;
}
#loading-container {
display: none;
}
#vseeBrowserCall {
height: 100vh;
display: none;
}
Javascript
(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);