From f23f39dd6ff8fffb8fb0993d5f781aaef30ea2e9 Mon Sep 17 00:00:00 2001
From: csantosm <4a.santos@gmail.com>
Date: Fri, 25 Feb 2022 14:36:36 +0100
Subject: [PATCH] openvidu-components: Improved user-settings component

- Changed replaceTrack to republishTrack until replaceTrack issue is fixed (https://github.com/OpenVidu/openvidu/pull/700)
- Fixed bug in mat options
- Added audio detector
---
 .../user-settings/user-settings.component.css |   8 +-
 .../user-settings.component.html              |  17 +-
 .../user-settings/user-settings.component.ts  |  19 ++-
 .../lib/services/openvidu/openvidu.service.ts | 147 +++++++++---------
 4 files changed, 104 insertions(+), 87 deletions(-)

diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.css
index fbdec7a2..6c2c167b 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.css
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.css
@@ -47,6 +47,12 @@
 	bottom: 0px;
   }
 
+  #audio-wave-container {
+	position: absolute;
+    right: 20px;
+	top: 30px;
+  }
+
   .cameraMessageContainer {
 	height: 100%;
 	width: 100%;
@@ -1074,7 +1080,7 @@
 	  padding: 35px;
 	}
 	.videoContainer{
-	  width: 90%;
+	  width: 100%;
 	}
   }
   @media (min-width: 768px) {
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.html
index a1c122b0..4d3b7251 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.html
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.html
@@ -34,6 +34,9 @@
 									<span *ngIf="!hasVideoDevices && hasAudioDevices">Oops! Camera is not available</span>
 									<span *ngIf="hasVideoDevices && !hasAudioDevices">Oops! Microphone is not available</span>
 								</div>
+								<div id="audio-wave-container" *ngIf="stream.type === 'CAMERA'">
+									<ov-audio-wave [streamManager]="stream.streamManager"></ov-audio-wave>
+								</div>
 							</div>
 						</div>
 					</div>
@@ -56,11 +59,8 @@
 								</div>
 								<div class="two" fxFlex="80" fxLayoutAlign="center center">
 									<mat-form-field class="alternate-theme">
-										<mat-select
-											placeholder="Camera Options"
-											[ngModel]="!isVideoMuted && !!cameraSelected ? cameraSelected.device : 'None'"
-											(selectionChange)="onCameraSelected($event)"
-										>
+										<mat-label>Camera Options</mat-label>
+										<mat-select [disabled]="isVideoMuted" (selectionChange)="onCameraSelected($event)">
 											<mat-option *ngFor="let camera of cameras" [value]="camera.device">
 												{{ camera.label }}
 											</mat-option>
@@ -86,11 +86,8 @@
 								</div>
 								<div class="two" fxFlex="80" fxLayoutAlign="center center">
 									<mat-form-field class="alternate-theme">
-										<mat-select
-											placeholder="Microphone Options"
-											[ngModel]="!isAudioMuted && microphoneSelected ? microphoneSelected.device : 'None'"
-											(selectionChange)="onMicrophoneSelected($event)"
-										>
+										<mat-label>Microphone Options</mat-label>
+										<mat-select [disabled]="isAudioMuted" (selectionChange)="onMicrophoneSelected($event)">
 											<mat-option *ngFor="let microphone of microphones" [value]="microphone.device">
 												{{ microphone.label }}
 											</mat-option>
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.ts
index bbd1e8e6..a7bee0fd 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.ts
@@ -98,9 +98,14 @@ export class UserSettingsComponent implements OnInit, OnDestroy {
 		// Is New deviceId different from the old one?
 		if (this.deviceSrv.needUpdateVideoTrack(videoSource)) {
 			const mirror = this.deviceSrv.cameraNeedsMirror(videoSource);
-			const pp: PublisherProperties = { videoSource, audioSource: false, mirror };
+			//TODO: Uncomment this when replaceTrack issue is fixed
+			// const pp: PublisherProperties = { videoSource, audioSource: false, mirror };
+			// await this.openviduService.replaceTrack(VideoType.CAMERA, pp);
+			// TODO: Remove this when replaceTrack issue is fixed
+			const pp: PublisherProperties = { videoSource, audioSource: this.microphoneSelected.device, mirror };
+			await this.openviduService.republishTrack(pp);
+
 
-			await this.openviduService.replaceTrack(VideoType.CAMERA, pp);
 			this.cameraSelected = videoSource;
 			this.deviceSrv.setCameraSelected(this.cameraSelected);
 		}
@@ -115,8 +120,14 @@ export class UserSettingsComponent implements OnInit, OnDestroy {
 		const audioSource = event?.value;
 		// Is New deviceId different than older?
 		if (this.deviceSrv.needUpdateAudioTrack(audioSource)) {
-			const pp: PublisherProperties = { audioSource, videoSource: false };
-			await this.openviduService.replaceTrack(VideoType.CAMERA, pp);
+			//TODO: Uncomment this when replaceTrack issue is fixed
+			// const pp: PublisherProperties = { audioSource, videoSource: false };
+			// await this.openviduService.replaceTrack(VideoType.CAMERA, pp);
+			// TODO: Remove this when replaceTrack issue is fixed
+			const mirror = this.deviceSrv.cameraNeedsMirror(this.cameraSelected.device);
+			const pp: PublisherProperties = { videoSource: this.cameraSelected.device, audioSource, mirror };
+			await this.openviduService.republishTrack(pp);
+
 			this.microphoneSelected = audioSource;
 			this.deviceSrv.setMicSelected(this.microphoneSelected);
 		}
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/openvidu/openvidu.service.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/openvidu/openvidu.service.ts
index 74368b16..d6ac44ab 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/openvidu/openvidu.service.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/openvidu/openvidu.service.ts
@@ -163,22 +163,6 @@ export class OpenViduService {
 		return await this.OV.initPublisherAsync(targetElement, properties);
 	}
 
-	//TODO: This method is used by republishTrack. Check if it's neecessary
-	// private destroyPublisher(publisher: Publisher): void {
-	// 	if (!!publisher) {
-	// 		// publisher.off('streamAudioVolumeChange');
-	// 		if (publisher.stream.getWebRtcPeer()) {
-	// 			publisher.stream.disposeWebRtcPeer();
-	// 		}
-	// 		publisher.stream.disposeMediaStream();
-	// 		if (publisher.id === this.participantService.getMyCameraPublisher().id) {
-	// 			this.participantService.setMyCameraPublisher(publisher);
-	// 		} else if (publisher.id === this.participantService.getMyScreenPublisher().id) {
-	// 			this.participantService.setMyScreenPublisher(publisher);
-	// 		}
-	// 	}
-	// }
-
 	async publish(publisher: Publisher): Promise<void> {
 		if (!!publisher) {
 			if (publisher === this.participantService.getMyCameraPublisher()) {
@@ -220,39 +204,41 @@ export class OpenViduService {
 		}
 	}
 
-	// Used replaceTrack instead
-	// republishTrack(videoSource: string, audioSource: string, mirror: boolean = true): Promise<void> {
-	// 	return new Promise(async (resolve, reject) => {
-	// 		if (!!videoSource) {
-	// 			this.log.d('Replacing video track ' + videoSource);
-	// 			this.videoSource = videoSource;
-	// 		}
-	// 		if (!!audioSource) {
-	// 			this.log.d('Replacing audio track ' + audioSource);
-	// 			this.audioSource = audioSource;
-	// 		}
-	// 		this.destroyPublisher(this.participantService.getMyCameraPublisher());
-	// 		const properties: PublisherProperties = {
-	// 			videoSource: this.videoSource,
-	// 			audioSource: this.audioSource,
-	// 			publishVideo: this.participantService.hasCameraVideoActive(),
-	// 			publishAudio: this.participantService.hasCameraAudioActive(),
-	// 			mirror
-	// 		};
+	// TODO: Remove this method when replaceTrack issue is fixed
+	// https://github.com/OpenVidu/openvidu/pull/700
+	republishTrack(properties: PublisherProperties): Promise<void> {
+		const {videoSource, audioSource, mirror} = properties;
+		return new Promise(async (resolve, reject) => {
+			if (!!videoSource) {
+				this.log.d('Replacing video track ' + videoSource);
+				this.videoSource = videoSource;
+			}
+			if (!!audioSource) {
+				this.log.d('Replacing audio track ' + audioSource);
+				this.audioSource = audioSource;
+			}
+			this.destroyPublisher(this.participantService.getMyCameraPublisher());
+			const properties: PublisherProperties = {
+				videoSource: this.videoSource,
+				audioSource: this.audioSource,
+				publishVideo: this.participantService.hasCameraVideoActive(),
+				publishAudio: this.participantService.hasCameraAudioActive(),
+				mirror
+			};
 
-	// 		const publisher = await this.initPublisher(undefined, properties);
-	// 		this.participantService.setMyCameraPublisher(publisher);
+			const publisher = await this.initPublisher(undefined, properties);
+			this.participantService.setMyCameraPublisher(publisher);
 
-	// 		publisher.once('streamPlaying', () => {
-	// 			this.participantService.setMyCameraPublisher(publisher);
-	// 			resolve();
-	// 		});
+			publisher.once('streamPlaying', () => {
+				this.participantService.setMyCameraPublisher(publisher);
+				resolve();
+			});
 
-	// 		publisher.once('accessDenied', () => {
-	// 			reject();
-	// 		});
-	// 	});
-	// }
+			publisher.once('accessDenied', () => {
+				reject();
+			});
+		});
+	}
 
 	sendSignal(type: Signal, connections?: Connection[], data?: any): void {
 		const signalOptions: SignalOptions = {
@@ -273,33 +259,36 @@ export class OpenViduService {
 			this.log.d(`Replacing ${videoType} track`, props);
 
 			if (videoType === VideoType.CAMERA) {
-				let mediaStream: MediaStream;
-				const oldMediaStream = this.participantService.getMyCameraPublisher().stream.getMediaStream();
-				const isFirefoxPlatform = this.platformService.isFirefox();
-				const isReplacingAudio = !!props.audioSource;
-				const isReplacingVideo = !!props.videoSource;
+				//TODO: Uncomment this section when replaceTrack issue is fixed
+				// https://github.com/OpenVidu/openvidu/pull/700
+				throw('Replace track feature has a bug. We are trying to fix it');
+				// let mediaStream: MediaStream;
+				// const oldMediaStream = this.participantService.getMyCameraPublisher().stream.getMediaStream();
+				// const isFirefoxPlatform = this.platformService.isFirefox();
+				// const isReplacingAudio = !!props.audioSource;
+				// const isReplacingVideo = !!props.videoSource;
 
-				if (isReplacingVideo) {
-					if (isFirefoxPlatform) {
-						// Firefox throw an exception trying to get a new MediaStreamTrack if the older one is not stopped
-						// NotReadableError: Concurrent mic process limit. Stopping tracks before call to getUserMedia
-						oldMediaStream.getVideoTracks()[0].stop();
-					}
-					mediaStream = await this.createMediaStream(props);
-					// Replace video track
-					const videoTrack: MediaStreamTrack = mediaStream.getVideoTracks()[0];
-					await this.participantService.getMyCameraPublisher().replaceTrack(videoTrack);
-				} else if (isReplacingAudio) {
-					if (isFirefoxPlatform) {
-						// Firefox throw an exception trying to get a new MediaStreamTrack if the older one is not stopped
-						// NotReadableError: Concurrent mic process limit. Stopping tracks before call to getUserMedia
-						oldMediaStream.getAudioTracks()[0].stop();
-					}
-					mediaStream = await this.createMediaStream(props);
-					// Replace audio track
-					const audioTrack: MediaStreamTrack = mediaStream.getAudioTracks()[0];
-					await this.participantService.getMyCameraPublisher().replaceTrack(audioTrack);
-				}
+				// if (isReplacingVideo) {
+				// 	if (isFirefoxPlatform) {
+				// 		// Firefox throw an exception trying to get a new MediaStreamTrack if the older one is not stopped
+				// 		// NotReadableError: Concurrent mic process limit. Stopping tracks before call to getUserMedia
+				// 		oldMediaStream.getVideoTracks()[0].stop();
+				// 	}
+				// 	mediaStream = await this.createMediaStream(props);
+				// 	// Replace video track
+				// 	const videoTrack: MediaStreamTrack = mediaStream.getVideoTracks()[0];
+				// 	await this.participantService.getMyCameraPublisher().replaceTrack(videoTrack);
+				// } else if (isReplacingAudio) {
+				// 	if (isFirefoxPlatform) {
+				// 		// Firefox throw an exception trying to get a new MediaStreamTrack if the older one is not stopped
+				// 		// NotReadableError: Concurrent mic process limit. Stopping tracks before call to getUserMedia
+				// 		oldMediaStream.getAudioTracks()[0].stop();
+				// 	}
+				// 	mediaStream = await this.createMediaStream(props);
+				// 	// Replace audio track
+				// 	const audioTrack: MediaStreamTrack = mediaStream.getAudioTracks()[0];
+				// 	await this.participantService.getMyCameraPublisher().replaceTrack(audioTrack);
+				// }
 			} else if (videoType === VideoType.SCREEN) {
 				let newScreenMediaStream;
 				try {
@@ -315,6 +304,20 @@ export class OpenViduService {
 		}
 	}
 
+	private destroyPublisher(publisher: Publisher): void {
+		if (!!publisher) {
+			if (publisher.stream.getWebRtcPeer()) {
+				publisher.stream.disposeWebRtcPeer();
+			}
+			publisher.stream.disposeMediaStream();
+			if (publisher.id === this.participantService.getMyCameraPublisher().id) {
+				this.participantService.setMyCameraPublisher(publisher);
+			} else if (publisher.id === this.participantService.getMyScreenPublisher().id) {
+				this.participantService.setMyScreenPublisher(publisher);
+			}
+		}
+	}
+
 	private async createMediaStream(pp: PublisherProperties): Promise<MediaStream> {
 		let mediaStream: MediaStream;
 		const isFirefoxPlatform = this.platformService.isFirefox();