使用媒体设备钩

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

特征

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

安装

单独安装此钩

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

或者说

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

安装完整钩套件

npm install @custom-react-hooks/all

或者说

yarn add @custom-react-hooks/all

导入虎克

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

已命名的导入 :

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

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

使用量

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。对于错误报告或特性建议,请打开问题或向我们的仓库提交拉动请求.