diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/audio-devices/audio-devices.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/audio-devices/audio-devices.component.ts index ce6a3597..bc2745c2 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/audio-devices/audio-devices.component.ts +++ b/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(); diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/video-devices/video-devices.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/video-devices/video-devices.component.ts index 47038bbd..7801bb43 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/video-devices/video-devices.component.ts +++ b/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(); diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.ts index 821ed819..1e318508 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.ts +++ b/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(); diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts index 89bf3913..da6d550f 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts +++ b/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); diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/device/device.service.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/device/device.service.ts index 741ef318..01f6c957 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/device/device.service.ts +++ b/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(); - // } - - async initializeDevices() { - this.cameras = []; - this.microphones = []; + /** + * Initialize media devices and devices selected checking in local storage (if exists) or + * first devices found by default + */ + async forceInitDevices() { + this.clear(); try { this.OV = new OpenVidu(); // Forcing media permissions request. @@ -59,8 +58,9 @@ export class DeviceService { this.deviceAccessDeniedError = (error).name === OpenViduErrorName.DEVICE_ACCESS_DENIED; } - this.devices = await this.OV.getDevices(); - this.initializeCustomDevices(this.devices); + await this.initializeDevices(); + 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 defaultCameras: Device[] = defaultVDevices.filter((device) => device.kind === DeviceType.VIDEO_INPUT); + const defaultMicrophones: Device[] = this.devices.filter((device) => device.kind === DeviceType.AUDIO_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); }); + } + } - // Setting camera selected + 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;