@fishjam-cloud/react-native-client 0.1.0

package/src/common/webRTC.ts

@@ -0,0 +1,31 @@
+import { TrackEncoding } from '../types';
+import RNFishjamClientModule from '../RNFishjamClientModule';
+
+export type LoggingSeverity = 'verbose' | 'info' | 'warning' | 'error' | 'none';
+
+/**
+ * sets track encoding that server should send to the client library.
+ * The encoding will be sent whenever it is available. If chooses encoding is
+ * temporarily unavailable, some other encoding will be sent until choose encoding
+ *  becomes active again.
+ *
+ * @param trackId id of a track which encoding you want to select
+ * @param encoding encoding to select
+ */
+export async function setTargetTrackEncoding(
+  trackId: string,
+  encoding: TrackEncoding,
+) {
+  await RNFishjamClientModule.setTargetTrackEncoding(trackId, encoding);
+}
+
+/**
+ * Function that changes level of debugging logs in WebRTC.
+ * @param severity to use when displaying logs
+ * @returns a promise that is resolved when debug severity is changed
+ */
+export function changeWebRTCLoggingSeverity(
+  severity: LoggingSeverity,
+): Promise<void> {
+  return RNFishjamClientModule.changeWebRTCLoggingSeverity(severity);
+}

package/src/components/VideoPreviewView.tsx

@@ -0,0 +1,33 @@
+import { requireNativeViewManager } from 'expo-modules-core';
+import * as React from 'react';
+import { ViewStyle } from 'react-native';
+
+import { VideoLayout } from '../types';
+import { CaptureDeviceId } from '../hooks/useCamera';
+
+export type VideoPreviewViewProps = {
+  /**
+   * `FILL` or `FIT` - it works just like RN Image component. `FILL` fills the whole view
+   * with video and it may cut some parts of the video. `FIT` scales the video so the whole
+   * video is visible, but it may leave some empty space in the view.
+   * @default `FILL`
+   */
+  videoLayout?: VideoLayout;
+  style?: ViewStyle;
+  /**
+   * Id of the camera used for preview. Get available cameras with `getCaptureDevices()` function.
+   * @default the first front camera
+   */
+  captureDeviceId?: CaptureDeviceId;
+};
+
+const NativeView: React.ComponentType<VideoPreviewViewProps> =
+  requireNativeViewManager('VideoPreviewViewModule');
+
+export const VideoPreviewView = React.forwardRef<
+  React.ComponentType<VideoPreviewViewProps>,
+  VideoPreviewViewProps
+>((props, ref) => (
+  // @ts-expect-error ref prop needs to be updated
+  <NativeView {...props} ref={ref} />
+));

package/src/components/VideoRendererView.tsx

@@ -0,0 +1,31 @@
+import { requireNativeViewManager } from 'expo-modules-core';
+import * as React from 'react';
+import { ViewStyle } from 'react-native';
+
+import { VideoLayout } from '../types';
+
+export type VideoRendererProps = {
+  /**
+   * id of the video track which you want to render.
+   */
+  trackId: string;
+  /**
+   * `FILL` or `FIT` - it works just like RN Image component. `FILL` fills the whole view
+   * with video and it may cut some parts of the video. `FIT` scales the video so the whole
+   * video is visible, but it may leave some empty space in the view.
+   * @default `FILL`
+   */
+  videoLayout?: VideoLayout;
+  style?: ViewStyle;
+};
+
+const NativeView: React.ComponentType<VideoRendererProps> =
+  requireNativeViewManager('VideoRendererViewModule');
+
+export const VideoRendererView = React.forwardRef<
+  React.ComponentType<VideoRendererProps>,
+  VideoRendererProps
+>((props, ref) => (
+  // @ts-expect-error ref prop needs to be updated
+  <NativeView {...props} ref={ref} />
+));

package/src/hooks/useAudioSettings.ts

@@ -0,0 +1,115 @@
+import { useCallback, useEffect, useState } from 'react';
+import { Platform } from 'react-native';
+
+import RNFishjamClientModule from '../RNFishjamClientModule';
+import { ReceivableEvents, eventEmitter } from '../common/eventEmitter';
+
+export type AudioOutputDeviceType =
+  | 'bluetooth'
+  | 'headset'
+  | 'speaker'
+  | 'earpiece';
+
+export type AudioSessionMode = 'voiceChat' | 'videoChat';
+
+export type AudioOutputDevice = {
+  type: AudioOutputDeviceType;
+  name: string;
+};
+
+type OnAudioDeviceEvent = {
+  AudioDeviceUpdate: {
+    selectedDevice: AudioOutputDevice;
+    availableDevices: AudioOutputDevice[];
+  };
+};
+
+/**
+ * This hook manages audio settings.
+ */
+export function useAudioSettings() {
+  const [selectedAudioOutputDevice, setSelectedAudioOutputDevice] =
+    useState<AudioOutputDevice | null>(null);
+  const [availableDevices, setAvailableDevices] = useState<AudioOutputDevice[]>(
+    [],
+  );
+
+  const onAudioDevice = useCallback((event: OnAudioDeviceEvent) => {
+    setSelectedAudioOutputDevice(event.AudioDeviceUpdate.selectedDevice);
+    setAvailableDevices(event.AudioDeviceUpdate.availableDevices);
+  }, []);
+
+  useEffect(() => {
+    const eventListener = eventEmitter.addListener(
+      ReceivableEvents.AudioDeviceUpdate,
+      onAudioDevice,
+    );
+    RNFishjamClientModule.startAudioSwitcher();
+    return () => {
+      eventListener.remove();
+      if (Platform.OS === 'android') {
+        RNFishjamClientModule.stopAudioSwitcher();
+      }
+    };
+  }, [onAudioDevice]);
+
+  /**
+   * [Android only] selects output audio device.
+   * For detecting and selecting bluettoth devices make sure you have the BLUETOOTH_CONNECT permission.
+   */
+  const selectOutputAudioDevice = useCallback(
+    async (device: AudioOutputDeviceType) => {
+      if (Platform.OS === 'ios') {
+        throw Error(
+          'selectOutputAudioDevice function is supported only on Android. ' +
+            'To select an output audio device on iOS use selectAudioSessionMode or showAudioRoutePicker functions',
+        );
+      }
+      await RNFishjamClientModule.setOutputAudioDevice(device);
+    },
+    [],
+  );
+
+  /**
+   * [iOS only] selects audio session mode. For more information refer to Apple's documentation:
+   *  https://developer.apple.com/documentation/avfaudio/avaudiosession/mode/
+   *
+   */
+  const selectAudioSessionMode = useCallback(
+    async (audioSessionMode: AudioSessionMode) => {
+      if (Platform.OS === 'android') {
+        throw Error('selectAudioSessionMode function is supported only on iOS');
+      }
+      await RNFishjamClientModule.selectAudioSessionMode(audioSessionMode);
+    },
+    [],
+  );
+
+  /**
+   * [iOS only] Shows a picker modal that allows user to select output audio device. For more
+   * information refer to Apple's documentation: https://developer.apple.com/documentation/avkit/avroutepickerview
+   */
+  const showAudioRoutePicker = useCallback(async () => {
+    if (Platform.OS === 'android') {
+      throw Error(
+        'showAudioRoutePicker function is supported only on iOS. ' +
+          'To select an output audio device on Android use selectOutputAudioDevice function',
+      );
+    }
+    await RNFishjamClientModule.showAudioRoutePicker();
+  }, []);
+
+  return {
+    /**
+     * currently selected output audio device
+     */
+    selectedAudioOutputDevice,
+    /**
+     * [Android only] available audio output devices to be set
+     */
+    availableDevices,
+    selectOutputAudioDevice,
+    selectAudioSessionMode,
+    showAudioRoutePicker,
+  };
+}

package/src/hooks/useBandwidthEstimation.ts

@@ -0,0 +1,24 @@
+import { useEffect, useState } from 'react';
+
+import { ReceivableEvents, eventEmitter } from '../common/eventEmitter';
+
+export type BandwidthEstimationEvent = { BandwidthEstimation: number };
+
+/**
+ * This hook provides current bandwidth estimation
+ * estimation - client's available incoming bitrate estimated
+ * by the server. It's measured in bits per second.
+ */
+export function useBandwidthEstimation() {
+  const [estimation, setEstimation] = useState<number | null>(null);
+
+  useEffect(() => {
+    const eventListener = eventEmitter.addListener<BandwidthEstimationEvent>(
+      ReceivableEvents.BandwidthEstimation,
+      (event) => setEstimation(event.BandwidthEstimation),
+    );
+    return () => eventListener.remove();
+  }, []);
+
+  return { estimation };
+}

package/src/hooks/useCamera.ts

@@ -0,0 +1,270 @@
+import { useCallback, useEffect, useState } from 'react';
+import { Platform } from 'react-native';
+
+import {
+  BandwidthLimit,
+  Brand,
+  SimulcastBandwidthLimit,
+  SimulcastConfig,
+  TrackBandwidthLimit,
+  TrackEncoding,
+} from '../types';
+import RNFishjamClientModule from '../RNFishjamClientModule';
+import { ReceivableEvents, eventEmitter } from '../common/eventEmitter';
+
+type IsCameraOnEvent = { IsCameraOn: boolean };
+type SimulcastConfigUpdateEvent = SimulcastConfig;
+export type CaptureDeviceId = Brand<string, 'CaptureDeviceId'>;
+
+export type CaptureDevice = {
+  id: CaptureDeviceId;
+  name: string;
+  isFrontFacing: boolean;
+  isBackFacing: boolean;
+};
+
+export type VideoQuality =
+  | 'QVGA169'
+  | 'VGA169'
+  | 'QHD169'
+  | 'HD169'
+  | 'FHD169'
+  | 'QVGA43'
+  | 'VGA43'
+  | 'QHD43'
+  | 'HD43'
+  | 'FHD43';
+
+type CameraConfigBase = {
+  /**
+   * resolution + aspect ratio of local video track, one of: `QVGA_169`, `VGA_169`, `QHD_169`, `HD_169`,
+   * `FHD_169`, `QVGA_43`, `VGA_43`, `QHD_43`, `HD_43`, `FHD_43`. Note that quality might be worse than
+   * specified due to device capabilities, internet connection etc.
+   * @default `VGA_169`
+   */
+  quality?: VideoQuality;
+  /**
+   * whether to flip the dimensions of the video, that is whether to film in vertical orientation.
+   * @default `true`
+   */
+  flipVideo?: boolean;
+  /**
+   * whether the camera track is initially enabled, you can toggle it on/off later with toggleCamera method
+   * @default `true`
+   */
+  cameraEnabled?: boolean;
+  /**
+   * id of the camera to start capture with. Get available cameras with `getCaptureDevices()`.
+   * You can switch the cameras later with `flipCamera`/`switchCamera` functions.
+   * @default the first front camera
+   */
+  captureDeviceId?: CaptureDeviceId;
+};
+
+export type CameraConfig = CameraConfigBase & {
+  /**
+   *  whether video track uses simulcast. By default simulcast is disabled.
+   */
+  simulcastEnabled?: boolean;
+  /**
+   *  bandwidth limit of a video track. By default there is no bandwidth limit.
+   */
+  maxBandwidth?: TrackBandwidthLimit;
+};
+
+export type CameraConfigInternal = CameraConfigBase & {
+  videoTrackMetadata?: { active: boolean; type: 'camera' };
+  /**
+   *  SimulcastConfig of a video track. By default simulcast is disabled.
+   */
+  simulcastConfig?: SimulcastConfig;
+  /**
+   *  bandwidth limit of a video track. By default there is no bandwidth limit.
+   */
+  maxBandwidth?: TrackBandwidthLimit;
+} & (
+    | { maxBandwidthInt?: BandwidthLimit }
+    | { maxBandwidthMap?: SimulcastBandwidthLimit }
+  );
+
+const defaultSimulcastConfig = () => ({
+  enabled: false,
+  activeEncodings: [],
+});
+
+function maxBandwidthConfig(maxBandwidth: TrackBandwidthLimit | undefined) {
+  if (Platform.OS === 'android') {
+    if (typeof maxBandwidth === 'object') {
+      return {
+        maxBandwidth: undefined,
+        maxBandwidthMap: maxBandwidth,
+      };
+    } else {
+      return {
+        maxBandwidth: undefined,
+        maxBandwidthInt: maxBandwidth,
+      };
+    }
+  }
+  return { maxBandwidth };
+}
+
+function simulcastConfig(
+  simulcastEnabled: boolean | undefined,
+): SimulcastConfig | undefined {
+  // iOS has a limit of 3 hardware encoders
+  // 3 simulcast layers + 1 screencast layer = 4, which is too much
+  // so we limit simulcast layers to 2
+  if (simulcastEnabled) {
+    return Platform.select<SimulcastConfig>({
+      ios: { enabled: true, activeEncodings: ['l', 'h'] },
+      android: { enabled: true, activeEncodings: ['l', 'm', 'h'] },
+    });
+  }
+  return undefined;
+}
+
+export function updateCameraConfig(
+  config: Readonly<CameraConfig>,
+): CameraConfigInternal {
+  return {
+    ...config,
+    ...maxBandwidthConfig(config.maxBandwidth),
+    videoTrackMetadata: { active: true, type: 'camera' },
+    simulcastConfig: simulcastConfig(config.simulcastEnabled),
+  };
+}
+
+/**
+ * This hook can toggle camera on/off and provides current camera state.
+ */
+export function useCamera() {
+  const [isCameraOn, setIsCameraOn] = useState<boolean>(
+    RNFishjamClientModule.isCameraOn,
+  );
+
+  const [simulcastConfig, setSimulcastConfig] = useState<SimulcastConfig>(
+    defaultSimulcastConfig(),
+  );
+
+  useEffect(() => {
+    const eventListener = eventEmitter.addListener<SimulcastConfigUpdateEvent>(
+      ReceivableEvents.SimulcastConfigUpdate,
+      (event) => setSimulcastConfig(event),
+    );
+    return () => eventListener.remove();
+  }, []);
+
+  useEffect(() => {
+    const eventListener = eventEmitter.addListener<IsCameraOnEvent>(
+      ReceivableEvents.IsCameraOn,
+      (event) => setIsCameraOn(event.IsCameraOn),
+    );
+    setIsCameraOn(RNFishjamClientModule.isCameraOn);
+    return () => eventListener.remove();
+  }, []);
+
+  /**
+   * toggles encoding of a video track on/off
+   * @param encoding encoding to toggle
+   */
+  const toggleVideoTrackEncoding = useCallback(
+    async (encoding: TrackEncoding) => {
+      const videoSimulcastConfig =
+        await RNFishjamClientModule.toggleVideoTrackEncoding(encoding);
+      setSimulcastConfig(videoSimulcastConfig);
+    },
+    [],
+  );
+
+  /**
+   * updates maximum bandwidth for the given simulcast encoding of the video track
+   * @param encoding  encoding to update
+   * @param bandwidth BandwidthLimit to set
+   */
+  const setVideoTrackEncodingBandwidth = useCallback(
+    async (encoding: TrackEncoding, bandwidth: BandwidthLimit) => {
+      await RNFishjamClientModule.setVideoTrackEncodingBandwidth(
+        encoding,
+        bandwidth,
+      );
+    },
+    [],
+  );
+
+  /**
+   * Function to toggle camera on/off
+   */
+  const toggleCamera = useCallback(async () => {
+    const state = await RNFishjamClientModule.toggleCamera();
+    await RNFishjamClientModule.updateVideoTrackMetadata({
+      active: state,
+      type: 'camera',
+    });
+    setIsCameraOn(state);
+  }, []);
+
+  /**
+   * Starts local camera capture.
+   * @param config configuration of the camera capture
+   * @returns A promise that resolves when camera is started.
+   */
+
+  const startCamera = useCallback(
+    async (config: Readonly<CameraConfig> = {}) => {
+      const updatedConfig = updateCameraConfig(config);
+      await RNFishjamClientModule.startCamera(updatedConfig);
+    },
+    [],
+  );
+
+  /**
+   * Function that toggles between front and back camera. By default the front camera is used.
+   * @returns A promise that resolves when camera is toggled.
+   */
+  const flipCamera = useCallback(async () => {
+    await RNFishjamClientModule.flipCamera();
+  }, []);
+
+  /**
+   * Function that switches to the specified camera. By default the front camera is used.
+   * @returns A promise that resolves when camera is switched.
+   */
+  const switchCamera = useCallback(async (captureDeviceId: CaptureDeviceId) => {
+    await RNFishjamClientModule.switchCamera(captureDeviceId);
+  }, []);
+
+  /** Function that queries available cameras.
+   * @returns A promise that resolves to the list of available cameras.
+   */
+  const getCaptureDevices = useCallback(async () => {
+    return RNFishjamClientModule.getCaptureDevices();
+  }, []);
+
+  /**
+   * updates maximum bandwidth for the video track. This value directly translates
+   * to quality of the stream and the amount of RTP packets being sent. In case simulcast
+   * is enabled bandwidth is split between all of the variant streams proportionally to
+   * their resolution.
+   * @param BandwidthLimit to set
+   */
+  const setVideoTrackBandwidth = useCallback(
+    async (bandwidth: BandwidthLimit) => {
+      await RNFishjamClientModule.setVideoTrackBandwidth(bandwidth);
+    },
+    [],
+  );
+
+  return {
+    isCameraOn,
+    simulcastConfig,
+    toggleCamera,
+    startCamera,
+    flipCamera,
+    switchCamera,
+    getCaptureDevices,
+    toggleVideoTrackEncoding,
+    setVideoTrackEncodingBandwidth,
+    setVideoTrackBandwidth,
+  };
+}

package/src/hooks/useMicrophone.ts

@@ -0,0 +1,38 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import RNFishjamClientModule from '../RNFishjamClientModule';
+import { ReceivableEvents, eventEmitter } from '../common/eventEmitter';
+
+type IsMicrophoneOnEvent = { IsMicrophoneOn: boolean };
+
+/**
+ * This hook can toggle microphone on/off and provides current microphone state.
+ */
+export function useMicrophone() {
+  const [isMicrophoneOn, setIsMicrophoneOn] = useState<boolean>(
+    RNFishjamClientModule.isMicrophoneOn,
+  );
+
+  useEffect(() => {
+    const eventListener = eventEmitter.addListener<IsMicrophoneOnEvent>(
+      ReceivableEvents.IsMicrophoneOn,
+      (event) => setIsMicrophoneOn(event.IsMicrophoneOn),
+    );
+    setIsMicrophoneOn(RNFishjamClientModule.isMicrophoneOn);
+    return () => eventListener.remove();
+  }, []);
+
+  /**
+   * Function to toggle microphone on/off
+   */
+  const toggleMicrophone = useCallback(async () => {
+    const status = await RNFishjamClientModule.toggleMicrophone();
+    await RNFishjamClientModule.updateAudioTrackMetadata({
+      active: status,
+      type: 'audio',
+    });
+    setIsMicrophoneOn(status);
+  }, []);
+
+  return { isMicrophoneOn, toggleMicrophone };
+}

package/src/hooks/useParticipants.ts

@@ -0,0 +1,118 @@
+import { useEffect, useState } from 'react';
+
+import { GenericMetadata, TrackEncoding, TrackMetadata } from '../types';
+import RNFishjamClientModule from '../RNFishjamClientModule';
+import { ReceivableEvents, eventEmitter } from '../common/eventEmitter';
+
+export type TrackType = 'Audio' | 'Video';
+
+/**
+ * Type describing Voice Activity Detection statuses.
+ *
+ * speech - voice activity has been detected
+ * silence - lack of voice activity has been detected
+ */
+export type VadStatus = 'silence' | 'speech';
+
+type TrackBase = {
+  id: string;
+  type: TrackType;
+  isActive: boolean;
+};
+
+export type AudioTrack = TrackBase & {
+  type: 'Audio';
+  vadStatus: VadStatus | undefined;
+};
+
+export type VideoTrack = TrackBase & {
+  type: 'Video';
+  // Encoding that is currently received. Only present for remote tracks.
+  encoding: TrackEncoding | null;
+  // The reason of currently selected encoding. Only present for remote tracks.
+  encodingReason: EncodingReason | null;
+};
+
+export type Track = VideoTrack | AudioTrack;
+/**
+ * Type describing possible reasons of currently selected encoding.
+ *
+ * - other - the exact reason couldn't be determined
+ * - encoding_inactive - previously selected encoding became inactive
+ * - low_bandwidth - there is no longer enough bandwidth to maintain previously selected encoding
+ */
+export type EncodingReason = 'other' | 'encoding_inactive' | 'low_bandwidth';
+
+export type Participant<
+  ParticipantMetadata extends GenericMetadata = GenericMetadata,
+> = {
+  /**
+   *  id used to identify a participant
+   */
+  id: string;
+  /**
+   * whether the participant is local or remote
+   */
+  isLocal: boolean;
+  /**
+   * a map indexed by strings, containing participant metadata from the server
+   */
+  metadata: ParticipantMetadata;
+  /**
+   * a list of participants's video and audio tracks
+   */
+  tracks: Track[];
+};
+
+export type ParticipantsUpdateEvent<
+  ParticipantMetadata extends GenericMetadata = GenericMetadata,
+> = {
+  PeersUpdate: Participant<ParticipantMetadata>[];
+};
+
+function addIsActiveToTracks<
+  ParticipantMetadata extends GenericMetadata = GenericMetadata,
+>(
+  participants: ReadonlyArray<Participant<ParticipantMetadata>>,
+): Participant<ParticipantMetadata>[] {
+  return participants.map((participant) => ({
+    ...participant,
+    tracks: participant.tracks.map((track) => ({
+      ...track,
+      isActive:
+        (track as { metadata?: TrackMetadata })?.metadata?.active ?? true,
+    })),
+  }));
+}
+/**
+ * This hook provides live updates of room participants.
+ * @returns An array of room participants.
+ */
+export function useParticipants<
+  ParticipantMetadata extends GenericMetadata = GenericMetadata,
+>() {
+  const [participants, setParticipants] = useState<
+    Participant<ParticipantMetadata>[]
+  >([]);
+
+  useEffect(() => {
+    async function updateParticipants() {
+      const participants =
+        await RNFishjamClientModule.getPeers<ParticipantMetadata>();
+      setParticipants(addIsActiveToTracks<ParticipantMetadata>(participants));
+    }
+
+    const eventListener = eventEmitter.addListener<
+      ParticipantsUpdateEvent<ParticipantMetadata>
+    >(ReceivableEvents.PeersUpdate, (event) => {
+      setParticipants(
+        addIsActiveToTracks<ParticipantMetadata>(event.PeersUpdate),
+      );
+    });
+
+    updateParticipants();
+    return () => eventListener.remove();
+  }, []);
+
+  return { participants };
+}