I have integrated Twilio Programmable Voice. Now I am trying to make client to call from browser and also receive calls to browser using Twilio JS Client. When I try to make the call it says.
message: "Capability token is not valid or missing."
I have searched the internet and Twilio documentation as well but nothing is helping me. Here is my code.
View
<button onclick="callCustomer('{{ '+xxxxxxxx' }}')" type="button" class="btn btn-primary btn-lg call-customer-button">
Call customer
</button>
Controller
public function newToken(Request $request) {
// Required for all Twilio access tokens
$twilioAccountSid = 'ACxxxxxxxxx';
$twilioApiKey = 'SKxxxxxxxxxxx';
$twilioApiSecret = 'xxxxxx';
$outgoingApplicationSid = 'APxxxxxxxxxxx';
$identity = "Jhon_Doe";
$token = new AccessToken(
$twilioAccountSid, $twilioApiKey, $twilioApiSecret, 3600, $identity
);
$voiceGrant = new VoiceGrant();
$voiceGrant->setOutgoingApplicationSid($outgoingApplicationSid);
$voiceGrant->setIncomingAllow(true);
$token->addGrant($voiceGrant);
return $token->toJWT();
}
JS
function callCustomer(phoneNumber) {
$.get("/token", {forPage: window.location.pathname}, function (data) {
console.log(data);
const device = new Twilio.Device();
device.setup(data);
var params = {"phoneNumber": phoneNumber};
device.connect(params);
});
}
I have tried to debug my token from jwt.io debug tool and it says:
Invalid Signature.
I am sure that I am missing something but can't figure it out what. Any help or tip will be appreciated.
I have figured it out just posting answer for future reference. The issue was of twilio js version. I had included the older version which was causing the issue. The lates version to this date is Version: 1.13. Capability token is deprecated in this version and uses Access Token now.