diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts index 0ad6eb60..30b22b8e 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts @@ -164,12 +164,12 @@ export class SessionComponent implements OnInit { private async connectToSession(): Promise { try { - if (this.participantService.areBothEnabled()) { + if (this.participantService.haveICameraAndScreenActive()) { await this.openviduService.connectSession(this.openviduService.getWebcamSession(), this.tokenService.getWebcamToken()); await this.openviduService.connectSession(this.openviduService.getScreenSession(), this.tokenService.getScreenToken()); await this.openviduService.publish(this.participantService.getMyCameraPublisher()); await this.openviduService.publish(this.participantService.getMyScreenPublisher()); - } else if (this.participantService.isOnlyMyScreenEnabled()) { + } else if (this.participantService.isOnlyMyScreenActive()) { await this.openviduService.connectSession(this.openviduService.getScreenSession(), this.tokenService.getScreenToken()); await this.openviduService.publish(this.participantService.getMyScreenPublisher()); } else { diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.ts index 8ff084e1..94a786e1 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.ts @@ -137,7 +137,7 @@ export class StreamComponent implements OnInit { const properties: PublisherProperties = { videoSource: ScreenType.SCREEN, publishVideo: true, - publishAudio: !this.participantService.isMyCameraEnabled(), + publishAudio: !this.participantService.isMyCameraActive(), mirror: false }; await this.openviduService.replaceTrack(VideoType.SCREEN, properties); 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 697cca81..212ad5bd 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 @@ -59,10 +59,7 @@ export class ToolbarComponent implements OnInit, OnDestroy { protected log: ILogger; protected menuTogglingSubscription: Subscription; protected chatMessagesSubscription: Subscription; - protected screenShareStateSubscription: Subscription; - protected webcamVideoStateSubscription: Subscription; - protected webcamAudioStateSubscription: Subscription; - + protected localParticipantSubscription: Subscription; private currentWindowHeight = window.innerHeight; constructor( @@ -87,14 +84,8 @@ export class ToolbarComponent implements OnInit, OnDestroy { if (this.chatMessagesSubscription) { this.chatMessagesSubscription.unsubscribe(); } - if (this.screenShareStateSubscription) { - this.screenShareStateSubscription.unsubscribe(); - } - if (this.webcamVideoStateSubscription) { - this.webcamVideoStateSubscription.unsubscribe(); - } - if (this.webcamAudioStateSubscription) { - this.webcamAudioStateSubscription.unsubscribe(); + if (this.localParticipantSubscription) { + this.localParticipantSubscription.unsubscribe(); } } @@ -132,7 +123,7 @@ export class ToolbarComponent implements OnInit, OnDestroy { toggleMicrophone() { this.onMicClicked.emit(); - if (this.participantService.isMyCameraEnabled()) { + if (this.participantService.isMyCameraActive()) { this.openviduService.publishAudio( this.participantService.getMyCameraPublisher(), !this.participantService.hasCameraAudioActive() @@ -149,7 +140,7 @@ export class ToolbarComponent implements OnInit, OnDestroy { const publishVideo = !this.participantService.hasCameraVideoActive(); const publishAudio = this.participantService.hasCameraAudioActive(); // Disabling webcam - if (this.participantService.areBothEnabled()) { + if (this.participantService.haveICameraAndScreenActive()) { this.openviduService.publishVideo(this.participantService.getMyCameraPublisher(), publishVideo); this.participantService.disableWebcamUser(); this.openviduService.unpublish(this.participantService.getMyCameraPublisher()); @@ -157,7 +148,7 @@ export class ToolbarComponent implements OnInit, OnDestroy { return; } // Enabling webcam - if (this.participantService.isOnlyMyScreenEnabled()) { + if (this.participantService.isOnlyMyScreenActive()) { const hasAudio = this.participantService.hasScreenAudioActive(); if (!this.openviduService.isWebcamSessionConnected()) { @@ -181,15 +172,15 @@ export class ToolbarComponent implements OnInit, OnDestroy { try { // Disabling screenShare - if (this.participantService.areBothEnabled()) { + if (this.participantService.haveICameraAndScreenActive()) { this.participantService.disableScreenUser(); this.openviduService.unpublish(this.participantService.getMyScreenPublisher()); return; } // Enabling screenShare - if (this.participantService.isOnlyMyCameraEnabled()) { - const willThereBeWebcam = this.participantService.isMyCameraEnabled() && this.participantService.hasCameraVideoActive(); + if (this.participantService.isOnlyMyCameraActive()) { + const willThereBeWebcam = this.participantService.isMyCameraActive() && this.participantService.hasCameraVideoActive(); const hasAudio = willThereBeWebcam ? false : this.hasAudioDevices && this.participantService.hasCameraAudioActive(); const properties: PublisherProperties = { videoSource: ScreenType.SCREEN, @@ -300,17 +291,10 @@ export class ToolbarComponent implements OnInit, OnDestroy { }); } protected subscribeToUserMediaProperties() { - this.screenShareStateSubscription = this.participantService.screenShareState.subscribe((active) => { - this.isScreenShareActive = active; - this.cd.markForCheck(); - }); - - this.webcamVideoStateSubscription = this.participantService.webcamVideoActive.subscribe((active) => { - this.isWebcamVideoActive = active; - this.cd.markForCheck(); - }); - this.webcamAudioStateSubscription = this.participantService.webcamAudioActive.subscribe((active) => { - this.isWebcamAudioActive = active; + this.localParticipantSubscription = this.participantService.localParticipantObs.subscribe((p) => { + this.isWebcamVideoActive = p.isCameraVideoActive(); + this.isWebcamAudioActive = p.isCameraAudioActive(); + this.isScreenShareActive = p.isScreenActive(); this.cd.markForCheck(); }); } 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 94d43450..bc3ba3d9 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 @@ -48,7 +48,7 @@ export class UserSettingsComponent implements OnInit, OnDestroy { hasAudioDevices: boolean; isLoading = true; private log: ILogger; - private oVUsersSubscription: Subscription; + private localParticipantSubscription: Subscription; private screenShareStateSubscription: Subscription; constructor( @@ -83,8 +83,8 @@ export class UserSettingsComponent implements OnInit, OnDestroy { } ngOnDestroy() { - if (this.oVUsersSubscription) { - this.oVUsersSubscription.unsubscribe(); + if (this.localParticipantSubscription) { + this.localParticipantSubscription.unsubscribe(); } if (this.screenShareStateSubscription) { @@ -132,11 +132,11 @@ export class UserSettingsComponent implements OnInit, OnDestroy { const publish = this.isVideoMuted; this.openviduService.publishVideo(this.participantService.getMyCameraPublisher(), publish); - if (this.participantService.areBothEnabled()) { + if (this.participantService.haveICameraAndScreenActive()) { // Cam will not published, disable webcam with screensharing active this.participantService.disableWebcamUser(); this.openviduService.publishAudio(this.participantService.getMyScreenPublisher(), publish); - } else if (this.participantService.isOnlyMyScreenEnabled()) { + } else if (this.participantService.isOnlyMyScreenActive()) { // Cam will be published, enable webcam this.participantService.enableWebcamUser(); } @@ -147,14 +147,14 @@ export class UserSettingsComponent implements OnInit, OnDestroy { async toggleScreenShare() { // Disabling screenShare - if (this.participantService.areBothEnabled()) { + if (this.participantService.haveICameraAndScreenActive()) { this.participantService.disableScreenUser(); return; } // Enabling screenShare - if (this.participantService.isOnlyMyCameraEnabled()) { - const willThereBeWebcam = this.participantService.isMyCameraEnabled() && this.participantService.hasCameraVideoActive(); + if (this.participantService.isOnlyMyCameraActive()) { + const willThereBeWebcam = this.participantService.isMyCameraActive() && this.participantService.hasCameraVideoActive(); const hasAudio = willThereBeWebcam ? false : this.hasAudioDevices && this.isAudioMuted; const properties: PublisherProperties = { videoSource: ScreenType.SCREEN, @@ -242,11 +242,9 @@ export class UserSettingsComponent implements OnInit, OnDestroy { } private subscribeToLocalParticipantEvents() { - this.oVUsersSubscription = this.participantService.localParticipantObs.subscribe((p) => { + this.localParticipantSubscription = this.participantService.localParticipantObs.subscribe((p) => { this.localParticipant = p; - }); - this.screenShareStateSubscription = this.participantService.screenShareState.subscribe((enabled) => { - this.screenShareEnabled = enabled; + this.screenShareEnabled = p.isScreenActive(); }); } diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/models/participant.model.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/models/participant.model.ts index 5f040d0d..10b7c1fb 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/models/participant.model.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/models/participant.model.ts @@ -37,7 +37,10 @@ export abstract class ParticipantAbstractModel { public isCameraAudioActive(): boolean { const cameraConnection = this.getCameraConnection(); - return cameraConnection.connected && cameraConnection.streamManager.stream.audioActive; + if(cameraConnection) { + return cameraConnection.connected && cameraConnection.streamManager.stream.audioActive; + } + return this.isScreenAudioActive();; } public isCameraVideoActive(): boolean { @@ -46,7 +49,10 @@ export abstract class ParticipantAbstractModel { } isScreenAudioActive(): boolean { const screenConnection = this.getScreenConnection(); - return screenConnection?.connected && screenConnection?.streamManager?.stream?.audioActive; + if(screenConnection){ + return screenConnection?.connected && screenConnection?.streamManager?.stream?.audioActive; + } + return false; } hasConnectionType(type: VideoType): boolean { @@ -61,10 +67,10 @@ export abstract class ParticipantAbstractModel { return this.streams.get(VideoType.SCREEN); } - getConnectionTypesEnabled(): VideoType[] { + getConnectionTypesActive(): VideoType[] { let connType = []; - if (this.isCameraEnabled()) connType.push(VideoType.CAMERA); - if (this.isScreenEnabled()) connType.push(VideoType.SCREEN); + if (this.isCameraActive()) connType.push(VideoType.CAMERA); + if (this.isScreenActive()) connType.push(VideoType.SCREEN); return connType; } @@ -131,7 +137,7 @@ export abstract class ParticipantAbstractModel { } } - isCameraEnabled(): boolean { + isCameraActive(): boolean { return this.getCameraConnection()?.connected; } @@ -145,11 +151,11 @@ export abstract class ParticipantAbstractModel { if (cameraConnection) cameraConnection.connected = false; } - isScreenEnabled(): boolean { + isScreenActive(): boolean { return this.getScreenConnection()?.connected; } - enablescreen() { + enableScreen() { const screenConnection = this.getScreenConnection(); if (screenConnection) screenConnection.connected = true; } diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/pipes/participant.pipe.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/pipes/participant.pipe.ts index 80634a19..7847373f 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/pipes/participant.pipe.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/pipes/participant.pipe.ts @@ -23,7 +23,7 @@ export class StreamsEnabledPipe implements PipeTransform { constructor() {} transform(participant: ParticipantAbstractModel): string { - return `(${participant?.getConnectionTypesEnabled().toString().replace(',', ', ')})`; + return `(${participant?.getConnectionTypesActive().toString().replace(',', ', ')})`; } } 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 bda4cd1d..74368b16 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 @@ -31,8 +31,6 @@ export class OpenViduService { protected screenSession: Session = null; protected videoSource = undefined; protected audioSource = undefined; - // protected screenMediaStream: MediaStream = null; - // protected webcamMediaStream: MediaStream = null; protected log: ILogger; constructor( @@ -153,7 +151,7 @@ export class OpenViduService { if (hasVideoDevices || hasAudioDevices) { const publisher = await this.initPublisher(targetElement, properties); this.participantService.setMyCameraPublisher(publisher); - this.participantService.updateParticipantMediaStatus(); + this.participantService.updateLocalParticipant(); return publisher; } else { this.participantService.setMyCameraPublisher(null); @@ -211,16 +209,14 @@ export class OpenViduService { publishVideo(publisher: Publisher, value: boolean): void { if (!!publisher) { publisher.publishVideo(value); - // Send event to subscribers because of video has changed and view must update - this.participantService.updateParticipantMediaStatus(); + this.participantService.updateLocalParticipant(); } } publishAudio(publisher: Publisher, value: boolean): void { if (!!publisher) { publisher.publishAudio(value); - // Send event to subscribers because of video has changed and view must update - this.participantService.updateParticipantMediaStatus(); + this.participantService.updateLocalParticipant(); } } diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/participant/participant.service.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/participant/participant.service.ts index cd679ad3..0c9f5737 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/participant/participant.service.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/participant/participant.service.ts @@ -13,13 +13,7 @@ import { LoggerService } from '../logger/logger.service'; export class ParticipantService { //Local participants observables localParticipantObs: Observable; - screenShareState: Observable; - webcamVideoActive: Observable; - webcamAudioActive: Observable; protected _localParticipant = >new BehaviorSubject(null); - protected _screensharing = >new BehaviorSubject(false); - protected _cameraVideoActive = >new BehaviorSubject(true); - protected _cameraAudioActive = >new BehaviorSubject(true); //Remote participants observable remoteParticipantsObs: Observable; @@ -35,9 +29,6 @@ export class ParticipantService { this.localParticipantObs = this._localParticipant.asObservable(); this.remoteParticipantsObs = this._remoteParticipants.asObservable(); - this.screenShareState = this._screensharing.asObservable(); - this.webcamVideoActive = this._cameraVideoActive.asObservable(); - this.webcamAudioActive = this._cameraAudioActive.asObservable(); this.localParticipant = this.newParticipant(); this.updateLocalParticipant(); @@ -101,25 +92,12 @@ export class ParticipantService { }; this.localParticipant.addConnection(steramModel); - - this._screensharing.next(true); - this.updateLocalParticipant(); } disableScreenUser() { this.localParticipant.disableScreen(); this.updateLocalParticipant(); - this._screensharing.next(false); - } - - updateParticipantMediaStatus() { - this._cameraVideoActive.next(this.localParticipant.isCameraVideoActive()); - if (this.isMyCameraEnabled()) { - this._cameraAudioActive.next(this.localParticipant.isCameraAudioActive()); - } else { - this._cameraAudioActive.next(this.hasScreenAudioActive()); - } } setNickname(connectionId: string, nickname: string) { @@ -154,31 +132,31 @@ export class ParticipantService { clear() { this.disableScreenUser(); this.localParticipant = this.newParticipant(); - this._screensharing.next(false); + // this._screensharing.next(false); this.remoteParticipants = []; this._remoteParticipants = >new BehaviorSubject([]); this.remoteParticipantsObs = this._remoteParticipants.asObservable(); this.updateLocalParticipant(); } - isMyCameraEnabled(): boolean { - return this.localParticipant.isCameraEnabled(); + isMyCameraActive(): boolean { + return this.localParticipant.isCameraActive(); } - isMyScreenEnabled(): boolean { - return this.localParticipant.isScreenEnabled(); + isMyScreenActive(): boolean { + return this.localParticipant.isScreenActive(); } - isOnlyMyCameraEnabled(): boolean { - return this.isMyCameraEnabled() && !this.isMyScreenEnabled(); + isOnlyMyCameraActive(): boolean { + return this.isMyCameraActive() && !this.isMyScreenActive(); } - isOnlyMyScreenEnabled(): boolean { - return this.isMyScreenEnabled() && !this.isMyCameraEnabled(); + isOnlyMyScreenActive(): boolean { + return this.isMyScreenActive() && !this.isMyCameraActive(); } - areBothEnabled(): boolean { - return this.isMyCameraEnabled() && this.isMyScreenEnabled(); + haveICameraAndScreenActive(): boolean { + return this.isMyCameraActive() && this.isMyScreenActive(); } hasCameraVideoActive(): boolean {