Skip to main content
Version: Next

Installation

Optional: Create a New App​

Follow these steps to create a new mobile app

If you don't have an existing project, you can create a new Expo app using a template

npx create-expo-app@latest my-video-app

As the next step, you have to generate native files with the expo prebuild command:

npx expo prebuild

You can also follow more detailed Expo instructions.

Step 1: Install the Package​

Install @fishjam-cloud/react-native-client with your preferred package manager.

npm install @fishjam-cloud/react-native-client

Step 2: Configure App Permissions​

Your app needs to have permissions configured in order to use the microphone and camera.

Android​

Permissions below are required to stream audio and video with Fishjam on Android.

  • android.permission.CAMERA
  • android.permission.RECORD_AUDIO
  • android.permission.MODIFY_AUDIO_SETTINGS

Add required permissions to the app.json file.

{
  "expo": {
    ...
    "android": {
      ...
      "permissions": [
        "android.permission.CAMERA",
        "android.permission.RECORD_AUDIO",
        "android.permission.MODIFY_AUDIO_SETTINGS"
      ]
    }
  }
}

iOS​

You don't have to make any changes to run app on iOS. To update default content of permission alert, you can add these settings to app.json:

{
  "expo": {
    ...
   "ios": {
      ...
      "infoPlist": {
        "NSCameraUsageDescription": "Allow $(PRODUCT_NAME) to access your camera.",
        "NSMicrophoneUsageDescription": "Allow $(PRODUCT_NAME) to access your microphone."
      }
    },
  }
}

Optional: Request Camera and Microphone Permissions​

info

You don’t need to explicitly request permissions as they’re automatically asked for when your app needs them.

If you want more control, you can use the useCameraPermissions and useMicrophonePermissions hooks to manage permissions manually. Both hooks return an array with three elements:

  1. permission: The current permission status
  2. requestPermission: A function to request permission
  3. getPermission: A function to get the current permission status

Here's an example of how to use both hooks:

import {
  useCameraPermissions,
  useMicrophonePermissions,
} from "@fishjam-cloud/react-native-client";
import { useEffect } from "react";

const [cameraPermission, requestCameraPermission, getCameraPermission] =
  useCameraPermissions();

const [
  microphonePermission,
  requestMicrophonePermission,
  getMicrophonePermission,
] = useMicrophonePermissions();

useEffect(() => {
  requestCameraPermission();
  requestMicrophonePermission();
}, []);

Permission Response

The permission object has the following properties:

  • canAskAgain: Indicates if the user can be asked again for this permission. If false, it is recommended to direct the user to Settings app to enable/disable the permission.
  • expires: When the permission expires.
  • granted: Indicates if the permission is granted.
  • status: The current status of the permission.
info

You can control when and how permissions are requested by passing an options object to the hook.

Customizing Permission Request Behavior​

By default, get is called automatically (auto fetch is true), and request is not (auto request is false). You can change this behavior:

import { useCameraPermissions } from "@fishjam-cloud/react-native-client";
// Do not auto-fetch permission status, enable auto-request
const [permission, requestPermission] = useCameraPermissions({
  get: false, // disables auto-fetch
  request: true, // enables auto-request
});

Adjust these options to fit your app's needs.