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 (
setUser(text)}
/>
setPassword(text)}
/>
登录
);
};
export default LoginScreen;注意： 请将VOXIMPLANT_APP和VOXIMPLANT_ACCOUNT替换为您在Voximplant控制台中的实际应用名称和账户名称。
2.2 发起语音通话
登录成功后，用户可以发起语音通话。在您的CallScreen中，您可以添加一个按钮来直接呼叫另一个用户，例如testuser2。
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 (
当前用户已登录
呼叫 {targetUser}
挂断
);
};
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 (
来电自: {callerDisplayName}
接听
拒绝
);
};
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控制台的配置到客户端的登录、呼叫和来电处理，本教程提供了一个简洁而完整的实现路径。在此基础上，您可以进一步扩展功能，例如视频通话、会议、消息等，构建更丰富的实时通信体验。
