armackey / nativescript-twilio-video Goto Github PK

Add support for NativeScript version 6 and make it have the NS6 confirmed badge on market.nativescript.org

I am using nativscript-twilio-video 1.0.0 , below is ,my package.json
{
"description": "NativeScript Application",
"license": "SEE LICENSE IN ",
"readme": "NativeScript Application",
"repository": "",
"nativescript": {
"id": "com.preludesys.calladoc",
"tns-ios": {
"version": "3.0.0"
},
"tns-android": {
"version": "3.3.1"
}
},
"scripts": {
"tslint": "tslint -p tsconfig.json",
"ns-bundle": "ns-bundle",
"publish-ios-bundle": "npm run ns-bundle --ios --publish-app",
"generate-android-snapshot": "generate-android-snapshot --targetArchs arm,arm64,ia32 --install",
"start-android-bundle": "npm run ns-bundle --android --run-app",
"start-ios-bundle": "npm run ns-bundle --ios --run-app",
"build-android-bundle": "npm run ns-bundle --android --build-app",
"build-ios-bundle": "npm run ns-bundle --ios --build-app"
},
"dependencies": {
"@angular/animations": "~4.1.0",
"@angular/common": "~4.1.0",
"@angular/compiler": "~4.1.0",
"@angular/core": "~4.1.0",
"@angular/forms": "~4.1.0",
"@angular/http": "~4.1.0",
"@angular/platform-browser": "~4.1.0",
"@angular/router": "~4.1.0",
"nativescript-android-utils": "^1.0.2",
"nativescript-angular": "~3.0.0",
"nativescript-audio": "^4.3.1",
"nativescript-camera": "^3.0.1",
"nativescript-drop-down": "^3.1.0",
"nativescript-google-maps-sdk": "^2.3.2",
"nativescript-imagepicker": "^3.0.6",
"nativescript-loading-indicator": "^2.3.2",
"nativescript-phone": "^1.3.1",
"nativescript-photoviewer": "^1.2.0",
"nativescript-pro-ui": "^3.2.0",
"nativescript-ripple": "^2.0.0",
"nativescript-theme-core": "~1.0.2",
"nativescript-trace-raven": "^1.1.1",
"nativescript-twilio-video": "file:nativescript-twilio-video",
"nativescript-xml2js": "^0.5.2",
"ng2-trim-directive": "^2.3.2",
"reflect-metadata": "~0.1.8",
"rxjs": "~5.3.0",
"tns-core-modules": "~3.0.0",
"tns-platform-declarations": "^3.3.0",
"twilio": "^2.1.1",
"zone.js": "~0.8.2"
},
"devDependencies": {
"@angular/compiler-cli": "~4.1.0",
"@ngtools/webpack": "^1.3.0",
"babel-traverse": "^6.26.0",
"babel-types": "6.24.1",
"babylon": "6.17.1",
"clean-webpack-plugin": "~0.1.19",
"codelyzer": "^3.0.1",
"copy-webpack-plugin": "~4.0.1",
"css-loader": "^2.1.1",
"extract-text-webpack-plugin": "~2.1.0",
"filewalker": "^0.1.3",
"jasmine-core": "^2.6.2",
"karma": "^4.0.1",
"karma-jasmine": "^1.0.2",
"karma-nativescript-launcher": "^0.4.0",
"lazy": "1.0.11",
"nativescript-css-loader": "~0.26.0",
"nativescript-dev-typescript": "~0.4.0",
"nativescript-dev-webpack": "next",
"nativescript-worker-loader": "~0.8.1",
"raw-loader": "~0.5.1",
"resolve-url-loader": "~2.0.2",
"tslint": "^5.4.2",
"typescript": "~2.2.1",
"uglifyjs-webpack-plugin": "~1.1.6",
"webpack": "~2.6.1",
"webpack-bundle-analyzer": "^3.2.0",
"webpack-sources": "~1.0.1"
}
}

recent plugin version are not compatible with our application.but 1.0.0 version is not working in Samsung Galaxy s9+ and s5. the issue is in connect_to_room function. remote video is not loading. i could see only my local video. is there any solution

Hi -- we have a nativescript/angular codebase and are building specs right now for teleconferencing.

Would you have any interesting in doing hourly or per project consulting to implement the twilio blackbox for initiating, receiving and displaying peer-to-peer streams?

It seems that the nativescript-twilio-video plugin is not webpack compatible. Can you fix this?

I am trying to use this plugin to create an app to video chat.

1. node server is up and running and ngrock is pointing to the node server.
2. One page native script angular app, home component code is copied from the demo app. (demo app no longer working with tns 6.1/ng8.0
3. twilio console is showing the room connected for peer-to-peer
   (Twilio log)
   22:17:45 CST 2020-01-16 | roomRMbc17902963410b599f8fbc41ef15a80b | peer-to-peer | 26 secs | TURN
4. device 1 (emulator) Connect button click shows tns console > com.twilio.video.Room@8c590
5. device 2 (physical device) Connect button click shows tns console > com.twilio.video.Room@7805405
6. no remote video on both devices. Local video is working on both devices
   7.Disconnect button click throws an error (both devices)> ERROR TypeError: this.room.disconnect is not a function
   ERROR CONTEXT { JS: "view": { JS: "def": { JS: "nodeFlags": 403328001, JS: "rootNodeFlags": 402653185, JS: "nodeMatchedQueries": 6, JS: "flags": 0, JS: "nodes": [ JS: { JS: "nodeIndex": 0, JS: "parent": null, JS: "renderParent": null, JS: "bindingIndex": 0, JS: "outputIndex": 0, JS: "checkIndex": -1, JS: "flags": 402653184, JS: "childFlags": 0, JS: "directChildFlags": 0, JS: "childMatchedQueries": 0, JS: "ngContentIndex": -1, JS: "matchedQueries": {}, JS: "matchedQueryIds": 0, JS: "references": {}, JS: "childCount": 0, JS: "bindings": [], JS: "bindingFlags": 0, JS: "outputs": [], JS: "element": null, JS: "provider": null, JS: "text": null, JS: "query": { JS: "id": 1, JS: "filterId": 2, JS: "bindings": [ JS: { JS: "propName": "localvideo", JS: "bindingType": 0 JS: } JS: ] JS: }, JS: ...

Package.json file

{
"name": "vt",
"nativescript": {
"id": "org.nativescript.vt",
"tns-android": {
"version": "6.1.2"
}
},
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"android": "tns run android --bundle",
"ios": "tns run ios --bundle",
"mobile": "tns run --bundle",
"preview": "tns preview --bundle"
},
"private": true,
"dependencies": {
"@angular/animations": "8.0.0",
"@angular/common": "8.0.0",
"@angular/compiler": "8.0.0",
"@angular/core": "8.0.0",
"@angular/forms": "8.0.0",
"@angular/http": "8.0.0-beta.10",
"@angular/platform-browser": "8.0.0",
"@angular/platform-browser-dynamic": "8.0.0",
"@angular/router": "8.0.0",
"core-js": "^2.5.4",
"nativescript-angular": "8.0.2",
"nativescript-permissions": "^1.3.8",
"nativescript-theme-core": "~1.0.4",
"nativescript-twilio-video": "^1.1.6",
"reflect-metadata": "~0.1.12",
"rxjs": "~6.3.3",
"tns-core-modules": "6.0.1",
"zone.js": "0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.803.22",
"@angular/cli": "^7.2.0",
"@angular/compiler-cli": "8.0.0",
"@nativescript/schematics": "~0.4.0",
"@types/jasmine": "2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.2.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.0",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"nativescript-dev-webpack": "1.0.1",
"protractor": "~5.3.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1",
"typescript": "3.4.5"
}
}

Any help would be greatly appreciated. Twilio support is asking to give console log, but nothing is reporting in console log other than what is mentioned above.

i am getting the following error after run the code in my local device

i am trying with demo-ng

ERROR in node_modules/nativescript-twilio-video/ios/localVideo.ts(27,43): error TS2304: Cannot find name 'UIViewContentMode'.
node_modules/nativescript-twilio-video/ios/remoteVideo.ts(14,17): error TS2304: Cannot find name 'UIView'.
node_modules/nativescript-twilio-video/ios/remoteVideo.ts(22,44): error TS2304: Cannot find name 'UIViewContentMode'.

code is same as github code.

Users should be able to switch cameras.

How to turn off the speaker on NativeScript with Angular application for iOS? I'm using nativescript-twilio-video plugin for calls and we noticed that speaker is always turned on. Here is code example what I tried to do in order to manipulate iOS speaker, but without success:

try {
    let audioSession = AVAudioSession.sharedInstance();


    audioSession.setCategoryError(AVAudioSessionCategoryPlayAndRecord);
    audioSession.overrideOutputAudioPortError(AVAudioSessionPortOverride.None);
    audioSession.setActiveError(true);
}
catch (e) {
    console.log("log audio" + e)
}

HI,

On Web, to make Twilio work both on ios and chrome, we need to change the preferred codec option.
Could you add this this ?
Here an example for web :

connect(token, { name: 'room', preferredVideoCodecs: [ { codec: 'VP8', simulcast: true } // this._codec === 'VP8' ? { codec: 'VP8', simulcast: true } : { codec: 'H264' } ] })

Thanks and thx a lot for your plugin !

Hello,

I have a project in NS6 and I'm using your twilio plugin and everything works fine on Android but on iOS when I try to use toggle_local_video to disable the camera nothing happens, the camera is still on. When I use toggle_local_audio it works on both platforms.

Is it working on your side ?
Thanks!

Its working fine with 2 IOS devices but, I am not getting remote feed of android on IOS side. Just showing black screen on IOS.

ERROR Error: java.lang.NullPointerException: Video renderer must not be null JS: com.twilio.video.Preconditions.checkNotNull(Preconditions.java:786) JS: com.twilio.video.VideoTrack.addRenderer(VideoTrack.java:50) JS: com.twilio.video.LocalVideoTrack.addRenderer(LocalVideoTrack.java:213) JS: com.tns.Runtime.callJSMethodNative(Native Method) JS: com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1203) JS: com.tns.Runtime.callJSMethodImpl(Runtime.java:1083) JS: com.tns.Runtime.callJSMethod(Runtime.java:1070) JS: com.tns.Runtime.callJSMethod(Runtime.java:1050) JS: com.tns.Runtime.callJSMethod(Runtime.java:1042) JS: com.tns.gen.java.lang.Object_vendor_101593_32_ClickListenerImpl.onClick(Object_vendor_101593_32_ClickListenerImpl.java:18) JS: android.view.View.performClick(View.java:5647) JS: android.view.View$PerformClick.run(View.java:22465) JS: android.os.Handler.handleCallback(Handler.java:754) JS: android.os.Handler.dispatchMessage(Handler.java:95) JS: android.os.Looper.loop(Looper.java:163) JS: android.ap... JS: ERROR CONTEXT { JS: "view": { JS: "def": { JS: "nodeFlags": 402653185, JS: "rootNodeFlags": 402653185, JS: "nodeMatchedQueries": 6, JS: "flags": 0, JS: "nodes": [ JS: { JS: "nodeIndex": 0, JS: "parent": null, JS: "renderParent": null, JS: "bindingIndex": 0, JS: "outputIndex": 0, JS: "checkIndex": -1, JS: "flags": 402653184, JS: "childFlags": 0, JS: "directChildFlags": 0, JS: "childMatchedQueries": 0, JS: "ngContentIndex": -1, JS: "matchedQueries": {}, JS: "matchedQueryIds": 0, JS: "references": {}, JS: "childCount": 0, JS: "bindings": [], JS: "bindingFlags": 0, JS: "outputs": [], JS: "element": null, JS: "provider": null, JS: "text": null, JS: "query": { JS: "id": 1, JS: "filterId": 2, JS: "bindings": [ JS: { JS: "propName": "localvideo", JS: "bindingType": 0 JS: } JS: ] JS: },

and on android renderer side I am getting the error in the title

please let me know

potentially tied to this issue.

java.lang.NoSuchMethodError: No static method create()Ltvi/webrtc/EglBase; in class Ltvi/webrtc/EglBase; or its super classes (declaration of 'tvi.webrtc.EglBase' appears in /data/app/org.nativescript.twiliovideoangular-zIhD0Qvb-Bi27gA-bNKjeg==/base.apk)
System.err: at com.twilio.video.EglBaseProvider.(EglBaseProvider.java:93)
System.err: at com.twilio.video.EglBaseProvider.instance(EglBaseProvider.java:37)
System.err: at com.twilio.video.VideoView.onAttachedToWindow(VideoView.java:89)
System.err: at android.view.View.dispatchAttachedToWindow(View.java:20008)
System.err: at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3596)
System.err: at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3596)
System.err: at android.view.ViewGroup.addViewInner(ViewGroup.java:5302)
System.err: at android.view.ViewGroup.addView(ViewGroup.java:5090)
System.err: at android.view.ViewGroup.addView(ViewGroup.java:5030)
System.err: at android.view.ViewGroup.addView(ViewGroup.java:5003)
System.err: at androidx.fragment.app.FragmentManagerImpl.moveToState(FragmentManager.java:1466)
System.err: at androidx.fragment.app.FragmentManagerImpl.moveFragmentToExpectedState(FragmentManager.java:1784)
System.err: at androidx.fragment.app.FragmentManagerImpl.moveToState(FragmentManager.java:1852)
System.err: at androidx.fragment.app.BackStackRecord.executeOps(BackStackRecord.java:802)
System.err: at androidx.fragment.app.FragmentManagerImpl.executeOps(FragmentManager.java:2625)
System.err: at androidx.fragment.app.FragmentManagerImpl.executeOpsTogether(FragmentManager.java:2411)
System.err: at androidx.fragment.app.FragmentManagerImpl.removeRedundantOperationsAndExecute(FragmentManager.java:2366)
System.err: at androidx.fragment.app.FragmentManagerImpl.execPendingActions(FragmentManager.java:2273)
System.err: at androidx.fragment.app.FragmentManagerImpl$1.run(FragmentManager.java:733)
System.err: at android.os.Handler.handleCallback(Handler.java:873)
System.err: at android.os.Handler.dispatchMessage(Handler.java:99)
System.err: at android.os.Looper.loop(Looper.java:214)
System.err: at android.app.ActivityThread.main(ActivityThread.java:7073)
System.err: at java.lang.reflect.Method.invoke(Native Method)
System.err: at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
System.err: at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:964)

How do I make a button, and when user tapped on the button, it switches the camera, from rear to front camera, and vice versa.
Using NS 6 and twilio plugin version 1.1.6

I copied the same code from demo to my app, but there appear some type warnings, I cannot cloud build my project, I had to add the code after the app is built.
There are actually two type errors, one saying RemoteVideo is not export in module twilio plugin, and the other error says cannot find name AVCaptureVideo.
I use the latest twilio plugin (1.1.6), also I use NS 6.

I saw a last commit 8 months ago and a sad face as the last open issue, what is the status? Is there any other plugin out there for twilio video and nativescript integration?

Regards