Background Effects Error

reeceatkinson

I have made a custom slider that has a min of 0, a max of 1 and a step of 0.1

When I move the slider it gets the value and runs the code below:

callFrame.updateInputSettings({

video: {

processor: {

type: 'background-blur',

config: { strength: this.value },

},

},

});

Each time I change the value it just throws an error (see attached image)

this.value is a value between 0 and 1

Tamara

Hi @reeceatkinson when are you trying to pass these settings? We're aware of this happening when you're passing the inputSettings while creating the callObject, where as an alternative you could call the updateInputSettings method with the config.

We have some example code here that might be helpful: https://github.com/daily-demos/examples/blob/b04bb8e5e1d169be20c1cbbf36e8a6696261262b/custom/background-effects/components/BackgroundEffectsModal.js

updateInputSettings can be called be as soon as you turn on your camera and you get a track-started event. You can see an example of how that works here: https://github.com/harshithpabbati/virtual-class-demo/commit/f06d8d7f570a3c2941aad53c8385de2a8288dc8a

If this isn't what's causing this let me know (as I am aware that you were working on a settings menu for during the call), and I'll pass this on to the team.

christian

Hey @reeceatkinson,

just a quick question to confirm: are you passing the value with the type number and not string?

I'm asking because this.value as referenced in your code could contain a string representation of that number. Try either this.valueAsNumber or Number(this.value).

reeceatkinson

@christian / @Tamara that did the trick! Thank you both!