ngx-webrtc
v0.2.4
Published
> :fire: **Important** > This package is currently under development and the api is unstable.
Downloads
93
Maintainers
Readme
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:
$ npm install ngx-webrtc --save
Add library to your Angular AppModule
:
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 { }
Simple Example
: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.
<button (click)="initConnection()">start</button>
<video id="videoStreamNodePeer1" playsinline #videoStreamNodePeer1></video>
<video id="videoStreamNodePeer2" playsinline #videoStreamNodePeer2></video>
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();
}
}
Directives
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
<button ngxWebrtcToggleAudioSelf class="toggle-audio">
<span class="on-enabled">Mute Audio</span>
<span class="on-disabled">Unmute Audio</span>
</button>
<button ngxWebrtcToggleVideoSelf class="toggle-video">
<span class="on-enabled">Mute Video</span>
<span class="on-disabled">Unmute Video</span>
</button>
<button ngxWebrtcShareScreen>
<span class="on-enabled">Stop Share Screen</span>
<span class="on-disabled">Share Screen</span>
</button>
<ul>
<li *ngFor="let user of callService.users$ | async">
<span *ngIf="user.hasMic || user.hasCam">
<button *ngIf="user.hasMic" [ngxWebrtcToggleAudioUser]="user">mute for all</button>
<button *ngIf="user.hasCam" [ngxWebrtcToggleVideoUser]="user">disable video for all</button>
</span>
</li>
</ul>
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
Enumerations
Classes
- CallService
- Configuration
- DeviceService
- NgxWebrtcModule
- PeerConnectionClient
- PreferencesService
- SdpUtils
- ShareScreenDirective
- StreamService
- ToggleAudioSelfDirective
- ToggleAudioUserDirective
- ToggleVideoSelfDirective
- ToggleVideoUserDirective
- UtilityService
Interfaces
- DevicesGroup
- FormatObject
- FormatParams
- IceServer
- NgxWebrtcConfiguration
- NgxWebrtcUser
- PeerConnectionClientSettings
- PeerConnectionClientSignalMessage
- RemotePeerComponentInterface
- SdpSettings
- StreamTrack
- User
- UserInCall
Variables
Variables
NGX_WEBRTC_STORAGE
• Const
NGX_WEBRTC_STORAGE: InjectionToken
<"localStorage"
| "sessionStorage"
>
Defined in
NGX_WEBRTC_STORAGE_PREFIX
• 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.