ngx-webrtc

> :fire: Important
> This package is currently under development and the api is unstable.

Full featured example client with group video chats, screen sharing and more: https://github.com/lotterfriends/ngx-webrtc/tree/main/apps/demo-video-chat-client

Installation

To install this library, run:

``bash
$ npm install ngx-webrtc --save
`

Add library to your Angular AppModule:


`typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

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

// Import your library
import { NgxWebrtcModule } from 'ngx-webrtc';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,

// Specify your library as an import
NgxWebrtcModule.forRoot({
userIdentifier: 'id'
})
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
`


$3

> :bulb: Note:
> Normally you communicate over a connection layer to establish a peer connection between two devices. This is a simple example of when two connection objects can communicate directly with each other.

`html
start



`

`typescript
import { Component, ElementRef, ViewChild } from '@angular/core';
import { CallService, PeerConnectionClientSettings, StreamService } from 'ngx-webrtc';

@Component({
selector: 'ngx-webrtc-root',
templateUrl: './app.component.html',
styles: []
})
export class AppComponent {

@ViewChild('videoStreamNodePeer1', { static: false }) videoStreamNodePeer1!: ElementRef;
@ViewChild('videoStreamNodePeer2', { static: false }) videoStreamNodePeer2!: ElementRef;

constructor(
private callService: CallService,
private streamService: StreamService
) {}

async initConnection() {

const stream = await this.streamService.tryGetUserMedia();
const settings: PeerConnectionClientSettings = {
peerConnectionConfig: {
iceServers: this.callService.defaultServers,
}
};
const pclient1 = await this.callService.createPeerClient(settings);
const pclient2 = await this.callService.createPeerClient(settings);

pclient1.addStream(stream);
pclient2.addStream(stream);

pclient1.signalingMessage.subscribe(m => {
pclient2.receiveSignalingMessage(m);
});

pclient2.signalingMessage.subscribe(m => {
pclient1.receiveSignalingMessage(m);
});

pclient1.remoteStreamAdded.subscribe(stream => {
this.streamService.setStreamInNode(this.videoStreamNodePeer1.nativeElement, stream.track);
});

pclient2.remoteStreamAdded.subscribe(stream => {
this.streamService.setStreamInNode(this.videoStreamNodePeer2.nativeElement, stream.track);
});

pclient2.startAsCallee();
pclient1.startAsCaller();

}
}

`

$3

the directive add there attached node the class enabled/disabled dependent on there state.
This directives are available:
- ngxWebrtcShareScreen - trigger get capture screen permissions and send screen to CallService. You can listen to the change and call replaceTrack of peer connection to send the screen capture to that connection
- ngxWebrtcToggleAudioSelf - toggle disabled/enable audio track to mute/unmute local audio
- ngxWebrtcToggleAudioUser - send a toggle audio request to a specific peer connection
- ngxWebrtcToggleVideoSelf -toggle disabled/enable video track to mute/unmute local video
- ngxWebrtcToggleVideoUser - send a toggle video request to a specific peer connection


Usage in templates
`html

Mute Audio
Unmute Audio



Mute Video
Unmute Video


Stop Share Screen
Share Screen


• 
  
  mute for all
  disable video for all
  
  


`

Procedure

You need a link layer so that remote devices can communicate with each other. The communication takes place via events such as See Candidates, Send Connection Data, etc. The communication can be done e.g. via WebSockets, SSE, Polling, or similar. If you want to connect more than two candidates you have to make sure that the events for one candidate only arrive at this candidate, you can realize this with server and client side filters or private channels.

It must be ensured that old, already processed messages are not processed a 2nd time.

The library provides a CallService in which the status of the connected users is noted. The status contains, for example, whether a user has a camera and this is currently active. To determine a user, a user identifier is passed to the library.

Api

$3

- DeviceType
- PeerConnectionClientSignalMessageType
- StreamType

$3

- CallService
- Configuration
- DeviceService
- NgxWebrtcModule
- PeerConnectionClient
- PreferencesService
- SdpUtils
- ShareScreenDirective
- StreamService
- ToggleAudioSelfDirective
- ToggleAudioUserDirective
- ToggleVideoSelfDirective
- ToggleVideoUserDirective
- UtilityService

$3

- DevicesGroup
- FormatObject
- FormatParams
- IceServer
- NgxWebrtcConfiguration
- NgxWebrtcUser
- PeerConnectionClientSettings
- PeerConnectionClientSignalMessage
- RemotePeerComponentInterface
- SdpSettings
- StreamTrack
- User
- UserInCall

$3

- NGX\_WEBRTC\_STORAGE
- NGX\_WEBRTC\_STORAGE\_PREFIX

Variables

$3

• Const NGX\_WEBRTC\_STORAGE: InjectionToken<"localStorage" \| "sessionStorage"\>

#### Defined in

lib/ngx-webrtc-storage.ts:3

___

$3

• Const NGX\_WEBRTC\_STORAGE\_PREFIX: InjectionToken<string\>

#### Defined in

lib/ngx-webrtc-storage-prefix.ts:3


TODO

- blur / replace background
- talking detection
- example muliparty server
- customize camera quality
- error handling
- camera blocked
- chrome on IOS
- no audio device
- ...
- different conference views
- presenting
- talking

Resources and Sources

- High Performance Browser Networking
- apprtc
- jitsi-meet
- WebRTC samples
- Blog1
- Blog2
- Media Server
- Perfect negotiation
- ...

Running unit tests

Run nx test ngx-webrtc` to execute the unit tests.