Laravel Vue js Twilio Received error: TransportError: TransportError (31009): No transport available to send or receive messages


I am trying to follow the steps here https://github.com/TwilioDevEd/voice-javascript-sdk-quickstart-php/blob/main/quickstart.js

I don’t know they Have changed the Javascript SDJ to 2.0 or something. I was familiar with the previous library but it is depreciated. Can someone help me to figure out what’s going on
I don’t know why I am getting this error

Attempting to call Phone numbere here...
backend.js:19648 Setting up VSP
backend.js:19648 Initializing transport backoff using config:  {factor: 2, initialDelay: 100, maxDelay: 20000, randomisationFactor: 0.4}
backend.js:19648 WSTransport.open() called...
backend.js:19648 Attempting to connect...
backend.js:19648 Closing and cleaning up WebSocket...
backend.js:19648 No WebSocket to clean up.
backend.js:19648 WebSocket opened successfully.
backend.js:19648 Setting token and publishing listen
backend.js:19648 Received error:  TransportError: TransportError (31009): No transport available to send or receive messages

JWT Token generation

$identity = uniqid();
        $this->app->bind(
            AccessToken::class,
            function ($app,$identity) {
                $accountSid = '';
                $apiKey = '';
                $apiSecret = '';

                return new AccessToken($accountSid, $apiKey, $apiSecret, 3600, $identity);
            }
        );

Javascript

setupClient() {
             axios.post("/twilio/token", {
                forPage: window.location.pathname,
                _token: $('meta[name="csrf-token"]').attr('content')
            }).then((response) => {
                // console.log(Device.Device(response.token));
                  device = new device(response.data.token, {
                          logLevel: 1,
                          answerOnBridge: true,
                          // Set Opus as our preferred codec. Opus generally performs better, requiring less bandwidth and
                          // providing better audio quality in restrained network conditions. Opus will be default in 2.0.
                          codecPreferences: ["codec", "pcmu"],
                        });
                    device.updateToken(response.data.token);
                    //this.getAudioDevices()
                    this.addDeviceListeners(device);

                    this.makeOutgoingCall(device)




            });

        },

 makeOutgoingCall(device) {
    var params = {
      // get the phone number to call from the DOM
      phone: 'Phone here',
    };

    if (device) {
      console.log(`Attempting to call ${params.phone} ...`);

      // Twilio.Device.connect() returns a Call object
      const call = device.connect({ params });

      // add listeners to the Call
      // "accepted" means the call has finished connecting and the state is now "open"
      // call.addListener("accept", updateUIAcceptedCall);
      // call.addListener("disconnect", updateUIDisconnectedCall);
    } else {
      console.log("Unable to make call.");
    }
  },

Source: Vue – Stack Overflow

November 28, 2021
Category : News
Tags: laravel | twilio | twilio-api | twilio-click-to-call | Vue.js

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.