Twilio Programmable Video JS / Ionic

Question

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.

This is part of an Cordova app built on Angular 1 and the Ionic Framework. Here's the code in my controller:

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 => {
            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 => 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 => trackAdded(div, track));
        participant.tracks.forEach(track => 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 => element.remove());
    }

}]);

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!

Answer 1

After a lot of trial and error + some back and forth with the great Phil Nash I have a well working solution. This is now part of our Cordova Mobile App built with the Ionic Framework.

HTML:

<ion-view class="app-tab" hide-nav-bar="true" view-title="Support">
    <ion-content class="padding">
        <h3 class="tab-header-text">Live Video Support</h3>
        <div id="call-connected">Connected to Live Tech Support</div>

        <div id="controls">
            <div id="preview" style="float:left;">
                <div id="local-media"></div>
                <button id="button-preview" style="margin-left:40px;">Preview My Camera</button>
            </div>
            <div id="call-controls" class="call-button-div">
                <i id="button-call" class="icon ion-ios-telephone-outline call-buttons" style="color:green;"></i>
                <i id="button-call-end" class="icon ion-ios-telephone-outline call-buttons" style="color:red; display:none;"></i>
            </div>
        </div>
        <div id="spin-wrapper"><ion-spinner name="circles"></ion-spinner></div>

        <div id="remote-media">
            <div id="video-overlay">Nicholas Kreidberg</div>
        </div>

    </ion-content>
</ion-view>

JS:

angular.module('PROJECT_NAME.controllers').controller('SupportVideoCtrl', ['$rootScope', '$scope', '$http', function($rootScope, $scope, $http) {

    // instantiate Twilio Programmable Video library
    const Video = Twilio.Video;

    // setup some vars
    var activeRoom;
    var previewTracks;
    var identity;
    var roomName;

    // Attach the Tracks to the DOM.
    function attachTracks(tracks, container) {
        tracks.forEach(function(track) {
            container.appendChild(track.attach());
        });
    }

// Attach the Participant's Tracks to the DOM.
    function attachParticipantTracks(participant, container) {
        var tracks = Array.from(participant.tracks.values());
        attachTracks(tracks, container);
    }

// Detach the Tracks from the DOM.
    function detachTracks(tracks) {
        tracks.forEach(function(track) {
            track.detach().forEach(function(detachedElement) {
                detachedElement.remove();
            });
        });
    }

// Detach the Participant's Tracks from the DOM.
    function detachParticipantTracks(participant) {
        var tracks = Array.from(participant.tracks.values());
        detachTracks(tracks);
    }

    // When we are about to transition away from this page, disconnect
    // from the room, if joined.
    window.addEventListener('beforeunload', leaveRoomIfJoined);

    $rootScope.$on('$stateChangeSuccess',
        function(event, toState, toParams, fromState, fromParams) {
            leaveRoomIfJoined();
        }
    );

    $http.get('TOKEN_URL', function(data) {

    }).then(function(data) {
        console.log(data);
        console.log("Token = " + data.data.token);

        //document.getElementById('room-controls').style.display = 'block';

        // Bind click event and add token to data attribute
        document.getElementById('button-call').addEventListener('click', connect);
        document.getElementById('button-call').setAttribute('data-token', data.data.token);

        // Connect
        connect();

        // Bind button to leave Room.
        document.getElementById('button-call-end').onclick = function() {
            log('Disconnecting...');
            document.getElementById('call-connected').style.display = 'none';
            document.getElementById('spin-wrapper').style.display = 'none';
            document.getElementById('button-preview').style.display = 'block';
            document.getElementById('video-overlay').style.display = 'none';
            activeRoom.disconnect();
        };
    });

    function connect() {
        roomName = 'Support';

        log("Joining room '" + roomName + "'...");

        token = document.getElementById('button-call').getAttribute('data-token');

        console.log("Token: "+token);

        var connectOptions = {
            name: 'Support',
            logLevel: 'debug'
        };

        if (previewTracks) {
            connectOptions.tracks = previewTracks;
        }

        // Join the Room with the token from the server and the
        // LocalParticipant's Tracks.
        Video.connect(token, connectOptions).then(roomJoined, function(error) {
            log('Could not connect to Twilio: ' + error.message);
        });

        document.getElementById('call-connected').style.display = 'block';
        document.getElementById('spin-wrapper').style.display = 'inline-flex';
        document.getElementById('button-preview').style.display = 'none';
    }

// Successfully connected!
    function roomJoined(room) {
        window.room = activeRoom = room;

        log("Joined as '" + identity + "'");
        document.getElementById('button-call').style.display = 'none';
        document.getElementById('button-call-end').style.display = 'inline';

        // Attach LocalParticipant's Tracks, if not already attached.
        var previewContainer = document.getElementById('local-media');
        if (!previewContainer.querySelector('video')) {
            attachParticipantTracks(room.localParticipant, previewContainer);
        }

        // Attach the Tracks of the Room's Participants.
        room.participants.forEach(function(participant) {
            log("Already in Room: '" + participant.identity + "'");
            var previewContainer = document.getElementById('remote-media');
            attachParticipantTracks(participant, previewContainer);
        });

        // When a Participant joins the Room, log the event.
        room.on('participantConnected', function(participant) {
            //document.getElementById('remote-media').style.display = 'inline';
            log("Joining: '" + participant.identity + "'");
        });

        // When a Participant adds a Track, attach it to the DOM.
        room.on('trackAdded', function(track, participant) {
            log(participant.identity + " added track: " + track.kind);
            var previewContainer = document.getElementById('remote-media');
            document.getElementById('spin-wrapper').style.display = 'none';
            document.getElementById('video-overlay').style.display = 'flex';
            attachTracks([track], previewContainer);
        });

        // When a Participant removes a Track, detach it from the DOM.
        room.on('trackRemoved', function(track, participant) {
            log(participant.identity + " removed track: " + track.kind);
            detachTracks([track]);
        });

        // When a Participant leaves the Room, detach its Tracks.
        room.on('participantDisconnected', function(participant) {
            log("Participant '" + participant.identity + "' left the room");
            detachParticipantTracks(participant);
        });

        // Once the LocalParticipant leaves the room, detach the Tracks
        // of all Participants, including that of the LocalParticipant.
        room.on('disconnected', function() {
            log('Left');
            if (previewTracks) {
                previewTracks.forEach(function(track) {
                    track.stop();
                });
            }
            detachParticipantTracks(room.localParticipant);
            room.participants.forEach(detachParticipantTracks);
            activeRoom = null;
            document.getElementById('button-call').style.display = 'inline';
            document.getElementById('button-call-end').style.display = 'none';
            document.getElementById('spin-wrapper').style.display = 'none';
        });
    }

    // Preview LocalParticipant's Tracks.
    document.getElementById('button-preview').onclick = function() {
        var localTracksPromise = previewTracks
            ? Promise.resolve(previewTracks)
            : Video.createLocalTracks();

        localTracksPromise.then(function(tracks) {
            window.previewTracks = previewTracks = tracks;
            var previewContainer = document.getElementById('local-media');
            if (!previewContainer.querySelector('video')) {
                attachTracks(tracks, previewContainer);
            }
        }, function(error) {
            console.error('Unable to access local media', error);
            log('Unable to access Camera and Microphone');
        });
    };

    document.getElementById('mute').onclick = function() {
        console.dir(room.localParticipant);
        room.localParticipant.audioTracks.disable();
    };

    // Activity log.
    function log(message) {
        console.dir(message);
        return false;
        var logDiv = document.getElementById('log');
        logDiv.innerHTML += '<p>&gt;&nbsp;' + message + '</p>';
        logDiv.scrollTop = logDiv.scrollHeight;
    }

    // Leave Room.
    function leaveRoomIfJoined() {
        if (activeRoom) {
            activeRoom.disconnect();
        }
    }

}]);

I hope this helps other hybrid mobile developers out there who want to integrate Twilio video with their project!