App.tsx

App.tsx

import React, {useRef, useState, useEffect} from 'react';
import {
  SafeAreaView,
  ScrollView,
  StyleSheet,
  Text,
  View,
  Switch,
  ActivityIndicator,
} from 'react-native';
import {PermissionsAndroid, Platform} from 'react-native';
import RNFS from 'react-native-fs';
import RNFetchBlob from 'rn-fetch-blob';
import {
  ClientRoleType,
  RawAudioFrameOpModeType,
  AudioFrame,
  createAgoraRtcEngine,
  IRtcEngine,
  RtcSurfaceView,
  ChannelProfileType,
  AudioFileRecordingType,
} from 'react-native-agora';
import axios from 'axios';
import FormData from 'form-data';
import TranscribedOutput from './src/components/TranscribeOutput';

const uid = 0;
const appId = '';
const token = '';
const channelName = '';
const OPEN_API_KEY = '';
const SAMPLE_RATE = 16000;
const SAMPLE_NUM_OF_CHANNEL = 1;
const SAMPLES_PER_CALL = 1024;

const App = () => {
  const agoraEngineRef = useRef<IRtcEngine>(); // Agora engine instance
  const intervalRef: any = React.useRef(null);
  const [isJoined, setIsJoined] = useState(false); // Indicates if the local user has joined the channel
  const [isHost, setIsHost] = useState(true); // Client role
  const [remoteUid, setRemoteUid] = useState(0); // Uid of the remote user
  const [message, setMessage] = useState(''); // Message to the user
  const [transcribedData, setTranscribedData] = React.useState([] as any);
  const [isJoinLoading, setJoinLoading] = React.useState(false);
  const [isLeaveLoading, setLeaveLoading] = React.useState(false);
  const [isTranscribing, setIsTranscribing] = React.useState(false);
  const [transcribeTimeout, setTranscribeTimout] = React.useState(5);
  const [interimTranscribedData] = React.useState('');

  function transcribeInterim() {
    clearInterval(intervalRef.current);
  }

  const getPermission = async () => {
    if (Platform.OS === 'android') {
      await PermissionsAndroid.requestMultiple([
        PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
        PermissionsAndroid.PERMISSIONS.CAMERA,
      ]);
    }
  };

  const iAudioFrameObserver = {
    onPlaybackAudioFrame(channelId: string, audioFrame: AudioFrame): true {
      return true;
    },
    oPlaybackAudioFrameBeforeMixing(
      channelId: string,
      uID: number,
      audioFrame: AudioFrame,
    ): true {
      return true;
    },
    onRecordAudioFrame(channelId: string, audioFrame: AudioFrame): true {
      return true;
    },
  };

  useEffect(() => {
    // Initialize Agora engine when the app starts
    setupVideoSDKEngine();
  }, []);

  const setupVideoSDKEngine = async () => {
    try {
      // use the helper function to get permissions
      if (Platform.OS === 'android') {
        await getPermission();
      }
      agoraEngineRef.current = createAgoraRtcEngine();
      const agoraEngine = agoraEngineRef.current;
      agoraEngine.registerEventHandler({
        onJoinChannelSuccess: () => {
          console.log('Successfully joined the channel ' + channelName);
          setIsJoined(true);
        },
        onUserJoined: (_connection, Uid) => {
          console.log('Remote user joined with uid ' + Uid);
          setRemoteUid(Uid);
        },
        onUserOffline: (_connection, Uid) => {
          console.log('Remote user left the channel. uid: ' + Uid);
          setRemoteUid(0);
        },
      });
      agoraEngine.initialize({
        appId: appId,
        channelProfile: ChannelProfileType.ChannelProfileLiveBroadcasting,
      });
      console.log('Agora engine initialized successfully');
      agoraEngine.setPlaybackAudioFrameParameters(
        SAMPLE_RATE,
        SAMPLE_NUM_OF_CHANNEL,
        RawAudioFrameOpModeType.RawAudioFrameOpModeReadWrite,
        SAMPLES_PER_CALL,
      );
      agoraEngine.setRecordingAudioFrameParameters(
        SAMPLE_RATE,
        SAMPLE_NUM_OF_CHANNEL,
        RawAudioFrameOpModeType.RawAudioFrameOpModeReadWrite,
        SAMPLES_PER_CALL,
      );
      agoraEngine
        .getMediaEngine()
        .registerAudioFrameObserver(iAudioFrameObserver);
      console.log('Audio frame observer registered successfully');
      agoraEngine.setMixedAudioFrameParameters(
        SAMPLE_RATE,
        SAMPLE_NUM_OF_CHANNEL,
        SAMPLES_PER_CALL,
      );
      agoraEngine.muteAllRemoteAudioStreams(true);

      agoraEngine.enableVideo();
    } catch (e) {
      console.log(e);
    }
  };