Replace usePreviewTrack approach with manual track management inspired by deprecated LiveKit implementation that only toggles what's needed instead of resetting entire preview track on config changes. Previous approach created new videoTrack when updating audio track, causing video preview to blink black during audio configuration changes. It was also acquiring video streams even when disabled. New implementation: * Initializes tracks once with user permissions for both devices * Manually handles muting/unmuting and device updates * Preserves muted state when changing device IDs * Uses exact device constraints on Chrome for proper device selection Prevents unnecessary track recreation and eliminates preview blinking.
React + TypeScript + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
Expanding the ESLint configuration
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
- Configure the top-level
parserOptionsproperty like this:
export default {
// other rules...
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
project: ['./tsconfig.json', './tsconfig.node.json'],
tsconfigRootDir: __dirname,
},
}
- Replace
plugin:@typescript-eslint/recommendedtoplugin:@typescript-eslint/recommended-type-checkedorplugin:@typescript-eslint/strict-type-checked - Optionally add
plugin:@typescript-eslint/stylistic-type-checked - Install eslint-plugin-react and add
plugin:react/recommended&plugin:react/jsx-runtimeto theextendslist