Lifecycle events

These events fire at key points in the call lifecycle — from the moment the call bundle starts loading through joining, leaving, and destroying the call instance.

loading

Fires when the JavaScript bundle responsible for the call begins loading. This is the first event in the join() sequence, or the load() sequence if you invoke that directly.

// Example event object
{
  "action": "loading",
  "callClientId": "17225364729060.9442072768918943"
}

call.on('loading', () => {
  document.getElementById('status').textContent = 'Connecting…';
});

loaded

Fires when the JavaScript bundle has finished loading. This occurs right before joining-meeting in the join() sequence, or as the final event in the load() sequence.

// Example event object
{
  "action": "loaded",
  "callClientId": "17225364729060.9442072768918943"
}

load-attempt-failed

Fires when a single attempt to load the call bundle has failed. Daily retries a few times before emitting a fatal error event.

string

Always "load-attempt-failed".

string

The ID of the call client instance that emitted this event.

string

A human-readable description of why the load attempt failed.

// Example event object
{
  "action": "load-attempt-failed",
  "errorMsg": "Timed out (>20000 ms) when loading call object bundle https://c.daily.co/static/call-machine-object-bundle.js",
  "callClientId": "17225364729060.9442072768918943"
}

joining-meeting

Fires once the call bundle has loaded and the participant is actively connecting. This follows loaded in a successful join() sequence.

// Example event object
{
  "action": "joining-meeting",
  "callClientId": "17225364729060.9442072768918943"
}

joined-meeting

Fires once the local participant has successfully joined the call.

The participants object in this event only includes the local participant. Remote participant information is sent in batches of 50 after this event fires via participant-joined events. To get a total count at join time, use participantCounts().

string

Always "joined-meeting".

string

The ID of the call client instance that emitted this event.

object

Contains only the local participant at join time. See DailyParticipant for the full shape.

// Example event object
{
  "action": "joined-meeting",
  "callClientId": "17225364729060.9442072768918943",
  "participants": {
    "local": {
      "session_id": "a64d30f4-5216-4481-a2ef-515d6dd7dfc6",
      "user_name": "A. User Name",
      "user_id": "user_123",
      "joined_at": "2023-06-01T18:55:54.941Z",
      "local": true,
      "owner": false,
      "networkQualityState": "good",
      "permissions": {
        "hasPresence": true,
        "canSend": true,
        "canReceive": { "base": true },
        "canAdmin": false
      },
      "will_eject_at": "1970-01-01T00:00:00.000Z",
      "tracks": {
        "audio": { "state": "playable" },
        "video": { "state": "playable" },
        "screenVideo": { "state": "off" },
        "screenAudio": { "state": "off" }
      },
      "record": false
    }
  }
}

call.on('joined-meeting', ({ participants }) => {
  const local = participants.local;
  console.log('Joined as', local.user_name || local.user_id);
  showCallUI();
});

left-meeting

Fires once the local participant has left the call.

// Example event object
{
  "action": "left-meeting",
  "callClientId": "17225364729060.9442072768918943"
}

call.on('left-meeting', () => {
  showLobbyUI();
});

call-instance-destroyed

Fires after destroy() has been called and all resources have been freed. After this event, isDestroyed() returns true. Listen for this event if you store the call instance in multiple places, to ensure all references are cleared.

// Example event object
{
  "action": "call-instance-destroyed",
  "callClientId": "17225364729060.9442072768918943"
}

call.on('call-instance-destroyed', () => {
  callRef.current = null;
});

access-state-updated

Fires when accessState() changes — either the participant’s access level changed, or an access request was made or resolved.

string

Always "access-state-updated".

string

The ID of the call client instance that emitted this event.

object

The current access state. The level field is one of 'none', 'lobby', or 'full'.

object

Present when the participant has requested access that hasn’t yet been granted or denied. Contains a level field for the requested access level.

// Example: participant has full access
{
  "action": "access-state-updated",
  "callClientId": "17225364729060.9442072768918943",
  "access": { "level": "full" }
}

// Example: participant is in the lobby, awaiting full access
{
  "action": "access-state-updated",
  "callClientId": "17225364729060.9442072768918943",
  "access": { "level": "lobby" },
  "awaitingAccess": { "level": "full" }
}

call.on('access-state-updated', ({ access }) => {
  if (access.level === 'lobby') {
    showWaitingRoomUI();
  } else if (access.level === 'full') {
    hideWaitingRoomUI();
  }
});

Daily Call Client

Types

Static Methods

Instance Methods

Events

Lifecycle events

loading

loaded

load-attempt-failed

joining-meeting

joined-meeting

left-meeting

call-instance-destroyed

access-state-updated

See also

Methods

Events

Guides

​loading

​loaded

​load-attempt-failed

​joining-meeting

​joined-meeting

​left-meeting

​call-instance-destroyed

​access-state-updated

​See also

Methods

Events

Guides

loading

loaded

load-attempt-failed

joining-meeting

joined-meeting

left-meeting

call-instance-destroyed

access-state-updated

See also