Migrate examples from web-client-sdk repo (#61)

* Migrate examples from web-client-sdk repo

* Add .env to gitignore

* Fix issues pointed out by copilot

* Reorganize examples

* Use newest react-native-client package

* Fixed issues that were present in monorepo

* Run eslint + prettier

Author: Magmusacy

.gitignore

@@ -1 +1,6 @@
 .aider*
+node_modules
+dist
+build
+.env
+.vscode

mobile-react-native/README.md

@@ -0,0 +1,22 @@
+# Examples for Fishjam client
+
+- [Minimal React Native](./minimal-react-native/) - minimal example
+  - joining a video room with a custom room name and user name
+  - real-time video grid with local and remote participants
+  - almost no UI
+
+- [Fishjam Chat](./fishjam-chat/) - example video chat app
+  - connecting to VideoRoom by entering a room name and username
+  - streaming camera, microphone and screen sharing
+  - joining and creating livestreams
+
+- [Background Blur](./blur-example/) - example of applying background blur
+  - toggling camera background blur on/off during a video call
+  - using a camera track middleware
+
+- [Text Chat](./text-chat/) - example text messaging app
+  - real-time text messaging between participants
+  - using WebRTC data channels
+
+- [Video Player](./video-player/) - minimal livestreaming viewer
+  - joining an existing livestream as a viewer

mobile-react-native/blur-example/.env.example

@@ -0,0 +1,2 @@
+EXPO_PUBLIC_FISHJAM_ID=
+EXPO_PUBLIC_FISHJAM_URL=

mobile-react-native/blur-example/.gitignore

@@ -0,0 +1,39 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+android/*
+ios/*
+.env
+.cursor/

mobile-react-native/blur-example/App.tsx

@@ -0,0 +1,20 @@
+import { FishjamProvider } from '@fishjam-cloud/react-native-client';
+import { NavigationContainer } from '@react-navigation/native';
+import * as React from 'react';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+
+import RootNavigation from './navigation/RootNavigation';
+
+const App = () => {
+  return (
+    <FishjamProvider fishjamId={process.env.EXPO_PUBLIC_FISHJAM_ID}>
+      <SafeAreaProvider>
+        <NavigationContainer>
+          <RootNavigation />
+        </NavigationContainer>
+      </SafeAreaProvider>
+    </FishjamProvider>
+  );
+};
+
+export default App;

mobile-react-native/blur-example/README.md

@@ -0,0 +1,91 @@
+# Background Blur Example
+
+A mobile video chat demo showcasing **real-time camera background blur** using the [`@fishjam-cloud/react-native-webrtc-background-blur`](https://www.npmjs.com/package/@fishjam-cloud/react-native-webrtc-background-blur) package. Built with [Fishjam Cloud](https://fishjam.io/), [Expo](https://expo.dev/), and [React Native](https://reactnative.dev/).
+
+## Features
+
+- **Background blur toggle** — blur your camera background on/off during a video call using a camera track middleware
+- Join a video room with a custom room name and user name
+- Real-time video grid with local and remote participants
+- Automatic camera and microphone permission handling
+
+## Getting Started
+
+### Prerequisites
+
+- [Node.js](https://nodejs.org/) (v18 or newer recommended)
+- [Yarn](https://yarnpkg.com/) or [npm](https://www.npmjs.com/)
+- [Expo](https://docs.expo.dev/get-started/installation/): You do **not** need to install Expo CLI globally. Use `npx expo` to run Expo commands.
+
+### Installation
+
+1. **Clone the repository:**
+   ```sh
+   git clone https://github.com/fishjam-cloud/web-client-sdk.git
+   cd web-client-sdk
+   ```
+2. **Install dependencies and build project:**
+   ```sh
+   yarn
+   yarn build
+   ```
+3. **Set up environment variables:**
+   - Create a `.env` file in the `examples/mobile-client/blur-example` directory:
+     ```sh
+     cp .env.example .env
+     ```
+   - Fill in your Fishjam ID. _You can find the value for this variable by creating an account on [fishjam.io](https://fishjam.io) and copying it from the sandbox dashboard._
+
+   There also exists this additional environment variable, which is used for internal testing purposes:
+   - `EXPO_PUBLIC_FISHJAM_URL` - Sandbox URL for custom Fishjam environment
+
+4. **Prebuild native files:**
+   ```sh
+   cd examples/mobile-client/blur-example
+   npx expo prebuild --clean
+   ```
+   > [!NOTE]
+   > Be sure to run `npx expo prebuild` and not `yarn prebuild` as there's an issue with path generation for the `ios/.xcode.env.local` file
+
+### Running the App
+
+- **Run on Android:**
+  ```sh
+  yarn android
+  ```
+- **Run on iOS:**
+  ```sh
+  yarn ios
+  ```
+
+## Usage
+
+1. Enter a room name and your user name on the Home screen.
+2. Tap **Connect** to join the video room.
+3. See yourself and other participants in a responsive video grid.
+4. Tap **Enable Blur** to apply background blur to your camera feed, or **Disable Blur** to turn it off.
+5. Leaving the room or closing the app will disconnect you from the session.
+
+## Architecture Overview
+
+- **React Native + Expo**: Cross-platform mobile app framework.
+- **Fishjam Cloud SDK**: Handles all real-time video, audio, and peer management.
+- **`@fishjam-cloud/react-native-webrtc-background-blur`**: Provides a `useBackgroundBlur` hook that returns a camera track middleware. The middleware is applied via `setCameraTrackMiddleware` from the Fishjam `useCamera()` hook.
+- **TypeScript**: Provides type safety and better developer experience.
+
+## Troubleshooting & FAQ
+
+- **App fails to connect to a room:**
+  - Ensure your `.env` file is present and `EXPO_PUBLIC_FISHJAM_ID` is set correctly.
+  - Check your network connection.
+  - Review logs in the Metro/Expo console for errors.
+- **Camera or microphone not working:**
+  - Make sure you have granted the necessary permissions on your device.
+
+## License
+
+This example is provided under the Apache License 2.0. See [LICENSE](../../../LICENSE) for details.
+
+---
+
+_This project is maintained by the Fishjam team. For questions or support, visit [fishjam.io](https://fishjam.io/) or open an issue on GitHub._

mobile-react-native/blur-example/app.json

@@ -0,0 +1,44 @@
+{
+  "expo": {
+    "name": "blur-example",
+    "slug": "blur-example",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "newArchEnabled": true,
+    "splash": {
+      "image": "./assets/splash-icon.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "io.fishjam.mobile.example.blurexample",
+      "infoPlist": {
+        "NSCameraUsageDescription": "Allow $(PRODUCT_NAME) to access your camera.",
+        "NSMicrophoneUsageDescription": "Allow $(PRODUCT_NAME) to access your microphone."
+      },
+      "appleTeamId": "J5FM626PE2"
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      },
+      "edgeToEdgeEnabled": true,
+      "package": "io.fishjam.mobile.example.blurexample",
+      "permissions": [
+        "android.permission.CAMERA",
+        "android.permission.RECORD_AUDIO",
+        "android.permission.MODIFY_AUDIO_SETTINGS",
+        "android.permission.ACCESS_NETWORK_STATE",
+        "android.permission.ACCESS_WIFI_STATE"
+      ]
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    },
+    "plugins": [["@fishjam-cloud/react-native-client"]]
+  }
+}