I’m trying to import the Twilio plugin into an ionic project but I did not get it


#1

Hi I’m trying to import the Twilio plugin into an ionic 2 project but I did not get it, could you help me?


Using ionic with a twilio plugin
#2

Post your code and the error.


#3

First download the plugin for both platforms:
Ionic cordova plugin add https://github.com/jefflinwood/twilio_client_phonegap.git

Then try importing the plugin like this:

_

Import Twilio from ‘Twilio’

_

But it does not work

Then try importing it like this:

Import * as Twilio from ‘twilio-client-phonegap-plugin / www / tcPlugin’

This did not show me an error, so create a function:


Call () {
     Var tokenRequest = new XMLHttpRequest ();
     TokenRequest.onload = function () {
         Twilio.Device.setup (tokenRequest.responseText, {debug: true});
         Var connection = null;
     };

     TokenRequest.open ('GET', 'http://www.lomastravel.com.mx/lomasangel/TokenTestTwilio');
     TokenRequest.send ();
 }

I run it on a mobile phone, then I call the function ‘call’ and it shows me this error:
ERROR TypeError: Cannot read property ‘setup’ of undefined

Thanks for the help.


#4

I’m stunned that even compiled. Var isn’t proper syntax.


#5

I did not write Var in capital letters in my original code, maybe when I wrote here I put this in mayus.


#6

On the original thread that this one split from, I linked you to the 1 site you need.

Don’t import 3rd parties. Work from Twilio’s codebase.


#7

Here is it once more.

You can copy and paste the code to make your entire project work. You will not need to change a thing. Quite literally, copy and paste.


#8

@ryanlogsdon can you tell more about how you can work with twilio? I spend two days of painful search. Read tons of docs and can’t make app work at all.

I’m using js example as base. It works like a charm in browser. But on android devices (4.2.2 and 6.0.1 real devices with crosswalk plugin) not work at all. Even preview my camera not work

import * as Video from 'twilio-video';

public showPreview(): Promise<any> { // Preview LocalParticipant's Tracks.
        let localTracksPromise = this.previewTracks ? Promise.resolve(this.previewTracks)
            : Video.createLocalTracks();

        return localTracksPromise
            .then((tracks: any): void => {
                (<any> window).previewTracks = this.previewTracks = tracks;
                let previewContainer = document.getElementById('local-media');

                if (!previewContainer.querySelector('video')) {
                    this._attachTracks(tracks, previewContainer);
                    this._log('ADD');
                }
                this._log('WORK');
            }                )
            .catch((error: any): void => {
                console.error('Unable to access local media', error);
                this._log('--Unable to access Camera and Microphone----');
                this._log(JSON.stringify(error));
            });
    }

private _attachTracks(tracks: any, container: any): void { // Attach the Tracks to the DOM.
        tracks.forEach((track: any) => {
            container.appendChild(track.attach());
        });
    }

When I launch developer server for browser with this code - it work’s (I can see myself in video tag on page). But when I deploy app to device and click to preview my camera - nothing happens (no ui change and no errors in console).

Did I missed something?


#9

Hi @snikh,

Sorry, my code is meant for the browser only. I haven’t tried deploying natively, so I wouldn’t be able to help there.


#10

@snikh did you manage to find a fix? I know when twilio was first announced it did not have mobile support. I haven’t found a way to import it into my typescript.

I tried declare var Twilio: any, worked well on my browser, but crashes the app when run from an android device.


#11

I already regret three times that I started working on this project.

For android I use js example. And also you need this android permissions

    public setAndroidPermissions(): Promise<void> {
        // https://stackoverflow.com/questions/45342869/ionic2-uncaught-in-promise-referenceerror-cordova-is-not-defined
        if (this.platform.is('cordova')) { // maybe not work and we should return try/catch
            let permList = [ // tslint:disable-line
                this._cordovaService.getPermission('CAMERA'),
                this._cordovaService.getPermission('MICROPHONE'),
                this._cordovaService.getPermission('MODIFY_AUDIO_SETTINGS'),
                this._cordovaService.getPermission('RECORD_AUDIO'),
                this._cordovaService.getPermission('CAPTURE_VIDEO_OUTPUT'),
                this._cordovaService.getPermission('CAPTURE_SECURE_VIDEO_OUTPUT'),
                this._cordovaService.getPermission('CAPTURE_AUDIO_OUTPUT')
            ];
            return this._cordovaService.requestPermissions(permList)
                .then(() => console.log('permissions granted.'), () => alert('bad permissions'));
        }

        console.log('Running app in browser. All cordova methods are unavailable');
        return Promise.resolve();
    }
        <config-file parent="/*" target="AndroidManifest.xml">
            <uses-permission android:name="android.permission.CAMERA" />
            <uses-permission android:name="android.permission.MICROPHONE" />
            <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
            <uses-permission android:name="android.permission.RECORD_AUDIO" />
            <uses-permission android:name="android.permission.CAPTURE_VIDEO_OUTPUT" />
            <uses-permission android:name="android.permission.CAPTURE_SECURE_VIDEO_OUTPUT" />
            <uses-permission android:name="android.permission.CAPTURE_AUDIO_OUTPUT" />
        </config-file>

On IOS all works only with native IOS twilio SDK.


#12

Hi @snikh, I’ve got it working on Android, version 4.0 upwards using Twilio and Ionic 3. This saved my life:

Have a look at the issues, you may have problems building it, but have a look at my comment for the fix:


#13

Thanks, but this plugin does not suit me. We have custom call view and logic. And all already works. But it takes too much time and pain. And even now there are minor unresolved issues.