diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/virtual-background/virtual-background.service.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/virtual-background/virtual-background.service.ts index dbc5e1c9..0967b9ae 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/virtual-background/virtual-background.service.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/virtual-background/virtual-background.service.ts @@ -15,14 +15,23 @@ export class VirtualBackgroundService { { id: 'soft_blur', type: EffectType.BLUR, thumbnail: 'blur_on', description: 'Blur effect' }, { id: '1', type: EffectType.IMAGE, thumbnail: 'assets/backgrounds/thumbnails/bg-1.jpg', src: 'assets/backgrounds/bg-1.jpg' }, { id: '2', type: EffectType.IMAGE, thumbnail: 'assets/backgrounds/thumbnails/bg-2.jpg', src: 'assets/backgrounds/bg-2.jpg' }, - { id: '3', type: EffectType.IMAGE, thumbnail: 'assets/backgrounds/thumbnails/bg-3.jpg', src: 'assets/backgrounds/bg-3.png' }, - { id: '4', type: EffectType.IMAGE, thumbnail: 'assets/backgrounds/thumbnails/bg-4.jpg', src: 'assets/backgrounds/bg-4.png' }, - { id: '5', type: EffectType.IMAGE, thumbnail: 'assets/backgrounds/thumbnails/bg-5.jpg', src: 'assets/backgrounds/bg-5.png' }, - { id: '6', type: EffectType.IMAGE, thumbnail: 'assets/backgrounds/thumbnails/bg-6.jpg', src: 'assets/backgrounds/bg-6.png' }, - { id: '7', type: EffectType.IMAGE, thumbnail: 'assets/backgrounds/thumbnails/bg-7.jpg', src: 'assets/backgrounds/bg-7.png' }, - { id: '8', type: EffectType.IMAGE, thumbnail: 'assets/backgrounds/thumbnails/bg-8.jpg', src: 'assets/backgrounds/bg-8.png' }, - { id: '9', type: EffectType.IMAGE, thumbnail: 'assets/backgrounds/thumbnails/bg-9.jpg', src: 'assets/backgrounds/bg-9.png' }, - { id: '10', type: EffectType.IMAGE, thumbnail: 'assets/backgrounds/thumbnails/bg-10.jpg', src: 'assets/backgrounds/bg-10.png' } + { id: '3', type: EffectType.IMAGE, thumbnail: 'assets/backgrounds/thumbnails/bg-3.jpg', src: 'assets/backgrounds/bg-3.jpg' }, + { id: '4', type: EffectType.IMAGE, thumbnail: 'assets/backgrounds/thumbnails/bg-4.jpg', src: 'assets/backgrounds/bg-4.jpg' }, + { id: '19', type: EffectType.IMAGE, thumbnail: 'assets/backgrounds/thumbnails/bg-19.jpg', src: 'assets/backgrounds/bg-19.jpg' }, + { id: '5', type: EffectType.IMAGE, thumbnail: 'assets/backgrounds/thumbnails/bg-5.jpg', src: 'assets/backgrounds/bg-5.jpg' }, + { id: '6', type: EffectType.IMAGE, thumbnail: 'assets/backgrounds/thumbnails/bg-6.jpg', src: 'assets/backgrounds/bg-6.jpg' }, + { id: '7', type: EffectType.IMAGE, thumbnail: 'assets/backgrounds/thumbnails/bg-7.jpg', src: 'assets/backgrounds/bg-7.jpg' }, + { id: '8', type: EffectType.IMAGE, thumbnail: 'assets/backgrounds/thumbnails/bg-8.jpg', src: 'assets/backgrounds/bg-8.jpg' }, + { id: '9', type: EffectType.IMAGE, thumbnail: 'assets/backgrounds/thumbnails/bg-9.jpg', src: 'assets/backgrounds/bg-9.jpg' }, + { id: '10', type: EffectType.IMAGE, thumbnail: 'assets/backgrounds/thumbnails/bg-10.jpg', src: 'assets/backgrounds/bg-10.jpg' }, + { id: '11', type: EffectType.IMAGE, thumbnail: 'assets/backgrounds/thumbnails/bg-11.jpg', src: 'assets/backgrounds/bg-11.jpg' }, + { id: '12', type: EffectType.IMAGE, thumbnail: 'assets/backgrounds/thumbnails/bg-12.jpg', src: 'assets/backgrounds/bg-12.jpg' }, + { id: '13', type: EffectType.IMAGE, thumbnail: 'assets/backgrounds/thumbnails/bg-13.jpg', src: 'assets/backgrounds/bg-13.jpg' }, + { id: '14', type: EffectType.IMAGE, thumbnail: 'assets/backgrounds/thumbnails/bg-14.jpg', src: 'assets/backgrounds/bg-14.jpg' }, + { id: '15', type: EffectType.IMAGE, thumbnail: 'assets/backgrounds/thumbnails/bg-15.jpg', src: 'assets/backgrounds/bg-15.jpg' }, + { id: '16', type: EffectType.IMAGE, thumbnail: 'assets/backgrounds/thumbnails/bg-16.jpg', src: 'assets/backgrounds/bg-16.jpg' }, + { id: '17', type: EffectType.IMAGE, thumbnail: 'assets/backgrounds/thumbnails/bg-17.jpg', src: 'assets/backgrounds/bg-17.jpg' }, + { id: '18', type: EffectType.IMAGE, thumbnail: 'assets/backgrounds/thumbnails/bg-18.jpg', src: 'assets/backgrounds/bg-18.jpg' } ]; constructor(private participantService: ParticipantService, private tokenService: TokenService) { @@ -33,20 +42,36 @@ export class VirtualBackgroundService { return this.backgrounds; } async applyBackground(effect: BackgroundEffect) { - this.backgroundSelected.next(effect.id); + if (effect.id !== this.backgroundSelected.getValue()) { + const isBackgroundSelected = !!this.backgroundSelected.getValue() && this.backgroundSelected.getValue() !== 'no_effect'; + let options = { token: this.tokenService.getWebcamToken(), url: '' }; + if (effect.type === EffectType.IMAGE) { + options.url = effect.src; + } - let options = { token: this.tokenService.getWebcamToken(), url: '' }; - if (effect.type === EffectType.IMAGE) { - options.url = effect.src; + if (isBackgroundSelected && this.hasSameTypeAsAbove(effect.type)) { + this.replaceBackground(effect); + } else { + await this.removeBackground(); + await this.participantService.getMyCameraPublisher().stream.applyFilter(`VB:${effect.type.toLowerCase()}`, options); + } + this.backgroundSelected.next(effect.id); } - - console.log(`VB:${effect.type.toLowerCase()}`); - console.log(options) - await this.participantService.getMyCameraPublisher().stream.applyFilter(`VB:${effect.type.toLowerCase()}`, options); } async removeBackground() { - this.backgroundSelected.next('no_effect'); - await this.participantService.getMyCameraPublisher().stream.removeFilter(); + if (!!this.backgroundSelected.getValue() && this.backgroundSelected.getValue() !== 'no_effect') { + this.backgroundSelected.next('no_effect'); + await this.participantService.getMyCameraPublisher().stream.removeFilter(); + } + } + + private async replaceBackground(effect: BackgroundEffect) { + await this.participantService.getMyCameraPublisher().stream.filter.execMethod('update', { url: effect.src }); + } + + private hasSameTypeAsAbove(type: EffectType): boolean { + const oldEffect = this.backgrounds.find((bg) => bg.id === this.backgroundSelected.getValue()); + return oldEffect?.type === type; } } diff --git a/openvidu-components-angular/src/assets/backgrounds/bg-11.jpg b/openvidu-components-angular/src/assets/backgrounds/bg-11.jpg new file mode 100644 index 00000000..5de836e3 Binary files /dev/null and b/openvidu-components-angular/src/assets/backgrounds/bg-11.jpg differ diff --git a/openvidu-components-angular/src/assets/backgrounds/bg-12.jpg b/openvidu-components-angular/src/assets/backgrounds/bg-12.jpg new file mode 100644 index 00000000..cc61780b Binary files /dev/null and b/openvidu-components-angular/src/assets/backgrounds/bg-12.jpg differ diff --git a/openvidu-components-angular/src/assets/backgrounds/bg-13.jpg b/openvidu-components-angular/src/assets/backgrounds/bg-13.jpg new file mode 100644 index 00000000..10709c12 Binary files /dev/null and b/openvidu-components-angular/src/assets/backgrounds/bg-13.jpg differ diff --git a/openvidu-components-angular/src/assets/backgrounds/bg-14.jpg b/openvidu-components-angular/src/assets/backgrounds/bg-14.jpg new file mode 100644 index 00000000..3332ad1b Binary files /dev/null and b/openvidu-components-angular/src/assets/backgrounds/bg-14.jpg differ diff --git a/openvidu-components-angular/src/assets/backgrounds/bg-15.jpg b/openvidu-components-angular/src/assets/backgrounds/bg-15.jpg new file mode 100644 index 00000000..f64a0c88 Binary files /dev/null and b/openvidu-components-angular/src/assets/backgrounds/bg-15.jpg differ diff --git a/openvidu-components-angular/src/assets/backgrounds/bg-16.jpg b/openvidu-components-angular/src/assets/backgrounds/bg-16.jpg new file mode 100644 index 00000000..1e86e3c7 Binary files /dev/null and b/openvidu-components-angular/src/assets/backgrounds/bg-16.jpg differ diff --git a/openvidu-components-angular/src/assets/backgrounds/bg-17.jpg b/openvidu-components-angular/src/assets/backgrounds/bg-17.jpg new file mode 100644 index 00000000..ea9f2ab2 Binary files /dev/null and b/openvidu-components-angular/src/assets/backgrounds/bg-17.jpg differ diff --git a/openvidu-components-angular/src/assets/backgrounds/bg-18.jpg b/openvidu-components-angular/src/assets/backgrounds/bg-18.jpg new file mode 100644 index 00000000..63334f03 Binary files /dev/null and b/openvidu-components-angular/src/assets/backgrounds/bg-18.jpg differ diff --git a/openvidu-components-angular/src/assets/backgrounds/bg-19.jpg b/openvidu-components-angular/src/assets/backgrounds/bg-19.jpg new file mode 100644 index 00000000..d0fa3797 Binary files /dev/null and b/openvidu-components-angular/src/assets/backgrounds/bg-19.jpg differ diff --git a/openvidu-components-angular/src/assets/backgrounds/thumbnails/bg-11.jpg b/openvidu-components-angular/src/assets/backgrounds/thumbnails/bg-11.jpg new file mode 100644 index 00000000..a018154a Binary files /dev/null and b/openvidu-components-angular/src/assets/backgrounds/thumbnails/bg-11.jpg differ diff --git a/openvidu-components-angular/src/assets/backgrounds/thumbnails/bg-12.jpg b/openvidu-components-angular/src/assets/backgrounds/thumbnails/bg-12.jpg new file mode 100644 index 00000000..f6e7f441 Binary files /dev/null and b/openvidu-components-angular/src/assets/backgrounds/thumbnails/bg-12.jpg differ diff --git a/openvidu-components-angular/src/assets/backgrounds/thumbnails/bg-13.jpg b/openvidu-components-angular/src/assets/backgrounds/thumbnails/bg-13.jpg new file mode 100644 index 00000000..6aaed69d Binary files /dev/null and b/openvidu-components-angular/src/assets/backgrounds/thumbnails/bg-13.jpg differ diff --git a/openvidu-components-angular/src/assets/backgrounds/thumbnails/bg-14.jpg b/openvidu-components-angular/src/assets/backgrounds/thumbnails/bg-14.jpg new file mode 100644 index 00000000..873f0b6a Binary files /dev/null and b/openvidu-components-angular/src/assets/backgrounds/thumbnails/bg-14.jpg differ diff --git a/openvidu-components-angular/src/assets/backgrounds/thumbnails/bg-15.jpg b/openvidu-components-angular/src/assets/backgrounds/thumbnails/bg-15.jpg new file mode 100644 index 00000000..7e4a7937 Binary files /dev/null and b/openvidu-components-angular/src/assets/backgrounds/thumbnails/bg-15.jpg differ diff --git a/openvidu-components-angular/src/assets/backgrounds/thumbnails/bg-16.jpg b/openvidu-components-angular/src/assets/backgrounds/thumbnails/bg-16.jpg new file mode 100644 index 00000000..55a536bf Binary files /dev/null and b/openvidu-components-angular/src/assets/backgrounds/thumbnails/bg-16.jpg differ diff --git a/openvidu-components-angular/src/assets/backgrounds/thumbnails/bg-17.jpg b/openvidu-components-angular/src/assets/backgrounds/thumbnails/bg-17.jpg new file mode 100644 index 00000000..d8b864ff Binary files /dev/null and b/openvidu-components-angular/src/assets/backgrounds/thumbnails/bg-17.jpg differ diff --git a/openvidu-components-angular/src/assets/backgrounds/thumbnails/bg-18.jpg b/openvidu-components-angular/src/assets/backgrounds/thumbnails/bg-18.jpg new file mode 100644 index 00000000..6f7be30d Binary files /dev/null and b/openvidu-components-angular/src/assets/backgrounds/thumbnails/bg-18.jpg differ diff --git a/openvidu-components-angular/src/assets/backgrounds/thumbnails/bg-19.jpg b/openvidu-components-angular/src/assets/backgrounds/thumbnails/bg-19.jpg new file mode 100644 index 00000000..66860975 Binary files /dev/null and b/openvidu-components-angular/src/assets/backgrounds/thumbnails/bg-19.jpg differ