openvidu-components: Added more background samples
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
After Width: | Height: | Size: 64 KiB |
After Width: | Height: | Size: 95 KiB |
After Width: | Height: | Size: 166 KiB |
After Width: | Height: | Size: 48 KiB |
After Width: | Height: | Size: 294 KiB |
After Width: | Height: | Size: 55 KiB |
After Width: | Height: | Size: 89 KiB |
After Width: | Height: | Size: 73 KiB |
After Width: | Height: | Size: 183 KiB |
After Width: | Height: | Size: 481 B |
After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 1.6 KiB |
After Width: | Height: | Size: 1.1 KiB |
After Width: | Height: | Size: 1.5 KiB |
After Width: | Height: | Size: 901 B |
After Width: | Height: | Size: 943 B |
After Width: | Height: | Size: 813 B |
After Width: | Height: | Size: 1.4 KiB |