Host is unable to join the meeting in some cases

[pryvalovbogdan]

What happened and what did you expect to happen?

When users starts the meeting he can't join the meeting because from time to time chime aren't getting this user audio/video devices. In logs there is no errors, just falling voice focus and background blur but it seams right if there is no devices. Permission were allowed for devices.

Have you reviewed our existing documentation?

• GitHub issues
• FAQs page
• README page
• Feature-specific guides

Reproduction steps

Host starts meeting but gets stuck on Join page

‘Start meeting’ button never appears and instead user sees inactive ‘Starting…’ button which does not become active

Actually meeting is started and others can ask to join however they will newer be accepted since host is not able to get into the meeting

Amazon Chime SDK for JavaScript version

3.17.0

What browsers are you seeing the problem on?

Google chrome

Browser version

109

Meeting and Attendee ID Information.

MeetingId: 856ac9ab-5a3e-411a-9645-4d6c5a4e6404,
ExternalMeetingId: Sensitive Data Redacted,MediaRegion: eu-north-1,MediaPlacement: {AudioHostUrl: c8b0f6051b38f9a61f2df09c9ba464a3.k.m3.en1.app.chime.aws:3478,AudioFallbackUrl: wss://wss.k.m3.en1.app.chime.aws:443/calls/856ac9ab-5a3e-411a-9645-4d6c5a4e6404,SignalingUrl: wss://signal.m3.en1.app.chime.aws/control/856ac9ab-5a3e-411a-9645-4d6c5a4e6404,TurnControlUrl: https://6404.cell.us-west-2.meetings.chime.aws/v2/turn_sessions,ScreenDataUrl: wss://bitpw.m3.en1.app.chime.aws:443/v2/screen/856ac9ab-5a3e-411a-9645-4d6c5a4e6404,ScreenViewingUrl: wss://bitpw.m3.en1.app.chime.aws:443/ws/connect?passcode=null&viewer_uuid=null&X-BitHub-Call-Id=856ac9ab-5a3e-411a-9645-4d6c5a4e6404,ScreenSharingUrl: wss://bitpw.m3.en1.app.chime.aws:443/v2/screen/856ac9ab-5a3e-411a-9645-4d6c5a4e6404,EventIngestionUrl: https://data.svc.uw2.ingest.chime.aws/v1/client-events}

Browser console logs

3log.log
Reproduced logs on Jul 3, 2025

[michhyun1]

@pryvalovbogdan it seems like you are trying to custom build using the js sdk. Have you been able to reproduce this issue in the sample demo that we have provided?

From the logs, I cant see exactly what the problem is - I just see that there are multiple participant drop events. I also see that the voice focus transformer is being destroyed. We have implemented the Voice Focus Transformer in the React Component Library - perhaps that might help.

[michhyun1]

I don't see any logs pertaining to not getting the audio/video devices. I'm not sure what you mean by "arent getting" the audio video devices. Cany ou elaborate in more detail what your reproduction steps are and what exactly the error is?

[pryvalovbogdan]

Yea i am using custom build with js sdk and sdk-component-library-react. Actually what user have in the settings it's 0 devices an he can't start the meeting because we have checks for the video device successfully initialized.
And ya i couldn't find any error or anything just that voice focus disabled and background blur was broken what the problem could be related to them?

[michhyun1]

It's hard to say without looking at your code. I think you may need to revisit the voice focus example in the react component library that I linked above. Perhaps there is something wrong with the voice focus implementation, as the sample demo seems to be working as expected.

[pryvalovbogdan]

According to logs hook useVideoInputs returns 0 video devices sometimes:

there is no audio or video devices Array(0) Array(0)

but navigator can get video devices :
navigator devices Array(10)

Join screen component:

`import {
useAudioInputs,
useAudioOutputs,
useAudioVideo,
useBackgroundBlur,
useLocalVideo,
useMeetingManager,
useVideoInputs,
} from 'amazon-chime-sdk-component-library-react';
import { DeviceType } from 'amazon-chime-sdk-component-library-react/lib/types';
import { VideoInputDevice } from 'amazon-chime-sdk-js';
import React, { useCallback, useEffect, useRef, useState } from 'react';

import { useVideoPreviewLoaded } from 'src/hooks/useVideoPreviewLoaded';
import lightTheme from 'src/theme/customChimeLightTheme';

const JoinMeetingScreen: React.FC = ({
permissionGranted,
onClose,
isLoading,
isShowLeadForm,
showPreviewCam,
setShowPreviewCam,
isVoiceFocusSupported,
isVoiceFocusOn,
}) => {
const [isProcessingVideo, setIsProcessingVideo] = useState(false);

const { devices: videoInputDevices, selectedDevice: selectedVideoInputDevice } = useVideoInputs();
const { devices: audioInputDevices, selectedDevice: selectedAudioInputDevice } = useAudioInputs();
const { selectedDevice: selectedOutputDevice } = useAudioOutputs();

const audioVideo = useAudioVideo();
const { toggleVideo } = useLocalVideo();

const { isBackgroundBlurSupported } = useBackgroundBlur();
const meetingManager = useMeetingManager();
const { setIsBlurOn } = useBackgroundBlurControl();
const { isVideoPreviewLoaded, videoEl } = useVideoPreviewLoaded();
const isFirstRenderRef = useRef(true);
const [isLoadingRequest, setIsLoadingRequest] = useState(false);
const [isDelayedWebcam, setIsDelayedWebcam] = useState(false);

// const audioVideo = useAudioVideo();
const [isDisabledJoinTimeOut, setIsDisabledJoinTimeOut] = useState(true);
const videoDisabled = !videoInputDevices.length && !selectedVideoInputDevice;
const audioDisabled = !audioInputDevices.length && !selectedAudioInputDevice;
const isInitialing =
isLoading ||
isVoiceFocusSupported === undefined ||
isBackgroundBlurSupported === undefined ||
isProcessingAudio ||
isProcessingVideo ||
(!!(
isFirstRenderRef.current &&
videoEl &&
!failedVideoPreviewID &&
(!isVideoPreviewLoaded || videoEl?.readyState !== 4)
) &&
isDisabledJoinTimeOut);

const { isVideoEnabled } = useLocalVideo();

const startVideoInputDevice = useCallback(
async (
deviceId: string,
videoInputDevices: DeviceType[],
currentVideoDevice: VideoInputDevice | undefined,
deviceLabel: string,
): Promise => {
try {
const defaultVideoDevice = videoInputDevices.find(
item => item.deviceId === deviceId || item.label === deviceLabel,
);

    const isOsIos = isIOS();

    console.warn('starting video preview custom', isOsIos, videoInputDevices, defaultVideoDevice);

    if (!defaultVideoDevice || (isOsIos && !deviceLabel)) {
      return;
    }

    const isBlur = localStorage.getItem('isBlurBg');

    if (!!isBlur) {
      setIsBlurOn(true);
    }

    if (
      defaultVideoDevice.deviceId &&
      currentVideoDevice &&
      videoInputDevices.length &&
      currentVideoDevice !== defaultVideoDevice.deviceId &&
      deviceId !== videoInputDevices[0].deviceId
    ) {
      if (isVideoEnabled) {
        await meetingManager.startVideoInputDevice(defaultVideoDevice.deviceId);
      } else {
        meetingManager.selectVideoInputDevice(defaultVideoDevice.deviceId);
      }
    }
  } catch (err) {
    console.error('Failed to start video input device', err);
  }
},
[isVideoEnabled, meetingManager],

);
const defaultVideoInputDevice = localStorage.getItem('videoInputSelectedId') || '';
const defaultVideoInputDeviceLabel = localStorage.getItem('videoInputSelectedLabel') || '';

useEffect(() => {
setIsProcessingVideo(true);

startVideoInputDevice(
  defaultVideoInputDevice,
  videoInputDevices,
  selectedVideoInputDevice,
  defaultVideoInputDeviceLabel,
).then(() => setIsProcessingVideo(false));

}, [videoInputDevices]);

const isVideoPreviewFailed = !!failedVideoPreviewID;

useEffect(() => {
if (!audioInputDevices.length || !videoInputDevices.length) {
console.log('there is no audio or video devices', audioInputDevices, videoInputDevices);

  try {
    navigator.mediaDevices.enumerateDevices().then(devices => {
      console.log('navigator devices', devices);
    });
  } catch (e) {
    console.warn('Failed to get navigator devices', e);
  }
}

}, [audioInputDevices, videoInputDevices]);

useEffect(() => {
console.log(
'isInitialing state',
isLoading,
isVideoPreviewLoaded,
failedVideoPreviewID,
isVoiceFocusSupported,
isBackgroundBlurSupported,
isProcessingAudio,
isProcessingVideo,
videoEl,
isFirstRenderRef.current,
videoEl?.readyState,
isLoadingConnect,
isFailedToJoin,
);
}, [
isLoading,
isVideoPreviewLoaded,
failedVideoPreviewID,
isVoiceFocusSupported,
isBackgroundBlurSupported,
isProcessingAudio,
isProcessingVideo,
videoEl,
isFirstRenderRef.current,
videoEl,
isLoadingConnect,
isFailedToJoin,
]);

return (
<PreviewVideoComponent
height={isMobile ? 230 : 300}
width={isMobile ? 1 : 530}
isAbbreviatedNameSmall={true}
isJoinModal={true}
myId={myId}
myParticipantInfo={myParticipantInfo}
showPreviewCam={showPreviewCam && !isVideoPreviewFailed && !isDelayedWebcam}
videoInputDevices={videoInputDevices}
theme={lightTheme}
meetingProviderSpecificData={meetingProviderSpecificData}
isVideoPreviewFailed={!!failedVideoPreviewID}
/>
);
};

export default JoinMeetingScreen;
`

Preview Video Component :
`//Modified PreviewVideo.tsx from to amazon-chime-sdk-component-library-react without side effects on not preview (local) video stream
//We removed the code with synchronize the state of PreviewVideo and LocalVideo by method setIsVideoEnabled() and added check before stopping videoInput on unmount
import {
useAudioVideo,
useBackgroundBlur,
useLogger,
useMeetingManager,
useVideoInputs,
} from 'amazon-chime-sdk-component-library-react';
import { BaseSdkProps } from 'amazon-chime-sdk-component-library-react/lib/components/sdk/Base';
import { isVideoTransformDevice } from 'amazon-chime-sdk-js';
import React, { useCallback, useEffect, useRef } from 'react';
import { createStructuredSelector } from 'reselect';

import { useAppDispatch, useAppSelector } from 'src/hooks/storeHooks';
import StyledPreview from 'src/modules/Meeting/styled/StyledCustomPreviewVideo';
import { getFromSessionStorage } from 'src/utils/shared';

import { setFailedVideoPreviewID } from '../reducer';
import { selectorGetIsMeetingWebcamOn, selectorGetIsStartWithEnabledWebcam } from '../selectors';
import { getDeviceId } from '../utils';
import { IPreviewVideoProps } from './types';

export const PreviewVideo: React.FC<BaseSdkProps & IPreviewVideoProps> = props => {
const logger = useLogger();
const audioVideo = useAudioVideo();
const { selectedDevice, devices } = useVideoInputs();
const videoEl = useRef(null);
const meetingManager = useMeetingManager();
const { createBackgroundBlurDevice, isBackgroundBlurSupported } = useBackgroundBlur();
const dispatch = useAppDispatch();

const { isMeetingWebcamOn, isStartWithEnabledWebcam } = useAppSelector(
createStructuredSelector({
isMeetingWebcamOn: selectorGetIsMeetingWebcamOn,
isStartWithEnabledWebcam: selectorGetIsStartWithEnabledWebcam,
}),
);

const isMeetingWebcamOnRef = useRef(isMeetingWebcamOn);

useEffect(() => {
isMeetingWebcamOnRef.current = isMeetingWebcamOn;
}, [isMeetingWebcamOn]);

const stopLocalVideoTile = useCallback(async () => {
if (!audioVideo) {
return;
}

if (videoEl.current) {
  audioVideo.stopVideoPreviewForVideoInput(videoEl.current);
}

!isMeetingWebcamOnRef.current &&
  !getFromSessionStorage('isBlurBackgroundOn') &&
  (await audioVideo.stopVideoInput());

}, [audioVideo]);

useEffect(() => {
let mounted = true;

async function startPreview(): Promise<void> {
  if (
    !meetingManager ||
    !audioVideo ||
    !selectedDevice ||
    !videoEl.current ||
    isBackgroundBlurSupported === undefined
  ) {
    return;
  }

  let videoDevice = selectedDevice;

  try {
    console.log('starting video preview', videoDevice, devices);

    if (!!getFromSessionStorage('isBlurBackgroundOn') && !isVideoTransformDevice(videoDevice)) {
      videoDevice = await createBackgroundBlurDevice(videoDevice);
      console.log('started to adding blur');
      meetingManager.selectVideoInputDevice(videoDevice);
    }

    await meetingManager.startVideoInputDevice(videoDevice);
    mounted && audioVideo.startVideoPreviewForVideoInput(videoEl.current);
  } catch (error) {
    isVideoTransformDevice(videoDevice) && videoDevice.stop();
    const selectedDeviceId = await getDeviceId(selectedDevice);

    console.warn('Custom preview video failed:', error);

    if (devices.length) {
      dispatch(setFailedVideoPreviewID(selectedDeviceId));
    }

    logger.warn('Failed to start video preview');
  }
}

startPreview();

return () => {
  mounted = false;
  (!props.isJoinSettingsModal || (!isStartWithEnabledWebcam && props.isJoinSettingsModal)) && stopLocalVideoTile();
};

}, [audioVideo, selectedDevice, meetingManager, isBackgroundBlurSupported]);

return <StyledPreview {...props} ref={videoEl} />;
};

export default PreviewVideo;
`
1755518522380.log