Skip to main content

Javascript

Quickstart​

This quickstart shows how to use Dyte's Video Conference to your web applications with a variety of meeting UI customization options.

Dyte also offers the flexibility to build your own UI using various individual components. This offers limitless customization options to tailor the UI to fit your requirements. For more information, see the Build your own UI section.

For getting started quickly, you can use our sample code. You can clone and run a sample application from the HTML UI Kit GitHub repository.

Objective​

You'll learn how to:

  • Install the Dyte client-side SDKs
  • Initialize Dyte client
  • Bringing up your UI
  • Go live!

Before getting started​

Make sure you've a mechanism to get authToken from your server-side, which you would have received as part of Add Participant call.

Step 1: Install Dyte SDK packages​

To begin, install the following packages:

  • @dytesdk/web-core: This core package powers video, voice, livestream and chat SDKs. This is a required package.
  • @dytesdk/ui-kit: This package includes Dyte UI components which can be used with core to easily build your own UI, including a prebuilt UI component. You can skip installing this package if you wish to build your own UI from scratch.

You can install the SDKs using CDN, npm, or Yarn.

To set up web-core and UI Kit components, add the following script tags inside the <head /> tag.

<head>
  <script type="module">
      import { defineCustomElements } from 'https://cdn.jsdelivr.net/npm/@dytesdk/ui-kit/loader/index.es2017.js';
      defineCustomElements();
  </script>
  <!-- Import Web Core via CDN too -->
  <script src="https://cdn.dyte.in/core/dyte.js"></script>
</head>

You can also import utilities or any other export from CDN:

<head>
  <script type="module">
    import {
      provideDyteDesignSystem,
    extendConfig,
    } from 'https://cdn.jsdelivr.net/npm/@dytesdk/ui-kit/dist/esm/index.js';
  </script>
</head>

Version​

@dytesdk/web-corenpm version
@dytesdk/ui-kitnpm version

Step 2: Prepare meeting object​

Here's a series of steps that you need to perform:

  1. Fetch the authToken from your server-side.
<body>
  <script>
    const get_auth_token = async () => {
      // fetch('https://your-server/path-to-token');
      return '<auth-token>';
    };

    const init = async () => {
      // Fetch auth token from server side
      const authToken = await get_auth_token();
    };
    init();
  </script>
</body>
  1. Call the DyteClient.init() method from the web-core package and pass the authToken. This will establish the connection with the Dyte server. You should keep the returned meeting object.
<body>
  <script>
    const get_auth_token = async () => {
      // fetch('https://your-server/path-to-token');
      return '{participant-auth-token}';
    };

    const init = async () => {
      // Fetch auth token from server side
      const authToken = await get_auth_token();

      const meeting = await DyteClient.init({
        authToken,
        defaults: {
          audio: true,
          video: true,
        },
      });
    };

    init();
  </script>
</body>

Now, you have established the connection with the Dyte meeting server successfully.

Step 3: Bring up the UI​

The meeting object serves as the link between web-core and UI Kit, allowing them to communicate with one another. Once the UI Kit has the meeting object, it can join and leave meetings, and so on. Dyte offers a UI Kit that is highly customizatble and uses the meeting instance that you just created.

UI Kit​

A single <dyte-meeting /> component that is feature rich and renders a complete meeting UI and handles all events.

<body>
  <dyte-meeting id="my-meeting"></dyte-meeting>
  <script>
    const get_auth_token = async () => {
      // fetch('https://your-server/path-to-token');
      return '{participant-auth-token}';
    };

    const init = async () => {
      // Fetch auth token from server side
      const authToken = await get_auth_token();

      const meeting = await DyteClient.init({
        authToken,
        defaults: {
          audio: true,
          video: true,
        },
      });

      document.getElementById('my-meeting').meeting = meeting;
    };

    init();
  </script>
</body>

Build your own UI​

If you want more customizations, pick the components that are needed and build the UI that suits your need using low level APIs that our core SDK offers here.

<body>
  <div>
    <dyte-grid id="my-grid"></dyte-grid>
    <!--your own UI -->
    <div class="controlbar">
      <!-- Your own components -->
      <button id="mic">Toggle Mic</button>
    </div>
  </div>
  <script>
    const get_auth_token = async () => {
      // fetch('https://your-server/path-to-token');
      return '{participant-auth-token}';
    };

    const init = async () => {
      // Fetch auth token from server side
      const authToken = await get_auth_token();

      const meeting = await DyteClient.init({
        authToken,
        defaults: {
          audio: true,
          video: true,
        },
      });

      document.getElementById('my-grid').meeting = meeting;
      document.getElementById('mic').addEventListener('click', (e) => {
        if (meeting.self.audioEnabled) {
          meeting.self.disableAudio();
        } else {
          meeting.self.enableAudio();
        }
      });
    };

    init();
  </script>
</body>