openvidu-browser: Fixed typo
|
@ -1376,8 +1376,8 @@ export class Session extends EventDispatcher {
|
|||
webrtcStatsInterval: queryParams['webrtcStatsInterval'],
|
||||
sendBrowserLogs: queryParams['sendBrowserLogs'],
|
||||
edition: queryParams['edition'],
|
||||
wsUri = 'wss://' + url.host + '/openvidu',
|
||||
httpUri = 'https://' + url.host
|
||||
wsUri: 'wss://' + url.host + '/openvidu',
|
||||
httpUri: 'https://' + url.host
|
||||
};
|
||||
|
||||
} else {
|
||||
|
|
|
@ -0,0 +1,13 @@
|
|||
export enum EffectType {
|
||||
NONE = 'NONE',
|
||||
BLUR = 'BLUR',
|
||||
IMAGE = 'IMAGE'
|
||||
}
|
||||
|
||||
export interface BackgroundEffect {
|
||||
id: string;
|
||||
type: EffectType;
|
||||
thumbnail: string;
|
||||
src?: string;
|
||||
description?: string;
|
||||
}
|
|
@ -0,0 +1,16 @@
|
|||
import { TestBed } from '@angular/core/testing';
|
||||
|
||||
import { VirtualBackgroundService } from './virtual-background.service';
|
||||
|
||||
describe('VirtualBackgroundService', () => {
|
||||
let service: VirtualBackgroundService;
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({});
|
||||
service = TestBed.inject(VirtualBackgroundService);
|
||||
});
|
||||
|
||||
it('should be created', () => {
|
||||
expect(service).toBeTruthy();
|
||||
});
|
||||
});
|
|
@ -0,0 +1,52 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
import { BehaviorSubject, Observable } from 'rxjs';
|
||||
import { BackgroundEffect, EffectType } from '../../models/background-effect.model';
|
||||
import { ParticipantService } from '../participant/participant.service';
|
||||
import { TokenService } from '../token/token.service';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class VirtualBackgroundService {
|
||||
backgroundSelected = <BehaviorSubject<string>>new BehaviorSubject('');
|
||||
backgroundSelectedObs: Observable<string>;
|
||||
backgrounds: BackgroundEffect[] = [
|
||||
{ id: 'no_effect', type: EffectType.NONE, thumbnail: 'block', description: 'No background effect' },
|
||||
{ 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' }
|
||||
];
|
||||
|
||||
constructor(private participantService: ParticipantService, private tokenService: TokenService) {
|
||||
this.backgroundSelectedObs = this.backgroundSelected.asObservable();
|
||||
}
|
||||
|
||||
getBackgrounds(): any[] {
|
||||
return this.backgrounds;
|
||||
}
|
||||
async applyBackground(effect: BackgroundEffect) {
|
||||
this.backgroundSelected.next(effect.id);
|
||||
|
||||
let options = { token: this.tokenService.getWebcamToken(), url: '' };
|
||||
if (effect.type === EffectType.IMAGE) {
|
||||
options.url = effect.src;
|
||||
}
|
||||
|
||||
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();
|
||||
}
|
||||
}
|
After Width: | Height: | Size: 258 KiB |
After Width: | Height: | Size: 30 KiB |
After Width: | Height: | Size: 190 KiB |
After Width: | Height: | Size: 207 KiB |
After Width: | Height: | Size: 194 KiB |
After Width: | Height: | Size: 268 KiB |
After Width: | Height: | Size: 120 KiB |
After Width: | Height: | Size: 228 KiB |
After Width: | Height: | Size: 82 KiB |
After Width: | Height: | Size: 328 KiB |
After Width: | Height: | Size: 587 B |
After Width: | Height: | Size: 621 B |
After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 1.0 KiB |
After Width: | Height: | Size: 1.6 KiB |
After Width: | Height: | Size: 1.3 KiB |
After Width: | Height: | Size: 1.4 KiB |
After Width: | Height: | Size: 1.5 KiB |
After Width: | Height: | Size: 1.3 KiB |
After Width: | Height: | Size: 1.6 KiB |
After Width: | Height: | Size: 4.0 KiB |