Cameras, mics, and speakers

useDevices is the single hook for everything about a user’s media devices: the lists of cameras, microphones, and speakers, which one is selected, the permission state, and helpers to switch devices. Toggling tracks on and off is a separate, imperative action on the call object.

Read available devices

useDevices returns cameras, microphones, and speakers arrays, plus the currently selected device for each:

import { useDevices } from '@daily-co/daily-react';

function DeviceLists() {
  const { cameras, microphones, speakers, currentCam, currentMic } = useDevices();
  return (
    <div>
      <p>Camera: {currentCam?.device.label}</p>
      <p>Mic: {currentMic?.device.label}</p>
      <p>{cameras.length} cameras, {microphones.length} mics, {speakers.length} speakers</p>
    </div>
  );
}

Each device item has a device (the browser MediaDeviceInfo), a selected boolean, and a state of 'granted' or 'in-use'.

Build a device picker

Use setCamera, setMicrophone, and setSpeaker (each takes a deviceId) to switch devices:

import { useDevices } from '@daily-co/daily-react';

function CameraPicker() {
  const { cameras, setCamera } = useDevices();
  return (
    <select onChange={(e) => setCamera(e.target.value)}>
      {cameras.map(({ device }) => (
        <option key={device.deviceId} value={device.deviceId}>
          {device.label}
        </option>
      ))}
    </select>
  );
}

If devices change while your app is open (a headset is plugged in, for example), call refreshDevices() to re-enumerate.

Handle permission and device state

camState and micState describe access at a glance. They start as 'idle' before any access is requested, move to 'pending' while the browser prompt is open, then settle on 'granted' or 'blocked':

import { useDevices } from '@daily-co/daily-react';

function CameraGate() {
  const { camState, hasCamError, cameraError } = useDevices();

  if (camState === 'blocked') return <p>Camera access is blocked. Check your browser settings.</p>;
  if (camState === 'in-use') return <p>Your camera is in use by another app.</p>;
  if (hasCamError) return <p>Camera error: {cameraError?.msg}</p>;
  if (camState === 'pending') return <p>Allow camera access to continue…</p>;

  return <CameraControls />;
}

The convenience booleans hasCamError and hasMicError are true whenever the corresponding state is an error state ('blocked', 'in-use', 'not-found', and similar), so you can branch on one value instead of enumerating them.

States stay 'idle' for rooms configured with start_audio_off: true and start_video_off: true, because no device access has been requested yet. Access is requested when you turn a track on.

Toggle camera and mic

Turning tracks on and off is not part of useDevices. It is an imperative action, so use useDaily and call setLocalVideo() / setLocalAudio(). Read the current on/off state reactively from the local participant’s track:

import { useDaily, useLocalSessionId, useMediaTrack } from '@daily-co/daily-react';

function MediaToggles() {
  const daily = useDaily();
  const localSessionId = useLocalSessionId();
  const video = useMediaTrack(localSessionId, 'video');
  const audio = useMediaTrack(localSessionId, 'audio');

  return (
    <div>
      <button onClick={() => daily?.setLocalVideo(video.isOff)}>
        {video.isOff ? 'Turn camera on' : 'Turn camera off'}
      </button>
      <button onClick={() => daily?.setLocalAudio(audio.isOff)}>
        {audio.isOff ? 'Unmute' : 'Mute'}
      </button>
    </div>
  );
}

Passing video.isOff to setLocalVideo reads as “set video to whatever off currently is not,” i.e. toggle it.

Apply background blur and other input processors

useInputSettings wraps the input-processing pipeline. Use it to enable background blur, virtual backgrounds, or noise cancellation:

import { useInputSettings } from '@daily-co/daily-react';

function BlurToggle() {
  const { updateInputSettings } = useInputSettings();

  const enableBlur = () =>
    updateInputSettings({
      video: { processor: { type: 'background-blur', config: { strength: 0.5 } } },
    });

  return <button onClick={enableBlur}>Blur my background</button>;
}

Calls to updateInputSettings() before the meeting is joined are silently ignored. Apply input settings after joined-meeting.

Getting Started

Core Concepts

Building Call Features

Cameras, mics, and speakers

Read available devices

Build a device picker

Handle permission and device state

Toggle camera and mic

Apply background blur and other input processors

Next steps

Permissions

Rendering media

​Read available devices

​Build a device picker

​Handle permission and device state

​Toggle camera and mic

​Apply background blur and other input processors

​Next steps

Permissions

Rendering media

Read available devices

Build a device picker

Handle permission and device state

Toggle camera and mic

Apply background blur and other input processors

Next steps