Page Comparison

...

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

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

...

Versions Compared

Old Version 7

New Version 8

Key