diff --git a/mobile-react-native/blur-example/README.md b/mobile-react-native/blur-example/README.md index 7ffb212..371ff0f 100644 --- a/mobile-react-native/blur-example/README.md +++ b/mobile-react-native/blur-example/README.md @@ -21,27 +21,27 @@ 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 ``` -2. **Install dependencies and build project:** +2. **Install dependencies in the example directory:** ```sh + cd mobile-react-native/blur-example 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 the `mobile-react-native/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._ + - Fill in your Sandbox API URL (`EXPO_PUBLIC_SANDBOX_API_URL`). _Copy it from the sandbox dashboard at [https://fishjam.io/app/sandbox](https://fishjam.io/app/sandbox)._ 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] diff --git a/mobile-react-native/fishjam-chat/README.md b/mobile-react-native/fishjam-chat/README.md index 2a0ffbf..89607c5 100644 --- a/mobile-react-native/fishjam-chat/README.md +++ b/mobile-react-native/fishjam-chat/README.md @@ -2,11 +2,12 @@ ## 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 the `mobile-react-native/fishjam-chat` directory and fill in the required values: - `EXPO_PUBLIC_FISHJAM_ID` - Fishjam ID for production environment +- `EXPO_PUBLIC_SANDBOX_API_URL` - Sandbox API URL used to generate peer tokens -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. +You can find the values for these variables by creating an account on [fishjam.io](https://fishjam.io) and copying them from the sandbox dashboard at [https://fishjam.io/app/sandbox](https://fishjam.io/app/sandbox). There also exists this additional environment variable, which is used for internal testing purposes: @@ -25,15 +26,15 @@ 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 ``` -2. Install dependencies and build project: +2. Install dependencies in the example directory: ```sh +cd mobile-react-native/fishjam-chat yarn -yarn build ``` > [!IMPORTANT] @@ -48,10 +49,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 ``` @@ -67,13 +67,7 @@ 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): +Linter: ```sh yarn lint diff --git a/mobile-react-native/minimal-react-native/README.md b/mobile-react-native/minimal-react-native/README.md index 2373cdc..437fbc4 100644 --- a/mobile-react-native/minimal-react-native/README.md +++ b/mobile-react-native/minimal-react-native/README.md @@ -20,23 +20,23 @@ 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 ``` -2. **Install dependencies and build project:** +2. **Install dependencies in the example directory:** ```sh + cd mobile-react-native/minimal-react-native 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 the `mobile-react-native/minimal-react-native` directory: ```sh cp .env.example .env ``` - Fill in your Fishjam ID. _You can obtain it at [https://fishjam.io/app/](https://fishjam.io/app/)._ + - Fill in your Sandbox API URL (`EXPO_PUBLIC_SANDBOX_API_URL`). _Copy it from the sandbox dashboard at [https://fishjam.io/app/sandbox](https://fishjam.io/app/sandbox)._ 4. **Prebuild native files:** ```sh - cd examples/mobile-client/minimal-react-native npx expo prebuild --clean ``` > [!NOTE] diff --git a/mobile-react-native/text-chat/README.md b/mobile-react-native/text-chat/README.md index 7460386..9982273 100644 --- a/mobile-react-native/text-chat/README.md +++ b/mobile-react-native/text-chat/README.md @@ -22,28 +22,28 @@ 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 ``` -2. **Install dependencies and build project:** +2. **Install dependencies in the example directory:** ```sh + cd mobile-react-native/text-chat 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 the `mobile-react-native/text-chat` directory: ```sh cp .env.example .env ``` - Fill in your Fishjam ID. _You can obtain it at [https://fishjam.io/app/](https://fishjam.io/app/)._ + - Fill in your Sandbox API URL (`EXPO_PUBLIC_SANDBOX_API_URL`). _Copy it from the sandbox dashboard at [https://fishjam.io/app/sandbox](https://fishjam.io/app/sandbox)._ 4. **Prebuild native files:** ```sh - cd examples/mobile-client/text-chat npx expo prebuild --clean ``` > [!NOTE] @@ -108,16 +108,11 @@ This example demonstrates how to use Fishjam Cloud's data channel functionality ## 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: +Linter: - ```sh - yarn build - ``` - -2. Linter (run in the root directory): - ```sh - yarn lint - ``` +```sh +yarn lint +``` ## License diff --git a/mobile-react-native/video-player/README.md b/mobile-react-native/video-player/README.md index df016f1..3bbbbbe 100644 --- a/mobile-react-native/video-player/README.md +++ b/mobile-react-native/video-player/README.md @@ -9,33 +9,33 @@ 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 ``` -2. Install dependencies and build project: +2. Install dependencies in the example directory: ```bash + cd mobile-react-native/video-player 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 the `mobile-react-native/video-player` directory. -Add your fishjam ID: +Add your fishjam ID and Sandbox API URL (copy both from the sandbox dashboard at [https://fishjam.io/app/sandbox](https://fishjam.io/app/sandbox)): ```bash EXPO_PUBLIC_FISHJAM_ID= +EXPO_PUBLIC_SANDBOX_API_URL= ``` 5. Build app: diff --git a/moq-demo/README.md b/moq-demo/README.md index fbe8f71..b43d50f 100644 --- a/moq-demo/README.md +++ b/moq-demo/README.md @@ -18,9 +18,10 @@ yarn dev 3. Open the URL printed by Vite (e.g. `http://localhost:5173`). -4. Provide the **Sandbox API URL** (the relay connection URL, including the Fishjam ID, is returned by the sandbox): +4. Provide the **Sandbox API URL** (the relay connection URL, including the Fishjam ID, is returned by the sandbox) — copy it from the sandbox dashboard at [https://fishjam.io/app/sandbox](https://fishjam.io/app/sandbox): - - Pass it as a query parameter: `http://localhost:5173?sandboxApiUrl=https://fishjam.io/api/v1/connect//room-manager` + - Copy it into a `.env` file: `VITE_SANDBOX_API_URL=https://fishjam.io/api/v1/connect//room-manager` + - Or pass it as a query parameter: `http://localhost:5173?sandboxApiUrl=https://fishjam.io/api/v1/connect//room-manager` - Or enter it in the UI at runtime. 5. Enter a stream name and click **Start Streaming** to publish, or **Connect to Stream** to watch. diff --git a/web-react/audio-only/README.md b/web-react/audio-only/README.md index c8ce974..b766f32 100644 --- a/web-react/audio-only/README.md +++ b/web-react/audio-only/README.md @@ -1,3 +1,7 @@ # Audio-only room example This template provides a minimal setup to implement audio-only rooms using Fishjam. + +Copy `.env.example` to `.env` and fill in the values; copy the Sandbox API URL (`VITE_SANDBOX_API_URL`) from the sandbox dashboard at [https://fishjam.io/app/sandbox](https://fishjam.io/app/sandbox). + +Install dependencies with `yarn`, run with `yarn dev`. diff --git a/web-react/fishjam-chat/README.md b/web-react/fishjam-chat/README.md index 79270cf..6509675 100644 --- a/web-react/fishjam-chat/README.md +++ b/web-react/fishjam-chat/README.md @@ -2,4 +2,6 @@ This is an example app demonstrating how to build a simple conferencing react app using Fishjam. +Copy `.env.example` to `.env` and fill in the values; copy the Sandbox API URL (`VITE_SANDBOX_API_URL`) from the sandbox dashboard at [https://fishjam.io/app/sandbox](https://fishjam.io/app/sandbox). + Install dependencies with `yarn`, run with `yarn dev`. diff --git a/web-react/livestreaming/README.md b/web-react/livestreaming/README.md index dfdac71..dd6df61 100644 --- a/web-react/livestreaming/README.md +++ b/web-react/livestreaming/README.md @@ -15,13 +15,21 @@ This is a demo application that showcases both broadcasting and viewing live str yarn install ``` -2. Start the development server: +2. Set up environment variables: + + ```bash + cp .env.example .env + ``` + + Fill in the values; copy the Sandbox API URL (`VITE_SANDBOX_API_URL`) from the sandbox dashboard at [https://fishjam.io/app/sandbox](https://fishjam.io/app/sandbox). + +3. Start the development server: ```bash yarn dev ``` -3. Open your browser and navigate to the URL shown in the terminal (usually `http://localhost:5173`) +4. Open your browser and navigate to the URL shown in the terminal (usually `http://localhost:5173`) ## How to Use diff --git a/web-react/text-chat/README.md b/web-react/text-chat/README.md new file mode 100644 index 0000000..8697969 --- /dev/null +++ b/web-react/text-chat/README.md @@ -0,0 +1,7 @@ +# Text Chat + +This is an example app demonstrating real-time text messaging between peers using Fishjam data channels. + +Copy `.env.example` to `.env` and fill in the values; copy the Sandbox API URL (`VITE_SANDBOX_API_URL`) from the sandbox dashboard at [https://fishjam.io/app/sandbox](https://fishjam.io/app/sandbox). + +Install dependencies with `yarn`, run with `yarn dev`.