Twilio RN Voice SDK - 在连接之前终止呼叫尝试

Question

我正在使用 Twilio RN SDK（“@twilio/voice-react-native-sdk”：“^1.0.0”），并试图找到一种方法在另一端的人之前中断/终止呼叫尝试拿起电话。该应用程序仅用于拨出电话。一旦用户点击按钮发起呼叫，SDK 就会经历几个阶段，直到达到“已连接”状态。呼叫状态保持振铃状态，直到有人接听（或激活语音邮件）。现在，当呼叫在连接之前“响铃”时，我该如何结束呼叫（准确地说，是一次呼叫尝试）。

我已经尝试过

Call.disconnect()

用于在连接后结束通话，但当它仍在响铃时（无论是在 iOS 或 Android 上），它似乎没有任何效果。 我也尝试过导航回来/卸载该屏幕，但这也不会产生任何效果。

这是我的活动通话屏幕：

import { Call, Voice } from '@twilio/voice-react-native-sdk';
import { t } from 'i18next';
import { useCallback, useEffect, useState } from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { settlePromise } from '../../helpers/requestHelpers.ts';
import { getCallInfo } from '../../helpers/voiceHelpers.ts';
import AuthenticationService from '../../services/AuthenticationService.ts';
import { CallInfo } from '../../types';

const voice = new Voice();

const ActiveCallScreen = ({ navigation }) => {
  const [callObject, setCallObject] = useState<Call | null>(null);
  const [callInfo, setCallInfo] = useState<CallInfo | null>(null);
  const [isCallMute, setIsCallMute] = useState<boolean>(false);

  const INITIAL_CALL_STATUS = {
    error: false,
    status: t('initialising'),
    message: t('Initialising call'),
  };
  const [callStatus, setCallStatus] = useState(INITIAL_CALL_STATUS);

  const callInProgress = callStatus.status === 'connected' || callStatus.status === 'reconnected';
  const callDisconnected = callStatus.status === 'disconnected';
  const callError = callStatus.error;

  const handleMuteCall = async () => {
    try {
      if (callObject) {
        const isMuted = await callObject.isMuted();
        await callObject.mute(!isMuted);
        setIsCallMute(!isMuted);
      }
    } catch (e) {
      __DEV__ && console.log('Twilio: failed to mute/unmute');
    }
  };

  const handleEndCall = async () => {
    try {
      const res = await callObject?.disconnect();
      console.log('res disconnect: ', res);

      setCallObject(null);
    } catch (e) {
      __DEV__ && console.log('Twilio: failed to end call');
    }
  };

  const handleOutgoingCall = useCallback(async (phoneNumber: string, calleeName: string) => {
    try {
      const voiceTokenResponse = await AuthenticationService.getVoiceToken(user.Email);

      if (voiceTokenResponse.accessToken) {
        const params = {
          To: phoneNumber, // The phone number you want to call
        };

        voice.on(Voice.Event.Error, () => {
          __DEV__ && console.log('Twilio: Voice initialisation error');
          setCallStatus({
            error: true,
            status: 'failure',
            message: 'System initialisation error. Please try again.',
          });
        });

        const outgoingCallResult = await settlePromise(
          voice.connect(voiceTokenResponse.accessToken, { params, contactHandle: 'Some thing' }),
        );
        if (outgoingCallResult.status === 'rejected') {
          console.log('error');
        }
        const call = outgoingCallResult.value;

        call.once(Call.Event.Connected, () => {
          __DEV__ && console.log('Twilio: call connected');
          const callInfo = getCallInfo(call);
          setCallObject(call);
          setCallInfo(callInfo);
          setCallStatus({ error: false, status: 'connected', message: 'Call in progress ...' });
        });

        call.once(Call.Event.Reconnected, () => console.log('reconnected'));

        call.once(Call.Event.Disconnected, () => {
          __DEV__ && console.log('Twilio: disconnected');
          setCallStatus({ error: false, status: 'disconnected', message: '' });
        });

        call.on(Call.Event.Reconnecting, () => {
          __DEV__ && console.log('Twilio: reconnecting');
        });
        call.on(Call.Event.Ringing, () => {
          __DEV__ && console.log('Twilio: ringing');
          setCallStatus({ error: false, status: 'ringing', message: 'Connecting the call' });
        });
        call.on(Call.Event.ConnectFailure, e => {
          console.log('ERROR DETAILS: ', e);
          __DEV__ && console.log('Twilio: voice connect failure');
          setCallStatus({ error: true, status: 'failure', message: 'Connection error. Please try again.' });
        });
      }
    } catch (e) {
      setCallStatus({ error: true, status: 'failure', message: 'Voice token error. Please try again' });
      console.log('catch: ', e);
    }
  }, []);

  useEffect(() => {
    handleOutgoingCall(phone, calleeName);
  }, []);

  useEffect(() => {
    if (callError) {
      setTimeout(() => navigation.goBack(), 5000);
    }
  }, [callError]);

  return (
    <View>
      <View style={f1}>
        <View>
          <Text>{callStatus.message}</Text>
        </View>
        <View style={[row]}>
          <TouchableOpacity disabled={!callInProgress} onPress={handleMuteCall}>
            <Text>{isCallMute ? t('Unmute mic') : t('Mute mic')}</Text>
          </TouchableOpacity>

          <TouchableOpacity disabled={callError} onPress={handleEndCall}>
            <Text>{t('End call')}</Text>
          </TouchableOpacity>
        </View>
      </View>
    </View>
  );
};

export default ActiveCallScreen;

谢谢你。

Answer 1

要解决在响铃时终止呼叫尝试的问题，您需要使用

cancel

方法而不是

disconnect

。

const handleEndCall = async () => {
  try {
    if (callObject && callStatus.status === 'ringing') {
      await callObject.cancel();
      console.log('Call attempt canceled');
      setCallObject(null);
      setCallStatus({ error: false, status: 'disconnected', message: '' });
    } else if (callObject) {
      await callObject.disconnect();
      console.log('Call disconnected');
      setCallObject(null);
    }
  } catch (e) {
    __DEV__ && console.log('Twilio: failed to end call', e);
  }
};

确保更新按钮的 onPress 处理程序以使用此新方法。

<TouchableOpacity disabled={callError} onPress={handleEndCall}>
  <Text>{t('End call')}</Text>
</TouchableOpacity>

保重西曼