From b92313b0273a8acdb381c85b738c45d3d9066388 Mon Sep 17 00:00:00 2001 From: Anna Olak <15946812+anna1901@users.noreply.github.com> Date: Mon, 19 Jan 2026 12:09:28 +0100 Subject: [PATCH 01/10] wip --- docs/how-to/client/migration-guide.mdx | 616 +++++++++++++++++++++++++ 1 file changed, 616 insertions(+) create mode 100644 docs/how-to/client/migration-guide.mdx diff --git a/docs/how-to/client/migration-guide.mdx b/docs/how-to/client/migration-guide.mdx new file mode 100644 index 0000000..674064d --- /dev/null +++ b/docs/how-to/client/migration-guide.mdx @@ -0,0 +1,616 @@ +--- +sidebar_position: 0 +sidebar_label: "Migration Guide" +--- + +# Migration Guide: From @fishjam-cloud/react-native-client to @fishjam-cloud/mobile-client + +This guide will help you migrate your React Native application from `@fishjam-cloud/react-native-client` to `@fishjam-cloud/mobile-client`. + +## Overview + +The new `@fishjam-cloud/mobile-client` package provides a more consistent API across web and mobile platforms, improved TypeScript support, and better integration with React's context system. + +## Package Installation + +### Before + +```bash +npm install @fishjam-cloud/react-native-client +``` + +### After + +```bash +npm install @fishjam-cloud/mobile-client +``` + +Update all your imports: + +```tsx +// Before +import { ... } from "@fishjam-cloud/react-native-client"; + +// After +import { ... } from "@fishjam-cloud/mobile-client"; +``` + +## Required Android Permissions + +Add the following WebRTC permissions to your Android configuration: + +### Expo + +Add to `app.json`: + +```json +{ + "expo": { + "android": { + "permissions": [ + "android.permission.CAMERA", + "android.permission.RECORD_AUDIO", + "android.permission.MODIFY_AUDIO_SETTINGS", + "android.permission.ACCESS_NETWORK_STATE", + "android.permission.ACCESS_WIFI_STATE" + ] + } + } +} +``` + +### Bare React Native + +Add to `AndroidManifest.xml`: + +```xml + + +``` + +## FishjamProvider Setup + +The new package requires wrapping your app with `FishjamProvider` to provide the Fishjam ID context. + +### Before + +```tsx +import { FishjamRoom } from "@fishjam-cloud/react-native-client"; + +// fishjamId was passed directly to joinRoom +await joinRoom({ fishjamId: "your-fishjam-id", peerToken: "..." }); +``` + +### After + +```tsx +import { FishjamProvider } from "@fishjam-cloud/mobile-client"; + +// Wrap your app with FishjamProvider +export default function App() { + return ( + + + + ); +} +``` + +The `fishjamId` is now provided through the context, so you no longer need to pass it to `joinRoom` or `useSandbox`. + +## Device Initialization + +### Before + +```tsx +import { useCamera } from "@fishjam-cloud/react-native-client"; + +const { prepareCamera } = useCamera(); + +await prepareCamera({ cameraEnabled: true }); +``` + +### After + +```tsx +import { useInitializeDevices } from "@fishjam-cloud/mobile-client"; + +const { initializeDevices } = useInitializeDevices(); + +// Initialize devices when you first want to stream +await initializeDevices({ enableAudio: false }); // or initializeDevices() for both +``` + +:::important +On mobile, you should use `initializeDevices()` when you first want to stream. This gives your app access to all available devices and automatically requests camera and microphone permissions. After initialization, you can use `startCamera`/`stopCamera` or `startMicrophone`/`stopMicrophone` to manage device state. +::: + +## Video Rendering + +### Before + +```tsx +import { VideoRendererView } from "@fishjam-cloud/react-native-client"; + + +``` + +### After + +```tsx +import { RTCView } from "@fishjam-cloud/mobile-client"; + +//TODO: FCE-2487 remove it when MediaStream will be updated +interface MediaStreamWithURL extends MediaStream { + toURL(): string; +} + +function VideoPlayer({ stream }: { stream: MediaStream | null | undefined }) { + const streamURL = stream ? (stream as MediaStreamWithURL).toURL() : null; + + if (!streamURL) return null; + + return ( + + ); +} + +// Usage with peer camera track +{peer.cameraTrack?.stream && ( + +)} +``` + +Key changes: +- `VideoRendererView` → `RTCView` +- `trackId` prop → `streamURL` prop +- Use `stream.toURL()` to get the URL from a MediaStream +- Access peer video via `peer.cameraTrack.stream` instead of `peer.track` + +## Connection API + +### Before + +```tsx +import { useConnection, useSandbox } from "@fishjam-cloud/react-native-client"; + +const { joinRoom } = useConnection(); +const { getSandboxPeerToken } = useSandbox({ fishjamId: "your-id" }); + +const peerToken = await getSandboxPeerToken(roomName, peerName); +await joinRoom({ fishjamId: "your-id", peerToken }); +``` + +### After + +```tsx +import { useConnection, useSandbox } from "@fishjam-cloud/mobile-client"; + +const { joinRoom } = useConnection(); +// fishjamId is now provided through FishjamProvider +const { getSandboxPeerToken } = useSandbox(); + +const peerToken = await getSandboxPeerToken(roomName, peerName); +await joinRoom({ peerToken }); // fishjamId removed +``` + +## Device Management + +### Camera Device Selection + +#### Before + +```tsx +const { cameras, switchCamera, facingDirection } = useCamera(); + +// Switch camera +switchCamera(facingDirection === "front" ? "back" : "front"); +``` + +#### After + +```tsx +const { cameraDevices, selectCamera } = useCamera(); + +// Select camera by deviceId +const nextCamera = cameraDevices[0]; +if (nextCamera) { + selectCamera(nextCamera.deviceId); +} +``` + +Key changes: +- `cameras` → `cameraDevices` +- `switchCamera` → `selectCamera` (takes `deviceId` instead of direction) +- `facingDirection` property removed + +### Camera Control + +#### Before + +```tsx +const { prepareCamera } = useCamera(); +await prepareCamera({ cameraEnabled: true }); +``` + +#### After + +```tsx +const { startCamera, stopCamera, toggleCamera } = useCamera(); + +// Start camera +await startCamera(); + +// Stop camera +await stopCamera(); + +// Toggle camera +toggleCamera(); +``` + +## Screen Sharing + +### Before + +```tsx +import { useScreenShare } from "@fishjam-cloud/react-native-client"; + +const { toggleScreenShare, isScreenShareOn } = useScreenShare(); + +