Versions Compared

Old Version 10

changes.mady.by.user Anton Tolkachiov

Saved on

compared with

New Version 11

changes.mady.by.user An Nguyen

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Table of Contents
minLevel1
maxLevel7

...

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

...

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

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

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

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://clinic-prod-6865-7.meet.vsee.com/libs/external_api.min.js'></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/vseelab/8tz3bq5e/

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

...