How to setup twilio device in Angular app for the incoming call (i.e. API is in .NET 6)?

I am facing one issue related to incoming calls, so the situation is API is in .NET 6 and it's frontend is in Angular app and also it's multi-tenant application.

So the problem is I've created Twilio device in Angular app and also created incoming webhook on Twilio and webhook endpoint is in .NET API, webhook is trigger when incoming calls come but how can I connect incoming calls to the Twilio device which is in Angular.

I've also added incoming scope identity when generate the token for calls.

Note: Outgoing calls are working perfectly fine.

Expected Answer: What am I missing? Or Do you have any reference blogs or something, If so then please help tech community.

Thanks in advance.

Generating token in .NET 6 as below

var scopes = new HashSet<IScope> {
{ new IncomingClientScope(unique_user_name) },
{ new OutgoingClientScope(my_twiml_app_sid) }
};
var capability = new ClientCapability(twilio_sid, twilio_token, expiration_time, scopes: scopes);
string voicetoken = capability.ToJwt();


And then setting up the device in Angular as below and with device ready function

device.setup(voice_token);

device.on('ready', () => {
console.log('device is ready.');
});

device.on('error', (err) => {
console.log('device is not ready. Error - ', err);
});

device.on('incoming', (call) => {
console.log('incoming call', call);
});



Also created the incoming webhook with caller Id and 'to' number as below,

public TwiMLResult IncomingVoice()
{
var response = new VoiceResponse();

var dial = new Dial(callerId: my_callerId);

// wrap the phone number or client name in the appropriate TwiML verb
// by checking if the number given has only digits and format symbols
if(Regex.IsMatch(to, "^[\\d\\+\\-\\(\\) ]+$"))
{
dial.Number(to);
}
else
{
dial.Client(to);
}
response.Append(dial);
return TwiML(response);
}


Everything is working fine with above example but Twilio device is not triggering when incoming call comes.

Continue reading...