Update ngx-webrtc-lib to the latest v3-lts (#31)

apps/angular-slack/src/app/app.module.ts

@@ -1,26 +1,26 @@
+import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { NgModule } from '@angular/core';
 
 import { AngularFireModule } from '@angular/fire';
+import { AngularFireAuthModule } from '@angular/fire/auth';
 import { AngularFirestoreModule } from '@angular/fire/firestore';
 import { AngularFireStorageModule } from '@angular/fire/storage';
-import { AngularFireAuthModule } from '@angular/fire/auth';
 
 import { SocketIoModule } from 'ngx-socket-io';
-import { WebRtcModule } from 'ngx-webrtc-lib'
+import { WebRtcModule } from 'ngx-webrtc-lib';
 
-import { StoreModule } from '@ngrx/store';
+import { environment } from '@angular-slack/environments/environment';
 import { EffectsModule } from '@ngrx/effects';
-import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import { StoreRouterConnectingModule } from '@ngrx/router-store';
-import { RouterStateSerializerProvider, routerReducers, RouterEffects } from './+store/router';
-import { environment } from '@angular-slack/environments/environment';
+import { StoreModule } from '@ngrx/store';
+import { StoreDevtoolsModule } from '@ngrx/store-devtools';
+import { RouterEffects, RouterStateSerializerProvider, routerReducers } from './+store/router';
 
 import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
 import { AuthModule } from './auth/auth.module';
 import { CoreModule } from './core/core.module';
-import { AppComponent } from './app.component';
 
 @NgModule({
   declarations: [
@@ -35,7 +35,10 @@ import { AppComponent } from './app.component';
     AngularFireStorageModule,
     AngularFireAuthModule,
     SocketIoModule.forRoot({ url: environment.host, options: {} }),
-    WebRtcModule.forRoot(environment.webRtc),
+    WebRtcModule.forRoot({
+      ...environment.webRtc,
+      useVirtualBackground: true,
+    }),
     StoreModule.forRoot(routerReducers, {
       runtimeChecks: {
         strictActionImmutability: true,

apps/angular-slack/src/app/core/services/video-call.service.spec.ts

@@ -39,7 +39,7 @@ describe('VideoCallService', () => {
           uid: user.uid,
           channel: user.uid,
           outcome: true,
-          user: {
+          remoteUser: {
             name: user.displayName,
             photoURL: user.photoURL,
           },
@@ -85,7 +85,7 @@ describe('VideoCallService', () => {
           uid: user.uid,
           channel: user.uid,
           outcome: true,
-          user: {
+          remoteUser: {
             name: user.displayName,
             photoURL: user.photoURL,
           },

apps/angular-slack/src/app/core/services/video-call.service.ts

@@ -30,17 +30,23 @@ export class VideoCallService {
     this.store.select(authUserSelector).pipe(
       filter((user: User) => !!user),
       take(1),
-    ).subscribe(({ uid }: User) => {
+    ).subscribe((user: User) => {
+      const { uid } = user;
+
       this.socket.on(`${Events.Call}-${uid}`, ({ caller, channel, receiver, token }: RtcEventPayload) => {
         this.dialog = this.videoCallDialog.open({
           uid,
           channel,
           token,
           outcome: false,
-          user: {
+          remoteUser: {
             name: caller.displayName,
             photoURL: caller.photoURL,
           },
+          localUser: {
+            name: user.displayName,
+            photoURL: user.photoURL,
+          },
         });
 
         this.dialog.afterConfirmation().subscribe((data: VideoCallDialogData) => {
@@ -82,10 +88,14 @@ export class VideoCallService {
             channel,
             token,
             outcome: true,
-            user: {
+            remoteUser: {
               name: receiver.displayName,
               photoURL: receiver.photoURL,
             },
+            localUser: {
+              name: caller.displayName,
+              photoURL: caller.photoURL,
+            },
           });
 
           this.available = false;