New token interceptor handling token refresh,schedule date picker issue, video chat and recording changes

ng6-seed/src/app/AwsService/aws.service.ts

@@ -544,7 +544,12 @@ export class AwsService {
 
   getlocale(){
     let session:any = this.shared.getAccessToken() || "";
+    if(session && session != "") {
     return session.idToken.payload.locale;
+    }
+    else{
+    return session
+    }
   }
 
   adminchangeData(userData,changeusers){

ng6-seed/src/app/AwsService/cognito.service.ts

@@ -129,26 +129,33 @@ isloggin:boolean = false;
 // }
 refresh() {
   let tokenexp:boolean;
-  this.getCurrentUser().getSession(function (err, session) {
+  return Observable.create(observer=>{
+    console.log("Current user check in token refresh fun",this.getCurrentUser())
+ return this.getCurrentUser().getSession(function (err, session) {
       if (err) {
+        console.log("Error Refreshing token",err);
       }
 
       else {
           if (session.isValid()) {
             tokenexp = session.isValid();
             of(tokenexp)
-              
+            console.log("CognitoUtil: refreshed successfully");
           } else {
             tokenexp = session.isValid();      
+            console.log("CognitoUtil: refreshed but session is still not valid");        
           }
       }
       
-         return tokenexp;
+      observer.next(tokenexp)
+      observer.complete()
       
   });
+});
 }
 getAccessToken(){
-  this.refresh();
+  // console.log("Starting Token Refresh in getAccessToken")
+  this.refresh()
   let jwttoken = '';
   if (this.getCurrentUser() != null) {
     //console.log(JSON.stringify(this.getCurrentUser()));

ng6-seed/src/app/_guard/auth.guard.ts

@@ -21,7 +21,7 @@ export class AuthGuard implements CanActivate, CanActivateChild {
 
     canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
        
-        if (this.shared.getToken()) {
+        if (this.shared.getCurrentUser() != null && this.shared.getToken()) {
             // alert("if");
             
                 return true;

ng6-seed/src/app/_guard/req-token.interceptor.ts

@@ -0,0 +1,260 @@
+import { Injectable, Injector } from '@angular/core';
+import {
+  HttpRequest,
+  HttpHandler,
+  HttpInterceptor,
+  HttpSentEvent,
+  HttpHeaderResponse,
+  HttpProgressEvent,
+  HttpResponse,
+  HttpUserEvent,
+  HttpEvent
+} from '@angular/common/http';
+// import { AuthGuard } from './auth.guard';
+import { Observable, of, BehaviorSubject, throwError} from 'rxjs';
+
+// import { Router } from '@angular/router';
+
+import { switchMap, tap, catchError, finalize } from 'rxjs/operators';
+import { HttpErrorResponse } from "@angular/common/http";
+import { Router } from '@angular/router';
+import { CognitoService } from 'app/AwsService/cognito.service';
+import { LoaderService } from 'app/shared/loaderService/loader.service';
+import { environment } from '../../environments/environment';
+import { AwsService } from 'app/AwsService/aws.service';
+
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ReqTokenInterceptor implements HttpInterceptor{
+  
+  constructor( private router: Router,public shared:CognitoService,private loaderService:LoaderService,private awsService:AwsService) {
+    
+  }
+  isRefreshingToken: boolean = false;
+  tokenSubject: BehaviorSubject<string> = new BehaviorSubject<string>(null);
+  
+  addToken(req: HttpRequest<any>, token: string): HttpRequest<any> {
+  
+    return req.clone({
+      setHeaders: {
+        'Authorization': environment.authorization,
+        'Token': token
+      }
+    })
+  }
+// addToken1(req: HttpRequest<any>, token: string): HttpRequest<any> {
+ 
+//     console.log("Token 1",token,req);
+//     return req.clone({ setHeaders: {'Authorization':  environment.authorization,
+//                                     'Token':token,
+//                                     // 'From':'2',
+//                                     }})
+// }
+intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpSentEvent | HttpHeaderResponse | HttpProgressEvent | HttpResponse<any> | HttpUserEvent<any>> {
+   
+   let token:any = this.shared.getAccessToken() ||"";
+  // console.log("Token From Interceptor >>",cognitoService.getToken())
+  if(token!=''){
+  token=token.getIdToken().getJwtToken()
+  }
+  this.showLoader();
+    // return <any>next.handle(this.addToken(req, token)).pipe(
+    // catchError(error => {
+    //   this.onEnd();
+    //   console.log("Initial Error",error);
+    //   if (error instanceof HttpErrorResponse) {
+    //     if((<HttpErrorResponse>error).status) {
+    //         return this.handle401Error(req,next,error)
+    //     }
+    //     else{
+    //       return this.handle401Error(req,next,error)
+    //     }
+    // } else {
+    //   console.log("observable error")
+    //     return Observable.throw(error);
+    // }
+    // }));
+    return <any>next.handle(this.addToken(req, token)).pipe(
+      catchError(error => {
+        console.log("Initial Error",error);
+        if (error instanceof HttpErrorResponse) {
+          if((<HttpErrorResponse>error).status) {
+              return this.handle401Error(req,next,error)
+          }
+          else{
+            return this.handle401Error(req,next,error)
+          }
+      } else {
+        console.log("observable error")
+          return Observable.throw(error);
+      }
+      }),
+      finalize(()=>{
+        this.onEnd()
+      })
+    )
+  }
+   
+  handle401Error(req: HttpRequest<any>, next: HttpHandler,err) {
+      console.log("err",err)
+      console.log("entered",this.isRefreshingToken,this.tokenSubject);
+
+      if (err instanceof HttpErrorResponse) {
+        
+      if(err.status == 401 && err.error.error.toLowerCase() == 'invalid token!'){
+        console.log("Refreshing Token",err.status)
+    if (!this.isRefreshingToken) {
+        this.isRefreshingToken = true;
+
+        // Reset here so that the following requests wait until the token
+        // comes back from the refreshToken call.
+        this.tokenSubject.next(null);
+      console.log("STARTING TOKEN REFRESH")
+        //  return this.shared.refresh()
+        //     .subscribe((newToken: string) => {
+        //         console.log("new",newToken)
+        //         if (newToken) {
+        //           let token:any = this.shared.getAccessToken() ||"";
+        //             this.tokenSubject.next( token.getIdToken().getJwtToken());
+        //             console.log(this.tokenSubject);
+        //            return  next.handle(this.addToken1(req, token.getIdToken().getJwtToken()))
+        //           //  .pipe(tap((event:HttpEvent<any>)=>{
+        //           //   if (event instanceof HttpResponse) {
+        //           //     this.onEnd();
+        //           //   }
+        //           // },
+        //           //   (err: any) => {
+        //           //     this.handleError<any>('role',err);
+        //           //     console.log("Error on Refresh token",err)
+        //           //     this.onEnd();
+        //           // }));
+        //         }
+
+        //         // If we don't get a new token, we are in trouble so logout.
+        //         return this.awsService.logout();
+        //     },err=>console.log("Error refresh",err))
+        return this.shared.refresh().pipe(
+          switchMap((newToken: string) =>{
+            console.log("New Token",newToken)
+            if(newToken){
+              this.isRefreshingToken=false
+              this.tokenSubject.next(newToken);
+              let token:any = this.shared.getAccessToken() ||"";
+              this.showLoader();
+              return next.handle(this.addToken(req, token.getIdToken().getJwtToken())).pipe(tap((event:HttpEvent<any>)=>{
+                if (event instanceof HttpResponse) {
+                  this.onEnd();
+                }
+              },
+                (err: any) => {
+                  this.handleError<any>('role',err);
+                  console.log("Error on Refresh token",err)
+                  this.onEnd();
+              }));
+            }
+        
+           return this.awsService.logout();
+          })
+        )
+       
+            // .catch(error => {
+            //     // If there is an exception calling 'refreshToken', bad news so logout.
+            //     return this.logoutUser();
+            // })
+            // .finally(() => {
+            //     this.isRefreshingToken = false;
+            // });
+    } else {
+        console.log("Else Part 1201")
+        // return this.tokenSubject
+        //     // .filter(token => token != null)
+        //     .take(1)
+        //     .switchMap(token => {
+          let token:any = this.shared.getAccessToken() ||"";
+          this.showLoader();
+                return next.handle(this.addToken(req,token.getIdToken().getJwtToken())).pipe(tap((event:HttpEvent<any>)=>{
+                  if (event instanceof HttpResponse) {
+                    this.onEnd();
+                  }
+                },
+                  (err: any) => {
+                    this.handleError<any>('role',err);
+                    console.log("Error on Refresh token",err)
+                    this.onEnd();
+                }));
+            // });
+    }
+  }
+  else{
+    // return Observable.throw("Observable throw",err);
+   return this.handleError('',err)
+  }
+}
+  else{
+    return Observable.throw("Observable throw",err);
+  }
+}
+   
+
+private handleError<T> (operation = 'operation', error?: T) {
+  // return (error: any): Observable<T> => {
+    console.log("d",error)
+    if(error instanceof HttpErrorResponse){
+      // this.onEnd();
+      console.log("Error from interceptor >>>",error)
+      console.error("Error: " + error.status);
+      if(error.status == 401){
+          localStorage.clear();
+          this.router.navigate(['/authentication/login']);
+      }
+      else if(error.status == 404){
+        this.router.navigate(['/error/404']);
+      }
+      else if(error.status == 503){
+          this.router.navigate(['/error/503']);
+      }
+      else if(error.status == 0){
+        console.log("NO Internet")
+        this.router.navigate(['/error/404']);
+      }
+      else{
+        // alert("Please Check your Internet connection");
+        let errorMessage = '';
+        let type : number;
+        if (error.error instanceof ErrorEvent) {
+           // client-side error
+            errorMessage = `Error: ${error.error.message}`;
+           type = 1;
+        } else {
+            // server-side error
+            errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
+            type = 2;
+        }
+     
+          return throwError({error_status :type == 2 ? error.status : '',
+                             error_message:error.message,
+                             error_text   :type == 2 ? error.statusText : '',
+                             html_format  :errorMessage,
+                             error_type   :type,
+                            });
+      }
+      return throwError(error);
+    }
+  // };
+}
+    // };
+  // }
+
+  private onEnd(): void {
+    this.hideLoader();
+  }
+  private showLoader(): void {
+    this.loaderService.show();
+  }
+  private hideLoader(): void {
+    this.loaderService.hide();
+  }
+}

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

@@ -64,6 +64,7 @@ import { VideoChatComponent } from './video-chat/video-chat.component'
 import { PushNotifyService } from './shared/push-notify.service';
 import { MatVideoModule } from 'mat-video';
 import { VideoPlayerComponent } from './video-chat/video-player/video-player.component';
+import { ReqTokenInterceptor } from './_guard/req-token.interceptor';
 
 export function HttpLoaderFactory(http: HttpClient) {
     return new TranslateHttpLoader(http);
@@ -143,7 +144,7 @@ const socketConfig: SocketIoConfig = { url: environment.socketServerUrl, options
     // },
     {
       provide:HTTP_INTERCEPTORS,
-      useClass: TokenInterceptor,
+      useClass: ReqTokenInterceptor,
       multi: true
     },
     MessagingService, AsyncPipe,LoaderService

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

@@ -340,7 +340,7 @@ export class AdminLayoutComponent implements OnInit, OnDestroy {
       if(res && res.hasOwnProperty('random_string') && res.random_string  && res.hasOwnProperty('user_type') && res.user_type != 'officer'){
         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 && curr_pd_info.pd_type == '3') {
+          if(curr_pd_info && (curr_pd_info.pd_type == '3'  || curr_pd_info.pd_type == '2')) {
             this.connectPeer(res,curr_pd_info);
           }
         }

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

@@ -78,7 +78,7 @@
         </mat-list>
 
     </mat-expansion-panel>
-    <p class="note" *ngIf="dataSourceTab1.data.length > 0">Showing data for last {{common}}. To see older records, please use advanced filter</p>
+    <p class="note" *ngIf="dataSourceTab1 && dataSourceTab1.data.length > 0">Showing data for last {{common}}. To see older records, please use advanced filter</p>
     <mat-table [dataSource]="dataSourceTab1" matSort *ngIf="PdListData.length > 0">
 
         <ng-container matColumnDef="PDType">

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

@@ -64,15 +64,16 @@ export class SchedulePdComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit() {
-    this.validateTime =  setInterval(() => {  
+    // this.validateTime =  setInterval(() => {  
-      let currentTime:any = new Date();
+    //   let currentTime:any = new Date();
-      currentTime = currentTime.getFullYear()+'-'+currentTime.getMonth()+'-'+currentTime.getDay()+'-'+currentTime.getHours()+'-'+currentTime.getMinutes();
+    //   currentTime = currentTime.getFullYear()+'-'+currentTime.getMonth()+'-'+currentTime.getDate()+'-'+currentTime.getHours()+'-'+currentTime.getMinutes();
-      let existTime:any = this.selectedMoment.getFullYear()+'-'+this.selectedMoment.getMonth()+'-'+this.selectedMoment.getDay() +'-'+this.selectedMoment.getHours()+'-'+this.selectedMoment.getMinutes();
+    //   let existTime:any = this.selectedMoment.getFullYear()+'-'+this.selectedMoment.getMonth()+'-'+this.selectedMoment.getDate() +'-'+this.selectedMoment.getHours()+'-'+this.selectedMoment.getMinutes();
-      if(existTime < currentTime) {
+    //   console.log(existTime,currentTime,existTime < currentTime,this.selectedMoment)
-        this.selectedMoment = new Date();
+    //   if(existTime < currentTime) {
-        this.min = new Date();
+    //     this.selectedMoment = new Date();
-      }
+    //     this.min = new Date();
-    },1000);
+    //   }
+    // },1000);
   }
  
   // close pd schedule pop up

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

@@ -947,9 +947,14 @@ export class PdTrigerService {
     //       };
     //       return this._http.post('http://localhost/newCode/saveVideo',params,httpOptions);
     //   }
+    /**VIDEO CALL RELATED */
       saveCusVideo(params) {
         return this._http.post(this.apiUrl+'saveCusVideo',params);
       }
+      getIceServers() {
+          return this._http.get(this.apiUrl+'getServerInfo')
+      }
+    //   END OF VIDEO CALL
     getRecordedPlaybackUrl(params){
         return this._http.post(this.apiUrl+'getVideoURL',params)
     }

ng6-seed/src/app/quality-check/qc-list/qc-view/qc-view.component.ts

@@ -61,7 +61,7 @@ export class QcViewComponent implements OnInit, OnDestroy {
   public _EditPDtriggerForm:FormGroup;
   pdCollectedDocument:any=[];
   pd_QC_Rating: Number;
-  videoplayback: any = {enableBtn:false,url:null};
+  videoplayback: any = {enableBtn:true,url:null};
   constructor(notifier:NotifierService,private dialog: MatDialog,private _fb: FormBuilder,
     private _qc: QcService,private route: ActivatedRoute,private router: Router, private QcListComponent: QcListComponent,private pdService:PdTrigerService) {
    this.notifier=notifier
@@ -84,10 +84,10 @@ export class QcViewComponent implements OnInit, OnDestroy {
        if (data.status == 200) {
         let masterData: any = data.records.pd_master_details;
         this.pdMasterData.push(masterData[0]);
-        if((this.pdMasterData[0].fk_pd_type == '3' || this.pdMasterData[0].fk_pd_type == '2') && (this.pdMasterData[0].pd_status == 'COMPLETED' || this.pdMasterData[0].pd_status == 'QC_COMPLETED')) { 
+        // if((this.pdMasterData[0].fk_pd_type == '3' || this.pdMasterData[0].fk_pd_type == '2') && (this.pdMasterData[0].pd_status == 'COMPLETED' || this.pdMasterData[0].pd_status == 'QC_COMPLETED')) { 
-          this.getVideoUrl(this.viewID,this.masterRandomString)
+        //   this.getVideoUrl(this.viewID,this.masterRandomString)
-          this.videoplayback.enableBtn = true;
+        //   this.videoplayback.enableBtn = true;
-        }
+        // }
         this.reportRandomString = btoa(masterData[0].random_string); 
         let parent_pd_id=masterData[0].parent_pd_id
         localStorage.setItem('parent_pd_id_for_Genie',parent_pd_id);
@@ -361,26 +361,34 @@ export class QcViewComponent implements OnInit, OnDestroy {
     })
   }
   openPlayer(){
-    if(this.videoplayback.url == null) {
+    // if(this.videoplayback.url == null) {
-      this.notifier.notify('info',"No Videos Found");
+    //   this.notifier.notify('info',"No Videos Found");
-      return;
+    //   return;
-    }
+    // }
+    let params = {"pd_id":this.viewID,"random_string":this.masterRandomString}
+    this._qc.getRecordedPlaybackUrl(params).subscribe(result=>{
+      if(result && result['dataStatus'] && result['records'] && result['records'].length > 0) {
     let dialogRef  = this.dialog.open(VideoPlayerComponent,{
-      data:{videoUrl:this.videoplayback.url},
+      data:{videoUrl:result['records']},
       maxWidth: '100vw',
       maxHeight: '100vh',
-      height: '80%',
+      height: '90%',
-      width: '80%',
+      width: '70%',
       disableClose: false,
       panelClass:'video-player'
     })
   }
-    getVideoUrl(pd_id,randomStr){
+  else {
-      let params = {"pd_id":pd_id,"random_string":randomStr}
+    this.notifier.notify('info',"No Videos Found");
-      this.pdService.getRecordedPlaybackUrl(params).subscribe(result=>{
+  }
-        this.videoplayback.url=result['url'];
+})
-      })
+  }
-    }
+    // getVideoUrl(pd_id,randomStr){
+    //   let params = {"pd_id":pd_id,"random_string":randomStr}
+    //   this.pdService.getRecordedPlaybackUrl(params).subscribe(result=>{
+    //     this.videoplayback.url=result['url'];
+    //   })
+    // }
  ngOnDestroy(): void {
    if(this.destroyType==1){
     this.QcListComponent.pdListLoad(true); 

ng6-seed/src/app/quality-check/qc-service/qc.service.ts

@@ -650,4 +650,8 @@ export class QcService {
        auditSmartPDImages(params):Observable<any> {
         return this._http.post(this.apiUrl+'auditSmartPDImages',params);
        }
+       getRecordedPlaybackUrl(params){
+        return this._http.post(this.apiUrl+'getVideoURL',params)
+    }
+
 }

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

@@ -63,15 +63,19 @@
     <div fxLayoutAlign="center center"  *ngIf="!is_video_enable" >
         <div fxLayout="column" fxLayoutAlign="center center" style="position: absolute;bottom: 30%">
           <div fxLayout="row" *ngIf="start_btn_enable">
-      <button mat-raised-button type="button" matTooltip="Start Video Chat" matTooltipPosition = "above" (click)="start_Calling('init')">
+      <!-- <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>
+      </button> -->
     </div>
         <!-- </div> -->
       <!-- <div fxLayout="column"> -->
       <div class="note-label">
+        <div class="wrapper">
+          <mat-spinner class="inner" *ngIf="is_spinner"></mat-spinner>
+        </div>
         <p>{{displayMsg}}</p>
+       
       </div>
     <!-- </div> -->
     </div>

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

@@ -77,3 +77,15 @@ video#peervideo {
 body{
     margin:10px !important;
 }
+.wrapper {
+    display: flex; 
+    justify-content: center; 
+    align-items: center;
+    // height: calc(100vh - 20px);
+    // background: red;
+  }
+  .inner {
+    // background: green;
+    color: white;
+    padding: 12px;
+  }

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

@@ -4,11 +4,16 @@ import { PushNotifyService } from 'app/shared/push-notify.service';
 import { Socket } from 'ngx-socket-io';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
 import { PdTrigerService } from 'app/personal-discussion/pd-service/pd-triger.service';
+import * as RecordRTC from 'recordrtc'
+import * as RecordRTCPromisesHandler from 'recordrtc';
+// import {RecordRTCPromisesHandler} from 'recordrtc'
+
 @Component({
   selector: 'app-video-chat',
   templateUrl: './video-chat.component.html',
   styleUrls: ['./video-chat.component.scss']
 })
+
 export class VideoChatComponent implements OnInit {
    MediaStream
   title = 'simple-peer-video-chat';
@@ -36,6 +41,8 @@ export class VideoChatComponent implements OnInit {
   unique_video_key: string = '';
 
   callDisconnectTimer:any
+  my_ice_servers: any = [];
+  is_spinner:boolean = true
   constructor(private _notificationService:PushNotifyService,
     private cdRef: ChangeDetectorRef,private socket: Socket,
     private dialogRef: MatDialogRef<VideoChatComponent>,
@@ -85,31 +92,105 @@ export class VideoChatComponent implements OnInit {
   ngOnInit() {
     console.log(this.chat_info);
    if(this.chat_info) {
+     this.pdTriggerService.getIceServers().subscribe(rr=>{
+      if(rr['dataStatus'] && rr['records']) {
+        this.displayMsg = "Note : Make sure the Reciever is waiting for your call before start Calling"
+        let temp_ice_servers = JSON.parse(rr['records']);
+          if(temp_ice_servers) { 
+            this.my_ice_servers = temp_ice_servers.ice_servers
+          }
     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')
     }
+    else {
+      this.start_Calling('init')
+    }
+  }
+  else {
+    this.displayMsg = "Something went wrong!!"
+    alert("Something went wrong!!")
+    this.dialogRef.close();
+  }
+  this.is_spinner = false
+  },
+  err=>{
+  console.log("Error getting ICE Servers",err)
+  this.displayMsg = "Network Error!!"
+  this.is_spinner = false
+  alert("Network Error!!")
+  this.dialogRef.close();
+})
    }
+   
       // this.start_Calling('receive')
   }
   start_Calling(option) {
+    let ice_servers = [
+      {
+          "url": "stun:global.stun.twilio.com:3478?transport=udp",
+          "urls": "stun:global.stun.twilio.com:3478?transport=udp"
+      },
+      {
+          "url": "turn:global.turn.twilio.com:3478?transport=udp",
+          "username": "47c1931de3421448cd86145f6ffc90f5124a4ce792511463c820164512a55cd2",
+          "urls": "turn:global.turn.twilio.com:3478?transport=udp",
+          "credential": "8g3b5XV7S\/zeqP284yi3oTxwChri+YPXCD6PsIRU+yM="
+      },
+      {
+          "url": "turn:global.turn.twilio.com:3478?transport=tcp",
+          "username": "47c1931de3421448cd86145f6ffc90f5124a4ce792511463c820164512a55cd2",
+          "urls": "turn:global.turn.twilio.com:3478?transport=tcp",
+          "credential": "8g3b5XV7S\/zeqP284yi3oTxwChri+YPXCD6PsIRU+yM="
+      },
+      {
+          "url": "turn:global.turn.twilio.com:443?transport=tcp",
+          "username": "47c1931de3421448cd86145f6ffc90f5124a4ce792511463c820164512a55cd2",
+          "urls": "turn:global.turn.twilio.com:443?transport=tcp",
+          "credential": "8g3b5XV7S\/zeqP284yi3oTxwChri+YPXCD6PsIRU+yM="
+      }
+  ]
+    // [
+    //   {
+    //     url:'stun:global.stun.twilio.com:3478?transport=udp',
+    //     urls:'stun:global.stun.twilio.com:3478?transport=udp'
+    //   },
+    //   {
+    //     url:'turn:global.turn.twilio.com:3478?transport=udp',
+    //     urls:'turn:global.turn.twilio.com:3478?transport=udp',
+    //     username:'dec47b985225dc1585fb52082ce77d16ce5e3f4c6ba967f68a072c94983bfa72',
+    //     credential:'T9RKwBTjH1cBI5f+DzFcUHPiw3LkfjWkADAvnBSp7a0='
+    //   },
+    //   {
+    //     url:'turn:global.turn.twilio.com:3478?transport=tcp',
+    //     urls:'turn:global.turn.twilio.com:3478?transport=tcp',
+    //     username:'dec47b985225dc1585fb52082ce77d16ce5e3f4c6ba967f68a072c94983bfa72',
+    //     credential:'T9RKwBTjH1cBI5f+DzFcUHPiw3LkfjWkADAvnBSp7a0='
+    //   },
+    //   {
+    //     url:'turn:global.turn.twilio.com:443?transport=tcp',
+    //     urls:'turn:global.turn.twilio.com:443?transport=tcp',
+    //     username:'dec47b985225dc1585fb52082ce77d16ce5e3f4c6ba967f68a072c94983bfa72',
+    //     credential:'T9RKwBTjH1cBI5f+DzFcUHPiw3LkfjWkADAvnBSp7a0='
+    //   }
+    // ]
     this.user_msg ="Establishing Connection..."
     this.userCallType = option
     // let texk=this.textCopyElement.nativeElement
     let video = this.myVideo.nativeElement;
     let peerVideo = this.peervideo.nativeElement
-    let peerx: any;
+    // let peerx: any;
-    let copyMessageText
+    // let copyMessageText
     this.n.getUserMedia = (this.n.getUserMedia || this.n.webkitGetUserMedia || this.n.mozGetUserMedia || this.n.msGetUserMedia);
     if(this.n.getUserMedia == undefined || this.n.getUserMedia == null, this.n.getUserMedia == ''){
       alert("unable to get the camera access. please close the browser and come back again")
     }
     console.log(this.n)
-    let defaultsOpts = { audio: true, video: { 
+    let defaultsOpts = { audio: true, video: {    width: 1280, height: 720,
        facingMode: this.shouldFaceUser ? 'user' : 'environment' 
       }
      }
-    this.n.getUserMedia(defaultsOpts).then(stream=> {
+     navigator.mediaDevices.getUserMedia(defaultsOpts).then(stream=> {
       this.socket.emit('NewClient')
         video.load();
         video.muted = true;
@@ -125,30 +206,31 @@ export class VideoChatComponent implements OnInit {
 }
 
       console.log("entered",stream);
-    peerx = new SimplePeer ({
+    this.peer = new SimplePeer ({
       initiator: option === 'init',
       stream: stream,
       reconnectTimer: 1000,
       iceTransportPolicy: 'relay',
       trickle: false,
       config: {
-        iceServers: [
+        iceServers: this.my_ice_servers
-          {
+        //  [
-            "urls": "stun:numb.viagenie.ca",
+        //   {
-            "username": 'fairoj@venbainfotech.com',
+        //     "urls": "stun:numb.viagenie.ca",
-            "credential": '0987123400'
+        //     "username": 'fairoj@venbainfotech.com',
-          },
+        //     "credential": '0987123400'
-          {
+        //   },
-            "urls": "turn:numb.viagenie.ca",
+        //   {
-            "username": "fairoj@venbainfotech.com",
+        //     "urls": "turn:numb.viagenie.ca",
-            "credential": "0987123400"
+        //     "username": "fairoj@venbainfotech.com",
-          }
+        //     "credential": "0987123400"
-        ]
+        //   }
+        // ]
       }
     })
     
     // function InitPeer(type) {
-    peerx.on('signal',(data)=> {
+    this.peer.on('signal',(data)=> {
 
       console.log(JSON.stringify(data));
       if(data.hasOwnProperty('type') && data.type == 'offer'){
@@ -167,27 +249,27 @@ export class VideoChatComponent implements OnInit {
         this.socket.emit('Answer', event_data)     
        }
       // copyMessage(JSON.stringify(data))
-      copyMessageText = JSON.stringify(data);
+      // copyMessageText = JSON.stringify(data);
       // update()
       // this.copyMessage(copyMessageText,data.type)
       // this.targetpeer = data;
     })
   // }
-    peerx.on('data', function(data) {
+    this.peer.on('data', function(data) {
       console.log('Recieved message:' + data);
     })
-    peerx.on('close', (data) => {
+    this.peer.on('close', (data) => {
       console.log("Peer Connection is closed ",data);
       this.disconnect();
       // alert("Peer Connection is closed " +JSON.stringify(data))
       this.notify("Connection Closed",'Peer Connection Closed')
     })
-    peerx.on('error', (err) => {
+    this.peer.on('error', (err) => {
       console.log("Fatal Error ",err);
       this.disconnect();
       // alert("Fatal Error" +JSON.stringify(err))
     })
-    peerx.on('stream', (stream)=> {
+    this.peer.on('stream', (stream)=> {
       console.log("@##################33",stream)
       if ('srcObject' in peerVideo) {
         peerVideo.srcObject = stream
@@ -231,13 +313,8 @@ export class VideoChatComponent implements OnInit {
   //     video.play()
   //     //wait for 1 sec
   // }
-  function connectPeer(answer) {
+  // let peerVideoEnable = this.peerVideoEnable
-    console.log("$$$$$$$$$$$$$$44");
+  
-    console.log(answer);
-    setTimeout(()=>{
-    peerx.signal(answer.JSON_to_connect);
-  },1000)
-  }
   // function getPeer(){
   //   return JSON.stringify(copyMessageText)
   // }
@@ -247,12 +324,24 @@ export class VideoChatComponent implements OnInit {
 //   this.socket.on('BackOffer', getPeer)
 // },2000)
   // }
-  if(this.chat_info.type == 'offer' && this.chat_info.JSON_to_connect && this.chat_info.JSON_to_connect != undefined) {
+ 
-    connectPeer(this.chat_info)
+  if(this.chat_info.type == 'offer' && this.chat_info.JSON_to_connect && this.chat_info.JSON_to_connect != undefined && !this.peerVideoEnable) {
+    this.connectPeer(this.chat_info)
   }
   // let tt = this.socket.on('BackOffer', connectPeer)
   // console.log(tt);
-  this.socket.on('BackAnswer', connectPeer)
+  // this.socket.on('BackAnswer', connectPeer)
+  this.socket.fromEvent('BackAnswer').subscribe((res:any)=>{
+    console.log("back answer",this.peer,this.peerVideoEnable);
+    let pd_short_info:any = localStorage.getItem('pd_short_info')
+    pd_short_info = JSON.parse(pd_short_info);
+    if(this.peer && !this.peerVideoEnable && pd_short_info && pd_short_info.length > 0 && pd_short_info.filter(val=>val.random_string == res.random_string).length > 0) {
+    if(this.callDisconnectTimer != undefined && this.callDisconnectTimer) {
+      clearTimeout(this.callDisconnectTimer)
+    }
+    this.connectPeer(res);
+  }
+  })
     }, err=>{
     console.log('Failed to get stream', err);
     alert('Failed to get stream '+err);
@@ -269,20 +358,30 @@ export class VideoChatComponent implements OnInit {
     // //  texk.value = copyMessageText
     // },2000)
     // }
-    setTimeout(() => {
+    // setTimeout(() => {
-      this.peer = peerx;
+    //   this.peer = this.peer;
     
-      // this.copyMessage(JSON.stringify(this.targetpeer))
+    //   // this.copyMessage(JSON.stringify(this.targetpeer))
-      console.log(this.peer);
+    //   console.log(this.peer);
-      // console.log(copyMessageText)
+    //   // console.log(copyMessageText)
-      // this.targetpeer = copyMessageText
+    //   // this.targetpeer = copyMessageText
-      // this.textToCopy = copyMessageText
+    //   // this.textToCopy = copyMessageText
-      // this.copyMessage(copyMessageText)
+    //   // this.copyMessage(copyMessageText)
-    }, 5000);
+    // }, 3000);
    
     // socket.on('SessionActive', SessionActive)
     // socket.on('CreatePeer', MakePeer)
     // socket.on('Disconnect', RemovePeer)
+  }
+   connectPeer(answer) {
+    console.log("$$$$$$$$$$$$$$44");
+    console.log(answer);
+   
+    setTimeout(()=>{
+      if(this.peer) {
+    this.peer.signal(answer.JSON_to_connect);
+    }
+  },1000)
   }
   updateTheMsg(msg_obj) {
     console.log("CallstatusMsg",msg_obj,this.chat_info)
@@ -290,6 +389,7 @@ export class VideoChatComponent implements OnInit {
       console.log("entered");
       this.start_btn_enable = false
       this.displayMsg = msg_obj.msg
+      this.notify("Alert",msg_obj.msg)
       // this.cdRef.detectChanges();
       this.disconnect();
      
@@ -297,6 +397,7 @@ export class VideoChatComponent implements OnInit {
   }
   fetchVideoAndPlay(stream,videotype,enablePeerVideo?) {
     console.log("12@@@@@@@@@2",enablePeerVideo)
+    console.log("Add video to record",stream,RecordRTC)
     
     fetch('')
     .then(response => response.blob())
@@ -311,78 +412,77 @@ export class VideoChatComponent implements OnInit {
           this.peervideo.nativeElement.style.marginTop = '0px'
         }
         this.peerVideoEnable = enablePeerVideo
-        if(this.callDisconnectTimer != undefined && this.callDisconnectTimer) {
+        if(this.peer && this.peerVideoEnable) {
-          clearTimeout(this.callDisconnectTimer)
-        }
         this.socket.emit('callStatus',{random_string:this.chat_info.random_string,status:'connected',status_code:1})
+        }
         // this.camereSwitchBtn.nativeElement.disabled = true;
         console.log("peervideo check",this.peerVideoEnable,this.peervideo.nativeElement.videoWidth,this.peervideo.nativeElement.videoHeight);
         this.cdRef.detectChanges();
         this.unique_video_key =this.randomStringGenerator(8)
-        this.startRecording(stream)
+        // this.startRecording(stream)
-        // this.addVideoToRecorder(stream)
+        this.addVideoToRecorder(stream)
-        // this.addVideoToRecorder(this.MediaStream)
+        this.addVideoToRecorder(this.MediaStream)
       }
     })
     .catch(e => {
       // Video playback failed ;(
     })
   }
-  async startRecording(stream) {
+//   async startRecording(stream) {
-    // console.log("start",stream,this.peervideo)
+//     // console.log("start",stream,this.peervideo)
-    this.recorder = []
+//     this.recorder = []
-    this.recorder = new RecordRTCPromisesHandler(stream, {
+//     this.recorder = new RecordRTCPromisesHandler(stream, {
-      type: 'video',
+//       type: 'video',
-      mimeType: 'video/webm\;codecs=vp9', // or video/webm\;codecs=h264 or video/webm\;codecs=vp9
+//       mimeType: 'video/webm\;codecs=vp9', // or video/webm\;codecs=h264 or video/webm\;codecs=vp9
-      // timeSlice: 10000,
+//       // timeSlice: 10000,
-      // ondataavailable: (blob=> { this.sendPartVideo(blob) }),
+//       // ondataavailable: (blob=> { this.sendPartVideo(blob) }),
-      audioBitsPerSecond: 128000,
+//       audioBitsPerSecond: 128000,
-      videoBitsPerSecond: 128000,
+//       videoBitsPerSecond: 128000,
-      bitsPerSecond: 128000 // if this line is provided, skip above 
+//       bitsPerSecond: 128000 // if this line is provided, skip above 
-  });
+//   });
-  this.recorder.startRecording();
+//   this.recorder.startRecording();
-  // const sleep = m => new Promise(r => setTimeout(r, m));
+//   // const sleep = m => new Promise(r => setTimeout(r, m));
-  // await sleep(3000);
+//   // await sleep(3000);
-setTimeout(()=>{
+// setTimeout(()=>{
-this.stopRecording(true);
+// this.stopRecording(true);
-},120000);
+// },120000);
-// var file = new File([blob], 'video.mp4', {
+// // var file = new File([blob], 'video.mp4', {
-//   type: 'video/mp4'
+// //   type: 'video/mp4'
-// });
+// // });
-// console.log(file)
+// // console.log(file)
-// const fileURL = window.URL.createObjectURL(file);
+// // const fileURL = window.URL.createObjectURL(file);
-// window.open(fileURL);
+// // window.open(fileURL);
-// videotype.srcObject =  null;
+// // videotype.srcObject =  null;
-// videotype.muted = false;
+// // videotype.muted = false;
-// videotype.volume = 1;
+// // videotype.volume = 1;
-// videotype.srcObject = file;
+// // videotype.srcObject = file;
 
   
-  // recorder.camera.stop();
+//   // recorder.camera.stop();
-  // recorder.destroy();
+//   // recorder.destroy();
-  // recorder = null;
+//   // recorder = null;
-// let recorder = RecordRTC(stream, {
+// // let recorder = RecordRTC(stream, {
-//   type: 'video'
+// //   type: 'video'
-// });
+// // });
-// recorder.startRecording();
+// // recorder.startRecording();
 
-// const sleep = m => new Promise(r => setTimeout(r, m));
+// // const sleep = m => new Promise(r => setTimeout(r, m));
-//  sleep(10000);
+// //  sleep(10000);
 
-// recorder.stopRecording(function() {
+// // recorder.stopRecording(function() {
-//   let blob = recorder.getBlob();
+// //   let blob = recorder.getBlob();
-//   // invokeSaveAsDialog(blob);
+// //   // invokeSaveAsDialog(blob);
-//   console.log(blob);
+// //   console.log(blob);
-// });
+// // });
 
-// blob.then(resul=>{
+// // blob.then(resul=>{
-//   console.log(resul);
+// //   console.log(resul);
-// })
+// // })
-// const fileURL = window.URL.createObjectURL(blob);
+// // const fileURL = window.URL.createObjectURL(blob);
-// console.log(fileURL);
+// // console.log(fileURL);
-// window.open(fileURL);
+// // window.open(fileURL);
-// invokeSaveAsDialog(blob);
+// // invokeSaveAsDialog(blob);
-  }
+//   }
   // sendPartVideo(blob){
   //   this.arr_of_blobs.push(blob);
   //   console.log("Blob",blob,JSON.stringify(blob));
@@ -401,55 +501,57 @@ this.stopRecording(true);
   //     console.log(result);
   //   })
   // }
- async stopRecording(autostarRec?) {
+//  async stopRecording(autostarRec?) {
-    await this.recorder.stopRecording();
+//     await this.recorder.stopRecording();
-    // console.log(this.recorder);
+//     // console.log(this.recorder);
-    let blob =  await this.recorder.getBlob();
+//     let blob =  await this.recorder.getBlob();
-    if(autostarRec) {
+//     if(autostarRec) {
-     await this.startRecording(this.peervideo.nativeElement.srcObject)
+//      await this.startRecording(this.peervideo.nativeElement.srcObject)
-      }
+//       }
-    // setTimeout(()=>{
+//     // setTimeout(()=>{
-      console.log(typeof(blob),blob);
+//       console.log(typeof(blob),blob);
-      console.log(RecordRTC,RecordRTCPromisesHandler)
+//       console.log(RecordRTC,RecordRTCPromisesHandler)
-      await RecordRTC.getSeekableBlob(blob, seekableBlob=> {
+//       await RecordRTC.getSeekableBlob(blob, seekableBlob=> {
-        console.log(seekableBlob)
+//         console.log(seekableBlob)
-        const fileURL = window.URL.createObjectURL(seekableBlob);
+//         const fileURL = window.URL.createObjectURL(seekableBlob);
-        console.log("seekable file",fileURL)
+//         console.log("seekable file",fileURL)
-        this.arr_of_blobs.push(seekableBlob)
+//         this.arr_of_blobs.push(seekableBlob)
-        console.log("----------------------------")
+//         console.log("----------------------------")
-        console.log("video "+this.arr_of_blobs.length, fileURL)
+//         console.log("video "+this.arr_of_blobs.length, fileURL)
-        console.log("----------------------------")
+//         console.log("----------------------------")
-           this.sendVideoToServer(seekableBlob,autostarRec)
+//           //  this.sendVideoToServer(seekableBlob,autostarRec)
-      })
+//       })
      
-      // var file = new File([blob], 'video.mp4', {
+//       // var file = new File([blob], 'video.mp4', {
-      //     type: 'video/mp4'
+//       //     type: 'video/mp4'
-      //   });
+//       //   });
-        // const fileURL = window.URL.createObjectURL(blob);
+//         // const fileURL = window.URL.createObjectURL(blob);
-        // this.arr_of_blobs.push(blob)
+//         // this.arr_of_blobs.push(blob)
-        // console.log("----------------------------")
+//         // console.log("----------------------------")
-        // console.log("video "+this.arr_of_blobs.length, fileURL)
+//         // console.log("video "+this.arr_of_blobs.length, fileURL)
-        // console.log("----------------------------")
+//         // console.log("----------------------------")
-        if(!autostarRec) {
+//         if(!autostarRec) {
-        let mergedVideos=this.arr_of_blobs.reduce((a, b)=> new Blob([a, b], {type: "video/webm"}));
+//           if(this.arr_of_blobs.length > 0) {
-        console.log("merged",mergedVideos,this.arr_of_blobs);
+//         let mergedVideos=this.arr_of_blobs.reduce((a, b)=> new Blob([a, b], {type: "video/webm"}));
-        const fileURL1 = window.URL.createObjectURL(mergedVideos);
+//         console.log("merged",mergedVideos,this.arr_of_blobs);
-        // localStorage.setItem('blob_url',fileURL1)
+//         const fileURL1 = window.URL.createObjectURL(mergedVideos);
-        console.log("File url 11111",fileURL1)
+//         // localStorage.setItem('blob_url',fileURL1)
-        // window.open(fileURL1)
+//         console.log("File url 11111",fileURL1)
-        }
+//           }
+//         // window.open(fileURL1)
+//         }
      
-        // let formData= new FormData();
+//         // let formData= new FormData();
-        // formData.append('videoFile',file);
+//         // formData.append('videoFile',file);
-        // console.log(formData);
+//         // console.log(formData);
-        // alert("saved Recording will be opened in a new window");
+//         // alert("saved Recording will be opened in a new window");
-        // window.open(fileURL);
+//         // window.open(fileURL);
-    // },3000);
+//     // },3000);
-  //   this.recorder.getDataURL().then(dataURL=>{ 
+//   //   this.recorder.getDataURL().then(dataURL=>{ 
-  //   console.log("@@@@@",dataURL)
+//   //   console.log("@@@@@",dataURL)
     
-  // })
+//   // })
-}
+// }
 sendVideoToServer(blob,is_auto_start) {
   let  formData = new FormData();
   formData.append('video_file', blob);
@@ -486,9 +588,9 @@ sendVideoToServer(blob,is_auto_start) {
     console.log("onDisconnect",this.peer,this.peerVideoEnable)
     if(this.peer) {
       if(this.peerVideoEnable) {
-      this.stopRecording().then(res=>{
+      // this.stopRecording().then(res=>{
-
+        this.stopRecordingMultiStream()
-      })
+      // })
     }
       if(this.callDisconnectTimer != undefined && this.callDisconnectTimer) {
         clearTimeout(this.callDisconnectTimer)
@@ -501,16 +603,7 @@ sendVideoToServer(blob,is_auto_start) {
     this.socket.emit('callStatus',{random_string:this.chat_info.random_string,status:'disconnected',status_code:0})
     this.peervideo.nativeElement.pause();
    
-  //   this.stopAndGetSingleBlob(function(blob) {
-  //     var url = URL.createObjectURL(blob);
-  //     // previewVideo.src = url;
-  //     console.log(blob,url);
-  //     // or
-  //     window.open(url);
   
-  //     // or
-  //     // invokeSaveAsDialog(blob);
-  //  });
   }
     console.log(this.MediaStream.getTracks())
     // this.MediaStream.stop()
@@ -527,6 +620,39 @@ sendVideoToServer(blob,is_auto_start) {
     this.is_video_enable = false
     this.cdRef.detectChanges();
     console.log(this.peer)
+    // if(go_back) {
+      setTimeout(()=>{
+      // this.navCtrl.pop();
+      this.dialogRef.close()
+    },2000)
+      // }
+  }
+   stopRecordingMultiStream(autostarRec?) {
+     let arr_of_blobs = this.arr_of_blobs
+    this.stopAndGetSingleBlob(blob=> {
+       RecordRTCPromisesHandler.getSeekableBlob(blob, seekableBlob=> {
+        console.log(seekableBlob)
+        const fileURL = window.URL.createObjectURL(seekableBlob);
+        console.log("seekable file",fileURL)
+        arr_of_blobs.push(seekableBlob)
+        console.log("----------------------------")
+        console.log("video "+arr_of_blobs.length, fileURL)
+        console.log("----------------------------")
+           this.sendVideoToServer(seekableBlob,autostarRec)
+          if(autostarRec) {
+            this.addVideoToRecorder(this.peervideo.nativeElement.srcObject)
+            this.addVideoToRecorder(this.myVideo.nativeElement.srcObject)
+            }
+      })
+      var url = URL.createObjectURL(blob);
+      // previewVideo.src = url;
+      console.log(blob,url);
+      // or
+      // window.open(url);
+
+      // or
+      // invokeSaveAsDialog(blob);
+   });
   }
    copyMessage(val: string,message?){
     const selBox = document.createElement('textarea');
@@ -599,6 +725,36 @@ sendVideoToServer(blob,is_auto_start) {
   
     return result;
   }
+  // RECORDING MULTIPLE VIDEOS
+
+  addVideoToRecorder(stream) {
+    // var stream = stream.captureStream();
+    console.log("Add video to record",stream,RecordRTC)
+    if (!this.recorder) {
+        this.recorder = RecordRTC([stream], {
+            // type: 'video'
+        });
+        this.recorder.startRecording();
+        setTimeout(()=>{
+          this.stopRecordingMultiStream(true);
+          },30000);
+    } else {
+        this.recorder.getInternalRecorder().addStreams([stream]);
+    }
+}
+
+ async stopAndGetSingleBlob(callback) {
+    if (!this.recorder) return;
+   await this.recorder.stopRecording(()=> {
+    //  setTimeout(()=>{
+        callback(this.recorder.getBlob());
+        // setTimeout(()=>{
+        //   console.log(this.recorder.getBlob());
+        // },3000)
+      // })
+        this.recorder = null;
+    });
+}
 
   @HostListener('window:beforeunload', ['$event'])
   unloadHandler(event) {
@@ -607,31 +763,6 @@ sendVideoToServer(blob,is_auto_start) {
     this.disconnect();
   }
   }
-  // RECORDING MULTIPLE VIDEOS
   
-//    addVideoToRecorder(stream) {
-//     // var stream = video.captureStream();
 
-//     if (!this.recorder) {
-//         this.recorder = RecordRTC([stream], {
-//             type: 'video'
-//         });
-//         this.recorder.startRecording();
-//     } else {
-//         this.recorder.getInternalRecorder().addStreams([stream]);
-//     }
-// }
-
-//  async stopAndGetSingleBlob(callback) {
-//     if (!this.recorder) return;
-//    await this.recorder.stopRecording(()=> {
-//     //  setTimeout(()=>{
-//         callback(this.recorder.getBlob());
-//         setTimeout(()=>{
-//           console.log(this.recorder.getBlob());
-//         },3000)
-//       // })
-//         this.recorder = null;
-//     });
-// }
 }

ng6-seed/src/index.html

@@ -12,7 +12,8 @@
     <!-- For Video chat  -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/simple-peer/9.7.0/simplepeer.min.js"></script>
     <!-- <script src="node_modules/recordrtc/RecordRTC.js"></script> -->
-    <script src="https://www.WebRTC-Experiment.com/RecordRTC.js"></script>
+    <!-- <script src="https://www.webrtc-experiment.com/MediaStreamRecorder.js"> </script>
+    <script src="https://www.WebRTC-Experiment.com/RecordRTC.js"></script> -->
     <script src="https://www.webrtc-experiment.com/EBML.js"></script>
     <!-- <title>Optima - Angular 6 Material Admin Template</title> -->
     <title> PD Genie </title>

ng6-seed/src/typings.d.ts

@@ -7,6 +7,7 @@ declare module 'quill';
 declare module 'leaflet';
 declare module 'perfect-scrollbar';
 declare module 'screenfull';
+declare module 'recordrtc'
 declare var SimplePeer: any;
-declare var RecordRTCPromisesHandler:any;
+// declare var RecordRTCPromisesHandler:any;
-declare var RecordRTC:any;
+// declare var RecordRTC:any;