Add VoIP example

mobile-react-native/README.md

@@ -20,3 +20,8 @@
 
 - [Video Player](./video-player/) - minimal livestreaming viewer
   - joining an existing livestream as a viewer
+
+- [VoIP Call](./voip-call/) - two-user calling app with native call UI
+  - ringing through CallKit on iOS and Telecom on Android
+  - receiving calls while the app is backgrounded or killed
+  - APNs / FCM push signaling via a small Deno server

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

@@ -21,16 +21,15 @@ A mobile video chat demo showcasing **real-time camera background blur** using t
 
 1. **Clone the repository:**
    ```sh
-   git clone https://github.com/fishjam-cloud/web-client-sdk.git
-   cd web-client-sdk
+   git clone https://github.com/fishjam-cloud/examples.git
+   cd examples/mobile-react-native/blur-example
    ```
-2. **Install dependencies and build project:**
+2. **Install dependencies:**
    ```sh
    yarn
-   yarn build
    ```
 3. **Set up environment variables:**
-   - Create a `.env` file in the `examples/mobile-client/blur-example` directory:
+   - Create a `.env` file in this directory:
      ```sh
      cp .env.example .env
      ```
@@ -41,7 +40,6 @@ A mobile video chat demo showcasing **real-time camera background blur** using t
 
 4. **Prebuild native files:**
    ```sh
-   cd examples/mobile-client/blur-example
    npx expo prebuild --clean
    ```
    > [!NOTE]
@@ -84,7 +82,7 @@ A mobile video chat demo showcasing **real-time camera background blur** using t
 
 ## License
 
-This example is provided under the Apache License 2.0. See [LICENSE](../../../LICENSE) for details.
+This example is provided under the Apache License 2.0.
 
 ---
 

mobile-react-native/fishjam-chat/README.md

@@ -2,7 +2,7 @@
 
 ## Prerequisites
 
-Copy `.env.example` to `.env` in the `examples/mobile-client/fishjam-chat` directory and fill in the required value:
+Copy `.env.example` to `.env` in this directory and fill in the required value:
 
 - `EXPO_PUBLIC_FISHJAM_ID` - Fishjam ID for production environment
 
@@ -25,15 +25,14 @@ The app has 2 tabs showing different ways to connect to Fishjam video calls:
 1. Clone the repository:
 
 ```
-git clone https://github.com/fishjam-cloud/web-client-sdk.git
-cd web-client-sdk
+git clone https://github.com/fishjam-cloud/examples.git
+cd examples/mobile-react-native/fishjam-chat
 ```
 
-2. Install dependencies and build project:
+2. Install dependencies:
 
 ```sh
 yarn
-yarn build
 ```
 
 > [!IMPORTANT]
@@ -48,10 +47,9 @@ yarn build
 > - ScreenBroadcastExtension: `com.yourcompany.yourapp.ScreenBroadcastExtension`
 > - App group: `group.com.yourcompany.yourapp`
 
-3. Prebuild native files in example directory:
+3. Prebuild native files:
 
 ```sh
-cd examples/mobile-client/fishjam-chat
 npx expo prebuild --clean
 ```
 
@@ -64,17 +62,3 @@ npx expo prebuild --clean
 yarn ios
 yarn android
 ```
-
-## Development
-
-1. Whenever you make changes in the `packages` directory, make sure to build the app in the root directory (not in `examples/mobile-client/fishjam-chat`). This ensures that all related workspaces are also built:
-
-```sh
-yarn build
-```
-
-2. Linter (run in the root directory):
-
-```sh
-yarn lint
-```

mobile-react-native/minimal-react-native/README.md

@@ -20,23 +20,21 @@ A fully functional video room demo built with [Fishjam Cloud](https://fishjam.io
 
 1. **Clone the repository:**
    ```sh
-   git clone https://github.com/fishjam-cloud/web-client-sdk.git
-   cd web-client-sdk
+   git clone https://github.com/fishjam-cloud/examples.git
+   cd examples/mobile-react-native/minimal-react-native
    ```
-2. **Install dependencies and build project:**
+2. **Install dependencies:**
    ```sh
    yarn
-   yarn build
    ```
 3. **Set up environment variables:**
-   - Create a `.env` file in the `examples/mobile-client/minimal-react-native` directory:
+   - Create a `.env` file in this directory:
      ```sh
      cp .env.example .env
      ```
    - Fill in your Fishjam ID. _You can obtain it at [https://fishjam.io/app/](https://fishjam.io/app/)._
 4. **Prebuild native files:**
    ```sh
-   cd examples/mobile-client/minimal-react-native
    npx expo prebuild --clean
    ```
    > [!NOTE]
@@ -77,7 +75,7 @@ A fully functional video room demo built with [Fishjam Cloud](https://fishjam.io
 
 ## License
 
-This example is provided under the Apache License 2.0. See [LICENSE](../../../LICENSE) for details.
+This example is provided under the Apache License 2.0.
 
 ---
 

mobile-react-native/text-chat/README.md

@@ -22,28 +22,26 @@ A React Native mobile app demonstrating real-time text messaging using [Fishjam
 1. **Clone the repository:**
 
    ```sh
-   git clone https://github.com/fishjam-cloud/web-client-sdk.git
-   cd web-client-sdk
+   git clone https://github.com/fishjam-cloud/examples.git
+   cd examples/mobile-react-native/text-chat
    ```
 
-2. **Install dependencies and build project:**
+2. **Install dependencies:**
 
    ```sh
    yarn
-   yarn build
    ```
 
 3. **Set up environment variables:**
 
-   - Create a `.env` file in the `examples/mobile-client/text-chat` directory:
+   - Create a `.env` file in this directory:
      ```sh
      cp .env.example .env
      ```
    - Fill in your Fishjam ID. _You can obtain it at [https://fishjam.io/app/](https://fishjam.io/app/)._
 
 4. **Prebuild native files:**
    ```sh
-   cd examples/mobile-client/text-chat
    npx expo prebuild --clean
    ```
    > [!NOTE]
@@ -106,22 +104,9 @@ This example demonstrates how to use Fishjam Cloud's data channel functionality
   - Check that both peers support data channels (most modern devices do)
   - Review error messages in the app's status display
 
-## Development
-
-1. Whenever you make changes in the `packages` directory, make sure to build the app in the root directory (not in `examples/mobile-client/text-chat`). This ensures that all related workspaces are also built:
-
-   ```sh
-   yarn build
-   ```
-
-2. Linter (run in the root directory):
-   ```sh
-   yarn lint
-   ```
-
 ## License
 
-This example is provided under the Apache License 2.0. See [LICENSE](../../../LICENSE) for details.
+This example is provided under the Apache License 2.0.
 
 ---
 

mobile-react-native/video-player/README.md

@@ -9,28 +9,26 @@ This example provides a minimal, working livestreaming app using Fishjam.
 1.  Clone the repository:
 
     ```bash
-    git clone https://github.com/fishjam-cloud/web-client-sdk.git
-    cd web-client-sdk
+    git clone https://github.com/fishjam-cloud/examples.git
+    cd examples/mobile-react-native/video-player
     ```
 
-2.  Install dependencies and build project:
+2.  Install dependencies:
 
     ```bash
     yarn
-    yarn build
     ```
 
-3.  Prebuild native files in example directory:
+3.  Prebuild native files:
 
     ```bash
-    cd examples/mobile-client/video-player
     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
 
-4.  **Create a `.env` file** in the `examples/mobile-client/video-player` directory.
+4.  **Create a `.env` file** in this directory.
 
 Add your fishjam ID:
 

mobile-react-native/voip-call/README.md

@@ -0,0 +1,63 @@
+# VoIP call example
+
+A two-user calling app: an Expo React Native client (`app/`) and a small Deno
+push + signaling server (`server/`). Calls ring through the native call UI
+(CallKit on iOS, Telecom on Android) even when the app is backgrounded or
+killed, and connect through a Fishjam room.
+
+How it all works (native configuration, `VoIPProvider`, and the JS call flow)
+is documented in the
+[VoIP calls guide](https://documentation.fishjam.io/docs/how-to/client/voip-calls);
+this README only covers running the example.
+
+## Running the example
+
+VoIP pushes can only be delivered through your own Apple and Firebase accounts,
+so the first step is minting push credentials. Configure APNs to call iOS
+devices, FCM to call Android devices, or both to call between them.
+
+1. **Server credentials.** Create the APNs VoIP certificate (`apns.pem`) and/or
+   the FCM service account key (`fcm-credentials.json`) as described in
+   [`server/README.md`](./server/README.md), then start the server:
+
+   ```bash
+   cd server
+   deno task start   # listens on :4400
+   ```
+
+2. **`google-services.json` (Android only).** The file is gitignored, so you
+   have to fetch your own. In the
+   [Firebase console](https://console.firebase.google.com/), open the same
+   project the server's `fcm-credentials.json` came from → _Project settings_ →
+   _Your apps_ → add an **Android** app if none exists → download
+   `google-services.json` → save it at `app/google-services.json`.
+
+   Its `package_name` must match `android.package` in `app.json` exactly
+   (`io.fishjam.example.voipcall`), or the build fails with
+   `No matching client found for package name`. Keep the file at the app root:
+   `expo prebuild` copies it into `android/` for you, and a copy placed inside
+   `android/` by hand doesn't survive `expo prebuild --clean`.
+
+3. **App environment.** Copy `app/.env.example` to `app/.env` and fill it in:
+
+   - `EXPO_PUBLIC_FISHJAM_ID`: your Fishjam app id.
+   - `EXPO_PUBLIC_SANDBOX_API_URL`: the Sandbox API url from your Fishjam
+     dashboard, used to mint peer tokens.
+   - `EXPO_PUBLIC_VOIP_SERVER_URL`: where the devices can reach the server
+     above. Not `localhost` when running on a physical phone; use your
+     machine's LAN address.
+
+4. **Run the app.** iOS needs a real device — CallKit's incoming call screen
+   doesn't work on the Simulator. Android runs on an emulator with Google Play
+   services. Install dependencies, then:
+
+   ```bash
+   cd app
+   yarn
+   yarn ios       # or: yarn android
+   ```
+
+To test it, register two users on two devices and call between them. The
+[guide's checklist](https://documentation.fishjam.io/docs/how-to/client/voip-calls#11-test-it)
+lists the paths worth checking: ringing with the app killed, Recents redial,
+and Hold & Accept.

mobile-react-native/voip-call/app/.env.example

@@ -0,0 +1,3 @@
+EXPO_PUBLIC_FISHJAM_ID=
+EXPO_PUBLIC_SANDBOX_API_URL=
+EXPO_PUBLIC_VOIP_SERVER_URL=http://localhost:4400

mobile-react-native/voip-call/app/.eslintrc.js

@@ -0,0 +1,16 @@
+module.exports = {
+  root: true,
+  extends: ['expo'],
+  ignorePatterns: [
+    'dist/*',
+    'node_modules/*',
+    'ios/*',
+    'android/*',
+    'server/*',
+    '.eslintrc.js',
+    'prettier.config.js',
+  ],
+  rules: {
+    'import/no-unresolved': 'off',
+  },
+};

mobile-react-native/voip-call/app/.gitignore

@@ -0,0 +1,24 @@
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+expo-env.d.ts
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+
+# typescript
+*.tsbuildinfo
+
+# generated native folders
+/ios
+/android
+
+google-services.json