Challenges I Ran Into

1. Managing Media Streams and Permissions

One of the main challenges was handling user media streams (audio and video) reliably. Integrating

navigator.mediaDevices.getUserMedia

in the

MeetingSpace

component required careful management of permissions and stream cleanup. Sometimes, after toggling the camera or microphone, the media stream would not release resources properly, causing the camera or mic to stay active in the background or fail to reinitialize on subsequent toggles. To solve this, I made sure to call

getTracks().forEach(track => track.stop())

and reset the stream state whenever toggling off, ensuring resources were released and the UI stayed in sync with the actual hardware state.

2. Speech Recognition Integration

Integrating

react-speech-recognition

for live transcription presented some hurdles. Not all browsers support the Web Speech API, and some users experienced inconsistent behavior, such as the transcription not starting or stopping as expected. I addressed this by checking

browserSupportsSpeechRecognition

before starting or stopping listening, and providing fallback UI or error handling when unsupported.

3. Animation and UI Feedback

Animating participant tiles to visually indicate when someone is speaking required custom CSS keyframes ('sound-wave' and 'fadeIn'). However, getting these animations to perform smoothly across browsers was tricky. At first, the '.animate-sound-wave' effect was not always triggering or would behave inconsistently, especially when rapidly toggling the speaking state. I fixed this by simplifying the animation to only use

transform

and ensuring that React state updates triggered re-renders at the right moments.