Quickstart
This quickstart shows how to use Dyte's UI Kit prebuilt components to add live video and audio to your web applications with minimal coding and a variety of meeting UI customization options.
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.
Before Getting Started
- Make sure you've read the Getting Started with Dyte topic
and completed the following steps:
- Create a Dyte Developer Account
- Create a Dyte Meeting
- Add Participant to the meeting
Step 1: Install the SDK
Since the UI Kit is built on top of the Core SDK, you must install the
web-core
package along with the ui-kit
.
There are two ways to use UI Kit in your project, according to your project setup.
You can install the SDK using CDN, npm, or Yarn.
- CDN
- npm
- yarn
To set up UI Kit components and web-core, 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/ui-kit | |
@dytesdk/web-core |
Step 2: Get Started with Dyte Prebuilt Components
Here's a series of steps that you need to perform:
- Load the Dyte component.
- Initialize the Dyte client.
- Call the
init()
method and pass theauthToken
:
authToken | After you've created the meeting, add each participant to the meeting using the Add Participant API. The API response contains the authToken. |
-
Pass the meeting object to UI Kit, which will use it to retrieve meeting information and display it on the user interface.
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.
<head>
<script type="module">
import { defineCustomElements } from 'https://cdn.jsdelivr.net/npm/@dytesdk/ui-kit@latest/loader/index.es2017.js';
defineCustomElements();
</script>
<!-- Import Web Core via CDN too -->
<!-- <script src="https://cdn.dyte.in/core/dyte.js"></script> -->
</head>
<body>
<dyte-meeting id="my-meeting"></dyte-meeting>
<script>
const init = async () => {
const meeting = await DyteClient.init({
// Add your own auth token here
authToken: yourAuthToken,
defaults: {
audio: false,
video: false,
},
});
document.getElementById('my-meeting').showSetupScreen = false;
document.getElementById('my-meeting').meeting = meeting;
};
init();
</script>
</body>