How to use Voximplant to do voice calling in react native?

Question

I am trying to implement voximplant for voice calls into a chat rn app, Can anyone please help me do implement a simple version of it? I saw the Voximplant rn demo repos but I couldn't find a very simple straight forward example for voice calls,

however, currently, I created 3 screen Login, Calling, and IncomingCalling in the login screen I implemented a simple login function that login users I created in my Voixmplant control panel, and I can now login into one user that I created and navigate to call screen,

Can anyone please help me how to make a real voice call within the app? like I don't want to create a separate screen for user address book/contacts but instead, I directly want to call a user with username "testuser2" when any user logged in How can I implement this? The calling screen and incoming calling screen is a very simple UI it just have a few buttons

Login:

const LoginScreen = () => {
    const navigation = useNavigation();
    const voximplant = Voximplant.getInstance();
    const [user, setUser] = useState('');
    const [password, setPassword] = useState('');

    async function login() {
        try {
            let clientState = await voximplant.getClientState();
            if (clientState === Voximplant.ClientState.DISCONNECTED) {
                await voximplant.connect();
                await voximplant.login(
                    `${user}@${VOXIMPLANT_APP}.${VOXIMPLANT_ACCOUNT}.voximplant.com`,
                    password,
                );
            }
            if (clientState === Voximplant.ClientState.CONNECTED) {
                await voximplant.login(
                    `${user}@${VOXIMPLANT_APP}.${VOXIMPLANT_ACCOUNT}.voximplant.com`,
                    password,
                );
            }
            navigation.navigate('callscreen');
        } catch (e) {
            let message;
            switch (e.name) {
                case Voximplant.ClientEvents.ConnectionFailed:
                    message = 'Connection error, check your internet connection';
                    break;
                case Voximplant.ClientEvents.AuthResult:
                    message = convertCodeMessage(e.code);
                    break;
                default:
                    message = 'Unknown error. Try again';
            }
            showLoginError(message);
        }
    }

    function convertCodeMessage(code) {
        switch (code) {
            case 401:
                return 'Invalid password';
            case 404:
                return 'Invalid user';
            case 491:
                return 'Invalid state';
            default:
                return 'Try again later';
        }
    }

    function showLoginError(message) {
        Alert.alert('Login error', message, [
            {
                text: 'OK',
            },
        ]);
    }

    return (
        <>
            <StatusBar barStyle="dark-content" />
            <SafeAreaView style={styles.safearea}>
                <View style={[styles.container]}>
                    <TextInput
                        underlineColorAndroid="transparent"
                        style={styles.forminput}
                        placeholder="User name"
                        autoFocus={true}
                        returnKeyType={'next'}
                        autoCapitalize="none"
                        autoCorrect={false}
                        blurOnSubmit={false}
                        onChangeText={(text) => setUser(text)}
                    />
                    <TextInput
                        underlineColorAndroid="transparent"
                        style={styles.forminput}
                        placeholder="User password"
                        secureTextEntry={true}
                        onChangeText={(text) => setPassword(text)}
                        blurOnSubmit={true}
                    />
                    <TouchableOpacity onPress={() => login()} style={styles.button}>
                        <Text style={styles.textButton}>LOGIN</Text>
                    </TouchableOpacity>
                </View>
            </SafeAreaView>
        </>
    );
};

Answer 1

First of all, you need to set up your Voximplant application in the Voximplant Control Panel

• you need a VoxEngine scenario example:

VoxEngine.addEventListener(AppEvents.CallAlerting, (e) => {
  const newCall = VoxEngine.callUserDirect(
    e.call,
    e.destination,
    {
      displayName: e.displayName,
      callerid: e.callerid,
      headers: e.headers,
    }
  );
  VoxEngine.easyProcess(e.call, newCall, ()=>{}, true);
});

• and a routing rule. I recommend to use the pattern .* that means any quantity of any symbols, so all the usernames match the rule.

I assume you have 2 Voximplant users that can login in the application, let say "testuser1" and "testuser2"

To make a voice call from "testuser1" to "testuser2", you need to use Client.call API.

example:

const client = Voximplant.getInstance();
let callSettings = {
  video: {
    sendVideo: false,
    receiveVideo: false,
  },
};
let call = await client.call("testuser2", callSettings);

If the Voximplant application in the Voximplant Control Panel is set up correctly, "testuser2" should receive an incoming call via IncomingCall event.

Then, it is required to subscribe to call events to get notified when the call is connected/disconnected/failed.

Please take a look at the sample code