I am programming an app with Laravel PHP framework and Vue.JS for my frontend. I've followed the Twilio browser to phone guide and I've searched my issues for hours on the web and I cannot get an outbound call to place.
I'm getting a capability token from my api just fine, which i'm then using to connect to a phone number...
makeCall(number) {
number = number.replace(/\D/g, "");
number = "1" + number;
// Grab the authusers token
const authUser = JSON.parse(window.localStorage.getItem("authUser"));
// Get a capability Token
this.$http
.get("calls/capability-token", {
headers: { Authorization: "Bearer " + authUser.access_token }
})
.then(response => {
const capabilityToken = response.body;
const self = this;
// Set up the Twilio Client Device with the token
Twilio.Device.setup(capabilityToken);
Twilio.Device.ready(device => {
self.dialResident(number);
});
})
.catch(response => {
console.log(response);
this.$swal({
title: "Error!",
text: "There was a server error. Please try again later.",
type: "error",
showCancelButton: false,
confirmButtonText: "Ok"
});
});
},
dialResident(number) {
const params = { To: number, debug: true };
console.log("Calling " + params.To + "...");
Twilio.Device.connect(params);
}
Then i'm passing it to my backend in PHP:
// Make a call
public function getCapabilityToken(Request $request)
{
// Generate a capability token
$sid = env('TWILIO_SID');
$token = env('TWILIO_TOKEN');
$appSid = env('TWILIO_APP_SID');
$capability = new ClientToken($sid, $token);
$capability->allowClientOutgoing($appSid);
$jwtToken = $capability->generateToken();
return $jwtToken;
}
// Twilio TWIML Voice Hook
public function voiceHook(Request $request)
{
$response = new TwiMl();
$callerIdNumber = env('TWILIO_FROM');
$dial = $response->dial(['callerId' => $callerIdNumber]);
$phoneNumberToDial = $request->input('phoneNumber');
$dial->number($phoneNumberToDial);
return $response;
}
And every time i get the following error from the debugger:
Error - 11750
TwiML response body too large
In your response to Twilio's request, the response body is larger than 64 kB.
login.js:1 Received an error from the gateway:
{code: 31002, connection: t, message: "Connection Declined", twilioError: Error
at new n (https://senior.422clients.com/js/login.js:28:96402)
at m.i._onHangup (https…}
code: 31002
connection: t {_events: {…}, _eventsCount: 6, _maxListeners: undefined, parameters: {…}, _inputVolumeStreak: 0, …}
message: "Connection Declined"
twilioError: Error at new n (https://senior.422clients.com/js/login.js:28:96402) at m.i._onHangup (https://senior.422clients.com/js/login.js:31:221564) at m.l.emit (https://senior.422clients.com/js/login.js:31:337569) at m._handleTransportMessage (https://senior.422clients.com/js/login.js:28:263330) at t.l.emit (https://senior.422clients.com/js/login.js:31:337569) at WebSocket.a._onSocketMessage (https://senior.422clients.com/js/login.js:1:64040)
causes: []
code: 31005
description: "Connection error"
explanation: "A connection error occurred during the call"
solutions: []
message: ""
stack: "Error↵ at new n (https://senior.422clients.com/js/login.js:28:96402)↵ at m.i._onHangup (https://senior.422clients.com/js/login.js:31:221564)↵ at m.l.emit (https://senior.422clients.com/js/login.js:31:337569)↵ at m._handleTransportMessage (https://senior.422clients.com/js/login.js:28:263330)↵ at t.l.emit (https://senior.422clients.com/js/login.js:31:337569)↵ at WebSocket.a._onSocketMessage (https://senior.422clients.com/js/login.js:1:64040)"
__proto__: Error
__proto__: Object
This issue is because my URL in the TwiML app was set to http and not https. Note that TwiML apps do not follow 301 redirects.