Table of Contents

minLevel	1
maxLevel	7

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/

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

...

title	HTML

Step 1: Embed `external_api.min.js`

<script src='https://clinic.meet.vsee.com/libs/external_api.min.js'></script>

Step 2: Define container

<div id="vseeBrowserCall"></div>

HTML

Code Block

language	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>VSee Browser Call SDK (Beta)</h3>
                <a href="https://vsee.atlassian.net/wiki/spaces/VD/pages/30605327/Browser+Call+SDK+Beta" target="_blank">Documentation</a> - Last updated: Jun 3, 2024
                </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

...

.meet.vsee.com/libs/external_api.min.js'></script>
  </body>

</html>

...

CSS

...

Code Block

...

language

...

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

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,

...

title	Javascript

...

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

language	js

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

    const domain = "clinic

...

.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);

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

Code Block

    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:

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.

...

Example code

Working example can be viewed here https://jitsijsfiddle.github.ionet/handbookvseelab/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

Embedding For VSee Clinic Users

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

...

Example Data

...

Field Description

...

data.id

...

91711

...

Patient's ID

...

data.token.token

...

66bcd0acff324e8a44992d9596b5d361

...

The SSO token that should be used for further creating Intake (Step 2) and Visit (Step 3)

...

data.vsee.id

...

ccpreview+606ce3e353c8411a8e7b52c664457b1f

...

Use as Username in the SDK tool above

...

data.vsee.token

...

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

...

Example Data

...

Field Description

...

data.id

...

67258

...

Visit ID

...

data.meeting.meeting_id

...

1662401692837_7c9edb62-31a8-4bbc-a401-f71ffda568d4__jitsi

...

This can be used as Conference ID in the SDK test tool above. https://jsfiddle.net/gunyhake/btpqLrs4/

8tz3bq5e/

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

...

Versions Compared

Old Version 7

New Version Current

Key

Embedding Browser Call

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

Step 2: Create intake object via POST /intakes API

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

Integration

Step 1: Embed `external_api.min.js`

Step 2: Define container

HTML

CSS

Step 3: Initialize browser call on iframe

Step 4: Listening to events

Step 5: Sending commands

Javascript

Embedding Browser Call

Step 1: Embed `external_api.min.js`

Step 2: Define container

Step 3: Initialize browser call on iframe

Step 4: Listening to events

Example code

Step 5: Sending commands

Embedding For VSee Clinic Users

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

Step 2: Create intake object via POST /intakes API

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

Page Comparison

Versions Compared

Old Version 7

New Version Current

Key

Embedding Browser Call

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

Step 2: Create intake object via POST /intakes API

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

Integration

Step 1: Embed external_api.min.js

Step 2: Define container

HTML

CSS

Step 3: Initialize browser call on iframe

Step 4: Listening to events

Step 5: Sending commands

Javascript

Embedding Browser Call

Step 1: Embed external_api.min.js

Step 2: Define container

Step 3: Initialize browser call on iframe

Step 4: Listening to events

Example code

Step 5: Sending commands

Embedding For VSee Clinic Users

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

Step 2: Create intake object via POST /intakes API

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

Step 1: Embed `external_api.min.js`

Step 1: Embed `external_api.min.js`