From 98e53440f7d7257728f8c1bf80c72fc7998fecb2 Mon Sep 17 00:00:00 2001 From: chmjkb Date: Wed, 20 May 2026 10:36:19 +0200 Subject: [PATCH] chore: revert docs --- .../05-utilities/01-webrtc-integration.md | 117 ------------------ 1 file changed, 117 deletions(-) delete mode 100644 docs/docs/05-utilities/01-webrtc-integration.md diff --git a/docs/docs/05-utilities/01-webrtc-integration.md b/docs/docs/05-utilities/01-webrtc-integration.md deleted file mode 100644 index 00d950cb43..0000000000 --- a/docs/docs/05-utilities/01-webrtc-integration.md +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: Fishjam Usage ---- - -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -:::danger -This integration is currently in beta. -::: - -## Overview - -Starting from v0.9.0, you can use `react-native-executorch` powered background blur integration in your [Fishjam](https://fishjam.io) applications. The package `react-native-executorch-webrtc` exposes a hook, which returns a middleware for your camera streams. We plan to extend this to other models, such as text to speech, speech to text, or other vision models in the future. - -## Installation - -Install the package with your package manager of choice. Make sure to also have `react-native-executorch` and a resource fetcher adapter installed (see [Getting Started](../01-fundamentals/01-getting-started.md)). - - - - - ```bash - npm install react-native-executorch-webrtc - ``` - - - - - ```bash - pnpm install react-native-executorch-webrtc - ``` - - - - - ```bash - yarn add react-native-executorch-webrtc - ``` - - - - -The following peer dependencies must also be installed in your app: - -- `@fishjam-cloud/react-native-client` -- `@fishjam-cloud/react-native-webrtc` -- `react-native-executorch` - -## Usage - -The integration is built around the `SELFIE_SEGMENTATION` model that we export from `react-native-executorch`. It's the only model we currently support and tune for — the blur pipeline expects its specific input shape and output classes, so other segmentation models will not work correctly. - -Use `ResourceFetcher` together with `SELFIE_SEGMENTATION.modelSource` to download (and cache) the model, then pass the resulting path to `useBackgroundBlur`. The returned `blurMiddleware` plugs into Fishjam's `cameraTrackMiddleware`. - -```tsx -import { useEffect, useState } from 'react'; -import { Button, Text } from 'react-native'; -import { ResourceFetcher, SELFIE_SEGMENTATION } from 'react-native-executorch'; -import { useBackgroundBlur } from 'react-native-executorch-webrtc'; -import { useCamera } from '@fishjam-cloud/react-native-client'; - -function VideoCall() { - const [modelUri, setModelUri] = useState(null); - - useEffect(() => { - ResourceFetcher.fetch(() => {}, SELFIE_SEGMENTATION.modelSource).then( - (paths) => paths?.[0] && setModelUri(paths[0]) - ); - }, []); - - // Wait for the model to be available before mounting the hook — - // useBackgroundBlur expects a real path, not an empty string. - if (!modelUri) { - return Downloading model…; - } - - return ; -} - -function VideoCallWithBlur({ modelUri }: { modelUri: string }) { - const [blurEnabled, setBlurEnabled] = useState(true); - - const { blurMiddleware } = useBackgroundBlur({ - modelUri, - blurRadius: 15, - }); - - useCamera({ - cameraTrackMiddleware: blurEnabled ? blurMiddleware : undefined, - }); - - return ( -