feat(mobile): replace starter template with dashboard-driven app flow
This commit is contained in:
@@ -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
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user