首页 > 解决方案 > Twilio JS 客户端立即挂断

问题描述

我正在尝试通过在浏览器中单击按钮来拨打电话,以拨打英国的真实手机(我的手机,用于测试)。

我立即听到挂断声音,以及一条控制台消息,上面写着“已从网关收到 HANGUP”。

称为初始化
Twilio:812 收到令牌并设置设备
Device.setup@twilio.min.js:55
(匿名)@Twilio:813
Promise.then(异步)
初始化@Twilio:811
创建@Twilio:796
callHook@vendor.js?id=32f887f09d9fd70ffc0a:94704
Vue._init@vendor.js?id=32f887f09d9fd70ffc0a:96413
VueComponent@vendor.js?id=32f887f09d9fd70ffc0a:96581
createComponentInstanceForVnode@vendor.js?id=32f887f09d9fd70ffc0a:96093
init@vendor.js?id=32f887f09d9fd70ffc0a:95914
createComponent@vendor.js?id=32f887f09d9fd70ffc0a:97391
createElm@vendor.js?id=32f887f09d9fd70ffc0a:97338
补丁@vendor.js?id=32f887f09d9fd70ffc0a:97913
Vue._update@vendor.js?id=32f887f09d9fd70ffc0a:94453
updateComponent@vendor.js?id=32f887f09d9fd70ffc0a:94571
得到@vendor.js?id=32f887f09d9fd70ffc0a:94925
运行@vendor.js?id=32f887f09d9fd70ffc0a:95002
flushSchedulerQueue@vendor.js?id=32f887f09d9fd70ffc0a:94764
(匿名)@ vendor.js?id=32f887f09d9fd70ffc0a:93620
flushCallbacks@vendor.js?id=32f887f09d9fd70ffc0a:93541
twilio.min.js:55 设置 VSP
twilio.min.js:55 WSTransport.open() 调用...
twilio.min.js:55 正在尝试连接...
twilio.min.js:55 关闭和清理 WebSocket...
twilio.min.js:55 没有要清理的 WebSocket。
twilio.min.js:55 WebSocket 打开成功。
twilio.min.js:55 [PStream] 设置令牌并发布监听
twilio.min.js:55 流已准备就绪
Twilio:822 已连接并准备就绪
Twilio:801 正在尝试拨打电话
twilio.min.js:55 [Twilio.PeerConnection] 信号状态是“有本地报价”
twilio.min.js:55 从网关收到 HANGUP
twilio.min.js:55 正在断开连接...
twilio.min.js:55 [Twilio.PeerConnection] iceConnectionState 是“关闭”
twilio.min.js:55 [Twilio.PeerConnection] 信号状态为“关闭”

我正在使用 Twilio JS 客户端的 CDN 版本https://media.twiliocdn.com/sdk/js/client/v1.6/twilio.min.js

我在 ngrok HTTP'd URL 上本地测试它。

我正在使用 AccessTokens,并且我没有收到访问令牌的错误,因此我假设该令牌完全有效。

生成我的令牌的代码是:

$token = new \Twilio\Jwt\AccessToken(
        $account_sid = "xxx",
        $api_key = "xxx",
        $api_secret = "xxx",
        $ttl = 3600,
        $identity = "example@example.com"
    );

    $voice = new \Twilio\Jwt\Grants\VoiceGrant();
    $voice->setOutgoingApplicationSid(
        $outgoing_sid = "xxx"
    );

    $token->addGrant($voice);

    return $token->toJWT();

我的客户端代码如下所示:

makeCall() {
            console.log("Trying to make a call");
            Twilio.Device.connect({
                From: '+442921673534',
                To: '+447580007865',
            });
        },
        init() {
            console.log("Called init");
            Nova.request().get('/nova-vendor/alexbowers/nova-twilio-field/token').then(function(response) {
                console.log("Received token and setting up device");
                Twilio.Device.setup(response.data, {debug: true});
            });

            Twilio.Device.disconnect((e) => {
                // console.log(e);
                this.handleClose();
            });

            Twilio.Device.ready(function() {
                console.log("Connected and ready");
            });

            Twilio.Device.error(function(e) {
                // console.log(e);
                console.log("Handling error");
            });
        },

makeCall 在点击时被调用,而 init 在页面加载时被调用。

标签: twilio

解决方案


我刚刚解决了同样的问题。请检查您的 javascript twilio 客户端中设置的参数和获取参数的后端是否匹配。

获取 twilio 语音呼叫请求的后端代码

  let voiceResponse = new VoiceResponse();
  voiceResponse.dial({
    callerId: process.env.TWILIO_NUMBER,
  }, request.body.number);

前端代码

  Twilio.Device.connect({ number: "+86xxxxxxxxxxx" });

您必须确认前端和后端的键“数字”相同。

好运


推荐阅读