Device Disconnection Notification

The SDK emits a device.disconnected event when a selected camera or microphone disappears from the browser's device list. Subscribe to this event to show a notification and help users recover quickly, for example by prompting them to reconnect the device or choose another input.

Browser devicechange behavior varies across browsers and operating systems, so treat this event as a signal rather than a guaranteed hardware truth.

Event data

The device.disconnected event contains the following properties:

Property	Type	Description
`deviceId`	`string`	The disconnected device ID
`label`	`string?`	The human-readable label of the disconnected device
`kind`	`MediaDeviceKind`	The kind of device: `audioinput`, `audiooutput`, or `videoinput`
`status`	`InputDeviceStatus`	The device status at the time of disconnection: `enabled`, `disabled`, or `undefined`
`call_cid`	`string`	The call CID associated with the event

Custom implementation

Subscribe to device.disconnected on the current call and show a warning:

import { useEffect, useState } from "react";
import { useCall } from "@stream-io/video-react-sdk";

export const DeviceDisconnectedNotification = () => {
  const call = useCall();
  const [showWarning, setShowWarning] = useState(false);

  useEffect(() => {
    if (!call) return;

    return call.on("device.disconnected", () => {
      setShowWarning(true);
    });
  }, [call]);

  if (!showWarning) return null;

  return (
    <div className="device-warning">
      <span>A device was disconnected. Please check your setup.</span>
      <button onClick={() => setShowWarning(false)}>Dismiss</button>
    </div>
  );
};

Broken Microphone Setup

Integration Best Practices