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.

Installation

Install ngx-webrtc-lib from npm:

npm install ngx-webrtc-lib --save

Add wanted package to NgModule imports:

import { WebRtcModule } from 'ngx-webrtc-lib';

@NgModule({
  ...
  imports: [
    WebRtcModule.forRoot({
      AppID: 'agora AppID',
    }),
  ]
  ...
})

You can get started with Agora by following this guide and retrieve the Appid.

Basic usage

Add WebRtcComponent to your component template:

<ngx-webrtc
  [channel]="channel"
  [displaySmallScreen]="true"
  [debug]="true"
  [uid]="uid"
  (callEnd)="onCallEnd()"
></ngx-webrtc>

Advanced usage

The library allows you to display a video call confirmation dialog. Inject VideoCallDialogService into your component/service and call open method by passing the required data. It will return a dialog object VideoCallDialog with an API where you can programmatically close the dialog, accept the call (it will open WebRtcComponent) and subscribe to the dialog state.

import { VideoCallDialogService, VideoCallDialogData } from 'ngx-webrtc-lib';

constructor(private dialogService: VideoCallDialogService) { }

onDialogOpen(): void {
  const dialog = this.dialogService.open({
    uid: this.uid,
    channel: this.channelId,
    outcome: this.outcome,
    user: this.user,
  });

  setTimeout(() => dialog.close(), 7000);
  dialog.afterConfirmation().subscribe((data: VideoCallDialogData) => console.log(data));
}

Import assets in your angular.json file

"assets": [
  {
    "glob": "**/*",
    "input": "./node_modules/ngx-webrtc-lib/src/assets/",
    "output": "./assets/"
  }
],

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

How to build lib for development

git clone https://github.com/TarasMoskovych/ngx-webrtc.git
cd ngx-webrtc
npm ci
npm 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 |

API reference

WebRtcComponent

| Name | Description | | ------------------------------------- | ---------------------------------------------------- | | @Input() uid: string | User identifier. | | @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. | | outcome: boolean | Defines the UI for income or outcome call mode. | | 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. |