Device Selector

Device changes include changes in audio/video input and audio output devices. Plugging a headset, or disconnecting your airpods mid call are some of the example of device changes. These are all taken care of by the SDK without requiring any code.

Manual Device Change

Device Change Settings

You may still want to allow users to see the currently selected devices and change them if required. We'll do this in three steps -

Fetching all attached devices list from hmsStore.
Fetching the currently selected devices from hmsStore.
Calling hmsActions to change the device if required.

Note that changing audio output device is available only in chromium based browsers.


// {audioInput, audioOutput, videoInput}
const devices = hmsStore.getState(selectDevices);

// {audioInputDeviceId, audioOutputDeviceId, videoInputDeviceId}
const selected = hmsStore.getState(selectLocalMediaSettings);

// show user a settings component to manually choose device
// The following selected devices can be obtained when changed from your UI.

// Update AudioInput device by calling
hmsActions.setAudioSettings({ deviceId: selectedAudioDeviceID });
// Update VideoInput device by calling
hmsActions.setVideoSettings({ deviceId: selecedVideoDeviceID });
// Update AudioOutput device by calling
hmsActions.setAudioOutputDevice(selectedAudioOutputDeviceID);


import { useDevices, DeviceType } from '@100mslive/react-sdk';

const DeviceSettings = () => {
    const { allDevices, selectedDeviceIDs, updateDevice } = useDevices();
    // Call the updateDevice function like below to update the videoInput device. Similarly for audio input and output pass corresponding deviceId and DeviceType
    updateDevice({
        deviceId,
        deviceType: DeviceType.videoInput
    });

    // render devices and selection from allDevices and selectedDeviceIDs
    return <div />;
};

Switch Camera

The following method will switch between the front and back camera, if both are present


 await hmsActions.switchCamera();

This will automatically update the selected video device in settings.

Remember manually selected devices

We support an additional boolean in join config which can be passed in to let sdk use the localstorage to remember manual device selections for future room join.


await hmsActions.join({ ...joinConfig, rememberDeviceSelection: true });


const JoinCall = () => {
    const hmsActions = useHMSActions();
    const join = useCallback(async () => {
        await hmsActions.join({ ...joinConfig, rememberDeviceSelection: true });
    }, [hmsActions]);

    return <button onClick={join}>Join</button>;
};

Note that hmsActions.attachVideo should be called when there's a change in camera. Refer Render Video section to see how to handle it.

Mute / Unmute Chat

Have a suggestion? Recommend changes ->