NgxWebrtc

This project was generated with Angular CLI version 12.2.2.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

Build package

Run npm run build:lib to build the package. The build artifacts will be stored in the dist/ directory.

Running unit tests

Run npm run test to execute the unit tests via Karma.

---

ngx-webrtc-lib

Angular microapp/library for Agora WebRTC client from Agora.io using agora-rtc-sdk-ng.

This library was generated with Angular CLI version 12.2.0.

Prerequisites

To get started with Agora, follow this guide to retrieve the AppID.

Installation

Install ngx-webrtc-lib from npm:

1npm install ngx-webrtc-lib --save

Standalone Component support

To use the library in standalone mode, follow these steps:

Provide WebRtc configuration in app.configs.ts file

1import { provideWebRtc } from 'ngx-webrtc-lib';
2
3export const appConfig: ApplicationConfig = {
4  providers: [
5    provideWebRtc({
6      AppID: 'Agora AppID',
7    }),
8    // Other providers
9  ],
10};

Import WebRtcComponent into the host component's imports:

1import { WebRtcComponent } from 'ngx-webrtc-lib';
2
3@Component({
4  standalone: true,
5  imports: [
6    WebRtcComponent,
7  ],
8  ...
9})
10export class HostComponent {
11  // Host component logic
12}

NgModule support

To use the library with NgModules, import WebRtcModule into your module's imports:

1import { WebRtcModule } from 'ngx-webrtc-lib';
2
3@NgModule({
4  ...
5  imports: [
6    WebRtcModule.forRoot({
7      AppID: 'Agora AppID',
8    }),
9  ]
10  ...
11})

Basic usage

Add WebRtcComponent to your component template:

1<ngx-webrtc
2  [channel]="channel"
3  [displaySmallScreen]="true"
4  [debug]="true"
5  [uid]="uid"
6  [token]="token"
7  (callEnd)="onCallEnd()"
8></ngx-webrtc>

Advanced usage

The library allows you to display a video call confirmation dialog. To use the dialog service:

1. Inject VideoCallDialogService into your component or service.
2. Call the open method with the required data.

This returns VideoCallDialog object with an API that allows you to:

• Programmatically close the dialog
• Accept the call, which will open WebRtcComponent
• Subscribe to the dialog state

1import { VideoCallDialogService, VideoCallDialogData } from 'ngx-webrtc-lib';
2
3constructor(private dialogService: VideoCallDialogService) { }
4
5onDialogOpen(): void {
6  const dialog = this.dialogService.open({
7    uid: this.uid,
8    token: this.token,
9    channel: this.channelId,
10    outcome: this.outcome,
11    user: this.user,
12  });
13
14  setTimeout(() => dialog.close(), 7000);
15  dialog.afterConfirmation().subscribe((data: VideoCallDialogData) => console.log(data));
16}

Import assets in your angular.json file

1"assets": [
2  {
3    "glob": "**/*",
4    "input": "./node_modules/ngx-webrtc-lib/src/assets/",
5    "output": "./assets/"
6  }
7],

For real-life video call confirmation behavior with multiple clients, where one client declines the call, and the result immediately reflects on the other clients, you need to implement your own custom solution. This is an example of the implementation using web-sockets.

How to build lib for development

1git clone https://github.com/TarasMoskovych/ngx-webrtc.git
2cd ngx-webrtc
3npm ci
4npm start

Compatibility

To use this library, please follow the versioning specified in the following table.

ngx-webrtc-lib	Angular	NodeJS
1.x	^12.2.0	^12.14.0 || ^14.15.0
2.x	^12.2.0	^12.14.0 || ^14.15.0
3.x	^12.2.0	^12.14.0 || ^14.15.0
13.x	~13.4.0	^12.20.0 || ^14.15.0 || ^16.10.0
14.x	^14.3.0	^14.15.0 || ^16.10.0
15.x	^15.2.10	^14.20.0 || ^16.13.0 || ^18.10.0
16.x	^16.2.10	^16.14.0 || ^18.10.0
17.x	^17.1.2	^18.13.0 || ^20.9.0
18.x	^18.2.10	^18.19.1 || ^20.11.1 || ^22.0.0

API reference

WebRtcComponent

Name	Description
@Input() uid: string	User identifier.
@Input() token: string	Agora token for Secure Authentication. Default value null
@Input() channel: string	Channel identifier.
@Input() debug: boolean	Enable debugging. Default value false
@Input() displaySmallScreen: boolean	Display small screen toggle. Default value false
@Output() callEnd: EventEmitter	Event that is emitted when the call is ended.

VideoCallDialogService

Name	Description
open: (VideoCallDialogData) => VideoCallDialog	Renders VideoCallComponent in the dialog.

VideoCallDialogData

Name	Description
uid: string	User identifier.
channel: string	Channel identifier.
token: string	Agora token for Secure Authentication. Default value null
outcome: boolean	Defines the UI for incoming or outgoing call modes.
user: User	User name and photo URL.

VideoCallDialog

Name	Description
acceptCall: () => void	Closes the confirmation dialog and opens WebRtcComponent with passed data before.
close: () => void	Closes the dialog with video-call confirmation component.
afterConfirmation: () => Observable<VideoCallDialogData | null>;	Returns Observable with the data depends on accepting or declining the call.
afterCallEnd: () => Observable;	Returns Observable with the value when the call is ended.