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 f2a47f6b..a4c8b04e 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 @@ -58,7 +58,7 @@ 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 3490c591..7b96a017 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 @@ -106,11 +106,16 @@ export class UserSettingsComponent implements OnInit, OnDestroy { // Publish Webcam video this.openViduWebRTCService.publishVideo(this.participantService.getMyCameraPublisher(), true); this.isVideoActive = true; - return; + + } else { + // Videosource is 'null' because of the user has selected 'None' or muted the camera + // Unpublish webcam + this.openViduWebRTCService.publishVideo(this.participantService.getMyCameraPublisher(), false); + //TODO: save 'None' device in storage + // this.deviceSrv.setCameraSelected(videoSource); + // this.cameraSelected = this.deviceSrv.getCameraSelected(); + this.isVideoActive = false; } - // Unpublish webcam video - this.openViduWebRTCService.publishVideo(this.participantService.getMyCameraPublisher(), false); - this.isVideoActive = false; } async onMicrophoneSelected(event: any) { @@ -229,6 +234,10 @@ export class UserSettingsComponent implements OnInit, OnDestroy { this.cameras = this.deviceSrv.getCameras(); this.cameraSelected = this.deviceSrv.getCameraSelected(); this.microphoneSelected = this.deviceSrv.getMicrophoneSelected(); + + this.isVideoActive = this.hasVideoDevices && this.cameraSelected.label !== 'None'; + this.isAudioActive = this.hasAudioDevices && this.microphoneSelected.label !== 'None'; + } private scrollToBottom(): void { @@ -255,28 +264,31 @@ export class UserSettingsComponent implements OnInit, OnDestroy { private async initwebcamPublisher() { const publisher = await this.openViduWebRTCService.initDefaultPublisher(undefined); if (publisher) { - this.handlePublisherSuccess(publisher); + + // this.handlePublisherSuccess(publisher); this.handlePublisherError(publisher); } } - private handlePublisherSuccess(publisher: Publisher) { - publisher.once('accessAllowed', async () => { - if (this.deviceSrv.areEmptyLabels()) { - await this.deviceSrv.forceUpdate(); - if (this.hasAudioDevices) { - const audioLabel = publisher?.stream?.getMediaStream()?.getAudioTracks()[0]?.label; - this.deviceSrv.setMicSelected(audioLabel); - } + //? After test in Chrome and Firefox, the devices always have labels. + //? It's not longer needed + // private handlePublisherSuccess(publisher: Publisher) { + // publisher.once('accessAllowed', async () => { + // if (this.deviceSrv.areEmptyLabels()) { + // await this.deviceSrv.forceUpdate(); + // if (this.hasAudioDevices) { + // const audioLabel = publisher?.stream?.getMediaStream()?.getAudioTracks()[0]?.label; + // this.deviceSrv.setMicSelected(audioLabel); + // } - if (this.hasVideoDevices) { - const videoLabel = publisher?.stream?.getMediaStream()?.getVideoTracks()[0]?.label; - this.deviceSrv.setCameraSelected(videoLabel); - } - this.setDevicesInfo(); - } - }); - } + // if (this.hasVideoDevices) { + // const videoLabel = publisher?.stream?.getMediaStream()?.getVideoTracks()[0]?.label; + // this.deviceSrv.setCameraSelected(videoLabel); + // } + // this.setDevicesInfo(); + // } + // }); + // } private handlePublisherError(publisher: Publisher) { publisher.once('accessDenied', (e: any) => { diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/video/video.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/video/video.component.css index 81a6c9f2..180a5cc6 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/video/video.component.css +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/video/video.component.css @@ -9,6 +9,7 @@ video { border: 0; font-size: 100%; border-radius: 5px; + background-color: #000000; } .poster_img { diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/video/video.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/video/video.component.ts index 4116fbb3..ac2f08b1 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/video/video.component.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/video/video.component.ts @@ -5,7 +5,7 @@ import { VideoType } from '../../models/video-type.model'; @Component({ selector: 'ov-video', template: ` - OpenVidu Logo + OpenVidu Logo