Fairoj: Video chat upgrade started for video conferencing

src/app/pd/chat-component/chat-component.component.html

@@ -41,16 +41,16 @@
     <!-- <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">
+            matTooltipPosition="above" (click)="videoHandling()" >
             <mat-icon *ngIf="!twilioService.camera">videocam_off</mat-icon>
             <mat-icon *ngIf="twilioService.camera">videocam</mat-icon>
         </button>&nbsp;&nbsp;&nbsp;
         <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">
+            matTooltipPosition="above" (click)="micMuteHandling()" >
             <mat-icon *ngIf="!twilioService.microphone">mic_off</mat-icon>
             <mat-icon *ngIf="twilioService.microphone">mic</mat-icon>
         </button>&nbsp;&nbsp;&nbsp;
-        <span style="margin: 0px !important;" *ngIf="peerVideoEnable && twilioService.switch_camera_option">
+        <span style="margin: 0px !important;" *ngIf="twilioService.switch_camera_option">
              <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Switch Camera"
             matTooltipPosition="above" (click)="twilioService.switchCamera()" >
             <mat-icon>switch_camera</mat-icon>

src/app/pd/chat-component/chat-component.component.ts

@@ -44,6 +44,7 @@ export class ChatComponentComponent implements OnInit {
   type_name: string;
   cusUrl: string = '';
   private renderer: Renderer2;
+  cm_name: string;
   constructor(
     private router: Router,
     private route: ActivatedRoute,
@@ -54,11 +55,18 @@ export class ChatComponentComponent implements OnInit {
     // this.flag= this.route.snapshot.paramMap.get('flag');
     this.type = this.route.snapshot.paramMap.get('type')
     this.pd_id = this.route.snapshot.paramMap.get('id')
+    this.cm_name = this.route.snapshot.paramMap.get('uid')
     if (this.type == null || this.pd_id == null) {
       this.twilioService.openSnackBar("URL is invalid. Please check the URL", '');
       return
     }
-    this.type_name = this.type == '1' ? 'CUSTOMER' : 'PDOFFICER'
+    if (this.type == '3' && (this.cm_name == null || !this.cm_name)) {
+      this.twilioService.openSnackBar("URL is invalid. Please check the URL OF CM", '');
+      this.message = "URL is invalid. Please check the URL OF CM"
+      this.is_spinner = true;
+      return
+    }
+    this.type_name = this.type == '1' ? 'CUSTOMER' :  this.type == '2' ? 'PDOFFICER' : this.type == '3' ? this.cm_name : 'UNKNOWN'
     if(this.type == '2') {
       if(window.location.origin.includes('localhost')){
       this.cusUrl = window.location.origin+'/#/chat/'+this.randomStr+";id="+this.pd_id+";type=1;";
@@ -212,16 +220,19 @@ export class ChatComponentComponent implements OnInit {
     navigator.mediaDevices.enumerateDevices().then(devices => {
       const videoInput = devices.find(device => device.kind === 'videoinput');
     let  media_devices = devices.filter(vv=>vv.kind === 'videoinput')
-      console.log("video devices from getMediaDevices Fun",media_devices)
+      console.log("video devices from getMediaDevices Fun",media_devices,videoInput.deviceId)
       if(media_devices.length > 1) {
         this.twilioService.switch_camera_option =true
       }
       return createLocalTracks({ audio: true, video: { deviceId: videoInput.deviceId } });
     }).then(localTracks => {
-      this.is_spinner = false
+     
       this.twilioService.mediaTracks = localTracks
           console.log("Local Tracks",this.twilioService.mediaTracks);
-       this.twilioService.connectToRoom(accessToken, {  name: this.username, tracks: localTracks,logLevel: 'debug' });
+          // logLevel: 'debug' 
+       this.twilioService.connectToRoom(accessToken, {tracks: localTracks}).then(vv=>{
+        this.is_spinner = false
+       })
     },err=>{
       this.handleMediaError(err)
       this.is_spinner = false

src/app/pd/services/twilio/twilio.service.ts

@@ -103,7 +103,7 @@ export class TwilioService {
 
   }
 
-  connectToRoom(accessToken: string, options): void {
+  connectToRoom(accessToken: string, options) {
     // if(!isSupported) {
     //   console.error('This browser is not supported by twilio-video.js.');
     //   this.btnSubject.next({name:"is_video_enable",id:'1',value:false})
@@ -111,13 +111,14 @@ export class TwilioService {
     //   return;
     // }
     console.log("User Name>>",options.name)
-    this.msgSubject.next("Connecting...");
-  this.btnSubject.next({name:"is_video_enable",id:'1',value:true})
-  connect(accessToken, options).then(room => {
+  
+  return connect(accessToken, options).then(room => {
   this.roomObj = room;
   // this.getMediaDevices()
   console.log("Room Class",this.roomObj);
   // if (!this.previewing && options['video']) {
+    this.msgSubject.next("Connecting...");
+    this.btnSubject.next({name:"is_video_enable",id:'1',value:true})
   this.startLocalVideo();
   this.previewing = true;
   // }
@@ -158,13 +159,7 @@ export class TwilioService {
   //   });
   // }
 
-  room.on('participantDisconnected', (participant) => {
-    console.log("Participant Disconnected",participant);
-    this.openSnackBar(participant.identity+' left the call','')
-    this.msgSubject.next("Participant '" + participant.identity + "' left the call");
-    this.disconnect();
-  this.detachTracks(participant);
-  });
+
 
   room.on('participantConnected', (participant) => {
     console.log("Participant connected",participant)
@@ -238,6 +233,31 @@ export class TwilioService {
   console.log("Disconnected")
   });});
 
+  room.on('participantDisconnected', (participant) => {
+    console.log("Participant Disconnected",participant,participant.sid);
+    this.openSnackBar(participant.identity+' left the call','')
+    this.msgSubject.next("Participant '" + participant.identity + "' left the call");
+    // this.disconnect();
+  // this.detachParticipantTracks(participant);
+      // $(`div#${participant.sid}`, participant).remove();
+      let parent = document.getElementById('peervideo')
+    //  let temp = document.getElementById(participant.sid)
+    //  temp.remove()
+    console.log(parent,"new",this.remoteVideo.nativeElement,this.remoteVideo.nativeElement.children.length,"Room participants size",this.roomParticipants.size)
+    this.detachParticipantTracks(participant)
+
+   if(this.roomParticipants.size == 0) {
+    this.msgSubject.next("Waiting for participant...")
+      this.btnSubject.next({name:"peerVideoEnable",value:false})
+   }
+
+// this.remoteVideo.nativeElement.childNodes.forEach(node => {
+//   this.renderer.removeChild(this.remoteVideo.nativeElement, node)
+// })
+    // this.renderer.removeChild(parent,temp)
+
+  });
+
 
   }, (error) => {
     this.disconnect();
@@ -252,7 +272,24 @@ export class TwilioService {
   })
 
 }
-
+detachParticipantTracks(participant) {
+  for (let track of participant.tracks) {
+    Array.from(this.remoteVideo.nativeElement.children).forEach((child:any) => {
+      // console.log('children.length=' + this.remoteVideo.nativeElement.children.length,child.getAttribute('sid'),track[0],track);
+      if(child.getAttribute('sid') == track[0]) {
+      this.renderer.removeChild(this.remoteVideo.nativeElement, child);
+      }
+ }); 
+}
+console.log("Room participants", this.roomParticipants,this.roomObj)
+// setTimeout(() => {
+// console.log("new11111",this.remoteVideo.nativeElement.children,this.remoteVideo.nativeElement.children.length)
+// if(this.remoteVideo.nativeElement.children.length == 0) {
+//   this.msgSubject.next("Waiting for participant...")
+//   this.btnSubject.next({name:"peerVideoEnable",value:false})
+// }
+// },0)
+}
   attachParticipantTracks(participant): void {
   participant.tracks.forEach(part => {
     console.log("attachParticipantTracks",participant);
@@ -276,6 +313,10 @@ export class TwilioService {
   const element = tracks.attach();
   this.renderer.data.id = tracks.sid;
   console.log("Renderer",this.renderer,tracks.sid)
+  if(tracks.kind == 'video') {
+    this.renderer.setAttribute(element,'class','inner')
+  }
+  this.renderer.setAttribute(element,'sid',tracks.sid)
   this.renderer.setStyle(element, 'min-height', '80vh');
   this.renderer.setStyle(element, 'height', '100%');
   console.log("Width",window.screen.width);
@@ -303,21 +344,55 @@ export class TwilioService {
   const element = publication.track.attach();
   this.renderer.data.id = publication.track.sid;
   this.renderer.setStyle(element, 'width', '100%');
+  if(publication.track.kind == 'video') {
+    this.renderer.setAttribute(element,'class','inner')
+  }
   this.renderer.appendChild(this.localVideo.nativeElement, element);
   this.btnSubject.next({name:"is_video_enable",id:'1',value:true})
   this.msgSubject.next("Waiting for participant...")
   })
 }
+// old one
+// detachParticipantTracks(participant) {
+//   var tracks = participant.tracks
+//   this.detachTracks(tracks);
+// }
 
-  detachTracks(tracks): void {
-    console.log("detachTracks",tracks);
-  tracks.tracks.forEach(track => {
-  let element = this.remoteVideo.nativeElement;
-  while (element.firstChild) {
-  element.removeChild(element.firstChild);
-  }});
+detachTracks(tracks) {
+  console.log(tracks)
+  for (let track of tracks) {
+    const htmlElements = track.detach();
+    console.log(htmlElements)
+    for (let htmlElement of htmlElements) {
+       htmlElement.remove();
+     }
+      //  this.renderer.appendChild(this.remoteVideo.nativeElement, htmlElements);;
+
+  }
+  // OLD ONE
+  // console.log("detachTracks",tracks);
+  // tracks.tracks.forEach(track => {
+  // let element = this.remoteVideo.nativeElement;
+  // while (element.firstChild) {
+  // element.removeChild(element.firstChild);
+  // }});
 }
 
+getTracks(participant) {
+  return Array.from(participant.tracks.values()).filter((publication:any)=> {
+     return publication.track;
+  }).map(function (publication:any) {
+     return publication.track;
+  });
+}
+
+// detachTracks(tracks): void {
+//   tracks.tracks.forEach(track => {
+//   let element = this.remoteVideo.nativeElement;
+//   while (element.firstChild) {
+//   element.removeChild(element.firstChild);
+//   }});}
+
 disconnect(){
   if (this.roomObj && this.roomObj !== null) {
     console.log("User type in service",this.user_data,this.remoteVideo)