Network quality and diagnostics

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

function NetworkBadge() {
  const { networkState } = useNetwork();
  // 'good' | 'warning' | 'bad' | 'unknown'
  const color = { good: 'green', warning: 'orange', bad: 'red' }[networkState] ?? 'gray';
  return <span style={{ color }}>● {networkState}</span>;
}

const { networkState, networkStateReasons } = useNetwork();
if (networkState === 'bad' && networkStateReasons.includes('sendPacketLoss')) {
  // Suggest the user turn off their camera to save upload bandwidth.
}

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

useNetwork({
  onNetworkQualityChange: useCallback((event) => {
    if (event.networkState === 'bad') showToast('Your connection is unstable');
  }, []),
});

const { getStats } = useNetwork();
const stats = await getStats();

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

function CPUWarning() {
  const { state, reason } = useCPULoad();
  // state: 'low' | 'high'; reason: 'none' | 'encode' | 'decode' | 'scheduleDuration'
  if (state !== 'high') return null;
  return <p>High CPU load ({reason}). Try closing other apps or lowering video quality.</p>;
}

import { useEffect } from 'react';
import { useNetwork, useReceiveSettings } from '@daily-co/daily-react';

function AdaptiveQuality() {
  const { networkState } = useNetwork();
  const { updateReceiveSettings } = useReceiveSettings();

  useEffect(() => {
    if (networkState === 'bad') {
      updateReceiveSettings({ base: { video: { layer: 0 } } }); // lowest layer
    }
  }, [networkState, updateReceiveSettings]);

  return null;
}