Twilio.Device 不是构造函数

问题描述

我第一次将 Twilio 与 VueJs 一起使用，但出现错误：Twilio.Device is not a constructor

我正在学习本教程：https://www.twilio.com/blog/make-receive-phone-calls-browser-twilio-programmable-voice-python-javascript

这是我的代码：

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!");
            });
    }

解决方法

您应该使用 Twilio 客户端而不是 Twilio 来发出请求。

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

从 twilio 客户端导入设备

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,{
                   ....
                }
              ...
             })
          ...
   }
}