Fairoj : video chat with recording is done

.vscode/settings.json

@@ -1,3 +1,4 @@
 {
-    "javascript.implicitProjectConfig.experimentalDecorators": true
+    "javascript.implicitProjectConfig.experimentalDecorators": true,
+    "git.ignoreLimitWarning": true
 }

ng6-seed/src/app/app.module.ts

@@ -61,6 +61,7 @@ import { LoaderService } from './shared/loaderService/loader.service';
 import {SocketIoConfig, SocketIoModule} from 'ngx-socket-io';
 import { IncomingCallComponent } from './video-chat/incoming-call/incoming-call.component';
 import { VideoChatComponent } from './video-chat/video-chat.component'
+import { PushNotifyService } from './shared/push-notify.service';
 
 export function HttpLoaderFactory(http: HttpClient) {
     return new TranslateHttpLoader(http);
@@ -132,6 +133,7 @@ const socketConfig: SocketIoConfig = { url: environment.socketServerUrl, options
     AwsService,AuthGuard,
     TranslateService,
     PdTrigerService,
+    PushNotifyService,
     // {
     //    provide: PERFECT_SCROLLBAR_CONFIG,
     //    useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG

ng6-seed/src/app/layouts/admin/admin-layout.component.ts

@@ -19,6 +19,7 @@ import { IncomingCallComponent } from '../../video-chat/incoming-call/incoming-c
 import { Socket } from 'ngx-socket-io';
 import { MatDialog } from '@angular/material';
 import { VideoChatComponent } from 'app/video-chat/video-chat.component';
+import { PushNotifyService } from 'app/shared/push-notify.service';
 
 
 
@@ -64,7 +65,8 @@ export class AdminLayoutComponent implements OnInit, OnDestroy {
   alertTAT: any;
   countTAT: number;
   incomingDialogOpened:boolean = false
-  constructor(private router: Router, public menuItems: MenuItems, public horizontalMenuItems : HorizontalMenuItems, public translate: TranslateService,public aws:AwsService,public users:UserService,private _dashboardService: DashboardService,private messagingService:MessagingService,private socket:Socket,private matDialog:MatDialog) {
+  constructor(private router: Router, public menuItems: MenuItems, public horizontalMenuItems : HorizontalMenuItems, public translate: TranslateService,public aws:AwsService,public users:UserService,private _dashboardService: DashboardService,private messagingService:MessagingService,private socket:Socket,private matDialog:MatDialog,
+    private _notificationService:PushNotifyService) {
    
     const browserLang: string = translate.getBrowserLang();
     translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
@@ -116,6 +118,7 @@ export class AdminLayoutComponent implements OnInit, OnDestroy {
           
         });
         // this.alertForTAT();
+        this._notificationService.requestPermission();
   }
 
   ngOnInit(): void {
@@ -143,7 +146,7 @@ export class AdminLayoutComponent implements OnInit, OnDestroy {
       }
     });
     this.listenForCalls()
-    this.openIncomingDialog();
+    // this.openIncomingDialog();
   }
  
   @HostListener('click', ['$event'])
@@ -298,6 +301,7 @@ export class AdminLayoutComponent implements OnInit, OnDestroy {
     this.aws.logout().subscribe(res=>{
       //alert("res");
       localStorage.removeItem('user_role');
+      localStorage.removeItem('pd_short_info');
       this.messagingService.unsubscribeNotification()
       setTimeout(()=>{
       this.router.navigate(['/authentication/login']);
@@ -319,17 +323,30 @@ export class AdminLayoutComponent implements OnInit, OnDestroy {
   // FOR LISTENING TO RECIEVE CALLS FROM CALLER
   listenForCalls() {
     // this.socket.on('BackOffer', this.connectPeer)
-    this.socket.fromEvent('BackOffer').subscribe(res=>{
+    let userrole = localStorage.getItem('user_role')
+    if(userrole == '5') {
+      let pd_short_info:any = localStorage.getItem('pd_short_info')
+      pd_short_info = JSON.parse(pd_short_info);
+    this.socket.fromEvent('BackOffer').subscribe((res:any)=>{
       console.log(res)
-      this.connectPeer(res);
+      if(res && res.hasOwnProperty('random_string') && res.random_string){
+        if(pd_short_info.filter(val=>val.random_string == res.random_string).length > 0){
+          let curr_pd_info= pd_short_info.filter(val=>val.random_string == res.random_string)[0]
+          if(curr_pd_info) {
+            this.connectPeer(res,curr_pd_info);
+          }
+        }
+      }
     })
   }
-  connectPeer(offer) {
+  }
+  connectPeer(offer,curr_pd_info) {
     console.log(offer)
     // alert("Offer is listened");
-   this.openIncomingDialog(offer);
+    this.notify('Incoming Call','Calling from ' + curr_pd_info.applicant_name + ' (' +curr_pd_info.pd_sno+ ')')
+   this.openIncomingDialog(offer,curr_pd_info);
   }
-  openIncomingDialog(offer?) {
+  openIncomingDialog(offer?,curr_pd_info?) {
     if(this.incomingDialogOpened == true) {
       return;
     }
@@ -337,6 +354,7 @@ export class AdminLayoutComponent implements OnInit, OnDestroy {
     const dialogRef = this.matDialog.open(IncomingCallComponent,{
       // minWidth:'25%',
         // maxWidth:'30%',
+        data:curr_pd_info,
         disableClose: true,
         backdropClass: 'incoming-call-background' ,
         panelClass:'incoming-call-background'
@@ -354,7 +372,7 @@ export class AdminLayoutComponent implements OnInit, OnDestroy {
   }
   openVideoChatDialog(offer) {
     let dialogRef  = this.matDialog.open(VideoChatComponent,{
-      data:{chat_info:'call_recieving',JSON_to_connect:offer},
+      data:offer,
       maxWidth: '100vw',
       maxHeight: '100vh',
       height: '100%',
@@ -363,4 +381,12 @@ export class AdminLayoutComponent implements OnInit, OnDestroy {
       panelClass:'video-chat'
     })
   }
+  notify(title,approval) {
+    let data: Array < any >= [];
+    data.push({
+        'title': title,
+        'body': approval
+    });
+    this._notificationService.generateNotificationWithTitle(data);
+}
 }

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/view-pd/view-pd.component.html

@@ -127,6 +127,10 @@
       <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="60" fxFlex.lg="70" fxFlex.xl="70" class="content-data" *ngFor="let master of pdMasterData">
           <div fxLayout="row">
               <div fxFlex="100" align="right"> 
+                  <button mat-button mat-raised-button class="mr-1 mb-1"  color="primary" (click)="openVideoChat()">
+                      <mat-icon>videocam</mat-icon>
+                      <strong>Call</strong>
+                    </button>
                   <button mat-raised-button class="mr-1 mb-1"  color="primary" style="cursor: not-allowed !important;">
                 <strong> {{master.pd_status==pdStatusCheck.QC_COMPLETED ? 'QC Completed' : master.pd_status==pdStatusCheck.ADD_ON_PENDING ? 'Addon Pending' : master.pd_status | titlecase}}</strong>
               </button>

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/view-pd/view-pd.component.ts

@@ -19,6 +19,7 @@ import { InitiateAdditionalPdComponent } from './../initiate-additional-pd/initi
 
 /**sweet alert */
 import Swal from 'sweetalert2';
+import { VideoChatComponent } from 'app/video-chat/video-chat.component';
 
 @Component({
   selector: 'app-view-pd',
@@ -559,5 +560,15 @@ export class ViewPdComponent implements OnInit, OnDestroy {
     })
 
   }
-
+  openVideoChat(){
+    let dialogRef  = this.dialog.open(VideoChatComponent,{
+      data:{type:'init',random_string:this.pdMasterData[0].random_string},
+      maxWidth: '100vw',
+      maxHeight: '100vh',
+      height: '100%',
+      width: '100%',
+      disableClose: true,
+      panelClass:'video-chat'
+    })
+  }
 }

ng6-seed/src/app/personal-discussion/pd-service/pd-triger.service.ts

@@ -185,6 +185,13 @@ export class PdTrigerService {
     // get pd details
     getPdDetails(): Observable<any> {
         return this._http.get<any>(this.apiUrl + "listLessPDDetails/get")
+        .map(res=>{
+            if(res['dataStatus']) {
+                let pd_det = res['records'].map(val=>{ return {applicant_name:val.applicant_name,pd_id:val.pd_id,random_string:val.random_string,pd_sno:val.pd_sno}})
+                localStorage.setItem('pd_short_info',JSON.stringify(pd_det));
+                return res
+            }
+        })
             .pipe(
             catchError(this.handleError('operation', []))
             )

ng6-seed/src/app/shared/push-notify.service.ts

@@ -68,6 +68,18 @@ export class PushNotifyService {
           let notify = self.create('', options).subscribe();
       })
   }
+  generateNotificationWithTitle(source: Array < any > ): void {
+    let self = this;
+    source.forEach((item) => {
+        let options = {
+            body: item.body,
+            icon: item.icon,
+            sound:'src/assets/spinner/notify.mp3',
+            sticky:true
+        };
+        let notify = self.create(item.title, options).subscribe();
+    })
+}
 }
 export declare type Permission = 'denied' | 'granted' | 'default';
 export interface PushNotification {

ng6-seed/src/app/video-chat/incoming-call/incoming-call.component.html

@@ -7,9 +7,10 @@
   <img class="img-circle" src="../../assets/spinner/notfound_blue.png" alt="Image"/>
 </div>
   </div>
-  <div fxLayout="row" class="user-name" fxLayoutAlign="center center">
+  <div fxLayout="column" class="user-name" fxLayoutAlign="center center">
     <!-- <div > -->
-      <h6>User Name</h6>
+      <h5>{{this.pd_info.applicant_name}}</h5>
+      <h6>{{this.pd_info.pd_sno}}</h6>
     <!-- </div> -->
   </div>
     <div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="30px" fxLayoutGap.xs="5px">

ng6-seed/src/app/video-chat/incoming-call/incoming-call.component.scss

@@ -9,9 +9,12 @@
   }
   .user-name {
       margin: 8% !important;
-      h6{
+      h5{
       font-weight: bold;
       }
+      h6{
+        margin-top: 8px;
+      }
       color: white
   }
   .call-animation {

ng6-seed/src/app/video-chat/incoming-call/incoming-call.component.ts

@@ -1,5 +1,5 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Inject } from '@angular/core';
-import { MatDialogRef } from '@angular/material';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
 
 @Component({
   selector: 'app-incoming-call',
@@ -8,7 +8,9 @@ import { MatDialogRef } from '@angular/material';
 })
 export class IncomingCallComponent implements OnInit {
 
-  constructor(private dialogRef:MatDialogRef<IncomingCallComponent>) { }
+  constructor(private dialogRef:MatDialogRef<IncomingCallComponent>, @Inject(MAT_DIALOG_DATA) public pd_info:any) { 
+    console.log(this.pd_info)
+  }
 
   ngOnInit() {
   }

ng6-seed/src/app/video-chat/video-chat.component.html

@@ -4,68 +4,72 @@
         matTooltipPosition="right" (click)="close_all()">
         <mat-icon>close</mat-icon>
     </button>
+    <!-- <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close"
+        matTooltipPosition="right" (click)="stopRecording()">
+        <mat-icon>stop</mat-icon>
+    </button> -->
 </div>
 <!-- <mat-dialog-content> -->
   <!-- <div fxLayout="row"> -->
-<div [style.visibility] ="is_video_enable? 'visible' : 'hidden'">
+    <div [style.visibility] ="is_video_enable? 'visible' : 'hidden'" >
-  <!-- <div class="my_video"> -->
+      <!-- <div class="my_video"> -->
-<video #myvideo id="myvideo" [style.visibility]="myVideoEnable? 'visible' : 'hidden'" muted></video>
+    <video #myvideo id="myvideo" [style.visibility]="myVideoEnable? 'visible' : 'hidden'" muted></video>
-<!-- </div> -->
-<div class="peer_video" fxLayoutAlign="center" >
-<video id="peervideo" #peervideo  [style.visibility]="peerVideoEnable? 'visible' : 'hidden'"></video>
-</div>
-<!-- <input type="text" ><br/> -->
-<!-- {{peerVideoEnable}} -->
-<!-- <div class="peer_message" *ngIf="peerVideoEnable == false">
-    <p> Waiting for Connection</p>
-</div> -->
-<!-- <div class="input-group mb-3">
-    <label>Paste the JSON String</label>
-    <input type="text" class="form-control" [(ngModel)]="targetpeer" placeholder="JSON String" aria-label="Username" aria-describedby="basic-addon1">
-  </div> -->
-<!-- <button type="button" class="btn btn-primary" (click)="connect()" >Connect</button> -->
-<!-- <button type="button"  (click)="message()">Send Message</button> -->
-<div style="text-align: center;float:center" fxLayout="row" fxLayoutAlign="center" fxLayoutGap = "25px">
-<!-- <button type="button" style="width: 90px" (click)="switch_camera()" class="btn btn-primary btn-lg" disabled #camera_switch>Switch</button> -->
-<!-- <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Switch Camera"
-        matTooltipPosition="above" (click)="switch_camera()" disabled #camera_switch >
-        <mat-icon>switch_camera</mat-icon>
-    </button> -->
-<!-- <button type="button" style="width: 90px" (click)="start_Calling('init')" class="btn btn-primary btn-lg" *ngIf="!peerVideoEnable">Call</button><br/> -->
-<!-- <button type="button" style="width: 90px" (click)="start_Calling('notinit')" class="btn btn-primary btn-lg" *ngIf="!peerVideoEnable">Recieve</button><br/> -->
-<!-- <button    class="mr-1 mb-1 hover-icon" type="button" matTooltip="Disconnect"
-matTooltipPosition="above"  *ngIf="peerVideoEnable"><mat-icon>call_end</mat-icon></button><br/> -->
-<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Video Off / On"
-        matTooltipPosition="above" (click)="videoHandling()" *ngIf="peerVideoEnable">
-        <mat-icon *ngIf="video_mute">videocam_off</mat-icon>
-        <mat-icon *ngIf="!video_mute">videocam</mat-icon>
-    </button>
-    <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Mic Off / On"
-        matTooltipPosition="above" (click)="micMuteHandling()" *ngIf="peerVideoEnable">
-        <mat-icon *ngIf="mic_mute">mic_off</mat-icon>
-        <mat-icon *ngIf="!mic_mute">mic</mat-icon>
-    </button>
-<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Disconnect"
-        matTooltipPosition="above" (click)="disconnect()" *ngIf="peerVideoEnable">
-        <mat-icon>call_end</mat-icon>
-    </button>
-</div>
-</div>
-<div fxLayoutAlign="center center" style="margin-top:10%" *ngIf="!is_video_enable">
-    <div fxLayout="column" fxLayoutAlign="center center">
-      <div fxLayout="row">
-  <button mat-raised-button type="button" matTooltip="Start Video Chat" matTooltipPosition = "above">
-    <mat-icon>videocam</mat-icon>
-    Start Video Chat
-  </button>
-</div>
     <!-- </div> -->
-  <!-- <div fxLayout="column"> -->
+    <div class="peer_video" fxLayoutAlign="center"  [ngStyle] = "{'height': !peerVideoEnable ? '5%': ''}">
-  <div class="note-label">
+    <video id="peervideo" #peervideo  [style.visibility]="peerVideoEnable? 'visible' : 'hidden'"></video>
-    <p>Note : Make sure the Reciever is waiting for your call before start Calling</p>
+    </div>
-  </div>
+    <!-- <input type="text" ><br/> -->
-<!-- </div> -->
+    <!-- {{peerVideoEnable}} -->
-</div>
+    <div class="peer_message" *ngIf="peerVideoEnable == false" fxLayoutAlign="center">
-</div>
+        <p style="text-align: center"> {{user_msg}} </p><br/>
-<!-- </div> -->
+    </div>
-<!-- </mat-dialog-content> -->
+    <!-- <div class="input-group mb-3">
+        <label>Paste the JSON String</label>
+        <input type="text" class="form-control" [(ngModel)]="targetpeer" placeholder="JSON String" aria-label="Username" aria-describedby="basic-addon1">
+      </div> -->
+    <!-- <button type="button" class="btn btn-primary" (click)="connect()" >Connect</button> -->
+    <!-- <button type="button"  (click)="message()">Send Message</button> -->
+    <div style="text-align: center;float:center" fxLayout="row" fxLayoutAlign="center" fxLayoutGap = "25px" >
+    <!-- <button type="button" style="width: 90px" (click)="switch_camera()" class="btn btn-primary btn-lg" disabled #camera_switch>Switch</button> -->
+    <!-- <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Switch Camera"
+            matTooltipPosition="above" (click)="switch_camera()" disabled #camera_switch >
+            <mat-icon>switch_camera</mat-icon>
+        </button> -->
+    <!-- <button type="button" style="width: 90px" (click)="start_Calling('init')" class="btn btn-primary btn-lg" *ngIf="!peerVideoEnable">Call</button><br/> -->
+    <!-- <button type="button" style="width: 90px" (click)="start_Calling('notinit')" class="btn btn-primary btn-lg" *ngIf="!peerVideoEnable">Recieve</button><br/> -->
+    <!-- <button    class="mr-1 mb-1 hover-icon" type="button" matTooltip="Disconnect"
+    matTooltipPosition="above"  *ngIf="peerVideoEnable"><mat-icon>call_end</mat-icon></button><br/> -->
+    <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Video Off / On"
+            matTooltipPosition="above" (click)="videoHandling()" *ngIf="peerVideoEnable">
+            <mat-icon *ngIf="video_mute">videocam_off</mat-icon>
+            <mat-icon *ngIf="!video_mute">videocam</mat-icon>
+        </button>
+        <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Mic Off / On"
+            matTooltipPosition="above" (click)="micMuteHandling()" *ngIf="peerVideoEnable">
+            <mat-icon *ngIf="mic_mute">mic_off</mat-icon>
+            <mat-icon *ngIf="!mic_mute">mic</mat-icon>
+        </button>
+    <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Disconnect"
+            matTooltipPosition="above" (click)="disconnect()"  >
+            <mat-icon>call_end</mat-icon>
+        </button>
+    </div>
+    </div>
+    <div fxLayoutAlign="center center"  *ngIf="!is_video_enable" >
+        <div fxLayout="column" fxLayoutAlign="center center" style="position: absolute;bottom: 30%">
+          <div fxLayout="row">
+      <button mat-raised-button type="button" matTooltip="Start Video Chat" matTooltipPosition = "above" (click)="start_Calling('init')">
+        <mat-icon>videocam</mat-icon>
+        Start Video Chat
+      </button>
+    </div>
+        <!-- </div> -->
+      <!-- <div fxLayout="column"> -->
+      <div class="note-label">
+        <p>Note : Make sure the Reciever is waiting for your call before start Calling</p>
+      </div>
+    <!-- </div> -->
+    </div>
+    </div>
+    <!-- </div> -->
+    <!-- </mat-dialog-content> -->

ng6-seed/src/app/video-chat/video-chat.component.scss

@@ -1,9 +1,10 @@
 ::ng-deep { .video-chat > mat-dialog-container {
-    background: #71AFFF;
+    background: #eee;
     padding: 0;
   }
 }
 
+
 @media(max-width:500px) {
 
     video#myvideo {
@@ -15,26 +16,31 @@
         left: 0;
         // /* top: 20px;
 }
-
+.body-container {
+    padding: 0px !important;
+}
 video#peervideo {
     /* height: 498px; */
     // position: relative;
     // margin-top: 126px;
     width: 100%;
+    margin-top: 5%;
+
 }
 
-.peer_message{
+// .peer_message{
-    font-size: 20px;
+//     font-size: 20px;
-    position: absolute;
+//     position: absolute;
-    top: 11%;
+//     top: 11%;
-    float: right;
+//     bottom: 10%;
-    padding: 57px;
+//     float: right;
-    /* border: 2px solid lavender; */
+//     padding: 57px;
-    left: 8%;
+//     /* border: 2px solid lavender; */
-    p{
+//     left: 8%;
-        text-align: center;
+//     p{
-    }
+//         text-align: center;
-}
+//     }
+// }
     }
     @media(min-width:500px) {
         .peer_video{

ng6-seed/src/app/video-chat/video-chat.component.ts

@@ -28,6 +28,8 @@ export class VideoChatComponent implements OnInit {
   is_video_enable:boolean = false;
   mic_mute: boolean = true;
   video_mute: boolean = true;
+  user_msg: string;
+  recorder: any;
   constructor(private _notificationService:PushNotifyService,
     private cdRef: ChangeDetectorRef,private socket: Socket,
     private dialogRef: MatDialogRef<VideoChatComponent>,
@@ -42,7 +44,7 @@ export class VideoChatComponent implements OnInit {
         'title': title,
         'body': approval
     });
-    this._notificationService.generateNotification(data);
+    this._notificationService.generateNotificationWithTitle(data);
 }
   // ngOnInit() {
   //   setTimeout(()=>{
@@ -77,7 +79,7 @@ export class VideoChatComponent implements OnInit {
   ngOnInit() {
     console.log(this.chat_info);
    if(this.chat_info) {
-    if(this.chat_info.chat_info == 'call_recieving' && this.chat_info.hasOwnProperty('JSON_to_connect') && this.chat_info.JSON_to_connect) {
+    if(this.chat_info.type == 'offer' && this.chat_info.hasOwnProperty('JSON_to_connect') && this.chat_info.JSON_to_connect) {
       this.is_video_enable = true;
       this.start_Calling('receive')
     }
@@ -85,6 +87,7 @@ export class VideoChatComponent implements OnInit {
       // this.start_Calling('receive')
   }
   start_Calling(option) {
+    this.user_msg ="Establishing Connection..."
     this.userCallType = option
     // let texk=this.textCopyElement.nativeElement
     let video = this.myVideo.nativeElement;
@@ -107,6 +110,7 @@ export class VideoChatComponent implements OnInit {
     this.fetchVideoAndPlay(stream,video);
     this.myVideoEnable = true
     this.MediaStream = stream
+    this.is_video_enable = true;
     // let switchCameraBtn= this.camereSwitchBtn.nativeElement
     let supports = navigator.mediaDevices.getSupportedConstraints();
     console.log(supports)
@@ -124,13 +128,13 @@ export class VideoChatComponent implements OnInit {
         iceServers: [
           {
             "urls": "stun:numb.viagenie.ca",
-            "username": 'fairojm@gmail.com',
+            "username": 'fairoj@venbainfotech.com',
-            "credential": 'fairojfai00'
+            "credential": '0987123400'
           },
           {
             "urls": "turn:numb.viagenie.ca",
-            "username": "fairojm@gmail.com",
+            "username": "fairoj@venbainfotech.com",
-            "credential": "fairojfai00"
+            "credential": "0987123400"
           }
         ]
       }
@@ -142,15 +146,19 @@ export class VideoChatComponent implements OnInit {
       console.log(JSON.stringify(data));
       if(data.hasOwnProperty('type') && data.type == 'offer'){
         console.log("entered!!!!!!!!!!!!!!!!1");
-      this.socket.emit('Offer', data)
+        this.user_msg = "Calling..."
-      }
+        let event_data = {JSON_to_connect:data,type:'offer',random_string:this.chat_info.random_string}
-      else if(data.type == 'answer'){
+      this.socket.emit('Offer', event_data)
-        this.socket.emit('Answer', data)
       }
+      else if(data.type == 'answer' ){
+        this.user_msg = "Waiting For Connection..."
+        let event_data = {JSON_to_connect:data,type:'answer',random_string:this.chat_info.random_string}
+        this.socket.emit('Answer', event_data)     
+       }
       // copyMessage(JSON.stringify(data))
       copyMessageText = JSON.stringify(data);
       // update()
-      this.copyMessage(copyMessageText,data.type)
+      // this.copyMessage(copyMessageText,data.type)
       // this.targetpeer = data;
     })
   // }
@@ -161,11 +169,11 @@ export class VideoChatComponent implements OnInit {
       console.log("Peer Connection is closed ",data);
       this.disconnect();
       // alert("Peer Connection is closed " +JSON.stringify(data))
-      this.notify("Connection Closed",'Peer Connection Closed'+JSON.stringify(data))
+      this.notify("Connection Closed",'Peer Connection Closed')
     })
     peerx.on('error', (err) => {
       console.log("Fatal Error ",err);
-    
+      this.disconnect();
       alert("Fatal Error" +JSON.stringify(err))
     })
     peerx.on('stream', (stream)=> {
@@ -215,7 +223,9 @@ export class VideoChatComponent implements OnInit {
   function connectPeer(answer) {
     console.log("$$$$$$$$$$$$$$44");
     console.log(answer);
-    peerx.signal(answer);
+    setTimeout(()=>{
+    peerx.signal(answer.JSON_to_connect);
+  },1000)
   }
   function getPeer(){
     return JSON.stringify(copyMessageText)
@@ -226,11 +236,11 @@ export class VideoChatComponent implements OnInit {
 //   this.socket.on('BackOffer', getPeer)
 // },2000)
   // }
-  if(this.chat_info.chat_info == 'call_recieving' && this.chat_info.JSON_to_connect && this.chat_info.JSON_to_connect != undefined) {
+  if(this.chat_info.type == 'offer' && this.chat_info.JSON_to_connect && this.chat_info.JSON_to_connect != undefined) {
-    connectPeer(this.chat_info.JSON_to_connect)
+    connectPeer(this.chat_info)
   }
-  let tt = this.socket.on('BackOffer', connectPeer)
+  // let tt = this.socket.on('BackOffer', connectPeer)
-  console.log(tt);
+  // console.log(tt);
   this.socket.on('BackAnswer', connectPeer)
     }, err=>{
     console.log('Failed to get stream', err);
@@ -259,13 +269,7 @@ export class VideoChatComponent implements OnInit {
   }
   fetchVideoAndPlay(stream,videotype,enablePeerVideo?) {
     console.log("12@@@@@@@@@2",enablePeerVideo)
-    if(enablePeerVideo) {
+    
-      this.peerVideoEnable = enablePeerVideo
-      // this.camereSwitchBtn.nativeElement.disabled = true;
-      console.log(this.peerVideoEnable);
-      this.cdRef.detectChanges();
-      // this.startRecording(stream)
-    }
     fetch('')
     .then(response => response.blob())
     .then(blob => {
@@ -274,29 +278,36 @@ export class VideoChatComponent implements OnInit {
     })
     .then(_ => {
       // Video playback started ;)
+      if(enablePeerVideo) {
+        if(this.peervideo.nativeElement.videoHeight >= 500) {
+          this.peervideo.nativeElement.style.marginTop = '0px'
+        }
+        this.peerVideoEnable = enablePeerVideo
+        // this.camereSwitchBtn.nativeElement.disabled = true;
+        console.log("peervideo check",this.peerVideoEnable,this.peervideo.nativeElement.videoWidth,this.peervideo.nativeElement.videoHeight);
+        this.cdRef.detectChanges();
+        this.startRecording(stream)
+      }
     })
     .catch(e => {
       // Video playback failed ;(
     })
   }
-  startRecording(stream) {
+  async startRecording(stream) {
-    let recorder = new RecordRTCPromisesHandler(stream, {
+    this.recorder = []
+    this.recorder = new RecordRTCPromisesHandler(stream, {
       type: 'video',
       mimeType: 'video/webm', // or video/webm\;codecs=h264 or video/webm\;codecs=vp9
       audioBitsPerSecond: 128000,
       videoBitsPerSecond: 128000,
       bitsPerSecond: 128000 // if this line is provided, skip above 
   });
-  recorder.startRecording();
+  this.recorder.startRecording();
-  const sleep = m => new Promise(r => setTimeout(r, m));
+  // const sleep = m => new Promise(r => setTimeout(r, m));
-sleep(3000);
+  // await sleep(3000);
-setTimeout(()=>{
+// setTimeout(()=>{
-recorder.stopRecording();
+
-console.log(recorder);
+// });
-let blob =  recorder.getBlob();
-recorder.getDataURL().then(dataURL=>{ 
-console.log("@@@@@",dataURL)
-});
 // var file = new File([blob], 'video.mp4', {
 //   type: 'video/mp4'
 // });
@@ -332,9 +343,26 @@ console.log("@@@@@",dataURL)
 // const fileURL = window.URL.createObjectURL(blob);
 // console.log(fileURL);
 // window.open(fileURL);
-},10000)
 // invokeSaveAsDialog(blob);
   }
+ async stopRecording() {
+    await this.recorder.stopRecording();
+    console.log(this.recorder);
+    let blob =  await this.recorder.getBlob();
+    setTimeout(()=>{
+      console.log(typeof(blob),blob);
+      var file = new File([blob], 'video.mp4', {
+          type: 'video/mp4'
+        });
+        console.log(file)
+        const fileURL = window.URL.createObjectURL(file);
+        alert("saved Recording will be opened in a new window");
+        window.open(fileURL);
+    },3000);
+    this.recorder.getDataURL().then(dataURL=>{ 
+    console.log("@@@@@",dataURL)
+  })
+}
   connect() {
     this.peer.signal(JSON.parse(this.targetpeer));
   }
@@ -354,8 +382,12 @@ console.log("@@@@@",dataURL)
     this.peer.destroy();
     this.peerVideoEnable = false
     this.targetpeer = ''
-    this.cdRef.detectChanges();
+    this.peer = ''
+    // this.cdRef.detectChanges();
     this.peervideo.nativeElement.pause();
+    this.stopRecording().then(res=>{
+
+    })
     console.log(this.MediaStream.getTracks())
     // this.MediaStream.stop()
     // var track = this.MediaStream.getTracks()[0];  // if only one media track
@@ -367,8 +399,10 @@ console.log("@@@@@",dataURL)
     console.log(this.peervideo);
     // this.peervideo.nativeElement.videoWidth = 0
     // this.peervideo.nativeElement.videoHeight = 0
+    this.myVideo.nativeElement.pause();
     this.is_video_enable = false
     this.cdRef.detectChanges();
+    console.log(this.peer)
   }
    copyMessage(val: string,message?){
     const selBox = document.createElement('textarea');

ng6-seed/src/environments/environment.prod.ts

@@ -4,6 +4,7 @@ export const environment = {
   environmentName: 'Production Environment',//Live Environment.
 
   apiEndpoint: 'https://api.pdgenie.com/sparqprod/api/',
+  socketServerUrl:'https://morning-garden-90282.herokuapp.com',
 
   authorization: 'TnAwuc64pVpcB9xf',
   login_string: "cognito-idp.ap-south-1.amazonaws.com/ap-south-1_MlTee1O5V",

ng6-seed/src/environments/environment.stage.ts

@@ -4,6 +4,7 @@ export const environment = {
   environmentName: 'Testing Environment',//Test Environment.
 
   apiEndpoint: 'https://apitest.pdgenie.com/sparqtest/api/',
+  socketServerUrl:'https://morning-garden-90282.herokuapp.com',
 
   authorization: 'sparqvenba2018',
   login_string: "cognito-idp.ap-south-1.amazonaws.com/ap-south-1_qQ85yQZJO",