title: Twilio Device Setup - Registers, Connects to TWiML App, but won't accept calls
body: <p>Am trying to setup a soft phone in browser, via TWiML app.</p>
  <p>I created the following:</p>
  <ul>
  <li>A page on my own server which serves TWiML to dial a number, say '+11111111111'.</li>
  <li>A TWiML app which points to that page</li>
  <li>A Twilio number which points to that app.</li>
  <li>A page on my server which creates a Twilio Device associated with the app and buttons to run <code>device.connect()</code> or <code>device.register()</code></li>
  </ul>
  <p>The device is setup correctly, as I can register and connect with no errors.<br />
  The app works - the phone rings at +111 when I press &quot;Call Using Twilio&quot; button on the <a href="https://www.twilio.com/console/voice/twiml/apps/" rel="nofollow noreferrer">TWiML app page</a>, when I call the number pointing to the TWiML app, and when I press the button on my own page. Yay!</p>
  <p>What I cannot figure out:</p>
  <ul>
  <li>How to answer the phone using the Twilio Device.<br />
  <em>The device registers with no issue, so why doesn't it get incoming calls?</em></li>
  <li>How to call other numbers aside from the one in my app.<br />
  <em>I did in device.connect(<code>{params: {To: '+2222222222'}}</code>), why doesn't it call that number?</em></li>
  </ul>
  <p>Here are all the relevant pages:</p>
  <p>calls.pug:</p>
  <pre><code>doctype html
  html(lang=&quot;en&quot;)
    head
      meta(charset=&quot;utf-8&quot;)
        title Browser Calls
      body
        input#call(type=&quot;submit&quot; value=&quot;call&quot;)
        input#register(type=&quot;submit&quot; value=&quot;register&quot;)
        pre
        script(src=&quot;/js/twilio-sdk/twilio.js&quot;)
        script(type=&quot;module&quot; src=&quot;/js/calls.js&quot;)
  </code></pre>
  <p>[client] calls.js</p>
  <pre class="lang-js prettyprint-override"><code>const $ = css =&gt; document.querySelector(css);
  const echo = msg =&gt; $('pre').innerText += msg + &quot;\n&quot;;
      
  var device;
      
  async function setupDevice(){
      
      let data = await fetch('/token/new');
      data = await data.json();
      
      device = new Twilio.Device(data.token);
      device.on(&quot;error&quot;,
          err =&gt; echo(&quot;Twilio.Device Error: &quot; + err.message));
      
      echo ('Device setup complete.')
      }
      
  $('#register').addEventListener('click', async e =&gt; {
      if (!device) await setupDevice();
      
      device.on(&quot;registered&quot;, conn =&gt;
          echo('Ready to accept incoming calls.')
          );
      device.on(&quot;incoming&quot;, call =&gt;
          echo('Incoming call to device')
          );
      device.register()
      });
      
  $('#call').addEventListener('click', async e =&gt; {
      if (!device) await setupDevice();
      let params = { To: '+22222222222' }
      device.connect({ params })
      });
  </code></pre>
  <p>[node] token.js</p>
  <pre class="lang-js prettyprint-override"><code>const express = require('express');
  const router = express.Router();
      
  const AccessToken = require('twilio').jwt.AccessToken;
  const VoiceGrant = AccessToken.VoiceGrant;
      
  const config = require('../config');
  router.get('/new', function (req, res) {
      const accessToken = new AccessToken(
          config.accountSid, config.apiKey, config.apiSecret, {identity: 'SG'}
          );
      
      const grant = new VoiceGrant({
      outgoingApplicationSid: config.appSid,
          incomingAllow: true,
          });
      accessToken.addGrant(grant);
      
      res.setHeader('Content-Type', 'application/json');
      res.send(JSON.stringify({ token: accessToken.toJwt() }));
      });
  module.exports = router;
  </code></pre>