Media Management

Managing microphones, cameras, speakers, and media tracks in Pipecat client applications.

You are currently viewing the React version of this page. Use the dropdown to the right to customize this page for your client framework.

The Pipecat client handles media at two levels: local devices (the user’s mic, camera, and speakers) and media tracks (the live audio/video streams flowing between client and bot). This page covers how to work with both.

Bot audio output

Drop PipecatClientAudio inside your PipecatClientProvider and it handles everything — it mounts a hidden <audio> element and wires up the bot’s audio track automatically:

import { PipecatClientAudio, PipecatClientProvider } from "@pipecat-ai/client-react";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <PipecatClientProvider client={client}>
    <App />
    <PipecatClientAudio />  {/* bot voice plays through this */}
  </PipecatClientProvider>
);

No props required. Just make sure it lives inside the provider.

---

Microphone

Enabling and muting

Set enableMic: true in the constructor to start the session with the mic active. This is the default:

const client = new PipecatClient({
  transport: new DailyTransport(),
  enableMic: true,
});

Use usePipecatClientMicControl to mute and unmute within a component:

import { usePipecatClientMicControl } from "@pipecat-ai/client-react";

function MicButton() {
  const { enableMic, isMicEnabled } = usePipecatClientMicControl();

  return (
    <button onClick={() => enableMic(!isMicEnabled)}>
      {isMicEnabled ? "Mute" : "Unmute"}
    </button>
  );
}

Or use the headless PipecatClientMicToggle component, which provides the same state via a render prop.

Switching microphones

usePipecatClientMediaDevices gives you a reactive device list and setters:

import { usePipecatClientMediaDevices } from "@pipecat-ai/client-react";

function MicSelector() {
  const { availableMics, selectedMic, updateMic } = usePipecatClientMediaDevices();

  return (
    <select value={selectedMic?.deviceId} onChange={(e) => updateMic(e.target.value)}>
      {availableMics.map((mic) => (
        <option key={mic.deviceId} value={mic.deviceId}>{mic.label}</option>
      ))}
    </select>
  );
}

---

Camera

Camera is disabled by default. Enable it in the constructor:

const client = new PipecatClient({
  transport: new DailyTransport(),
  enableCam: true,
});

Not all transports support video. enableCam has no effect on transports that don’t support it (e.g. WebSocket).

Use usePipecatClientCamControl to toggle the camera, and PipecatClientVideo to render the feed:

import { usePipecatClientCamControl } from "@pipecat-ai/client-react";

const { enableCam, isCamEnabled } = usePipecatClientCamControl();

import { PipecatClientVideo } from "@pipecat-ai/client-react";

<PipecatClientVideo participant="local" fit="cover" mirror />

Use participant="bot" to render the bot’s video feed instead. Switch cameras via availableCams / updateCam from usePipecatClientMediaDevices.

---

Speakers

Enumerate and switch output devices via usePipecatClientMediaDevices:

const { availableSpeakers, selectedSpeaker, updateSpeaker } = usePipecatClientMediaDevices();

---

Device initialization before connecting

By default, device access is requested when connect() is called. If you want to enumerate or test devices before the session starts — for example, to show a device picker pre-call — call initDevices() first:

await client.initDevices();
// devices are now available; user hasn't connected yet
const mics = await client.getAllMics();

---

Media tracks

For advanced use cases — custom rendering, audio processing, recording — you can access the raw MediaStreamTrack objects directly.

Use usePipecatClientMediaTrack:

import { usePipecatClientMediaTrack } from "@pipecat-ai/client-react";

function CustomAudioViz() {
  const botAudio = usePipecatClientMediaTrack("audio", "bot");

  useEffect(() => {
    if (!botAudio) return;
    // attach to Web Audio API, recorder, etc.
  }, [botAudio]);
}

---

Audio visualization

The React SDK includes VoiceVisualizer, a canvas-based component that renders audio level bars for any participant:

import { VoiceVisualizer } from "@pipecat-ai/client-react";

<VoiceVisualizer
  participantType="local"
  barColor="#3b82f6"
  barCount={5}
  barWidth={4}
  barMaxHeight={24}
/>

Set participantType="bot" to visualize the bot’s audio instead.

---

API reference

Client Methods — Devices

initDevices, getAllMics, enableMic, and more

React Hooks

usePipecatClientMediaDevices, usePipecatClientMicControl, usePipecatClientCamControl, usePipecatClientMediaTrack

React Components

PipecatClientAudio, PipecatClientVideo, PipecatClientMicToggle, PipecatClientCamToggle, VoiceVisualizer