Cordova-plugin-iosrtc: Capacitor and React: Need help getting twilio client working

[ashish-mw]

Please read first!

Please use Public Google Group (mailing list) for general technical discussions and questions.

• [x] I have used Google with the error message or bug in association with the library and Cordova words to make sure the issue I'm reporting is only related to iOSRTC.
• [ ] I have provided steps to reproduce (e.g. sample code or updated extra/renderer-and-libwebrtc-tests.js file).
• [ ] I have provided third party library name and version, ios, Xcode and plugin version and adapter.js version if used.

Note: If the checkboxes above are not checked (which you do after the issue is posted), the issue will be closed, removing this checkbox will result in automatic closed issue.

Versions affected

• Cordova version (e.g 7.1.0):
• Plugin version (e.g 6.0.12): 6.0.12
• iOS version (e.g 10.2):
• Xcode version (e.g 11.1 - 11A1027): 11.5
• WebRTC-adapter version (e.g. 7.4.0):
• WebRTC Framework version (e.g. JSSip 3.1.2):

Description

• I'm currently building a project that uses twilio voice calls.
• I'm using ionic with react + capacitor.
• I added the twilio-client package and in my component's useEffect() hook, I can setup a Device() and perform calls.
• In both android and the browser, performing voice calls, works as expected.
• For IOS, the emulator run fails.
• I tired following the steps in Building, and got it to successfully build.
• But when running on the emulator, it throws

⚡️  Error: twilio.js 1.3+ SDKs require WebRTC/ORTC browser support.         For more information, see <https://www.twilio.com/docs/api/client/twilio-js>.         If you have any questions about this announcement, please contact         Twilio Support at <[email protected]>.
⚡️  URL: capacitor://localhost/static/js/10.5d4ae028.chunk.js
⚡️  10.5d4ae028.chunk.js:2:546494

⚡️  See above for help with debugging blank-screen issues
2020-07-30 11:36:44.331772+0530 App[9437:125988]  HALC_ProxySystem::GetObjectInfo: got an error from the server, Error: 560947818 (!obj)
2020-07-30 11:36:44.331910+0530 App[9437:125988]  HALC_ShellObject::HasProperty: there is no proxy object
2020-07-30 11:36:44.332014+0530 App[9437:125988] AudioSessionSimulatorClientManager.cpp:83:SimulatorUpdateHALForPrimaySession_Priv: Failed to set processVolumeScalar on device. Error: 2003332927

Code

import { Device } from "twilio-client";

...

 useEffect(() => {
    if (state.capabilityToken) {
      const ldevice = new Device(state.capabilityToken);
    }
  }, [])

Could someone help me with getting this working please?

[hthetiot]

Failed to set processVolumeScalar on device. Error: 2003332927

It's most likely an issue with the emulator, can you confirm iOS version target.

Possibly Related: https://github.com/cordova-rtc/cordova-plugin-iosrtc/blob/master/src/PluginEnumerateDevices.swift#L53

• https://stackoverflow.com/questions/46075637/type-of-an-output-device-headphones-etc

[hthetiot]

Required missing information @ashish-mw
"Cordova version (e.g 7.1.0):"
"iOS version (e.g 10.2):"

[ashish-mw]

Thanks for replying so quickly @hthetiot
I'm not running cordova.
"Capacitor": 2.2.0
"iOS version": 13.5

The webRTC APIs that twilio-client needs should be there for it, when we add in the plugin. But the logs say, they aren't there.

[hthetiot]

The webRTC APIs that twilio-client needs should be there for it, when we add in the plugin. But the logs say, they aren't there.

I'm pretty sure if the WebRTC API is not exposed it's because you did not call cordova.plugins.iosrtc.registerGlobals() as instructed in the README and sample, see documentation:

• https://github.com/cordova-rtc/cordova-plugin-iosrtc/blob/master/docs/iosrtc.md#iosrtcregisterglobals

[ashish-mw]

These are the contents of my src folder

$ ls src
./                  contexts/           react-app-env.d.ts  setupTests.ts
../                 hooks/              reducers/           theme/
App.test.tsx        index.tsx           router/
App.tsx             models/             serviceWorker.ts
components/         pages/              services/

How would I call cordova.plugins.iosrtc.registerGlobals(), since I don't have cordova in the global scope? I'm assuming this needs to be done on index.tsx. Is that the way?

[hthetiot]

@ashish-mw I'm not here to explain to you how to use cordova plugin into an application Capacitor or React.
It look like you did not even took the time to look how the plugin works and follow the required steps to use it.
That why I have to close this issue because the real issue is between the keyboard and the chair, not on iosRTC.

Here some example from previous issues:

• https://github.com/cordova-rtc/cordova-plugin-iosrtc/issues/497#issuecomment-638843391

If you properly initialize cordova, you will have a cordova global that you can use it, notice that you can only use cordova global when onDeviceReady is trigger also.

var cordova = (window as any).cordova;
// Expose WebRTC Globals
if (cordova && cordova.plugins && cordova.plugins.iosrtc) {
  cordova.plugins.iosrtc.registerGlobals();
  //cordova.plugins.iosrtc.debug.disable('*', true);
  //cordova.plugins.iosrtc.debug.enable('*', true);
  cordova.plugins.iosrtc.initAudioDevices();
  cordova.plugins.iosrtc.turnOnSpeaker(true);
  cordova.plugins.iosrtc.requestPermission(true, true, function (result) {
    console.log('requestPermission.result', result);
  });
}

[hthetiot]

I have provided steps to reproduce (e.g. sample code or updated extra/renderer-and-libwebrtc-tests.js file).

This issue is closed because the reporter did not read the documentation to use corova plugins in Capacitor or iosRTC and did not provide a FULL steps to reproduce the issue.

[ashish-mw]

For anyone coming from google searches,

At the top of your main.tsx file or in the context file from which you're going to initialise the twilio Device(), add

...
import { Device } from "twilio-client";
...
declare var window: any;

This should be just after your imports. Typescript will complain, when we do a window.cordova, otherwise.

Now, in the component's useEffect(), call the registerGlobals() method.

useEffect(() => {
    if (window.cordova) {
      console.log("--- Cordova found in window");
      const cordova = window.cordova;
      if (cordova && cordova.plugins && cordova.plugins.iosrtc) {
        console.log("--- Injecting iosrtc");
        cordova.plugins.iosrtc.registerGlobals();
      }
    }
}, []);

And that should be it.

For building in a capacitor project, follow as mentioned in the Build document file. However, for me I had to change Objective-C Bridging Header setting in Build Settings to this.

../capacitor-cordova-ios-plugins/sources/CordovaPluginIosrtc/cordova-plugin-iosrtc-Bridging-Header.h

Thank you for your time and guidance @hthetiot 👍
Issue #497 was the key.

[hthetiot]

Thank you @ashish-mw for your understanding and adding your solution, We may improve the documentation in the future, but we cannot be in charge of explaining how to use cordova plugin this is required skills to use the plug-in Capacitor or not.

[hthetiot]

@ashish-mw notice that there is know issue with Twillio that we working to address in the coming days see details here #541

The fix should be released with 6.0.13

[ashish-mw]

Perfectly understandable @hthetiot
Cheers!