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 prepare data and work on the integration

Prepare data

Use case: Create a visit in VSee Clinic and embed the video into your page

Step 1: Obtain patient access credentials from POST /users/sso?fields=vsee API call

Important fields in the response are:

Field name / path	Type	Example Data	Field Description
`data.id`	`String`	`91711`	Patient's ID
`data.token.token`	`String`	`66bcd0acff324e8a44992d9596b5d361`	The SSO token that should be used for further creating Intake (Step 2) and Visit (Step 3)
`data.vsee.id`	`String`	`ccpreview+606ce3e353c8411a8e7b52c664457b1f`	Use as Username in the SDK tool above
`data.vsee.token`	`String`	`78fc497ff743d2b51050d9102acabe63`	Use as Auth token in the SDK tool above

Step 2: Create intake object via POST /intakes API

Use the SSO token from Step 1 in the X-ApiToken header field. You will get an intake ID in the response (data.id), e.g. 61165a8e-d8cc-47da-bd8e-597d64457b1f

Step 3: Create either a walkin visit via POST /visits/add_walkin API or a scheduled appointment visit via POST /visits API

Use SSO token from Step 1 in the X-ApiToken header field and intake_id from Step 2.

Important fields in the response are:

Field name / path	Type	Example Data	Field Description
`data.id`	`String`	`67258`	Visit ID
`data.meeting.meeting_id`	`String`	`1662401692837_7c9edb62-31a8-4bbc-a401-f71ffda568d4__jitsi`	This can be used as Conference ID in the SDK test tool above. https://jsfiddle.net/vseelab/8tz3bq5e/

Integration

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

<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 Call SDK (Beta)</h3>
                <a href="https://developers.vsee.com/wiki/spaces/VD/pages/30605327/Browser+Call+SDK+Beta" target="_blank">Documentation</a>
                </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-7.meet.vsee.com/libs/external_api.min.js'></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;
}

Step 3: Initialize browser call on iframe

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

Javascript

(function(window) {
  $('#form').submit(function() {
    $('#form-container').hide();
    $('#loading-container').show();

    const domain = "clinic-prod-6865-7.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,
      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);

Example code