Make and Incoming Voice Call not working properly #479
Description
When I trigger the Make call the call is ring and got a call for to user but couldn't attend the call because the Make call automatically decline.
Description
When initiating a call using Twilio in my React Native app, the call rings, but it gets declined automatically with error [Decline: Decline (31603): Decline]. The expected behavior is for the call to connect and allow the recipient to answer.
Steps to Reproduce
- Start the React Native app.
- Login as User A and try to call User B using
makeCall(to, from, token). - The call rings but gets automatically declined.
Expected Behavior
The call should connect successfully, and the recipient should have the option to accept or decline.
Actual Behavior
The call rings but gets automatically declined without user intervention, returning error [Decline: Decline (31603): Decline].
Environment
System:
OS: Windows 11 10.0.26100
CPU: (8) x64 Intel(R) Core(TM) i5-10300H CPU @ 2.50GHz
Memory: 1.05 GB / 7.91 GB
Binaries:
Node:
version: 20.11.1
path: C:\Program Files\nodejs\node.EXE
Yarn: Not Found
npm:
version: 10.4.0
path: C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK:
API Levels:
- "25"
- "28"
- "29"
- "30"
- "31"
- "33"
- "33"
- "34"
- "35"
Build Tools:
- 30.0.2
- 30.0.3
- 31.0.0
- 33.0.0
- 33.0.1
- 34.0.0
- 35.0.0
System Images:
- android-26 | Google APIs Intel x86 Atom_64
- android-33 | Desktop Intel x86_64 Atom
- android-33 | Wear OS 4 Intel x86_64 Atom
- android-33 | Google APIs Intel x86_64 Atom
- android-33 | Google Play Intel x86_64 Atom
- android-34 | Google APIs Intel x86_64 Atom
- android-34 | Google Play Intel x86_64 Atom
Android NDK: Not Found
Windows SDK:
AllowDevelopmentWithoutDevLicense: Enabled
AllowAllTrustedApps: Enabled
IDEs:
Android Studio: AI-242.23726.103.2422.12816248
Visual Studio: Not Found
Languages:
Java: 18.0.2.1
Ruby: Not Found
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.3.1
wanted: 18.3.1
react-native:
installed: 0.75.5
wanted: ^0.75.3
react-native-windows: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: Not found
newArchEnabled: Not found
Logs & Errors
⚠️ Call Failed: [Decline: Decline (31603): Decline]
call {"_customParameters": {}, "_events": {}, "_eventsCount": 0, "_from": undefined, "_handleConnectFailureEvent": [Function anonymous], "_handleConnectedEvent": [Function anonymous], "_handleDisconnectedEvent": [Function anonymous], "_handleMessageReceivedEvent": [Function anonymous], "_handleNativeEvent": [Function anonymous], "_handleQualityWarningsChangedEvent": [Function anonymous], "_handleReconnectedEvent": [Function anonymous], "_handleReconnectingEvent": [Function anonymous], "_handleRingingEvent": [Function anonymous], "_initialConnectedTimestamp": undefined, "_isMuted": false, "_isOnHold": false, "_nativeEventHandler": {"callEventConnectFailure": [Function anonymous], "callEventConnected": [Function anonymous], "callEventDisconnected": [Function anonymous], "callEventMessageReceived": [Function anonymous], "callEventQualityWarningsChanged": [Function anonymous], "callEventReconnected": [Function anonymous], "callEventReconnecting": [Function anonymous], "callEventRinging": [Function anonymous]}, "_sid": undefined, "_state": "connecting", "_to": undefined, "_uuid": "2cddb6fc-fa9f-401e-9e8e-c400ae4e49bf"}
export const makeCall = async (to, from, token) => {
try {
// Create a voice call
const response = await postData(`${baseUrl}/calls/initiate-call`, {
to,
from,
});
if (response && response.call) {
console.log('Outgoing call initiated via API:', response.call);
const voice = new Voice();
const callParams = {
From: `client:${from}`,
To: `client:${to}`,
};
const call = await voice.connect(token, callParams);
console.log('call', call);
// Listen for call events
call.on('connected', () => {
console.log('✅ Call Connected:', call.sid);
});
console.log('disconnect_testing');
call.on('disconnected', () => {
console.log('❌ Call Disconnected');
});
console.log('disconnect_testing1');
call.on('ringing', () => {
console.log('🔔 Call is Ringing');
});
call.on('reconnecting', () => {
console.log('🔄 Call Reconnecting...');
});
call.on('reconnected', () => {
console.log('✅ Call Reconnected');
});
call.on('connectFailure', (error) => {
console.error('⚠️ Call Failed:', error);
});
console.log('disconnect_testing2');
return call;
} else {
throw new Error('Error initiating call via API');
}
} catch (error) {
console.error('Error making call12:', error);
throw error;
}
};
call {"_customParameters": {}, "_events": {}, "_eventsCount": 0, "_from": undefined, "_handleConnectFailureEvent": [Function anonymous], "_handleConnectedEvent": [Function anonymous], "_handleDisconnectedEvent": [Function anonymous], "_handleMessageReceivedEvent": [Function anonymous], "_handleNativeEvent": [Function anonymous], "_handleQualityWarningsChangedEvent": [Function anonymous], "_handleReconnectedEvent": [Function anonymous], "_handleReconnectingEvent": [Function anonymous], "_handleRingingEvent": [Function anonymous], "_initialConnectedTimestamp": undefined, "_isMuted": false, "_isOnHold": false, "_nativeEventHandler": {"callEventConnectFailure": [Function anonymous], "callEventConnected": [Function anonymous], "callEventDisconnected": [Function anonymous], "callEventMessageReceived": [Function anonymous], "callEventQualityWarningsChanged": [Function anonymous], "callEventReconnected": [Function anonymous], "callEventReconnecting": [Function anonymous], "callEventRinging": [Function anonymous]}, "_sid": undefined, "_state": "connecting", "_to": undefined, "_uuid": "2cddb6fc-fa9f-401e-9e8e-c400ae4e49bf"}
i am getting reconnecting error "⚠️ Call Failed: [Decline: Decline (31603): Decline]"
The below code is backend.
export const makeCall = async (req, res) => {
const { to, from } = req.body;
console.log("req.body", req.body);
if (!to || !from) {
return res
.status(400)
.json({ message: "Both 'to' and 'from' fields are required." });
}
try {
const call = await client.calls.create({
to: `client:${to}`,
from: `client:${from}`,
url: "https://342e-2409-40f4-2145-26cf-b09e-ee0b-282-2048.ngrok-free.app/calls/incoming",
});
console.log("call", call);
res.status(200).json({ message: "Call initiated", call });
} catch (err) {
console.log("err", err);
res.status(500).json({ message: "Error making call", error: err.message });
}
};
export const incomingCall = async (req, res) => {
console.log("req.query", req.query);
console.log("req.headers", req.headers);
console.log("req.body", req.body);
// Extract from client (caller)
const fromClient = req.body.From;
const fromClientId = fromClient ? fromClient.split(":")[1] : null;
if (!fromClientId) {
console.error("Caller Client ID (From) is missing.");
return res.status(400).send("Caller Client ID is required.");
}
// Extract or determine the toClientId (recipient)
const toClientId = req.body.To; // Try to get from the body or query param
if (!toClientId) {
console.error("Recipient Client ID (To) is missing.");
return res.status(400).send("Recipient Client ID is required.");
}
console.log("fromClientId:", fromClientId);
console.log("toClientId:", toClientId);
// Create TwiML response to route the call
const twiml = new VoiceResponse();
const dial = twiml.dial();
dial.client(toClientId); // Dial the toClientId dynamically
// Return TwiML response to Twilio
res.type("text/xml");
console.log("Generated TwiML:", twiml.toString());
res.send(twiml.toString());
};
The Incoming router I am not the getting To clientid.
