agora-appbuilder-core 3.0.13 → 3.0.28-beta-9

package/template/src/app-state/useNoiseSupression.native.tsx

@@ -0,0 +1,73 @@
+import React, {createContext, useState, useEffect} from 'react';
+import {ToggleState} from '../../agora-rn-uikit';
+import {createHook} from 'customization-implementation';
+import {LogSource, logger} from '../logger/AppBuilderLogger';
+
+export interface NoiseSupressionContextInterface {
+  isNoiseSupressionEnabled: ToggleState;
+  setNoiseSupression: (
+    p: (currentState: boolean) => boolean | boolean,
+  ) => Promise<void>;
+}
+
+export const NoiseSupressionContext =
+  createContext<NoiseSupressionContextInterface>({
+    isNoiseSupressionEnabled: ToggleState.disabled,
+    setNoiseSupression: async () => {},
+  });
+
+export function NoiseSupressionProvider(props) {
+  const [isNoiseSupressionEnabled, setIsNoiseSupressionEnabled] = useState(
+    ToggleState.disabled,
+  );
+
+  useEffect(() => {
+    if ($config.ENABLE_NOISE_CANCELLATION) {
+    }
+  }, []);
+
+  const enableNoiseSuppression = async () => {};
+
+  const disableNoiseSuppression = async () => {};
+
+  const setNoiseSupression: NoiseSupressionContextInterface['setNoiseSupression'] =
+    async p => {
+      if (
+        isNoiseSupressionEnabled === ToggleState.disabling ||
+        isNoiseSupressionEnabled === ToggleState.enabling
+      ) {
+        logger.error(
+          LogSource.Internals,
+          'NOISE_CANCELLATION',
+          'Cant change noise supression, already in transition',
+        );
+        throw new Error('Cant change noise supression, already in transition');
+      }
+      let stateToBeSet =
+        typeof p === 'function'
+          ? p(isNoiseSupressionEnabled === ToggleState.enabled)
+          : p;
+
+      if (stateToBeSet) {
+        setIsNoiseSupressionEnabled(ToggleState.enabling);
+        await enableNoiseSuppression();
+        setIsNoiseSupressionEnabled(ToggleState.enabled);
+      } else {
+        setIsNoiseSupressionEnabled(ToggleState.disabling);
+        await disableNoiseSuppression();
+        setIsNoiseSupressionEnabled(ToggleState.disabled);
+      }
+    };
+
+  return (
+    <NoiseSupressionContext.Provider
+      value={{
+        isNoiseSupressionEnabled,
+        setNoiseSupression,
+      }}>
+      {props.children}
+    </NoiseSupressionContext.Provider>
+  );
+}
+
+export const useNoiseSupression = createHook(NoiseSupressionContext);

package/template/src/app-state/useNoiseSupression.tsx

@@ -0,0 +1,151 @@
+import React, {createContext, useState, useEffect, useRef} from 'react';
+import {useRtc} from 'customization-api';
+import {ToggleState} from '../../agora-rn-uikit';
+import AgoraRTC from 'agora-rtc-sdk-ng';
+import {AIDenoiserExtension} from 'agora-extension-ai-denoiser';
+//@ts-ignore
+import wasm1 from './../../node_modules/agora-extension-ai-denoiser/external/denoiser-wasm.wasm';
+//@ts-ignore
+import wasm2 from './../../node_modules/agora-extension-ai-denoiser/external/denoiser-wasm-simd.wasm';
+import {createHook} from 'customization-implementation';
+import {LogSource, logger} from '../logger/AppBuilderLogger';
+// Necessary To bypass treeshaking, dont remove
+console.log('wasm files loaded are', wasm1, wasm2);
+
+export interface NoiseSupressionContextInterface {
+  isNoiseSupressionEnabled: ToggleState;
+  setNoiseSupression: (
+    p: (currentState: boolean) => boolean | boolean,
+  ) => Promise<void>;
+}
+
+export const NoiseSupressionContext =
+  createContext<NoiseSupressionContextInterface>({
+    isNoiseSupressionEnabled: ToggleState.disabled,
+    setNoiseSupression: async () => {},
+  });
+
+export function NoiseSupressionProvider(props) {
+  const {callActive} = props;
+  const [isNoiseSupressionEnabled, setIsNoiseSupressionEnabled] = useState(
+    ToggleState.disabled,
+  );
+
+  const {RtcEngineUnsafe} = useRtc();
+  let processor = useRef(null);
+
+  useEffect(() => {
+    if (callActive && $config.ENABLE_NOISE_CANCELLATION_BY_DEFAULT) {
+      setNoiseSupression(p => !p);
+    }
+  }, [callActive]);
+
+  useEffect(() => {
+    if ($config.ENABLE_NOISE_CANCELLATION) {
+      try {
+        const denoiserExtension = new AIDenoiserExtension({assetsPath: 'wasm'});
+        AgoraRTC.registerExtensions([denoiserExtension]);
+        processor.current = denoiserExtension.createProcessor();
+        processor.current.disable();
+      } catch (error) {
+        logger.error(
+          LogSource.Internals,
+          'NOISE_CANCELLATION',
+          'Failed to initiate AIDenoiserExtension',
+          error,
+        );
+      }
+    }
+  }, []);
+
+  const enableNoiseSuppression = async () => {
+    if (!$config.ENABLE_NOISE_CANCELLATION) {
+      throw new Error('AINS disabled in config');
+    }
+    //@ts-ignore
+    const localAudioTrack = RtcEngineUnsafe?.localStream?.audio;
+
+    try {
+      if (processor?.current) {
+        localAudioTrack
+          ?.pipe(processor.current)
+          .pipe(localAudioTrack?.processorDestination);
+
+        await processor?.current?.enable();
+        logger.log(
+          LogSource.Internals,
+          'NOISE_CANCELLATION',
+          'noise suppression enabled',
+        );
+      }
+    } catch (error) {
+      logger.error(
+        LogSource.Internals,
+        'NOISE_CANCELLATION',
+        'Failed to enable noise suppression',
+        error,
+      );
+    }
+  };
+
+  const disableNoiseSuppression = async () => {
+    try {
+      if (processor?.current) {
+        await processor?.current?.disable();
+        logger.log(
+          LogSource.Internals,
+          'NOISE_CANCELLATION',
+          'noise suppression disabled',
+        );
+      }
+    } catch (error) {
+      logger.error(
+        LogSource.Internals,
+        'NOISE_CANCELLATION',
+        'Failed to disable noise suppression',
+        error,
+      );
+    }
+  };
+
+  const setNoiseSupression: NoiseSupressionContextInterface['setNoiseSupression'] =
+    async p => {
+      if (
+        isNoiseSupressionEnabled === ToggleState.disabling ||
+        isNoiseSupressionEnabled === ToggleState.enabling
+      ) {
+        logger.error(
+          LogSource.Internals,
+          'NOISE_CANCELLATION',
+          'Cant change noise supression, already in transition',
+        );
+        throw new Error('Cant change noise supression, already in transition');
+      }
+      let stateToBeSet =
+        typeof p === 'function'
+          ? p(isNoiseSupressionEnabled === ToggleState.enabled)
+          : p;
+
+      if (stateToBeSet) {
+        setIsNoiseSupressionEnabled(ToggleState.enabling);
+        await enableNoiseSuppression();
+        setIsNoiseSupressionEnabled(ToggleState.enabled);
+      } else {
+        setIsNoiseSupressionEnabled(ToggleState.disabling);
+        await disableNoiseSuppression();
+        setIsNoiseSupressionEnabled(ToggleState.disabled);
+      }
+    };
+
+  return (
+    <NoiseSupressionContext.Provider
+      value={{
+        isNoiseSupressionEnabled,
+        setNoiseSupression,
+      }}>
+      {props.children}
+    </NoiseSupressionContext.Provider>
+  );
+}
+
+export const useNoiseSupression = createHook(NoiseSupressionContext);

package/template/src/app-state/useVideoQuality.tsx

@@ -0,0 +1,182 @@
+import React, {createContext, useState} from 'react';
+import {useRtc} from 'customization-api';
+import {createHook} from 'customization-implementation';
+import {Platform} from 'react-native';
+
+export type VideoEncoderConfigurationPreset = VideoProfilePreset;
+export type ScreenEncoderConfigurationPreset = ScreenShareProfilePreset;
+
+// Specifies a constraint for a property, such as the resolution or bitrate for video capture in
+interface ConstraintLong {
+  /**
+   * A required value of a property. If the video capture device cannot output this value, the video capture fails.
+   */
+  exact?: number;
+  /**
+   * An ideal value of a property. If the video capture device cannot output this value, it outputs the closest value instead.
+   */
+  ideal?: number;
+  /**
+   * The upper limit of the property.
+   */
+  max?: number;
+  /**
+   * The lower limit of the property.
+   */
+  min?: number;
+}
+
+export interface VideoEncoderConfiguration {
+  /**
+   * The maximum bitrate of the video (Kbps).
+   */
+  bitrateMax?: number;
+  /**
+   * The minimum bitrate of the video (Kbps).
+   */
+
+  bitrateMin?: number;
+  /**
+   * Frame rate of the video (fps).
+   * You can pass a number, or a constraint such as { max: 30, min: 5 }.
+   */
+
+  frameRate?: number | ConstraintLong;
+  /**
+   * Height of the video.
+   * You can pass a number, or a constraint such as { max: 1280, min: 720 }.
+   */
+  height?: number | ConstraintLong;
+  /**
+   * Width of the video.
+   * You can pass a number, or a constraint such as { max: 1280, min: 720 }.
+   */
+  width?: number | ConstraintLong;
+}
+
+export const videoProfilesArray: VideoEncoderConfigurationPreset[] = [
+  '120p_1',
+  '120p_3',
+  '180p_1',
+  '180p_3',
+  '180p_4',
+  '240p_1',
+  '240p_3',
+  '240p_4',
+  '360p_1',
+  '360p_3',
+  '360p_4',
+  '360p_6',
+  '360p_7',
+  '360p_8',
+  '360p_9',
+  '360p_10',
+  '360p_11',
+  '480p_1',
+  '480p_2',
+  '480p_3',
+  '480p_4',
+  '480p_6',
+  '480p_8',
+  '480p_9',
+  '480p_10',
+  '720p_1',
+  '720p_2',
+  '720p_3',
+  '720p_5',
+  '720p_6',
+];
+
+export const screenShareProfilesArray: ScreenEncoderConfigurationPreset[] = [
+  '480p_1',
+  '480p_2',
+  '480p_3',
+  '720p',
+  '720p_1',
+  '720p_2',
+  '720p_3',
+  '1080p',
+  '1080p_1',
+  '1080p_2',
+  '1080p_3',
+];
+
+interface VideoQualityContextInterface {
+  currentVideoQuality:
+    | VideoEncoderConfigurationPreset
+    | VideoEncoderConfiguration;
+  setVideoQuality: (
+    videoQuality: VideoEncoderConfigurationPreset | VideoEncoderConfiguration,
+  ) => void;
+  currentScreenShareQuality:
+    | ScreenEncoderConfigurationPreset
+    | VideoEncoderConfiguration;
+  setScreenShareQuality: (
+    screenShareQuality:
+      | ScreenEncoderConfigurationPreset
+      | VideoEncoderConfiguration,
+  ) => void;
+  videoEncoderPresets: VideoEncoderConfigurationPreset[];
+  screenShareEncoderPresets: ScreenEncoderConfigurationPreset[];
+}
+
+export const VideoQualityContext = createContext<VideoQualityContextInterface>({
+  currentVideoQuality: $config.PROFILE,
+  setVideoQuality: (
+    _p: VideoEncoderConfigurationPreset | VideoEncoderConfiguration,
+  ) => {},
+  currentScreenShareQuality: $config.SCREEN_SHARE_PROFILE,
+  setScreenShareQuality: (
+    _p: ScreenEncoderConfigurationPreset | VideoEncoderConfiguration,
+  ) => {},
+  videoEncoderPresets: videoProfilesArray,
+  screenShareEncoderPresets: screenShareProfilesArray,
+});
+
+export const VideoQualityContextProvider = props => {
+  const [currentVideoQuality, setCurrentVideoQuality] = useState<
+    VideoEncoderConfigurationPreset | VideoEncoderConfiguration
+  >($config.PROFILE);
+
+  const [currentScreenShareQuality, setCurrentScreenShareQuality] = useState<
+    ScreenEncoderConfigurationPreset | VideoEncoderConfiguration
+  >($config.SCREEN_SHARE_PROFILE);
+
+  const {RtcEngineUnsafe} = useRtc();
+
+  const setVideoQuality = async (
+    q: VideoEncoderConfigurationPreset | VideoEncoderConfiguration,
+  ) => {
+    if (Platform.OS === 'web' && RtcEngineUnsafe) {
+      // @ts-ignore
+      await RtcEngineUnsafe.setVideoProfile(q);
+      setCurrentVideoQuality(q);
+    }
+  };
+
+  const setScreenShareQuality = async (
+    q: ScreenEncoderConfigurationPreset | VideoEncoderConfiguration,
+  ) => {
+    if (Platform.OS === 'web' && RtcEngineUnsafe) {
+      // @ts-ignore
+      await RtcEngineUnsafe.setScreenShareProfile(q);
+      setCurrentScreenShareQuality(q);
+    }
+  };
+
+  return (
+    <VideoQualityContext.Provider
+      value={{
+        currentVideoQuality,
+        setVideoQuality,
+        currentScreenShareQuality,
+        setScreenShareQuality,
+        videoEncoderPresets: videoProfilesArray,
+        screenShareEncoderPresets: screenShareProfilesArray,
+      }}>
+      {props.children}
+    </VideoQualityContext.Provider>
+  );
+};
+
+export const useVideoQuality = createHook(VideoQualityContext);

package/template/src/app-state/useVirtualBackground.ts

@@ -0,0 +1,152 @@
+import {useEffect, useRef} from 'react';
+import {
+  convertBlobToBase64,
+  retrieveImagesFromStorage,
+} from '../../src/components/virtual-background/VButils';
+import {
+  Option,
+  useVB,
+  type VBMode,
+  type VBProcessorType,
+} from '../../src/components/virtual-background/useVB';
+
+import {useSidePanel} from '../utils/useSidePanel';
+import {SidePanelType} from '../subComponents/SidePanelEnum';
+
+export interface VBConfig {
+  target: 'mainView' | 'preview';
+  blurDegree?: number;
+  type: 'blur' | 'img' | 'custom'; // Adjust this as needed based on your configuration options
+  source?: HTMLImageElement;
+}
+
+export interface virtualBackgroundInterface {
+  virtualBackgrounds: Option[]; // options available in vb panel
+  addVirtualBackgrounds: (options: Option[]) => void;
+  setVBPreview: (type: VBMode, path: string) => void;
+  applyVirtualBackground: () => void;
+  isVirtualBackgroundPanelOpen: boolean;
+  hideVirtualBackgroundPanel: () => void;
+  showVirtualBackgroundPanel: () => void;
+  virtualBackgroundProcessor: VBProcessorType;
+}
+
+export const useVirtualBackground: () => virtualBackgroundInterface = () => {
+  const {
+    options,
+    setOptions,
+    selectedImage,
+    vbMode,
+    setSelectedImage,
+    setVBmode,
+    setSaveVB,
+    isVBActive,
+    setIsVBActive,
+    applyVirtualBackgroundToMainView,
+    applyVirtualBackgroundToPreviewView,
+    vbProcessor,
+  } = useVB();
+
+  const {setSidePanel} = useSidePanel();
+
+  const updateVBOptions = async (options: Option[]) => {
+    const vbOptions = [];
+    for (let i = 0; i < options.length; i++) {
+      const option = options[i];
+
+      if (option.type === 'image') {
+        const imgObj = {
+          type: 'image',
+          icon: 'vb',
+          path: '',
+          id: `VBOption_${i + 1}`,
+          isSelected: false,
+        };
+        try {
+          imgObj.path = await convertBlobToBase64(option.path);
+        } catch (error) {
+          console.error(
+            `Error fetching and converting image ${option.path}:`,
+            error,
+          );
+        }
+        vbOptions.push(imgObj);
+        if (option?.isSelected && !selectedImage) {
+          imgObj.isSelected = true;
+          setSelectedImage(imgObj.path);
+          setVBmode('image');
+        }
+      } else {
+        option.isSelected = false;
+        vbOptions.push(option);
+      }
+    }
+
+    const customImages = await retrieveImagesFromStorage();
+    const savedImagesArr = customImages?.map(
+      base64Data =>
+        ({
+          type: 'image',
+          icon: 'vb',
+          path: base64Data,
+        } as Option),
+    );
+    // also fetch from db
+    setOptions([...vbOptions, ...savedImagesArr]);
+  };
+
+  const setVBPreview = (type: VBMode, path: string) => {
+    if (path) {
+      setSelectedImage(path);
+    } else {
+      setSelectedImage(null);
+    }
+    setVBmode(type);
+    setSaveVB(false);
+    // update selected options
+    // Update selected options
+    options.forEach(option => {
+      // Reset isSelected for all options
+      option.isSelected = false;
+
+      // Set isSelected for the matching option
+      if (type === 'image' && path && option.path === path) {
+        option.isSelected = true;
+      } else if (type !== 'image' && type === option.type) {
+        option.isSelected = true;
+      }
+    });
+  };
+
+  const applyVirtualBackground = () => {
+    setSaveVB(true);
+  };
+
+  const hideVirtualBackgroundPanel = () => {
+    setSidePanel(SidePanelType.None);
+    setIsVBActive(false);
+  };
+  const showVirtualBackgroundPanel = () => {
+    setSidePanel(SidePanelType.VirtualBackground);
+    setIsVBActive(true);
+  };
+
+  //TODO: later
+  // const applyVirtualBackground = (config: VBConfig) => {
+  //   if (config.target === 'mainView') {
+  //     applyVirtualBackgroundToMainView(config);
+  //   } else {
+  //     applyVirtualBackgroundToPreviewView(config);
+  //   }
+  // };
+  return {
+    virtualBackgrounds: options,
+    addVirtualBackgrounds: updateVBOptions,
+    setVBPreview,
+    applyVirtualBackground,
+    isVirtualBackgroundPanelOpen: isVBActive,
+    hideVirtualBackgroundPanel,
+    showVirtualBackgroundPanel,
+    virtualBackgroundProcessor: vbProcessor,
+  };
+};