# @custom-react-hooks/use-media-devices 中文文档

规范地址：https://npmcn.com/package/%40custom-react-hooks/use-media-devices/

版本：1\.5\.1
npm 元数据更新时间：2024-08-18T11:20:27.502Z
中文译文更新时间：2026-11-11T05:16:19.637Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40custom-react-hooks/use-media-devices
原文对照：https://npmcn.com/package/%40custom-react-hooks/use-media-devices/?lang=original
项目主页：https://custom-react-hooks-live.vercel.app/
源码仓库：https://github.com/djkepa/custom-react-hooks

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：13.4 kB，8 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react \>=16
- 首次发布：2023-12-01T23:49:56.333Z
- 最新版本发布：2024-08-18T11:20:27.311Z
- 近 30 天下载量：26674（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：8（近 12 个月 0 个）

## 中文简介

`useMediaDevices` 是一种反应钩子,它为访问和监测相机、麦克风和扬声器等媒体设备提供了方便的途径。 它不仅列出所有可用的媒体输入和输出设备,而且管理用户权限以获取详细数据

## 安装

```sh
npm install @custom-react-hooks/use-media-devices
```

也可以使用：`pnpm add @custom-react-hooks/use-media-devices`、`yarn add @custom-react-hooks/use-media-devices`、`bun add @custom-react-hooks/use-media-devices`

## README

# 使用媒体设备钩

`useMediaDevices` 是一种反应钩子,它为访问和监测相机、麦克风和扬声器等媒体设备提供了方便的途径。 它不仅列出所有可用的媒体输入和输出设备,还管理用户权限以获取详细设备信息.

## 特征

-   **设备编号**: 假设所有可用的媒体设备, 包含标签、 类型和ID等细节.
-   **可选权限处理**:可选地提示用户访问媒体设备获取全部设备信息.
-   **装入状态**: 提供装入状态,表示取回介质设备的过程.
-   **处理错误**: 如果无法访问或无法获得媒体设备,则提供全面错误处理.
-   **服务器- Side 渲染( SSR) 兼容性**: 被设计在服务器侧渲染环境中安全地执行,优雅地处理没有浏览器特定的API.

## 安装

### 单独安装此钩

```bash
npm install @custom-react-hooks/use-media-devices
```

或者说

```bash
yarn add @custom-react-hooks/use-media-devices
```

### 安装完整钩套件

```sh
npm install @custom-react-hooks/all
```

或者说

```sh
yarn add @custom-react-hooks/all
```

## 导入虎克

这个 `useMediaDevices` 钩必须使用下列命名的导入方式导入:

**已命名的导入 :**

```javascript
import { useMediaDevices } from '@custom-react-hooks/use-media-devices';
```

这种方法确保了钩子无缝地融入到您的项目中,在您如何使用我们的包时保持一致性和可预测性.

## 使用量

```tsx
import React from 'react';
import { useMediaDevices } from '@custom-react-hooks/all';

const MediaDevicesComponent = () => {
  const { devices, isLoading, error } = useMediaDevices(false);

  if (isLoading) {
    return <div>Loading devices...</div>;
  }

  if (error) {
    return <div>Error: {error}</div>;
  }

  return (
    <div className="media-devices">
      <h2>Available Media Devices</h2>
      {devices.length === 0 ? (
        <div>No devices found.</div>
      ) : (
        <ul>
          {devices.map((device) => (
            <li key={device.id}>
              <strong>{device.kind}:</strong> {device.label}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default MediaDevicesComponent;
```

在这个例子中, `useMediaDevices(true)` 用于请求用户许可并列出所有可用的媒体设备.

## API 参考

### 参数

-   `requestPermission` (可选,默认=假): 一个布尔参数,在设定为真实时,会促使用户获得访问相机和麦克风等媒体设备的许可. 如果错误, 钩子将只列出可用的设备而不请求访问 .

### 返回对象

-   `devices`: 数组 `MediaDevice` 对象,每个代表可用的介质设备。 每个 `MediaDevice` 对象包含以下属性:
    -   `id`: 代表设备唯一标识符的字符串.
    -   `kind`:表示设备类型的字符串(如"视频输入","音频输入","音频输出"等).
    -   `label`: 代表设备标签的字符串, 如果标签不可用, 或“ 未知设备 ” .
-   `isLoading`:一个布尔表示钩子是否正在装入介质设备列表中.
-   `error`: 如果在获取设备列表时发生错误, 表示错误消息的字符串, 或 `null` 如果没有出错.

## 使用大小写

-   **设备选择**:让用户从可用的输入/输出设备中选择用于媒体捕获.
-   **特性无障碍**:检查视频通话等功能是否有媒体设备可用.
-   **动态设备更新**: 当新设备连接或断开时更新 UI.
-   **权限管理**: 管理访问媒体设备的用户权限.

## 捐款

我们欢迎为加强 `useMediaDevices`。对于错误报告或特性建议,请打开问题或向我们的仓库提交拉动请求.

## 常见问题

### @custom-react-hooks/use-media-devices 是什么？

useMediaDevices 是一种反应钩子,它为访问和监测相机、麦克风和扬声器等媒体设备提供了方便的途径。 它不仅列出所有可用的媒体输入和输出设备,而且管理用户权限以获取详细数据

### 如何安装 @custom-react-hooks/use-media-devices？

在项目目录运行 npm install @custom-react-hooks/use-media-devices，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=16）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @custom-react-hooks/use-media-devices 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @custom-react-hooks/use-media-devices 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @custom-react-hooks/use-media-devices 可以商用吗？

@custom-react-hooks/use-media-devices 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @custom-react-hooks/use-media-devices 的下载量有多少？

根据 npm 官方下载统计，@custom-react-hooks/use-media-devices 在 2026/10/11 – 2026/11/09 这 30 天内被下载 26,674 次，日均约 889 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @custom-react-hooks/use-media-devices 还在维护吗？

最新版本 1\.5\.1 发布于 2024/08/18（2 年前）；至今共发布 8 个版本，其中过去 12 个月发布了 0 个；首次发布于 2023/12/02。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。