Events

// Subscribe — fires on every occurrence
call.on(event, handler);

// Subscribe once — auto-removes after first invocation
call.once(event, handler);

// Unsubscribe
call.off(event, handler);

type DailyEventObjectBase = {
  action: DailyEvent;   // the event name string
  callClientId: string; // ID of the DailyIframe instance that emitted it
};

import type { DailyEventObject } from '@daily-co/daily-js';

// TypeScript knows `event` is DailyEventObjectParticipant
call.on('participant-joined', (event: DailyEventObject<'participant-joined'>) => {
  const { participant } = event; // fully typed DailyParticipant
  console.log(participant.user_name);
});

// TypeScript knows `event` is DailyEventObjectTrack
call.on('track-started', (event: DailyEventObject<'track-started'>) => {
  const { track, type, participant } = event;
  console.log(`${type} track started by ${participant?.user_name}`);
});

// TypeScript knows `event` is DailyEventObjectFatalError
call.on('error', (event: DailyEventObject<'error'>) => {
  console.error(event.errorMsg, event.error);
});

call.on('joined-meeting', ({ participants }) => {
  console.log('All participants at join time:', participants);
});

call.on('left-meeting', () => {
  console.log('Left the call');
});

call.on('camera-error', ({ error }) => {
  if (error.type === 'permissions') {
    console.error('Camera/mic permissions denied');
  }
});

call.on('active-speaker-change', ({ activeSpeaker }) => {
  highlightTile(activeSpeaker.peerId);
});

call.on('waiting-participant-added', ({ participant }) => {
  showKnockNotification(participant.name);
});

const AUDIO_LEVEL_THRESHOLD = 0.05;

await call.startLocalAudioLevelObserver(100); // poll every 100ms

call.on('local-audio-level', ({ audioLevel }) => {
  setIsSpeaking(audioLevel > AUDIO_LEVEL_THRESHOLD);
});

call.on('recording-started', ({ local, recordingId, type }) => {
  console.log(`Recording started: type=${type}, local=${local}, id=${recordingId}`);
});

call.on('recording-data', ({ data, finished }) => {
  recordingChunks.push(data);
  if (finished) {
    const blob = new Blob(recordingChunks, { type: 'video/mp4' });
    saveRecording(blob);
  }
});

call.on('transcription-message', ({ participantId, text, timestamp }) => {
  addCaption({ participantId, text, timestamp });
});

call.on('network-quality-change', ({ networkState, networkStateReasons }) => {
  if (networkState === 'bad') {
    showNetworkWarning(networkStateReasons);
  }
});

// Broadcast to all participants
call.sendAppMessage({ type: 'reaction', emoji: '👋' }, '*');

// Receive messages
call.on('app-message', ({ data, fromId }) => {
  console.log(`Message from ${fromId}:`, data);
});

call.on('error', ({ error, errorMsg }) => {
  switch (error?.type) {
    case 'ejected':
      showMessage('You were removed from the call.');
      break;
    case 'meeting-full':
      showMessage('The room is at capacity.');
      break;
    case 'exp-room':
    case 'exp-token':
      showMessage('This room or your access token has expired.');
      break;
    case 'connection-error':
      showMessage('Connection failed. Please check your network.');
      break;
    default:
      console.error('Fatal error:', errorMsg);
  }
});

call.on('nonfatal-error', ({ type, errorMsg, details }) => {
  console.warn(`Non-fatal error [${type}]:`, errorMsg, details);
});

// Remove a specific listener
call.off('participant-joined', myHandler);

// Remove all listeners for one event (EventEmitter runtime method)
(call as any).removeAllListeners('participant-joined');

// Remove all listeners for all events (EventEmitter runtime method)
(call as any).removeAllListeners();