feat(mobile): replace starter template with dashboard-driven app flow

This commit is contained in:
2026-03-07 10:20:00 +00:00
parent d03b22a99f
commit 64684eaae6
34 changed files with 4645 additions and 895 deletions

View File

@@ -1,50 +1,87 @@
# Welcome to your Expo app 👋
# SecureCam Mobile (Expo)
This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
React Native mobile client for the SecureCam backend.
## Get started
## Features migrated from the Svelte web app
1. Install dependencies
- Email/password auth + account creation
- Device onboarding (`camera` or `client` role)
- Realtime socket connection status
- Client dashboard:
- Link/unlink cameras
- Rename linked cameras
- Request live stream sessions
- View frame-based live feed fallback images
- Open recordings by presigned URL
- Activity feed (motion notifications)
- Settings (diagnostics + sign out)
- Camera dashboard:
- Native camera preview (`expo-camera`)
- Frame relay over Socket.IO for stream fallback
- Motion start/end controls
```bash
npm install
```
## Prerequisites
2. Start the app
- Node.js 20+
- npm
- Expo CLI via `npx expo ...`
- Backend running on port `3000` (default)
```bash
npx expo start
```
## Environment setup
In the output, you'll find options to open the app in a
- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo
You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
## Get a fresh project
When you're ready, run:
Set the backend URL for the mobile app:
```bash
npm run reset-project
EXPO_PUBLIC_API_BASE_URL=http://<HOST>:3000
```
This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
You can place this in `MobileApp/.env`.
## Learn more
### Common values
To learn more about developing your project with Expo, look at the following resources:
- iOS simulator: `http://localhost:3000`
- Android emulator: `http://10.0.2.2:3000`
- Physical device (same Wi-Fi): `http://<your-lan-ip>:3000`
- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
Example:
## Join the community
```bash
EXPO_PUBLIC_API_BASE_URL=http://192.168.1.25:3000
```
Join our community of developers creating universal apps.
## Install and run
- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.
```bash
cd MobileApp
npm install
npm run start
```
Then open via Expo Go / simulator.
## Native module notes
This app uses `expo-camera` for native camera preview and frame capture.
If your environment is offline, dependency installation may fail. Once network is available, run:
```bash
cd MobileApp
npx expo install expo-camera socket.io-client
```
## WebRTC note
Current native mobile live viewing still uses the legacy `stream:frame` fallback path.
The backend `SIMPLE_STREAMING` flag therefore defaults to `false` for safe rollout.
For full native WebRTC publish/subscribe parity, add a supported RN WebRTC stack (for example `react-native-webrtc`) and replace frame relay with peer connection flows equivalent to the web client before enabling `SIMPLE_STREAMING` by default.
## Verification
```bash
cd MobileApp
npm run lint
npx tsc --noEmit
```