openvidu-components: Fixed bug updating media devices

openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/audio-devices/audio-devices.component.ts

@@ -30,9 +30,12 @@ export class AudioDevicesComponent implements OnInit, OnDestroy {
 		protected participantService: ParticipantService
 	) {}
 
-	ngOnInit(): void {
+	async ngOnInit() {
 		this.subscribeToParticipantMediaProperties();
-
+		if (this.openviduService.isSessionConnected()) {
+			// Updating devices only with session connected
+			await this.deviceSrv.initializeDevices();
+		}
 		this.hasAudioDevices = this.deviceSrv.hasAudioDeviceAvailable();
 		this.microphones = this.deviceSrv.getMicrophones();
 		this.microphoneSelected = this.deviceSrv.getMicrophoneSelected();

openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/video-devices/video-devices.component.ts

@@ -36,8 +36,12 @@ export class VideoDevicesComponent implements OnInit, OnDestroy {
 		private backgroundService: VirtualBackgroundService
 	) {}
 
-	ngOnInit(): void {
+	async ngOnInit() {
 		this.subscribeToParticipantMediaProperties();
+		if (this.openviduService.isSessionConnected()) {
+			// Updating devices only with session connected
+			await this.deviceSrv.initializeDevices();
+		}
 		this.hasVideoDevices = this.deviceSrv.hasVideoDeviceAvailable();
 		this.cameras = this.deviceSrv.getCameras();
 		this.cameraSelected = this.deviceSrv.getCameraSelected();

openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.ts

@@ -401,7 +401,6 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
 	async ngOnInit() {
 		this.subscribeToToolbarDirectives();
 
-		await this.oVDevicesService.initializeDevices();
 		this.hasVideoDevices = this.oVDevicesService.hasVideoDeviceAvailable();
 		this.hasAudioDevices = this.oVDevicesService.hasAudioDeviceAvailable();
 		this.session = this.openviduService.getWebcamSession();

openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts

@@ -430,7 +430,7 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni
 
 	async ngOnInit() {
 		this.subscribeToVideconferenceDirectives();
-		await this.deviceSrv.initializeDevices();
+		await this.deviceSrv.forceInitDevices();
 		const nickname = this.externalParticipantName || this.storageSrv.getNickname() || `OpenVidu_User${Math.floor(Math.random() * 100)}`;
 		const props: ParticipantProperties = {
 			local: true,
@@ -688,7 +688,7 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni
 		// The devices are initialized without labels in Firefox.
 		// We need to force an update after publisher is allowed.
 		if (this.deviceSrv.areEmptyLabels()) {
-			await this.deviceSrv.initializeDevices();
+			await this.deviceSrv.forceInitDevices();
 			if (this.deviceSrv.hasAudioDeviceAvailable()) {
 				const audioLabel = this.participantService.getMyCameraPublisher()?.stream?.getMediaStream()?.getAudioTracks()[0]?.label;
 				this.deviceSrv.setMicSelected(audioLabel);

openvidu-components-angular/projects/openvidu-angular/src/lib/services/device/device.service.ts

@@ -41,13 +41,12 @@ export class DeviceService {
 		this.log = this.loggerSrv.get('DevicesService');
 	}
 
-	// async forceUpdate() {
+	/**
-	// 	await this.initializeDevices();
+	 * Initialize media devices and devices selected checking in local storage (if exists) or
-	// }
+	 * first devices found by default
-
+	 */
-	async initializeDevices() {
+	async forceInitDevices() {
-		this.cameras = [];
+		this.clear();
-		this.microphones = [];
 		try {
 			this.OV = new OpenVidu();
 			// Forcing media permissions request.
@@ -59,8 +58,9 @@ export class DeviceService {
 			this.deviceAccessDeniedError = (<OpenViduError>error).name === OpenViduErrorName.DEVICE_ACCESS_DENIED;
 		}
 
-		this.devices = await this.OV.getDevices();
+		await this.initializeDevices();
-		this.initializeCustomDevices(this.devices);
+		this.updateAudioDeviceSelected();
+		this.updateVideoDeviceSelected();
 
 		this._isVideoMuted = this.storageSrv.isVideoMuted() || this.libSrv.videoMuted.getValue();
 		this._isAudioMuted = this.storageSrv.isAudioMuted() || this.libSrv.audioMuted.getValue();
@@ -68,32 +68,28 @@ export class DeviceService {
 		this.log.d('Media devices', this.cameras, this.microphones);
 	}
 
-	private initializeCustomDevices(defaultVDevices: Device[]): void {
+	/**
+	 * Initialize only the media devices available
+	 */
+	async initializeDevices() {
+		this.devices = await this.OV.getDevices();
+		this.initializeCustomDevices();
+	}
+
+	private initializeCustomDevices(updateSelected: boolean = true): void {
 		const FIRST_POSITION = 0;
-		const defaultMicrophones: Device[] = defaultVDevices.filter((device) => device.kind === DeviceType.AUDIO_INPUT);
+		const defaultMicrophones: Device[] = this.devices.filter((device) => device.kind === DeviceType.AUDIO_INPUT);
-		const defaultCameras: Device[] = defaultVDevices.filter((device) => device.kind === DeviceType.VIDEO_INPUT);
+		const defaultCameras: Device[] = this.devices.filter((device) => device.kind === DeviceType.VIDEO_INPUT);
 
 		if (defaultMicrophones.length > 0) {
+			this.microphones = [];
 			defaultMicrophones.forEach((device: Device) => {
 				this.microphones.push({ label: device.label, device: device.deviceId });
 			});
-
-			// Setting microphone selected
-			const storageMicrophone = this.getMicrophoneFromStogare();
-			if (!!storageMicrophone) {
-				this.microphoneSelected = storageMicrophone;
-			} else if (this.microphones.length > 0) {
-				if (this.deviceAccessDeniedError && this.microphones.length > 1) {
-					// We assume that the default device is already in use
-					// Assign an alternative device with the aim of avoiding the DEVICE_ALREADY_IN_USE error
-					this.microphoneSelected = this.microphones[1];
-				} else {
-					this.microphoneSelected = this.microphones[0];
-				}
-			}
 		}
 
 		if (defaultCameras.length > 0) {
+			this.cameras = [];
 			defaultCameras.forEach((device: Device, index: number) => {
 				const myDevice: CustomDevice = {
 					label: device.label,
@@ -113,8 +109,30 @@ export class DeviceService {
 				}
 				this.cameras.push(myDevice);
 			});
+		}
+	}
 
+	private updateAudioDeviceSelected() {
+		// Setting microphone selected
+		if (this.microphones.length > 0) {
+			const storageMicrophone = this.getMicrophoneFromStogare();
+			if (!!storageMicrophone) {
+				this.microphoneSelected = storageMicrophone;
+			} else if (this.microphones.length > 0) {
+				if (this.deviceAccessDeniedError && this.microphones.length > 1) {
+					// We assume that the default device is already in use
+					// Assign an alternative device with the aim of avoiding the DEVICE_ALREADY_IN_USE error
+					this.microphoneSelected = this.microphones[1];
+				} else {
+					this.microphoneSelected = this.microphones[0];
+				}
+			}
+		}
+	}
+
+	private updateVideoDeviceSelected() {
 		// Setting camera selected
+		if (this.cameras.length > 0) {
 			const storageCamera = this.getCameraFromStorage();
 			if (!!storageCamera) {
 				this.cameraSelected = storageCamera;