在React Native中集成Voximplant实现语音通话教程-js教程-PHP中文网

在React Native中集成Voximplant实现语音通话教程

本教程旨在指导开发者如何在React Native应用中集成Voximplant SDK，实现端到端的语音通话功能。内容涵盖Voximplant控制台的配置、React Native客户端的用户登录、发起语音呼叫以及处理来电，并提供关键代码示例和注意事项，帮助您快速构建一个功能完备的实时语音通信应用。

1. Voximplant平台配置

在react native应用中实现语音通话之前，首先需要在voximplant控制台进行必要的配置。这包括创建应用、配置voxengine场景以及设置路由规则。

1.1 创建VoxEngine场景

VoxEngine场景用于处理呼叫逻辑，例如将呼叫路由到目标用户。以下是一个简单的VoxEngine场景示例，它将传入的呼叫直接转发给目标用户：

VoxEngine.addEventListener(AppEvents.CallAlerting, (e) => {
  // 当有呼叫进入时，使用callUserDirect将其转发给目标用户
  const newCall = VoxEngine.callUserDirect(
    e.call,
    e.destination,
    {
      displayName: e.displayName,
      callerid: e.callerid,
      headers: e.headers,
    }
  );
  // 使用easyProcess简化呼叫处理，确保来电和去电的生命周期同步
  VoxEngine.easyProcess(e.call, newCall, ()=>{}, true);
});

登录后复制

将上述代码保存为VoxEngine场景，例如命名为simple_voice_call。

1.2 配置路由规则

路由规则决定了哪些呼叫会触发您的VoxEngine场景。为了实现任意用户之间的呼叫，建议设置一个通用的路由规则。

模式 (Pattern): .* 这个模式表示匹配任何数量的任何字符，从而确保所有用户都能通过此规则进行呼叫。
分配场景 (Assigned Scenario): 选择您之前创建的simple_voice_call场景。

1.3 创建Voximplant用户

确保您已在Voximplant控制台中创建了至少两个用户，例如testuser1和testuser2，并为他们设置了密码。这些用户将用于在React Native应用中进行登录和通话。

2. React Native客户端实现

在React Native应用中，我们需要处理用户登录、发起呼叫和处理来电。

2.1 用户登录

用户登录是进行任何Voximplant操作的前提。以下是一个登录界面的示例，演示了如何连接Voximplant客户端并进行用户认证：

import React, { useState } from 'react';
import {
    SafeAreaView,
    StatusBar,
    View,
    TextInput,
    TouchableOpacity,
    Text,
    Alert,
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { Voximplant } from 'react-native-voximplant';

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

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,
            );
            // 登录成功后导航到呼叫界面
            navigation.navigate('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={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <StatusBar barStyle="dark-content" />
            <TextInput
                style={{ borderWidth: 1, borderColor: 'gray', padding: 10, margin: 10, width: '80%' }}
                placeholder="用户名"
                autoCapitalize="none"
                onChangeText={(text) => setUser(text)}
            />
            <TextInput
                style={{ borderWidth: 1, borderColor: 'gray', padding: 10, margin: 10, width: '80%' }}
                placeholder="密码"
                secureTextEntry={true}
                onChangeText={(text) => setPassword(text)}
            />
            <TouchableOpacity onPress={login} style={{ backgroundColor: 'blue', padding: 15, borderRadius: 5, margin: 10 }}>
                <Text style={{ color: 'white', fontSize: 16 }}>登录</Text>
            </TouchableOpacity>
        </SafeAreaView>
    );
};

export default LoginScreen;

登录后复制

注意： 请将VOXIMPLANT_APP和VOXIMPLANT_ACCOUNT替换为您在Voximplant控制台中的实际应用名称和账户名称。

2.2 发起语音通话

登录成功后，用户可以发起语音通话。在您的CallScreen中，您可以添加一个按钮来直接呼叫另一个用户，例如testuser2。

TTS Free Online免费文本转语音

免费的文字生成语音网站，包含各种方言（东北话、陕西话、粤语、闽南语）

查看详情

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

const CallScreen = ({ navigation }) => {
    const voximplant = Voximplant.getInstance();
    const [currentCall, setCurrentCall] = useState(null);
    const targetUser = 'testuser2'; // 直接呼叫的用户

    useEffect(() => {
        // 监听客户端事件，例如IncomingCall
        voximplant.on(Voximplant.ClientEvents.IncomingCall, handleIncomingCall);
        return () => {
            voximplant.off(Voximplant.ClientEvents.IncomingCall, handleIncomingCall);
        };
    }, []);

    const handleIncomingCall = (event) => {
        Alert.alert(
            '来电',
            `来自 ${event.call.getEndpoints()[0].displayName || event.call.callId} 的呼叫`,
            [
                {
                    text: '拒绝',
                    onPress: () => {
                        event.call.decline();
                    },
                    style: 'cancel',
                },
                {
                    text: '接听',
                    onPress: () => {
                        // 导航到IncomingCallScreen处理接听逻辑
                        navigation.navigate('IncomingCallScreen', { callId: event.call.callId });
                    },
                },
            ],
            { cancelable: false },
        );
    };

    async function makeCall() {
        try {
            const callSettings = {
                video: {
                    sendVideo: false, // 纯语音通话，不发送视频
                    receiveVideo: false, // 纯语音通话，不接收视频
                },
            };
            // 发起呼叫到目标用户
            const call = await voximplant.call(targetUser, callSettings);
            setCurrentCall(call);

            // 订阅呼叫事件
            call.on(Voximplant.CallEvents.Connected, () => {
                Alert.alert('通话状态', '已连接');
            });
            call.on(Voximplant.CallEvents.Disconnected, () => {
                Alert.alert('通话状态', '已断开');
                setCurrentCall(null);
            });
            call.on(Voximplant.CallEvents.Failed, (event) => {
                Alert.alert('通话失败', `错误代码: ${event.code}, 描述: ${event.reason}`);
                setCurrentCall(null);
            });
            call.on(Voximplant.CallEvents.ProgressToneStart, () => {
                console.log('Progress tone started');
            });
            call.on(Voximplant.CallEvents.LocalVideoStreamAdded, () => {
                console.log('Local video stream added');
            });

            Alert.alert('呼叫中', `正在呼叫 ${targetUser}...`);

        } catch (e) {
            Alert.alert('呼叫错误', e.message);
        }
    }

    async function endCall() {
        if (currentCall) {
            await currentCall.hangup();
            setCurrentCall(null);
            Alert.alert('通话结束', '您已结束通话。');
        }
    }

    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text style={{ fontSize: 20, marginBottom: 20 }}>当前用户已登录</Text>
            <TouchableOpacity onPress={makeCall} disabled={!!currentCall}
                              style={{ backgroundColor: currentCall ? 'gray' : 'green', padding: 15, borderRadius: 5, margin: 10 }}>
                <Text style={{ color: 'white', fontSize: 16 }}>呼叫 {targetUser}</Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={endCall} disabled={!currentCall}
                              style={{ backgroundColor: currentCall ? 'red' : 'gray', padding: 15, borderRadius: 5, margin: 10 }}>
                <Text style={{ color: 'white', fontSize: 16 }}>挂断</Text>
            </TouchableOpacity>
        </View>
    );
};

export default CallScreen;

登录后复制

2.3 处理来电

当有用户呼叫当前登录的用户时，Voximplant客户端会触发Voximplant.ClientEvents.IncomingCall事件。您需要在应用中监听此事件，并提供相应的UI来处理来电（接听或拒绝）。

以下是一个简单的IncomingCallScreen示例，用于处理来电：

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

const IncomingCallScreen = ({ route, navigation }) => {
    const { callId } = route.params;
    const voximplant = Voximplant.getInstance();
    const [incomingCall, setIncomingCall] = useState(null);
    const [callerDisplayName, setCallerDisplayName] = useState('');

    useEffect(() => {
        const call = voximplant.getCallById(callId);
        if (call) {
            setIncomingCall(call);
            setCallerDisplayName(call.getEndpoints()[0]?.displayName || call.callId);

            // 订阅来电的事件
            call.on(Voximplant.CallEvents.Connected, () => {
                Alert.alert('通话状态', '已连接');
                // 可在此处更新UI，显示通话时长等
            });
            call.on(Voximplant.CallEvents.Disconnected, () => {
                Alert.alert('通话状态', '通话结束');
                navigation.goBack(); // 通话结束后返回上一屏
            });
            call.on(Voximplant.CallEvents.Failed, (event) => {
                Alert.alert('通话失败', `错误: ${event.reason}`);
                navigation.goBack();
            });
        } else {
            Alert.alert('错误', '找不到来电信息');
            navigation.goBack();
        }

        return () => {
            if (call) {
                call.off(Voximplant.CallEvents.Connected);
                call.off(Voximplant.CallEvents.Disconnected);
                call.off(Voximplant.CallEvents.Failed);
            }
        };
    }, [callId]);

    async function answerCall() {
        if (incomingCall) {
            try {
                const callSettings = {
                    video: {
                        sendVideo: false,
                        receiveVideo: false,
                    },
                };
                await incomingCall.answer(callSettings);
                Alert.alert('来电', '已接听');
            } catch (e) {
                Alert.alert('接听失败', e.message);
                incomingCall.decline();
                navigation.goBack();
            }
        }
    }

    async function declineCall() {
        if (incomingCall) {
            await incomingCall.decline();
            Alert.alert('来电', '已拒绝');
            navigation.goBack();
        }
    }

    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text style={{ fontSize: 24, marginBottom: 20 }}>来电自: {callerDisplayName}</Text>
            <TouchableOpacity onPress={answerCall}
                              style={{ backgroundColor: 'green', padding: 15, borderRadius: 5, margin: 10 }}>
                <Text style={{ color: 'white', fontSize: 16 }}>接听</Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={declineCall}
                              style={{ backgroundColor: 'red', padding: 15, borderRadius: 5, margin: 10 }}>
                <Text style={{ color: 'white', fontSize: 16 }}>拒绝</Text>
            </TouchableOpacity>
        </View>
    );
};

export default IncomingCallScreen;

登录后复制

3. 注意事项与总结

3.1 权限管理

在进行语音通话前，务必确保您的React Native应用已获得麦克风权限。您可以使用react-native-permissions等库来请求和管理这些权限。

3.2 网络连接

Voximplant通话质量高度依赖网络连接。确保设备在稳定的网络环境下。在连接失败时，应向用户提供明确的反馈。

3.3 错误处理

在整个通话流程中，从登录到发起呼叫、接听来电，都需要完善的错误处理机制。捕获异常并向用户显示友好的错误信息，有助于提升用户体验。

3.4 UI/UX设计

一个直观的用户界面和良好的用户体验对于实时通信应用至关重要。考虑在通话过程中显示通话状态、时长、静音/扬声器控制等。

通过以上步骤，您可以在React Native应用中成功集成Voximplant SDK，实现基本的语音通话功能。从Voximplant控制台的配置到客户端的登录、呼叫和来电处理，本教程提供了一个简洁而完整的实现路径。在此基础上，您可以进一步扩展功能，例如视频通话、会议、消息等，构建更丰富的实时通信体验。

以上就是在React Native中集成Voximplant实现语音通话教程的详细内容，更多请关注php中文网其它相关文章！