Hi there, I’m parsing a blob from an API using the Capacitor Blob Writer NPM package.
I would like to hash the blob as an MD5 and compare this to the MD5 hash returned from the API to check the integrity.
There is not much guidance in this regard online or on this forum. Any help would be appreciated.
Thanks!
Greetings. I’m trying to build a simple radio streaming android application using capacitor.js, ionic-vue, and howler.js. This is just a practice project as I’m new to the above-mentioned libraries. I followed the howler.js streaming radio docs and managed to get the application to work to my satisfaction (on the browser). The problem however arises when I generate an android apk and try to run the app on a native android device or android emulator. The radio stream just doesn’t play, it loads forever. It works perfectly fine when running it on the browser using ionic serve.
I’ve tried to search for a solution but to no avail. I gathered Howler.js has this html5: true option that essentially makes use of html5 audio that allows you to stream large audio files so I wonder if that has something to do with it but I set the value to true and it works fine on the browser but it still doesn’t work when I build the app into an android apk. The app UI renders just fine, when I click the play button to stream radio, it just loads indefinitely and never starts playing.
or maybe android requires certain permissions to play audio? Please assist.
Stream Function
import { ref } from 'vue';
import {Howl} from 'howler';
let sound
const currentTrack = ref(null)
const isLoading = ref(false)
const isPlaying = ref(false)
const stations = ref([
{id : 0, title: "Gabz FM", image : "gabzfm.png", stream: "https://onlineradiobox.com/json/bw/gabz/play?platform=web", description: "Power to Engage your World The most preferred contemporary adult radio station in Botswana", playing: false, loaded:false},
{id : 1, title: "Yarona FM", image : "yaronafm.png", stream: "https://onlineradiobox.com/json/bw/yarona/play?platform=web", description: "Yarona FM is a national broadcaster based in Gaborone, Botswana. The Station’s core audience comprises of young, upwardly mobile youth within the 20-29 age bracket with spillage on either side of this age group.", playing: false, loaded:false},
{id : 2, title: "Duma FM", image : "dumafm.png", stream: "http://s3.voscast.com:10076/;", description: "Duma FM is a family radio station whose primary objective is to INFORM, EDUCATE AND EDUCATE! This allows us to bring together people from all walks of life through conversation and music.", playing: false, loaded:false}
])
const streamStation = (id) => {
isLoading.value = true
stations.value.forEach(station => {
station.playing = false
station.loaded = false
});
sound = new Howl({
src: [stations.value[id].stream],
html5: true,
onload: function() {
isLoading.value = false
stations.value[id].loaded = true
console.log('Loaded Track');
isPlaying.value = true
},
onplay: function() {
stations.value[id].playing = true
currentTrack.value = stations.value[id]
},
onpause: function() {
console.log('')
},
onend: function(){
isPlaying.value = false
}
});
sound.play();
}
const pauseStream = (id) =>{
stations.value[id].playing = false
//isPlaying.value = false
sound.pause()
}
const togglePlay = (id) =>{
if(stations.value[id].playing){
pauseStream(id)
}else{
if(sound == null){
console.log('hit block 1')
streamStation(id)
}else{
console.log('hit block 2 which means i am not null')
if(stations.value[id].loaded){
console.log('hit block 2A')
sound.play()
}else{
console.log('opening new stream')
sound.unload()
streamStation(id)
}
}
}
}
const streamRadio = () => {
return {stations, isLoading, isPlaying, streamStation, togglePlay, currentTrack}
}
export default streamRadio
Ionic-Vue Component
<template>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Radio Test App</ion-title>
</ion-toolbar>
</ion-header>
<ion-content >
<ion-slides>
<ion-slide v-for="station in stations" :key="station.id">
<ion-card class="card-main" style="border-radius:20px;padding-bottom:30px;height:20%">
<ion-card-content>
<ion-card class="radio-logo-bg" style="border-radius:20px">
<ion-card-content>
<img style="max-width:250px" :src="`/assets/stations/`+station.image"/>
</ion-card-content>
</ion-card>
<h2>{{station.title}}</h2>
<p><b style="color:black">{{station.description}}</b></p>
<br><br>
<ion-button class="radio-btn" @click="togglePlay(station.id)" :disabled="(isLoading)? true : false " style="display:block;width:30%;margin:auto">
<ion-spinner v-if="isLoading" name="bubbles"></ion-spinner>
<ion-icon v-if="station.playing" src="/assets/icon/pause.svg"></ion-icon>
<ion-icon v-else src="/assets/icon/play.svg"></ion-icon>
</ion-button>
<ion-img v-if="station.playing" src="/assets/wave2.gif"></ion-img>
</ion-card-content>
</ion-card>
</ion-slide>
</ion-slides>
</ion-content>
</ion-page>
</template>
I would convert the blob to a string (e.g. base64) and then hash it
Assuming the api provider does the same
Can you tell me what did you do exactly pls? i have the same error you had. Thanks
If you nocode tooling is able to run commands, you can use the Appflow CLI, but it’s only available on scale plans Cloud CLI - Appflow
There are also automations available that allow to do different things, such as build the app when you commit to a branch
update @capacitor/core to latest version (3.1.2 at the moment)
Which website framework is SEO friendly for developing website ??
it solved by make this line
minifyEnabled true
from build.gradle
to minifyEnabled false
My capture video or gallery video size is 100mb or above. So i want to reduce my video size by less than 50mb. How it is possible? any suggestion or code or plugin?
Thank you advanced
@rapropos i tried reinstall the java as you mention and it works by adding the environment variable accordingly thanks!!
I think I found why but could you point me to how I access/modify webpack.config.js or vue.config.js in IONIC ? Do I just create the files and they will be compiled ?
You say Ionic is just UI so that should work ?
Hello, @Mersal-Mohamed thanks for your posting.
I tried to implement the facebook login in ionic 5/capacitor 2.0 on March, and that worked at that time.
but I have migrated capacitor 2.0 into 3.0 and facebook login didn’t work as expected.
Did you implemented that in capacitor 3.0?
if so, can you share some code for facebook login?
Hello all…
I am hoping I could ask a conceptual question about an app we have been working on. We are new to ionic and apps in general. We are web-developers but Ionic has got us pretty far down the road in a short time.
So we have a small app that does SMS to landline (all the SMS stuff happens in the backend - so no need to get the the phone’s SMS capabilities). So its just send from Ionic and receive to Ionic - all through our backend
Right now, we wanted the app’s UI to mimic what a phone’s SMS screens may look like. Conversations, contacts, etc.
The “main” page is the conversation page, pick a contact or add a contact and send the message. App sends the message via API on our backend, the message is added to the message array for a visual indicator that message was sent. Think your SMS on yor phone. -This is all good.
To the into app (receive) is where our trouble is. We created a service and using @capacitor/push-notifications and got Firebase all working (backend sends to Firebase) … when the app is in background - all is good (havent got the click notification to open app yet)
My confusion is what to do when the app is open. I read some posts here that use a local-notification plugin/service to be called on the incoming push - we tried that - which actally worked quite well - except I do not know how to handle updating the screen (like bold entry or add to the messages array) - again I am trying to get this mimic texting back and forth with someone.
Since we just started this last week - we are on the latest Ionic etc. Currently we are only dealing with Android, but iOS will need to do the same. I have latest Android Studio as well etc.
Any direction, comments, etc. would be helpful.
thanks!
I am wondering if it’s safe to use history.listen inside a useEffect on an IonPage.
ex.
useEffect(() => {
return history.listen((location): void => {
if (location.pathname === '/hello') {
// do stuff
}
});
}, []);
My concern is that the returned function from listen() not being called and unregistering the listener. IonPage's (from my experience) don’t always unmount as expected and the above create multiple listeners every time this page was loaded/rendered.
What OP did will only be relevant to your situation if you’re using a Unix-like OS. If you’re using Windows, you want nvm-windows instead.
Which of the following more accurately describes your situation?
A. I have an existing video file that my app didn’t necessarily create. It’s too big.
B. My app has a feature to create videos. The videos it is capturing are too big.
Yeah I was referring to the mac
Hello @ar-daniel.
I’m having the same issue. Do you have a response yet?
Greetings.
I don’t generally disagree with @Tommertom, and I guess if the final sentence in his post is accurate, it would be supreme folly to do so this time.
That being said, I would be surprised if his final sentence were true, and therefore I would tentatively not agree with the overall suggestion.
If we have a blob already, running MD5 across it directly will always be faster than encoding it in Base64 and then MD5ing that result, for three reasons: the base64 encoding pass will take some time, there is more data than before to feed MD5, and all of that would typically require over ~2.33x the total blob size of memory.
Now, exactly how one would go about doing this will be completely dependent on which library you use to do the hashing. Last time I checked these things (I don’t use MD5 personally for anything, so no direct experience with any of this), the JKM implementation was the most performant JavaScript implementation for MD5. It is used by the js-spark-md5 library, which has some documentation in its README and test suite demonstrating how to calculate the MD5 hash incrementally, which allows you to process files of any size with constant memory requirements.
This work for me! thanks