如何在React Native中用Voximplant实现直接呼叫指定用户的语音通话

实现步骤 #

1. 调整登录页跳转逻辑 #

登录成功后跳转到Calling页时，把当前登录的用户名传过去（可选，用于显示呼叫方信息），修改登录页里的navigation.navigate代码：

// 替换原有的navigation.navigate('callscreen');
navigation.navigate('callscreen', { currentUser: user });

2. 改造Calling页面实现自动呼叫 #

在CallingScreen组件中，利用useEffect在页面加载时自动发起对testuser2的呼叫，同时监听呼叫状态变化（连接、失败、挂断），完整代码示例：

import React, { useEffect, useState } from 'react';
import { View, Text, TouchableOpacity, Alert, StyleSheet } from 'react-native';
import { useRoute } from '@react-navigation/native';
import Voximplant from 'react-native-voximplant';

// 确保这里的常量和登录页一致
const VOXIMPLANT_APP = '你的APP名称';
const VOXIMPLANT_ACCOUNT = '你的账号名称';

const CallingScreen = () => {
    const route = useRoute();
    const { currentUser } = route.params;
    const voximplant = Voximplant.getInstance();
    const [callStatus, setCallStatus] = useState('正在呼叫testuser2...');
    let currentCall = null;

    useEffect(() => {
        // 页面加载后立即发起呼叫
        initiateCall();

        // 监听通话连接成功事件
        const connectListener = voximplant.on(Voximplant.ClientEvents.CallConnected, () => {
            setCallStatus('通话已接通');
        });

        // 监听呼叫失败事件
        const failListener = voximplant.on(Voximplant.ClientEvents.CallFailed, (event) => {
            setCallStatus(`呼叫失败: ${event.reason}`);
            Alert.alert('呼叫失败', event.reason);
        });

        // 监听通话挂断事件
        const disconnectListener = voximplant.on(Voximplant.ClientEvents.CallDisconnected, () => {
            setCallStatus('通话已结束');
            // 可根据需求跳回登录页或其他页面
        });

        // 页面卸载时清理监听和通话
        return () => {
            connectListener.remove();
            failListener.remove();
            disconnectListener.remove();
            if (currentCall) currentCall.hangup();
        };
    }, []);

    const initiateCall = async () => {
        try {
            // 构造testuser2的完整JID
            const calleeJid = `testuser2@${VOXIMPLANT_APP}.${VOXIMPLANT_ACCOUNT}.voximplant.com`;
            // 配置为纯语音通话
            const callConfig = { video: false };
            // 发起呼叫
            currentCall = await voximplant.call(calleeJid, callConfig);
        } catch (err) {
            setCallStatus('呼叫初始化失败');
            Alert.alert('出错了', err.message);
        }
    };

    const hangup = async () => {
        if (currentCall) {
            await currentCall.hangup();
            setCallStatus('已主动挂断');
        }
    };

    return (
        <View style={styles.container}>
            <Text style={styles.status}>{callStatus}</Text>
            <Text style={styles.infoText}>呼叫方: {currentUser}</Text>
            <Text style={styles.infoText}>被叫方: testuser2</Text>
            <TouchableOpacity onPress={hangup} style={styles.hangupBtn}>
                <Text style={styles.hangupText}>挂断通话</Text>
            </TouchableOpacity>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#f8f8f8'
    },
    status: {
        fontSize: 20,
        color: '#333',
        marginBottom: 30
    },
    infoText: {
        fontSize: 16,
        color: '#666',
        marginBottom: 10
    },
    hangupBtn: {
        backgroundColor: '#e53935',
        paddingVertical: 14,
        paddingHorizontal: 40,
        borderRadius: 30,
        marginTop: 40
    },
    hangupText: {
        color: '#fff',
        fontSize: 18,
        fontWeight: 'bold'
    }
});

export default CallingScreen;

3. 必做的配置检查 #

• 确保VOXIMPLANT_APP和VOXIMPLANT_ACCOUNT和登录页的常量完全一致
• 配置权限：
  • iOS：在Info.plist中添加麦克风权限（NSMicrophoneUsageDescription）
  • Android：在AndroidManifest.xml中添加<uses-permission android:name="android.permission.RECORD_AUDIO" />等相关权限
• 测试前确认testuser2已在Voximplant控制台创建并可以正常登录

内容的提问来源于stack exchange，提问作者type