1 Embedding Browser Call
- 1.1 Online Try-It-Yourself
- 1.2 Prepare data via VSee Clinic API
  - 1.2.1 Use case: Create a visit in VSee Clinic and embed the video into your page
- 1.3 Integration
  - 1.3.1 Step 1: Embed external_api.min.js
  - 1.3.2 Step 2: Define container
    - 1.3.2.1 HTML
    - 1.3.2.2 CSS
  - 1.3.3 Step 3: Initialize browser call in iframe
    - 1.3.3.1 Javascript
  - 1.3.4 Step 4: Listening to events
  - 1.3.5 Step 5: Sending commands
- 1.4 Sample Events
- 1.5 Example code
  - 1.5.1 Patient / Guest accounts
  - 1.5.2 Provider account

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

Online Try-It-Yourself

Working examples can be viewed here

https://jsfiddle.net/antonvsee/kx5on7zr/16/

https://jsfiddle.net/antonvsee/1qauc8xb/11/

Prepare data via VSee Clinic API

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

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

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/

Step 4: (Optional) Obtain provider access credentials from POST /users/sso?fields=vsee API call

Similar to Step 1, you can call use the SSO API to get the Username and the Auth token for a provider account.

Integration

Step	Details

Step

Details

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

<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

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 in iframe

const conferenceObject = new JitsiMeetExternalAPI(domain, options);

If you are using vsee id generated from VSee Clinic, set isClinic to true for cleaner UI experience

Javascript

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

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

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.

The full list of events can be found here https://jitsi.github.io/handbook/docs/dev-guide/dev-guide-iframe-events - we support all standard Jitsi event types.

When you run the sample JSFiddles, you can observe the events in the browser console, make sure to filter them via “SDK” keyword.

You can match e.vseeId with data.vsee.id retrieved from the POST /users/sso?fields=vsee API.

Adding event listeners:

    conferenceObject.addListener('participantJoined', (e) => {
        console.log('SDK event: Another Participant joined:', e);
    });
    
    conferenceObject.addListener('participantLeft', (e) => {
        console.log('SDK event: Another Participant left:', e);
    });
    
    conferenceObject.addListener('videoConferenceJoined', (e) => {
        console.log('SDK event: Local user joined the Conference ', e);
    });
    
    conferenceObject.addListener('videoConferenceLeft', (e) => {
        console.log('SDK event: Local user left the Conference', e);
    });
    
    conferenceObject.addListener('videoAvailabilityChanged', (e) => {
        console.log('SDK event: Video availability changed:', e);
    });
    
    conferenceObject.addListener('videoMuteStatusChanged', (e) => {
        console.log('SDK event: Video mute status changed:', e);
    });
    
    conferenceObject.addListener('audioMuteStatusChanged', (e) => {
        console.log('SDK event: Audio mute status changed:', e);
    });
    
    conferenceObject.addListener('readyToClose', () => {
        console.log('SDK event: Ready to close');
        $('#vseeBrowserCall').hide();
        $('#vseeBrowserCall').empty();
        $('#vsee-container').show();
        $('#form-container').show();
        $('#loading-container').hide();
    });
    
    conferenceObject.addListener('errorOccurred', (error) => {
        console.error('SDK event: Error occurred:', error);
    });

Checking the browser’s console events log:

Sample SDK event log:

SDK event: Audio mute status changed: {muted: false}
SDK event: Video mute status changed: {muted: true}
SDK event: Audio mute status changed: {muted: true}
SDK event: Video availability changed: {available: true}
SDK event: Video availability changed: {available: true}
SDK event: Video availability changed: {available: true}
SDK event: Local user joined the Conference  {
  avatarURL: "",
  breakoutRoom: false,
  displayName: "New guest 26",
  formattedDisplayName: "New guest 26 (me)",
  id: "68b8c7b4",
  roomName: "demo_jitsi",
  vseeId: "ccpreview+6474dbe8525044b0952f461f0a0300ce"
}
SDK event: Audio mute status changed: {muted: false}
SDK event: Video mute status changed: {muted: false}
SDK event: Video availability changed: {available: true}
SDK event: Video availability changed: {available: true}
SDK event: Video mute status changed: {muted: true}
SDK event: Video availability changed: {available: true}
SDK event: Audio mute status changed: {muted: true}
SDK event: Another Participant joined: {
  id: '7babc1ec', 
  displayName: 'Provider 52', 
  vseeId: 'an+developer01@vseelab.com', 
  formattedDisplayName: 'Provider 52'
}
SDK event: Another Participant left: {id: '7babc1ec'}
SDK event: Local user left the Conference {roomName: 'demo_jitsi'}
SDK event: Ready to close

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

    // change display name for the current user
    conferenceObject.executeCommand('displayName', 'New guest ' + Math.floor(Math.random() * 100));

Sample Events

Web Browser SDK Event	Sample

Web Browser SDK Event	Sample
`participantJoined`	`{ id: '7babc1ec', displayName: 'Provider 52', vseeId: 'an+developer01@vseelab.com', formattedDisplayName: 'Provider 52' }`	This event triggers when any remote user joins the video session. If a local user is a patient, then the remote user will be a provider or any 3rd party user added to the call. `id` is a video session user ID only. It is not the same as the VSee Clinic user id. You should be using `vseeId` if you want to cross-match the video session user with their corresponding VSee Clinic accounts.
`participantLeft`	`{id: "7babc1ec"}`	This event triggers when any remote user leaves the video session.
`videoConferenceJoined`	`{ avatarURL: "", breakoutRoom: false, displayName: "New guest 26", formattedDisplayName: "New guest 26 (me)", id: "68b8c7b4", roomName: "demo_jitsi", vseeId: "ccpreview+6474dbe8525044b0952f461f0a0300ce" }`	This event triggers when the local user is joining the video session.
`videoConferenceLeft`	`{roomName: 'demo_jitsi'}`	Local user hangs up.
`videoAvailabilityChanged`	`{available: true}`	Local user’s video status has changed.
`videoMuteStatusChanged`	`{muted: false}`	Local user clicked mute video button.
`audioMuteStatusChanged`	`{muted: false}`	Local user clicked mute audio button.

Example code

Patient / Guest accounts

Working example can be viewed here https://jsfiddle.net/antonvsee/kx5on7zr/16/

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

Provider account

You can use this pre-populated JSFiddle for provider access https://jsfiddle.net/antonvsee/1qauc8xb/11/

Browser Call SDK (Beta)