I'm trying to use the "streaming-media" component to add to my Ionic application the ability to view live video.
I tried to use the example given on the component documentation, without success
let options: StreamingVideoOptions = {
successCallback: () => { console.log('Video played') },
errorCallback: (e) => { console.log('Error streaming') },
orientation: 'landscape',
shouldAutoClose: true,
controls: false
};
this.streamingMedia.playVideo('https://www.youtube.com/watch?v=xC2s4HAWoXA', options);
I'm supposed to get the playback of the youtube video, but the video doesn't start.
this.streamingMedia.playVideo('https://www.youtube.com/watch?v=xC2s4HAWoXA', options);
In here, you should use directly .mp4 etc file, instead of youtube video url.
For instance;
this.streamingMedia.playVideo('https://sample-videos.com/video123/mp4/480/big_buck_bunny_480p_10mb.mp4', options);
Additionally, you should add ;
import {StreamingMedia,StreamingAudioOptions} from "#ionic-native/streaming-media/ngx";
to your page's .ts file and add StreamingMedia to app.module.ts 's providers section. Like that ;
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
StreamingMedia
]
Related
I’m trying to find a way to open the settings/preferences app with capacitor but I’m unsuccessful.
App.canOpenUrl({ url: 'com.apple.Preferences' }) is failing with error message -canOpenURL: failed for URL: "com.apple.Preferences" - error: "Invalid input URL"
I’m not sure if I’m doing it wrong or if it’s even possible with capacitor to open native app…?
this article shows how to open the facebook app, but nothing about native app
There's now a capacitor plugin for this, capacitor native settings.
It's similar to the cordova plugin but you have to call the correct function for each platform (iOS or Android) instead of using a single function for both.
for someone with the same problem
Install:
cordova-open-native-settings
$ npm install cordova-open-native-settings
$ npm install #ionic-native/open-native-settings
$ ionic cap sync
app.module.ts
// ...
import { OpenNativeSettings } from '#ionic-native/open-native-settings/ngx';
#NgModule({
declarations: [
// ...
],
entryComponents: [
// ...
],
imports: [
// ...
],
providers: [
// ...
OpenNativeSettings,
],
bootstrap: [AppComponent]
})
export class AppModule {}
whatever.page.ts
// ...
import { OpenNativeSettings } from '#ionic-native/open-native-settings/ngx';
#Component({
selector: 'app-whatever',
templateUrl: './whatever.page.html',
styleUrls: ['./whatever.page.scss'],
})
export class PopoverComponent implements OnInit {
constructor(
// ...
private nativeSettings: OpenNativeSettings
) { }
phoneSettings() {
this.nativeSettings
.open('settings')
.then( res => {
console.log(res);
})
.catch( err => {
console.log(err);
})
}
}
I am using the Iconic 4 framework and I'm trying to use the FirebaseUIAuth feature within my application but I am facing an issue when the user signs in.
Issue: When the user logs in, the sign in buttons disappear for the web & ios rendering of the application on my localhost (this is good), but I am having issues with the Android rendering. After logging in, the login/sign in buttons remain visible in the android rendering (not good...womp womp).
I have tried changing the signInFlow parameter to 'redirect' but the extent of my knowledge with the Ionic Framework has me a bit stumped since I am confused on how to get the login buttons redirect the user to a new view.
[app.module.ts file with firebaseUI config only]
const firebaseUiAuthConfig: firebaseui.auth.Config = {
signInFlow: 'popup', /*tried using 'redirect' to fix android rendering*/
signInOptions: [
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
{
scopes: [
'public_profile',
'email',
'user_likes',
'user_friends'
],
customParameters: {
'auth_type': 'reauthenticate'
},
provider: firebase.auth.FacebookAuthProvider.PROVIDER_ID
},
{
requireDisplayName: true,
provider: firebase.auth.EmailAuthProvider.PROVIDER_ID
}
],
tosUrl: '/terms',
privacyPolicyUrl: '/privacy',
credentialHelper: firebaseui.auth.CredentialHelper.NONE
};
[home.page.html file with firebaseui tag]
<ion-content padding>
<firebase-ui></firebase-ui>
<h1 *ngIf="afAuth.auth.currentUser">Welcome {{afAuth.auth.currentUser.displayName}}!</h1>
<ion-button *ngIf="afAuth.auth.currentUser" (click)="signOut();">Sign Out</ion-button>
</ion-content>
[home.page.ts file with signout method]
import { Component } from '#angular/core';
import { AngularFireAuth } from '#angular/fire/auth';
#Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
constructor(public afAuth: AngularFireAuth,) {
}
signOut() {
this.afAuth.auth.signOut().then(() => {
location.reload();
});
}
}
I expected that the android rendering will only display:
Welcome some user!
But it also displays the sign in buttons that are configured with the firebaseui (google, facebook, email)
app.module.ts:
imports: [
IonicModule.forRoot(MyApp, {}, {
links: [
{ component: CategoryPage, name: 'Category', segment: 'category:id'}
]
}
],
providers: [
{
provide: LocationStrategy,
useClass: PathLocationStrategy
}
]
Configuration of the page I am navigating too
#IonicPage({
name: 'Category',
segment: 'category/:id'
})
Code which triggers navigation:
this.nav.push(CategoryPage, {id: 3});
The component does load as expected and I can call this.navParams.get('id') which yields 3 from within the components class.
Expected result: The url changes to /category:3
Observed result: The url changes to /category:id
so if you are trying to implement deep links for Ionic 3 (since Ionic 4 is using Angular's router by default now) you need to ensure you also configure each page accordingly.
The page you are navigating to needs to have configs added via #IonicPage:
#IonicPage({
segment: 'second/:id'
})
See more in ionic docs or this guide
I've added ionic cloud services to my app and want to use the native FaceBook authentication.
import { FacebookAuth } from '#ionic/cloud-angular';
this.facebookAuth.login()
When running this function on an Android phone, as expected I get the Facebook prompt to ask if my app can get permissions to read profile and email. When I click YES, the function returns an empty ERROR object:
Object {}
I'm sure I am catching it right, because when I choose CANCEL on the FB prompt, I get this error object:
Object {errorCode: "4201", errorMessage: "User cancelled dialog"}
Note: I'm using remote web inspector in chrome to see the full console. Unfortunately, as this requires a real device I can not Plunker this. However, I hope someone has an idea why this could happen. I have followed all these steps, including the FB developer settings, the hash and the ionic.io settings.
I have done that and it's working fine on the real device.If you have any question, please comment below.
Play with Git Repo
app.module.ts
import { CloudSettings, CloudModule } from '#ionic/cloud-angular';
const cloudSettings: CloudSettings = {
'core': {
'app_id': 'd32c02d2'
},
'auth': {
'facebook': {
'scope': ['public_profile', 'email']
}
}
};
#NgModule({
declarations: [
],
imports: [
CloudModule.forRoot(cloudSettings)
],
bootstrap: [IonicApp],
entryComponents: [
],
providers: [
]
})
export class AppModule { }
home.html
<button ion-button block type="button" (click)="fbLogin()">Fb Login</button>
home.ts
import { Component } from '#angular/core';
import { FacebookAuth, User } from '#ionic/cloud-angular';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public facebookAuth: FacebookAuth, public user: User) {
}
fbLogin() {
this.facebookAuth.login();
}
}
Ok it's quite silly, but the first root cause was that the FB user I was trying to log in with was not registered as a tester. Apparently in that case, an empty error is returned by the plugin.
After adding as a tester, I received a real error (Andoird manifest dod not allow internet access). After fixing that issue, again I'm getting an empty error.
So my assumption is that some of the errors returned by FB are not well communicated by the plugin and so any other FB error can be causing this issue.
UPDATE 23/04: There seems to be a change from FB side, now the FB login screen did not succeed but gave an error about the hashing key. After fixing that issue, the FB login is working now.
I have a ionic project which starts a user-intro page. I'll go to Main page after click start button.
app.js:
angular.module('app', ['ionic',
'app.intro'
])
app/intro/intro.js:
angular.module('app.intro',['app.intro.controller'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('intro', {
url: '/',
templateUrl: 'app/intro/index.html',
controller: 'IntroCtrl'
})
.state('main', {
url: '/main',
templateUrl: 'app/main/index.html'
});
$urlRouterProvider.otherwise('/');
});
IntroCtrl (app/intro/controller.js):
angular.module('app.intro.controller',[])
.controller('IntroCtrl',function($scope,$state,$ionicSlideBoxDelegate) {
$scope.startMain = function() {
$state.go('main');
};
});
But if the user is not logged-in I want to show login page instead.What should I do? Sorry, I'm new to ionic and angular. Thanks
What about the default state's controller simply using $state.go to one state if you are logged in and another if you are not?