React Native语音通话：Voximplant集成指南_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

React Native语音通话：Voximplant集成指南

2025-10-07

浏览次数：次

返回列表

React Native语音通话：Voximplant集成指南

本教程详细介绍了如何在React Native应用中集成Voximplant实现语音通话功能。内容涵盖Voximplant控制面板的场景和路由配置、客户端用户登录、发起外呼通话、处理来电以及管理通话生命周期事件。通过具体的代码示例和专业指导，帮助开发者快速构建稳定、高效的实时语音通信能力。

1. Voximplant控制面板配置

在react native应用中实现voximplant语音通话之前，首先需要在voximplant控制面板中进行必要的配置。这包括创建voxengine场景和设置路由规则，以确保呼叫能够被正确处理和路由。

1.1 创建VoxEngine场景

VoxEngine场景是Voximplant平台上的J*aScript代码，用于处理呼叫逻辑。当一个呼叫到达Voximplant应用时，它会被分配到一个场景进行处理。对于简单的用户间直呼，我们需要一个场景来将呼叫从发起方转发到接收方。

以下是一个基本的VoxEngine场景示例，它监听AppEvents.CallAlerting事件，并将呼叫直接转发给目标用户：

// VoxEngine 场景示例
VoxEngine.addEventListener(AppEvents.CallAlerting, (e) => {
  // 当有呼叫进入应用时触发
  // e.call 是发起呼叫的Call对象
  // e.destination 是目标用户或号码

  // 使用 callUserDirect 将呼叫直接转发给目标用户
  const newCall = VoxEngine.callUserDirect(
    e.call,          // 原始呼叫对象
    e.destination,   // 目标用户（例如：testuser2）
    {
      // 可选的呼叫设置，如显示名称、主叫号码和自定义头部
      displayName: e.displayName,
      callerid: e.callerid,
      headers: e.headers,
    }
  );

  // 使用 easyProcess 简化呼叫处理，自动连接原始呼叫和新呼叫
  VoxEngine.easyProcess(e.call, newCall, ()=>{}, true);
});

将此代码保存为VoxEngine场景并激活。

1.2 配置路由规则

路由规则定义了哪些呼叫会触发哪个VoxEngine场景。为了实现用户间的直呼，建议设置一个通用的路由规则，使其匹配所有可能的用户名。

模式 (Pattern): 使用 .*。
含义: .* 表示匹配任意数量的任意字符，这意味着所有呼叫尝试都将匹配此规则并被路由到指定的场景。
关联场景: 将此路由规则与您刚刚创建的VoxEngine场景关联起来。

通过这种配置，当一个用户尝试呼叫另一个用户时，Voximplant平台将捕获此呼叫，并通过VoxEngine场景进行处理，最终将呼叫路由到目标用户。

2. React Native客户端集成

在React Native应用中，我们需要处理用户登录、发起呼叫和接收呼叫等核心功能。

2.1 用户登录

用户必须先登录到Voximplant服务才能进行呼叫。以下是一个示例登录组件，演示了如何使用Voximplant.getInstance().login()方法进行身份验证。

import React, { useState } from 'react';
import {
    SafeAreaView,
    StatusBar,
    View,
    TextInput,
    TouchableOpacity,
    Text,
    Alert,
    StyleSheet, // 假设存在样式定义
} from 'react-native';
import { useN*igation } from '@react-n*igation/native';
import { Voximplant } from 'react-native-voximplant';

// 替换为您的Voximplant应用和账户信息
const VOXIMPLANT_APP = 'your_app_name'; 
const VOXIMPLANT_ACCOUNT = 'your_account_name';

const LoginScreen = () => {
    const n*igation = useN*igation();
    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,
            );
            n*igation.n*igate('CallScreen'); // 登录成功后导航到呼叫界面
        } catch (e) {
            let message;
            switch (e.name) {
                case Voximplant.ClientEvents.ConnectionFailed:
                    message = '连接错误，请检查您的网络连接';
                    break;
                case Voximplant.ClientEvents.AuthResult:
                    message = convertCodeMessage(e.code);
                    break;
                default:
                    message = '未知错误，请重试';
            }
            showLoginError(message);
        }
    }

    function convertCodeMessage(code) {
        switch (code) {
            case 401: return '密码无效';
            case 404: return '用户无效';
            case 491: return '状态无效';
            default: return '请稍后重试';
        }
    }

    function showLoginError(message) {
        Alert.alert('登录错误', message, [{ text: '确定' }]);
    }

    return (
        <SafeAreaView style={styles.safearea}>
            <StatusBar barStyle="dark-content" />
            <View style={styles.container}>
                <TextInput
                    style={styles.forminput}
                    placeholder="用户名"
                    autoCapitalize="none"
                    onChangeText={(text) => setUser(text)}
                />
                <TextInput
                    style={styles.forminput}
                    placeholder="密码"
                    secureTextEntry={true}
                    onChangeText={(text) => setPassword(text)}
                />
                <TouchableOpacity onPress={login} style={styles.button}>
                    <Text style={styles.textButton}>登录</Text>
                </TouchableOpacity>
            </View>
        </SafeAreaView>
    );
};

const styles = StyleSheet.create({
    safearea: { flex: 1, backgroundColor: '#fff' },
    container: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20 },
    forminput: {
        width: '80%',
        height: 50,
        borderColor: '#ccc',
        borderWidth: 1,
        borderRadius: 5,
        marginBottom: 15,
        paddingHorizontal: 10,
    },
    button: {
        backgroundColor: '#007bff',
        paddingVertical: 12,
        paddingHorizontal: 30,
        borderRadius: 5,
    },
    textButton: {
        color: '#fff',
        fontSize: 16,
        fontWeight: 'bold',
    },
});

export default LoginScreen;

注意事项：

UXbot

AI产品设计工具

185 查看详情 UXbot

请将 VOXIMPLANT_APP 和 VOXIMPLANT_ACCOUNT 替换为您在Voximplant控制面板中创建的应用名称和账户名称。
登录后，用户将被导航到 CallScreen，这是进行呼叫操作的界面。

2.2 发起外呼通话

一旦用户登录成功，就可以通过Client.call() API发起呼叫。在本教程中，我们将实现一个直接呼叫特定用户的功能，而无需联系人列表。

假设我们希望登录用户“testuser1”直接呼叫“testuser2”。

import React, { useEffect, useState } from 'react';
import { View, Text, Button, Alert, StyleSheet } from 'react-native';
import { Voximplant } from 'react-native-voximplant';

const CallScreen = () => {
    const voximplant = Voximplant.getInstance();
    const [call, setCall] = useState(null); // 用于存储当前呼叫对象
    const targetUser = 'testuser2'; // 直接指定目标用户

    // 监听客户端事件，例如 IncomingCall
    useEffect(() => {
        const clientListeners = {
            [Voximplant.ClientEvents.IncomingCall]: (event) => {
                handleIncomingCall(event.call);
            },
            // 可以添加其他客户端事件监听
        };
        voximplant.on(clientListeners);

        return () => {
            voximplant.off(clientListeners);
        };
    }, []);

    // 发起呼叫
    const makeCall = async () => {
        try {
            // 配置呼叫设置，例如禁用视频以进行纯语音通话
            let callSettings = {
                video: {
                    sendVideo: false,
                    receiveVideo: false,
                },
                // 其他可选设置，如自定义头部
                // customData: 'some_data',
            };

            // 发起呼叫到目标用户
            const newCall = await voximplant.call(targetUser, callSettings);
            setCall(newCall); // 保存呼叫对象
            subscribeToCallEvents(newCall); // 订阅呼叫事件
            Alert.alert('呼叫', `正在呼叫 ${targetUser}...`);
        } catch (e) {
            console.error('发起呼叫失败:', e);
            Alert.alert('呼叫失败', e.message || '无法发起呼叫');
        }
    };

    // 订阅呼叫事件
    const subscribeToCallEvents = (currentCall) => {
        if (!currentCall) return;

        const callListeners = {
            [Voximplant.CallEvents.Connected]: () => {
                Alert.alert('呼叫状态', '已连接');
            },
            [Voximplant.CallEvents.Disconnected]: () => {
                Alert.alert('呼叫状态', '已断开');
                setCall(null);
            },
            [Voximplant.CallEvents.Failed]: (event) => {
                Alert.alert('呼叫失败', `原因: ${event.reason}`);
                setCall(null);
            },
            // 添加其他您感兴趣的呼叫事件，如 Ringing, Progress etc.
        };
        currentCall.on(callListeners);
    };

    // 挂断呼叫
    const hangUpCall = () => {
        if (call) {
            call.hangup();
            setCall(null);
            Alert.alert('呼叫', '已挂断');
        }
    };

    // 处理来电（在另一个屏幕或组件中实现更完整的功能）
    const handleIncomingCall = async (incomingCall) => {
        Alert.alert(
            '来电',
            `来自 ${incomingCall.getCallerDisplayName() || incomingCall.getCallerId()}`,
            [
                {
                    text: '拒绝',
                    onPress: () => incomingCall.decline(),
                    style: 'cancel',
                },
                {
                    text: '接听',
                    onPress: async () => {
                        try {
                            await incomingCall.answer();
                            setCall(incomingCall);
                            subscribeToCallEvents(incomingCall);
                            Alert.alert('来电', '已接听');
                        } catch (e) {
                            console.error('接听失败:', e);
                            Alert.alert('接听失败', e.message || '无法接听');
                        }
                    },
                },
            ],
            { cancelable: false }
        );
    };

    return (
        <View style={styles.container}>
            <Text style={styles.title}>Voximplant 语音通话</Text>
            <Text style={styles.subtitle}>目标用户: {targetUser}</Text>
            {!call ? (
                <Button title={`呼叫 ${targetUser}`} onPress={makeCall} />
            ) : (
                <Button title="挂断" onPress={hangUpCall} color="red" />
            )}
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        padding: 20,
    },
    title: {
        fontSize: 24,
        fontWeight: 'bold',
        marginBottom: 20,
    },
    subtitle: {
        fontSize: 18,
        marginBottom: 30,
    },
});

export default CallScreen;

2.3 处理来电

当有用户呼叫当前登录用户时，Voximplant客户端会触发IncomingCall事件。我们需要监听此事件并提供接听或拒绝来电的选项。

在上面的CallScreen组件中，useEffect钩子已经包含了对Voximplant.ClientEvents.IncomingCall的监听，并通过handleIncomingCall函数处理来电。handleIncomingCall会弹出一个Alert，让用户选择接听或拒绝。

接听 (answer()): 调用 incomingCall.answer() 来接听电话。接听后，同样需要订阅此呼叫的事件，以管理其生命周期。
拒绝 (decline()): 调用 incomingCall.decline() 来拒绝电话。

2.4 管理通话生命周期事件

无论是发起呼叫还是接听来电，都需要订阅Call对象的事件，以便及时获取呼叫状态的更新。关键事件包括：

Voximplant.CallEvents.Connected: 呼叫已成功建立连接。
Voximplant.CallEvents.Disconnected: 呼叫已断开连接（正常挂断）。
Voximplant.CallEvents.Failed: 呼叫失败（例如，对方无人接听、网络问题等）。
Voximplant.CallEvents.Ringing: 对方正在响铃。
Voximplant.CallEvents.Progress: 呼叫正在建立连接。

在CallScreen的subscribeToCallEvents函数中，我们演示了如何监听这些事件，并根据事件类型更新UI或执行其他逻辑。

3. 注意事项与总结

权限管理: 在React Native应用中，务必确保已获取麦克风权限。对于Android，需要在AndroidManifest.xml中添加android:name="android.permission.RECORD_AUDIO" />；对于iOS，需要在Info.plist中添加麦克风使用说明。
后台运行: 考虑应用在后台时如何处理来电。Voximplant SDK支持后台通知和呼叫，但需要额外的配置。
错误处理: 始终包含健壮的错误处理机制，例如在网络连接失败或登录凭据错误时向用户提供有用的反馈。
UI/UX: 本教程侧重于核心功能实现。在实际应用中，您需要设计更友好的用户界面来显示呼叫状态、持续时间，并提供静音、扬声器等控制。
复杂场景: 对于更复杂的呼叫场景（如多方会议、视频通话、呼叫转移等），Voximplant提供了更高级的API和功能，您可以根据需求进行探索。