How to start recording `in-progress` outbound calls in Twilio?

Question

I have Twilio starting, pausing, resuming, and stopping the recording of in-progress inbound calls. However, when I use the same approach, same code, to record in-progress outbound calls I get a 20404 error.

I get that I can record outbound calls from the beginning using the <record> verb, but I need to be able to selectively record in-progress outbound calls.

As I say, I have it working for recording in-progress inbound calls, so I'm confused as to why the same approach doesn't work for in-progress outbound calls.

This is my javascript for initiating the recording of a call:

document.getElementById('button-record-start').onclick = function () {

    var call_id = $('#call-id').val();
    var csrf_token = $('meta[name="csrf-token"]').attr('content');

    console.log(call_id);
    console.log(csrf_token);

    $.ajax({
        url: 'https://my-url.ngrok.io/twilio/recording/start',
        type: 'POST',
        headers: {
            'X-CSRF-TOKEN': csrf_token
        },
        data: {
            call_id: call_id
        },
        dataType: 'JSON',
        success: function (data) { 
            $('#recording-id').val(data.sid);
            console.log(data);
        },
        error: function(xhr, status, error) {
            console.log('error:');
            console.log(xhr);
        }
    });
};

The ajax calls to this method in my php (Laravel):

public $twilio_api_base_url = 'https://api.twilio.com/2010-04-01/Accounts/';

public function start(Request $request)
{
    $call_id = $request->input('call_id');

    $url  =  $this->twilio_api_base_url . env('TWILIO_ACCOUNT_SID');
    $url .= '/Calls/' . $call_id . '/Recordings.json';

    $params = [ 'RecordingStatusCallback'=>'https://myapp.com/recording-events', 
                'RecordingStatusCallbackEvent' => 'in-progress'
              ];

    $this->send_request_to_twilio($url, $params);
}

Method send_request_to_twilio looks like this:

public static function send_request_to_twilio($url, $params)
{
    $ch = curl_init();

    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_POST, true);
    curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($params));
    curl_setopt($ch, CURLOPT_USERPWD, env('TWILIO_ACCOUNT_SID') . ':' . env('TWILIO_AUTH_TOKEN') );

    curl_exec($ch);
    curl_close($ch);        
}

$url is formulating correctly. The only thing I can think of is that maybe as I am on a trial account at the moment Twilio changes the CallSid when it finishes the obligatory recording telling me that I am on a trial account and then initiates the actual call. Is this correct? If so, how would I find out the new id once this has occurred?

Edit:

Adding this to show how I get the call sid:

$.getJSON('twilio/token')

    .then(function (data) {

        device = new Twilio.Device(data.token);

        device.on('ready',function (device) {
            console.log('device.on ready')
        });

        device.on('error', function (error) {
            console.log('device.on error');
        });

        device.on('connect', function (conn) {
            console.log('device.on connect');

            var twilio_call_sid = conn.parameters.CallSid;

            log_call_to_database(twilio_call_sid, 'connect');

        });

        // other stuff

  });

And this is what my twilio/token that the getJSON calls to looks like:

public function new_twilio_token()
{
    $twilio_account_sid = env('TWILIO_ACCOUNT_SID');
    $twilio_auth_token  = env('TWILIO_AUTH_TOKEN');
    $twilio_application_sid = env('TWILIO_APPLICATION_SID');

    $capability = new ClientToken($twilio_account_sid, $twilio_auth_token);
    $capability->allowClientOutgoing($twilio_application_sid);

    $identity = 'tom';
    $capability->allowClientIncoming($identity);
    $token = $capability->generateToken();

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