I am trying to create an app using ionic 4 that basically just streams an audio source from a remote server. Everything is working but I am still getting a black screen although I use bgImage in StreamAudioOptions. My bg image is located in src/assets/bg.png
I have tried the following references to the image:
/assets/bg.png
assets/bg.png
./assets/bg.png
../../assets/bg.png
Here is my code:
import { StreamingMedia, StreamingAudioOptions } from '#ionic-native/streaming-media/ngx/';
playAudio() {
this.platform.ready().then(() => {
if (this.platform.is("cordova"))
{
let options : StreamingAudioOptions = {
bgImage: "/assets/bg.png",
bgColor: "#fff",
bgImageScale: "stretch",
successCallback: () =>
{
console.log("Successfully played audio");
},
errorCallback: (e) =>
{
console.log(e);
}
};
this.streaming.playAudio(this.mp3.url, options);
}
else
{
console.log("Must be on a mobile device to play!");
}
});
}
Any help is appreciated. Thanks!
I fixed it by putting the ref as "www/assets/bg.png";
import { StreamingMedia, StreamingAudioOptions } from '#ionic-native/streaming-media/ngx/';
playAudio() {
this.platform.ready().then(() => {
if (this.platform.is("cordova"))
{
let options : StreamingAudioOptions = {
bgImage: "www/assets/bg.png",
bgImageScale: "stretch",
successCallback: () =>
{
console.log("Successfully played audio");
},
errorCallback: (e) =>
{
console.log(e);
}
};
this.streaming.playAudio(this.mp3.url, options);
}
else
{
console.log("Must be on a mobile device to play!");
}
});
}
Related
useEffect(() => {
try {
const voiceover = parseOrGet(item.scenes[selectedIndex].voiceover);
voiceover["title"]="test"
voiceover["artist"]="test"
voiceover["id"]="2"
voiceover["artwork"]="https://url_to_artwork.jpg"
delete voiceover.metadata
delete voiceover.name
delete voiceover.type
console.log(voiceover)
if (voiceover) {
TrackPlayer.add(voiceover);
TrackPlayer.play();
setSelectedTrack(voiceover);
}else{
TrackPlayer.destroy();
}
} catch (error) {
console.log('my initial error', error);
}
}, [selectedIndex]);
here i am adding trackplayer voice over but i can not listen voiceover music it is not workinhg
this is the my voice over object
{"artist": "test", "artwork": "https://url_to_artwork.jpg", "id": 1, "title": "test", "url": "https://d3bm2z03a5d1kp.cloudfront.net/hindi-narration/1.mp3"}
let mw know where i am doing wrong
Try to change from
if (voiceover) {
TrackPlayer.add(voiceover);
TrackPlayer.play();
setSelectedTrack(voiceover);
} else {
TrackPlayer.destroy();
}
to
if (voiceover) {
await TrackPlayer.add(voiceover);
await TrackPlayer.play();
setSelectedTrack(voiceover);
} else {
await TrackPlayer.destroy();
}
And define your function as useEffect(async () => ....)
i'm working on app witch i need to send multiple images,
and i wonder if there is any way to send multiple images via file transfer plugin,
this my code:
const options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.FILE_URI,
sourceType: this.camera.PictureSourceType.PHOTOLIBRARY
}
this.camera.getPicture(options).then((imageData2) => {
this.imageURI2 = imageData2;
}, (err) => {
console.log(err);
});
upload
const fileTransfer: FileTransferObject = this.transfer.create();
let options: FileUploadOptions = {
fileKey: 'file',
fileName: 'name.jpg',
headers: {
Connection: "close"
}
}
options.chunkedMode = false;
if(this.imageURI1 != null){
fileTransfer.upload(this.imageURI1,
'https://test.test.com/uplaodphoto.php', options)
.then((data) => {
alert("success");
this.imageFileName1 =
"https://test.test.com/images/name.jpg"
}, (err) => {
alert("error"+JSON.stringify(err));
});
User Image Picker Plugin Cordova Image Picker
Usage:
import { ImagePicker } from '#ionic-native/image-picker';
constructor(private imagePicker: ImagePicker) { }
export class YourPage {
pickImages(){
this.imagePicker.getPictures(options).then((results) => {
for (var i = 0; i < results.length; i++) {
console.log('Image URI: ' + results[i]);
this.imageUpload(results[i])
}
}, (err) => { });
}
// Upload Image function.
imageUpload(path) {
const fileTransfer: FileTransferObject = this.transfer.create();
let options: FileUploadOptions = {
fileKey: 'image',
fileName: '.png',
chunkedMode: false,
//mimeType: "image/jpeg",
}
fileTransfer.upload(path, 'https://api.com/image-upload', options)
.then((data) => {
console.log(data+" Uploaded Successfully");
let res = JSON.parse(data.response);
if (res.success == true) {
}
this.loader.dismiss();
}, (err) => {
console.log(err);
});
}
}
Im using navigation control in ionic provider whenever i triggered the provider it shows the runtime error Cannot read property 'pop' of null
my code is
#Injectable()
export class ServerResponseProvider {
#ViewChild('myContent') navCtrl: NavController;
constructor(public http: Http, public alertCtrl: AlertController,
protected injector: Injector, private app:App) {
console.log('Hello ServerResponseProvider Provider');
}
httpGetRes(url) {
return Observable.create(observer => {
this.http.get(url)
.map(res => res.json())
.subscribe(data => {
console.log("response:", data);
observer.next(data);
}, (err) => {
console.log("Your error : ", err);
observer.error(err);
if (err.status == 400) {
this.alertC('Validation Error');
} else if (err.status == 403) {
this.alertC('Authorization error')
} else if (err.status == 500) {
this.alertC('Something went wrong try again later')
}
});
});
}
alertC(msg) {
let alert = this.alertCtrl.create({
title: ' OOPS !!!!',
subTitle: msg,
buttons: [{
text: 'ok',
handler: () => {
this.navCtrl.pop();
}
}]
});
alert.present(alert);
}
}
i tried in many ways it wont works
thanks in advance
When i use alertCtrl like this data is going to db it's working well.
addTodo(){
let prompt = this.alertCtrl.create({
title: 'add',
message: 'add',
inputs: [
{
name: 'title'
},
{
name: 'kan'
},
{
name: 'geos'
},
{
name: 'geod'
},
{
name: 'sahip'
}
],
buttons: [
{
text: 'İptal'
},
{
text: 'Kaydet',
handler: todo => {
if(todo){
this.showLoader();
this.todoService.createTodo(todo).then((result) => {
this.loading.dismiss();
this.todos = result;
console.log("todo created");
}, (err) => {
this.loading.dismiss();
console.log("not allowed");
});
}
}
}
]
});
prompt.present();
}
But when i try to use modal , showloader is running but createtodo is not working , no data is going to db .
addTodo(){
let modal = this.modalCtrl.create(KaneklePage);
modal.onDidDismiss(todo => {
if(todo){
this.showLoader();
this.todoService.createTodo(todo).then((result) => {
this.loading.dismiss();
this.todos = result;
console.log("todo created");
}, (err) => {
this.loading.dismiss();
console.log("not allowed");
});
}
});
modal.present();
}
This is dismiss code in modalpage
save(): void {
let todo = {
title: this.title,
kan: this.kan,
geos: this.geos,
geod: this.geod,
sahip: this.sahip
};
this.viewCtrl.dismiss(todo);
}
i'm trying to do login to my app with facebook,
i installed the cordova facebook plugin
and this my code but i get error on Promise
this is my code(actually i just copied it from tutorial that say it works for him)
import { Component } from '#angular/core';
import { NavController,Platform } from 'ionic-angular';
import {Http, Headers, RequestOptions} from '#angular/http';
import 'rxjs/add/operator/map';
declare const facebookConnectPlugin: any;
#Component({
templateUrl: 'build/pages/home/home.html',
})
export class HomePage {
posts:any;
constructor(public platform: Platform, private navCtrl: NavController,private http: Http)
{ this.platform = platform;
this.http = http;
}
fblogin()
{
this.platform.ready().then(() => {
this.fblogin1().then(success => {
console.log("facebook data===" + success);
alert("facebook data===" + success);
this.http.post('http://localhost/facebook.php',success)
.map( res =>res.json()).subscribe(data => {
if(data.msg=="fail")
{
console.log('Login failed');
alert("Invalid username and password");
return;
}
else
{
console.log(' login Sucessfully facebook');
}
});
}, (error) => {
alert(error);
});
});
}
fblogin1(): Promise<any>
{
return new Promise(function(resolve,reject)
{
facebookConnectPlugin.login(["email"], function(response)
{
alert(JSON.stringify(response.authResponse));
facebookConnectPlugin.api('/' + response.authResponse.userID + '?fields=id,name,email,gender',[],
function onSuccess(result)
{
//alert(JSON.stringify(result));
//console.log(JSON.stringify(result));
resolve(JSON.stringify(result));
},
function onError(error)
{
alert(error);
}
);
},
function(error)
{
alert(error);
})
});
}
}
if anyone know another way i would like to know.
i solve this issue by changing the login function to this code
facebookLogin(){
Facebook.login(['email']).then( (response) => {
let facebookCredential = firebase.auth.FacebookAuthProvider
.credential(response.authResponse.accessToken);
var that = this;
firebase.auth().signInWithCredential(facebookCredential)
.then((success) => {
that.userProfile = JSON.stringify(success);
that.nav.setRoot(HomePage);// after login go to HomePage
})
.catch((error) => {
console.log("Firebase failure: " + JSON.stringify(error));
});
}).catch((error) => { console.log(error) });
}