Skip to main content

Angular

Quickstart​

This quickstart shows how to add RealtimeKit's Livestream SDK to your Angular applications.

Further down this guide we also explain how RealtimeKit's UI component library can help to build your UI faster with components specially made for Livestream applications.

You can also checkout our sample code for Angular. You can clone and run a sample application from the Angular Samples GitHub repository.

Before getting started​

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

Step 1: Install RealtimeKit SDK packages​

To begin, install the following packages:

  • @cloudflare/realtimekit: This core package powers video, voice, and livestream SDKs. This is a required package.
  • @cloudflare/realtimekit-ui: This package includes RealtimeKit 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.

npm install @cloudflare/realtimekit-angular-ui @cloudflare/realtimekit

Version​

@cloudflare/realtimekitnpm version
@cloudflare/realtimekit-uinpm 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.
  2. Call the RealtimeKitClient.init() method from the web-core package and pass the authToken.
class AppComponent {
  title = 'MyProject';
  rtkMeeting: RealtimeKitClient;

  async ngAfterViewInit() {
    const meeting = await RealtimeKitClient.init({
      authToken: '<auth-token>',
    });
    this.rtkMeeting = meeting;
  }
}

Now, you have established the connection with the RealtimeKit 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. RealtimeKit offers a UI Kit that is highly customizatble and uses the meeting instance that you just created.

UI Kit​

A single, feature rich <rtk-meeting /> component renders a complete meeting UI and handles all events.

Load the RtkComponentsModule into your App Module​

This is what the app.module.ts file typically looks like. This allows you to use RealtimeKit'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 { RtkComponentsModule } from '@cloudflare/realtimekit-angular-ui';
import { AppComponent } from './app.component';

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

(Optional) Allow synthetic default imports for TypeScript​

If you are using TypeScript, perform the following steps:

  1. Set allowSyntheticDefaultImports as true in your tsconfig.json.
{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true
  }
}
  1. Add the RealtimeKit meeting component to your template file (component.html).
<rtk-meeting #myid></rtk-meeting>

  1. Get a reference to the meeting component using @ViewChild().

  2. Pass the meeting object to the UI Kit component.

class AppComponent {
  title = 'MyProject';
  @ViewChild('myid') meetingComponent: RtkMeeting;
  rtkMeeting: RealtimeKitClient;

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

    if (this.meetingComponent) this.meetingComponent.meeting = meeting;
  }
}

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.

Add RealtimeKit Meeting to the Template File​

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

<div>
  <rtk-grid class="rtk-el"></rtk-grid>
  <div class="controlbar">
    <!-- Your own components -->
    <button #mic (click)="onMicToggle">Toggle Mic</button>
  </div>
</div>

Pass the meeting object to component​

class AppComponent {
  title = 'MyProject';
  rtkMeeting: RealtimeKitClient;
  @ViewChild('mic') micButton: HTMLButton;

  async ngAfterViewInit() {
    const meeting = await RealtimeKitClient.init({
      authToken: '<auth-token>',
    });

    meeting.join();
    this.rtkMeeting = meeting;
    const elements = document.getElementsByClassName('rtk-el');
    for (i = 0; i < elements.length; i++) {
      elements[i].meeting = meeting;
    }
  }

  onMicToggle() {
    if (this.rtkMeeting.self.audioEnabled) {
      this.rtkMeeting.self.disableAudio();
    } else {
      this.rtkMeeting.self.enableAudio();
    }
  }
}