Look at the TAG for this post it includes ui and task, you can search for your posts in the search engine on top of the homepage and look for tags as well.
Hi, Thank you for the detailed brief, i have reviewed the makerstack document. I am starting the setup now beginning with the capacitor installation, i will keep all communications and progress updates centralized on this post.
looks good, make sure it uses the Camera app. Also try to find projects which are 2 years old, this one is up to 6 years which is our current issue with our software. 2 years for the core packages should be the max age.
Here’s an update on where I am with the camera app.
What I’ve done so far:
Library choice
I focused on Vue.js as agreed, and picked “vue-camera-kit”. It was published in March 2025, so it’s recent. I checked its package.json file and it only lists Vue as a required dependency, no third-party camera library at all, so there’s nothing there that could become outdated. It’s also a very small, simple component (only two exported elements), which fits the “smaller is better” direction.
Setup
Created a fresh Vue 3 project using Vite’s official project generator (npm create vite@latest, selecting the “vue” template), which automatically creates the base project files (package.json, src folder, entry files, etc.) instead of writing them by hand
Installed vue-camera-kit and its required dependency (@vueuse/core) via npm
Getting it to actually work
It didn’t work right away. The documentation’s example (README) showed importing the component as import Camera from ‘vue-camera-kit’ (a default import), but this threw a “component is missing template or render function” error in the browser console. I opened the library’s compiled file in node_modules and looked at its export line, which showed the component was under a named export called Camera, while the default export was something else. Fixing the import to import { Camera } from ‘vue-camera-kit’ (with curly braces) solved it.
What’s confirmed working
The browser asks for camera permission correctly on first load
The live camera feed shows up correctly on screen
Taking a photo works, and I can display the captured photo right after taking it
Where I’m at: I have a working Vue app where the camera opens, asks for permission, and captures photos.
Let me know your thoughts, and how you’d like me to proceed from here.
Thanks! Since the build worked could you set me up with my Git account? Once I have access I’ll push the project there and get it organized so we can review the code together whenever works for you. In the meantime, I’m starting to look into how to move forward with Capacitor.
git account is ready but you need to have proper projects to upload, this week we complete all those projects in order to upload to the git. More details soon
Update: I applied Capacitor to it for Android, same as Keypad Tiny.
What I did:
Installed Capacitor (core + CLI) in the SFX project.
Ran npx cap init : app name “SFX”, package ID : com.ccndev.sfx.
Built the Vue project and added the Android platform.
Opened it in Android Studio and ran it on the Pixel 8 emulator.
Result: the app builds and opens fine on the emulator, separate from Keypad Tiny (no conflict, different package ID). I went through the main screens (login, camera, QR scan, asset pages) and it looks and works the same as in the browser.
PS: the video will be added to the drive
Next steps:
Test on a real Android phone (not just the emulator).
Check Logcat more carefully for any hidden errors, especially camera permission and the fetch calls to Wolfram Cloud from the app.
