Error in OauthCordova when test in device - ionic-framework

I did an authentication using OauthCordova to enter Instagram. When I use the application in Ionic DevApp, authentication works. But when I try to run the application on the device (using ionic cordova run android --device) I get an error.
The function:
toLogin(event) {
this.oauth.logInVia(this.instagram).then((success) => {
this.localStorageProvider.setAccessToken(success);
this.isLogged();
}, (error) => {
this.toast.create(
{
message: 'Erro ao efetuar login. Tente novamente.',
position: 'botton',
duration: 5000
}).present();
console.log(JSON.stringify(error, Object.getOwnPropertyNames(error)));
console.log((error));
});;
}
Output:
console.log: {"stack":"Error: The Apache Cordova InAppBrowser plugin was not found and is required\n at
ensureEnvIsValid (http://192.168.1.7:8100/build/vendor.js:134774:15)\n at
http://192.168.1.7:8100/build/vendor.js:134792:17\n at new t
(http://192.168.1.7:8100/build/polyfills.js:3:20886)\n at OauthCordova.openDialog
(http://192.168.1.7:8100/build/vendor.js:134790:16)\n at OauthCordova.Oauth.logInVia
(http://192.168.1.7:8100/build/vendor.js:82756:21)\n at LoginPage.webpackJsonp.107.LoginPage.toLogin
(http://192.168.1.7:8100/build/main.js:104:20)\n at Object.eval [as handleEvent]
(ng:///LoginPageModule/LoginPage.ngfactory.js:23:31)\n at handleEvent
(http://192.168.1.7:8100/build/vendor.js:12380:138)\n at callWithDebugContext
(http://192.168.1.7:8100/build/vendor.js:13850:42)\n at Object.debugHandleEvent [as handleEvent]
(http://192.168.1.7:8100/build/vendor.js:13438:12)","message":"The Apache Cordova InAppBrowser plugin was
not found and is required","__zone_symbol__currentTask":{}}
console.log:
{"__zone_symbol__currentTask":{"type":"microTask","state":"notScheduled","source":"Promise.then","zone":"angular","cancelFn":null,"runCount":0}}

Related

Cant show QRScanner camera view in ionic

I have been facing certain difficulties with the qrcode camera for some time. I have a login page and I want that when the user clicks on the read button qr the ion-content of the login page becomes transparent and a close reading button appears in the footer however I did not succeed. Follow attempts:
My method Structure
lerQR() {
this.qrScanner.prepare()
.then((status: QRScannerStatus) => {
if (status.authorized) {
this.leuQR.next(1);
document.getElementsByTagName("ion-content")[0].style.opacity = "0";
this.qrScanner.show();
this.qrScan = this.qrScanner.scan().subscribe((text: string) => {
console.log('Scanned something', text);
});
} else if (status.denied) {
this.qrScanner.openSettings()
} else {
// permission was denied, but not permanently. You can ask for permission again at a later time.
}
})
.catch((e: any) => console.log('Error is', e));
}
Attempt 1:
Run qrScanner.show command and then hide ion-content with getelement;I can read qr code but I can't see camera:
this.qrScanner.show();
document.getElementsByTagName("ion-content")[0].style.opacity = "0";
Attempt 2:
Hiding ion-content from the login page with get element and then calling qrscanner.show() command;I can read qr code but I can't see camera:
document.getElementsByTagName("ion-content")[0].style.opacity = "0";
this.qrScanner.show();
Attempt 3:
Removing two layers of ion-content (Remembering that I only have the login page) and then giving the qrscanner.show()
document.getElementsByTagName("ion-content")[0].style.opacity = "0";
document.getElementsByTagName("ion-content")[1].style.opacity = "0";
this.qrScanner.show();
In this attempt I can see the camera but I cannot read the qr code, receiving the following error:
Error is TypeError: Cannot read properties of undefined (reading 'style')
at api.service.ts:683:60
at ZoneDelegate.invoke (zone-evergreen.js:364:1)
at Object.onInvoke (core.js:27558:1)
at ZoneDelegate.invoke (zone-evergreen.js:363:1)
at Zone.run (zone-evergreen.js:123:1)
at zone-evergreen.js:857:1
at ZoneDelegate.invokeTask (zone-evergreen.js:399:1)
at Object.onInvokeTask (core.js:27546:1)
at ZoneDelegate.invokeTask (zone-evergreen.js:398:1)
at Zone.runTask (zone-evergreen.js:167:1)
How can I display the camera and read the qrcode hiding the ion-content since I have a stop reading button in the footer?
Enviroment settings:
Ionic:
Ionic CLI : 6.20.4 (C:\Users\micro-85\AppData\Roaming\npm\node_modules\#ionic\cli)
Ionic Framework : #ionic/angular 5.9.4
#angular-devkit/build-angular : 0.1000.8
#angular-devkit/schematics : 10.0.8
#angular/cli : 10.0.8
#ionic/angular-toolkit : 2.3.3
Cordova:
Cordova CLI : 11.0.0
Cordova Platforms : android 10.1.2
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 20 other plugins)
Utility:
cordova-res : 0.15.4
native-run : 1.7.1
System:
Android SDK Tools : 26.1.1 (C:\Users\micro-85\AppData\Local\Android\Sdk)
NodeJS : v16.17.1 (C:\Program Files\nodejs\node.exe)
npm : 9.1.2
OS : Windows 10
What plugin are you using? There are several of them. For the cordova-plugin-qrscanner
They have methods to show/hide:
QRScanner.show(function(status){
console.log(status);
});
QRScanner.hide(function(status){
console.log(status);
});

OpenTok Ionic 3 - publisher.cycleVideo function not found

I am using the ionic opentok plugin from this repo,
https://github.com/opentok/cordova-plugin-opentok
I have, of course, followed the https://github.com/opentok/opentok-cordova-samples projects and built an app. However, I am struggling with switching the camera in an ongoing video session.
My code is simple, a button on the screen,
<div class="controls-btn-inner-icon" (click)="toggleCamera()">
<ion-icon ios="md-camera" md="md-camera"></ion-icon>
</div>
and the method,
toggleCamera() {
this.publisher.cycleVideo();
}
It gives me the error, on the Debug console,
TypeError: this.publisher.cycleVideo is not a function
[[StableObjectId]]:3
message:"this.publisher.cycleVideo is not a function"
ngDebugContext:DebugContext_ {view: Object, nodeIndex: 106, nodeDef: Object, …}
ngErrorLogger:function () { … }
stack:"TypeError: this.publisher.cycleVideo is not a function\n at
VideoSessionPage.webpackJsonp.92.VideoSessionPage.toggleCamera (http://localhost:8080/build/main.js:936:24)\n at Object.eval [as handleEvent] (ng:///AppModule/VideoSessionPage.ngfactory.js:247:31)\n at handleEvent (http://localhost:8080/build/vendor.js:14275:155)\n at callWithDebugContext (http://localhost:8080/build/vendor.js:15784:42)\n at Object.debugHandleEvent [as handleEvent] (http://localhost:8080/build/vendor.js:15371:12)\n at dispatchEvent (http://localhost:8080/build/vendor.js:10690:25)\n at http://localhost:8080/build/vendor.js:11315:38\n at HTMLDivElement.<anonymous> (http://localhost:8080/build/vendor.js:40626:53)\n at t.invokeTask (http://localhost:8080/build/polyfills.js:3:15660)\n at Object.onInvokeTask (http://localhost:8080/build/vendor.js:5437:33)"
__proto__:Error {constructor: , name: "TypeError", message: "", …}
`
Any help will be greatly appreciated.
TokBox Developer Evangelist here.
The cycleVideo method is only available using the OpenTok JS SDK. To toggle the camera when using the Cordova OpenTok Plugin, please use the following method:
publisher.setCameraPosition('front'); or publisher.setCameraPosition('back');
Using the plugin, you can also initialize the Publisher object with either the front or the back camera using the cameraName property as part of the properties argument for the initPublisher method like so:
const publisherProperties = {
cameraName: 'front',
};
const publisher = OT.initPublisher(publisherProperties);

cordova-plugin-crosswalk-webview and I'm getting navigator.getUserMedia is not a function

I am developing an ionic WebRTC app using cordova-plugin-crosswalk-webview and I'm getting navigator.getUserMedia is not a function when running on the android device any idea why?
navigator.getUserMedia({audio: true, video: true},
function(stream){
let vid = document.getElementById('my-video');
if(vid)
{
vid.setAttribute("src", URL.createObjectURL(stream));
} else {
alert("err geting div");
}
//this.localStream = stream;
}, function(){ alert("err");}
);
<video id="my-video" muted="true" autoplay="" src=""></video>
i solved my problem by reinstalling cordova-plugin-crosswalk-webview plugin

Ionic native Transfer plugin's `file.dataDirectory` shows error

I'm going to use the Ionic native Transfer plugin as shown below.
Problem is here this.file.dataDirectory.It shows error like [ts] Property 'dataDirectory' does not exist on type 'File'..Can you tell me what is the solution for this?
download() {
const fileTransfer: TransferObject = this.transfer.create();
const url = 'http://www.example.com/file.pdf';
fileTransfer.download(url, this.file.dataDirectory + 'file.pdf').then((entry) => {
console.log('download complete: ' + entry.toURL());
}, (error) => {
// handle error
});
}
Oh.. My bad :(
I have to install File plugin too :D
$ ionic cordova plugin add cordova-plugin-file --save
$ npm install --save #ionic-native/file

cant login with ionic (cannot authenticate via a web browser)

I am trying to test my code with
.controller('AppCtrl', function ($scope, $ionicModal, $cordovaOauth, $localStorage, $location) {
$scope.login = function() {
$cordovaOauth.facebook("APPID", ["email", "read_stream", "user_website", "user_location", "user_relationships"]).then(function(result) {
$localStorage.accessToken = result.access_token;
alert("facebook login correctly");
$location.path("/profile");
}, function(error) {
alert(error);
console.log(error);
});
};
But all the time getting error:
cannot authenticate via a web browser
I am using ionic and cordovaOauth, when I am trying to test the app with android I don't get any response.The question is how can I debug it really with simulator or something easily like PhoneGap app, I tried to work with phone gap but can't know how can I debug it.
I've met the same problem and I have found this : https://github.com/nraboy/ng-cordova-oauth/issues/46
Basically, you should test your code in an emulator not in a browser.