CODEWITHSUNDEEP
twilio
Daniellesmith31
Daniellesmith31

Reputation: 49

Error when receiving inbound calls Twilio

When receiving an inbound call to my browser with twilio, the first initial call works but if i try and make an inbound call to my browser again I get a twilio error "Error creating answer: failed to set local answer sdp: called in wrong state: STATE_INPROGRESS

enter image description here

Upvotes: 1

Views: 708

Answers (1)

Megan Speir
Megan Speir

Reputation: 3811

Megan from Twilio here.

The following code snippet extends from the quickstart which alters the way we're handling event listeners worked for someone who was receiving the same error and described a similar behavior in not being able to take subsequent calls. 

<?php
include '../Twilio/Services/Twilio/Capability.php';

// put your Twilio API credentials here
$accountSid = 'ACxxxxx';
$authToken  = 'aaxxxxx';

// put your Twilio Application Sid here
$appSid     = 'APxxxxx';

$capability = new Services_Twilio_Capability($accountSid, $authToken);
$capability->allowClientOutgoing($appSid);
$capability->allowClientIncoming('alex');
$token = $capability->generateToken();
// put your Twilio Application Sid here
$appSid     = 'APxxxxx';

?>

<!DOCTYPE html>
<html>
<head>
    <title>Twilio Client</title>
    <script type="text/javascript" src="//static.twilio.com/libs/twiliojs/refs/6359b40/twilio.js"></script>
    <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script type="text/javascript">
    $( document ).ready(function() {
        $("#answer").hide();
        $("#hangup").hide();
        $("#reject").hide();

        Twilio.Device.setup("<?php echo $token; ?>", { debug: true});


        Twilio.Device.ready(function (device) {
            $("#log").text("Ready");
        });

        Twilio.Device.error(function (error) {
            $("#log").text("Error: " + error.message);
        });

        Twilio.Device.connect(function (conn) {
            $("#log").text("Successfully established call");
            $("#call").hide();
            $("#reject").hide();
            $("#hangup").show();

        });

        Twilio.Device.disconnect(function (conn) {
            $("#log").text("Call ended. Ready for new incoming/ outgoing calls.");
            $("#hangup").hide();
            $("#call").show();
        });


        /**
        * Ideally, we don't want to set a listener every time
        * Twilio.Device.incoming is called. Instead, we should
        * set a listener once and keep track of the current
        * connection.
        */
        var connection = null;

        Twilio.Device.incoming(function(conn) {
            // Set the reference to the current
            // connection when we receive an
            // incoming call
            connection = conn;
            $("#log").text("Incoming call from " + conn.parameters.From);
            $("#answer").show();
            $("#call").hide();
            $("#reject").show();

            // Clear the reference to the
            // connection when disconnected.
            connection.disconnect(function() {
                connection = null;
            })
        });

        Twilio.Device.cancel(function(conn) {
            $("#log").text("Ready");
            $("#answer").hide();
            $("#reject").hide();
            $("#call").show();
        });

        $("#reject").click(function() {
            $("#log").text("Incoming call is rejected. Ready for new incoming/ outgoing calls.");
            connection.reject();
            $("#answer").hide();
            $("#reject").hide();
            $("#call").show();


        });

        // Set the listener once.
        $("#answer").click(function() {
            // If there's no pending connection,
            // there's nothing to do.
            if (!connection) { return; }

            // Update the interface
            $("#answer").hide();
            $("#call").show();
            $("#log").text("Call accepted");

            // Accept the current connection.
            connection.accept();
        });

        $("#call").click(function() {
            // get the phone number to connect the call to
            params = {"PhoneNumber": $("#number").val()};
            Twilio.Device.connect(params);
        });

        $("#hangup").click(function() {
            Twilio.Device.disconnectAll();
            $("#log").text("Ready");
        });


    });

    </script>
</head>
<body>
<div align="center" style="margin: auto; width:500px; padding: 20px;">
    <div class="form-inline">
        <div class="input-group">
            <div class="input-group-addon"><img src="https://www.twilio.com/bundles/favicons/img/Twilio_16.png" /></div>
            <input type="text" class="form-control" id="number" name="number">
        </div>

        <button class="btn btn-success" id="answer">Accept</button>

        <button class="btn btn-success" id="call">Call</button>

        <button class="btn btn-danger" id="hangup">Hangup</button>

        <button class="btn btn-danger" id="reject">Reject</button>

    </div>
    <br>
    <div id="log" class="alert-info" style="width: 347px; font-size: large;"></div>
</div>


</body>
</html>

I hope this proves to be helpful.

Upvotes: 1

Related Questions