useInputSettings

import { DailyEventObjectInputSettingsUpdated } from '@daily-co/daily-js';
import { useInputSettings } from '@daily-co/daily-react';
import React, { useCallback, useState } from 'react';

export const UseInputSettingsDemo = () => {
  const [, setErrorMessage] = useState('No error!');

  const { updateInputSettings, errorMsg } = useInputSettings({
    onError: useCallback(() => {
      setErrorMessage(errorMsg);
    }, [errorMsg]),

    onInputSettingsUpdated: useCallback(
      (event: DailyEventObjectInputSettingsUpdated) => {
        console.log(
          'Input settings updated:',
          event.inputSettings?.video?.processor
        );
      },
      []
    ),
  });

  const enableBackgroundBlur = () => {
    updateInputSettings({
      video: {
        processor: {
          type: 'background-blur',
          config: { strength: 0.5 },
        },
      },
    });
  };

  return (
    <div>
      <button type="button" onClick={enableBackgroundBlur}>
        Enable background blur
      </button>
    </div>
  );
};