This package contains a React context provider and a hook around the AWS Chime SDK. It allows you to get a list of audio/video devices and select a current device which it will keep in state.
This package has a peer dependency on amazon-chime-sdk-js
.
You can install the package using npm like this.
$ npm i @chime/devices amazon-chime-sdk-js
or with Yarn.
$ yarn add @chime/devices amazon-chime-sdk-js
Wrap yout <App>
(or your components that will be using devices) in a <ChimeDevicesProvider>
as follows.
<ChimeDevicesProvider>
<App />
</ChimeDevicesProvider>
Options props to <ChimeDevicesProvider>
include.
This is an optional DefaultDeviceController
object.
See AWS Chime documentation for more information.
You could pass a custom controller that has logging enabled, for example. It's also used to mock during testing.
The initial audio input device id (i.e. microphone) to use. You could persist the user's choice and use this to initialize the selection. If you don't specify an id, it will defaut to the first device in the list.
The initial audio output device id (i.e. speaker) to use. You could persist the user's choice and use this to initialize the selection. If you don't specify an id, it will defaut to the first device in the list.
The initial video input device id (i.e. camera) to use. You could persist the user's choice and use this to initialize the selection. If you don't specify an id, it will defaut to the first device in the list.
You can call useChimeDevices
in some child component which returns the following.
A list of audio input devices (i.e. microphones). type = {deviceId:string, label:string}[]
A list of audio output devices (i.e. speakers).
A list of video input devices (i.e. cameras).
The currently selected audio input device id or null
.
The currently selected audio output device id or null
.
The currently selected video input device id or null
.
The AWS Chime SDK DefaultDeviceController
used.
A function to set the current audio input. Pass the deviceId
of the new audio input.
A function to set the current audio output. Pass the deviceId
of the new audio output.
A function to set the current video input. Pass the deviceId
of
the new video input.
const AudioInputDevices = () => {
const {
audioInputs,
currentAudioInputDeviceId,
setAudioInput,
} = useChimeDevices();
return (
<ul>
{audioInputs.map(({ deviceId, label }) => (
<li key={deviceId} onClick={() => setAudioInput(deviceId)}>
{label}
{deviceId === currentAudioInputDeviceId && '[selected]'}
</li>
))}
</ul>
);
};
You can see an example running live on CodeSandbox
For use under the MIT License