Twilio.Device 不是构造函数

Question

I'm using Twilio with VueJs for the first time, and i'm getting an error: Twilio.Device is not a constructor

i'm following this tutorial: https://www.twilio.com/blog/make-receive-phone-calls-browser-twilio-programmable-voice-python-javascript

this is my code:

created(){
        const Twilio = require("twilio");
        let device;
        console.log("Requesting Access Token...");
        // Using a relative link to access the Voice Token function

        getAPI.get("/api/contacts/token/")
            .then(function (response) {
                console.log("Got a token.");
                console.log("Token: " + response.data.token);

                // Setup Twilio.Device
                device = new Twilio.Device(response.data.token, {
                    // 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: ["opus", "pcmu"],
                    // Use fake DTMF tones client-side. Real tones are still sent to the other end of the call,
                    // but the client-side DTMF tones are fake. This prevents the local mic capturing the DTMF tone
                    // a second time and sending the tone twice. This will be default in 2.0.
                    fakeLocalDTMF: true,
                    // Use `enableRingingState` to enable the device to emit the `ringing`
                    // state. The TwiML backend also needs to have the attribute
                    // `answerOnBridge` also set to true in the `Dial` verb. This option
                    // changes the behavior of the SDK to consider a call `ringing` starting
                    // from the connection to the TwiML backend to when the recipient of
                    // the `Dial` verb answers.
                    enableRingingState: true,
                    debug: true,
                });

                device.on("ready", function (device) {
                    console.log("Twilio.Device Ready!");
                });

                device.on("error", function (error) {
                    console.log("Twilio.Device Error: " + error.message);
                });

                device.on("connect", function (conn) {
                    console.log('Successfully established call ! ');
                // $('#modal-call-in-progress').modal('show')
                });

                device.on("disconnect", function (conn) {
                    console.log("Call ended.");
                // $('.modal').modal('hide')
                });

            })
            .catch(function (err) {
                console.log(err);
                console.log("Could not get a token from server!");
            });
    }

Answer 1

You should use Twilio client instead of Twilio to make the request.

yarn add twilio-client
// or
npm install twilio-client

Import Device from twilio client

import { Device } from 'twilio-client'; // import the library at the top instead of putting in created()

export default {
   ...
   // same code as yours, only moved import to the top
   created() {
       let device;
        console.log("Requesting Access Token...");
        // Using a relative link to access the Voice Token function

        getAPI.get("/api/contacts/token/")
            .then(function (response) {
                console.log("Got a token.");
                console.log("Token: " + response.data.token);

                // Setup Twilio.Device
                device = new Twilio.Device(response.data.token, {
                   ....
                }
              ...
             })
          ...
   }
}