From 287ec58bab2bd807008924de3b29653945c8c7f6 Mon Sep 17 00:00:00 2001 From: Carlos Santos <4a.santos@gmail.com> Date: Mon, 18 Sep 2023 11:27:56 +0200 Subject: [PATCH] openvidu-components: Support screen audio Now screen is always visible and independent of the camera connection. It has its own audio --- .../e2e/webcomponent.test.ts | 72 +++---------------- .../components/toolbar/toolbar.component.ts | 2 +- .../lib/services/openvidu/openvidu.service.ts | 7 +- .../participant/participant.service.ts | 60 +--------------- .../src/app/openvidu-call/call.component.html | 2 +- 5 files changed, 17 insertions(+), 126 deletions(-) diff --git a/openvidu-components-angular/e2e/webcomponent.test.ts b/openvidu-components-angular/e2e/webcomponent.test.ts index 03fa29df..af323a4f 100644 --- a/openvidu-components-angular/e2e/webcomponent.test.ts +++ b/openvidu-components-angular/e2e/webcomponent.test.ts @@ -1301,7 +1301,7 @@ describe('Testing screenshare features', () => { }); - it('should show only screen if toggle screensharing with video muted', async () => { + it('should show the screen although toggle screensharing with video muted', async () => { await browser.get(`${url}&prejoin=false`); await utils.checkLayoutPresent(); @@ -1317,7 +1317,7 @@ describe('Testing screenshare features', () => { await browser.sleep(1000); await utils.waitForElement('.OV_big'); - expect(await utils.getNumberOfElements('video')).equals(1); + expect(await utils.getNumberOfElements('video')).equals(2); await screenshareButton.click(); @@ -1352,7 +1352,7 @@ describe('Testing screenshare features', () => { expect(isAudioEnabled).to.be.false; await utils.waitForElement('#statusMic'); - expect(await utils.getNumberOfElements('#statusMic')).equals(2); + expect(await utils.getNumberOfElements('#statusMic')).equals(1); // Clicking to screensharing button await screenshareButton.click(); @@ -1360,7 +1360,7 @@ describe('Testing screenshare features', () => { }); - it('should show and hide CAMERA stream when muting video with screensharing', async () => { + it('should show CAMERA stream always visible when muting video with screensharing', async () => { await browser.get(`${url}&prejoin=false`); await utils.checkLayoutPresent(); @@ -1376,10 +1376,10 @@ describe('Testing screenshare features', () => { const muteVideoButton = await utils.waitForElement('#camera-btn'); await muteVideoButton.click(); - expect(await utils.getNumberOfElements('video')).equals(1); + expect(await utils.getNumberOfElements('video')).equals(2); }); - it('should screenshare has audio active when camera is muted', async () => { + it('should screen audio be independent of camera audio', async () => { let isAudioEnabled; const audioEnableScript = 'return document.getElementsByTagName("video")[0].srcObject.getAudioTracks()[0].enabled;'; @@ -1394,13 +1394,13 @@ describe('Testing screenshare features', () => { await utils.waitForElement('.OV_big'); expect(await utils.getNumberOfElements('video')).equals(2); - expect(await utils.getNumberOfElements('#statusMic')).equals(1); + expect(await utils.getNumberOfElements('#statusMic')).equals(0); // Muting camera video const muteVideoButton = await utils.waitForElement('#camera-btn'); await muteVideoButton.click(); - expect(await utils.getNumberOfElements('video')).equals(1); + expect(await utils.getNumberOfElements('video')).equals(2); await browser.sleep(500); expect(await utils.isPresent('#statusMic')).to.be.false; @@ -1415,63 +1415,9 @@ describe('Testing screenshare features', () => { await utils.waitForElement('.camera-type'); expect(await utils.getNumberOfElements('video')).equals(2); - expect(await utils.getNumberOfElements('#statusMic')).equals(1); + expect(await utils.getNumberOfElements('#statusMic')).equals(0); }); - it('should camera come back with audio muted when screensharing', async () => { - let element, isAudioEnabled; - - const getAudioScript = (className: string) => { - return `return document.getElementsByClassName('${className}')[0].srcObject.getAudioTracks()[0].enabled;`; - }; - - await browser.get(`${url}&prejoin=false`); - - await utils.checkLayoutPresent(); - - // Clicking to screensharing button - const screenshareButton = await utils.waitForElement('#screenshare-btn'); - await screenshareButton.click(); - - await utils.waitForElement('.screen-type'); - expect(await utils.getNumberOfElements('video')).equals(2); - expect(await utils.getNumberOfElements('#statusMic')).equals(1); - - - // Mute camera - const muteVideoButton = await utils.waitForElement('#camera-btn'); - await muteVideoButton.click(); - - - expect(await utils.getNumberOfElements('video')).equals(1); - expect(await utils.isPresent('#statusMic')).to.be.false; - - // Checking if audio is muted after join the room - isAudioEnabled = await browser.executeScript(getAudioScript('screen-type')); - expect(isAudioEnabled).to.be.true; - - // Mute audio - const muteAudioButton = await utils.waitForElement('#mic-btn'); - await muteAudioButton.click(); - - await utils.waitForElement('#statusMic'); - expect(await utils.getNumberOfElements('#statusMic')).equals(1); - - - isAudioEnabled = await browser.executeScript(getAudioScript('screen-type')); - expect(isAudioEnabled).to.be.false; - - // Unmute camera - await muteVideoButton.click(); - - await utils.waitForElement('.camera-type'); - expect(await utils.getNumberOfElements('video')).equals(2); - expect(await utils.getNumberOfElements('#statusMic')).equals(2); - - - isAudioEnabled = await browser.executeScript(getAudioScript('camera-type')); - expect(isAudioEnabled).to.be.false; - }); }); describe('Testing panels', () => { 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 b0e295d4..ccefbef8 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 @@ -536,7 +536,7 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit { this.onScreenshareButtonClicked.emit(); try { - await this.openviduService.toggleScreenshare(); + await this.participantService.toggleScreenshare(); } catch (error) { this.log.e('There was an error toggling screen share', error.code, error.message); if (error && error.name === 'SCREEN_SHARING_NOT_SUPPORTED') { 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 7666468b..67abc3fe 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 @@ -326,14 +326,13 @@ export class OpenViduService { * @param hasAudio * @returns */ - initScreenPublisher(hasAudio: boolean): Promise { - const hasAudioDevicesAvailable = this.deviceService.hasAudioDeviceAvailable(); + initScreenPublisher(): Promise { const properties: PublisherProperties = { videoSource: ScreenType.SCREEN, - audioSource: hasAudioDevicesAvailable ? this.deviceService.getMicrophoneSelected().device : false, + audioSource: true, publishVideo: true, - publishAudio: hasAudio && hasAudioDevicesAvailable, + publishAudio: true, mirror: false }; return this.initPublisher(properties); 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 ca9c8a77..b38b50bd 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 @@ -71,32 +71,9 @@ export class ParticipantService { * */ async publishVideo(publish: boolean): Promise { - const publishAudio = this.isMyAudioActive(); const cameraPublisher = this.getMyCameraPublisher(); - const screenPublisher = this.getMyScreenPublisher(); - - // Disabling webcam - if (this.localParticipant.hasCameraAndScreenActives()) { - await this.publishVideoAux(cameraPublisher, publish); - this.disableWebcamStream(); - this.openviduService.unpublishCamera(cameraPublisher); - this.publishAudioAux(screenPublisher, publishAudio); - } else if (this.localParticipant.hasOnlyScreenActive()) { - // Enabling webcam - const hasAudio = this.hasScreenAudioActive(); - const sessionId = await this.openviduService.connectWebcamSession(this.getMyNickname(), this.getLocalParticipant().id); - if (sessionId) this.setMyCameraConnectionId(sessionId); - await this.openviduService.publishCamera(cameraPublisher); - await this.publishVideoAux(cameraPublisher, true); - this.publishAudioAux(screenPublisher, false); - this.publishAudioAux(cameraPublisher, hasAudio); - this.enableWebcamStream(); - } else { - // Muting/unmuting webcam - await this.publishVideoAux(cameraPublisher, publish); - } + await this.publishVideoAux(cameraPublisher, publish); this.updateLocalParticipant(); - } /** @@ -106,15 +83,9 @@ export class ParticipantService { */ publishAudio(publish: boolean): void { if (this.isMyCameraActive()) { - if (this.localParticipant.isScreenActive() && this.hasScreenAudioActive()) { - this.publishAudioAux(this.getMyScreenPublisher(), false); - } - this.publishAudioAux(this.getMyCameraPublisher(), publish); - } else { - this.publishAudioAux(this.getMyScreenPublisher(), publish); + this.updateLocalParticipant(); } - this.updateLocalParticipant(); } /** @@ -125,7 +96,6 @@ export class ParticipantService { async toggleScreenshare() { const screenPublisher = this.getMyScreenPublisher(); - const cameraPublisher = this.getMyCameraPublisher(); const participantNickname = this.getMyNickname(); const participantId = this.getLocalParticipant().id; @@ -136,9 +106,7 @@ export class ParticipantService { this.openviduService.unpublishScreen(screenPublisher); } else if (this.localParticipant.hasOnlyCameraActive()) { // I only have the camera published - const willWebcamBePresent = this.isMyCameraActive() && this.isMyVideoActive(); - const hasAudio = willWebcamBePresent ? false : this.isMyAudioActive(); - const screenPublisher = await this.openviduService.initScreenPublisher(hasAudio); + const screenPublisher = await this.openviduService.initScreenPublisher(); screenPublisher.once('accessAllowed', async () => { // Listen to event fired when native stop button is clicked @@ -157,33 +125,11 @@ export class ParticipantService { await this.openviduService.connectScreenSession(participantId, participantNickname); } await this.openviduService.publishScreen(screenPublisher); - if (!this.isMyVideoActive()) { - // Disabling webcam - this.disableWebcamStream(); - this.updateLocalParticipant(); - this.openviduService.unpublishCamera(cameraPublisher); - } }); screenPublisher.once('accessDenied', (error: any) => { return Promise.reject(error); }); - } else { - // I only have my screenshare active and I have no camera or it is muted - const hasAudio = this.hasScreenAudioActive(); - - // Enable webcam - if (!this.openviduService.isWebcamSessionConnected()) { - await this.openviduService.connectWebcamSession(participantId, participantNickname); - } - await this.openviduService.publishCamera(cameraPublisher); - this.publishAudioAux(cameraPublisher, hasAudio); - this.enableWebcamStream(); - - // Disabling screenshare - this.disableScreenStream(); - this.updateLocalParticipant(); - this.openviduService.unpublishScreen(screenPublisher); } } diff --git a/openvidu-components-angular/src/app/openvidu-call/call.component.html b/openvidu-components-angular/src/app/openvidu-call/call.component.html index df54d5f9..aab23bad 100644 --- a/openvidu-components-angular/src/app/openvidu-call/call.component.html +++ b/openvidu-components-angular/src/app/openvidu-call/call.component.html @@ -58,7 +58,7 @@ (onNodeCrashed)="onNodeCrashed()" (onLangChanged)="onLangChanged($event)" > -
{{ 'CUSTOM.BUTTON' | translate }}
+