Skip to main content

Quickstart

This quickstart shows how to use Dyte's UI Kit prebuilt components to add live video and audio to your Angular application 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 Angular UI Kit GitHub repository.

Before Getting Started​

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 angular-ui-kit.

The web-core package handles all of the low-level logic required for a meeting by interacting with our servers. It is used to create a meeting object, which you need to pass to the UI Kit components.

You can install the package using npm or Yarn.

npm install @dytesdk/angular-ui-kit @dytesdk/web-core

Version​

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

Step 2: Load DyteComponentsModule​

Load the DyteComponentsModule into your app module. This is typically the app.module.ts file.

This allows you to use Dyte's UI components in your component HTML files. For more information on the components, see Angular components.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DyteComponentsModule } from '@dytesdk/angular-ui-kit';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, DyteComponentsModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

(Optional) Step 3: Allow Synthetic Default Imports

If you are using TypeScript, set allowSyntheticDefaultImports as true in your tsconfig.json.

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true
  }
}

Step 4: Add Dyte Meeting to the Template File​

Load the Dyte component to your template file (component.html).

<dyte-meeting #myid></dyte-meeting>

Step 5: Initialize the Dyte Meeting​

  1. Get a reference to the meeting component using @ViewChild().
  2. Call the init() method and pass the authToken.
authTokenAfter you've created the meeting, add each participant to the meeting using the Add Participant API. The API response contains the authToken.
  1. Pass the meeting object to the UI Kit component. 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.
class AppComponent {
  title = 'MyProject';
  @ViewChild('myid') meetingComponent: DyteMeeting;
  dyteMeeting: DyteClient;

  async ngAfterViewInit() {
    const meeting = await DyteClient.init({
      authToken: '<auth-token>',
    });
    meeting.join();
    this.dyteMeeting = meeting;
    if (this.meetingComponent) this.meetingComponent.meeting = meeting;
  }
}