Twilio Voice Recording

Question

I am using the twilio JS client to make call from the web. the client call the backend to get the token. Here the backend code that returns the token. How to record the call. mean where to set the recording url. The call is successfull. But don't know where to pass the recording url.

public function newToken(Request $request)
    {
        $accountSid = config('services.twilio')['accountSid'];
        $applicationSid = config('services.twilio')['applicationSid'];
        $apiKey = config('services.twilio')['apiKey'];
        $apiSecret = config('services.twilio')['apiSecret'];

        $voiceGrant = new VoiceGrant();
        $voiceGrant->setOutgoingApplicationSid($applicationSid);

        $voiceGrant->setIncomingAllow(true);

        $this->accessToken->addGrant($voiceGrant);

        $token = $this->accessToken->toJWT();

        return response()->json(['token' => $token]);
    }

On JS side the code which uses the client side library of twillio.

const Device = Twilio.Device;

// Store some selectors for elements we'll reuse
var callStatus = $("#call-status");
var answerButton = $(".answer-button");
var callSupportButton = $(".call-support-button");
var hangUpButton = $(".hangup-button");
var callCustomerButtons = $(".call-customer-button");

var device = null;

function updateCallStatus(status) {
    callStatus.attr('placeholder', status);
}

/* Get a Twilio Client token with an AJAX request */
$(document).ready(function() {
    setupClient();
});

function setupHandlers(device) {
    device.on('ready', function(_device) {
        updateCallStatus("Ready");
    });

    /* Report any errors to the call status display */
    device.on('error', function(error) {
        updateCallStatus("ERROR: " + error.message);
    });

    /* Callback for when Twilio Client initiates a new connection */
    device.on('connect', function(connection) {
        // Enable the hang up button and disable the call buttons
        hangUpButton.prop("disabled", false);
        callCustomerButtons.prop("disabled", true);
        callSupportButton.prop("disabled", true);
        answerButton.prop("disabled", true);

        // If phoneNumber is part of the connection, this is a call from a
        // support agent to a customer's phone
        if ("phoneNumber" in connection.message) {
            updateCallStatus("In call with " + connection.message.phoneNumber);
        } else {
            // This is a call from a website user to a support agent
            updateCallStatus("In call with support");
        }
    });

    /* Callback for when a call ends */
    device.on('disconnect', function(connection) {
        // Disable the hangup button and enable the call buttons
        hangUpButton.prop("disabled", true);
        callCustomerButtons.prop("disabled", false);
        callSupportButton.prop("disabled", false);

        updateCallStatus("Ready");
    });

    /* Callback for when Twilio Client receives a new incoming call */
    device.on('incoming', function(connection) {
        updateCallStatus("Incoming support call");

        // Set a callback to be executed when the connection is accepted
        connection.accept(function() {
            updateCallStatus("In call with customer");
        });

        // Set a callback on the answer button and enable it
        answerButton.click(function() {
            connection.accept();
        });
        answerButton.prop("disabled", false);
    });
};

function setupClient() {
    $.post("/token", {
        forPage: window.location.pathname,
        _token: $('meta[name="csrf-token"]').attr('content')
    }).done(function(data) {
        // Set up the Twilio Client device with the token
        device = new Device();
        device.setup(data.token);

        setupHandlers(device);
    }).fail(function() {
        updateCallStatus("Could not get a token from server!");
    });

};

/* Call a customer from a support ticket */
window.callCustomer = function(phoneNumber) {
    updateCallStatus("Calling " + phoneNumber + "...");

    var params = { "phoneNumber": phoneNumber };
    device.connect(params);
};

/* Call the support_agent from the home page */
window.callSupport = function() {
    updateCallStatus("Calling support...");

    // Our backend will assume that no params means a call to support_agent
    device.connect();
};

/* End a call */
window.hangUp = function() {
    device.disconnectAll();
};

Answer 1

I'll assume that the TwiML generated by the URL you have set on your TwiML Application includes the verb in order to connect the incoming Client call to something like a PSTN number.

If that assumption is correct then you can include the record attribute on that verb:

<Response>
 <Dial record="record-from-ringing-dual"
   recordingStatusCallback="https://myapp.com/recording-events"
   recordingStatusCallbackEvent="in-progress completed absent">
   <Number>+15558675310</Number>
 </Dial>
</Response>

Use record-from-answer-dual or record-from-ringing-dual record values for dual-channel recordings, with the parent and child calls in different stereo tracks.

See the support article Recording a Phone Call with Twilio for more details.