MrHertal / react-native-twilio-phone

Twilio Voice React Native module.
MIT License
154 stars 67 forks source link

Invalid ApplicationSid #15

Closed ismailkhan89 closed 3 years ago

ismailkhan89 commented 3 years ago

I have followed the whole example as it is. From server it is fetching perfect fetchAccessToken i have parsed in jwt it was perfect.

2020-12-21 16:08:56.940599+0500 driver[749:86001] [TwilioPhone] Call failed to connect: Invalid ApplicationSid

This is the error which is shown in Xcode logs and although i have not used ApplicationSid in my code at all so why this error is appearing ? if it is necessary to user ApplicationSid then where to use kindly mention that .

Below is my onPress call code

`const [from, setFrom] = React.useState('+61253665456'); // from number which i have bought from twilio const [to, setTo] = React.useState('+61452545369'); // to whom i am calling

async function call() {

console.log("called")
if (to === '') {
  return;
}

setCallInProgress(true);

try {
  await RNTwilioPhone.startCall(to, 'My friend', from);
} catch (e) {
  console.log(e);
  setCallInProgress(false);
}

}`

now from server i am only receiving fetchAccessToken and i am trying to make call is it ok or i should call any other api as well ?

MrHertal commented 3 years ago

Hi,

This is the error which is shown in Xcode logs and although i have not used ApplicationSid in my code at all so why this error is appearing ? if it is necessary to user ApplicationSid then where to use kindly mention that .

This error means that something is wrong in your server configuration. Follow this guide carefully (please skip step 1 and 6 of the quick-start).

On step 3, what quick-start project did you pick?

Indeed the application sid is not something that you have to put on your react-native code, this is used on server side.

Below is my onPress call code

Code seems fine, but I would remove the from parameter here:

await RNTwilioPhone.startCall(to, 'My friend', from);

This parameter is just for displaying caller name.

The number you bought from Twilio that will serve to make the outgoing call is again specified on your server code, not on the react-native code.

ismailkhan89 commented 3 years ago

I want to make a simple call without greetings messages etc. where i will provide "To" number and twilio will call on that number like alex said above My goal is to make a full-fledged call between two users.

can any one share your code because i tried multiple ways

like called placeCall from my app and created Twiml app in which callback url defined to /makeCall call so it just say "Congratulations! You have received your first inbound call! Good bye." greetings from incoming function instead of communication between 2 users

function incoming() { const voiceResponse = new VoiceResponse(); voiceResponse.say("Congratulations! You have received your first inbound call! Good bye."); console.log('Response:' + voiceResponse.toString()); return voiceResponse.toString(); }

other two functions are as below.

`function makeCall(request, response) { // The recipient of the call, a phone number or a client var to = null; if (request.method == 'POST') { to = request.body.to; } else { to = request.query.to; }

const voiceResponse = new VoiceResponse();

if (!to) { voiceResponse.say("Congratulations! You have made your first call! Good bye."); } else if (isNumber(to)) { const dial = voiceResponse.dial({callerId : callerNumber}); dial.number(to); } else { const dial = voiceResponse.dial({callerId : callerId}); dial.client(to); } console.log('Response:' + voiceResponse.toString()); return response.send(voiceResponse.toString()); }`

`async function placeCall(request, response) { // The recipient of the call, a phone number or a client var to = null; if (request.method == 'POST') { to = request.body.to; } else { to = request.query.to; } console.log(to); // The fully qualified URL that should be consulted by Twilio when the call connects. var url = request.protocol + '://' + request.get('host') + '/incoming'; console.log(url); const accountSid = process.env.ACCOUNT_SID; const apiKey = process.env.API_KEY; const apiSecret = process.env.API_KEY_SECRET; const client = require('twilio')(apiKey, apiSecret, { accountSid: accountSid } );

if (!to) { console.log("Calling default client:" + defaultIdentity); call = await client.api.calls.create({ url: url, to: 'client:' + defaultIdentity, from: callerId, }); } else if (isNumber(to)) { console.log("Calling number:" + to); call = await client.api.calls.create({ url: url, to: to, from: callerNumber, }); } else { console.log("Calling client:" + to); call = await client.api.calls.create({ url: url, to: 'client:' + to, from: callerId, }); } console.log(call.sid) //call.then(console.log(call.sid)); return response.send(call.sid); }`

MrHertal commented 3 years ago

I want to make a simple call without greetings messages etc. where i will provide "To" number and twilio will call on that number like alex said above My goal is to make a full-fledged call between two users.

Let's say you want to call +61452545369, using Twilio vocabulary, it means you want to make a client to PSTN call.

Install and run the example app:

git clone git@github.com:MrHertal/react-native-twilio-phone.git && cd react-native-twilio-phone

yarn bootstrap

yarn example ios

After some time, example app should start in the Simulator, this should be enough for making an outgoing call (and not receiving incoming calls). Install on a real device if you can.

If you just want to make an outgoing call (and not receiving incoming calls), replace this line with:

return RNTwilioPhone.initializeCallKeep(callKeepOptions, fetchAccessToken, options);

After that you need to set up the Twilio server. For outgoing calls, only those steps are required:

Create a Voice API key

Configure a server to generate an access token to be used in the app

Create a TwiML application

Configure your application server

After that open the starter project and put the number you bought from Twilio: https://github.com/twilio/voice-quickstart-server-node/blob/3a2d09b1ad26085b399cb9457d0d38b5e823b742/src/server.js#L9

This number is going to be used by Twilio to make the call through PSTN. Now you can run this project and use ngrok to publicly access it. Try to access https://XXXXXX.ngrok.io/accessToken to see if it works.

Finally, replace XXXXXX with your URL in the example app and also in the TwiML application.


Now that everything is set up you can start a call to +61452545369. Here is what's going to happen.

First, a token is going to be fetched (with https://XXXXXX.ngrok.io/accessToken) so that Twilio can identify who is calling. This token contains the TwiML application sid as you can see here.

So when Twilio receives the call, it's going to check that APP_SID to know what to do with that call.

create-twiml-app

The TwiML app is going to tell basically: call https://XXXXXX.ngrok.io/makeCall to get the instructions.

Now if we look at that endpoint: https://github.com/twilio/voice-quickstart-server-node/blob/3a2d09b1ad26085b399cb9457d0d38b5e823b742/src/server.js#L68

Variable to is going to be equal to +61452545369, so isNumber(to) is going to be true. At the end, the instructions that Twilio is going to get to handle the call are a dial to number +61452545369.

And this should work :)


Hope all these details help you find out where your error is.

ismailkhan89 commented 3 years ago

Hello @MrHertal , Thanks for your detail answer every thing you explain i have followed i am recieving call as well from twilio it comes to below function

https://github.com/twilio/voice-quickstart-server-node/blob/3a2d09b1ad26085b399cb9457d0d38b5e823b742/src/server.js#L146

if i make it voiceResponse.dial(to) -----> then it redial the number instead of connecting call. it says "Congratulations! You have received your first inbound call! Good bye." and then call cuts

what should i write in this method to continue call between caller and receiver not jus listen to greetings.

so i don't want this i want both the user calling to twilio with above method should communicate each other instead of just listen to recording and cut the call.

MrHertal commented 3 years ago

what should i write in this method to continue call between caller and receiver not jus listen to greetings.

Nothing. You don't use that. This method is called by placeCall and not makeCall.

I think you are confusing placeCall and makeCall endpoints.

As I wrote above, in the case of client to client and client to PSTN calls, only the makeCall endpoint is used.

placeCall is only useful if you want to check that you are receiving incoming calls.

ismailkhan89 commented 3 years ago

Hello @MrHertal, Thank You so much issue has been resolved as you said i put makeCall instead of placeCall.