Overview

The Gryt client is a React/TypeScript application (packaged with Electron for desktop) that handles the user interface, audio processing pipeline, and WebRTC connections to the SFU.

Features

• Audio pipeline: RNNoise noise reduction, auto gain, compressor, noise gate, volume control, mute, real-time visualization
• Voice controls: Mute/unmute, deafen, device hot-swapping
• Chat: Text messaging with attachments, replies, editing, message retry with nonce deduplication
• Multi-server: Seamless server switching with room isolation
• UI: Radix UI components, dark/light themes, Framer Motion animations

Project structure

client/src/
├── packages/
│   ├── audio/      # useMicrophone, noise gate, volume, visualization
│   ├── webRTC/     # useSFU, peer connections, track management
│   ├── socket/     # useSockets, server views, user components
│   ├── settings/   # useSettings, useTheme, persistent storage
│   └── mobile/     # Touch gestures, responsive helpers
├── components/     # Shared UI (Radix UI)
├── hooks/          # Global React hooks
└── types/          # TypeScript definitions

Getting started

cd packages/client
yarn install
yarn dev

Open http://localhost:3666.

Key hooks

useMicrophone

const { microphoneBuffer, isLoaded, devices } = useMicrophone(shouldAccess);

Provides the full audio buffer chain (raw and processed analysers, gain nodes, RNNoise worklet), device list, and pipeline controls. Feeds into the audio processing pipeline.

useSFU

const {
  connect, disconnect, isConnected,
  isConnecting, streamSources, connectionState
} = useSFU();

Manages the WebRTC connection to the SFU with automatic reconnection and track lifecycle handling.

useSockets

const {
  sockets, clients,
  serverDetailsList, memberLists
} = useSockets();

Multi-server WebSocket management with real-time user state synchronization.

Configuration

Optional packages/client/.env:

VITE_AUDIO_SAMPLE_RATE=48000
VITE_AUDIO_BUFFER_SIZE=256

Audio settings (volume, noise gate, device) are configured through the UI.

Build

yarn build       # production bundle
yarn preview     # preview locally
yarn typecheck
yarn lint