Chat Mic Selector

Picker устройств ввода аудио из `navigator.mediaDevices.enumerateDevices()`.

В демо используются запасные устройства (в превью нет доступа к микрофону).

Выбрано: default

"use client";

import { useState } from "react";
import {
  type ChatMicDevice,
  ChatMicSelector,
} from "@/components/ui/chat-mic-selector";

const fallbackDevices: ChatMicDevice[] = [
  { deviceId: "default", label: "По умолчанию — системное устройство" },
  { deviceId: "macbook", label: "Микрофон MacBook Pro" },
  { deviceId: "usb", label: "Blue Yeti USB" },
];

export default function Particle() {
  const [device, setDevice] = useState<string | undefined>("default");

  return (
    <div className="flex w-full max-w-md flex-col gap-3 rounded-lg border bg-card p-3">
      <p className="text-muted-foreground text-xs">
        В демо используются запасные устройства (в превью нет доступа к
        микрофону).
      </p>
      <ChatMicSelector
        devices={fallbackDevices}
        onValueChange={setDevice}
        value={device}
      />
      <p className="text-muted-foreground text-xs">
        Выбрано:{" "}
        <span className="font-medium text-foreground">{device ?? "—"}</span>
      </p>
    </div>
  );
}

Установка


pnpm dlx shadcn@latest add @oracul/chat-mic-selector

Использование

"use client";
import { useState } from "react";
import {
  ChatMicSelector,
  type ChatMicDevice,
} from "@/components/ui/chat-mic-selector";
 
const [device, setDevice] = useState<ChatMicDevice | null>(null);
 
<ChatMicSelector
  onValueChange={(_, dev) => setDevice(dev)}
  requestPermission
  value={device?.deviceId}
/>

Разрешение

Браузеры (Chrome, Safari, Firefox) скрывают labels устройств, пока пользователь не дал разрешение на mic. Для UX:

requestPermission — компонент сам запросит mic в getUserMedia({ audio: true }) на mount и сразу остановит stream, чтобы получить labels.
Без флага labels будут "Microphone 1", "Microphone 2" и т.д.

Live-обновление: компонент подписан на devicechange — если воткнули/вытащили устройство, список обновляется.

Кастомный источник

<ChatMicSelector
  devices={[
    { deviceId: "default", label: "Default" },
    { deviceId: "extern-1", label: "External USB mic" },
  ]}
  onValueChange={onChange}
/>

На этой странице

Установка Использование Разрешение Кастомный источник