useDevices
The useDevices hook provides functionality to interact with the different media devices available to you, like your camera, microphone, and speaker.
const {
devices,
preferredDeviceId,
preferredDevice,
fetchStream,
getPermission,
setPreferredDevice,
} = useDevices({
type: "cam",
onPermissionGranted() {},
onPermissionDenied() {},
});Props
The useDevices hook accepts an object with the following fields as props.
1. typeRequired
| Description | Type |
|---|---|
| The device type. | "mic" | "cam" | "speaker" |
Example Usage
const devices = useDevices({ type: "cam" });2. onPermissionGrantedOptional
| Description | Return Type |
|---|---|
| This function will be called when the permission for accessing the device is granted. | void |
Example Usage
const devices = useDevices({ type: "cam", onPermissionGranted: () => {
console.log("Permission for accessing the device was granted!");
// your code here
}});3. onPermissionDeniedOptional
| Description | Return Type |
|---|---|
| This function will be called when the permission for accessing the device is denied. | void |
Example Usage
const devices = useDevices({ type: "cam", onPermissionDenied: () => {
console.log("Permission for accessing the device was denied!");
// your code here
}});Returns
The useDevices hook returns an object with the following fields.
1. devicesObject
| Description | Type |
|---|---|
| The available media devices. | MediaDeviceInfo[] |
2. preferredDeviceIdObject
| Description | Type |
|---|---|
| The preferred media device's ID. | string | null |
3. preferredDeviceObject
| Description | Type |
|---|---|
| The preferred media device. | MediaDeviceInfo | null |
4. fetchStreamFunction
| Description | Return Type |
|---|---|
| Fetch media stream from the selected media device. | Promise<FetchStreamResponse> |
| Parameter Name | Type | Description | Required |
|---|---|---|---|
| data | { mediaDeviceKind: "mic" | "cam"; } | Object containing the type media device. | Yes |
5. getPermissionFunction
| Description | Return Type |
|---|---|
| Get permission to access the selected media device. | Promise<{ permission: "granted" | "denied"; error?: StreamPermissionsError | undefined; }> |
7. setPreferredDeviceFunction
| Description | Return Type |
|---|---|
| Set the preferred media device. | void |
| Parameter Name | Type | Description | Required |
|---|---|---|---|
| deviceId | string | The ID of the media device you want to set as your preferred device. | Yes |