Skip to content

feat(examples): background blur on the Fishjam camera track - #608

Closed
MiloszFilimowski wants to merge 3 commits into
chore/fishjam-chat-expo-57from
feat/camera-effects-examples
Closed

MiloszFilimowski wants to merge 3 commits into
chore/fishjam-chat-expo-57from
feat/camera-effects-examples

Conversation

@MiloszFilimowski

Copy link
Copy Markdown
Collaborator

Wires background blur into both examples with the released packages. The app code is two hooks:

const blur = useBackgroundBlur({ segmentation, radius: 24 });
const { status, error } = useFishjamCameraEffect(enabled ? blur : null);
  • fishjam-chat (React Native): BlurCameraProvider owns the toggle and calls the hooks; a blur button on the preview and room screens. Dependencies: @fishjam-cloud/video-effects 0.1.1, @fishjam-cloud/react-native-worklets 0.12.1, react-native-webgpu. Babel gets the TypeGPU and worklets plugins; Metro learns the .ssgbin model asset and pins the native modules to one copy.
  • minimal-react (web): the same two hooks from @fishjam-cloud/video-effects/fishjam-react, with a blur toggle.

Based on #607 (Expo 57, required by react-native-worklets 0.12). Needs #606 (react-client middleware re-apply) for the effect to attach when it is enabled before the camera starts.

Verification on a Galaxy S23 and in Chrome follows on this PR.

https://claude.ai/code/session_01FWRoR5MneE6GE9crQ9tF6W

fishjam-chat and minimal-react apply @fishjam-cloud/video-effects through
useFishjamCameraEffect, on the camera track useCamera publishes.
Vite pre-bundles video-effects, so the package's default model path resolves
relative to the bundled chunk and misses.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant