Background Effect Pro Version

OpenVidu v2 How to implement?
1

Hello Dears,
as we can see in the video in the Virtual backgrounds, the 3 dots button in the toolbar, where you can choose the option of background effects
it shows a white box that contains: no effect, blur and under these options you can choose image as a background
my question is is the box that shows up in the video (ov-background-effects-panel) is given by the openVidu? and if yes, in which section I can find it?
then is the 3 dots button in the toolbar also given my the openVidu?

thank you so much in advance

2

Hello,

The box that appears in the video, referred to as “ov-background-effects-panel,” is likely a part of the OpenVidu Components implementation for handling background effects. To locate this specific component, you should check the OpenVidu documentation OpenVidu Angular Documentation.

This directive allows enable or disable the virtual background button provides by default.

In conclusion, The OpenVidu Call Application includes this feature by default in OpenVidu PRO and ENTERPRISE editions.

3

Thank you for your response

we have the code for the toolbar as the following:

<mat-toolbar id=“header” role=“heading” [class.headerLight]=“lightTheme” fxLayout fxLayoutAlign=“center” fxLayoutGap=“10px”>


<app-toolbar-logo [lightTheme]=“lightTheme” [sessionId]=“mySessionId” [CallDuration]=“CallDuration” [compact]=“compact” [logoUrl]=“logoUrl”>



<button id=“navMicrophoneButton” mat-icon-button (click)=“toggleMicrophone()” [disabled]=“isConnectionLost” *ngIf=“hasAudioDevices && (ovSettings | hasAudio)”>
<mat-icon *ngIf=“isWebcamAudioEnabled” matTooltip=“Mute your audio”>mic
<mat-icon *ngIf=“!isWebcamAudioEnabled” color=“warn” matTooltip=“Unmute your audio”>mic_off

        <!-- Camera button -->
        <button id="navCameraButton" mat-icon-button (click)="toggleCamera()" [disabled]="isConnectionLost" *ngIf="!this.ovSettings || (hasVideoDevices && (this.ovSettings | hasVideo))">
			<mat-icon *ngIf="isWebcamVideoEnabled" matTooltip="Mute your cam">videocam</mat-icon>
			<mat-icon *ngIf="!isWebcamVideoEnabled" color="warn" matTooltip="Unmute your cam">videocam_off</mat-icon>
		</button>

        <!-- Screenshare button -->
        <button id="navScreenButton" mat-icon-button (click)="toggleScreenShare()" [disabled]="isConnectionLost" *ngIf="(ovSettings | hasScreenSharing) && !(IsRemoteUserHasShareScreen) ">
			<mat-icon *ngIf="!isScreenShareEnabled" matTooltip="Screen share" color="warn">stop_screen_share</mat-icon>
			<mat-icon *ngIf="isScreenShareEnabled" matTooltip="Stop sharing">screen_share</mat-icon>
		</button>

        <!-- Fullscreen button -->
        <button mat-icon-button (click)="toggleFullscreen()" [disabled]="isConnectionLost" *ngIf="ovSettings | hasFullscreen">
			<mat-icon matTooltip="Full screen">{{ fullscreenIcon }}</mat-icon>
		</button>

I don’t have
ov-videoconference or ov-toolbar tags, so is there a possible way to do that ?
Since I’m using the version 2.20

4

OpenVidu Components and OpenVidu Virtual Background are available since 2.22.0 version.

I recommend update your stack to 2.29.0 version which is the latest release and it includes many bugfixes and improvements.

Regards

5

I did FOR the open-browser, then the blur is worked
now, so the code also should be updated ?! should I add the toolbar component?

if yes, Could please provide me with the needed document?

6

As I suppose you are using OpenVidu Call, here is the latest version doc OpenVidu Call - OpenVidu Docs

The OpenVidu Call is using OpenVidu Components Intro - OpenVidu Docs