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

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.

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

Example code

Working example can be viewed here https://jsfiddle.net/gunyhake/btpqLrs4/

...

Expand

title	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">
              <div class="mb-3">
                <label for="userName" class="form-label">Username</label>
                <input type="text" class="form-control" id="userName" required>
              </div>
              <div class="mb-3">
                <label for="authToken" class="form-label">Auth token</label>
                <input type="password" class="form-control" id="authToken" required>
              </div>
              <div class="mb-3">
                <label for="domain" class="form-label"

...

>Path</label>
                <input type="text" class="form-control" id="domain" aria-describedby="domainHelp" required value="clinic.vsee.me">
                <div id="domainHelp" class="form-text">Please fill the domain e.g

...

clinic.vsee.me</div>
              </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://

...

api.

...

vseepreview.com/vc/next/meet/libs/external_api.min.js?_=10'></script>
</body>

</html>

Expand

title	CSS

Code Block
body { font-family: sans-serif; } #vsee-container { height: 100%; padding-top: 50px; } #loading-container { display: none; } #vseeBrowserCall { height: 100vh; display: none; }

Expand

title	Javascript

Code Block

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

    const domain = $('#domain').val() + "/meet";
    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://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.

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

Versions Compared

Old Version 2

New Version 3

Key

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

Step 5: Sending commands

Example code

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

Step 5: Sending commands

Page Comparison

Versions Compared

Old Version 2

New Version 3

Key

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

Step 5: Sending commands

Example code

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

Step 5: Sending commands

Step 1: Embed `external_api.min.js`

Step 1: Embed `external_api.min.js`