title: Twilio Programmable Video JS / Ionic
body: <p>I am using the Twilio programmable video JS SDK and having some issues.  I have taken their sample code and I am able to create a room and connect to it which does trigger my camera/mic but none of the events are firing which handle things like binding video to the DOM, showing events, etc.</p>
  
  <p>This is part of an Cordova app built on Angular 1 and the Ionic Framework.  Here's the code in my controller:</p>
  
  <pre><code>angular.module('smartlab.controllers').controller('SupportVideoCtrl', ['$scope', '$http', function($scope, $http) {
  
      // include Twilio Video library
      const Video = Twilio.Video;
  
      // call our "cross origin friendly" smartlab cloud server to get Twilio token (they can only be generated server-side)
  
      $http.get('TOKEN_URL', function(data) {
  
      }).then(function(data) {
          console.log(data);
          console.log("Token = " + data.data.token);
  
          Video.connect(data.data.token, { name: 'Support' }).then(room =&gt; {
              console.log('Connected to Room "%s"', room.name);
  
              // None of the events below fire
              room.participants.forEach(participantConnected);  
              room.on('participantConnected', participantConnected);
              room.on('participantDisconnected', participantDisconnected);
              room.once('disconnected', error =&gt; room.participants.forEach(participantDisconnected));
  
          });
      });
  
      function participantConnected(participant) {
          console.log('Participant "%s" connected', participant.identity);
  
          const div = document.createElement('div');
          div.id = participant.sid;
          div.innerText = participant.identity;
  
          participant.on('trackAdded', track =&gt; trackAdded(div, track));
          participant.tracks.forEach(track =&gt; trackAdded(div, track));
          participant.on('trackRemoved', trackRemoved);
  
          console.log("Participant Connected");
          console.dir(div);
  
          document.body.appendChild(div);
      }
  
      function participantDisconnected(participant) {
          console.log('Participant "%s" disconnected', participant.identity);
  
          participant.tracks.forEach(trackRemoved);
  
          document.getElementById(participant.sid).remove();
      }
  
      function trackAdded(div, track) {
          console.log("Track added");
          console.dir(div);
          console.dir(track);
          div.appendChild(track.attach());
      }
  
      function trackRemoved(track) {
          track.detach().forEach(element =&gt; element.remove());
      }
  
  }]);
  </code></pre>
  
  <p>Has anybody used this library and have some sample code to draw from or see anything wrong w/ the code above?  I have checked out their sample NodeJS app but it is quite different than my implementation here so it isn't super useful.  Thanks!</p>