ngx-webrtc

🔥 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

💡 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

• DeviceType
• PeerConnectionClientSignalMessageType
• StreamType

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

• NGX_WEBRTC_STORAGE
• NGX_WEBRTC_STORAGE_PREFIX

Variables

NGX_WEBRTC_STORAGE

• Const NGX_WEBRTC_STORAGE: InjectionToken<"localStorage" | "sessionStorage">

Defined in

lib/ngx-webrtc-storage.ts:3

---

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.