Page Comparison

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

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

...arguments);

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