This project was generated with Angular CLI version 12.2.2.
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.
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
.
Run ng build
to build the project. The build artifacts will be stored in the dist/
directory.
Run npm run build:lib
to build the package. The build artifacts will be stored in the dist/
directory.
Run npm run test
to execute the unit tests via Karma.
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.
To get started with Agora, follow this guide to retrieve the AppID
.
Install ngx-webrtc-lib
from npm
:
npm install ngx-webrtc-lib
To use the library in standalone mode, follow these steps:
Provide WebRtc
configuration in app.configs.ts
file
import { provideWebRtc } from 'ngx-webrtc-lib';
export const appConfig: ApplicationConfig = {
providers: [
provideWebRtc({
AppID: 'Agora AppID',
}),
// Other providers
],
};
Include WebRtcComponent
in the imports of your standalone host component:
import { WebRtcComponent } from 'ngx-webrtc-lib';
@Component({
standalone: true,
template: `<ngx-webrtc .../>`,
imports: [
WebRtcComponent,
],
...
})
export class HostComponent {
// Host component logic
}
To use the library with NgModules, import WebRtcModule
into your module's imports:
import { WebRtcModule } from 'ngx-webrtc-lib';
@NgModule({
...
imports: [
WebRtcModule.forRoot({
AppID: 'Agora AppID',
}),
]
...
})
Add WebRtcComponent
to your component template:
<ngx-webrtc
[channel]="channel"
[displaySmallScreen]="true"
[uid]="uid"
[token]="token"
(callEnd)="onCallEnd()"
></ngx-webrtc>
The library allows you to display a video call confirmation dialog. To use the dialog service:
- Inject
VideoCallDialogService
into your component or service. - 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
import { VideoCallDialogService, VideoCallDialogData } from 'ngx-webrtc-lib';
constructor(private dialogService: VideoCallDialogService) { }
onDialogOpen(): void {
const dialog = this.dialogService.open({
uid: this.uid,
token: this.token,
channel: this.channelId,
outcome: this.outcome,
remoteUser: this.remoteUser,
localUser: this.localUser,
});
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 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.
git clone https://github.com/TarasMoskovych/ngx-webrtc.git
cd ngx-webrtc
npm ci
npm start
To use this library, please follow the versioning specified in the following table.
ngx-webrtc-lib |
Angular | NodeJS |
---|---|---|
^12.2.0 | ^12.14.0 || ^14.15.0 | |
^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 |
Name | Description |
---|---|
AppID | The App ID provided by Agora to initialize the Agora SDK. |
debug | Enable debugging for Agora SDK. Default value false |
useVirtualBackground | Enable Agora Virtual Background feature (only the "blur" is currently supported). Default value false |
Name | Description |
---|---|
@Input() uid: string | User identifier. |
@Input() token: string | Agora token for Secure Authentication. Default value null |
@Input() channel: string | Channel identifier. |
@Input() displaySmallScreen: boolean | Display small screen toggle. Default value false |
@Input() remoteUser: User | Represents the remote user in the call. Optional, used for reference or display purposes. |
@Input() localUser: User | Represents the current user in the call. Optional, used for reference or display purposes. |
@Output() callEnd: EventEmitter | Event that is emitted when the call is ended. |
Name | Description |
---|---|
open: (VideoCallDialogData ) => VideoCallDialog |
Renders VideoCallComponent in the dialog. |
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. |
remoteUser: User | Represents the remote user in the call. It replaces the user field and should be used instead. |
localUser: User | Represents the current user in the call. Optional, used for reference or display purposes. |
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. |
Name | Description |
---|---|
name: string | The name of the user. |
photoURL: string | The URL of the user's profile photo. |