...
| |
|---|
Working example can be viewed here https://jsfiddle.net/vseelab/8tz3bq5e/ Step 1: Embed external_api.min.js <script src='https://clinic-prod-6865-7.meet.vsee.com/libs/external_api.min.js'></script>
Step 2: Define container <div id="vseeBrowserCall"></div>
| HTML| 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">
<h3>Browser<h3>VSee Browser Call SDK (Beta)</h3>
<a href="https://developers.vsee.com/wiki/spaces/VD/pages/30605327/Browser+Call+SDK+Beta" target="_blank">Documentation</a> - Last updated: Oct 6, 2023
</br></br>
<div class="mb-3">
<label for="userName" class="form-label">Username</label>
<input type="text" class="form-control" id="userName" value="ccpreview+6474dbe8525044b0952f461f0a0300ce" required>
</div>
<div class="mb-3">
<label for="authToken" class="form-label">Auth token</label>
<input type="password" class="form-control" id="authToken" value="9f900d1d7669418c9439c844d9003926" required>
</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://clinic-prod-6865-78.meet.vsee.com/libs/external_api.min.js'></script>
</body>
</html>
|
CSS| Code Block |
|---|
body {
font-family: sans-serif;
}
#vsee-container {
height: 100%;
padding-top: 50px;
}
#loading-container {
display: none;
}
#vseeBrowserCall {
height: 100vh;
display: none;
}
|
|
Step 3: Initialize browser call on iframe| Code Block |
|---|
const conferenceObject = new JitsiMeetExternalAPI(domain, options); |
If you are using vsee id generated from VSee Clinic, set isClinic to true for cleaner UI experience Step 4: Listening to eventsYou can add event listeners to the embedded Jitsi Meet using the addListener method: | Code Block |
|---|
conferenceObject.addListener(event, listener); |
If you want to remove a listener you can use the removeListener method: | Code Block |
|---|
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 commandsYou can control the embedded Jitsi Meet conference by calling executeCommand on the JitsiMeetExternalAPI object: | Code Block |
|---|
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: | Code Block |
|---|
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: | Code Block |
|---|
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 | Javascript| Code Block |
|---|
| (function(window) {
$('#form').submit(function() {
$('#form-container').hide();
$('#loading-container').show();
const domain = "clinic-prod-6865-78.meet.vsee.com";
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,
// vsee id
userName: userName,
// vsee token to login
authToken: authToken,
// set this if you are embedding for VSee Clinic application. The UI is a lot more clean
isClinic: true,
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);
|
|
Example code
Working example can be viewed here https://jsfiddle.net/vseelab/8tz3bq5e/
...