Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 11 Next »

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

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

  • No labels