Versions Compared

Old Version 12

changes.mady.by.user An Nguyen

Saved on

compared with

New Version Current

changes.mady.by.user An Nguyen

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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
languagehtml
<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>VSee Browser Call SDK (Beta)</h3>
                <a href="https://developersvsee.vseeatlassian.comnet/wiki/spaces/VD/pages/30605327/Browser+Call+SDK+Beta" target="_blank">Documentation</a> - Last updated: OctJun 63, 20232024
                </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-8.meet.vsee.com/libs/external_api.min.js'></script>
  </body>

</html>

CSS

Code Block
languagecss
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 events

You 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 commands

You 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
languagejs
(function(window) {
  $('#form').submit(function() {
    $('#form-container').hide();
    $('#loading-container').show();

    const domain = "clinic-prod-6865-8.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/

...