# Changelog archive: 2025
Source: https://docs.daily.co/changelog/2025

Archived Daily changelog entries from 2025: transcription webhooks, canReceive permissions, meeting-move-aware recording and streaming, SIP/PSTN join-time permissions, and React Native New Architecture support.

Archived changelog entries from 2025. For the latest updates, see the [changelog](/changelog).

<Update label="June 29, 2025">
  SIP/PSTN join-time permissions, React Native New Architecture support, recording and telephony improvements.

  ## Overview

  This month, we've shipped join-time permissions for SIP/PSTN users across our client SDKs. React Native developers can now build with the New Architecture enabled. We've also fixed some recording and telephony bugs.

  Complete release history for our client SDKs is available in our Github release notes:

  * [daily-js](https://github.com/daily-co/daily-js/releases)
  * [react-native-daily-js](https://github.com/daily-co/react-native-daily-js/releases)
  * [daily-react](https://github.com/daily-co/daily-react/releases)
  * [daily-ios](https://github.com/daily-co/daily-client-ios/blob/main/CHANGELOG.md)
  * [daily-android](https://github.com/daily-co/daily-client-android/blob/main/CHANGELOG.md)
  * [daily-python](https://github.com/daily-co/daily-python/blob/main/CHANGELOG.md)

  ***

  ## daily-js

  [View full release notes →](https://github.com/daily-co/daily-js/releases)

  ### 0.80.0

  * Added support for setting permissions for SIP/PSTN users at join time.
  * Removed the use of STUN from Xirsys.
  * Updated dependencies to resolve security vulnerabilities.

  ***

  ## react-native-daily-js

  [View full release notes →](https://github.com/daily-co/react-native-daily-js/releases)

  ### 0.77.0

  * Added support for setting permissions for SIP/PSTN users at join time.
  * Fixed a build issue when using React Native's New Architecture.
  * Removed the use of STUN from Xirsys.
  * Updated dependencies to resolve security vulnerabilities.

  ***

  ## daily-python

  [View full release notes →](https://github.com/daily-co/daily-python/blob/main/CHANGELOG.md)

  ### 0.19.3

  * Added an option to ignore audio level when creating a custom audio track.

  ### 0.19.2

  * Fixed a segmentation fault that could occur on exit when a custom audio source was still writing data.

  ***

  ## Media Services

  ### Recording

  * Fixed a bug where a failed session asset image URL could cause a recording composition to crash.

  ### Telephony

  * Fixed a bug to correctly extract the `displayName` from custom SIP headers for dial-in participants.
</Update>

<Update label="May 31, 2025">
  Meeting move aware recording and streaming, new call transfer webhooks, improved telephony features, and platform-wide bug fixes.

  ## Overview

  Mobile SDKs now support canReceive permissions and improved connection reliability. The Python SDK gets powerful custom audio track capabilities. Meeting move aware recording is enabled by default, we've added call transfer webhooks, and transcription saves are now more resilient.

  Complete release history for our client SDKs is available in our Github release notes:

  * [daily-js](https://github.com/daily-co/daily-js/releases)
  * [react-native-daily-js](https://github.com/daily-co/react-native-daily-js/releases)
  * [daily-react](https://github.com/daily-co/daily-react/releases)
  * [daily-ios](https://github.com/daily-co/daily-client-ios/blob/main/CHANGELOG.md)
  * [daily-android](https://github.com/daily-co/daily-client-android/blob/main/CHANGELOG.md)
  * [daily-python](https://github.com/daily-co/daily-python/blob/main/CHANGELOG.md)

  ***

  ## daily-js

  [View full release notes →](https://github.com/daily-co/daily-js/releases)

  ### 0.79.0

  * Improved Krisp error handling.
  * Removed a client-side limit on `max_live_streams`.
  * Disabled Redux DevTools in production builds.

  ***

  ## react-native-daily-js

  [View full release notes →](https://github.com/daily-co/react-native-daily-js/releases)

  ### 0.76.0

  * Removed a client-side limit on `max_live_streams`.
  * Disabled Redux DevTools in production builds.

  ***

  ## daily-android

  [View full release notes →](https://github.com/daily-co/daily-client-android/blob/main/CHANGELOG.md)

  ### 0.31.0

  * Added support for the `canReceive` permission to manage which media tracks remote participants can receive.
  * Improved connection reliability by retrying signaling channel connections and using an alternate WebSocket URI format.
  * Fixed a bug where custom ICE server configurations were not being applied.

  ***

  ## daily-ios

  [View full release notes →](https://github.com/daily-co/daily-client-ios/blob/main/CHANGELOG.md)

  ### 0.31.0

  * Added support for the `canReceive` permission to manage which media tracks remote participants can receive.
  * Improved connection reliability by retrying signaling channel connections and using an alternate WebSocket URI format.

  ***

  ## daily-python

  [View full release notes →](https://github.com/daily-co/daily-python/blob/main/CHANGELOG.md)

  ### 0.19.1

  * Fixed an audio renderer issue that caused garbled audio with remote stereo tracks.
  * Added handling for meeting session ID changes that occur mid-call.

  ### 0.19.0

  * Introduced `CustomAudioTrack` for use as an additional custom track or as the main microphone input.
  * Added support for `displayName`, `userId`, `video`, `codecs`, and `permissions` in `start_dialout()`.
  * Added `sample_rate` and `callback_interval_ms` arguments to `set_audio_renderer()` for more control over audio data.
  * Updated `add_custom_audio_track()` and `update_custom_audio_track()` to accept a `CustomAudioTrack` instance.
  * Switched to using system-level root certificates on all platforms.
  * Fixed a bug where blocking virtual microphones could fail to send audio.

  ### 0.18.2

  * Fixed an installation issue on macOS versions older than 15.0.
  * Corrected type hints for `remove_custom_track()`.

  ### 0.18.1

  * Improved connection reliability by retrying signaling channel connections and using an alternate WebSocket URI format.
  * Fixed a bug with virtual microphone completion callbacks.

  ***

  ## Media Services

  ### Recording

  * Meeting move aware recording and streaming is now enabled by default. This feature [(previously in pre-beta)](/changelog/2024#recording-and-streaming-recovery-during-meeting-moves-pre-beta) automatically resumes recordings and live streams when meetings are transferred between servers during maintenance or failovers, eliminating gaps in recorded content.

  ### Telephony

  * Introduced new webhooks to track call transfer status: `calltransfer.triggered`, `calltransfer.initiated`, `calltransfer.answered`, and `calltransfer.complete`.
  * Added support for passing custom SIP headers during pinless dial-in, which are now available in the `sipHeaders` object in the webhook payload.
  * Added `canReceive` permission controls for dial-in and dial-out participants via the `startDialOut()` API and room properties.
  * On-demand SIP dial-out endpoints are now the default behavior, improving resource efficiency.

  ### Transcription

  * Transcripts are now saved to storage every two minutes by default, improving data resilience.
  * The `/transcript` and `/transcripts` API endpoints now include `roomName`, `participantMinutes`, and `isVttAvailable` for more detailed information.
  * Fixed a race condition that could cause duplicate transcription messages when participant settings were updated rapidly.
</Update>

<Update label="April 30, 2025">
  Stability fixes for ejection logic and network states, Python custom audio tracks, enhanced recording webhooks, improved telephony features, and performance diagnostics for slow joins.

  ## Overview

  We've shipped stability improvements across the board this month. Key fixes include meeting ejection logic, network state calculations, and slow join diagnostics. The Python SDK now supports custom audio tracks, and raw tracks recordings now include instance IDs in webhooks.

  Complete release history for our client SDKs is available in our Github release notes:

  * [daily-js](https://github.com/daily-co/daily-js/releases)
  * [react-native-daily-js](https://github.com/daily-co/react-native-daily-js/releases)
  * [daily-react](https://github.com/daily-co/daily-react/releases)
  * [daily-ios](https://github.com/daily-co/daily-client-ios/blob/main/CHANGELOG.md)
  * [daily-android](https://github.com/daily-co/daily-client-android/blob/main/CHANGELOG.md)
  * [daily-python](https://github.com/daily-co/daily-python/blob/main/CHANGELOG.md)

  ***

  ## daily-js

  [View full release notes →](https://github.com/daily-co/daily-js/releases)

  ### 0.78.0

  * Fixed ejection logic to prevent incorrect ejections or joins when a user's local clock is out of sync. ⚠️ **Note:** Participants can no longer join if `eject_after_elapsed` is set to a negative value.
  * Fixed an `OverconstrainedError` on Chrome that occurred when providing an invalid audio `deviceId`.
  * Fixed an issue where unhandled errors during Krisp initialization could cause problems when joining a call.
  * Reverted a change that disabled background effects on Windows when software WebGL is in use. Instead, a `video-processor-warning` is now logged, as this scenario can significantly reduce video frame rates.
  * Improved `networkState` calculations by removing `recvPacketLoss`, which could be misleading.
  * Added `instanceId` to webhooks for raw tracks recordings.
  * Added performance logging for `enumerateDevices()` to help identify slow join times, especially on Firefox when the tab is not in focus.
  * Removed the beta feature warning from `testCallQuality()`.

  ***

  ## react-native-daily-js

  [View full release notes →](https://github.com/daily-co/react-native-daily-js/releases)

  ### 0.75.0

  * Fixed ejection logic to prevent issues caused by mismatched local clock times. ⚠️ **Note:** Participants can no longer join if `eject_after_elapsed` is set to a negative value.
  * Improved `networkState` calculation by removing `recvPacketLoss` from the formula.
  * Added `instanceId` to webhooks for raw tracks recordings.
  * Added performance logging for `enumerateDevices()` to help diagnose slow join times.

  ***

  ## daily-python

  [View full release notes →](https://github.com/daily-co/daily-python/blob/main/CHANGELOG.md)

  ### 0.18.0

  * Introduced support for creating, updating, and removing custom audio tracks. You can now use `CallClient.add_custom_audio_track()`, `CallClient.update_custom_audio_track()`, and `CallClient.remove_custom_audio_track()` for advanced audio manipulation.
  * Improved `canReceive` permission support to ensure track states (`"off"`, `offReasons`) update correctly when permissions are granted or revoked.
  * Audio and video renderer callbacks (`set_audio_renderer()`, `set_video_renderer()`) now receive the audio or video source as the last argument.
  * Reduced "no subscription for consumer" and "Failed to close consumer" log messages from error to debug, as these often occur during normal participant disconnections.

  ## Media Services

  ### Recording

  * **Instance ID in Webhooks**: The `recording.ready-to-download` and `raw-tracks-recording-error` webhooks now include an `instance_id` to uniquely identify raw tracks recording sessions.
  * Fixed an issue to ensure the `instanceId` is correctly propagated for raw tracks recordings from the initial API call through to the final webhook event.

  ### Telephony

  * **`dialin.ready` Webhook**: Introduced the `dialin.ready` webhook event, which notifies you when a room's SIP endpoint is ready to receive an inbound call.

  * **`origin` Field in Dial-Out Webhooks**: Dial-out webhook events now include an `origin` field, specifying the PSTN number or SIP URI that initiated the call.

  * **Default SIP Codec**: Added a domain-level property to set default codecs for SIP/PSTN calls. Opus is now the default codec for all dial-in calls.

  * **On-Demand SIP Endpoints**: SIP endpoints for dial-out are now created on-demand when `startDialOut()` is called, improving resource efficiency and room creation reliability.

  * **Error Messaging**: Enhanced error messages for dial-in/out configurations during room creation.
</Update>

<Update label="March 30, 2025">
  New canReceive permission, dynamic track constraints, revamped network stats, enhanced telephony features (caller ID, SIP fixes), improved platform stability and compatibility (reconnection, ICE, and more), and security updates.

  ## Overview

  As we close out the first quarter, recent updates across the Daily ecosystem deliver major new features and bug fixes. We've introduced the `canReceive` permission for fine-grained media control, revamped network statistics (networkState, networkStateReasons) while deprecating older metrics, enhanced telephony capabilities (caller ID, SIP stability, API improvements), refined recording composition, and fixed bugs across the platform.

  Complete release history for our client SDKs is available in our Github release notes:

  * [daily-js](https://github.com/daily-co/daily-js/releases)
  * [react-native-daily-js](https://github.com/daily-co/react-native-daily-js/releases)
  * [daily-react](https://github.com/daily-co/daily-react/releases)
  * [daily-ios](https://github.com/daily-co/daily-client-ios/blob/main/CHANGELOG.md)
  * [daily-android](https://github.com/daily-co/daily-client-android/blob/main/CHANGELOG.md)
  * [daily-python](https://github.com/daily-co/daily-python/blob/main/CHANGELOG.md)

  ***

  ## daily-js

  [View full release notes →](https://github.com/daily-co/daily-js/releases)

  ### 0.77.0

  #### Introduced `canReceive` Permission

  We extended the available permissions to include `canReceive`, which allows meeting owners to control the media tracks of others in the session. This feature enables use cases like "warm transfers" (e.g., ensuring a customer doesn't hear an agent before the handoff is complete) and other scenarios requiring selective visibility or audibility within a call. See the [participant permissions documentation](/reference/daily-js/instance-methods/participants#param-permissions) for details.

  #### Improved Network Quality Statistics

  We introduced two new fields in the object returned by [`getNetworkStats()`](/reference/daily-js/instance-methods/get-network-stats) to provide more accurate network quality data: `networkState` and `networkStateReasons`. These replace the deprecated `threshold` and `quality` fields, offering a more reliable assessment based on send/receive packet loss, round-trip time, and available outgoing bitrate.

  #### Bug fixes and improvements

  * Fixed `proxyUrl` support in `dailyConfig`.
  * Optimized background effects on Windows by disabling them when hardware acceleration is unavailable.
  * Updated internal dependencies to resolve security vulnerabilities.
  * Simplified `recordings_bucket` response in `room()` method for enhanced security.

  ### 0.76.0

  #### Bug fixes and performance improvements

  * Updated Krisp noise cancellation library to v2.2.1.
  * Fixed switching back from custom video track to device track via `setInputDevicesAsync()`.
  * Fixed `iceTransportPolicy` configuration to correctly override domain defaults.
  * Added `enable_dialout` to TypeScript definitions for `DailyRoomInfo`.

  ### 0.75.2

  #### Bug fixes

  * Fixed unnecessary video track re-acquisition during input settings updates.

  ### 0.75.1

  #### Bug fixes

  * Fixed video constraint preservation when changing devices.
  * Removed console error for null `deviceId` in `setInputDevicesAsync`.

  ### 0.75.0

  #### Enhanced Participant Type for Dial-in/out

  The `participant` object now includes specific `participantType` values to identify telephony participants: `sip-dial-in`, `sip-dial-out`, `pstn-dial-in`, and `pstn-dial-out`. This allows for clearer identification of how participants joined via SIP or PSTN dial-in/out.

  #### Dynamic Input Track Constraints

  Introduced support for dynamically customizing media track constraints during a call using [`updateInputSettings()`](/reference/daily-js/instance-methods/update-input-settings). This allows changing camera resolution, frame rate, or switching between front and rear cameras without rejoining. The previous constraint-setting methods (`userMediaAudioConstraints`, `userMediaVideoConstraints`, and `setBandwidth` trackConstraints) are now deprecated.

  #### Bug fixes and improvements

  * Fixed track event reliability for rapid muting/unmuting and custom tracks.
  * Fixed track event participant info on leave.
  * Improved Krisp initialization error handling.
  * Fixed `ondevicechange` undefined error on certain systems.
  * Updated Banuba SDK to eliminate need for `'unsafe-eval'` CSP directive with `avoidEval: true`.
  * Updated minimum supported version to 0.64.0.

  ***

  ## react-native-daily-js

  [View full release notes →](https://github.com/daily-co/react-native-daily-js/releases)

  ### 0.74.0

  #### Introduced `canReceive` Permission

  Added support for the new `canReceive` permission for granular control over which media tracks participants receive. See the [participant permissions documentation](/reference/daily-js/instance-methods/participants#param-permissions) for details.

  #### Improved Network Quality Statistics

  Introduced `networkState` and `networkStateReasons` fields in [`getNetworkStats()`](/reference/react-native/instance-methods/get-network-stats), replacing deprecated `threshold` and `quality` metrics.

  #### Bug fixes and improvements

  * Added caller ID support for SIP PSTN transfers in `sipCallTransfer()`.
  * Fixed `proxyUrl` support.
  * Updated dependencies for security fixes.
  * Simplified `recordings_bucket` response in `room()` method.

  ### 0.73.0

  #### Bug fixes

  * Fixed switching from custom video track back to device track.
  * Fixed `iceTransportPolicy` configuration override.
  * Added `enable_dialout` to TypeScript definitions.

  ### 0.72.1

  #### Reverted Erroneous API Changes

  Reverted unintended deprecation notices for `updateInputSettings()` and dynamic track constraints to maintain React Native's existing device handling APIs.

  ### 0.72.0

  #### Enhanced Participant Type for Dial-in/out

  Added specific `participantType` values for telephony participants: `sip-dial-in`, `sip-dial-out`, `pstn-dial-in`, and `pstn-dial-out`.

  #### Added Audio-Only Raw Tracks Recording

  Added `raw-tracks-audio-only` streaming config for audio-only recording support.

  #### Bug fixes

  * Fixed track event reliability for muting and custom tracks.
  * Updated internal REST APIs to use native utilities.
  * Added participant info to `track-stopped` events on leave.

  ### 0.71.0

  #### Bug fixes and improvements

  * Added `sessionId` to dial-in events.

  ***

  ## daily-android

  [View full release notes →](https://github.com/daily-co/daily-client-android/blob/main/CHANGELOG.md)

  ### 0.30.0

  #### Ignore Network Devices API

  Introduced `CallClient.GlobalConfig.setIgnoredNetworkDevices()` to exclude specific network interfaces (VPNs, virtual adapters) during ICE candidate gathering for improved connection reliability.

  #### Bug fixes

  * Fixed ICE server configuration application via `CallClient.setIceConfig()`.

  ### 0.29.0

  #### Automatic Cloud Recording Start

  Added support for automatically starting cloud recording on join when `start_cloud_recording: true` is set in the meeting token.

  #### Bug fixes and improvements

  * Fixed reconnection with expired meeting tokens.
  * Updated dependencies (ffmpeg, libav, libvpx) for security patches.

  ***

  ## daily-ios

  [View full release notes →](https://github.com/daily-co/daily-client-ios/blob/main/CHANGELOG.md)

  ### 0.30.0

  #### Bug fixes

  * Fixed ICE server configuration application via `setIceConfig()`.

  ### 0.29.0

  #### Automatic Cloud Recording Start

  Added support for automatically starting cloud recording on join when `start_cloud_recording: true` is set in the meeting token.

  #### Bug fixes

  * Fixed reconnection with expired meeting tokens.

  ***

  ## daily-python

  [View full release notes →](https://github.com/daily-co/daily-python/blob/main/CHANGELOG.md)

  ### 0.17.0

  #### Improved Linux Compatibility

  Recompiled against glibc 2.28 for broader Linux distribution support.

  ### 0.16.1

  #### Bug fixes

  * Fixed virtual speaker device selection.

  ### 0.16.0

  #### Update `canReceive` Permissions Support

  Added support for modifying remote participant's `canReceive` permission via `update_remote_participants()`.

  #### Bug fixes

  * Fixed ICE server configuration application.

  ### 0.15.0

  #### Automatic Cloud Recording Start

  Added support for automatically starting cloud recording on join when `start_cloud_recording: true` is set in the meeting token.

  #### Bug fixes

  * Fixed reconnection with expired meeting tokens.

  ***

  ## Daily Prebuilt

  #### Transcription Language Defaults

  Transcription now defaults to the room/domain `lang` configuration when started via Closed Captions, falling back to English if not configured.

  ***

  ## Media Services

  ### Recording and Live Streaming

  #### New Features

  * **Scale Mode Overrides**: Added `videoSettings.split.scaleModeOverrides` for individual participant scaling in split layout compositions.
  * **Background Color Support**: VCS render pipeline now supports custom background colors via `backgroundColor` parameter.

  #### Bug fixes

  * Fixed audio-only participant filtering in baseline compositions.
  * Fixed instance ID handling for raw tracks recording.

  ### Telephony

  #### Enhanced Caller ID Control

  Added `callerId` support in `sipCallTransfer()` for PSTN transfers with improved default caller ID selection logic.

  #### API Improvements

  * Domain dial-in configs endpoint now supports filtering by multiple phone numbers.
  * Purchased phone numbers endpoint now includes pagination support.
  * Room creation API provides more specific telephony provisioning error messages.

  #### Bug fixes and improvements

  * Improved SIP INVITE handling to prevent signaling state errors.
  * Enhanced error messages for invalid call transfers.
  * Fixed layout updates for disconnected SIP participants.
  * Added comprehensive [transfer guide documentation](/docs/guides/features/dial-in-dial-out/transfers).

  ### Transcription

  #### Bug fixes

  * Fixed race condition when stopping or updating transcription immediately after starting.
</Update>

<Update label="January 31, 2025">
  New transcription webhooks, better multi-instance recording support, improved telephony features, platform-wide bug fixes, and strengthened SDK reliability.

  ## Overview

  Rounding out 2024 and kicking off 2025 with major improvements across Daily's platform components: bug fixes (Safari audio processing detection, call quality test error handling), expanded feature set (improved PSTN/SIP support, expanded multi-instance recording, new transcription webhooks), and strengthened infrastructure (SDK and media service reliability).

  Complete release history for our client SDKs is available in our Github release notes:

  * [daily-js](https://github.com/daily-co/daily-js/releases)
  * [react-native-daily-js](https://github.com/daily-co/react-native-daily-js/releases)
  * [daily-react](https://github.com/daily-co/daily-react/releases)
  * [daily-ios](https://github.com/daily-co/daily-client-ios/blob/main/CHANGELOG.md)
  * [daily-android](https://github.com/daily-co/daily-client-android/blob/main/CHANGELOG.md)
  * [daily-python](https://github.com/daily-co/daily-python/blob/main/CHANGELOG.md)

  ***

  ## daily-js

  ### 0.74.0

  #### Updated Krisp CSP Requirements

  Added missing `blob:` source to the [CSP guide](/docs/guides/privacy-and-security/content-security-policy):

  ```js theme={null}
  script-src 'self' https://unpkg.com/@daily-co/daily-js blob:;
  ```

  #### Follow-up fix for Safari Audio Processing Detection

  Fixed a logical error in Safari version comparison for audio processing support. We resolved an edge case where Safari versions above 18 were incorrectly flagged as unsupported. This completes the [Safari 17.4+ audio processing detection fix](/changelog/2024#fixed-audio-processing-detection-in-safari-17-0-17-3) from our previous release.

  This change ensures accurate audio processing support detection across all Safari versions.

  #### Fixed Call Quality Test Error Handling

  Fixed error handling in `testCallQuality()` when rate limits are hit and improved promise rejection handling to avoid uncaught errors. Test failures now properly resolve with a FAILED result instead of throwing.

  #### Added Session ID to Dial-in Events

  Added sessionId field to all dial-in events: `dialin-connected`, `dialin-error`, `dialin-stopped`, and `dialin-warning`.

  For example:

  ```js theme={null}
  dialinConnected: { sessionId: 'abc-123', sipFrom: '+1234567890', ... }
  ```

  #### Version Support Update

  * The oldest supported version of `daily-js` is now 0.63.0.

  ***

  ## react-native-daily-js

  ### 0.71.0

  This release also includes several core improvements shared with daily-js 0.74.0:

  * Added sessionId to dial-in events

  See the daily-js 0.74.0 section for full details on these changes.

  ***

  ## daily-android

  ### 0.28.0

  #### Added support for Cloudflare TURN/STUN servers

  Added support for using Cloudflare TURN/STUN servers for ICE connections. If you're interested in using this for your Daily domain, please contact [help@daily.co](mailto:help@daily.co)

  #### Fixed Android Proguard Build Configuration

  Fixed an issue where apps using R8/Proguard would fail to build due to missing Banuba video processor classes:

  * Added proper Proguard configuration for optional Banuba SDK dependencies
  * Ensured R8 optimization doesn't fail on missing video processor classes
  * Maintained backwards compatibility with existing video processor integrations

  This change prevents build failures in release builds when the video processor plugin is not included.

  ### 0.27.0

  #### Fixed crash when creating and deleting `VideoTextureView`/`VideoTrackCapturerToSurface` without also creating a `CallClient`.

  Fixed an issue where `daily-android` would crash when cleaning up video views without an active CallClient:

  * Moved native library initialization to shared context to prevent premature loading
  * Added safety checks to prevent cleanup of uninitialized native contexts
  * Improved synchronization of client tracking in shared context

  This change prevents crashes when creating and destroying video views without an active call client, improving stability for applications that conditionally initialize video components.

  #### Enhanced Call Reliability during Meeting Moves

  Improved call reliability during meeting moves by implementing increased retry attempts for meeting moves to handle longer backend processing times.

  ***

  ## daily-ios

  ### 0.28.0

  #### Added support for Cloudflare TURN/STUN servers

  Added support for using Cloudflare TURN/STUN servers for ICE connections. If you're interested in using this for your Daily domain, please contact [help@daily.co](mailto:help@daily.co)

  ### 0.27.0

  #### Enhanced Call Reliability during Meeting Moves

  Improved call reliability during meeting moves by implementing increased retry attempts for meeting moves to handle longer backend processing times.

  ***

  ## daily-python

  ### 0.14.2

  #### Fixed type hints for CallClient.send\_app\_message()

  Fixed type hints for `CallClient.send_app_message()` to match the expected payload structure.

  ### 0.14.1

  #### Enhanced App Message Serialization

  Added `serialize_none` option to `CallClient.send_app_message()` to control whether `None` values are serialized to JSON `null` or ignored. This enables more flexible data handling in application messages.

  ### 0.14.0

  #### Added DTMF Support for Dial-out Calls

  Added the ability to send DTMF tones in dial-out sessions using `CallClient.send_dtmf()`[docs](https://reference-python.daily.co/api_reference.html#daily.CallClient.send_dtmf):

  * Send numeric tones (0-9), symbols (#, \*) and letters (A-D) to control interactive voice systems
  * Control automated phone menus and voicemail systems during dial-out calls
  * Specify session ID and tone sequences via simple settings object

  This addition enables programmatic interaction with phone systems that require DTMF input during dial-out calls.

  #### Added SIP REFER Support

  Added support for transferring SIP calls to external endpoints via `CallClient.sip_refer()` ([docs](https://reference-python.daily.co/api_reference.html#daily.CallClient.send_dtmf)):

  * Transfer ongoing SIP dial-in calls to external SIP endpoints
  * Control transfers using session ID and destination endpoint
  * Support for standard SIP REFER mechanism

  This addition enables seamless call transfers between Daily and external SIP systems.

  #### Added Daily-to-Daily SIP Call Transfer Support

  Added support for transferring SIP/PSTN calls between Daily rooms via `CallClient.sip_call_transfer()` ([docs](https://reference-python.daily.co/api_reference.html#daily.CallClient.sip_call_transfer)):

  * Transfer SIP dial-in calls between Daily rooms
  * Transfer dial-out calls to other SIP/PSTN endpoints
  * Control transfers using session ID and destination endpoint

  This addition enables seamless call transfers within the Daily ecosystem and to external numbers.

  #### Changed field name in Dial Events

  Renamed `participantId` to `sessionId` in `DialoutEvent` and `DialinEvent` objects for consistency

  #### Enhanced Call Reliability during Meeting Moves

  Improved call reliability during meeting moves by implementing increased retry attempts for meeting moves to handle longer backend processing times.

  ***

  ## Daily Prebuilt

  * Enhanced accessibility across Prebuilt with ARIA attributes, improved keyboard navigation, semantic HTML, updated labels and roles, and better screen reader support to meet WCAG standards.
  * Fixed issue where GIFs with empty titles were not rendered in chat.
  * Fixed a case where flickering in chat input height occurred while typing.

  ***

  ## Media Services

  ### Recording and Live Streaming

  #### Support Multiple Recording Types with Multi-Instance Recording

  Added support for running different recording types simultaneously using instance IDs:

  ```js theme={null}
  // Start a cloud recording
  await call.startRecording({
    instanceId: '123e4567-e89b-12d3-a456-426614174000',
    type: 'cloud',
    layout: {
      preset: 'default',
    },
  });

  // Start raw-tracks recording in parallel
  await call.startRecording({
    instanceId: '987fdef0-c65b-11d1-b2e2-526614174000',
    type: 'raw-tracks',
  });
  ```

  * New `type` parameter in `startRecording()` ([docs](/reference/daily-js/instance-methods/start-recording)) API accepts `'cloud'`, `'raw-tracks'`, or `'local'`
  * Recording types must be enabled via `enable_recording` property on room/domain
  * Each recording instance requires a unique UUID via `instanceId` parameter

  You can now run cloud recordings and raw track captures simultaneously, enabling both processed and unprocessed recording workflows from a single call.

  #### Added Audio-Only Support for Raw Tracks Recording

  Added support for audio-only recording in raw-tracks recordings:

  ```typescript theme={null}
  // Start a raw-tracks recording with audio only
  await call.startRecording({
    instanceId: '123e4567-e89b-12d3-a456-426614174000',
    type: 'raw-tracks',
    layout: {
      preset: 'raw-tracks-audio-only',
    },
  });
  ```

  * New `raw-tracks-audio-only` preset captures only audio tracks, reducing storage requirements and simplifying post-processing workflows
  * Preset must be specified at recording start - cannot be changed via `updateRecording()`
  * Compatible with existing `raw-tracks` processing tools for audio extraction and analysis

  This addition makes raw-tracks recordings more flexible for audio-focused use cases where individual tracks are needed for post-processing like podcasting, voice analysis, and audio archival.

  #### Added Raw Tracks Processing Tools

  Released an open-source suite of tools for processing raw-tracks recordings:

  * New [`raw-tracks-tools` CLI](https://github.com/daily-co/raw-tracks-tools) provides tools for analyzing, converting and compositing WebM files from raw-tracks recordings
  * Supports track alignment, synchronization, and layout composition using Daily's VCS engine
  * Complements existing GUI tools like CloudConvert and Handbrake with more precise control over WebM processing

  This release makes raw-tracks recordings more accessible for post-processing workflows, especially for high-quality audio/video production.

  #### Added Audio Recording Loss Detection

  Added automatic detection of audio quality issues in recordings and streams. This fixes issues where audio quality issues where audio or video tracks were visible during the live call but not in the final recording/stream.

  #### Improved Recording Reliability with Network Optimizations

  Enhanced network reliability for all recording types (cloud, raw-tracks, live streaming) and phone integration:

  * Increased UDP buffer sizes to prevent packet loss between servers
  * Added server-to-server retransmission between SFU and media workers
  * Reduces recording freezes and dropped tracks in environments with network congestion

  #### Fixed Missing Tracks in Recordings

  Fixed an issue where tracks could be missing from recordings when added during WebSocket reconnections between SFU and recording services. New tracks are now properly subscribed even during connection re-establishment.

  ### Telephony

  #### Renamed Dialout Timeout Configuration Field

  Renamed dialout configuration parameter from `max_alone_duration_sec` to `max_idle_timeout_sec` to better describe its purpose of controlling how long dialout participants remain in an idle room.

  #### Added Participant Type Support in participants() for Phone Participants

  Added distinct participant types for phone participants in [participants()](/reference/daily-js/instance-methods/participants) to enable better handling of SIP and PSTN users:

  * New participant types: `sip-dial-in`, `sip-dial-out`, `pstn-dial-in`, `pstn-dial-out`
  * Automatically set for all phone-based participants, including umbrella participants

  This helps developers better identify and manage phone participants in their applications.

  #### Fixed Dialout ICE Connection Reliability

  Fixed an issue where SIP dialout calls could hang during ICE connection negotiation, improving the reliability of phone system integration.

  #### Added `dialout_config` to Room Configuration

  Added `dialout_config` ([docs](/reference/rest-api/rooms/get-room#response-config-dialout-config)) as a room-level configuration option to control dialout behavior:

  * `dialout_config.allow_room_start`: Allow dialouts to start an empty room
  * `dialout_config.max_idle_timeout_sec`: Control how long a dialout participant can remain in a room alone
  * `dialout_config.dialout_geo`: Specify region for dialout sessions

  ### Transcription

  #### Unified Transcription Configuration Across Live and Batch Processing

  Aligned transcription configuration options between live transcription and batch processing for consistent API usage:

  ```js theme={null}
  // Live transcription
  await call.startTranscription({
    language: 'fr-CA',
    model: 'nova-2-general',
  });
  ```

  * All configuration options from [live transcription](/reference/daily-js/instance-methods/start-transcription) (language, model, punctuate, etc.) now supported in [batch processing](/reference/rest-api/batch-processor/reference/submit-job)
  * Previous undocumented `params` field maintained for backward compatibility
  * Added new `extra` field for additional Deepgram parameters in both APIs

  Simplifies transcription configuration by providing a consistent interface across real-time and batch processing workflows.

  #### Added Room Name in Transcription API

  Enhanced transcription list and info endpoints with room name support:

  ```js theme={null}
  // List transcripts with room name filter
  GET /api/transcripts?room_name=my-room*

  // Transcript info now includes room name
  {
   "transcriptId": "123",
   "roomId": "456",
   "roomName": "my-room",
   // ...other fields
  }
  ```

  ### Webhooks

  #### New transcription webhook events

  Added three new webhook events to track the full lifecycle of transcriptions:

  * [`transcript.started`](/reference/rest-api/webhooks/events/transcript-started) indicates transcription has begun, including metadata like room ID, instance ID and initial status
  * [`transcript.ready-to-download`](/reference/rest-api/webhooks/events/transcript-ready-to-download) fires when transcription completes, providing S3 location details for downloading the transcript
  * [`transcript.error`](/reference/rest-api/webhooks/events/transcript-error) provides detailed error information and context if transcription fails during any stage

  Monitor and automate transcription workflows with comprehensive status updates and error handling through webhooks.

  ## Other

  ### Added support for Cloudflare TURN/STUN servers

  Added support for using Cloudflare TURN/STUN servers for TURN/STUN connections. If you're interested in using this for your Daily domain, please contact [help@daily.co](mailto:help@daily.co)
</Update>


# Changelog
Source: https://docs.daily.co/changelog/index

The latest updates and improvements from the Daily engineering team.

Updates from the Daily engineering team across daily-js, Daily React, React Native, daily-python, telephony, and the REST API. Older entries live in the [yearly archives](#older-updates).

<Update label="June 24, 2026">
  EU region transcription, SIP video dial-out quality parameters, cross-SDK domain failover, native SDK stability fixes, and SIP 488 codec negotiation responses.

  ## Overview

  June brings automatic domain failover (`daily.co` → `dailywebrtc.com`/`.net`) across all client SDKs for improved connection resilience. daily-js 0.91.0 and react-native-daily-js 0.86.0 add support for specifying the EU region for transcription and new quality parameters (`fps`, `width`, `height`, `videoBitrate`) for SIP video dial-out. The native SDKs — daily-ios 0.38.0, daily-android 0.38.0, and daily-python 0.30.0 — ship important stability fixes, and daily-python adds custom screen-share audio tracks. On the server side, SIP interoperability improves with proper `488 Not Acceptable` responses for incompatible codecs and custom SIP header passthrough for the Daily provider.

  Complete release history for our client SDKs is available in our Github release notes:

  * [daily-js](https://github.com/daily-co/daily-js/releases)
  * [react-native-daily-js](https://github.com/daily-co/react-native-daily-js/releases)
  * [daily-react](https://github.com/daily-co/daily-react/releases)
  * [daily-ios](https://github.com/daily-co/daily-client-ios/blob/main/CHANGELOG.md)
  * [daily-android](https://github.com/daily-co/daily-client-android/blob/main/CHANGELOG.md)
  * [daily-python](https://github.com/daily-co/daily-python/blob/main/CHANGELOG.md)

  ***

  ## daily-js

  [View full release notes →](https://github.com/daily-co/daily-js/releases/tag/daily-js-2026-06-10-0.91.0)

  ### 0.91.0

  * Added support for specifying the EU region for [transcription](/reference/daily-js/instance-methods/start-transcription).
  * Added `fps`, `width`, `height`, and `videoBitrate` parameters to SIP video [dial-out](/reference/daily-js/instance-methods/start-dial-out).
  * External-facing track names are now included in the list of reserved values that are disallowed as custom track names.
  * Added automatic client domain failover (`daily.co` → `dailywebrtc.com`/`dailywebrtc.net`) for improved connection resilience.
  * Updated dependencies to resolve vulnerabilities.

  ***

  ## react-native-daily-js

  [View full release notes →](https://github.com/daily-co/react-native-daily-js/releases/tag/react-native-daily-js-2026-06-10-0.86.0)

  ### 0.86.0

  * Added support for specifying the EU region for transcription.
  * Added `fps`, `width`, `height`, and `videoBitrate` parameters to SIP video dial-out.
  * Added support for AsyncStorage v2 and v3.
  * External-facing track names are now included in the list of reserved values that are disallowed as custom track names.
  * Added automatic client domain failover (`daily.co` → `dailywebrtc.com`/`dailywebrtc.net`) for improved connection resilience.
  * Updated dependencies to resolve vulnerabilities.

  ***

  ## daily-ios

  [View full release notes →](https://github.com/daily-co/daily-client-ios/blob/main/CHANGELOG.md)

  ### 0.38.0

  * Added `CallClient.initAsync()`, a static async factory that runs the blocking WebRTC/MediaSoup initialization off the main thread, keeping the UI responsive during `CallClient` creation.
  * Added automatic fallback to `dailywebrtc.com` and `dailywebrtc.net` when `daily.co` authoritative nameservers are unreachable, improving connection resilience.
  * Adaptive Bitrate (ABR) is now enabled by default for camera tracks. It can still be disabled by setting `allowAdaptiveLayers` to `false` in the camera `sendSettings`.
  * Fixed an issue where SDK resources were not properly cleaned up when all `CallClient` instances were released.
  * Fixed an intermittent crash when force-quitting and relaunching the app while the camera was active.
  * Fixed support for the `cloud-audio-only` recording type.
  * Improved connection performance with a new HTTP client featuring connection timeouts and TLS configuration reuse.

  ***

  ## daily-android

  [View full release notes →](https://github.com/daily-co/daily-client-android/blob/main/CHANGELOG.md)

  ### 0.38.0

  * Added automatic fallback to `dailywebrtc.com` and `dailywebrtc.net` when `daily.co` authoritative nameservers are unreachable, improving connection resilience.
  * Adaptive Bitrate (ABR) is now enabled by default for camera tracks. It can still be disabled by setting `allowAdaptiveLayers` to `false` in the camera `sendSettings`.
  * Fixed a segmentation fault that could occur when a `CallClient` was released (or garbage collected) while still in a call.
  * Fixed support for the `cloud-audio-only` recording type.
  * Improved connection performance with a new HTTP client featuring connection timeouts and TLS configuration reuse.

  ***

  ## daily-python

  [View full release notes →](https://github.com/daily-co/daily-python/blob/main/CHANGELOG.md)

  ### 0.30.0

  * Added automatic fallback to `dailywebrtc.com` and `dailywebrtc.net` when `daily.co` authoritative nameservers are unreachable, improving connection resilience.
  * Fixed a use-after-free that could cause a segmentation fault in the audio playout thread if a `CallClient` was released while still in a call with participant audio renderers registered.
  * Fixed a segmentation fault that could occur when a `CallClient` was released (or garbage collected) while still in a call.

  ### 0.29.1

  * Fixed an issue where a room configured with `enable_recording` set to `cloud-audio-only` was ignored when starting a recording, causing the recording to also capture video.
  * Fixed an issue where `StartRecordingProperties` none properties were serialized to `null`.

  ### 0.29.0

  * Added support for `screenAudio` input, making it possible to send a custom screen-share audio track alongside or independently of `screenVideo`.

  ***

  ## Media Services

  ### Telephony

  * Added server-side support for a new `startDialIn()` method to dynamically start a SIP dial-in endpoint. The client-side API will be included in an upcoming daily-js release.
  * SIP calls with incompatible codecs now receive a proper `488 Not Acceptable` error response, and the `rtpmap` for the offered Opus codec has been fixed for better codec negotiation interoperability.
  * Custom SIP headers are now passed through for calls using the Daily SIP provider.
  * `dialout-error` events now include custom SIP headers.
  * Fixed a crash that could occur when a SIP session timed out after the session had already been terminated.

  ### Recording

  * The `recording-error` event now includes the `recordingId`, making it easier to correlate errors with specific recordings.

  ### Streaming

  * Fixed a VCS composition issue where pinned tracks that dropped from an explicit pin list were not evicted from the layout.

  ### Other

  * Oldest supported daily-js version bumped to 0.85.0, with 0.86.0 approaching end-of-support.

  ***

  ## REST API

  * Added `created_at` and `updated_at` to [transcripts API](/reference/rest-api/transcripts) responses.
  * Added an opt-in `include_sip_participants` query parameter to [`GET /meetings/:id`](/reference/rest-api/meetings/get-meeting).
</Update>

<Update label="May 21, 2026">
  Critical Firefox 149 fix, `provider` and `sipCallId` in telephony events, `mtgSessionId` in presence endpoints, and VCS simulator video mode.

  ## Overview

  May brings daily-js 0.90.0 and react-native-daily-js 0.85.0 with a critical fix for a Firefox 149 regression that prevented remote participant media from playing, and new `provider` and `sipCallId` fields across all dial-in and dial-out events for improved telephony observability. On the server side, presence endpoints now include `mtgSessionId`, and the VCS simulator gains video mode support along with a layer pinning fix.

  Complete release history for our client SDKs is available in our Github release notes:

  * [daily-js](https://github.com/daily-co/daily-js/releases)
  * [react-native-daily-js](https://github.com/daily-co/react-native-daily-js/releases)
  * [daily-react](https://github.com/daily-co/daily-react/releases)
  * [daily-ios](https://github.com/daily-co/daily-client-ios/blob/main/CHANGELOG.md)
  * [daily-android](https://github.com/daily-co/daily-client-android/blob/main/CHANGELOG.md)
  * [daily-python](https://github.com/daily-co/daily-python/blob/main/CHANGELOG.md)

  ***

  ## daily-js

  [View full release notes →](https://github.com/daily-co/daily-js/releases/tag/daily-js-2026-05-13-0.90.0)

  ### 0.90.0

  * Added `provider` and `sipCallId` fields to all `dialin-*` and `dialout-*` events, making it easier to correlate telephony events with specific calls and providers.
  * ⚠️ Fixed a Firefox 149 regression that caused remote participant media not to play.
  * Fixed a corner case in iOS user-agent detection.
  * Updated dependencies to resolve vulnerabilities.

  ***

  ## react-native-daily-js

  [View full release notes →](https://github.com/daily-co/react-native-daily-js/releases/tag/react-native-daily-js-2026-05-13-0.85.0)

  ### 0.85.0

  * Added `provider` and `sipCallId` fields to all `dialin-*` and `dialout-*` events.
  * Updated dependencies to resolve vulnerabilities.

  ***

  ## daily-python

  [View full release notes →](https://github.com/daily-co/daily-python/blob/main/CHANGELOG.md)

  ### 0.28.1

  * Fixed a segmentation fault that could occur after virtual microphone or speaker inputs or publishing updates.

  ***

  ## Media Services

  ### Streaming

  * Added video mode to the VCS simulator, allowing developers to test video layouts directly in the simulator.
  * Fixed a track add bug in VCS layer pinning.

  ***

  ## REST API

  * Added `mtgSessionId` to the responses of [`GET /presence`](/reference/rest-api/presence/get-presence) and `GET /rooms/:name/presence`.
</Update>

<Update label="April 29, 2026">
  daily-react 0.25.0 with multi-instance recording and streaming, daily-python 0.28.0 with screen share custom tracks, and SIP telephony improvements.

  ## Overview

  April brings daily-react 0.25.0 with support for multiple concurrent recording and live streaming instances, and daily-python 0.28.0 with screen share custom tracks and Adaptive Bitrate enabled by default for camera tracks. On the server side, SIP dial-in and dial-out events now include `sipCallId` and `provider` fields, Signalwire is selectable as a telephony provider, and VCS streaming gains a configurable label placement parameter along with a mic status indicator.

  Complete release history for our client SDKs is available in our Github release notes:

  * [daily-js](https://github.com/daily-co/daily-js/releases)
  * [react-native-daily-js](https://github.com/daily-co/react-native-daily-js/releases)
  * [daily-react](https://github.com/daily-co/daily-react/releases)
  * [daily-ios](https://github.com/daily-co/daily-client-ios/blob/main/CHANGELOG.md)
  * [daily-android](https://github.com/daily-co/daily-client-android/blob/main/CHANGELOG.md)
  * [daily-python](https://github.com/daily-co/daily-python/blob/main/CHANGELOG.md)

  ***

  ## daily-react

  [View full release notes →](https://github.com/daily-co/daily-react/releases)

  ### 0.25.0

  * Added support for multiple concurrent recording and live streaming instances. `useRecording()` and `useLiveStreaming()` now accept an `instanceId` parameter for per-instance state. New `useRecordingInstances()` and `useLiveStreamingInstances()` hooks return all active instances, and new `RecordingInstanceState` and `LiveStreamingInstanceState` types are exported. Stopping or erroring one instance no longer clears state for others.
  * Added `networkStatus` to the return value of `useNetwork()`.
  * Added support for the `cloud-audio-only` recording type.
  * The daily-react version is now reported through daily-js via the new `aboutClient` API, so it's included in call logs regardless of which library creates the call instance.

  ***

  ## daily-python

  [View full release notes →](https://github.com/daily-co/daily-python/blob/main/CHANGELOG.md)

  ### 0.28.0

  * Added support for `screenVideo` custom tracks. You can now send a custom screen share track by setting `inputs.screenVideo.settings.customTrack.id`.
  * Adaptive Bitrate (ABR) is now enabled by default for camera tracks. It can still be disabled by setting `allow_adaptive_layers` to `False` in the camera `send_settings`.
  * Fixed support for the `cloud-audio-only` recording type.
  * Fixed panics in signalling reconnect paths when room lookup returns no worker.

  ***

  ## Daily Prebuilt

  * Tightened the iOS user-agent match to reject spoofed iOS substrings.
  * Fixed transcription language fallback so that an empty string falls back to the default language (switched from `??` to `||`).

  ***

  ## Media Services

  ### Telephony

  * SIP dial-in and dial-out events now include `sipCallId` and `provider` fields, making it easier to correlate events with specific calls and providers.
  * Signalwire and Daily can now be selected as a telephony provider for dial-in and dial-out.
  * Standardized the `provider` value to lowercase `signalwire` in dial-in and dial-out events.
  * Added `provider` as a valid parameter for the `startDialout` API.
  * Added support for video track updates on SIP video calls.
  * Fixed screen share track addition for SIP video.
  * Added support for configuring a Cloudflare anycast IP address instead of the STUN server hostname.

  ### Recording

  * Added a new `enable_raw_tracks_event_json` domain and room property to opt into JSON event output for raw-tracks recordings.
  * Added more WAV settings for raw-tracks transcoded mode.
  * Raw-tracks listings now verify S3 item `ContentType` to avoid including unexpected files.

  ### Streaming

  * Added a new VCS parameter `videoSettings.grid.labelPlacement` for customizing participant label position in streaming layouts.
  * Added a mic status indicator and a highlight border inset to VCS layouts.
  * Fixed VCS participant label misindexing in audio-only layouts.
</Update>

<Update label="March 29, 2026">
  Smaller call-machine bundle (\~2MB less), VCS layout animations, configurable max API keys, and daily-js 0.81.0 minimum version bump.

  ## Overview

  March includes significant performance improvements for daily-js and react-native-daily-js, with the initial call-machine bundle now \~2MB smaller through dynamic loading. Audio processor errors no longer automatically mute the microphone, and `testCallQuality()` reliability has been fixed. On the server side, VCS streaming layouts gain animation support, and a new `max_api_keys` domain property lets you limit API key creation per domain. The oldest supported daily-js version has been bumped to 0.81.0, with versions through 0.83.1 approaching end-of-support.

  Complete release history for our client SDKs is available in our Github release notes:

  * [daily-js](https://github.com/daily-co/daily-js/releases)
  * [react-native-daily-js](https://github.com/daily-co/react-native-daily-js/releases)
  * [daily-react](https://github.com/daily-co/daily-react/releases)
  * [daily-ios](https://github.com/daily-co/daily-client-ios/blob/main/CHANGELOG.md)
  * [daily-android](https://github.com/daily-co/daily-client-android/blob/main/CHANGELOG.md)
  * [daily-python](https://github.com/daily-co/daily-python/blob/main/CHANGELOG.md)

  ***

  ## daily-js

  [View full release notes →](https://github.com/daily-co/daily-js/releases)

  ### 0.89.1

  * Fixed an issue causing all `testCallQuality()` tests to fail.
  * Fixed remaining vulnerabilities in dependencies.

  ### 0.89.0

  * Reduced initial call-machine bundle download size by \~2MB. Larger portions are now dynamically loaded as-needed.
  * Audio processor errors no longer automatically mute the microphone.
  * Removed the client-side 3-hour limit for raw-tracks recordings. Limits are now handled server-side.
  * Fixed auto-syncing audio output device on Safari, where `setSinkId` requires a user gesture and was causing repeated errors.
  * Improved system idle detection to avoid stale reconnect retries after 5 minutes of inactivity. Calls will now leave cleanly in idle scenarios.
  * **Breaking:** If you self-host the call-machine-bundle using `callObjectBundleUrlOverride`, a new separate bundle is now required for Krisp noise cancellation. Contact [help@daily.co](mailto:help@daily.co) for upgrade instructions.

  ***

  ## react-native-daily-js

  [View full release notes →](https://github.com/daily-co/react-native-daily-js/releases)

  ### 0.84.1

  * Fixed remaining vulnerabilities in dependencies.

  ### 0.84.0

  * Reduced initial call-machine bundle download size by \~2MB with dynamic loading.
  * Added `digitDurationMs` option to `sendDTMF()` for configurable DTMF digit duration.
  * Removed the client-side 3-hour limit for raw-tracks recordings.
  * Improved system idle detection to avoid stale reconnect retries after 5 minutes of inactivity.
  * **Breaking:** If you self-host the call-machine-bundle using `callObjectBundleUrlOverride`, a new separate bundle is now required for Krisp noise cancellation. Contact [help@daily.co](mailto:help@daily.co) for upgrade instructions.

  ***

  ## Dashboard

  * Added a configurable `max_api_keys` domain property to set the maximum number of API keys allowed per domain.

  ***

  ## Media Services

  ### Telephony

  * Fixed video not working with Linphone SIP client.
  * Improved STUN server fallback during SDP negotiation retry.
  * Fixed hung media workers caused by unresolved SIP transport promises.
  * Improved handling of active SIP sessions during meeting moves.
  * Broadcast app messages are no longer sent to participants in the knocking (waiting room) state.
  * Oldest supported daily-js version bumped to 0.81.0. Versions through 0.83.1 are approaching end-of-support.

  ### Streaming

  * The new VCS pipeline is now the default for new customers. In April, we are transitioning existing customers to the new pipeline; the legacy pipeline will be EOLed later this summer. In the meantime, you can switch between the new and legacy pipelines with the `enable_legacy_compositor` flag.
  * Added a layout animation system for VCS (Video Compositing Service) streaming layouts.
  * Fixed RTMP URL handling for streaming destinations.
  * Improved jitter buffer latency and added video stall detection for RTMP streaming.

  ### Recording

  * Added `event-json` as a valid `dataOutputs` option for recordings via the REST API. We’re considering making `event-json` the default output format and invite feedback from the community. Note that this would add an additional `event-json` file to the existing S3 folder and may break downstream workflows that assume only media files are present.

  ### REST API

  * Added validation for the `cloud-audio-only` room and meeting token property.
  * New `max_api_keys` domain property to configure the maximum number of API keys per domain.
</Update>

<Update label="February 24, 2026">
  DTMF tone support for SIP calls, raw-tracks recording improvements, Krisp SDK lazy loading, and webhook event ID timestamps.

  ## Overview

  February brings DTMF tone support for SIP calls, improved raw-tracks recording reliability during meeting moves, and a Krisp SDK performance optimization that splits noise cancellation into a separate bundle for faster page loads. Audio processor errors no longer mute the microphone, and the 3-hour limitation for raw-tracks recordings has been removed.

  Complete release history for our client SDKs is available in our Github release notes:

  * [daily-js](https://github.com/daily-co/daily-js/releases)
  * [react-native-daily-js](https://github.com/daily-co/react-native-daily-js/releases)
  * [daily-react](https://github.com/daily-co/daily-react/releases)
  * [daily-ios](https://github.com/daily-co/daily-client-ios/blob/main/CHANGELOG.md)
  * [daily-android](https://github.com/daily-co/daily-client-android/blob/main/CHANGELOG.md)
  * [daily-python](https://github.com/daily-co/daily-python/blob/main/CHANGELOG.md)

  ***

  ## Daily Prebuilt

  * Audio processor error handling updated to no longer mute the microphone on Krisp errors.
  * Fixed a mute state sync race condition on the first call of the day.
  * Krisp SDK is now loaded as a separate bundle for faster initial page load.
  * Added a user-facing notification when the Krisp SDK fails to load.
  * Updated noise cancellation overload translations.

  ***

  ## Dashboard

  * Improved dashboard loading speed.
  * Removed references to the deprecated `owner_only_broadcast` property.

  ***

  ## Media Services

  ### Telephony

  * Added DTMF (telephone-event) support for sending and receiving DTMF tones during SIP calls.
  * Added a setting to keep rooms open without WebRTC participants (for SIP-only scenarios).
  * Fixed the call transfer initiated event for SIP REFER.
  * Fixed dial-in events to be preserved when no peer is in the room yet.

  ### Recording

  * Removed the 3-hour limitation for raw-tracks recordings.
  * Improved raw-tracks recording reliability during meeting moves when the SFU connection changes.
  * Added `user_name` and `user_id` to raw-tracks recording events.
  * Recording finished webhooks are now reliably sent from the upload finisher for improved delivery.

  ### Webhooks

  * Webhook event IDs now include timestamps, matching the format shown in the documentation.

  ### Transcription

  * Added model parameters to the transcription info field.

  ### REST API

  * Fixed the `/domains/member` endpoint to return all non-revoked API tokens.
</Update>

<Update label="January 29, 2026">
  Recording dataOutputs for transcripts and chat, cloud-audio-only recording, laptop lid session handling, CPU load detection improvements, and Kamailio call transfer support.

  ## Overview

  January is a feature-rich month with new recording capabilities including `dataOutputs` for recording-synchronized transcripts, chat messages, and event logs, plus a new `cloud-audio-only` recording type. We've also improved session handling for laptop lid closures, refined CPU load detection, and shipped call transfer support on our new telephony infrastructure.

  Complete release history for our client SDKs is available in our Github release notes:

  * [daily-js](https://github.com/daily-co/daily-js/releases)
  * [react-native-daily-js](https://github.com/daily-co/react-native-daily-js/releases)
  * [daily-react](https://github.com/daily-co/daily-react/releases)
  * [daily-ios](https://github.com/daily-co/daily-client-ios/blob/main/CHANGELOG.md)
  * [daily-android](https://github.com/daily-co/daily-client-android/blob/main/CHANGELOG.md)
  * [daily-python](https://github.com/daily-co/daily-python/blob/main/CHANGELOG.md)

  ***

  ## daily-js

  [View full release notes →](https://github.com/daily-co/daily-js/releases)

  ### 0.87.0

  * Fixed an issue in Chrome where the Compute Pressure API did not work inside an iframe due to permissions policy restrictions.

  ### 0.86.0

  * Introduced a new `dataOutputs` option in `startRecording()` to capture auxiliary data alongside the recording media. Three output types are supported:

    * `event-json` — a JSON file describing recording session events (media file starts, track updates, etc.)
    * `transcript-webvtt` — a WebVTT file with transcription events, timecode-aligned with the recording media (requires an active live transcription)
    * `chat-webvtt` — a WebVTT file with chat messages, timecode-aligned with the recording media

    Data output files are included in the recording download link and written to your custom S3 bucket when configured. Note: these outputs capture events, they do not start services.

  * Added support for a new `cloud-audio-only` recording type. This produces m4a files with the `audio/mp4` content type. It can be used alongside other recording types and does not share an instance ID with RTMP/HLS streaming.

  * Fixed an issue where sessions would attempt to reconnect after long periods of laptop lid closure. Sessions now automatically disconnect after 5 minutes of detected inactivity.

  * Fixed uncaught errors in `join()` and `startCamera()` when no room URL is provided or the URL is invalid. These now properly throw an error and leave `meetingState()` in `"left-meeting"`.

  * Improved the `cpu-load-change` event by requiring multiple consecutive high CPU readings before reporting high load and by refining global decode time calculation to exclude videos with empty frame metrics.

  * Added [compute pressure state](https://developer.mozilla.org/en-US/docs/Web/API/Compute_Pressure_API) to the [`getCpuLoadStats()`](/reference/daily-js/instance-methods/get-cpu-load-stats) API when supported by the browser.

  * Added `max_app_message_size` to `DailyRoomInfo` types.

  ***

  ## react-native-daily-js

  [View full release notes →](https://github.com/daily-co/react-native-daily-js/releases)

  ### 0.83.0

  * Introduced a new `dataOutputs` option in `startRecording()` to capture auxiliary data alongside the recording media. Supports `event-json`, `transcript-webvtt`, and `chat-webvtt` output types.
  * Added support for the new `cloud-audio-only` recording type.
  * Fixed an issue where sessions would attempt to reconnect after long periods of laptop lid closure.
  * Fixed uncaught errors in `join()` and `startCamera()` when no room URL is provided or the URL is invalid.
  * Improved the `cpu-load-change` event accuracy.
  * Added `max_app_message_size` to `DailyRoomInfo` types.
  * Added missing type definitions for streaming and recordings.

  ***

  ## Daily Prebuilt

  * Removed automatic camera turn-off behavior on bad network conditions.

  ***

  ## Dashboard

  * Updated Cloud recording storage tooltip.
  * Removed HIPAA 30-day trial wording.

  ***

  ## Media Services

  ### Telephony

  * Added call transfer support on the new Kamailio-based telephony infrastructure.
  * Added support for numeric SIP usernames.

  ### Recording

  * Added server-side support for `dataOutputs` recording option and the `cloud-audio-only` recording type.
  * Fixed download link file extensions for recordings stored in custom S3 buckets.
</Update>

<Update label="December 19, 2025">
  Recording-synchronized transcripts, gapless audio for raw-tracks, CPU warning notifications, and Prebuilt session resume and background effects fixes.

  ## Overview

  December brings recording-synchronized transcripts, a new gapless audio pipeline for raw-tracks recording, and configurable CPU warning notifications in Daily Prebuilt. We've also improved session resume reliability after laptop lid closures and added automatic detection to disable background effects on underpowered hardware.

  Complete release history for our client SDKs is available in our Github release notes:

  * [daily-js](https://github.com/daily-co/daily-js/releases)
  * [react-native-daily-js](https://github.com/daily-co/react-native-daily-js/releases)
  * [daily-react](https://github.com/daily-co/daily-react/releases)
  * [daily-ios](https://github.com/daily-co/daily-client-ios/blob/main/CHANGELOG.md)
  * [daily-android](https://github.com/daily-co/daily-client-android/blob/main/CHANGELOG.md)
  * [daily-python](https://github.com/daily-co/daily-python/blob/main/CHANGELOG.md)

  ***

  ## Daily Prebuilt

  * Added a new `enable_cpu_warning_notifications` domain and room property to control whether CPU warning notifications are shown to users.
  * Background effects are now automatically disabled when a WebGL software renderer is detected, preventing poor performance on underpowered hardware.
  * Fixed poor network state handling.
  * Fixed session resume issues that could occur after closing and reopening laptop lids.

  ***

  ## Dashboard

  * Added configuration for the new `enable_cpu_warning_notifications` property.
  * Updated settings deletion copy.

  ***

  ## Media Services

  ### Recording

  * Added support for recording-synchronized transcripts via `dataOutputs` in `startRecording()`.
  * New transcoded gapless audio pipeline for raw-tracks recording, producing continuous audio files without gaps.
  * Raw-tracks recording now works with the `force_audio_only_recording` flag.
  * Fixed file extension for WAV files in transcoded gapless audio mode.
  * Fixed a missing room state update during meeting move restore that could cause recording state inconsistencies.

  ### Transcription

  * Deepgram model improvement program opt-out is now enabled by default for improved data privacy.
</Update>

<Update label="November 20, 2025">
  SIP codec negotiation, call transfer fixes, recording enhancements, and Prebuilt breakout room and screen sharing fixes.

  ## Overview

  November is a server-focused release with telephony improvements including SIP codec negotiation and call transfer reliability fixes, recording enhancements, and Daily Prebuilt bug fixes for breakout rooms and screen sharing on Chrome.

  Complete release history for our client SDKs is available in our Github release notes:

  * [daily-js](https://github.com/daily-co/daily-js/releases)
  * [react-native-daily-js](https://github.com/daily-co/react-native-daily-js/releases)
  * [daily-react](https://github.com/daily-co/daily-react/releases)
  * [daily-ios](https://github.com/daily-co/daily-client-ios/blob/main/CHANGELOG.md)
  * [daily-android](https://github.com/daily-co/daily-client-android/blob/main/CHANGELOG.md)
  * [daily-python](https://github.com/daily-co/daily-python/blob/main/CHANGELOG.md)

  ***

  ## Daily Prebuilt

  * Fixed the "request for help" feature from the main room during breakout sessions.
  * Improved handling of blocked-by-browser screen share errors in Chrome.

  ***

  ## Dashboard

  * Removed Intercom chat widget from the dashboard. Contact us at `help@daily.co` for support.

  ***

  ## Media Services

  ### Telephony

  * Added support for preferred codec negotiation based on the SIP invite SDP.
  * Fixed room ID preservation during call transfers when a room is deleted mid-transfer.
  * Fixed SIP username filtering for pinless dial-in configuration.

  ### Recording

  * Fixed stop recording by instance ID to correctly detect the recording type.
  * Optimized audio bitrate to 96kbps for audio-only recordings.
  * The GET recordings API now includes `roomName` in the response.

  ### REST API

  * Fixed 404 errors for presence queries on deleted rooms.
</Update>

<Update label="October 30, 2025">
  Narrower CSP for video backgrounds, audio-only recording property, dynamic SIP dial-in endpoints, and telephony and recording fixes.

  ## Overview

  October brings a Content Security Policy improvement for video background processing, removing the need for the broad `unsafe-eval` directive. We've also added a new `force_audio_only_recording` domain property, dynamic SIP dial-in endpoint creation, and several telephony and recording reliability fixes across our platform.

  Complete release history for our client SDKs is available in our Github release notes:

  * [daily-js](https://github.com/daily-co/daily-js/releases)
  * [react-native-daily-js](https://github.com/daily-co/react-native-daily-js/releases)
  * [daily-react](https://github.com/daily-co/daily-react/releases)
  * [daily-ios](https://github.com/daily-co/daily-client-ios/blob/main/CHANGELOG.md)
  * [daily-android](https://github.com/daily-co/daily-client-android/blob/main/CHANGELOG.md)
  * [daily-python](https://github.com/daily-co/daily-python/blob/main/CHANGELOG.md)

  ***

  ## daily-js

  [View full release notes →](https://github.com/daily-co/daily-js/releases)

  ### 0.85.0

  * You no longer need to specify the broad `unsafe-eval` in your Content Security Policy (CSP) when using video background processing (virtual backgrounds or background blur). You can now use the narrower `wasm-unsafe-eval` instead.
  * Fixed an issue where the initial send settings were not being respected for cam video.

  ***

  ## react-native-daily-js

  [View full release notes →](https://github.com/daily-co/react-native-daily-js/releases)

  ### 0.82.0

  * Fixed an issue where the initial send settings were not being respected for cam video.

  ***

  ## Daily Prebuilt

  * Added a Krisp system overload notification to inform users when audio processing is under heavy CPU load.
  * Fixed recording handling when recording types are configured as comma-separated values.
  * Fixed dynamic chunk loading issues that could cause failures in certain deployment configurations.

  ***

  ## Dashboard

  * Removed Daily Bots dashboard links and unified domain handling.

  ***

  ## Media Services

  ### Telephony

  * Added support for dynamically creating SIP dial-in endpoints.
  * SIP participants are now properly ejected when a room is deleted.
  * Fixed presence data for dial-out participants who are the first to join a room.
  * Fixed pagination in the list phone numbers API.
  * Fixed error handling in the list available numbers API.

  ### Recording and Transcription

  * Added a new `force_audio_only_recording` domain property for audio-only recording.
  * Meeting-move-aware transcription is now enabled by default.
  * Fixed Deepgram extra metadata encoding for transcription sessions.
</Update>

<Update label="September 23, 2025">
  Phone extension support for dial-out, Android 16KB page size compatibility, auto-start recording reliability, and new Picture-in-Picture events.

  ## Overview

  September adds phone extension support for dial-out operations across our client SDKs, Android 16KB page size compatibility for React Native, and improved reliability for auto-start recording and transcription. We've also added new Picture-in-Picture events for Daily Prebuilt and improved handling for unsupported browsers.

  Complete release history for our client SDKs is available in our Github release notes:

  * [daily-js](https://github.com/daily-co/daily-js/releases)
  * [react-native-daily-js](https://github.com/daily-co/react-native-daily-js/releases)
  * [daily-react](https://github.com/daily-co/daily-react/releases)
  * [daily-ios](https://github.com/daily-co/daily-client-ios/blob/main/CHANGELOG.md)
  * [daily-android](https://github.com/daily-co/daily-client-android/blob/main/CHANGELOG.md)
  * [daily-python](https://github.com/daily-co/daily-python/blob/main/CHANGELOG.md)

  ***

  ## daily-js

  [View full release notes →](https://github.com/daily-co/daily-js/releases)

  ### 0.84.0

  * Added support for calling phone extensions during dial-out operations. You can now specify an extension number and wait time before dialing the extension after the main call connects.
  * Added Prebuilt-specific `pip-started` and `pip-stopped` events.
  * Improved reliability of handling auto-start recording and transcription options when joining a room.
  * Improved handling for unsupported browsers. The Daily constructor will now throw an error of `WebRTC not supported or suppressed` if the browser cannot support a call.

  ***

  ## react-native-daily-js

  [View full release notes →](https://github.com/daily-co/react-native-daily-js/releases)

  ### 0.81.0

  * Added support for Android 16KB page size.
  * Added support for calling phone extensions during dial-out operations. You can now specify an extension number and wait time before dialing the extension after the main call connects.
  * Improved reliability of handling auto-start recording and transcription options when joining a room.

  ***

  ## Dashboard

  * Added a cancel plan button to the billing interface.
</Update>

<Update label="August 26, 2025">
  Chrome 140 and Firefox 142 compatibility fixes, pre-join screen sharing, Krisp CPU overload handling, telephony improvements, and Prebuilt accessibility updates.

  ## Overview

  August brings browser compatibility fixes for Chrome 140 and Firefox 142, new screen sharing capabilities before joining a call, and telephony improvements including dial-out extensions and cross-domain SIP transfers. We've also shipped Daily Prebuilt accessibility improvements, a high CPU usage notification, and stability fixes across our media services.

  Complete release history for our client SDKs is available in our Github release notes:

  * [daily-js](https://github.com/daily-co/daily-js/releases)
  * [react-native-daily-js](https://github.com/daily-co/react-native-daily-js/releases)
  * [daily-react](https://github.com/daily-co/daily-react/releases)
  * [daily-ios](https://github.com/daily-co/daily-client-ios/blob/main/CHANGELOG.md)
  * [daily-android](https://github.com/daily-co/daily-client-android/blob/main/CHANGELOG.md)
  * [daily-python](https://github.com/daily-co/daily-python/blob/main/CHANGELOG.md)

  ***

  ## daily-js

  [View full release notes →](https://github.com/daily-co/daily-js/releases)

  ### 0.83.1

  * Updated mediasoup-client for compatibility with Chrome 140. Without this fix, joining or reconnecting to a call without an audio track would fail on Chrome 140.
  * Added a workaround for a [Firefox 142 bug](https://bugzilla.mozilla.org/show_bug.cgi?id=1981040) that caused `daily-js` to incorrectly report bad network conditions due to `roundTripTime`.
  * Fixed a regression in 0.82.0 where `captureOptions` passed to `startScreenShare()` were ignored.
  * Removed deprecated and unused `rtp-tracks` recording support.

  ### 0.82.0

  * Added support for calling `startScreenShare()` prior to `join()`. A call to `preAuth()` or `startCamera()` is still required first to initialize state.
  * Fixed and improved error handling for `setOutputDevicesAsync()`. The method now throws an error if the call fails.
  * Updated dependencies to resolve security vulnerabilities.
  * Bumped Krisp to the latest version with updated models. Added handling for CPU overload which can cause choppy voice output. This will temporarily and silently pause audio processing while the CPU recovers. If overload continues, `daily-js` will emit an [`audio-processor-error`](/reference/daily-js/events/error-events#audio-processor-error) with `errorMsg` of `"Krisp error: system overload"`, turn off the processor, and mute the microphone.

  ***

  ## react-native-daily-js

  [View full release notes →](https://github.com/daily-co/react-native-daily-js/releases)

  ### 0.80.0

  * Updated mediasoup-client dependency to latest.
  * Removed deprecated and unused `rtp-tracks` recording support.

  ### 0.79.0

  * Updated dependencies to resolve security vulnerabilities.

  ***

  ## Daily Prebuilt

  * Fixed unblock instructions in embedded Prebuilt on Chrome on iOS.
  * Added a high CPU usage notification snackbar.
  * Improved accessibility throughout the Prebuilt interface.

  ***

  ## Media Services

  ### Telephony

  * Added support for providing a phone extension in `startDialout()`.
  * Enabled SIP call transfer to non-Daily domains.
  * Improved handling of dial-in properties when creating rooms with dial-in configured.
  * Added `roomName` to transcription webhook events.

  ### Recording

  * Fixed a bug where audio tracks were not being added to recordings.
</Update>

<Update label="July 28, 2025">
  New network status callbacks, improved telephony error handling, and platform-wide stability fixes.

  ## Overview

  This month's updates bring new network status callbacks to our native mobile SDKs, giving you more insight into connection health. We've shipped a new `dialin-error` type (`start-failed`) that triggers when SIP registration fails, a critical audio playback fix for Safari in Daily React, and numerous stability improvements across our backend services.

  Complete release history for our client SDKs is available in our Github release notes:

  * [daily-js](https://github.com/daily-co/daily-js/releases)
  * [react-native-daily-js](https://github.com/daily-co/react-native-daily-js/releases)
  * [daily-react](https://github.com/daily-co/daily-react/releases)
  * [daily-ios](https://github.com/daily-co/daily-client-ios/blob/main/CHANGELOG.md)
  * [daily-android](https://github.com/daily-co/daily-client-android/blob/main/CHANGELOG.md)
  * [daily-python](https://github.com/daily-co/daily-python/blob/main/CHANGELOG.md)

  ***

  ## daily-js

  [View full release notes →](https://github.com/daily-co/daily-js/releases)

  ### 0.81.0

  * Added `ignoreAudioLevel` parameter to `startCustomTrack()` to exclude a track from audio level calculations.
  * Improved `enumerateDevices()` logging and reduced noisy error reporting.

  ***

  ## react-native-daily-js

  [View full release notes →](https://github.com/daily-co/react-native-daily-js/releases)

  ### 0.78.0

  * Added a new `dialin-error` type to `start-failed`.
  * Fixed a potential null pointer exception during module initialization.
  * Improved `enumerateDevices()` logging and reduced noisy error reporting.

  ***

  ## daily-react

  [View full release notes →](https://github.com/daily-co/daily-react/releases)

  ### 0.23.1

  * Fixed an issue that could prevent audio playback in Safari after a participant leaves.
  * Added an optional `interval` parameter to the `useAudioLevelObserver()` hook.
  * Updated the `useNetwork()` hook to return the new `networkState` and `networkStateReasons` properties.
  * Added `user_name` and `rawResponse` to the `Transcription` type definition.

  ***

  ## daily-android

  [View full release notes →](https://github.com/daily-co/daily-client-android/blob/main/CHANGELOG.md)

  ### 0.32.0

  * Added a new `onNetworkConnectionStatusUpdated()` callback to monitor call-critical network connections.
  * Added support for handling mid-call session ID changes.
  * Fixed a potential null pointer exception during device list changes.

  ***

  ## daily-ios

  [View full release notes →](https://github.com/daily-co/daily-client-ios/blob/main/CHANGELOG.md)

  ### 0.32.0

  * Added a new delegate function (`networkConnectionStatusUpdated`) to monitor call-critical network connections.
  * Added support for handling mid-call session ID changes.
  * Fixed a bug where `userID` could be `nil` in the call configuration, even when present in the token.

  ***

  ## daily-python

  [View full release notes →](https://github.com/daily-co/daily-python/blob/main/CHANGELOG.md)

  ### 0.19.4

  * Added `set_log_level()` and a `log_level` init argument for controlling log verbosity.

  ***

  ## Media Services

  ### Telephony and Recording/Livestreaming

  * Added a new `start-failed` error type to the `dialin-error` event. This fires when the SIP address on a room fails SIP registration with the SIP network.
  * Improved handling of non-unique 'from' numbers in PSTN dial-in, allowing multiple participants to join from the same caller ID.
  * Shipped numerous stability improvements for SIP registration, raw tracks recording, and connection reliability.
</Update>

## Older updates

<CardGroup>
  <Card title="2025" href="/changelog/2025">
    5 updates from 2025.
  </Card>

  <Card title="2024" href="/changelog/2024">
    8 updates from 2024.
  </Card>

  <Card title="2023" href="/changelog/2023">
    18 updates from 2023.
  </Card>

  <Card title="2022" href="/changelog/2022">
    16 updates from 2022.
  </Card>

  <Card title="2021" href="/changelog/2021">
    12 updates from 2021.
  </Card>

  <Card title="2020" href="/changelog/2020">
    8 updates from 2020.
  </Card>
</CardGroup>


# Daily Client SDK for Android
Source: https://docs.daily.co/docs/android/index

Build real-time video and audio calling into your native Android applications.

The Daily Client SDK for Android is a native Kotlin/Java library built on WebRTC. It handles media negotiation, network traversal, and participant management so you can focus on building your UI.

<CardGroup>
  <Card title="Quickstart" icon="rocket" href="/docs/android/quickstart">
    Build a working video call app step by step
  </Card>

  <Card title="Screen sharing" icon="display" href="/docs/android/screen-share">
    Add screen share to your Android app
  </Card>

  <Card title="API reference" icon="code" href="https://reference-android.daily.co/">
    Full Kotlin/Java API docs
  </Card>
</CardGroup>

## Hello, world

Add the SDK to your `build.gradle`, then join a call:

```groovy theme={null}
dependencies {
    implementation 'co.daily:client:latest.release'
}
```

```kotlin theme={null}
import co.daily.CallClient
import co.daily.CallClientListener
import co.daily.model.Participant

val call = CallClient(applicationContext)
val videoViews = mutableMapOf<String, VideoView>()

call.addListener(object : CallClientListener {
    override fun onParticipantJoined(participant: Participant) {
        val videoView = VideoView(applicationContext)
        videoViews[participant.id] = videoView
        addVideoViewToMyUI(view = videoView)
        videoView.track = participant.media?.camera?.track
    }

    override fun onParticipantUpdated(participant: Participant) {
        videoViews[participant.id]?.track = participant.media?.camera?.track
    }
})

call.join(url = "https://your-domain.daily.co/room-name") {
    it.error?.apply { Log.e(TAG, "Error joining: $msg") }
    it.success?.apply { Log.i(TAG, "Joined successfully") }
}

// Turn off camera
call.setInputsEnabled(camera = false)

// Leave and release when done
call.leave { }
call.release()
```

## API structure

The SDK is organized around the tasks involved in building a call. For each task you get methods to **update** state, methods to **get** current state, and **events** via `CallClientListener` to react to changes.

<CardGroup>
  <Card title="Call lifecycle" icon="phone" href="https://reference-android.daily.co/daily-android/co.daily/-call-client/index.html">
    `join()`, `leave()`, `callState()`, `CallStateUpdated`
  </Card>

  <Card title="Participants" icon="users" href="https://reference-android.daily.co/daily-android/co.daily/-call-client/participants.html">
    `participants()`, `ParticipantJoined`, `ParticipantUpdated`, `ParticipantLeft`
  </Card>

  <Card title="Media inputs" icon="video" href="https://reference-android.daily.co/daily-android/co.daily/-call-client/update-inputs.html">
    `updateInputs()`, `setInputsEnabled()`, `startScreenShare()`, `InputsUpdated`
  </Card>

  <Card title="Publishing" icon="signal-stream" href="https://reference-android.daily.co/daily-android/co.daily/-call-client/update-publishing.html">
    `updatePublishing()`, `setIsPublishing()`, `PublishingUpdated`
  </Card>

  <Card title="Subscriptions" icon="rss" href="https://reference-android.daily.co/daily-android/co.daily/-call-client/update-subscriptions.html">
    `updateSubscriptions()`, `updateSubscriptionProfiles()`, `setSubscriptionState()`
  </Card>

  <Card title="Active speaker" icon="microphone" href="https://reference-android.daily.co/daily-android/co.daily/-call-client/active-speaker.html">
    `activeSpeaker()`, `ActiveSpeakerChanged`
  </Card>
</CardGroup>

## Resources

<CardGroup>
  <Card title="Demo app" icon="github" href="https://github.com/daily-demos/daily-android-demo">
    A complete working example on GitHub
  </Card>

  <Card title="Starter kit" icon="toolbox" href="https://github.com/daily-demos/daily-android-starter-kit">
    Production-ready boilerplate from Daily's engineering team
  </Card>
</CardGroup>

## Requirements

* minSdkVersion >= 23 (Android 6.0)
* Kotlin 1.6 or later recommended


# Installing the Daily Client SDK for Android
Source: https://docs.daily.co/docs/android/installation

Learn how to get set up with the Daily Client SDK for Android.

## Minimum SDK version

The Daily Client SDK for Android requires a `minSdkVersion` of 21 or greater.

## Installing using Maven

In your top-level `build.gradle` file, add the Maven Central repository:

```groovy theme={null}
repositories {
    // ...
    mavenCentral()
}
```

In your app’s `build.gradle` file, add the Daily Client SDK dependency:

```groovy theme={null}
dependencies {
    // ...
    implementation 'co.daily:client:0.39.1'
}
```

Optionally, to use the camera video processor (for background blur and replacement), also add the following dependency:

```groovy theme={null}
dependencies {
    // ...
    implementation 'co.daily:client-videoprocessor-plugin:0.1.1'
}
```

## App setup

Make sure the following permissions are in your app’s `AndroidManifest.xml`:

```xml theme={null}
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />

<uses-permission android:name="android.permission.FOREGROUND_SERVICE"/>
<uses-permission android:name="android.permission.FOREGROUND_SERVICE_CAMERA"/>
<uses-permission android:name="android.permission.FOREGROUND_SERVICE_MICROPHONE"/>
<uses-permission android:name="android.permission.FOREGROUND_SERVICE_MEDIA_PROJECTION"/>
<uses-permission android:name="android.permission.POST_NOTIFICATIONS"/>

<application>
  <!--
    A foreground service is needed in the following cases:
    - if you wish to screen share
    - if you wish to keep your call running while the app is in background
  -->
  <service
        android:name=".YourForegroundService"
        android:exported="false"
        android:foregroundServiceType="phoneCall|camera|microphone|mediaProjection" />
</application>
```

> The `foregroundServiceType` `phoneCall`, `camera` and `microphone` are needed in order to give your app the ability to continue running calls while in the background

> The `foregroundServiceType` `mediaProjection` is only needed if you wish to do screen sharing.

## Continuing calls in the background

In order to give your app the ability to continue running calls while in the background, you can start a foreground service that shows an in-call notification while your call is active.

You can read more about foreground services in the [Android documentation](https://developer.android.com/guide/components/foreground-services).

For an example of a foreground service that customizes and shows a notification, see [the one that is bundled with react-native-daily-js](https://github.com/daily-co/react-native-daily-js/blob/main/android/src/main/java/com/daily/reactlibrary/DailyOngoingMeetingForegroundService.java).

***

To learn more about building an app with the Daily Client SDK for Android, see our [Android Overview](/docs/android) and [Android demo app](https://github.com/daily-demos/daily-android-demo).


# Daily Android Mobile SDK Kotlin Quickstart
Source: https://docs.daily.co/docs/android/quickstart

Learn how to get started using the Daily Android Mobile SDK with Kotlin to create a video mobile application

In this quickstart, we will introduce you to [Daily's Client SDK for Android](/docs/android) by walking through the creation of a simple video call application. By the end of this walkthrough, you'll have a starting point for writing Daily-powered video apps for Android with Kotlin.

This walkthrough will implement the following features:

* Creating and joining a public Daily room
* Asking for required application permissions
* Displaying videos from local and remote room participants
* Managing local microphone and camera input
* Leaving the call

You can find the full codebase of this Android app [on GitHub](http://github.com/daily-demos/quickstart-android).

## Prerequisites

Before you get started, make sure you have a functioning Android development environment including [Android Studio](https://developer.android.com/studio). You will also need a [free Daily account](https://www.daily.co/signup).

If you plan to test your app on a hardware device, make sure you have [debugging enabled on the device](https://developer.android.com/studio/debug/dev-options).

If you plan to test your app on an emulator, make sure you [have a virtual device created](https://developer.android.com/studio/run/managing-avds). Note that by default, the emulator will use an emulated camera.

## Create a Daily room

Begin by navigating to Daily's developer dashboard and [creating a new Daily room](https://dashboard.daily.co/rooms/create).

<img alt="Create a Room in the Daily Dashboard" />

Give your room a name and click the "Create room" button. All other options can be left at their defaults.

Make note of your Daily room URL. We'll be using it in the code shortly.

## Create a new Android project

Next, open Android Studio. From the Welcome screen, create a new project using the "Empty Views Activity" template.

<img alt="Create a new project using the Empty Activity template" />

Give your project a name and make sure the project language is set to Kotlin. Next, click the "Finish" button to have Android Studio set up your new project.

Note that if this is your first Kotlin project setup, it can take a few minutes for Android Studio to download relevant dependencies and initialize the project for the first time.

## Add a dependency on Daily's Client SDK for Android

With your new project created, you can add the Daily's Android SDK as a dependency. Android Studio uses [Gradle](https://gradle.org/) as its default build tool and dependency manager. Open the project's Gradle build script in the app directory:

<img alt="Add Daily's Client SDK for Android as a dependency to Gradle" />

Once open, add `'co.daily:client:0.8.0'` to the dependencies object:

```kotlin theme={null}
dependencies {
  implementation 'co.daily:client:0.8.0'
  //...
}
```

<Note>
  The latest release of Daily's Client SDK for Android is <code>0.8.0</code> at
  the time of this publication. When developing your production application, we
  recommend referencing the

  <a href="https://mvnrepository.com/artifact/co.daily/client">
    latest stable version
  </a>

  .
</Note>

Save the Gradle file and then sync the changes by using the `Sync Project with Gradle Files` command in the Android Studio File menu.

<img alt="Sync Project with Gradle Files" />

## Import namespaces and classes

After adding a dependency on Daily's Android SDK, we can import relevant classes. Open `app/java/com.example.[YOUR_APP_NAME]/MainActivity.kt` and add the following `import` statements:

```kotlin theme={null}
// ...Existing imports above...

```

## Setting up the Main Activity

The next step is modifying the `MainActivity` class to set up the basic structure of our application.

Start by adding the `TAG` member variable and two functions:

* `initializeCallClient()`
* `checkPermissions()`

Then, add a call to `checkPermissions()` from the `onCreate()` function.

```kotlin theme={null}
class MainActivity : AppCompatActivity() {
  private val TAG: String = "MainActivity"

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    checkPermissions()
  }

  private fun initializeCallClient() {
      // Initialize the Daily Call Client object once permissions have been granted
  }

  private fun checkPermissions() {
      // Check permissions have been granted and if not, ask for permissions
  }
}
```

Build the application to verify that there are not errors or warnings.

## Configure application permissions

The application will need a number of user permissions in order to access the internet, use the device camera, and record and play audio. To request these permissions, we have to declare what we need as part of our app manifest.

Open `manifests/AndroidManifest.xml`. Then, add the following `uses-permission` and `uses-feature` elements inside the `<manifest>` tag:

```xml theme={null}
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools">
  <uses-feature android:name="android.hardware.camera" android:required="false" />
  <uses-permission android:name="android.permission.INTERNET" />
  <uses-permission android:name="android.permission.CAMERA" />
  <uses-permission android:name="android.permission.RECORD_AUDIO" />
  <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
  <!-- ... -->
</manifest>
```

Modifying the app manifest tells Android which permissions the app *intends* to use. However, we still need to request these permissions from the user. To do so, we'll add some additional code to `MainActivity.kt`, which uses Android's built-in tools for creating [runtime permission requests](https://developer.android.com/training/permissions/requesting).

First, create a member variable named `requestPermissionLauncher` and use it to register an activity using the `RequestMultiplePermissions` [contract](https://developer.android.com/reference/androidx/activity/result/contract/ActivityResultContracts):

```kotlin theme={null}
private val TAG: String = "MainActivity"

private val requestPermissionLauncher =
   registerForActivityResult(ActivityResultContracts.RequestMultiplePermissions()) { result ->
       if (result.values.any { !it }) {
           checkPermissions()
       } else {
           // Permission is granted, we can initialize the call
           initializeCallClient()
       }
   }
```

The activity `RequestMultiplePermissions` takes an array of permissions the application would like to request.

In the activity callback, we check to see if additional permissions are needed. If so, we run `checkPermissions()`. If not, the application can call `initializeCallClient()` to begin setting up the video call.

Next, implement the `checkPermissions()` method you defined within the `MainActivity` class as follows:

```kotlin theme={null}
private fun checkPermissions() {

    // Check whether permissions have been granted.
    // If not, ask for permissions
    val appContext: Context = applicationContext

    val permissionList: Array<String> = appContext.packageManager.getPackageInfo(
       appContext.packageName,
       PackageManager.GET_PERMISSIONS
    ).requestedPermissions

    val notGrantedPermissions:MutableList<String> = ArrayList()
    for(permission in permissionList) {
       if (ContextCompat.checkSelfPermission(appContext, permission)
           != PackageManager.PERMISSION_GRANTED) {
               notGrantedPermissions.add(permission)
       }
    }

    if (notGrantedPermissions.isNotEmpty()) {
       requestPermissionLauncher.launch(notGrantedPermissions.toTypedArray())
    } else {
       // Permission is granted, we can initialize the call
       initializeCallClient()
    }

}
```

The `checkPermissions()` method above gets the list of permissions the application needs from the app manifest and checks whether they have already been granted.

If all of permissions have been granted, the application begins initializing the Daily `CallClient` object by calling the `initializeCallClient()` method.

If the application requires additional permissions from the user, it launches the built-in request flow.

<Note>
  For this quickstart we're not handling conditions where the user declines
  permissions, but in a real application you would want to do that.
</Note>

## Define the user interface

After implementing permission handling, we can define the user interface for our application. The user interface will include the following:

* Displaying participants' video
* Presenting call controls for toggling the camera/microphone and leaving the meeting

To implement the above, we'll create two main UI elements:

* A main UI that contains call controls and a participant list
* A wrapper around the Daily [`VideoView`](https://reference-android.daily.co/daily-android/co.daily.view/-video-view/index.html) that holds each participant's video

Open the `/res/layout/activity_main.xml` layout file and switch to Code view:

<img alt="Editing UI Code in Android Studio" />

Replace the default UI XML with the following:

```xml theme={null}
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <ToggleButton
       android:id="@+id/toggleCamera"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginTop="16dp"
       android:checked="true"
       android:textOff="Cam Off"
       android:textOn="Cam On"
       app:layout_constraintEnd_toStartOf="@+id/toggleMicrophone"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent" />

   <ToggleButton
       android:id="@+id/toggleMicrophone"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginTop="16dp"
       android:checked="false"
       android:textOff="Muted"
       android:textOn="Unmuted"
       app:layout_constraintEnd_toStartOf="@+id/leave"
       app:layout_constraintStart_toEndOf="@+id/toggleCamera"
       app:layout_constraintTop_toTopOf="parent" />

   <Button
       android:id="@+id/leave"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginTop="16dp"
       android:text="Leave Call"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toEndOf="@+id/toggleMicrophone"
       app:layout_constraintTop_toTopOf="parent" />

   <LinearLayout
       android:id="@+id/videoLinearLayout"
       android:layout_width="match_parent"
       android:layout_height="0dp"
       android:layout_marginStart="8dp"
       android:layout_marginTop="8dp"
       android:layout_marginEnd="8dp"
       android:layout_marginBottom="8dp"
       android:orientation="vertical"
       android:background="@color/black"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintTop_toBottomOf="@+id/toggleCamera"/>

</androidx.constraintlayout.widget.ConstraintLayout>
```

The XML above creates two `ToggleButton`s for controlling the camera and microphone, a single `Button` to leave the call, and a `LinearLayout` to contain participant videos.

Next, we need a wrapper for `VideoView`. In `/res/layout`, create a new Android Resource file named `participant_view.xml`. Replace the default UI XML with the following:

```xml theme={null}
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="300dp"
   android:layout_margin="20dp">

   <co.daily.view.VideoView
       android:id="@+id/participant_video"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       />

</androidx.constraintlayout.widget.ConstraintLayout>
```

<Note>
  Before you build and run the application, verify that you've created a device
  emulator or that your physical device is set up for debugging.
</Note>

Build and run the application by clicking the "Play" button in the debug toolbar at the top of the Android Studio IDE window:

<img alt="Run button in the Android Studio debug toolbar" />

The application should prompt you for permissions and, once granted, display the basic interface you created.

<img alt="Application User Interface" />

You won't see any video just yet because we haven't set up the call client or joined a Daily room. We'll do that next.

## Create the call client

Now that the basics of the application are in place, we can implement functionality to join a call and display participant videos.

The [`CallClient`](https://reference-android.daily.co/daily-android/co.daily/-call-client/index.html) is the main interface into your Daily video call. It should be instantiated and retained for at least the duration of the video call session.

Open `MainActivity.kt` and locate the `initializeCallClient()` method. Within it, create an instance of `CallClient` followed by a map of `VideoView` objects:

```kotlin theme={null}
private fun initializeCallClient() {
  // Create call client
  val call = CallClient(applicationContext)

  // Create map of video views
  val videoViews = mutableMapOf<ParticipantId, VideoView>()
}
```

Next, set up relevant event listeners within `initializeCallClient()`. Start by retrieving the participant layout view within this method:

```kotlin theme={null}
private fun initializeCallClient() {

  //...Call client and video view map creation logic above...

  val layout = findViewById<LinearLayout>(R.id.videoLinearLayout)
}
```

Then, add the relevant `CallClient` event listeners. These events are raised in response to actions like meeting participants joining, leaving, or being updated:

```kotlin theme={null}
private fun initializeCallClient() {

  //...Call client and video view map creation logic above...

  val layout = findViewById<LinearLayout>(R.id.videoLinearLayout)

  // Listen for events
  call.addListener(object : CallClientListener {

    // Handle a remote participant joining
    override fun onParticipantJoined(participant: Participant) {
        val participantView = layoutInflater.inflate(R.layout.participant_view, layout, false)

        val videoView = participantView.findViewById<VideoView>(R.id.participant_video)
        videoView.track = participant.media?.camera?.track
        videoViews[participant.id] = videoView

        layout.addView(participantView)
    }

    // Handle a participant updating (e.g. their tracks changing)
    override fun onParticipantUpdated(participant: Participant) {
        val videoView = videoViews[participant.id]
        videoView?.track = participant.media?.camera?.track
    }
  })
}
```

For each participant who joins, we create an instance of the `VideoView` UI element. The `VideoView` instance has its track set to the joining participant's available video track.

If a participant is updated (for example, by turning off their camera), we update that participant's `VideoView` accordingly.

## Join a call

Now that our application has a `CallClient` instance and can react to meeting participant events, we're ready to join a room. To do this, call the `join()` function and pass in the URL of the Daily room you created at the start of this tutorial.

```kotlin theme={null}
private fun initializeCallClient() {

  //...Logic we added in prior steps above...

  // Join the call
  call.join(url = "[YOUR_DAILY_ROOM_URL]") {
    it.error?.apply {
        Log.e(TAG, "Got error while joining call: $msg")
    }
    it.success?.apply {
        Log.i(TAG, "Successfully joined call.")
    }
  }
}
```

Replace `"[YOUR_DAILY_ROOM_URL]"` with th URL of your room. You can find the room URL in your [Daily developer dashboard](https://dashboard.daily.co/rooms).

Go ahead and run the application again. Once you have successully joined the meeting, if you are running on actual hardware, you should see your Android device's camera video being shown as a participant in the application. If you are using the Android emulator, you should see an emulated camera.

<img alt="Application running in emulator" />

To test the app with a remote participant, open the room URL in your browser on any device. Once you've joined via the browser, the new participant's video should appear in the app view on your Android device or emulator.

<img alt="Application running in emulator with a remote participant" />

## Toggling microphone and camera states

Now that we have participant video being displayed in the app, we can implement call controls.

We'll begin by checking the initial state of the local participant's microphone and camera and reflect it in the call control UI.

To do so, initialize the toggle button member variables within the `MainActivity` class definition:

```kotlin theme={null}
private val TAG: String = "MainActivity"
private lateinit var toggleCamera: ToggleButton
private lateinit var toggleMicrophone: ToggleButton
```

Next, modify `onCreate()` to find the toggle buttons within the application layout:

```kotlin theme={null}
override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)

   toggleCamera = findViewById(R.id.toggleCamera)
   toggleMicrophone = findViewById(R.id.toggleMicrophone)

   checkPermissions()
}
```

In the `join()` callback we defined earlier, check the `inputs()` function to get current camera and microphone states:

```kotlin theme={null}
// Join the call
call.join(url = "[YOUR_DAILY_ROOM_URL]") {
   it.error?.apply {
       Log.e(TAG, "Got error while joining call: $msg")
   }
   it.success?.apply {
       Log.i(TAG, "Successfully joined call.")
       toggleCamera.isChecked = call.inputs().camera.isEnabled
       toggleMicrophone.isChecked = call.inputs().microphone.isEnabled
   }
}
```

Next, we'll react to changes in the local device state by overriding the `onInputsUpdated()` event handler within the call client listener:

```kotlin theme={null}
call.addListener(object : CallClientListener {

  // ...Previously-defined handlers above...

  // Handle local input settings being updated (e.g., the camera being disabled or enabled)
  override fun onInputsUpdated(inputSettings: InputSettings) {
    toggleCamera.isChecked = inputSettings.camera.isEnabled
    toggleMicrophone.isChecked = inputSettings.microphone.isEnabled
  }
}
```

Finally, let's allow the end user to toggle their input device state. We'll do so using the [`setInputEnabled()`](https://reference-android.daily.co/daily-android/co.daily/-call-client/set-input-enabled.html) call client instance method. This method will be defined within `initializeCallClient()` and invoked when the microphone and camera button states change:

```kotlin theme={null}
private fun initializeCallClient() {
  //...Previously-defined logic above...

  toggleMicrophone.setOnCheckedChangeListener { _, isChecked ->
    Log.d("BUTTONS", "User tapped the Mute button")
    call.setInputEnabled(OutboundMediaType.Microphone, isChecked)
  }

  toggleCamera.setOnCheckedChangeListener { _, isChecked ->
    Log.d("BUTTONS", "User tapped the Cam button")
    call.setInputEnabled(OutboundMediaType.Camera, isChecked)
  }
}
```

## Leaving a call

Now that we're done with the video handling and device toggling functionality, we'll implement a final critical feature: leaving the call.

The application user should be able to disconnect from the Daily room by tapping the Leave button. This action invokes the call client's [`leave()`](https://reference-android.daily.co/daily-android/co.daily/-call-client/leave.html) method. Add the following code within `initializeCallClient()`:

```kotlin theme={null}
private fun initializeCallClient() {
  //...Previously-defined logic above...

  findViewById<Button>(R.id.leave)
    .setOnClickListener {
        Log.d("BUTTONS", "User tapped the Leave button")
        call.leave {
          it.error?.apply {
            Log.e(TAG, "Got error while leaving call: $msg")
          } ?: Log.d(TAG, "Successfully left call")
      }
    }
}
```

Go ahead and run the application once more. This time, the cam and mic buttons should reflect the correct initial device state. Tapping the toggle buttons should toggle video and audio. Tapping the Leave button should exit the video call.

## Wrapping up

This quickstart walked you through the basics of using the Daily's Client SDK for Android to build a simple video call app. You should now be familiar with:

* How to create the app with appropriate dependencies and permissions
* How to join a Daily room
* How to display participant video in your Android app
* How to toggle the local participant's microphone and camera
* How to leave the Daily room

To delve further into our Android SDK, please refer to our [reference documentation](https://reference-android.daily.co/index.html) or reach out [to our support team](https://www.daily.co/company/contact/support/)


# Daily Android Mobile SDK Screen Share Quickstart
Source: https://docs.daily.co/docs/android/screen-share

Learn how to screen share using the Daily Android Mobile SDK

## Share a screen using Daily's Android SDK

Screen sharing enables the local participant to display the contents of their screen to other users in the meeting.

Before you begin, ensure that you understand how to start a video call. For details, see the [Android Overview](/docs/android/).

This guide will describe how to implement screen sharing using the Android SDK, showing you some examples, and pointing you to where you can learn more.

#### How to start a screen share

The first task for the app is to request the `MediaProjection` permission activity.
It must validate that the result code is `Activity.RESULT_OK` before calling the Daily SDK to initiate the screen sharing.

Once the permission is granted, the `daily-android` SDK can be invoked to start screen sharing.

The following code snippet shows how you might start a screen share:

```kotlin theme={null}

// Create call client
val call = CallClient(applicationContext)

// initializing the mediaProjectionManager that we are going to use later to ask for the screen share intent
val mediaProjectionManager = getSystemService(Context.MEDIA_PROJECTION_SERVICE) as MediaProjectionManager

private val requestMediaProjection =
    registerForActivityResult(ActivityResultContracts.StartActivityForResult()) { result ->
        if (result.resultCode == Activity.RESULT_OK) {
            // Once the permission is granted we can invoke the Daily SDK to start screen share
            val mediaProjectionPermissionResultData: Intent? = result.data
            if (mediaProjectionPermissionResultData != null) {
                // using the start screen share convenience method
                call.startScreenShare(mediaProjectionPermissionResultData)

                // Other possible approach is to use the updateInputs method.
                // In this case, first we need to set the media projection intent
                call.setScreenShareProjectionIntent(mediaProjectionPermissionResultData)
                // and later invoke to enable the screen video.
                call.updateInputs(InputSettingsUpdate(
                    screenVideo = ScreenVideoInputSettingsUpdate(
                        isEnabled = Enable(),
                    )
                ))
            }
        } else {
            Log.e(TAG, "Denied permission to start media projection.")
        }
    }

// Private method that must be invoked from the app to request permission and start screen share
private fun startScreenShare() {
    // Creating the intent and requesting permission to start screen share
    val mediaProjectionIntent = mediaProjectionManager.createScreenCaptureIntent()
    requestMediaProjection.launch(mediaProjectionIntent)
}


```

<Note>
  To confirm that screen sharing started, listen for [onInputsUpdated](https://reference-android.daily.co/daily-android/co.daily/-call-client-listener/on-inputs-updated.html) event and check the property `screenVideo`.
</Note>

<Warning>
  To use screen sharing, a Foreground Service is required. This is needed because the app performs tasks that continue even when the app is not in the foreground.
  You can find more details about how to start a Foreground Service in our [installation guide](/docs/android/installation#app-setup).
</Warning>

#### How to stop screen share

The following code snippet shows how you might stop a screen share:

```kotlin theme={null}

// Create call client
val call = CallClient(applicationContext)

// using the stop screen share convenience method
call.stopScreenShare()

// Other possible approach is to use the updateInputs method.
call.updateInputs(InputSettingsUpdate(
    screenVideo = ScreenVideoInputSettingsUpdate(
        isEnabled = Disable(),
    )
))


```

#### How to check if the local screen sharing is enabled

The following code snippet shows how you might check if the local screen sharing is enabled:

```kotlin theme={null}

// Create call client
val call = CallClient(applicationContext)

// checking if the local screen share is enabled
call.inputs().screenVideo.isEnabled

```

#### Demo app

To see a working example of how to interact with the Daily Client SDK for screen sharing, see our [Android demo app](https://github.com/daily-demos/daily-android-demo).


# Call configuration
Source: https://docs.daily.co/docs/daily-js/concepts/call-configuration

Understand how DailyCallOptions merges across constructor, load(), preAuth(), startCamera(), and join().

`DailyCallOptions` can be passed to several methods: the factory constructor (`createCallObject`, `createFrame`, etc.), [`load()`](/reference/daily-js/instance-methods/load), [`preAuth()`](/reference/daily-js/instance-methods/pre-auth), [`startCamera()`](/reference/daily-js/instance-methods/start-camera), and [`join()`](/reference/daily-js/instance-methods/join).

Each call merges the new options into the existing internal config, with later values overriding earlier ones. The key question is **when a given setting goes live** — because once it does, passing it again has no effect.

<Card title="DailyCallOptions reference" icon="code" href="/reference/daily-js/types/daily-call-options">
  Full list of all call properties and their types
</Card>

## When settings go live

### 1. On bundle load

Settings that control how the call bundle is fetched and evaluated go live the moment the bundle loads. The bundle loads on the first call to `load()`, `preAuth()`, `startCamera()`, or `join()` — whichever comes first.

Examples: `dailyConfig.bundlePathOverride`, `dailyConfig.avoidEval`

Any value set on these before the bundle loads will be overridden by a later call, but once the bundle has loaded, further changes to these settings are ignored.

### 2. On device initialization

Settings related to device and media pipeline startup go live when devices are first initialized — either in `startCamera()`, or in `join()` if `startCamera()` was not called first.

Examples: `startAudioOff`, `startVideoOff`, `inputSettings`, `dailyConfig.alwaysIncludeMicInPermissionPrompt`, `dailyConfig.alwaysIncludeCamInPermissionPrompt`, `dailyConfig.enableIndependentDevicePermissionPrompts`

Values passed across multiple methods are merged and overridden up until that initialization point. After devices have started, these settings no longer apply.

### 3. On join (and for the duration of the call)

Settings related to the call session go live at `join()` and remain in effect for the duration. Most of these also have dedicated methods for updating them dynamically after joining.

Examples: `userName`, `proxyUrl`, `receiveSettings`, `sendSettings`, `dailyConfig.noAutoDefaultDeviceChange`, `dailyConfig.micAudioMode`

The last value passed before or at `join()` is what takes effect. If you pass `userName` to the constructor and again to `join()`, the `join()` value wins.

### 4. `url` and `token`

These must be set in the config by the time `preAuth()` or `join()` is called — either passed directly to those methods or set in an earlier call. They have an additional constraint: **if you call `preAuth()`, the `url` and `token` passed there must match what is used at `join()`.**

* If you pass a token to `preAuth()`, you don't need to pass it again to `join()` — but if you do, it must be the same token.
* If you don't pass a token to `preAuth()`, you cannot pass one to `join()`.
* Mismatching the url or token between `preAuth()` and `join()` will cause the join to fail.

## Recommendation: pass config once

Because settings go live at different points, spreading config across multiple method calls can produce subtle, hard-to-trace behavior. The simplest approach is to pass everything once.

For most apps, that means passing the full config to `preAuth()` or `join()`:

```javascript theme={null}
await call.preAuth({
  url: 'https://your-domain.daily.co/room-name',
  userName: 'Alice',
  startAudioOff: true,
  token: meetingToken,
});
await call.join();
```

If you use `startCamera()` for a pre-join preview, pass only what's needed to start the devices there and leave everything else for `join()`:

```javascript theme={null}
// Device setup only
await call.startCamera({
  inputSettings: {
    audio: { processor: { type: 'noise-cancellation' } },
  },
});

// Everything else at join time
await call.join({
  url: 'https://your-domain.daily.co/room-name',
  userName: 'Alice',
  token: meetingToken,
});
```

The constructor is appropriate for settings that are truly global to the instance — things like `subscribeToTracksAutomatically` or `dailyConfig.bundlePathOverride` — but avoid splitting call-specific options like `url`, `token`, or `userName` across multiple methods.


# Call Modes
Source: https://docs.daily.co/docs/daily-js/concepts/call-modes

Choose between iframe-based and call object modes to match your integration requirements.

Daily supports two fundamental integration modes. The mode you choose determines how much UI Daily renders versus how much you build yourself.

<CardGroup>
  <Card title="Iframe Mode" icon="window">
    Daily renders a full call UI inside an `<iframe>`. Best for fast integration with minimal custom UI work.
  </Card>

  <Card title="Call Object Mode" icon="code">
    Headless — Daily manages WebRTC and media, but you build every pixel of UI. Maximum flexibility.
  </Card>
</CardGroup>

## Iframe Mode

In iframe mode, Daily creates an `<iframe>` element and loads its full prebuilt call UI inside it. You interact with the call through the `Daily` JavaScript API, but the camera tiles, controls, and layout all live inside the iframe.

This mode is ideal when:

* You want a working video call in minutes
* Custom branding is handled via [themes](/docs/prebuilt/customizing-daily-prebuilt-calls-with-color-themes) rather than custom components
* You're embedding a call widget into an existing page

### Factory methods

Three factory methods create iframe-backed instances:

<Tabs>
  <Tab title="createFrame">
    [`createFrame()`](/reference/daily-js/factory-methods/create-frame) creates and appends a new `<iframe>` element. Optionally accepts a parent element and/or properties object.

    ```typescript theme={null}
    // Appends iframe to document.body with a default floating style
    const call = Daily.createFrame();

    // Appends iframe to a specific container
    const call = Daily.createFrame(
      document.getElementById('call-container'),
      { showFullscreenButton: false }
    );
    ```

    When `parentEl` is `document.body`, the default `iframeStyle` is a fixed-position widget (375×450 px, bottom-right). When a custom container is provided the iframe stretches to fill it (`width: 100%; height: 100%; border: 0`).
  </Tab>

  <Tab title="wrap">
    [`wrap()`](/reference/daily-js/factory-methods/wrap) wraps an existing `<iframe>` element that you control. Useful for when you need complete control over the iframe's lifecycle and properties.

    ```html theme={null}
    <iframe
      id="my-iframe"
      allow="microphone; camera; autoplay; display-capture"
    ></iframe>
    ```

    ```typescript theme={null}
    const iframe = document.getElementById('my-iframe') as HTMLIFrameElement;

    const call = Daily.wrap(iframe, {
      url: 'https://your-domain.daily.co/hello',
    });
    ```

    The `allow` attribute is required — without `microphone` and `camera` the browser will block device access, and without `display-capture` screen sharing will fail. `createFrame()` and `createTransparentFrame()` set this automatically; with `wrap()` you are responsible for it.

    The iframe must already exist in the DOM before calling `wrap()`.
  </Tab>

  <Tab title="createTransparentFrame">
    [`createTransparentFrame()`](/reference/daily-js/factory-methods/create-transparent-frame) creates a full-viewport, pointer-events-none iframe layered on top of your page. Use this when you need Daily's audio/video without its default UI blocking interaction with your own UI.

    ```typescript theme={null}
    const call = Daily.createTransparentFrame({
      url: 'https://your-domain.daily.co/hello',
    });
    ```

    The iframe is positioned `fixed; top: 0; left: 0; width: 100%; height: 100%` with `pointer-events: none`.
  </Tab>
</Tabs>

### Full iframe example

```typescript theme={null}
import Daily from '@daily-co/daily-js';

const call = Daily.createFrame(
  document.getElementById('call-container'),
  {
    url: 'https://your-domain.daily.co/hello',
    showLeaveButton: true,
    iframeStyle: {
      width: '100%',
      height: '100%',
      border: '0',
    },
  }
);

call.on('joined-meeting', (event) => {
  console.log('Joined!', event.participants);
});

await call.join();
```

## Call Object Mode

Call object mode is headless. Daily loads its media engine but renders no UI. Your application receives participant state and media tracks, and you render everything yourself.

This mode is created with [`createCallObject()`](/reference/daily-js/factory-methods/create-call-object):

```typescript theme={null}
static createCallObject(properties?: DailyFactoryOptions): DailyCall
```

### Call object example

```typescript theme={null}
import Daily from '@daily-co/daily-js';

const call = Daily.createCallObject({
  url: 'https://your-domain.daily.co/hello',
  subscribeToTracksAutomatically: true,
});

// You handle all rendering
call.on('track-started', ({ participant, track, type }) => {
  if (type === 'video' && !participant?.local) {
    const videoEl = document.createElement('video');
    videoEl.autoplay = true;
    videoEl.srcObject = new MediaStream([track]);
    document.getElementById('video-grid')?.appendChild(videoEl);
  }
});

call.on('track-stopped', ({ track }) => {
  // remove video element whose srcObject contains this track
});

await call.join();
```

<Note>
  Several properties are iframe-only and log a console error in call object mode: `showLocalVideo`, `showParticipantsBar`, `activeSpeakerMode`, `customTrayButtons`, `customIntegrations`.

  Conversely, `receiveSettings` is only available in call object mode.
</Note>

## Choosing a Mode

| Criterion                            | Iframe Mode            | Call Object Mode                       |
| ------------------------------------ | ---------------------- | -------------------------------------- |
| Time to first call                   | Minutes                | Hours–days                             |
| Custom UI                            | Limited (CSS + themes) | Full control                           |
| Track access                         | Via events             | Via events + direct `MediaStreamTrack` |
| React / custom framework integration | Moderate               | Native                                 |

## Next steps

<CardGroup>
  <Card title="Prebuilt UI" icon="window" href="/docs/prebuilt/index">
    Learn what Daily Prebuilt offers out of the box — themes, custom buttons, language settings, and more
  </Card>

  <Card title="API Reference" icon="code" href="/reference/daily-js/factory-methods/create-call-object">
    Explore the full factory method and instance method reference for `DailyCall`
  </Card>
</CardGroup>


# Events
Source: https://docs.daily.co/docs/daily-js/concepts/events

Subscribe to Daily call events using on(), once(), and off() with full TypeScript type narrowing.

Daily uses a typed event system built on Node.js `EventEmitter`. Every state change — participant joins, track goes live, recording starts, network degrades — is surfaced as a typed event object.

## Subscribing to Events

```typescript theme={null}
// 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);
```

All three methods return the `DailyCall` instance for chaining.

## Base Event Shape

Every event object extends `DailyEventObjectBase`:

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

## TypeScript Type Narrowing

The `DailyEventObject<T>` generic type maps event name strings to their specific payload types. TypeScript will narrow the handler argument automatically:

```typescript theme={null}
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);
});
```

## Event Reference

### Lifecycle Events

| Event                                                                                            | Payload type                   | Description                                                             |
| ------------------------------------------------------------------------------------------------ | ------------------------------ | ----------------------------------------------------------------------- |
| [`loading`](/reference/daily-js/events/lifecycle-events#loading)                                 | `DailyEventObjectNoPayload`    | The Daily call bundle has started loading (iframe mode).                |
| [`load-attempt-failed`](/reference/daily-js/events/lifecycle-events#load-attempt-failed)         | `DailyEventObjectGenericError` | The call bundle failed to load. `errorMsg` has details.                 |
| [`loaded`](/reference/daily-js/events/lifecycle-events#loaded)                                   | `DailyEventObjectNoPayload`    | The call bundle finished loading.                                       |
| [`started-camera`](/reference/daily-js/events/settings-events#started-camera)                    | —                              | Camera/mic acquisition completed (before joining).                      |
| [`camera-error`](/reference/daily-js/events/settings-events#camera-error)                        | `DailyEventObjectCameraError`  | Camera or mic acquisition failed.                                       |
| [`joining-meeting`](/reference/daily-js/events/lifecycle-events#joining-meeting)                 | `DailyEventObjectNoPayload`    | `join()` was called; connection in progress.                            |
| [`joined-meeting`](/reference/daily-js/events/lifecycle-events#joined-meeting)                   | `DailyEventObjectParticipants` | Successfully joined. `participants` contains the full initial snapshot. |
| [`left-meeting`](/reference/daily-js/events/lifecycle-events#left-meeting)                       | `DailyEventObjectNoPayload`    | `leave()` or ejection completed.                                        |
| [`call-instance-destroyed`](/reference/daily-js/events/lifecycle-events#call-instance-destroyed) | `DailyEventObjectNoPayload`    | `destroy()` was called.                                                 |
| [`access-state-updated`](/reference/daily-js/events/lifecycle-events#access-state-updated)       | `DailyEventObjectAccessState`  | Room access level changed (e.g. knock-to-join lobby admission).         |

```typescript theme={null}
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');
  }
});
```

### Participant Events

| Event                                                                                                      | Payload type                          | Description                                                                                                              |
| ---------------------------------------------------------------------------------------------------------- | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
| [`participant-joined`](/reference/daily-js/events/participant-events#participant-joined)                   | `DailyEventObjectParticipant`         | A remote participant entered the room.                                                                                   |
| [`participant-updated`](/reference/daily-js/events/participant-events#participant-updated)                 | `DailyEventObjectParticipant`         | Any field on a participant changed.                                                                                      |
| [`participant-left`](/reference/daily-js/events/participant-events#participant-left)                       | `DailyEventObjectParticipantLeft`     | A remote participant left or was ejected. `reason` is `'hidden'` if they remain on the call but no longer have presence. |
| [`participant-counts-updated`](/reference/daily-js/events/participant-events#participant-counts-updated)   | `DailyEventObjectParticipantCounts`   | Aggregate `present`/`hidden` counts changed.                                                                             |
| [`active-speaker-change`](/reference/daily-js/events/participant-events#active-speaker-change)             | `DailyEventObjectActiveSpeakerChange` | The dominant speaker changed. `activeSpeaker.peerId` is the new speaker's `session_id`.                                  |
| [`waiting-participant-added`](/reference/daily-js/events/participant-events#waiting-participant-added)     | `DailyEventObjectWaitingParticipant`  | A participant entered the knock-to-join lobby.                                                                           |
| [`waiting-participant-updated`](/reference/daily-js/events/participant-events#waiting-participant-updated) | `DailyEventObjectWaitingParticipant`  | A waiting participant's state changed.                                                                                   |
| [`waiting-participant-removed`](/reference/daily-js/events/participant-events#waiting-participant-removed) | `DailyEventObjectWaitingParticipant`  | A waiting participant was admitted, denied, or left.                                                                     |

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

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

### Media Events

| Event                                                                                                        | Payload type                                   | Description                                                                                                       |
| ------------------------------------------------------------------------------------------------------------ | ---------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
| [`track-started`](/reference/daily-js/events/media-events#track-started)                                     | `DailyEventObjectTrack`                        | A track became `playable`. `type` is `'video'`, `'audio'`, `'screenVideo'`, `'screenAudio'`, or a custom name.    |
| [`track-stopped`](/reference/daily-js/events/media-events#track-stopped)                                     | `DailyEventObjectTrack`                        | A track left `playable` state.                                                                                    |
| [`local-screen-share-started`](/reference/daily-js/events/media-events#local-screen-share-started)           | —                                              | The local participant's screen share started.                                                                     |
| [`local-screen-share-stopped`](/reference/daily-js/events/media-events#local-screen-share-stopped)           | —                                              | The local screen share stopped normally.                                                                          |
| [`local-screen-share-canceled`](/reference/daily-js/events/media-events#local-screen-share-canceled)         | —                                              | The user dismissed the browser's screen picker.                                                                   |
| [`local-audio-level`](/reference/daily-js/events/media-events#local-audio-level)                             | `DailyEventObjectLocalAudioLevel`              | Local audio level update. `audioLevel` is `0.0–1.0`. Requires `startLocalAudioLevelObserver()`.                   |
| [`remote-participants-audio-level`](/reference/daily-js/events/media-events#remote-participants-audio-level) | `DailyEventObjectRemoteParticipantsAudioLevel` | Map of `session_id → audioLevel` for remote participants. Requires `startRemoteParticipantsAudioLevelObserver()`. |
| [`face-counts-updated`](/reference/daily-js/events/media-events#face-counts-updated)                         | `DailyEventObjectFaceCounts`                   | Number of faces detected in local video changed.                                                                  |

```typescript theme={null}
const AUDIO_LEVEL_THRESHOLD = 0.05;

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

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

### Recording Events

<Badge>Paid plans only</Badge>

| Event                                                                                | Payload type                       | Description                                                         |
| ------------------------------------------------------------------------------------ | ---------------------------------- | ------------------------------------------------------------------- |
| [`recording-started`](/reference/daily-js/events/recording-events#recording-started) | `DailyEventObjectRecordingStarted` | A recording started. `local` is `true` for browser-based recording. |
| [`recording-stopped`](/reference/daily-js/events/recording-events#recording-stopped) | `DailyEventObjectRecordingStopped` | A recording stopped.                                                |
| [`recording-error`](/reference/daily-js/events/recording-events#recording-error)     | `DailyEventObjectRecordingError`   | Recording encountered an error.                                     |

```typescript theme={null}
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);
  }
});
```

### Live Streaming Events

<Badge>Paid plans only</Badge>

| Event                                                                                               | Payload type                           | Description                                                                    |
| --------------------------------------------------------------------------------------------------- | -------------------------------------- | ------------------------------------------------------------------------------ |
| [`live-streaming-started`](/reference/daily-js/events/live-streaming-events#live-streaming-started) | `DailyEventObjectLiveStreamingStarted` | Live stream started.                                                           |
| [`live-streaming-updated`](/reference/daily-js/events/live-streaming-events#live-streaming-updated) | `DailyEventObjectLiveStreamingUpdated` | Stream state or endpoint changed. `state` is `'connected'` or `'interrupted'`. |
| [`live-streaming-stopped`](/reference/daily-js/events/live-streaming-events#live-streaming-stopped) | `DailyEventObjectLiveStreamingStopped` | Live stream stopped.                                                           |
| [`live-streaming-error`](/reference/daily-js/events/live-streaming-events#live-streaming-error)     | `DailyEventObjectLiveStreamingError`   | Live streaming error.                                                          |

### Transcription Events

<Badge>Paid plans only</Badge>

| Event                                                                                            | Payload type                           | Description                                                                               |
| ------------------------------------------------------------------------------------------------ | -------------------------------------- | ----------------------------------------------------------------------------------------- |
| [`transcription-started`](/reference/daily-js/events/transcription-events#transcription-started) | `DailyEventObjectTranscriptionStarted` | Transcription started. Contains model, language, and configuration details.               |
| [`transcription-stopped`](/reference/daily-js/events/transcription-events#transcription-stopped) | `DailyEventObjectTranscriptionStopped` | Transcription stopped.                                                                    |
| [`transcription-error`](/reference/daily-js/events/transcription-events#transcription-error)     | `DailyEventObjectTranscriptionError`   | Transcription error.                                                                      |
| [`transcription-message`](/reference/daily-js/events/transcription-events#transcription-message) | `DailyEventObjectTranscriptionMessage` | A transcription result. `text` is the transcript; `participantId` identifies the speaker. |

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

### Network Events

| Event                                                                                        | Payload type                             | Description                                                                                |
| -------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------ |
| [`network-quality-change`](/reference/daily-js/events/network-events#network-quality-change) | `DailyEventObjectNetworkQualityEvent`    | Network quality changed. `networkState` is `'good'`, `'warning'`, `'bad'`, or `'unknown'`. |
| [`network-connection`](/reference/daily-js/events/network-events#network-connection)         | `DailyEventObjectNetworkConnectionEvent` | Low-level connection event. `type` is `'signaling'`, `'peer-to-peer'`, or `'sfu'`.         |
| [`cpu-load-change`](/reference/daily-js/events/network-events#cpu-load-change)               | `DailyEventObjectCpuLoadEvent`           | CPU load state changed. `cpuLoadState` is `'low'` or `'high'`.                             |
| [`test-completed`](/reference/daily-js/events/network-events#test-completed)                 | `DailyEventObjectTestCompleted`          | A quality or connectivity test finished.                                                   |

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

### Settings & Device Events

| Event                                                                                               | Payload type                              | Description                                                         |
| --------------------------------------------------------------------------------------------------- | ----------------------------------------- | ------------------------------------------------------------------- |
| [`available-devices-updated`](/reference/daily-js/events/settings-events#available-devices-updated) | `DailyEventObjectAvailableDevicesUpdated` | The list of available input/output devices changed.                 |
| [`selected-devices-updated`](/reference/daily-js/events/settings-events#selected-devices-updated)   | `DailyEventObjectSelectedDevicesUpdated`  | The active camera, mic, or speaker selection changed.               |
| [`input-settings-updated`](/reference/daily-js/events/settings-events#input-settings-updated)       | `DailyEventObjectInputSettingsUpdated`    | Input settings (noise cancellation, background blur, etc.) changed. |
| [`send-settings-updated`](/reference/daily-js/events/settings-events#send-settings-updated)         | `DailyEventObjectSendSettingsUpdated`     | Video send settings (bitrate, simulcast) changed.                   |
| [`receive-settings-updated`](/reference/daily-js/events/settings-events#receive-settings-updated)   | `DailyEventObjectReceiveSettingsUpdated`  | Receive settings (simulcast layer) changed (call object mode).      |

### Messaging Events

| Event                                                                                                            | Payload type                                   | Description                                                                                          |
| ---------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
| [`app-message`](/reference/daily-js/events/messaging-events#app-message)                                         | `DailyEventObjectAppMessage`                   | A message sent via `sendAppMessage()`. `data` is the payload; `fromId` is the sender's `session_id`. |
| [`meeting-session-updated`](/reference/daily-js/events/messaging-events#meeting-session-updated)                 | (deprecated)                                   | Use `meeting-session-summary-updated` instead.                                                       |
| [`meeting-session-summary-updated`](/reference/daily-js/events/messaging-events#meeting-session-summary-updated) | `DailyEventObjectMeetingSessionSummaryUpdated` | The meeting session summary changed.                                                                 |
| [`meeting-session-state-updated`](/reference/daily-js/events/messaging-events#meeting-session-state-updated)     | `DailyEventObjectMeetingSessionStateUpdated`   | Shared meeting session state changed.                                                                |

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

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

### Telephony Events (SIP/PSTN)

<Badge>Paid plans only</Badge>

| Event                                                                                | Payload type                       | Description                                                                  |
| ------------------------------------------------------------------------------------ | ---------------------------------- | ---------------------------------------------------------------------------- |
| [`dialin-ready`](/reference/daily-js/events/telephony-events#dialin-ready)           | `DailyEventObjectDialinReady`      | SIP endpoint is ready to accept dial-in calls. `sipEndpoint` is the address. |
| [`dialin-connected`](/reference/daily-js/events/telephony-events#dialin-connected)   | `DailyEventObjectDialinConnected`  | A dial-in call connected.                                                    |
| [`dialin-error`](/reference/daily-js/events/telephony-events#dialin-error)           | `DailyEventObjectDialinError`      | Dial-in error.                                                               |
| [`dialin-stopped`](/reference/daily-js/events/telephony-events#dialin-stopped)       | `DailyEventObjectDialinStopped`    | Dial-in call stopped.                                                        |
| [`dialin-warning`](/reference/daily-js/events/telephony-events#dialin-warning)       | `DailyEventObjectDialinWarning`    | Non-fatal dial-in warning.                                                   |
| [`dialout-connected`](/reference/daily-js/events/telephony-events#dialout-connected) | `DailyEventObjectDialOutConnected` | An outbound dial-out call connected.                                         |
| [`dialout-answered`](/reference/daily-js/events/telephony-events#dialout-answered)   | `DailyEventObjectDialOutAnswered`  | An outbound call was answered.                                               |
| [`dialout-error`](/reference/daily-js/events/telephony-events#dialout-error)         | `DailyEventObjectDialOutError`     | Dial-out error.                                                              |
| [`dialout-stopped`](/reference/daily-js/events/telephony-events#dialout-stopped)     | `DailyEventObjectDialOutStopped`   | Dial-out call stopped.                                                       |
| [`dialout-warning`](/reference/daily-js/events/telephony-events#dialout-warning)     | `DailyEventObjectDialOutWarning`   | Non-fatal dial-out warning.                                                  |

### Error Events

| Event                                                                      | Payload type                    | Description                                                                                        |
| -------------------------------------------------------------------------- | ------------------------------- | -------------------------------------------------------------------------------------------------- |
| [`error`](/reference/daily-js/events/error-events#error)                   | `DailyEventObjectFatalError`    | A fatal error occurred. `error.type` is one of `DailyFatalErrorType`. The call ends automatically. |
| [`nonfatal-error`](/reference/daily-js/events/error-events#nonfatal-error) | `DailyEventObjectNonFatalError` | A recoverable error. `type` is one of `DailyNonFatalErrorType`. The call continues.                |

```typescript theme={null}
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);
});
```

### Iframe UI Events

These events are only emitted in iframe mode:

| Event                                                                                                  | Description                                      |
| ------------------------------------------------------------------------------------------------------ | ------------------------------------------------ |
| [`fullscreen`](/reference/daily-js/events/iframe-ui-events#fullscreen)                                 | The iframe entered fullscreen.                   |
| [`exited-fullscreen`](/reference/daily-js/events/iframe-ui-events#exited-fullscreen)                   | The iframe exited fullscreen.                    |
| [`pip-started`](/reference/daily-js/events/iframe-ui-events#pip-started)                               | Picture-in-picture started.                      |
| [`pip-stopped`](/reference/daily-js/events/iframe-ui-events#pip-stopped)                               | Picture-in-picture stopped.                      |
| [`sidebar-view-changed`](/reference/daily-js/events/iframe-ui-events#sidebar-view-changed)             | The active sidebar panel changed.                |
| [`custom-button-click`](/reference/daily-js/events/iframe-ui-events#custom-button-click)               | A custom tray button was clicked.                |
| [`active-speaker-mode-change`](/reference/daily-js/events/iframe-ui-events#active-speaker-mode-change) | Active speaker mode was toggled.                 |
| [`show-local-video-changed`](/reference/daily-js/events/iframe-ui-events#show-local-video-changed)     | Whether the local video tile is visible changed. |
| [`lang-updated`](/reference/daily-js/events/iframe-ui-events#lang-updated)                             | The UI language changed.                         |
| [`theme-updated`](/reference/daily-js/events/iframe-ui-events#theme-updated)                           | The UI theme changed.                            |

## Removing Listeners

Use `call.off()` to remove a specific listener:

```typescript theme={null}
// Remove a specific listener
call.off('participant-joined', myHandler);
```

`DailyCall` (which extends Node.js `EventEmitter` at runtime) also inherits `removeAllListeners()`, though this method is not part of the typed `DailyCall` interface:

```typescript theme={null}
// 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();
```

<Warning>
  Always remove event listeners before calling `call.destroy()` to prevent memory leaks, especially in single-page applications that re-render frequently.
</Warning>


# Participants
Source: https://docs.daily.co/docs/daily-js/concepts/participants

Understand the DailyParticipant object, how to list participants, and how to update them.

Every person (or bot) in a Daily room is represented as a `DailyParticipant` object. Daily keeps these objects up to date as media states, permissions, and network conditions change.

## The DailyParticipant Object

```typescript theme={null}
interface DailyParticipant {
  // Identity
  user_id: string;
  user_name: string;
  userData?: unknown;
  session_id: string;
  joined_at?: Date;
  local: boolean;
  owner: boolean;
  record: boolean;
  participantType?: DailyParticipantTypeValues;

  // Media tracks
  tracks: DailyParticipantTracks;

  // Network
  networkQualityState?: 'good' | 'warning' | 'bad' | 'unknown';

  // Permissions
  permissions: DailyParticipantPermissions;
  will_eject_at: Date;
}
```

See the [`DailyParticipant` type reference](/reference/daily-js/types/daily-participant) for the full field listing with types and descriptions.

## Listing Participants

### `participants()`

Returns a `DailyParticipantsObject` — a flat map of all participants currently visible to the local client.

```typescript theme={null}
interface DailyParticipantsObject {
  local: DailyParticipant;
  [sessionId: string]: DailyParticipant;
}
```

```typescript theme={null}
const { local, ...remotes } = call.participants();

console.log('My session:', local.session_id);

for (const [sessionId, participant] of Object.entries(remotes)) {
  console.log(participant.user_name, sessionId);
}
```

<Note>
  The `local` key is always present. Remote participants are keyed by their `session_id`.
</Note>

### `participantCounts()`

Returns aggregate counts without full participant data — more accurate than counting participants manually as participant data can come in delayed on join, whereas the counts are provided immediately. Also, hidden participants are not included in `participants()`, but are included in the counts returned by `participantCounts()`.

```typescript theme={null}
interface DailyParticipantCounts {
  present: number; // participants visible via participants()
  hidden: number;  // participants with hasPresence: false
}
```

```typescript theme={null}
const { present, hidden } = call.participantCounts();
console.log(`${present} visible, ${hidden} hidden`);
```

Listen for [`participant-counts-updated`](/reference/daily-js/events/participant-events#participant-counts-updated) to keep this value current.

### `waitingParticipants()`

<Badge>call object mode only</Badge>

Returns a map of participants waiting in a knock-to-join lobby, keyed by their `id`. Use [`updateWaitingParticipant()`](/reference/daily-js/instance-methods/update-waiting-participant) to admit or deny them.

```typescript theme={null}
const waiting = call.waitingParticipants();
console.log(`${Object.keys(waiting).length} participants waiting`);
```

See the [Waiting room guide](/docs/daily-js/guides/waiting-room) for a full walkthrough including room configuration, event handling, and a complete example.

## Updating Participants

### `updateParticipant(sessionId, options)`

Send a change request for a single participant. Returns the `DailyCall` instance for chaining.

```typescript theme={null}
call.updateParticipant(
  sessionId: string,
  options: DailyParticipantUpdateOptions
): DailyCall
```

<ParamField type="boolean">
  Mute (`false`) or unmute (`true`) for the participant's microphone. Only admins can mute remote participants' audio. Note: while you can use this to mute/unmute the local participant, `setLocalAudio()` is the preferred method.
</ParamField>

<ParamField type="boolean">
  Mute (`false`) or unmute (`true`) for the participant's camera. Only admins can mute remote participants' video. Note: while you can use this to mute/unmute the local participant, `setLocalVideo()` is the preferred method.
</ParamField>

<ParamField type="false">
  Stop a remote participant's screen share. Can only be set to `false` (you can only stop, not start, a remote screen share). Requires admin permissions.
</ParamField>

<ParamField type="DailyTrackSubscriptionOptions">
  Control which of this participant's tracks the local client receives. See [Track Subscription](/docs/daily-js/concepts/tracks#track-subscription).
</ParamField>

<ParamField type="true">
  Remove the participant from the call. Can only be set to `true`. Requires admin permissions.
</ParamField>

<ParamField type="DailyParticipantPermissionsUpdate">
  Change the participant's `hasPresence`, `canSend`, `canReceive`, or `canAdmin` permissions. Requires admin permissions.
</ParamField>

<ParamField type="DailyParticipantCss">
  <Badge>Prebuilt only</Badge>
  Apply CSS overrides to this participant's video tiles.
</ParamField>

### `updateParticipants(updates)`

Apply updates to multiple participants in a single call. This method takes the same options as `updateParticipant()` but in a map keyed by `session_id`. You can use `'*'` as a wildcard key to apply the same update to all *remote* participants.

```typescript theme={null}
call.updateParticipants({
  [sessionId: string]: DailyParticipantUpdateOptions;
}): DailyCall
```

## Code Examples

<CodeGroup>
  ```typescript Mute a remote participant theme={null}
  // Mute a specific participant's mic (owner only)
  call.updateParticipant(sessionId, { setAudio: false });
  ```

  ```typescript Eject a participant theme={null}
  // Remove a participant from the call (owner only)
  call.updateParticipant(sessionId, { eject: true });
  ```

  ```typescript Mute all remotes theme={null}
  // Mute every remote participant's mic at once (owner only)
  call.updateParticipants('*', { setAudio: false });
  ```

  ```typescript Restrict send permissions theme={null}
  // Prevent a participant from sending video or screen share
  call.updateParticipant(sessionId, {
    updatePermissions: {
      canSend: ['audio'], // audio only
    },
  });
  ```
</CodeGroup>

## Participant Events

React to participant state changes by subscribing to these events:

| Event                         | Fires when                                                       |
| ----------------------------- | ---------------------------------------------------------------- |
| `participant-joined`          | A remote participant enters the room                             |
| `participant-updated`         | Any field on a participant changes (mute, network quality, etc.) |
| `participant-left`            | A remote participant leaves or is ejected                        |
| `participant-counts-updated`  | The aggregate counts returned by `participantCounts()` change    |
| `waiting-participant-added`   | A participant enters the knock-to-join lobby                     |
| `waiting-participant-updated` | A waiting participant's state changes                            |
| `waiting-participant-removed` | A waiting participant leaves the lobby or is admitted            |

```typescript theme={null}
call.on('participant-joined', ({ participant }) => {
  console.log(`${participant.user_name} joined`);
});

call.on('participant-updated', ({ participant }) => {
  const audioState = participant.tracks.audio.state;
  console.log(`${participant.user_name} audio is ${audioState}`);
});

call.on('participant-left', ({ participant, reason }) => {
  console.log(`${participant.user_name} left`, reason ?? 'normally');
});
```


# Tracks and Media
Source: https://docs.daily.co/docs/daily-js/concepts/tracks

Understand DailyTrackState, track states, subscriptions, and how to attach tracks to video elements.

Daily models every media stream — camera, microphone, screen share, and custom tracks — through the `DailyTrackState` interface. Understanding track states is essential for building a reliable call object UI.

## DailyTrackState

See the [`DailyTrackState` reference](/reference/daily-js/types/daily-track-state) for the full interface definition and field descriptions.

## Track States

The `state` field describes the current condition of a track — not a step in a sequential progression:

| State         | Meaning                                                                                                                                          |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| `blocked`     | The track cannot be sent. Check `blocked.byDeviceMissing`, `byDeviceInUse`, or `byPermissions` for the cause.                                    |
| `off`         | The track is intentionally not being sent. Check the `off` sub-fields to distinguish an implicit user mute from other causes like remote muting. |
| `sendable`    | The track is ready to be sent, but has not been subscribed to, and is neither blocked nor off.                                                   |
| `loading`     | Daily is acquiring the device or establishing the stream.                                                                                        |
| `interrupted` | The track was previously playable but has temporarily stalled — common during network fluctuations or tab backgrounding on iOS.                  |
| `playable`    | The track is live and renderable.                                                                                                                |

### Why the `off` sub-fields matter

```typescript theme={null}
const audioState = participant.tracks.audio;

if (audioState.state === 'off') {
  if (audioState.off?.byUser) {
    // Participant muted themselves
  } else if (audioState.off?.byRemoteRequest) {
    // Owner muted them remotely
  } else if (audioState.off?.byBandwidth) {
    // Daily throttled the track due to bandwidth
  } else if (audioState.off?.byCanSendPermission) {
    // Participant lacks permission to send this track
  } else if (audioState.off?.byServerLimit) {
    // Server-side participant limit reached
  }
}
```

## Track Types

Each `DailyParticipant` carries a `tracks` object of type `DailyParticipantTracks`:

```typescript theme={null}
interface DailyParticipantTracks {
  audio: DailyTrackState;         // microphone
  video: DailyTrackState;         // camera
  screenAudio: DailyTrackState;   // screen share audio
  screenVideo: DailyTrackState;   // screen share video
  [customTrackKey: string]: DailyTrackState | undefined; // custom tracks
}
```

### Custom tracks

Custom tracks let you send arbitrary `MediaStreamTrack` objects alongside the standard camera and mic. Start them with `startCustomTrack()` and stop them with `stopCustomTrack()`:

```typescript theme={null}
const trackName = await call.startCustomTrack({
  track: myCanvasStream.getVideoTracks()[0],
  trackName: 'my-canvas',
});

// Accessible on the local participant at:
// call.participants().local.tracks['my-canvas']

await call.stopCustomTrack(trackName);
```

Custom track keys appear as string index entries in `DailyParticipantTracks`.

## Local vs. remote track behavior

How a track's initial state is reached differs between local and remote:

* **Local tracks** start directly as `playable`, `off`, or `blocked` — they never pass through `loading`. If a local track starts `off` and the user enables it with `setLocalVideo(true)` or `setLocalAudio(true)`, it transitions straight to `playable` (or `blocked` if the user denied device permissions).
* **Remote tracks** can start in any state except `playable` or `interrupted` — most commonly `loading` (subscribed but stream not yet established), `off` (sender muted before you joined), `blocked` (sender has a device issue), or `sendable` (sender is ready but you haven't subscribed).
* **`interrupted`** is never an initial state — it only occurs after a track was `playable` and then transiently stalled, most commonly during network fluctuations or iOS tab backgrounding. It can return to `playable` once the condition resolves.

## Track Subscription

By default Daily subscribes to tracks from all participants automatically (`subscribeToTracksAutomatically: true`). In large calls, subscribing to every track is wasteful. Disable automatic subscription to control this explicitly.

```typescript theme={null}
const call = Daily.createCallObject({
  subscribeToTracksAutomatically: false,
});
```

### `DailyTrackSubscriptionState`

```typescript theme={null}
type DailyTrackSubscriptionState = 'staged' | boolean;
```

| Value      | Meaning                                                                                                                                  |
| ---------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| `true`     | Subscribed to the track (receiving it).                                                                                                  |
| `false`    | Not subscribed.                                                                                                                          |
| `'staged'` | Receive metadata (SDP negotiated) but do not decode. Staged tracks can then transition to `playable` faster when you set them to `true`. |

### `DailyTrackSubscriptionOptions`

```typescript theme={null}
type DailyTrackSubscriptionOptions =
  | DailyTrackSubscriptionState    // applies to all tracks for participant
  | {
      audio?: DailyTrackSubscriptionState;
      video?: DailyTrackSubscriptionState;
      screenVideo?: DailyTrackSubscriptionState;
      screenAudio?: DailyTrackSubscriptionState;
      custom?: DailyCustomTrackSubscriptionState;
    };
```

### Subscribing per participant

```typescript theme={null}
// Subscribe to audio only for a participant
call.updateParticipant(sessionId, {
  setSubscribedTracks: {
    audio: true,
    video: false,
    screenVideo: false,
    screenAudio: false,
  },
});

// Subscribe to everything for a specific participant
call.updateParticipant(sessionId, {
  setSubscribedTracks: true,
});

// Stage video for everyone (efficient on-demand loading)
call.updateParticipants('*',
  { setSubscribedTracks: { video: 'staged', audio: true } }
);
```

### Global subscription toggle

```typescript theme={null}
// Re-enable automatic subscription after disabling it
call.setSubscribeToTracksAutomatically(true);

// Check current value
console.log(call.subscribeToTracksAutomatically());
```

<Warning>
  Calling `setSubscribeToTracksAutomatically(false)` during a call will unsubscribe you from all current tracks and require you to manually re-subscribe. Use with caution to avoid unintended media loss. For most cases, it's best to set this at call creation time and manage subscriptions explicitly from the start.
</Warning>

## Attaching Tracks to Video Elements

The recommended approach for rendering tracks is to use `track-started` and `track-stopped` events:

```typescript theme={null}
const videoElements: Map<string, HTMLVideoElement> = new Map();

call.on('track-started', ({ participant, track, type }) => {
  let videoEl = videoElements.get(participant.session_id);
  if (!videoEl) {
    videoEl = document.createElement('video');
    videoEl.autoplay = true;
    videoEl.playsInline = true;
    document.getElementById('grid')?.appendChild(videoEl);
    videoElements.set(participant.session_id, videoEl);
  }

  videoEl.srcObject = new MediaStream([track]);
});

call.on('track-stopped', ({ participant, track }) => {
  // Clear srcObject when track stops
  const videoEl = videoElements.get(participant?.session_id ?? '');
  if (videoEl) {
    videoEl.srcObject = null;
  }
});
```

### `track` vs. `persistentTrack`

The key difference: `track` is `undefined` whenever `state !== 'playable'`. `persistentTrack` is present whenever a track exists, regardless of playable state.

We recommend using `persistentTrack` over `track` when attaching to media elements. It acts as a proactive defense against black frames during call disruptions and helps avoid browser bugs related to auto-playing media tracks.

```typescript theme={null}
call.on('participant-updated', ({ participant }) => {
  const trackState = participant.tracks.video;
  const track = trackState.persistentTrack;

  if (track) {
    videoEl.srcObject = new MediaStream([track]);
  } else {
    videoEl.srcObject = null;
  }
});
```

Use `track` only when you need a guarantee that the media is currently flowing.

## Track Events

| Event                 | Fires when                                                          | Event object                       |
| --------------------- | ------------------------------------------------------------------- | ---------------------------------- |
| `track-started`       | A track becomes `playable`, or a new track replaces an existing one | `{ participant, track, type }`     |
| `track-stopped`       | A track leaves `playable` state, or is replaced by a new track      | `{ participant, track, type }`     |
| `participant-updated` | Any track state changes                                             | `{ participant }` — check `tracks` |

The `type` field in `DailyEventObjectTrack` is one of `'video'`, `'audio'`, `'screenVideo'`, `'screenAudio'`, or a custom track name string.

### Track replacement

`track-started` and `track-stopped` fire not only on state transitions but also when the underlying `MediaStreamTrack` is replaced — for example when a participant switches cameras or a device change causes a new track to be issued. In this case the track state stays `playable` throughout, but you will receive a `track-stopped` for the old track immediately followed by a `track-started` for the new one.

This means you should key your media elements on the `track` object itself (or its `id`), not on participant or track type alone:

```typescript theme={null}
call.on('track-stopped', ({ track, type, participant }) => {
  // Remove the specific track that stopped, not just any track for this participant
  const el = document.getElementById(`track-${track.id}`);
  el?.remove();
});

call.on('track-started', ({ track, type, participant }) => {
  const el = document.createElement(type === 'audio' ? 'audio' : 'video');
  el.id = `track-${track.id}`;
  el.autoplay = true;
  el.playsInline = true;
  el.srcObject = new MediaStream([track]);
  document.getElementById(`participant-${participant?.session_id}`)?.appendChild(el);
});
```


# Custom Tracks
Source: https://docs.daily.co/docs/daily-js/features/custom-tracks

Send and receive additional MediaStreamTracks beyond camera and microphone — including canvas-based video, pre-processed audio, and multiple simultaneous media streams.

Custom tracks let you send any `MediaStreamTrack` as an additional stream alongside your camera and microphone. Common use cases include:

* Streaming additional camera angles (e.g., a document camera)
* Broadcasting background music in stereo

## Starting a custom track

`startCustomTrack()` takes a `StartCustomTrackOptions` object and returns a promise that resolves to the track name — which is used to identify the track in the participant's track list and used for stopping it later.

```javascript theme={null}
const trackName = await call.startCustomTrack({
  track: myMediaStreamTrack,  // MediaStreamTrack — required
  trackName: 'doc-cam',       // optional; auto-generated if omitted
  mode: 'speech',             // optional audio mode hint
  ignoreAudioLevel: false,    // optional
});

console.log('Custom track started with name:', trackName);
```

### `StartCustomTrackOptions`

<ParamField type="MediaStreamTrack">
  The `MediaStreamTrack` to send. Can be audio or video.
</ParamField>

<ParamField type="string">
  A name for the track. Must be unique within the call. If omitted, Daily
  generates a UUID. The resolved promise value is the final track name.
</ParamField>

<Tip>
  Track names become part of the participant's `tracks` object for the lifetime
  of the call. Choose descriptive, stable names — especially if remote
  participants need to subscribe to them by name.
</Tip>

<ParamField type="'music' | 'speech' | DailyMicAudioModeSettings">
  For audio tracks: sets the encoding mode. Use `'music'` for music or
  wideband audio, `'speech'` for voice. For fine-grained control, pass a
  `DailyMicAudioModeSettings` object.
</ParamField>

<ParamField type="boolean">
  When `true`, this track's audio level is excluded from the local audio
  level observer. Useful for background music that should not trigger
  speaking indicators.
</ParamField>

### `DailyMicAudioModeSettings`

<ParamField type="number">
  Target audio bitrate in bits per second.
</ParamField>

<ParamField type="boolean">
  When `true`, the track is encoded as stereo. Default: `false`.
</ParamField>

```javascript theme={null}
// Send high-quality stereo music at 256 kbps
const trackName = await call.startCustomTrack({
  track: musicTrack,
  trackName: 'background-music',
  mode: { bitrate: 256_000, stereo: true },
  ignoreAudioLevel: true,
});
```

## Stopping a custom track

```javascript theme={null}
await call.stopCustomTrack('doc-cam');
```

Passing the track name used in or returned by `startCustomTrack()` stops sending that track. The underlying `MediaStreamTrack` is **not** automatically stopped — call `.stop()` on it yourself if needed.

```javascript theme={null}
const trackName = await call.startCustomTrack({ track: videoTrack });

// Later:
await call.stopCustomTrack(trackName);
videoTrack.stop(); // release the underlying capture
```

## Canvas-based custom video track

A common pattern is to draw content onto an HTML `<canvas>` element and stream it as a custom track:

```javascript theme={null}
async function startCanvasTrack(call) {
  const canvas  = document.createElement('canvas');
  canvas.width  = 1280;
  canvas.height = 720;
  const ctx = canvas.getContext('2d');

  // Use a Web Worker for the draw loop. Both requestAnimationFrame and
  // main-thread setInterval are throttled (or paused) when the sender's tab is
  // in the background, causing remote participants to see frozen or choppy
  // video. Web Workers run off the main thread and are not subject to the same
  // throttling.
  let frame = 0;
  const tickWorker = new Worker(
    URL.createObjectURL(
      new Blob(['setInterval(() => postMessage("tick"), 1000 / 30)'],
               { type: 'application/javascript' })
    )
  );

  tickWorker.onmessage = () => {
    ctx.fillStyle = '#1a1a2e';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    ctx.font = '48px monospace';
    ctx.fillStyle = '#e0e0e0';
    ctx.fillText(`Frame: ${frame++}`, 50, canvas.height / 2);
  };

  // Capture a 30 fps stream from the canvas
  const stream = canvas.captureStream(30);
  const [videoTrack] = stream.getVideoTracks();

  const trackName = await call.startCustomTrack({
    track: videoTrack,
    trackName: 'canvas-viz',
  });

  return {
    trackName,
    stop: () => {
      tickWorker.terminate();
      call.stopCustomTrack(trackName);
    },
  };
}
```

## Receiving remote custom tracks

When `subscribeToTracksAutomatically` is enabled (the default), remote custom tracks are subscribed to automatically — no extra setup needed. Listen for `track-started` with the custom track name as `type` to render them.

If you've disabled automatic subscriptions, use `updateParticipant()` with `setSubscribedTracks` to opt in. See the [`startCustomTrack()` reference](/reference/daily-js/instance-methods/start-custom-track) for the full `custom` subscription options.

## Reading custom tracks from a participant

Custom tracks appear in the participant's `tracks` object keyed by their track name:

```javascript theme={null}
const participants = call.participants();

for (const [id, participant] of Object.entries(participants)) {
  const customTrack = participant.tracks['canvas-viz'];
  if (customTrack?.state === 'playable') {
    const video = document.createElement('video');
    video.srcObject = new MediaStream([customTrack.track]);
    video.autoplay = true;
    document.getElementById('custom-tracks').appendChild(video);
  }
}
```

`participant.tracks` is typed as `DailyParticipantTracks`, which allows arbitrary string keys:

```typescript theme={null}
interface DailyParticipantTracks {
  audio: DailyTrackState;
  video: DailyTrackState;
  screenAudio: DailyTrackState;
  screenVideo: DailyTrackState;
  [customTrackKey: string]: DailyTrackState | undefined;
}
```

## `track-started` and `track-stopped` events

Custom track events arrive on the standard `track-started` / `track-stopped` events. The `type` field holds the custom track name:

```javascript theme={null}
call.on('track-started', ({ participant, track, type }) => {
  // type is 'video' | 'audio' | 'screenVideo' | 'screenAudio' | <custom-name>
  if (type === 'canvas-viz') {
    console.log(
      `Custom track '${type}' started from`,
      participant?.user_name
    );

    const video = document.createElement('video');
    video.srcObject = new MediaStream([track]);
    video.autoplay = true;
    document.getElementById('custom-tracks').appendChild(video);
  }
});

call.on('track-stopped', ({ participant, type }) => {
  if (type === 'canvas-viz') {
    console.log(`Custom track '${type}' stopped.`);
    // Clean up your video element here
  }
});
```

## Complete example

<CodeGroup>
  ```javascript app.js theme={null}
  const call = Daily.createCallObject();

  const joinBtn      = document.getElementById('join');
  const leaveBtn     = document.getElementById('leave');
  const startBtn     = document.getElementById('start-custom');
  const stopBtn      = document.getElementById('stop-custom');

  // --- Join / leave ---

  joinBtn.onclick = async () => {
    await call.join({ url: 'https://your-domain.daily.co/room' });
    joinBtn.disabled  = true;
    leaveBtn.disabled = false;
    startBtn.disabled = false;
  };

  leaveBtn.onclick = async () => {
    if (customTrackName) {
      tickWorker.terminate();
      await call.stopCustomTrack(customTrackName);
      videoTrack.stop();
      customTrackName = null;
    }
    await call.leave();
    joinBtn.disabled  = false;
    leaveBtn.disabled = true;
    startBtn.disabled = true;
    stopBtn.disabled  = true;
    document.getElementById('custom-tracks').innerHTML = '';
  };

  // --- Sender side ---

  const canvas = document.createElement('canvas');
  canvas.width = 640;
  canvas.height = 480;
  const ctx = canvas.getContext('2d');

  let angle = 0;

  // Use a Web Worker for the draw loop so it isn't throttled when the sender's
  // tab is in the background. Main-thread setInterval can drop to ~1 fps or
  // worse in hidden tabs, causing remote participants to see frozen/choppy video.
  const tickWorker = new Worker(
    URL.createObjectURL(
      new Blob(['setInterval(() => postMessage("tick"), 1000 / 30)'],
               { type: 'application/javascript' })
    )
  );

  tickWorker.onmessage = () => {
    ctx.clearRect(0, 0, 640, 480);
    ctx.fillStyle = '#0f3460';
    ctx.fillRect(0, 0, 640, 480);
    ctx.save();
    ctx.translate(320, 240);
    ctx.rotate(angle);
    ctx.fillStyle = '#e94560';
    ctx.fillRect(-60, -60, 120, 120);
    ctx.restore();
    angle += 0.02;
  };

  const [videoTrack] = canvas.captureStream(30).getVideoTracks();
  let customTrackName;

  startBtn.onclick = async () => {
    customTrackName = await call.startCustomTrack({
      track: videoTrack,
      trackName: 'spinning-box',
    });
    startBtn.disabled = true;
    stopBtn.disabled = false;
  };

  stopBtn.onclick = async () => {
    if (customTrackName) {
      await call.stopCustomTrack(customTrackName);
      customTrackName = null;
      startBtn.disabled = false;
      stopBtn.disabled = true;
    }
  };

  // --- Rendering all tracks (local and remote) ---
  // With subscribeToTracksAutomatically (default), no subscription setup needed.

  call.on('track-started', ({ participant, track, type }) => {
    if (type !== 'spinning-box') return;

    const existing = document.getElementById(`custom-${participant.session_id}`);
    if (existing) return;

    const video = document.createElement('video');
    video.id = `custom-${participant.session_id}`;
    video.srcObject = new MediaStream([track]);
    video.autoplay = true;
    document.getElementById('custom-tracks').appendChild(video);
  });

  call.on('track-stopped', ({ participant, type }) => {
    if (type === 'spinning-box') {
      document
        .getElementById(`custom-${participant?.session_id}`)
        ?.remove();
    }
  });
  ```

  ```html index.html theme={null}
  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Custom Tracks Demo</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="controls">
      <button id="join">Join</button>
      <button id="leave" disabled>Leave</button>
      <button id="start-custom" disabled>Start custom track</button>
      <button id="stop-custom" disabled>Stop custom track</button>
    </div>
    <div id="custom-tracks" class="track-grid"></div>
    <script src="https://unpkg.com/@daily-co/daily-js"></script>
    <script type="module" src="app.js"></script>
  </body>
  </html>
  ```

  ```css styles.css theme={null}
  body {
    font-family: sans-serif;
    background: #0f0f1a;
    color: #e0e0e0;
    margin: 0;
    padding: 1rem;
  }

  .controls {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }

  button {
    padding: 0.5rem 1rem;
    background: #e94560;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

  button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .track-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .track-grid video {
    width: 320px;
    height: 240px;
    background: #1a1a2e;
    border-radius: 4px;
  }
  ```
</CodeGroup>


# Dial-in and dial-out
Source: https://docs.daily.co/docs/daily-js/features/dialin-dialout

Use daily-js to initiate outbound SIP/PSTN calls, handle inbound callers, send DTMF tones, and track telephony session lifecycle.

This guide covers the daily-js APIs for SIP and PSTN telephony. For an overview of how dial-in and dial-out work across all APIs, see the [dial-in/dial-out guide](/docs/guides/features/dial-in-dial-out).

## Prerequisites

Before calling any telephony methods:

* Your Daily account must have a credit card on file.
* For dial-out, the room must have `enable_dialout: true` and your account must be [approved for dial-out](https://forms.gle/Q5eaHLEosuKyzC7BA).
* The local participant must join with an [owner meeting token](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties-is-owner).

## Dial-out

### Starting a session

[`startDialOut()`](/reference/daily-js/instance-methods/start-dial-out) initiates an outbound call to a SIP URI or PSTN phone number. The called party joins the room as a regular participant.

<Tabs>
  <Tab title="SIP">
    ```javascript theme={null}
    const { session } = await call.startDialOut({
      sipUri: 'sip:conference@pbx.example.com',
      displayName: 'Conference Bridge',
      video: false,
      codecs: { audio: ['OPUS', 'G722'] },
    });

    const sessionId = session?.sessionId;
    ```
  </Tab>

  <Tab title="Phone (PSTN)">
    ```javascript theme={null}
    const { session } = await call.startDialOut({
      phoneNumber: '+15551234567',  // E.164 format
      displayName: 'Jane Smith',
      callerId: '+18005551000',
      extension: '4321',
      waitBeforeExtensionDialSec: 3,
    });

    const sessionId = session?.sessionId;
    ```
  </Tab>
</Tabs>

The returned `sessionId` identifies this telephony session. Hold onto it — you'll need it for `stopDialOut()`, `sendDTMF()`, and transfer methods.

See [`startDialOut()`](/reference/daily-js/instance-methods/start-dial-out) for the full parameter reference, including `videoSettings` for SIP video calls and codec defaults.

### Stopping a session

```javascript theme={null}
await call.stopDialOut({ sessionId });
```

### Sending DTMF tones

[`sendDTMF()`](/reference/daily-js/instance-methods/send-dtmf) sends touch-tone signals into an active session — commonly used to navigate IVR menus:

```javascript theme={null}
await call.sendDTMF({
  sessionId,
  tones: '1234#',
  method: 'auto',
  digitDurationMs: 100,
});
```

The `method` parameter controls how tones are signaled:

* `'telephone-event'`: RTP telephone-event packets per RFC 4733 (most compatible)
* `'sip-info'`: SIP INFO requests with an `application/dtmf-relay` body
* `'auto'` (default): Daily uses `'sip-info'` when the remote SIP peer lists `INFO` in the `Allow` header of its answer, and `'telephone-event'` when it does not

Asking for `'sip-info'` on a call where the far end does not allow `INFO` returns an error.

When you send more than one tone in a single `sendDTMF()` call over SIP INFO, Daily waits a fixed 100ms between tones. That gap is not configurable. `digitDurationMs` sets the duration Daily signals for each digit, not the gap between digits.

There is no queueing or ordering guarantee across separate `sendDTMF()` calls, so two that overlap can interleave their tones. Pass the whole sequence in one call when you can. If you have to send digits one at a time, wait for each call to finish before starting the next one and add your own pacing between them.

### Dial-out events

Listen to these events to track the lifecycle of an outbound session:

```javascript theme={null}
call.on('dialout-connected', ({ sessionId, destination, sipCallId, provider }) => {
  // Call is established and ringing at the remote end
});

call.on('dialout-answered', ({ sessionId, destination, callerId, sipCallId }) => {
  // Remote party answered — media is now flowing
});

call.on('dialout-stopped', ({ sessionId, destination }) => {
  // Session ended (remote hung up or stopDialOut() was called)
});

call.on('dialout-error', ({ sessionId, errorMsg, details }) => {
  // Fatal error — session will not recover
  console.error(`Dial-out failed: ${errorMsg}`);
});

call.on('dialout-warning', ({ sessionId, errorMsg }) => {
  // Non-fatal warning (e.g. codec fallback applied)
});
```

`dialout-connected` fires when the SIP/PSTN network acknowledges the call; `dialout-answered` fires when the remote party actually picks up. Both events include `provider` and `sipCallId` for correlating with server-side logs. See the [telephony events reference](/reference/daily-js/events/telephony-events) for full payload details.

## Dial-in

Dial-in allows external SIP or PSTN callers to join a Daily room. Set `enable_dialin: true` on the room via the REST API or dashboard. For setup details — including PIN dial-in, pinless dial-in, and SIP interconnect — see the [dial-in/dial-out guide](/docs/guides/features/dial-in-dial-out).

### Dial-in events

```javascript theme={null}
call.on('dialin-ready', ({ sipEndpoint, provider }) => {
  // The room's SIP endpoint is ready to accept inbound calls
  console.log('SIP endpoint:', sipEndpoint);
});

call.on('dialin-connected', ({ sessionId, sipFrom, sipCallId, provider }) => {
  // An inbound caller has connected and media negotiation is underway
  // Note: media is not yet flowing — wait for the participant-joined event
  console.log(`Caller ${sipFrom} connecting — session ${sessionId}`);
});

call.on('dialin-stopped', ({ sessionId, sipCallId }) => {
  // Inbound caller disconnected
});

call.on('dialin-error', ({ sessionId, errorMsg, type }) => {
  console.error(`Dial-in error [${type}]: ${errorMsg}`);
});

call.on('dialin-warning', ({ sessionId, errorMsg }) => {
  // Non-fatal warning (e.g. codec fallback)
});
```

All dial-in events include `provider` and `sipCallId` fields for correlating sessions with server-side logs. See the [telephony events reference](/reference/daily-js/events/telephony-events) for full payload details.

## Call transfers

To transfer an active SIP or PSTN session to another destination, use [`sipCallTransfer()`](/reference/daily-js/instance-methods/sip-call-transfer) or [`sipRefer()`](/reference/daily-js/instance-methods/sip-refer). See the [call transfers guide](/docs/guides/features/dial-in-dial-out/transfers) for a full explanation of when to use each method, including a decision table and scenario examples.

## Example: full dial-out flow

```javascript theme={null}
let activeSessionId = null;

async function callPhoneNumber(phoneNumber) {
  try {
    const { session } = await call.startDialOut({ phoneNumber });
    if (session) {
      activeSessionId = session.sessionId;
      updateUI({ status: 'ringing' });
    }
  } catch (err) {
    console.error('Failed to start dial-out:', err);
    updateUI({ status: 'error' });
  }
}

call.on('dialout-answered', ({ sessionId }) => {
  if (sessionId === activeSessionId) {
    updateUI({ status: 'connected' });
  }
});

call.on('dialout-stopped', ({ sessionId }) => {
  if (sessionId === activeSessionId) {
    activeSessionId = null;
    updateUI({ status: 'idle' });
  }
});

call.on('dialout-error', ({ sessionId, errorMsg }) => {
  if (sessionId === activeSessionId) {
    activeSessionId = null;
    updateUI({ status: 'error', message: errorMsg });
  }
});

async function endCall() {
  if (activeSessionId) {
    await call.stopDialOut({ sessionId: activeSessionId });
  }
}

async function pressKey(key) {
  if (activeSessionId) {
    await call.sendDTMF({ sessionId: activeSessionId, tones: key, method: 'auto' });
  }
}
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [startDialOut()](/reference/daily-js/instance-methods/start-dial-out)
    * [stopDialOut()](/reference/daily-js/instance-methods/stop-dial-out)
    * [sendDTMF()](/reference/daily-js/instance-methods/send-dtmf)
    * [sipCallTransfer()](/reference/daily-js/instance-methods/sip-call-transfer)
    * [sipRefer()](/reference/daily-js/instance-methods/sip-refer)
  </Card>

  <Card title="Events" icon="bolt">
    * [Telephony events](/reference/daily-js/events/telephony-events)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Dial-in/dial-out overview](/docs/guides/features/dial-in-dial-out)
    * [Call transfers](/docs/guides/features/dial-in-dial-out/transfers)
  </Card>
</CardGroup>


# Live Streaming
Source: https://docs.daily.co/docs/daily-js/features/live-streaming

Use startLiveStreaming(), updateLiveStreaming(), and stopLiveStreaming() to control live streaming from daily-js.

<Card title="Live streaming overview" icon="signal-stream" href="/docs/guides/features/live-streaming">
  New to Daily live streaming? Start here — covers prerequisites, supported RTMP providers and URL formats, and HLS streaming.
</Card>

Only **meeting owners** or **streaming admins** (participants with `canAdmin: ['streaming']`) can start, update, or stop a live stream. See [prerequisites](/docs/guides/features/live-streaming#prerequisites) in the overview for how to create the right meeting token.

<Note>
  All streaming — RTMP and HLS — goes through `startLiveStreaming()`. For RTMP, pass an ingest URL directly. For HLS, configure [`streaming_endpoints`](/docs/guides/features/live-streaming/hls) on the room first, then pass the endpoint name. The rest of this guide applies to both.
</Note>

## Starting a live stream

[`startLiveStreaming()`](/reference/daily-js/instance-methods/start-live-streaming) begins streaming to one or more RTMP endpoints:

```javascript theme={null}
// Stream to a single RTMP URL
call.startLiveStreaming({
  rtmpUrl: 'rtmps://live.example.com/app/stream-key',
});

// Stream to multiple destinations at once
call.startLiveStreaming({
  endpoints: [
    { endpoint: 'rtmps://a.ingest.example.com/live/key-1' },
    { endpoint: 'rtmps://b.ingest.example.com/live/key-2' },
  ],
});
```

## Options

<ParamField type="string | string[]">
  One or more RTMP/RTMPS ingest URLs. Mutually exclusive with `endpoints`.
</ParamField>

<ParamField type="DailyStreamingEndpoint[]">
  An array of endpoint objects `{ endpoint: string }`. Use this instead of `rtmpUrl` when you need to dynamically add or remove destinations mid-stream with [`addLiveStreamingEndpoints()`](/reference/daily-js/instance-methods/add-live-streaming-endpoints) and [`removeLiveStreamingEndpoints()`](/reference/daily-js/instance-methods/remove-live-streaming-endpoints).
</ParamField>

<ParamField type="number">
  Output width in pixels. Default: `1280`. Can only be set at start.
</ParamField>

<ParamField type="number">
  Output height in pixels. Default: `720`. Can only be set at start.
</ParamField>

<ParamField type="number">
  Frames per second. Default: `30`.
</ParamField>

<ParamField type="number">
  Video bitrate in kbps.
</ParamField>

<ParamField type="number">
  Audio bitrate in kbps.
</ParamField>

<ParamField type="number">
  Seconds of idle time before the stream automatically stops. Default: `60`.
</ParamField>

<ParamField type="number">
  Maximum stream duration in seconds.
</ParamField>

<ParamField type="string">
  Background color for empty areas in the composed frame. CSS hex string. Can only be set at start.
</ParamField>

<ParamField type="string">
  Identifier for this streaming instance. Required when running multiple simultaneous streams. See [multiple simultaneous streams](#multiple-simultaneous-streams).
</ParamField>

<ParamField type="DailyLiveStreamingLayoutConfig">
  Participant tile layout for the composed output. See [`DailyStreamingLayoutConfig`](/reference/daily-js/types/daily-streaming-layout-config) for the full type reference, or [layout options](#layout-options) below for usage examples.
</ParamField>

## Layout options

Live streaming supports the same layout presets as recording — `default`, `single-participant`, `active-participant`, `portrait`, and `custom` — except `audio-only`, which is recording-only. See [`DailyStreamingLayoutConfig`](/reference/daily-js/types/daily-streaming-layout-config) for field-level documentation on each preset. For screenshots, see the [live streaming overview](/docs/guides/features/live-streaming#live-streaming-layout-options).

### `default`

```javascript theme={null}
call.startLiveStreaming({
  rtmpUrl: 'rtmps://live.example.com/app/key',
  layout: {
    preset: 'default',
    max_cam_streams: 6,
    participants: { sort: 'active' },
  },
});
```

### `single-participant`

```javascript theme={null}
call.startLiveStreaming({
  rtmpUrl: 'rtmps://live.example.com/app/key',
  layout: {
    preset: 'single-participant',
    session_id: presenterSessionId,
  },
});
```

### `active-participant`

```javascript theme={null}
call.startLiveStreaming({
  rtmpUrl: 'rtmps://live.example.com/app/key',
  layout: { preset: 'active-participant' },
});
```

### `portrait`

```javascript theme={null}
call.startLiveStreaming({
  rtmpUrl: 'rtmps://live.example.com/app/key',
  layout: {
    preset: 'portrait',
    variant: 'inset',  // 'vertical' (default) or 'inset'
  },
});
```

### `custom`

Use Daily's VCS baseline composition to fully control the layout programmatically — modes, overlays, labels, participant ordering, and more. The [`startLiveStreaming()` reference](/reference/daily-js/types/daily-streaming-layout-config#vcs-baseline-composition) documents all available `composition_params`.

```javascript theme={null}
call.startLiveStreaming({
  rtmpUrl: 'rtmps://live.example.com/app/key',
  layout: {
    preset: 'custom',
    composition_id: 'daily:baseline',
    composition_params: {
      mode: 'dominant',
      'videoSettings.showParticipantLabels': true,
    },
  },
});
```

### `participants`

Several presets accept a `participants` field to filter which participants' video and audio are included in the stream. See [`DailyStreamingLayoutConfig`](/reference/daily-js/types/daily-streaming-layout-config#participants) for the full field list.

<Note>
  You must resend `participants` on every `updateLiveStreaming()` call — it is not persisted from the previous call. If omitted on update, all participants will be included.
</Note>

## Updating layout mid-stream

Call [`updateLiveStreaming()`](/reference/daily-js/instance-methods/update-live-streaming) to switch layouts without interrupting the stream:

```javascript theme={null}
call.updateLiveStreaming({
  layout: { preset: 'active-participant' },
});
```

## Adding and removing endpoints

You can add new RTMP destinations to a running stream or remove existing ones without stopping the stream.

<Warning>
  `addLiveStreamingEndpoints()` and `removeLiveStreamingEndpoints()` only work when the stream was started with the `endpoints` parameter — not `rtmpUrl`. If you need to add or remove destinations mid-stream, use `endpoints` when calling `startLiveStreaming()`.
</Warning>

```javascript theme={null}
// Add a backup destination mid-stream
call.addLiveStreamingEndpoints({
  endpoints: [{ endpoint: 'rtmps://backup.cdn.example.com/live/key-3' }],
});

// Remove a destination (stream continues to other destinations)
call.removeLiveStreamingEndpoints({
  endpoints: [{ endpoint: 'rtmps://a.ingest.example.com/live/key-1' }],
});
```

<Note>
  Do not use `removeLiveStreamingEndpoints()` to remove all endpoints — use `stopLiveStreaming()` instead. Attempting to remove the last endpoint will fail and trigger a `live-streaming-warning` nonfatal error.
</Note>

## Stopping a live stream

[`stopLiveStreaming()`](/reference/daily-js/instance-methods/stop-live-streaming) ends all active streaming endpoints:

```javascript theme={null}
call.stopLiveStreaming();
```

## Multiple simultaneous streams

Pass a unique `instanceId` to run parallel streams — for example, a high-quality CDN stream and a lower-bitrate social stream simultaneously:

```javascript theme={null}
// High-quality CDN stream
call.startLiveStreaming({
  instanceId: 'cdn',
  rtmpUrl: 'rtmps://cdn.example.com/live/key',
  width: 1920,
  height: 1080,
  videoBitrate: 6000,
  layout: { preset: 'active-participant' },
});

// Social media stream at a lower bitrate
call.startLiveStreaming({
  instanceId: 'social',
  rtmpUrl: 'rtmps://live.twitch.tv/app/stream-key',
  width: 1280,
  height: 720,
  videoBitrate: 2500,
  layout: { preset: 'active-participant' },
});

// Update only the CDN stream's layout
call.updateLiveStreaming({
  instanceId: 'cdn',
  layout: { preset: 'default', max_cam_streams: 9 },
});

// Stop each instance independently
call.stopLiveStreaming({ instanceId: 'cdn' });
call.stopLiveStreaming({ instanceId: 'social' });
```

For full details including billing and `max_streaming_instances_per_room` configuration, see the [multi-instance guide](/docs/guides/features/live-streaming/multi-instance).

## Live streaming events

Full payload details are in the [live streaming events reference](/reference/daily-js/events/live-streaming-events).

### `live-streaming-started`

Fired when the stream is ready and the first video frame has been delivered to the ingest server.

```javascript theme={null}
call.on('live-streaming-started', ({ instanceId, layout }) => {
  streamingBadge.hidden = false;
});
```

### `live-streaming-updated`

Fired when the first video frame is published to the RTMP server (`state: 'connected'`), when the connection is interrupted (`state: 'interrupted'`), or when it reconnects (`state: 'connected'`). If streaming was started with `endpoints`, the payload also includes the `endpoint` object.

```javascript theme={null}
call.on('live-streaming-updated', ({ endpoint, state }) => {
  if (state === 'interrupted') {
    showReconnectingBanner();
  } else if (state === 'connected') {
    hideReconnectingBanner();
  }
});
```

### `live-streaming-stopped`

```javascript theme={null}
call.on('live-streaming-stopped', () => {
  streamingBadge.hidden = true;
});
```

### `live-streaming-error`

```javascript theme={null}
call.on('live-streaming-error', ({ errorMsg }) => {
  console.error('Streaming error:', errorMsg);
});
```

## Complete example

```javascript theme={null}
const call = Daily.createCallObject();
await call.join({
  url: 'https://your-domain.daily.co/room',
  token: 'OWNER_OR_STREAMING_ADMIN_TOKEN',
});

const RTMP_URL = 'rtmps://live.example.com/app/your-stream-key';

document.getElementById('go-live').onclick = () => {
  call.startLiveStreaming({
    rtmpUrl: RTMP_URL,
    width: 1280,
    height: 720,
    fps: 30,
    videoBitrate: 3000,
    layout: { preset: 'active-participant' },
  });
};

document.getElementById('stop-live').onclick = () => {
  call.stopLiveStreaming();
};

call.on('live-streaming-started', () => {
  document.getElementById('go-live').disabled = true;
  document.getElementById('stop-live').disabled = false;
});

call.on('live-streaming-updated', ({ state }) => {
  const status = document.getElementById('stream-status');
  status.textContent = state === 'connected' ? '● Live' : '⚠ Reconnecting…';
});

call.on('live-streaming-stopped', () => {
  document.getElementById('go-live').disabled = false;
  document.getElementById('stop-live').disabled = true;
});

call.on('live-streaming-error', ({ errorMsg }) => {
  alert(`Stream error: ${errorMsg}`);
});
```


# Recording
Source: https://docs.daily.co/docs/daily-js/features/recording

Use startRecording(), stopRecording(), and updateRecording() to control Daily call recordings from daily-js.

<Card title="Recording overview" icon="video" href="/docs/guides/features/recording">
  New to Daily recording? Start here — covers recording types, when to use each, how to enable recording on a room or meeting token, and how to retrieve recordings.
</Card>

Recording must be enabled on the room or meeting token (via `enable_recording`) before `startRecording()` will work. See the overview guide above for setup.

## Starting a recording

[`startRecording()`](/reference/daily-js/instance-methods/start-recording) begins a recording with optional configuration:

```javascript theme={null}
// Start a cloud recording with defaults
call.startRecording();

// Start with explicit options
call.startRecording({
  type: 'cloud',
  width: 1920,
  height: 1080,
  fps: 30,
  videoBitrate: 4000,
  audioBitrate: 128,
  backgroundColor: '#000000',
});
```

## Recording options

<ParamField type="'cloud' | 'raw-tracks' | 'local' | 'cloud-audio-only'">
  The recording mode. Defaults to whichever type is enabled on the room or token. See the [recording overview](/docs/guides/features/recording) for a description of each type and when to use it.
</ParamField>

<ParamField type="number">
  Output video width in pixels. Default: `1280`.
</ParamField>

<ParamField type="number">
  Output video height in pixels. Default: `720`.
</ParamField>

<ParamField type="number">
  Frames per second. Default: `30`.
</ParamField>

<ParamField type="number">
  Video bitrate in kbps.
</ParamField>

<ParamField type="number">
  Audio bitrate in kbps.
</ParamField>

<ParamField type="number">
  Seconds of idle time (no active streams) before the recording automatically
  stops. Default: `60`.
</ParamField>

<ParamField type="number">
  Maximum recording duration in seconds.
</ParamField>

<ParamField type="string">
  Background color for the composed output when participant tiles do not fill
  the frame. Accepts a CSS hex color string, e.g. `'#1a1a2e'`.
</ParamField>

<ParamField type="string">
  Identifier for this recording instance. Required when running multiple
  simultaneous recordings. See [multiple simultaneous recordings](#multiple-simultaneous-recordings).
</ParamField>

<ParamField type="DailyStreamingLayoutConfig">
  Controls how participant tiles are arranged in the composed output. See [`DailyStreamingLayoutConfig`](/reference/daily-js/types/daily-streaming-layout-config) for the full type reference, or [layout presets](#layout-presets) below for usage examples.
</ParamField>

## Layout presets

The `layout` option controls the visual composition of cloud recordings. See [`DailyStreamingLayoutConfig`](/reference/daily-js/types/daily-streaming-layout-config) for field-level documentation on each preset. For screenshots, see the [recording overview](/docs/guides/features/recording#customize-cloud-recording-layouts).

### `default`

```javascript theme={null}
call.startRecording({
  layout: {
    preset: 'default',
    max_cam_streams: 9,         // maximum cameras shown
    participants: {
      video: ['session-id-1'],  // specific participant always shown
      sort: 'active',           // sort by speaking activity
    },
  },
});
```

### `single-participant`

```javascript theme={null}
call.startRecording({
  layout: {
    preset: 'single-participant',
    session_id: 'abc123',  // required: which participant to show
  },
});
```

### `active-participant`

```javascript theme={null}
call.startRecording({
  layout: { preset: 'active-participant' },
});
```

### `portrait`

```javascript theme={null}
call.startRecording({
  layout: {
    preset: 'portrait',
    variant: 'inset',  // 'vertical' (default) or 'inset'
    max_cam_streams: 4,
  },
});
```

### `audio-only`

```javascript theme={null}
call.startRecording({
  type: 'cloud-audio-only',
  layout: { preset: 'audio-only' },
});
```

### `custom`

Use Daily's VCS baseline composition to fully control the layout programmatically — modes, overlays, labels, participant ordering, and more. The [`startRecording()` reference](/reference/daily-js/types/daily-streaming-layout-config#baseline-composition-properties) documents all available `composition_params`.

```javascript theme={null}
call.startRecording({
  layout: {
    preset: 'custom',
    composition_id: 'daily:baseline',
    composition_params: {
      mode: 'dominant',
      'videoSettings.showParticipantLabels': true,
    },
    session_assets: {
      'images/logo.png': 'https://example.com/logo.png',
    },
  },
});
```

### `participants`

Several presets accept a `participants` field to filter which participants' video and audio are included in the recording. See [`DailyStreamingLayoutConfig`](/reference/daily-js/types/daily-streaming-layout-config#participants) for the full field list.

<Note>
  You must resend `participants` on every `updateRecording()` call — it is not persisted from the previous call. If omitted on update, all participants will be included.
</Note>

## Updating layout during recording

Call [`updateRecording()`](/reference/daily-js/instance-methods/update-recording) to switch layouts while a recording is in progress, without stopping and restarting:

```javascript theme={null}
// Start in default grid layout
call.startRecording({
  layout: { preset: 'default' },
});

// Later, switch to follow the active speaker
call.updateRecording({
  layout: { preset: 'active-participant' },
});
```

## Stopping a recording

[`stopRecording()`](/reference/daily-js/instance-methods/stop-recording) ends the active recording:

```javascript theme={null}
call.stopRecording();
```

## Multiple simultaneous recordings

Pass a unique `instanceId` to run more than one recording at the same time — for example, two cloud recordings with different layouts for different audiences:

```javascript theme={null}
// Portrait layout for mobile
call.startRecording({
  instanceId: 'portrait',
  type: 'cloud',
  layout: { preset: 'portrait', variant: 'vertical' },
});

// Landscape layout for desktop
call.startRecording({
  instanceId: 'landscape',
  type: 'cloud',
  layout: { preset: 'active-participant' },
});

// Update and stop each independently
call.updateRecording({ instanceId: 'landscape', layout: { preset: 'default' } });
call.stopRecording({ instanceId: 'portrait' });
call.stopRecording({ instanceId: 'landscape' });
```

<Note>
  Multiple instances work best when each runs the same recording type. Mixing types (e.g., `cloud` + `raw-tracks` simultaneously) is possible but not a recommended pattern — if you need both, contact [Daily support](https://www.daily.co/contact/support) to discuss your use case. For full details on instance limits and billing, see the [multi-instance guide](/docs/guides/features/live-streaming/multi-instance).
</Note>

## Recording events

Full payload details for all recording events are in the [recording events reference](/reference/daily-js/events/recording-events).

### `recording-started`

```javascript theme={null}
call.on('recording-started', (event) => {
  console.log('Recording started:', event.recordingId);
  console.log('Type:', event.type);           // 'cloud' | 'raw-tracks' | ...
  console.log('Started by:', event.startedBy); // session ID
  console.log('Layout:', event.layout);
});
```

### `recording-stopped`

```javascript theme={null}
call.on('recording-stopped', () => {
  console.log('Recording stopped.');
});
```

### `recording-error`

```javascript theme={null}
call.on('recording-error', ({ errorMsg }) => {
  console.error('Recording error:', errorMsg);
});
```

## Retrying failed recording starts

A recording start can fail for transient reasons, like a timeout while the recording infrastructure spins up. Sometimes the start command doesn't reach the recording server at all due to client network conditions, so `startRecording()` never fires a `recording-error` event: the recording just never starts.

Because of this, don't rely on the error event alone. After you call `startRecording()`, wait for the `recording-started` event. If it doesn't arrive within a short timeout, call `startRecording()` again. Use exponential backoff between attempts (wait a bit, retry, then double the wait) and cap the number of attempts so you don't retry forever.

```javascript theme={null}
const MAX_ATTEMPTS = 4;
const START_TIMEOUT_MS = 5000; // how long to wait for 'recording-started'
let attempt = 0;
let startTimer = null;

function startRecordingWithRetry() {
  attempt += 1;
  call.startRecording({ type: 'cloud' });

  // If 'recording-started' doesn't arrive, the command may not have reached
  // the recording server, so try again.
  startTimer = setTimeout(() => retryOrGiveUp(), START_TIMEOUT_MS);
}

function retryOrGiveUp(errorMsg) {
  if (attempt >= MAX_ATTEMPTS) {
    console.error(
      'Recording failed after retries:',
      errorMsg || 'no recording-started event'
    );
    return;
  }
  const delayMs = 1000 * 2 ** (attempt - 1); // 1s, 2s, 4s
  setTimeout(startRecordingWithRetry, delayMs);
}

call.on('recording-started', () => {
  clearTimeout(startTimer); // it started, so stop waiting
  attempt = 0; // reset for the next recording
});

call.on('recording-error', ({ errorMsg }) => {
  clearTimeout(startTimer);
  retryOrGiveUp(errorMsg);
});

startRecordingWithRetry();
```

If you start recordings from your server instead, apply the same pattern to the [`POST /rooms/:name/recordings/start`](/reference/rest-api/rooms/recordings/start) REST endpoint:

```python theme={null}
import time
import requests

MAX_ATTEMPTS = 4

def start_recording(room_name):
    url = f"https://api.daily.co/v1/rooms/{room_name}/recordings/start"
    headers = {"Authorization": "Bearer DAILY_API_KEY"}
    delay = 1  # seconds

    for attempt in range(MAX_ATTEMPTS):
        response = requests.post(url, headers=headers, timeout=30)
        if response.ok:
            return response.json()
        # Sleep only between attempts, not after the last one.
        if attempt < MAX_ATTEMPTS - 1:
            time.sleep(delay)  # 1s, 2s, 4s
            delay *= 2

    raise RuntimeError("recording did not start after retries")
```

<Note>
  Only retry transient errors. If the error says recording is not enabled on the room or token, fix the configuration instead of retrying.
</Note>

## Complete cloud recording example

```javascript theme={null}
const call = Daily.createCallObject();
await call.join({ url: 'https://your-domain.daily.co/room' });

// Start a 1080p cloud recording with active-speaker layout
call.startRecording({
  type: 'cloud',
  width: 1920,
  height: 1080,
  fps: 30,
  layout: { preset: 'active-participant' },
});

call.on('recording-started', ({ recordingId }) => {
  console.log('Recording ID:', recordingId);
  recordingBadge.hidden = false;
});

call.on('recording-stopped', () => {
  recordingBadge.hidden = true;
});

call.on('recording-error', ({ errorMsg }) => {
  console.error('Recording failed:', errorMsg);
});

// Switch layout mid-recording when a screen share starts
call.on('local-screen-share-started', () => {
  call.updateRecording({
    layout: {
      preset: 'single-participant',
      session_id: call.participants().local.session_id,
    },
  });
});

call.on('local-screen-share-stopped', () => {
  call.updateRecording({
    layout: { preset: 'active-participant' },
  });
});

document.getElementById('stop-recording').onclick = () =>
  call.stopRecording();
```


# Screen Sharing
Source: https://docs.daily.co/docs/daily-js/features/screen-sharing

Start, stop, and configure screen sharing in a Daily call, including sharing a pre-captured MediaStream and fine-tuning video quality presets.

Daily lets participants share their screen, an application window, or a browser tab with other call participants.

`startScreenShare()` accepts one of two argument shapes — or no arguments at all:

* **Let Daily handle capture** (`DailyStartScreenShare`) — Daily calls `getDisplayMedia()` for you, optionally using constraints and quality settings you provide. **This is the recommended option for most use cases.**
* **Bring your own stream** (`DailyStartScreenShareFromStream`) — you call `getDisplayMedia()` yourself (or source a stream from Electron's `desktopCapturer`, a canvas, etc.) and hand the resulting `MediaStream` to Daily.

To stop sharing: `call.stopScreenShare()`.

`startScreenShare()` is non-blocking — the browser's native picker opens asynchronously. Listen for [the events below](#events) to know when sharing actually begins or is canceled.

## Let Daily handle capture

<Badge>Recommended</Badge>

Call `startScreenShare()` with no arguments to use Daily's defaults, or pass a `DailyStartScreenShare` object to configure the capture:

<ParamField type="DailyDisplayMediaStreamOptions">
  Options forwarded directly to `navigator.mediaDevices.getDisplayMedia()`. Use
  these to request system audio, control surface switching, and more.
</ParamField>

<ParamField type="DailyVideoSendSettings | DailyScreenVideoSendSettingsPreset">
  Controls the video encoding quality for the shared screen. Accepts either a
  preset string or a custom `DailyVideoSendSettings` object. [See below](#send-settings) for details.
</ParamField>

```javascript theme={null}
// No arguments — Daily uses browser defaults
call.startScreenShare();

// With options
call.startScreenShare({
  displayMediaOptions: {
    audio: true,
    video: { frameRate: { ideal: 30, max: 60 } },
    selfBrowserSurface: 'exclude',
    systemAudio: 'include',
  },
  screenVideoSendSettings: 'detail-optimized',
});
```

### `DailyDisplayMediaStreamOptions`

<ParamField type="boolean | MediaTrackConstraints">
  Request system audio in the screen share. Default is browser-dependent.
</ParamField>

<ParamField type="boolean | MediaTrackConstraints">
  Video constraints for the captured surface.
</ParamField>

<ParamField type="'include' | 'exclude'">
  Whether to include the current browser tab as a selectable source.
</ParamField>

<ParamField type="'include' | 'exclude'">
  Whether to show an in-call surface-switching control (Chrome 107+).
</ParamField>

<ParamField type="'include' | 'exclude'">
  Whether to offer system audio capture in the picker (Windows/Chrome only).
</ParamField>

## Bring your own stream

If you already have a `MediaStream` — captured with your own `getDisplayMedia()` call, sourced from an Electron `desktopCapturer`, or otherwise constructed — pass it via `DailyStartScreenShareFromStream`. Daily will not call `getDisplayMedia()` in this case.

<ParamField type="MediaStream">
  A `MediaStream` whose first video track (and optionally first audio track)
  will be used as the screen share source.
</ParamField>

<ParamField type="DailyVideoSendSettings | DailyScreenVideoSendSettingsPreset">
  Optional quality preset or custom settings for the provided video track. [See below](#send-settings).
</ParamField>

```javascript theme={null}
const stream = await navigator.mediaDevices.getDisplayMedia({ video: true });
call.startScreenShare({ mediaStream: stream });
```

### Screenshare streams vs. custom tracks

If you have a `MediaStream` you want to send, you have two options: pass it to `startScreenShare({ mediaStream: stream })` or send it as a custom track via `startCustomTrack()`. These are not interchangeable — Daily treats screen share video tracks differently from other video tracks, and routing a stream through the wrong path will cause incorrect behavior.

In Chromium-based browsers, a screen share video track becomes `muted` at the browser level whenever its content is not changing — for example, when a shared document is idle. This is normal browser behavior and does not mean the user stopped sharing or there are issues with the track. To avoid incorrectly firing `track-stopped` or transitioning to an `interrupted` state, Daily suppresses the `muted` signal on screen share video tracks. This suppression only applies to tracks sent via `startScreenShare()`.

**Use `startScreenShare({ mediaStream: stream })` when your stream is screen content** — a `getDisplayMedia()` capture, an Electron `desktopCapturer` stream, or any source that may go idle between updates. The muted-suppression handling will prevent spurious interruptions.

**Use `startCustomTrack()` when your stream is not screen content** — a canvas animation, a virtual camera, or any source that should respond normally to the `muted` signal. Routing this through `startScreenShare()` would mask legitimate track state changes.

## Send Settings

Both methods of screensharing allow you to define the quality of the sending stream by either providing a preset or passing a custom `DailyVideoSendSettings` object. `DailyScreenVideoSendSettingsPreset` provides four named presets optimized for different content types:

| Preset                         | Best for                                     |
| ------------------------------ | -------------------------------------------- |
| `'default-screen-video'`       | General purpose (Daily's default)            |
| `'detail-optimized'`           | Text-heavy content — slides, IDEs, documents |
| `'motion-optimized'`           | Video playback, animations, fast UI          |
| `'motion-and-detail-balanced'` | Mixed content such as interactive demos      |

For full control, pass a `DailyVideoSendSettings` object:

```javascript theme={null}
call.startScreenShare({
  screenVideoSendSettings: {
    maxQuality: 'high',
    encodings: {
      low:  { maxBitrate: 500_000, maxFramerate: 5 },
      high: { maxBitrate: 4_000_000, maxFramerate: 30 },
    },
  },
});
```

## Updating screen share state mid-share

Use `updateScreenShare()` to enable or disable the screen video or audio tracks after sharing has started — without stopping and restarting the entire screen share:

```javascript theme={null}
// Mute screen audio while keeping screen video active
call.updateScreenShare({
  screenVideo: { enabled: true },
  screenAudio: { enabled: false },
});

// Re-enable screen audio
call.updateScreenShare({
  screenVideo: { enabled: true },
  screenAudio: { enabled: true },
});
```

## Reading local screen share state

```javascript theme={null}
const isVideoActive = call.localScreenVideo(); // true if screen video is active
const isAudioActive = call.localScreenAudio(); // true if screen audio is active
```

## Events

### `local-screen-share-started`

Fired when the local participant's screen share begins. Useful for updating UI to show a "stop sharing" button.

```javascript theme={null}
call.on('local-screen-share-started', () => {
  stopSharingBtn.hidden = false;
  startSharingBtn.hidden = true;
});
```

### `local-screen-share-stopped`

Fired when screen sharing ends — either because your code called `stopScreenShare()` or because the user clicked the browser's built-in "Stop sharing" button.

```javascript theme={null}
call.on('local-screen-share-stopped', () => {
  stopSharingBtn.hidden = true;
  startSharingBtn.hidden = false;
});
```

### `local-screen-share-canceled`

Fired when the user opens the browser picker but then dismisses it without selecting a source.

```javascript theme={null}
call.on('local-screen-share-canceled', () => {
  console.log('User dismissed the screen share picker.');
});
```

### Detecting remote screen shares

Remote screen share tracks arrive via the standard `track-started` / `track-stopped` events with `type === 'screenVideo'` or `type === 'screenAudio'`:

```javascript theme={null}
call.on('track-started', ({ participant, track, type }) => {
  if (type === 'screenVideo' && !participant.local) {
    const video = document.createElement('video');
    video.srcObject = new MediaStream([track]);
    video.autoplay = true;
    document.getElementById('screen-container').append(video);
  }
});

call.on('track-stopped', ({ participant, type }) => {
  if (type === 'screenVideo' && !participant?.local) {
    document.getElementById('screen-container').innerHTML = '';
  }
});
```

## Complete example

```javascript theme={null}
const call = Daily.createCallObject();
await call.join({ url: 'https://your-domain.daily.co/room' });

const startBtn = document.getElementById('start-share');
const stopBtn  = document.getElementById('stop-share');

startBtn.onclick = () => {
  call.startScreenShare({
    displayMediaOptions: { audio: true, selfBrowserSurface: 'exclude' },
    screenVideoSendSettings: 'detail-optimized',
  });
};

stopBtn.onclick = () => call.stopScreenShare();

call.on('local-screen-share-started', () => {
  startBtn.disabled = true;
  stopBtn.disabled = false;
});

call.on('local-screen-share-stopped', () => {
  startBtn.disabled = false;
  stopBtn.disabled = true;
});

call.on('local-screen-share-canceled', () => {
  console.log('Picker was dismissed.');
});
```


# Real-Time Transcription
Source: https://docs.daily.co/docs/daily-js/features/transcription

Transcribe speech in Daily calls in real time using Deepgram, with per-participant filtering, profanity control, and raw response access.

<Badge>Paid plans only</Badge>

<Card title="Transcription overview" icon="closed-captioning" href="/docs/guides/features/transcription">
  New to Daily transcription? Start here — covers real-time vs. post-call transcription, pricing, permissions, and transcript storage.
</Card>

Daily's transcription feature streams speech-to-text output to all participants in a call. It is powered by [Deepgram](https://deepgram.com) and supports a wide range of languages, models, and configuration options.

## Transcription permissions

Only meeting owners and participants with `canAdmin: 'transcription'` can start or stop transcription. See [Permissions](/docs/guides/features/transcription#permissions) in the overview for how to grant this.

## Transcript storage

By default, transcripts are ephemeral — participants receive `transcription-message` events but nothing is persisted. To save transcripts as WebVTT files, enable `enable_transcription_storage` at the room or domain level. See [Storage](/docs/guides/features/transcription#storage) in the overview for setup details, including custom S3 configuration for HIPAA use cases.

## Starting transcription

[`startTranscription()`](/reference/daily-js/instance-methods/start-transcription) starts a transcription session. All options are optional — call it with no arguments to use Deepgram defaults.

```javascript theme={null}
// Start with Deepgram defaults
call.startTranscription();

// Start with explicit language and model
call.startTranscription({
  language: 'en',
  model: 'nova-2',
  punctuate: true,
  profanity_filter: false,
});
```

<Tip>
  Check [Deepgram's language and model overview](https://developers.deepgram.com/docs/models-languages-overview) for the `model`/`language` combination that works best for your use case.
</Tip>

See [`startTranscription()`](/reference/daily-js/instance-methods/start-transcription) for the full list of options.

## Handling transcription messages

Listen to [`transcription-message`](/reference/daily-js/events/transcription-events#transcription-message) to receive transcript segments in real time:

```javascript theme={null}
call.on('transcription-message', (event) => {
  console.log('[transcript]', event.text);
  console.log('  participant:', event.participantId);
  console.log('  timestamp:', event.timestamp);
  console.log('  track type:', event.trackType); // 'cam-audio' | 'screen-audio' | ...
  console.log('  instance:', event.instanceId);

  if (event.rawResponse) {
    // Full Deepgram response — available when includeRawResponse: true
    console.log('  raw:', event.rawResponse);
  }
});
```

## Updating transcription

Use [`updateTranscription()`](/reference/daily-js/instance-methods/update-transcription) to change which participants are being transcribed while transcription is running:

```javascript theme={null}
// Transcribe only the presenter
call.updateTranscription({
  participants: [presenterSessionId],
});

// Restore transcription for everyone
call.updateTranscription({
  participants: null,
});
```

Note that participants who join after transcription starts are not automatically added — use `updateTranscription()` to add them.

## Stopping transcription

[`stopTranscription()`](/reference/daily-js/instance-methods/stop-transcription) ends a transcription session. If storage is enabled, the final transcript file is written at this point.

```javascript theme={null}
// Stop the default transcription instance
call.stopTranscription();

// Stop a named instance
call.stopTranscription({ instanceId: 'primary' });
```

## Events

Full payload details are in the [transcription events reference](/reference/daily-js/events/transcription-events).

```javascript theme={null}
call.on('transcription-started', ({ instanceId, language, model, startedBy }) => {
  console.log(`Transcription started (${model}/${language})`);
  captionsIndicator.hidden = false;
});

call.on('transcription-stopped', ({ instanceId, updatedBy }) => {
  captionsIndicator.hidden = true;
});

call.on('transcription-error', ({ instanceId, errorMsg }) => {
  console.error('Transcription error:', errorMsg);
});
```

## Post-call transcription

To transcribe a recording after a call ends, use the [Batch Processor API](/reference/rest-api/batch-processor/index). See [Post-call transcription](/docs/guides/features/transcription#post-call-transcription) in the overview for details.

## Complete example

<Steps>
  <Step title="Start transcription when joining">
    ```javascript theme={null}
    const call = Daily.createCallObject();

    call.on('joined-meeting', () => {
      call.startTranscription({
        language: 'en',
        model: 'nova-2',
        punctuate: true,
      });
    });

    await call.join({ url: 'https://your-domain.daily.co/room' });
    ```
  </Step>

  <Step title="Display captions in real time">
    ```javascript theme={null}
    const captionsDiv = document.getElementById('captions');

    call.on('transcription-message', ({ participantId, text }) => {
      const name =
        call.participants()[participantId]?.user_name ||
        participantId.slice(0, 8);

      const line = document.createElement('p');
      line.textContent = `${name}: ${text}`;
      captionsDiv.appendChild(line);
      captionsDiv.scrollTop = captionsDiv.scrollHeight;
    });
    ```
  </Step>

  <Step title="Handle lifecycle events">
    ```javascript theme={null}
    call.on('transcription-started', ({ language, model }) => {
      document.getElementById('captions-status').textContent =
        `Live captions on (${model}/${language})`;
    });

    call.on('transcription-stopped', () => {
      document.getElementById('captions-status').textContent = '';
    });

    call.on('transcription-error', ({ errorMsg }) => {
      console.error('Transcription error:', errorMsg);
    });
    ```
  </Step>

  <Step title="Stop transcription on leave">
    ```javascript theme={null}
    document.getElementById('leave').onclick = async () => {
      call.stopTranscription();
      await call.leave();
    };
    ```
  </Step>
</Steps>


# Audio and Video Controls
Source: https://docs.daily.co/docs/daily-js/guides/audio-video

Manage local and remote audio/video tracks, switch input and output devices, and monitor audio levels in a Daily call.

Daily gives you fine-grained control over microphone and camera state, device selection, and audio level monitoring — both before and during a call.

## Muting and unmuting

Check the current mute state with `localAudio()` and `localVideo()`, then toggle with the matching setters.

```javascript theme={null}
const call = Daily.createCallObject();

// Read current state
const isMicOn = call.localAudio();   // true = mic is sending
const isCamOn = call.localVideo();   // true = camera is sending

// Mute the microphone
call.setLocalAudio(false);

// Unmute the microphone
call.setLocalAudio(true);

// Turn the camera off
call.setLocalVideo(false);
```

`setLocalAudio` accepts an optional second argument:

<ParamField type="boolean">
  When `true`, the underlying `MediaStreamTrack` is discarded (stopped) on mute rather than kept alive. Use this when you want the microphone indicator to turn off on mute. If not set, defaults to the `keepCamIndicatorLightOn` value from `dailyConfig`, or `false` if that is not set.
</ParamField>

```javascript theme={null}
// Stop the camera track entirely when muting
call.setLocalAudio(false, { forceDiscardTrack: true });
```

<Warning>
  Setting `forceDiscardTrack: true` for audio can cause the beginning of a participant's audio to be clipped when they unmute. Because the track is fully discarded, remote participants must complete the entire track subscription process again when the sender unmutes — rather than simply resuming a paused track.
</Warning>

## Starting camera before joining

Call `startCamera()` to acquire device permissions and start the camera/mic pipeline before the user joins a room. This lets you display a preview and confirm device selection on a pre-join screen.

```javascript theme={null}
// Request permissions and start preview
const devices = await call.startCamera();
console.log('Camera:', devices.camera);
console.log('Mic:', devices.mic);

// Later, join with camera already running
await call.join({ url: 'https://your-domain.daily.co/room-name' });
```

You can also pass `DailyCallOptions` to `startCamera()` to pre-configure devices or input settings:

```javascript theme={null}
await call.startCamera({
  inputSettings: {
    video: { settings: { facingMode: { exact: 'environment' } } },
    audio: { processor: { type: 'noise-cancellation' }},
  },
});
```

## Joining with audio or video off

Set `startAudioOff` and/or `startVideoOff` to `false` in your call configuration before joining or starting the camera to have the participant join with their mic and/or camera off and override any room or token settings.

```javascript theme={null}
await call.join({
  url: 'https://your-domain.daily.co/room-name',
  startAudioOff: false,
  startVideoOff: false,
});
```

## Enumerating available devices

Use `enumerateDevices()` to get all available media devices:

```javascript theme={null}
const { devices } = await call.enumerateDevices();

const cameras = devices.filter(d => d.kind === 'videoinput');
const mics    = devices.filter(d => d.kind === 'audioinput');
const speakers = devices.filter(d => d.kind === 'audiooutput');

cameras.forEach(cam => {
  console.log(cam.label, cam.deviceId, cam.facing); // facing: 'user'|'environment'
});
```

Each entry is a `DailyMediaDeviceInfo` — a superset of [`MediaDeviceInfo`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDeviceInfo) with an optional `facing` field (`'user'` | `'environment'`) for cameras on mobile devices.

## Reading the active devices

`getInputDevices()` returns the devices currently in use (or expected to be used):

```javascript theme={null}
const { camera, mic, speaker } = await call.getInputDevices();
// Each is {} if no device is active, or a MediaDeviceInfo object
console.log('Active camera:', camera);
```

The return type is `DailyDeviceInfos`:

```typescript theme={null}
interface DailyDeviceInfos {
  camera:  {} | DailyMediaDeviceInfo;
  mic:     {} | MediaDeviceInfo;
  speaker: {} | MediaDeviceInfo;
}
```

## Switching input devices

### By device ID

Use `setInputDevicesAsync()` to switch the active camera or microphone by `deviceId`:

<ParamField type="string | false">
  The `deviceId` of the microphone to use. Setting to `false` will turn off the microphone and disallow the user to turn it back on until a valid `deviceId` or `true` is passed.
</ParamField>

<ParamField type="string | false">
  The `deviceId` of the camera to use. Setting to `false` will turn off the camera and disallow the user to turn it back on until a valid `deviceId` or `true` is passed.
</ParamField>

```javascript theme={null}
document.getElementById('camera-select').addEventListener('change', async (e) => {
  await call.setInputDevicesAsync({ videoDeviceId: e.target.value });
});

document.getElementById('mic-select').addEventListener('change', async (e) => {
  await call.setInputDevicesAsync({ audioDeviceId: e.target.value });
});
```

### With constraints or a custom track

For anything beyond a simple device ID swap — such as applying media constraints or supplying a custom `MediaStreamTrack` — use [`updateInputSettings()`](/reference/daily-js/instance-methods/update-input-settings) with `audio.settings` or `video.settings` instead:

```javascript theme={null}
// Apply custom constraints to the camera
await call.updateInputSettings({
  video: {
    settings: {
      deviceId: { exact: 'your-camera-device-id' },
      aspectRatio: 1.0
    },
  },
});

// Use a pre-captured MediaStreamTrack as the camera source
const [track] = canvasStream.getVideoTracks();
await call.updateInputSettings({
  video: { settings: { customTrack: track } },
});
```

## Switching the output device

Use `setOutputDeviceAsync()` to change the speaker or audio output device:

```javascript theme={null}
const speakers = devices.filter(d => d.kind === 'audiooutput');
const headphones = speakers.find(d => d.label.includes('Headphones'));

if (headphones) {
  await call.setOutputDeviceAsync({ outputDeviceId: headphones.deviceId });
}
```

<Note>
  `setOutputDeviceAsync()` is only supported in browsers that implement [`HTMLMediaElement.setSinkId()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/setSinkId). Most non-Android browsers now support this. Safari only recently added support in 18.4 and may have some quirks. Safari also requires a user gesture to switch audio output devices, so be sure to call this from a click handler or similar.
</Note>

## Cycling camera and mic

For mobile or simple use cases, `cycleCamera()` and `cycleMic()` rotate through available devices without you having to enumerate them manually:

```javascript theme={null}
// Flip between front and rear camera
const { device } = await call.cycleCamera();
console.log('Now using:', device?.label);

// Prefer switching to a different facing mode (front ↔ rear)
const { device: nextCam } = await call.cycleCamera({
  preferDifferentFacingMode: true,
});

// Cycle to the next microphone
const { device: nextMic } = await call.cycleMic();
```

## Automatic device switching

Daily automatically handles two common device disruption scenarios without any code on your part:

* **System default changes** — if the active device is set to the system default (Chrome uses `deviceId: "default"`; other browsers use the first device in the list) and the user changes their system default, Daily switches to the new default.
* **Active device disconnected** — if the currently selected device is unplugged or becomes unavailable, Daily switches to the next available device.

To disable this behavior and manage device changes yourself, set `noAutoDefaultDeviceChange: true` in `dailyConfig`:

```javascript theme={null}
const call = Daily.createCallObject({
  dailyConfig: { noAutoDefaultDeviceChange: true },
});
```

When disabled, you can listen for [`available-devices-updated`](/reference/daily-js/events/settings-events#available-devices-updated) to respond to device changes manually.

## Device change events

Listen for `available-devices-updated` when the system's device list changes (e.g., a USB camera is plugged in), and `selected-devices-updated` when the active devices change:

```javascript theme={null}
call.on('available-devices-updated', ({ availableDevices }) => {
  // availableDevices: MediaDeviceInfo[]
  console.log('Device list changed:', availableDevices);
  refreshDeviceSelectors(availableDevices);
});

call.on('selected-devices-updated', ({ devices }) => {
  // devices: DailyDeviceInfos
  console.log('Active camera:', devices.camera);
  console.log('Active mic:', devices.mic);
  console.log('Active speaker:', devices.speaker);
});
```

## Monitoring local audio level

Daily can poll the local participant's microphone volume and emit it as an event, which is useful for building a mic-level indicator.

<Steps>
  <Step title="Start the observer">
    ```javascript theme={null}
    // Poll every 100 ms (default)
    await call.startLocalAudioLevelObserver();

    // Or specify a custom interval in milliseconds
    await call.startLocalAudioLevelObserver(200);
    ```
  </Step>

  <Step title="Listen for audio level events">
    ```javascript theme={null}
    call.on('local-audio-level', ({ audioLevel }) => {
      // audioLevel is a number from 0.0 to 1.0
      micMeter.style.width = `${audioLevel * 100}%`;
    });
    ```
  </Step>

  <Step title="Read the level imperatively (optional)">
    ```javascript theme={null}
    // Any time after the observer is started:
    const level = call.getLocalAudioLevel(); // 0.0–1.0
    ```
  </Step>

  <Step title="Stop the observer when no longer needed">
    ```javascript theme={null}
    call.stopLocalAudioLevelObserver();
    ```
  </Step>
</Steps>

```javascript theme={null}
// Check whether the observer is currently running
const isRunning = call.isLocalAudioLevelObserverRunning();
```

## Monitoring remote participants' audio levels

To monitor the audio levels of all remote participants simultaneously (useful for displaying speaking indicators):

```javascript theme={null}
// Start polling remote audio levels every 150 ms
await call.startRemoteParticipantsAudioLevelObserver(150);

call.on('remote-participants-audio-level', ({ participantsAudioLevel }) => {
  // participantsAudioLevel: { [sessionId: string]: number }
  for (const [sessionId, level] of Object.entries(participantsAudioLevel)) {
    const tile = document.getElementById(`tile-${sessionId}`);
    if (tile) {
      tile.classList.toggle('speaking', level > 0.05);
    }
  }
});

// Read levels imperatively
const levels = call.getRemoteParticipantsAudioLevel();

// Stop when done
call.stopRemoteParticipantsAudioLevelObserver();
```

```javascript theme={null}
const isRemoteRunning = call.isRemoteParticipantsAudioLevelObserverRunning();
```

## Audio and video processing

[`updateInputSettings()`](/reference/daily-js/instance-methods/update-input-settings) applies real-time processing to your audio and video tracks. You can pass `inputSettings` directly to `join()` or `startCamera()` to enable processing before the first frame is captured, or call it at any time during a call.

### Noise cancellation

```javascript theme={null}
await call.updateInputSettings({
  audio: { processor: { type: 'noise-cancellation' } },
});

// Disable
await call.updateInputSettings({
  audio: { processor: { type: 'none' } },
});
```

### Background blur

`strength` ranges from `0` (no blur) to `1` (maximum blur):

```javascript theme={null}
await call.updateInputSettings({
  video: {
    processor: { type: 'background-blur', config: { strength: 0.75 } },
  },
});
```

### Background image replacement

```javascript theme={null}
await call.updateInputSettings({
  video: {
    processor: {
      type: 'background-image',
      config: { source: 'https://example.com/office.jpg' },
    },
  },
});
```

### Face detection

Enables face detection processing. Detected face counts are reported via the `face-counts-updated` event:

```javascript theme={null}
await call.updateInputSettings({
  video: { processor: { type: 'face-detection' } },
});
```

### Enabling at join time

```javascript theme={null}
await call.join({
  url: roomUrl,
  inputSettings: {
    audio: { processor: { type: 'noise-cancellation' } },
    video: { processor: { type: 'background-blur', config: { strength: 0.5 } } },
  },
});
```

Listen for [`input-settings-updated`](/reference/daily-js/events/settings-events#input-settings-updated) to track changes:

```javascript theme={null}
call.on('input-settings-updated', ({ inputSettings }) => {
  console.log('Input settings changed:', inputSettings);
});
```

<Note>
  Video processors require browser support for `OffscreenCanvas` and WebGL. Check `Daily.supportedBrowser().supportsVideoProcessing` before enabling them.
</Note>

## Complete device-switcher example

```javascript theme={null}
async function buildDeviceSwitcher(call) {
  const { devices } = await call.enumerateDevices();

  const camSelect = document.getElementById('camera-select');
  const micSelect = document.getElementById('mic-select');
  const spkSelect = document.getElementById('speaker-select');

  // Populate selects
  for (const d of devices) {
    const opt = new Option(d.label || d.deviceId, d.deviceId);
    if (d.kind === 'videoinput')  camSelect.append(opt.cloneNode(true));
    if (d.kind === 'audioinput')  micSelect.append(opt.cloneNode(true));
    if (d.kind === 'audiooutput') spkSelect.append(opt.cloneNode(true));
  }

  camSelect.onchange = () =>
    call.setInputDevicesAsync({ videoDeviceId: camSelect.value });

  micSelect.onchange = () =>
    call.setInputDevicesAsync({ audioDeviceId: micSelect.value });

  spkSelect.onchange = () =>
    call.setOutputDeviceAsync({ outputDeviceId: spkSelect.value });

  // Keep in sync with hot-plug events
  call.on('available-devices-updated', ({ availableDevices }) => {
    // Re-populate selects with the updated device list
    [camSelect, micSelect, spkSelect].forEach(s => (s.innerHTML = ''));
    for (const d of availableDevices) {
      const opt = new Option(d.label || d.deviceId, d.deviceId);
      if (d.kind === 'videoinput')  camSelect.append(opt.cloneNode(true));
      if (d.kind === 'audioinput')  micSelect.append(opt.cloneNode(true));
      if (d.kind === 'audiooutput') spkSelect.append(opt.cloneNode(true));
    }
  });
}
```


# Custom messages and shared data
Source: https://docs.daily.co/docs/daily-js/guides/custom-messages

Send real-time messages between participants, attach state to participants, and maintain room-wide shared data using daily-js.

Daily provides three mechanisms for sharing custom data between participants. They have different persistence, scope, and delivery characteristics — picking the right one for a given use case matters.

|                           | `sendAppMessage()`  | `setUserData()`             | `setMeetingSessionData()`             |
| ------------------------- | ------------------- | --------------------------- | ------------------------------------- |
| Scope                     | Per message         | Per participant             | Entire room                           |
| Persists for late joiners | No                  | Yes                         | Yes                                   |
| Size limit                | 4KB                 | 4KB                         | 100KB                                 |
| Rate limiting             | None                | Eventual consistency        | \~1 update/sec                        |
| Custom mode only          | No                  | No                          | Yes                                   |
| Received via              | `app-message` event | `participant-updated` event | `meeting-session-state-updated` event |

## sendAppMessage() — ephemeral real-time messages

[`sendAppMessage()`](/reference/daily-js/instance-methods/send-app-message) delivers a JSON payload to one or more participants currently in the call. Messages are ephemeral — they are not stored and participants who join after a message is sent will never see it.

```javascript theme={null}
// Broadcast to everyone in the room
call.sendAppMessage({ type: 'reaction', emoji: '🎉' });

// Send to a specific participant
call.sendAppMessage({ type: 'dm', text: 'Can you hear me?' }, participantSessionId);

// Send to a subset of participants
call.sendAppMessage({ type: 'alert', text: 'You are now on stage' }, [id1, id2]);
```

<Note>
  Use `session_id` to address recipients, not `user_id`. Broadcast messages (`'*'`) are not delivered to the sender.
</Note>

Receive messages by listening for `app-message`:

```javascript theme={null}
call.on('app-message', ({ data, fromId }) => {
  if (data.type === 'reaction') {
    showReaction(fromId, data.emoji);
  }
});
```

`sendAppMessage` is also available server-side via the [REST API](/reference/rest-api/rooms/session/send-app-message), which is useful for injecting messages from your backend — for example, sending a system notification when a server-side event occurs.

**Good for:** chat, emoji reactions, hand raise notifications, one-time alerts, any event that only matters to participants currently in the room.

**Not suitable for:** state that late joiners need to see, or anything requiring persistence.

## setUserData() — per-participant state

[`setUserData()`](/reference/daily-js/instance-methods/set-user-data) attaches arbitrary data to the local participant's entry in the participants map. It is automatically synced to all other participants and is visible to anyone who joins later — they receive it as part of the participants snapshot when they join.

```javascript theme={null}
// Set on join
await call.join({
  url: roomUrl,
  userData: { role: 'moderator', handRaised: false },
});

// Update during the call
await call.setUserData({ role: 'moderator', handRaised: true });
```

Any participant can read any other participant's `userData`:

```javascript theme={null}
// Read your own
const { userData } = call.participants().local;

// Read a remote participant's
const { userData } = call.participants()[sessionId];
```

Changes trigger `participant-updated` for all participants:

```javascript theme={null}
call.on('participant-updated', ({ participant }) => {
  if (participant.userData?.handRaised) {
    showHandRaisedIndicator(participant.session_id);
  }
});
```

<Note>
  The local copy of `userData` is updated immediately, but propagation to other participants is throttled. All participants are guaranteed to converge on the same final value.
</Note>

**Good for:** per-person state that all participants need to see, including new joiners — raised hand status, custom role, display name supplements, avatar URL, speaking queue position.

**Not suitable for:** high-frequency updates (e.g. cursor position), or state that belongs to the room rather than a specific person.

## setMeetingSessionData() — room-wide shared state

[`setMeetingSessionData()`](/reference/daily-js/instance-methods/set-meeting-session-data) writes to a single shared data object scoped to the meeting session. All participants receive updates in near real-time, and the data persists as participants join and leave — new joiners receive the current state immediately.

<Note>
  `setMeetingSessionData()` is available in custom call object mode only, not in Daily Prebuilt.
</Note>

```javascript theme={null}
// Replace the entire session data object
call.setMeetingSessionData({ activeScene: 'lobby', pollActive: false });

// Shallow-merge: only update specific top-level keys
call.setMeetingSessionData({ pollActive: true }, 'shallow-merge');
```

Read the current state synchronously at any time:

```javascript theme={null}
const { data } = call.meetingSessionState();
console.log('Current scene:', data.activeScene);
```

Or reactively via event:

```javascript theme={null}
call.on('meeting-session-state-updated', ({ meetingSessionState }) => {
  const { activeScene, pollActive } = meetingSessionState.data;
  updateRoomUI(activeScene, pollActive);
});
```

<Warning>
  Updates are batched and synced at most once per second. If multiple participants write concurrently, precise ordering is not guaranteed. This makes `setMeetingSessionData()` unsuitable for high-frequency updates where sub-second ordering matters — use `sendAppMessage()` for those instead.
</Warning>

**Good for:** room-level state shared by all participants — the current scene or layout, whether a poll is active, feature flags, a shared queue, any configuration that needs to survive participant churn.

**Not suitable for:** per-participant state (use `setUserData()`), high-frequency real-time events (use `sendAppMessage()`), or data that needs to outlive the session (use your own backend).

## Choosing the right mechanism

A few common scenarios:

**Chat messages** → `sendAppMessage()`. Messages are ephemeral by nature; you likely want your own backend for history anyway.

**Emoji reactions** → `sendAppMessage()`. One-shot, ephemeral, addressed to everyone.

**Raised hand indicator** → `setUserData()`. It's per-person state, and new joiners should see who has their hand up.

**Active speaker layout / scene** → `setMeetingSessionData()`. It's room-level state, and late joiners should start in the right scene.

**Server-triggered notification** → `sendAppMessage()` via the REST API. Your backend sends it directly without needing a participant to relay it.

**Shared poll state** → `setMeetingSessionData()`. The poll and its results belong to the room, not a person.

## Example: combining all three

A live Q\&A session is a natural fit for all three mechanisms. Participants raise their hand (per-person state), the host brings someone on stage (room-wide state), and the selected participant gets a private cue to unmute (ephemeral targeted message).

```javascript theme={null}
// On join — each participant declares their role
await call.join({
  url: roomUrl,
  userData: { role: 'audience', handRaised: false },
});

// Host initializes room-wide state
call.setMeetingSessionData(
  { currentSpeaker: null, queueOpen: true },
  'replace'
);

// --- Audience: raise a hand ---

async function raiseHand() {
  const { userData } = call.participants().local;
  await call.setUserData({ ...userData, handRaised: true });
}

// --- Host: watch for raised hands ---

call.on('participant-updated', ({ participant }) => {
  if (participant.userData?.handRaised) {
    addToSpeakerQueue(participant.session_id, participant.user_name);
  } else {
    removeFromSpeakerQueue(participant.session_id);
  }
});

// --- Host: bring someone on stage ---

function bringOnStage(sessionId) {
  // Update room-wide state so everyone's UI reflects the current speaker
  call.setMeetingSessionData({ currentSpeaker: sessionId }, 'shallow-merge');

  // Send a private cue so the participant knows to unmute
  call.sendAppMessage({ type: 'you-have-the-floor' }, sessionId);
}

// --- Participant: receive the cue and clear their hand raise ---

call.on('app-message', async ({ data }) => {
  if (data.type === 'you-have-the-floor') {
    call.setLocalAudio(true);
    const { userData } = call.participants().local;
    await call.setUserData({ ...userData, handRaised: false });
  }
});

// --- Everyone: highlight the current speaker ---

call.on('meeting-session-state-updated', ({ meetingSessionState }) => {
  const { currentSpeaker } = meetingSessionState.data;
  highlightActiveSpeaker(currentSpeaker);
});
```

Why each mechanism was chosen here:

* **`setUserData`** for `handRaised` — it's per-person, and participants who join mid-session should immediately see who has their hand up.
* **`setMeetingSessionData`** for `currentSpeaker` — it's room-level state with one authoritative value, and late joiners need to know who's on stage.
* **`sendAppMessage`** for the floor cue — it's a private one-time signal to a single participant, not state that belongs on the room or the participant object.

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [sendAppMessage()](/reference/daily-js/instance-methods/send-app-message)
    * [setUserData()](/reference/daily-js/instance-methods/set-user-data)
    * [setMeetingSessionData()](/reference/daily-js/instance-methods/set-meeting-session-data)
    * [meetingSessionState()](/reference/daily-js/instance-methods/meeting-session-state)
    * [participants()](/reference/daily-js/instance-methods/participants)
  </Card>

  <Card title="Events" icon="bolt">
    * [app-message](/reference/daily-js/events/messaging-events#app-message)
    * [participant-updated](/reference/daily-js/events/participant-events#participant-updated)
    * [meeting-session-state-updated](/reference/daily-js/events/messaging-events#meeting-session-state-updated)
  </Card>

  <Card title="REST API" icon="server">
    * [Send app message](/reference/rest-api/rooms/session/send-app-message)
  </Card>
</CardGroup>


# Handling device permissions
Source: https://docs.daily.co/docs/daily-js/guides/device-permissions

Learn about common device permission errors and best practices for handling camera and microphone access in Daily applications.

Accessing media input devices — cams, mics, and screens — can involve many and sometimes conflicting permission layers. Browsers, operating systems, devices, and participants are all factors that can complicate whether audio or video is shared or blocked as intended.

This guide covers common media device errors and how to help participants resolve them, plus general best practices for handling media devices in your app.

## Common media device errors

Daily accesses participant media input devices through the browser's [`MediaDevices`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices) interface. The interface's [`getUserMedia()`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) method prompts the user for device permissions and creates a [`MediaStream`](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream) with the corresponding tracks if permission is granted.

If something goes wrong, the browser throws an [exception](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#exceptions) and Daily emits a [`camera-error`](/reference/daily-js/events/settings-events#camera-error) event. Browsers are inconsistent in their implementations of these exceptions for any given root issue — for example, if there is no camera plugged in, Chrome and Firefox throw a `NotFoundError`, but Safari throws an `OverconstrainedError`. Daily normalizes these inconsistencies so the same underlying issue generates the same error type regardless of browser or OS. The most common device errors are detailed below. For full details on all error categories, see the [`camera-error` reference](/reference/daily-js/events/settings-events#camera-error).

### Device in use

Most common on Windows when another app is using the participant's camera.

The `camera-error` event's `error.type` will be `cam-in-use`, `mic-in-use`, or `cam-mic-in-use`:

```json theme={null}
{
  "action": "camera-error",
  "error": {
    "type": "cam-in-use",
    "msg": "Camera in use by another application."
  },
  "errorMsg": { "errorMsg": "not allowed" },
  "callClientId": "17225364729060.9442072768918943"
}
```

Alert the participant that another application is using their device and ask them to quit it and reload the call.

<img alt="Prompt in a video call asks participant to restart an application" />

### Permissions denied

Happens when the call hasn't been granted access to the participant's device — either the participant clicked "Block" in the browser permissions prompt, or the browser hasn't been granted access in OS settings. This is one of the most common `getUserMedia()` errors.

The `camera-error` event's `error.type` will be `'permissions'`. The `error.blockedBy` field indicates whether the block came from the user or the OS, and `error.blockedMedia` indicates which media is blocked:

```json theme={null}
{
  "action": "camera-error",
  "error": {
    "type": "permissions",
    "msg": "Permissions denied by user.",
    "blockedBy": "user",
    "blockedMedia": ["video", "audio"]
  },
  "errorMsg": { "errorMsg": "not allowed" },
  "callClientId": "17225364729060.9442072768918943"
}
```

Whether the participant blocked access intentionally or by accident, the call UI should reflect that the device is blocked. Daily Prebuilt, for example, displays media icons in red with "Allow" underneath. When clicked, the participant sees instructions for how to unblock their devices.

<img alt="Video call displays a prompt that instructs a participant how to unblock their camera" />

How to unblock a device depends on the device's manufacturer and the participant's browser. On some devices like iOS, a page refresh is enough to re-trigger the browser permission prompt. On others like some Android phones, participants may need to go into device settings to allow camera and microphone permissions. Testing on multiple devices and browsers is recommended.

### No available devices

If the browser can't find any input devices for a given media type, the `camera-error` event's `error.type` will be `"not-found"`, with an `error.missingMedia` field detailing which devices were not found:

```json theme={null}
{
  "action": "camera-error",
  "error": {
    "type": "not-found",
    "msg": "No device found.",
    "missingMedia": ["video"]
  },
  "errorMsg": { "errorMsg": "devices error" },
  "callClientId": "17225364729060.9442072768918943"
}
```

Prompt the participant to check their devices and reload the call.

<img alt="Video call displays prompt to participant to check their input devices" />

## Best practices for handling media devices

### Device Permission Prompts

In daily-js, permissions prompts will be triggered whenever media is first requested, typically on `startCamera()` or `join()`. By default, if the camera is enabled, daily-js will prompt for permission for both the camera and microphone, regardless of whether the microphone is enabled. This ensures a smoother user experience by reducing the number of prompts the participant sees. However, if the participant joins/startsCamera with only the mic enabled, the browser will only prompt for microphone access. This avoids the camera light turning on before the participant explicitly enables the camera, which can be a jarring experience. To change these default behaviors, see [`alwaysIncludeMicInPermissionPrompt`](/reference/daily-js/types/daily-call-options#param-always-include-mic-in-permission-prompt) and [`alwaysIncludeCamInPermissionPrompt`](/reference/daily-js/types/daily-call-options#param-always-include-cam-in-permission-prompt).

### Adjust instructions based on browser and device

Device manufacturers and browsers don't always handle device permissions the same way. For example, the steps to re-allow access after a permissions error differ by OS, device, and browser. For the best experience, your call UI should show device-specific instructions.

<img alt="Granting access prompt on iOS and Android after a NotAllowedError" />

<img alt="Granting access prompt on iOS and Android after a NotAllowedError" />

### Create a pre-call lobby for device setup

A test call page, lobby, or "green room" where participants can set up their devices before joining gives them a safe space to read and respond to permission prompts, configure their devices, and resolve any mistakes before going live.

To enable Daily Prebuilt's prejoin UI, set the [`enable_prejoin_ui`](/reference/rest-api/rooms/update-room#body-properties-enable-people-ui) property to `true` at the room or domain level.

<img alt="Lobby interface of Daily Prebuilt call prompts a participant to set up camera and mic" />

For custom apps, [`startCamera()`](/reference/daily-js/instance-methods/start-camera) is a good starting point for building a lobby — it requests device access and starts the camera before the participant joins the call.

To give participants visual confirmation that their microphone is working, call [`startLocalAudioLevelObserver()`](/reference/daily-js/instance-methods/start-local-audio-level-observer) after `startCamera()`. Daily will then emit [`local-audio-level`](/reference/daily-js/events/media-events#local-audio-level) events at a regular interval with a volume value between `0` and `1`, which you can use to drive a mic activity indicator in your lobby UI:

```javascript theme={null}
await call.startCamera();
await call.startLocalAudioLevelObserver(500); // interval in ms

call.on('local-audio-level', ({ audioLevel }) => {
  updateMicIndicator(audioLevel); // e.g. animate a level meter
});
```

Call [`stopLocalAudioLevelObserver()`](/reference/daily-js/instance-methods/stop-local-audio-level-observer) when the participant enters the call or leaves the lobby.

### iOS development and device permissions

Media device [permission requests](https://developer.apple.com/documentation/avfoundation/avcapturedevice/1624584-requestaccess) are async when using [AVFoundation](https://developer.apple.com/av-foundation/), Apple's audiovisual framework. The completion handler for these requests is called on an arbitrary dispatch queue.

These permissions should never be blocked, as that can lead to deadlocks. An API that was designed to be synchronous and blocking may need to be made async with a callback when adapted for iOS.


# Working with multiple call instances
Source: https://docs.daily.co/docs/daily-js/guides/multi-instance

A guide to using multiple call client instances simultaneously.

<Note>
  Multiple call client support requires `daily-js` version >= `0.67.0`.
</Note>

`daily-js` and `react-native-daily-js` support multiple simultaneous call client instances. The ability to use multiple instances simultaneously affords various use cases both simple and complex.

One simple example is having a secondary call instance for building a background effects preview. In a single call, setting the background processing effect applies the effect immediately, disallowing any preview step. With a second call instance, you can use prejoin functionality to start the camera, set the background effect, and preview the track without affecting the primary call until you choose to apply the effect.

Another use case we've heard is for call coordinators, where a special set of participants monitor or coordinate a larger call and may want to be in a separate call simultaneously for communicating behind the scenes.

Breakout rooms could also be solved using multiple call instances, [though we generally encourage the use of track subscriptions](https://www.daily.co/blog/why-you-probably-dont-need-multiple-daily-call-objects/#breakout-rooms) for smoother transitioning, communication between rooms, and call quality monitoring.

There are doubtless other use cases that could be solved with multiple clients. Always feel free to [reach out to Daily](mailto:help@daily.co) for help determining the best approach for solving yours.

## Limitations

There are a few known limitations when working with multiple call instances.

1. Each additional call instance will use additional bandwidth and CPU, as it does not simply piggyback on resources already in use. Take this into consideration to ensure instances are properly limited so as not to overwhelm a client's network or device.
2. `setOutputDeviceAsync()` will affect all audio elements on the window regardless of which instance the underlying tracks stem from. This function is a helper for rounding up all audio elements on the window and setting their `sinkId` to the matching device. If you use this function, call it on all call instances so that the underlying state management stays in sync with reality.
3. Multiple call client instances are not yet supported in `Daily React`.

## Opt-in flag

Most use cases are still best suited for a single call client instance and the existence of multiple often indicates a bug. For this reason, support for multiple call instances is opt-in. Without opting in, the SDK will throw an error in the constructor when it detects a second call instance. To opt in, add `allowMultipleCallInstances: true` to the properties passed to your constructors.

```javascript theme={null}
const call1 = Daily.createCallObject({ allowMultipleCallInstances: true });
const call2 = Daily.createCallObject({ allowMultipleCallInstances: true });
```

<Warning>
  If you were using multiple call instances before official support, you may have been setting `strictMode: false` in your constructor. This flag still exists and is used for other validation work but will soon no longer allow the multiple-instance behavior. Replace it with `allowMultipleCallInstances`.
</Warning>

## Retrieving a call instance

If you need to access a call instance created elsewhere in your codebase, use the static `getCallInstance()` method:

```typescript theme={null}
// Returns the first (and usually only) instance
const call = Daily.getCallInstance();

// Returns a specific instance by ID
const call = Daily.getCallInstance(callClientId);
```

This is most useful in single-instance apps where you want to avoid threading the call object through your component tree. For multi-instance apps, each instance has a unique `callClientId` string you can use to target a specific one.

## `callClientId`

Each call client instance has a public property identifying it: `callClientId`. You can use this for identification, and you can also pass it to `getCallInstance()` to retrieve a handle to the corresponding instance.

```javascript theme={null}
const call1Id = call1.callClientId;
const _call1 = Daily.getCallInstance(call1Id);
assert(call1 === _call1);
```

## Event handling

All events include `callClientId` to indicate which client emitted the event.

```javascript theme={null}
call1.on('joined-meeting', handleJoin);
call2.on('joined-meeting', handleJoin);

function handleJoin(event) {
  switch (event.callClientId) {
    case call1.callClientId:
      showJoinedDialog(call1);
      break;
    case call2.callClientId:
      showJoinedDialog(call2);
      break;
  }
}
```

## Logging

To help match up logs and metrics across multiple calls for a single user, the SDK logs all user session IDs for every simultaneous session. An example log:

`Simultaneous call client instance created, with participant session_id: 47365350-8116-4ec3-b4eb-f39a21a9ead8`

If one instance has not yet joined a room (like in the background effects preview use case), the other instance will log:

`Simultaneous call client instance created, with participant session_id: not yet set`

Once the second instance joins, the first will log again with the correct session ID.

## Demos

* [Using a second instance to preview camera effects](https://github.com/daily-co/cam-processing-preview-demo)


# Network and call quality
Source: https://docs.daily.co/docs/daily-js/guides/network-quality

Monitor network quality and CPU load during a call, and test conditions before a user joins.

Daily provides events and methods for tracking call quality in real time and for running pre-call tests before a user joins. This guide covers the most common patterns for each.

## Monitoring quality during a call

### Reacting to quality changes

The [`network-quality-change`](/reference/daily-js/events/network-events#network-quality-change) event fires whenever Daily's assessment of the local participant's network changes. This is the recommended way to drive a quality indicator in your UI — no polling required.

```javascript theme={null}
call.on('network-quality-change', ({ networkState, networkStateReasons }) => {
  switch (networkState) {
    case 'good':
      showQualityIndicator('good');
      break;
    case 'warning':
      showQualityIndicator('warning');
      console.log('Degraded due to:', networkStateReasons);
      break;
    case 'bad':
      showQualityIndicator('bad');
      notifyUser('Your connection quality is poor.');
      break;
  }
});
```

`networkState` is calculated from packet loss, round-trip time, and available outgoing bitrate, averaged over a \~30-second rolling window. When the state is `'warning'` or `'bad'`, `networkStateReasons` tells you which metrics are responsible — `'sendPacketLoss'`, `'recvPacketLoss'`, `'roundTripTime'`, or `'availableOutgoingBitrate'` — which can help you decide how to respond (for example, prompting a user to check their connection vs. proactively reducing video quality).

<Note>
  In Daily Prebuilt, `'warning'` triggers automatic bandwidth reduction and `'bad'` disables the local camera. In a custom UI you're responsible for any adaptive behavior.
</Note>

### Getting detailed stats on demand

[`getNetworkStats()`](/reference/daily-js/instance-methods/get-network-stats) returns a point-in-time snapshot with per-stream bitrates, packet loss, jitter, and RTT — useful if you want to log detailed diagnostics, build an advanced quality panel, or inspect conditions at a specific moment.

```javascript theme={null}
const { networkState, networkStateReasons, stats } = await call.getNetworkStats();

if (stats.latest) {
  console.log('Send packet loss:', stats.latest.totalSendPacketLoss);
  console.log('RTT (ms):', stats.latest.networkRoundTripTime);
  console.log('Worst video recv packet loss this session:', stats.worstVideoRecvPacketLoss);
}
```

Stats in `stats.latest` are updated approximately every two seconds. The object is empty early in the call before enough data has been collected.

<Warning>
  Firefox does not report send-side packet loss or audio jitter, and does not provide `availableOutgoingBitrate` or `networkRoundTripTime`.
</Warning>

### Handling connection interruptions

The [`network-connection`](/reference/daily-js/events/network-events#network-connection) event fires when a connection is established or interrupted. Every call uses two connections — `signaling` (call management) and `sfu` (audio/video) — and both reconnect automatically as long as signaling is alive.

```javascript theme={null}
call.on('network-connection', ({ type, event }) => {
  if (event === 'interrupted') {
    if (type === 'signaling') {
      // Participant will be ejected if signaling doesn't recover within ~20s
      showReconnectingBanner();
    } else {
      // SFU interruption — media will pause but reconnect automatically
      showMediaPausedIndicator();
    }
  } else if (event === 'connected') {
    hideReconnectingBanner();
  }
});
```

## Monitoring CPU load

High CPU load can degrade video quality independently of network conditions, particularly on lower-powered devices or in large calls with many incoming video streams. Listen for [`cpu-load-change`](/reference/daily-js/events/network-events#cpu-load-change) to detect this:

```javascript theme={null}
call.on('cpu-load-change', ({ cpuLoadState, cpuLoadStateReason }) => {
  if (cpuLoadState === 'high') {
    console.log('High CPU load — reason:', cpuLoadStateReason);

    if (cpuLoadStateReason === 'encode') {
      // Reduce outgoing video quality
      call.updateSendSettings({ video: { maxQuality: 'low' } });
    } else if (cpuLoadStateReason === 'decode') {
      // Reduce number of incoming video streams
      call.updateReceiveSettings({ '*': { video: { layer: 0 } } });
    }
  }
});
```

`cpuLoadStateReason` identifies whether encoding, decoding, or scheduling is the bottleneck, so you can target the right response. Use [`getCpuLoadStats()`](/reference/daily-js/instance-methods/get-cpu-load-stats) to poll for per-track decode stats or inspect frame encode/decode times in detail.

<Warning>
  CPU load monitoring applies to video calls only.
</Warning>

## Testing quality before joining

Running a pre-call test lets you warn users about poor conditions before they enter a call, or initialize bandwidth settings appropriately.

### testCallQuality()

[`testCallQuality()`](/reference/daily-js/instance-methods/test-call-quality) is the recommended pre-call test. It connects to a private Daily room, streams video to Daily's infrastructure for up to 30 seconds, and returns a verdict based on packet loss, round-trip time, and available bitrate.

Call it after [`preAuth()`](/reference/daily-js/instance-methods/pre-auth) or [`startCamera()`](/reference/daily-js/instance-methods/start-camera) and before [`join()`](/reference/daily-js/instance-methods/join):

```javascript theme={null}
const call = Daily.createCallObject();
await call.preAuth({ url: DAILY_ROOM_URL });

const results = await call.testCallQuality();

switch (results.result) {
  case 'good':
    proceedToJoin();
    break;
  case 'warning':
    showWarning('Your connection may cause choppy audio or video.');
    offerToJoinAnyway();
    break;
  case 'bad':
    showWarning('Your connection is poor. Try a different network.');
    offerToJoinAnyway();
    break;
  case 'failed':
    showError('Could not reach Daily servers. Check your network and try again.');
    break;
  case 'aborted':
    // join() or stopTestCallQuality() was called before data collection finished
    break;
}
```

The test runs for up to 30 seconds but you can stop it early:

```javascript theme={null}
call.stopTestCallQuality();
```

If [Adaptive Bitrate](/docs/guides/architecture-and-monitoring/adaptive-bitrate) is enabled (the default for 1:1 calls), the test results are used automatically at join time to initialize the highest simulcast layer appropriately — so running the test improves the call start even if the result is `'good'`.

### Other pre-call tests

Three additional tests are available for more targeted diagnostics:

* **[`testWebsocketConnectivity()`](/reference/daily-js/instance-methods/test-websocket-connectivity)** — Checks whether WebSocket connections can be established with Daily's signaling servers across AWS regions, without requiring a camera or a room. This is the right first check if you're building for environments where corporate firewalls or VPNs might block WebSockets — a `'failed'` result here means the call can't even get started.

* **[`testNetworkConnectivity(videoTrack)`](/reference/daily-js/instance-methods/test-network-connectivity)** — Checks whether a TURN connection can be established with Daily's infrastructure. A step beyond WebSocket connectivity, useful for stricter network environments. Returns a simple `'passed'` / `'failed'` rather than a quality grade.

* **[`testPeerToPeerCallQuality(options)`](/reference/daily-js/instance-methods/test-peer-to-peer-call-quality)** — Returns a quality verdict (`'good'` / `'warning'` / `'bad'`) using TURN servers rather than an actual Daily room session. Runs faster (15 seconds by default) and doesn't require a room URL, but it measures receive-side metrics rather than send-side, and unlike `testCallQuality()`, it doesn't seed Adaptive Bitrate for the subsequent call.

### Listening for results via event

If you're building on top of Daily Prebuilt, it runs `testCallQuality()` automatically in its prejoin UI. You can read the results without calling the method yourself by listening for the [`test-completed`](/reference/daily-js/events/network-events#test-completed) event:

```javascript theme={null}
call.on('test-completed', ({ test, results }) => {
  if (test === 'call-quality') {
    console.log('Pre-call quality result:', results.result);
  }
});
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [testCallQuality()](/reference/daily-js/instance-methods/test-call-quality)
    * [getNetworkStats()](/reference/daily-js/instance-methods/get-network-stats)
    * [getCpuLoadStats()](/reference/daily-js/instance-methods/get-cpu-load-stats)
    * [updateSendSettings()](/reference/daily-js/instance-methods/update-send-settings)
    * [updateReceiveSettings()](/reference/daily-js/instance-methods/update-receive-settings)
  </Card>

  <Card title="Events" icon="bolt">
    * [network-quality-change](/reference/daily-js/events/network-events#network-quality-change)
    * [network-connection](/reference/daily-js/events/network-events#network-connection)
    * [cpu-load-change](/reference/daily-js/events/network-events#cpu-load-change)
    * [test-completed](/reference/daily-js/events/network-events#test-completed)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Adaptive bitrate](/docs/guides/architecture-and-monitoring/adaptive-bitrate)
    * [Logging and metrics](/docs/guides/architecture-and-monitoring/logging-and-metrics)
  </Card>
</CardGroup>


# Permissions
Source: https://docs.daily.co/docs/daily-js/guides/permissions

Control what participants can send, receive, and administer in a Daily call.

Daily's permissions system lets you control exactly what each participant is allowed to do in a call: which media they can publish, which streams they can receive, and which administrative actions they can perform. Permissions can be set at join time via a meeting token or updated dynamically at runtime.

## DailyParticipantPermissions

Every participant object exposes a `permissions` field of type `DailyParticipantPermissions`:

See the [`DailyParticipantPermissions` reference](/reference/daily-js/types/daily-participant-permissions) for the full interface definition and field descriptions.

## Updating permissions at runtime

Use `updateParticipant()` to change a participant's permissions mid-call. The caller must themselves have `canAdmin: 'participants'` (or `canAdmin: true`) or be an owner.

```typescript theme={null}
call.updateParticipant(sessionId, {
  updatePermissions: {
    hasPresence: true,
    canSend: new Set(['audio', 'video']),
    canAdmin: false,
    canReceive: {
      base: true,
    },
  },
});
```

The `updatePermissions` field accepts a `DailyParticipantPermissionsUpdate`, where every field is optional — only those provided are changed:

```typescript theme={null}
type DailyParticipantPermissionsUpdate = {
  hasPresence?: boolean;
  canSend?: Array<string> | Set<string> | boolean;
  canReceive?: Partial<DailyParticipantCanReceivePermission>;
  canAdmin?: Array<string> | Set<string> | boolean;
};
```

### Restricting what a participant can send

The example below restricts a participant to audio-only (no camera or screen share):

```typescript theme={null}
call.updateParticipant(participantSessionId, {
  updatePermissions: {
    canSend: new Set(['audio']),
  },
});
```

To re-enable video later:

```typescript theme={null}
call.updateParticipant(participantSessionId, {
  updatePermissions: {
    canSend: new Set(['audio', 'video']),
  },
});
```

### Restricting what a participant can receive

The example below allows a participant to receive audio from everyone but video only from a specific user:

```typescript theme={null}
call.updateParticipant(participantSessionId, {
  updatePermissions: {
    canReceive: {
      base: {
        video: false,
        audio: true,
        screenVideo: false,
        screenAudio: false,
        customVideo: { '*': false },
        customAudio: { '*': false },
      },
      byUserId: {
        'presenter-user-id': { video: true },
      },
    },
  },
});
```

## Events

<ResponseField name="participant-updated" type="DailyEventObjectParticipant">
  Fired when a participant's permissions change. Check `participant.permissions` to see the updated values.

  ```typescript theme={null}
  call.on('participant-updated', ({ participant }) => {
    console.log('Updated permissions:', participant.permissions);
  });
  ```
</ResponseField>

## Complete example

Demonstrates the full permissions lifecycle: new participants join locked out, request presence via an app message, get admitted by the owner, and then have their `canSend` permissions managed through a panel.

* Open `https://localhost?t=YOUR_OWNER_TOKEN` for the owner view
* Open `https://localhost` (no token) for a participant view

<CodeGroup>
  ```javascript app.js theme={null}
  const ROOM_URL = 'https://your-domain.daily.co/room';

  const token = new URLSearchParams(window.location.search).get('t') ?? undefined;
  let canAdmin = false;
  const call = Daily.createCallObject();
  window.call = call; // for debugging
  const participantIds = new Set();
  window.participantIds = participantIds; // for debugging

  const SEND_TRACKS = ['audio', 'video'];

  // ── Helpers ──────────────────────────────────────────────────────────────────

  function _canAdmin(permissions) {
    const ca = permissions?.canAdmin;
    if (ca === true) return true;
    if (!ca) return false;
    return ca instanceof Set ? ca.has('participants') : false;
  }

  function canSendSet(permissions) {
    const cs = permissions?.canSend;
    if (cs === true) return new Set(SEND_TRACKS);
    if (!cs) return new Set();
    return cs instanceof Set ? new Set(cs) : new Set(cs);
  }

  // ── Track rendering (shared) ─────────────────────────────────────────────────

  function addParticipantTile(participant) {
    const sessionId = participant.session_id;
    let tile = document.getElementById(`tile-${sessionId}`);
    if (tile) return tile;
    tile = document.createElement('div');
    tile.id = `tile-${sessionId}`;
    tile.className = 'tile';

    const label = document.createElement('span');
    label.className = 'tile-label';
    console.log(call.participants());
    label.textContent = participant.local ? 'You' : sessionId.slice(0, 8);

    tile.append(label);
    document.getElementById('tracks').appendChild(tile);
    return tile;
  }

  function addVideoTile(participant, track) {
    const tile = addParticipantTile(participant);
    if (!tile) return;

    let video = tile.querySelector('video');
    if (video) {
      video.srcObject = new MediaStream([track]);
      return;
    }
    video = document.createElement('video');
    video.autoplay = true;
    video.playsInline = true;
    video.srcObject = new MediaStream([track]);

    tile.append(video);
  }

  function addAudioTile(participant, track) {
    const tile = addParticipantTile(participant);
    if (!tile) return;

    let audio = tile.querySelector('audio');
    if (audio) {
      audio.srcObject = new MediaStream([track]);
      return;
    }
    audio = document.createElement('audio');
    audio.autoplay = true;
    audio.srcObject = new MediaStream([track]);
    tile.append(audio);
  }

  call.on('track-started', ({ participant, track, type }) => {
    console.log('track started', { participant, track, type });
    if (type === 'video') addVideoTile(participant, track);
    if (type === 'audio' && !participant.local) addAudioTile(participant, track);
  });

  call.on('track-stopped', ({ participant, type }) => {
    if (type === 'video')
      document.getElementById(`tile-${participant.session_id}`)?.remove();
  });

  // ── Owner panel ──────────────────────────────────────────────────────────────

  let pendingSessionId = null;

  function populateDropdown() {
    const select = document.getElementById('participant-select');
    let prev = select.value;
    console.log(`Select.value: ${select.value}`);
    select.innerHTML = '<option value="">— select participant —</option>';

    for (const [id, p] of Object.entries(call.participants())) {
      if (p.local) continue;
      const opt = document.createElement('option');
      opt.value = id;
      opt.textContent = p.user_name || id.slice(0, 8);
      select.appendChild(opt);
    }

    select.value = prev;
    syncCheckboxes();
  }

  function syncCheckboxes() {
    const id = document.getElementById('participant-select').value;
    const participant = id ? call.participants()[id] : null;
    const perms = participant?.permissions;
    const sending = canSendSet(perms);

    document.getElementById('check-hasPresence').checked =
      perms?.hasPresence ?? false;
    for (const track of SEND_TRACKS) {
      document.getElementById(`check-${track}`).checked = sending.has(track);
    }
  }

  document
    .getElementById('participant-select')
    .addEventListener('change', syncCheckboxes);

  document.getElementById('update-btn').addEventListener('click', async () => {
    const id = document.getElementById('participant-select').value;
    if (!id) return;

    const hasPresence = document.getElementById('check-hasPresence').checked;
    const canSend = new Set(
      SEND_TRACKS.filter((t) => document.getElementById(`check-${t}`).checked),
    );

    console.log('Updating permissions for', id, { hasPresence, canSend });
    await call.updateParticipant(id, {
      updatePermissions: { hasPresence, canSend },
    });
  });

  call.on('app-message', ({ data }) => {
    if (data?.type !== 'request-presence') return;
    pendingSessionId = data.sessionId;
    document.getElementById('request-text').textContent =
      `Participant ${data.sessionId.slice(0, 8)} is requesting presence.`;
    document.getElementById('request-popup').hidden = false;
  });

  document.getElementById('approve-btn').addEventListener('click', async () => {
    if (!pendingSessionId) return;
    // Grant presence only — canSend stays false until the owner enables it via the panel
    console.log('Granting presence to', pendingSessionId);
    await call.updateParticipant(pendingSessionId, {
      updatePermissions: { hasPresence: true },
    });
  });

  document.getElementById('deny-btn').addEventListener('click', () => {
    pendingSessionId = null;
    document.getElementById('request-popup').hidden = true;
  });

  // ── Participant panel ─────────────────────────────────────────────────────────

  function updatePermsDisplay(permissions) {
    const sending = canSendSet(permissions);
    console.log('canSend:', sending);
    const rows = [
      ['Has presence', permissions?.hasPresence],
      ['Audio', sending.has('audio')],
      ['Video', sending.has('video')],
    ];
    document.getElementById('perms-list').innerHTML = rows
      .map(
        ([label, on]) =>
          `<li class="${on ? 'on' : 'off'}">${label}: ${on ? '✓' : '✗'}</li>`,
      )
      .join('');
  }

  document.getElementById('request-btn').addEventListener('click', () => {
    call.sendAppMessage(
      {
        type: 'request-presence',
        sessionId: call.participants().local.session_id,
      },
      '*',
    );
    document.getElementById('request-btn').textContent = 'Request sent…';
    document.getElementById('request-btn').disabled = true;
  });

  // ── Shared event handlers ─────────────────────────────────────────────────────

  call.on('participant-joined', (e) => {
    const participant = e.participant;
    console.log('Participant joined', e);
    if (canAdmin) {
      console.log(
        'Participant joined:',
        participantIds,
        _canAdmin(participant.permissions),
      );
      if (!participantIds.has(participant.session_id)) {
        if (!_canAdmin(participant.permissions)) {
          // Lock out every new non-admin participant immediately
          console.log('Denying presence to', participant.session_id);
          call.updateParticipant(participant.session_id, {
            updatePermissions: { hasPresence: false, canSend: false },
          });
        }
        participantIds.add(participant.session_id);
      } else if (pendingSessionId === participant.session_id) {
        pendingSessionId = null;
        document.getElementById('request-popup').hidden = true;
      }
      populateDropdown();
    }
  });

  call.on('joined-meeting', () => {
    canAdmin = _canAdmin(call.participants().local.permissions);

    if (canAdmin) {
      document.getElementById('owner-panel').hidden = false;
      populateDropdown();
    } else {
      document.getElementById('participant-panel').hidden = false;
      updatePermsDisplay(call.participants().local?.permissions);
    }
  });

  call.on('participant-updated', ({ participant }) => {
    if (canAdmin && !participant.local) {
      populateDropdown();
    }
    if (!canAdmin && participant.local) {
      updatePermsDisplay(participant.permissions);
      // Re-enable request button if presence was revoked
      if (!participant.permissions?.hasPresence) {
        document.getElementById('request-btn').textContent = 'Request presence';
        document.getElementById('request-btn').disabled = false;
      }
      const canSend = canSendSet(participant.permissions);
      if (canSend.has('video') && !call.localVideo()) call.setLocalVideo(true);
      if (canSend.has('audio') && !call.localAudio()) call.setLocalAudio(true);
    }
  });

  call.on('participant-left', ({ participant, reason }) => {
    document.getElementById(`tile-${participant.session_id}`)?.remove();
    if (canAdmin) {
      if (reason !== 'hidden') {
        participantIds.delete(participant.session_id);
      }
      populateDropdown();
    }
  });

  // ── Join ──────────────────────────────────────────────────────────────────────

  if (token) {
    await call.join({ url: ROOM_URL, token });
  } else {
    await call.join({ url: ROOM_URL });
  }
  ```

  ```html index.html theme={null}
  <!doctype html>
  <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <title>Permissions Demo</title>
      <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
      <div id="app">
        <!-- Main area: video tiles for all visible participants -->
        <div id="tracks"></div>

        <!-- Owner panel -->
        <aside id="owner-panel" hidden>
          <h2>Participants</h2>
          <select id="participant-select">
            <option value="">— select participant —</option>
          </select>
          <div id="permission-checkboxes">
            <label
              ><input type="checkbox" id="check-hasPresence" /> Has
              presence</label
            >
            <label><input type="checkbox" id="check-audio" /> Send audio</label>
            <label><input type="checkbox" id="check-video" /> Send video</label>
          </div>
          <button id="update-btn">Update permissions</button>

          <!-- Popup shown when a participant requests presence -->
          <div id="request-popup" hidden>
            <p id="request-text"></p>
            <button id="approve-btn">Approve</button>
            <button id="deny-btn">Deny</button>
          </div>
        </aside>

        <!-- Participant panel -->
        <aside id="participant-panel" hidden>
          <h2>Your permissions</h2>
          <ul id="perms-list"></ul>
          <button id="request-btn">Request presence</button>
        </aside>
      </div>

      <script src="https://unpkg.com/@daily-co/daily-js"></script>
      <script type="module" src="app.js"></script>
    </body>
  </html>
  ```

  ```css styles.css theme={null}
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  [hidden] {
    display: none !important;
  }

  body {
    font-family: sans-serif;
    background: #0f0f1a;
    color: #e0e0e0;
    margin: 0;
    height: 100vh;
    overflow: hidden;
  }

  #app {
    display: flex;
    height: 100%;
  }

  /* ── Tracks area ── */
  #tracks {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 0.5rem;
    padding: 1rem;
    overflow-y: auto;
  }

  .tile {
    position: relative;
    width: 280px;
    height: 210px;
    background: #1a1a2e;
    border-radius: 6px;
    overflow: hidden;
  }

  .tile video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .tile-label {
    position: absolute;
    bottom: 6px;
    left: 8px;
    font-size: 0.75rem;
    background: rgba(0, 0, 0, 0.55);
    padding: 2px 6px;
    border-radius: 3px;
  }

  /* ── Side panel ── */
  aside {
    width: 260px;
    flex-shrink: 0;
    background: #13131f;
    border-left: 1px solid #2a2a3e;
    padding: 1rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  h2 {
    margin: 0;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #a0a0c0;
  }

  select {
    width: 100%;
    background: #1a1a2e;
    color: #e0e0e0;
    border: 1px solid #2a2a3e;
    border-radius: 4px;
    padding: 0.4rem;
    font-size: 0.875rem;
  }

  #permission-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.875rem;
  }

  #permission-checkboxes label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
  }

  button {
    padding: 0.45rem 0.9rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.875rem;
    background: #e94560;
    color: #fff;
  }

  button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }

  #update-btn {
    background: #2ecc71;
    color: #fff;
  }

  /* ── Request popup ── */
  #request-popup {
    background: #1a1a2e;
    border: 1px solid #2a2a3e;
    border-radius: 6px;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  #request-text {
    margin: 0;
    font-size: 0.875rem;
  }

  #request-popup div {
    display: flex;
    gap: 0.5rem;
  }

  #approve-btn {
    background: #2ecc71;
  }
  #deny-btn {
    background: #e94560;
  }

  /* ── Permissions list ── */
  #perms-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
  }

  #perms-list li.on {
    color: #2ecc71;
  }
  #perms-list li.off {
    color: #555577;
  }
  ```
</CodeGroup>


# Waiting room (knock-to-join)
Source: https://docs.daily.co/docs/daily-js/guides/waiting-room

Build a lobby where participants request access and owners admit or deny them in real time.

Daily's knock-to-join feature lets you gate entry to a room. Participants who arrive are held in a waiting state until an owner explicitly admits them. This guide covers room configuration, the waiting participant flow, and the admin flow.

## Room configuration

Knock-to-join requires two properties on the room:

* [`privacy: 'private'`](/reference/rest-api/rooms/create-room#body-properties-privacy) — places tokenless participants in the lobby instead of admitting them directly
* [`enable_knocking: true`](/reference/rest-api/rooms/create-room#body-properties-enable-knocking) — allows those lobby participants to ring for admission

```bash theme={null}
POST /v1/rooms
{
  "properties": {
    "privacy": "private",
    "enable_knocking": true
  }
}
```

<Note>
  Any participant who joins with a meeting token — no matter their permissions — bypasses the lobby and enters the call directly. Only tokenless participants are placed in the lobby.
</Note>

### Using Prebuilt

If you're using Daily Prebuilt, the lobby UI is built in. Once the room is configured above, also set `enable_prejoin_ui` on the [room](/reference/rest-api/rooms/create-room#body-properties-enable-prejoin-ui), [domain](/reference/rest-api/domain/set-domain-config#body-properties-enable-prejoin-ui), or [meeting token](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties-enable-prejoin-ui) and you're done — Daily handles the waiting room experience for you.

The rest of this guide covers building a custom lobby UI with the call object API.

## Waiting participant flow

<Steps>
  <Step title="Join the room">
    Call `join()` without a token. The participant lands in the lobby and [`accessState()`](/reference/daily-js/instance-methods/access-state) returns `{ access: { level: 'lobby' } }` — they are connected but hidden from other participants.

    ```typescript theme={null}
    await call.join({ url: 'https://your-domain.daily.co/your-room' });
    // accessState() === { access: { level: 'lobby' } }
    ```
  </Step>

  <Step title="Request access">
    Call [`requestAccess()`](/reference/daily-js/instance-methods/request-access) with a display name. This notifies admins and adds the participant to the waiting list. The returned Promise **blocks until the request is decided** — you can use the return value directly:

    ```typescript theme={null}
    const { granted } = await call.requestAccess({ name: 'Alice' });

    if (granted) {
      showCallUI();
    } else {
      // Access denied — participant has been ejected from the call
      showRejectedUI();
    }
    ```
  </Step>

  <Step title="Alternatively, use events">
    If you need to react to access changes in multiple places (e.g. updating different parts of your UI), the event-based approach may be a better fit. [`access-state-updated`](/reference/daily-js/events/lifecycle-events#access-state-updated) fires when access is granted; a fatal [`error`](/reference/daily-js/events/error-events#error) event with `error.type === 'not-allowed'` fires when access is denied.

    ```typescript theme={null}
    call.on('access-state-updated', ({ access }) => {
      if (access.level === 'full') {
        showCallUI();
      }
    });

    call.on('error', ({ error }) => {
      if (error.type === 'not-allowed') {
        // Access was denied — participant has been removed from the call
        showRejectedUI();
      }
    });

    await call.requestAccess({ name: 'Alice' });
    ```
  </Step>
</Steps>

## Admin flow

<Steps>
  <Step title="Join with admin permissions">
    Join with a meeting token that grants `canAdmin: ['participants']` (or `is_owner: true`). Either bypasses the lobby and enters the call directly.

    ```typescript theme={null}
    await call.join({
      url: 'https://your-domain.daily.co/your-room',
      token: 'ADMIN_TOKEN', // token with canAdmin: ['participants'] or is_owner: true
    });
    ```

    See [meeting token permissions](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties-permissions) for how to create a token with `canAdmin`.
  </Step>

  <Step title="Handle participants already waiting">
    Call [`waitingParticipants()`](/reference/daily-js/instance-methods/waiting-participants) immediately after joining to catch anyone who arrived before you.

    ```typescript theme={null}
    for (const [id, p] of Object.entries(call.waitingParticipants())) {
      showAdmitPrompt(p.id, p.name);
    }
    ```

    Each waiting participant is a `DailyWaitingParticipant`:

    ```typescript theme={null}
    interface DailyWaitingParticipant {
      id: string;    // unique ID for this waiting session
      name: string;  // display name passed to requestAccess()
      awaitingAccess: { level: 'full' };
    }
    ```
  </Step>

  <Step title="Listen for new arrivals">
    Subscribe to lobby events to keep your UI in sync:

    | Event                                                                                                      | Fires when                                                          |
    | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- |
    | [`waiting-participant-added`](/reference/daily-js/events/participant-events#waiting-participant-added)     | A participant calls `requestAccess()`                               |
    | [`waiting-participant-updated`](/reference/daily-js/events/participant-events#waiting-participant-updated) | A waiting participant calls `requestAccess()` again with a new name |
    | [`waiting-participant-removed`](/reference/daily-js/events/participant-events#waiting-participant-removed) | A participant is admitted, denied, or leaves on their own           |

    ```typescript theme={null}
    call.on('waiting-participant-added', ({ participant }) => {
      showAdmitPrompt(participant.id, participant.name);
    });

    call.on('waiting-participant-removed', ({ participant }) => {
      removeAdmitPrompt(participant.id);
    });
    ```
  </Step>

  <Step title="Admit or deny participants">
    Use [`updateWaitingParticipant()`](/reference/daily-js/instance-methods/update-waiting-participant) to act on one participant, or [`updateWaitingParticipants()`](/reference/daily-js/instance-methods/update-waiting-participants) to act on many at once.

    ```typescript theme={null}
    // Admit one
    await call.updateWaitingParticipant(id, { grantRequestedAccess: true });

    // Deny one
    await call.updateWaitingParticipant(id, { grantRequestedAccess: false });

    // Admit all but one currently waiting
    await call.updateWaitingParticipants([
      id: { grantRequestedAccess: false },
      '*': { grantRequestedAccess: true }
    ]);
    ```
  </Step>
</Steps>

## Complete example

Open `https://localhost?t=YOUR_ADMIN_TOKEN` for the admin view, or `https://localhost` (no token) for the waiting participant view.

<CodeGroup>
  ```javascript app.js theme={null}
  const ROOM_URL = 'https://your-domain.daily.co/your-room';

  // Pass an admin token via ?t=... to join as admin; omit for waiting participant
  const token = new URLSearchParams(window.location.search).get('t') ?? undefined;
  const isAdmin = Boolean(token);

  const call = Daily.createCallObject();

  if (isAdmin) {
    // --- Admin side ---
    document.getElementById('admin-view').hidden = false;
    document.getElementById('admin-status').textContent = 'Joining…';

    call.on('waiting-participant-added', ({ participant }) => {
      document.getElementById('no-waiters').hidden = true;

      const notice = document.createElement('div');
      notice.id = `waiting-${participant.id}`;
      notice.className = 'notice';
      notice.innerHTML = `
        <span>${participant.name || 'Someone'} wants to join</span>
        <button data-id="${participant.id}" data-action="admit">Admit</button>
        <button data-id="${participant.id}" data-action="deny">Deny</button>
      `;
      document.getElementById('lobby-notices').appendChild(notice);
    });

    call.on('waiting-participant-removed', ({ participant }) => {
      document.getElementById(`waiting-${participant.id}`)?.remove();
      if (Object.keys(call.waitingParticipants()).length === 0) {
        document.getElementById('no-waiters').hidden = false;
      }
    });

    document.getElementById('lobby-notices').addEventListener('click', async (e) => {
      const btn = e.target.closest('button');
      if (!btn) return;
      const { id, action } = btn.dataset;
      await call.updateWaitingParticipant(id, {
        grantRequestedAccess: action === 'admit',
      });
    });

    await call.join({ url: ROOM_URL, token });
    document.getElementById('admin-status').textContent = "You're in the call.";

    // Handle anyone already waiting when the admin joins
    const alreadyWaiting = call.waitingParticipants();
    if (Object.keys(alreadyWaiting).length === 0) {
      document.getElementById('no-waiters').hidden = false;
    }
    for (const p of Object.values(alreadyWaiting)) {
      call.emit('waiting-participant-added', { participant: p });
    }
  } else {
    // --- Waiting participant side ---
    document.getElementById('waiting-view').hidden = false;
    document.getElementById('waiting-status').textContent = 'Joining…';

    call.on('access-state-updated', ({ access }) => {
      if (access.level === 'full') {
        document.getElementById('waiting-view').hidden = true;
        document.getElementById('call-view').hidden = false;
      }
    });

    call.on('error', ({ error }) => {
      if (error.type === 'not-allowed') {
        document.getElementById('waiting-view').hidden = true;
        document.getElementById('rejected-view').hidden = false;
      }
    });

    await call.join({ url: ROOM_URL });
    // accessState() === { access: { level: 'lobby' } }

    const name = prompt('Your name') ?? 'Guest';
    document.getElementById('waiting-status').textContent =
      `Waiting to be admitted, ${name}…`;

    await call.requestAccess({ name });
    // accessState() === { access: { level: 'lobby' }, awaitingAccess: { level: 'full' } }
  }
  ```

  ```html index.html theme={null}
  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Waiting Room Demo</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <!-- Admin view: always visible once joined as admin -->
    <div id="admin-view" hidden>
      <p class="status" id="admin-status"></p>
      <h2>Lobby</h2>
      <p id="no-waiters">No one waiting.</p>
      <div id="lobby-notices"></div>
    </div>

    <!-- Waiting participant view: shown while in the lobby -->
    <div id="waiting-view" hidden>
      <p class="status" id="waiting-status"></p>
    </div>

    <!-- Waiting participant view: shown once admitted -->
    <div id="call-view" hidden>
      <p class="status admitted">You're in the call.</p>
    </div>

    <!-- Waiting participant view: shown if denied -->
    <div id="rejected-view" hidden>
      <p class="status rejected">Your request to join was denied.</p>
    </div>

    <script src="https://unpkg.com/@daily-co/daily-js"></script>
    <script type="module" src="app.js"></script>
  </body>
  </html>
  ```

  ```css styles.css theme={null}
  body {
    font-family: sans-serif;
    background: #0f0f1a;
    color: #e0e0e0;
    margin: 0;
    padding: 1.5rem;
  }

  h2 {
    margin: 1rem 0 0.5rem;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #a0a0c0;
  }

  .status {
    font-style: italic;
    color: #a0a0c0;
    margin: 0 0 0.5rem;
  }

  .status.admitted {
    color: #2ecc71;
    font-style: normal;
    font-weight: bold;
  }

  .status.rejected {
    color: #e94560;
    font-style: normal;
    font-weight: bold;
  }

  #no-waiters {
    color: #555577;
    font-style: italic;
  }

  .notice {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    background: #1a1a2e;
    border-radius: 6px;
    margin-bottom: 0.5rem;
  }

  .notice span {
    flex: 1;
  }

  button {
    padding: 0.4rem 0.9rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.875rem;
  }

  button[data-action="admit"] {
    background: #2ecc71;
    color: #fff;
  }

  button[data-action="deny"] {
    background: #e94560;
    color: #fff;
  }
  ```
</CodeGroup>


# Installation
Source: https://docs.daily.co/docs/daily-js/installation

Install @daily-co/daily-js via a package manager or load it from a CDN.

## Requirements

daily-js runs in any browser that supports WebRTC. See [here](/reference/daily-js/static-methods/supported-browser#supported-browsers) for a full list of supported browsers and versions.

```javascript theme={null}
const { supported, name, version } = Daily.supportedBrowser();

if (!supported) {
  alert(`${name} ${version} does not support WebRTC. Please use a modern browser.`);
}
```

## Package manager

Install the `@daily-co/daily-js` package using your preferred package manager:

<Tip>
  The `@daily-co/daily-js` package is small by design — the call bundle is fetched from Daily's CDN at runtime when you join. See [How it works](/docs/daily-js/introduction#how-it-works) for details.
</Tip>

<CodeGroup>
  ```bash npm theme={null}
  npm install @daily-co/daily-js
  ```

  ```bash yarn theme={null}
  yarn add @daily-co/daily-js
  ```

  ```bash pnpm theme={null}
  pnpm add @daily-co/daily-js
  ```
</CodeGroup>

## Importing the library

<Note>
  The package's default export is declared as `Daily` in the TypeScript types, while, for historical reasons, the underlying class is named `DailyIframe`. In our documentation and examples, we refer to the default export as `Daily` for clarity, but you may see `DailyIframe` in some contexts, especially in older code snippets. Both refer to the same default export.
</Note>

<Tabs>
  <Tab title="ESM">
    Use a default import. The exported default is the `Daily` class, which acts as both a factory and a namespace for static utilities.

    ```javascript theme={null}
    import Daily from '@daily-co/daily-js';

    const call = Daily.createCallObject();
    ```

    You can also import named exports for constants and types:

    ```javascript theme={null}
    Daily, {
      DAILY_STATE_JOINED,
      DAILY_STATE_LEFT,
      DAILY_TRACK_STATE_PLAYABLE,
    } from '@daily-co/daily-js';
    ```
  </Tab>

  <Tab title="CommonJS">
    Require the package as you would any CommonJS module. The default export is available on the `.default` property:

    ```javascript theme={null}
    const Daily = require('@daily-co/daily-js').default;
    // or, if your bundler resolves the `main` field directly:
    // const Daily = require('@daily-co/daily-js');

    const call = Daily.createCallObject();
    ```
  </Tab>

  <Tab title="CDN (script tag)">
    Load daily-js directly from [unpkg](https://unpkg.com) without a build step. After the script loads, `DailyIframe` is available as a global on `window`.

    ```html theme={null}
    <script src="https://unpkg.com/@daily-co/daily-js"></script>
    <script>
      const call = Daily.createCallObject();
    </script>
    ```

    To pin a specific version, append it to the URL:

    ```html theme={null}
    <script src="https://unpkg.com/@daily-co/daily-js@0.89.1/dist/daily.js"></script>
    ```

    <Tip>
      Pinning a version in production prevents your app from being affected by future breaking changes.
    </Tip>
  </Tab>
</Tabs>

## TypeScript

`@daily-co/daily-js` ships with TypeScript definitions in `index.d.ts`. No additional `@types` package is needed.

```typescript theme={null}
Daily, {
  DailyCall,
  DailyParticipant,
  DailyEventObjectParticipants,
  DailyBrowserInfo,
} from '@daily-co/daily-js';

// Factory methods return DailyCall
const call: DailyCall = Daily.createCallObject();

// Event callbacks are fully typed
call.on('joined-meeting', (event: DailyEventObjectParticipants) => {
  Object.values(event.participants).forEach((p: DailyParticipant) => {
    console.log(p.user_name, p.session_id);
  });
});

// Browser support check
const info: DailyBrowserInfo = Daily.supportedBrowser();
if (!info.supported) {
  throw new Error('WebRTC not supported in this browser');
}
```

<Note>
  While `Daily` is the default export and namespace, `DailyCall` is the interface describing an active call instance returned by the factory methods (`createFrame`, `createCallObject`, `wrap`).
</Note>

## Named exports

In addition to the default export (the `DailyIframe` class), the package exports a set of named constants you can use for comparisons:

```javascript theme={null}
Daily, {
  // Meeting state constants
  DAILY_STATE_NEW,
  DAILY_STATE_JOINING,
  DAILY_STATE_JOINED,
  DAILY_STATE_LEFT,
  DAILY_STATE_ERROR,

  // Track state constants
  DAILY_TRACK_STATE_BLOCKED,
  DAILY_TRACK_STATE_OFF,
  DAILY_TRACK_STATE_SENDABLE,
  DAILY_TRACK_STATE_LOADING,
  DAILY_TRACK_STATE_INTERRUPTED,
  DAILY_TRACK_STATE_PLAYABLE,

  // Access level constants
  DAILY_ACCESS_UNKNOWN,
  DAILY_ACCESS_LEVEL_FULL,
  DAILY_ACCESS_LEVEL_LOBBY,
  DAILY_ACCESS_LEVEL_NONE,

  // Receive settings special keys
  DAILY_RECEIVE_SETTINGS_BASE_KEY,
  DAILY_RECEIVE_SETTINGS_ALL_PARTICIPANTS_KEY,

  // Fatal error type constants
  DAILY_FATAL_ERROR_EJECTED,
  DAILY_FATAL_ERROR_NBF_ROOM,
  DAILY_FATAL_ERROR_NBF_TOKEN,
  DAILY_FATAL_ERROR_EXP_ROOM,
  DAILY_FATAL_ERROR_EXP_TOKEN,
  DAILY_FATAL_ERROR_NO_ROOM,
  DAILY_FATAL_ERROR_MEETING_FULL,
  DAILY_FATAL_ERROR_NOT_ALLOWED,
  DAILY_FATAL_ERROR_CONNECTION,
  DAILY_FATAL_ERROR_EOL,

  // Camera error type constants
  DAILY_CAMERA_ERROR_CAM_IN_USE,
  DAILY_CAMERA_ERROR_MIC_IN_USE,
  DAILY_CAMERA_ERROR_CAM_AND_MIC_IN_USE,
  DAILY_CAMERA_ERROR_PERMISSIONS,
  DAILY_CAMERA_ERROR_UNDEF_MEDIADEVICES,
  DAILY_CAMERA_ERROR_NOT_FOUND,
  DAILY_CAMERA_ERROR_CONSTRAINTS,
  DAILY_CAMERA_ERROR_UNKNOWN,
} from '@daily-co/daily-js';
```

These constants match the string literal values used in the `DailyMeetingState`, `DailyFatalErrorType`, and `DailyCameraErrorType` types. Using constants instead of raw strings helps avoid typos:

```javascript theme={null}
call.on('error', ({ error }) => {
  if (error?.type === DAILY_FATAL_ERROR_EJECTED) {
    showMessage('You were removed from the call.');
  }
});

if (call.meetingState() === DAILY_STATE_JOINED) {
  // safe to interact with the call
}
```

## Verifying the installation

After installing, run the following snippet in your browser console or application to confirm that daily-js loaded correctly:

```javascript theme={null}
import Daily from '@daily-co/daily-js';

console.log('daily-js version:', Daily.version());
// → "0.89.1"

const { supported, name, version } = Daily.supportedBrowser();
console.log(`Browser: ${name} ${version}, supported: ${supported}`);
```


# Introduction
Source: https://docs.daily.co/docs/daily-js/introduction

daily-js is the front-end JavaScript SDK for adding real-time video and audio calls to your web applications.

## What is daily-js?

`daily-js` (`@daily-co/daily-js`) is Daily's JavaScript library that lets you embed WebRTC-based video and audio calls into any web application. It handles all the complexity of WebRTC — signaling, media negotiation, network traversal, device handling,and more — so you can focus on building your product.

## Key features

<CardGroup>
  <Card title="Participant management" icon="users">
    Track participants, control audio/video, manage permissions, and handle waiting rooms
  </Card>

  <Card title="Device management" icon="video">
    Error handling, automatic device switching, and permission management — abstracted across browsers with their differing specs, bugs, and quirks
  </Card>

  <Card title="Recording" icon="circle-dot">
    Cloud and local recording with custom layout presets and compositing
  </Card>

  <Card title="Live streaming" icon="signal-stream">
    Stream to any RTMP endpoint with multiple layout options
  </Card>

  <Card title="Transcription" icon="closed-captioning">
    Real-time transcription powered by Deepgram with language and model selection
  </Card>

  <Card title="Media processing" icon="wand-magic-sparkles">
    Background blur and virtual backgrounds via Banuba, plus AI noise cancellation via Krisp
  </Card>

  <Card title="Custom tracks" icon="sliders">
    Send custom audio and video tracks alongside camera/mic streams
  </Card>

  <Card title="Network diagnostics" icon="chart-network">
    Monitor network quality and run pre-call connectivity tests
  </Card>
</CardGroup>

## Integration modes

daily-js supports two primary ways to integrate video calls into your app:

### Iframe mode (Prebuilt UI)

Daily manages a full-featured call UI inside an `<iframe>`. You get a complete video call experience — participant tiles, controls, chat, and more — with minimal code.

```javascript theme={null}
const callFrame = Daily.createFrame();
await callFrame.join({ url: 'https://your-domain.daily.co/room-name' });
```

Best for: teams that want a working video call UI quickly, or want to embed Daily's Prebuilt UI.

### Call object mode (Headless)

Daily manages audio/video streams with no UI of its own. You have full control over the participant interface and can build any custom design.

```javascript theme={null}
const callObject = Daily.createCallObject();
await callObject.join({ url: 'https://your-domain.daily.co/room-name' });
```

Best for: teams building fully custom video UIs or integrating Daily into existing interfaces.

## How it works

The `@daily-co/daily-js` npm package is a small orchestration layer — it does not contain the full call machinery. When you call [`join()`](/reference/daily-js/instance-methods/join) (or [`load()`](/reference/daily-js/instance-methods/load) if you pre-load ahead of time), the SDK fetches a call bundle from Daily's CDN. That bundle contains the WebRTC engine, media pipeline, and everything else needed to run the call.

This keeps your application's initial bundle size minimal, but it means:

* A network request happens on first join. The [`loading`](/reference/daily-js/events/lifecycle-events#loading) and [`loaded`](/reference/daily-js/events/lifecycle-events#loaded) events mark the start and end of this fetch.
* If the fetch fails, [`load-attempt-failed`](/reference/daily-js/events/lifecycle-events#load-attempt-failed) fires and a few retries are attempted before an [`error`](/reference/daily-js/events/error-events#error) event is emitted.
* You can call [`load()`](/reference/daily-js/instance-methods/load) before `join()` to fetch the bundle early and hide the loading latency from users.

### Iframe mode and Prebuilt

In iframe mode, there are actually two daily-js instances in play. The one you import and interact with in your app is the outer orchestration layer. Inside the `<iframe>`, Daily's Prebuilt UI runs its own separate daily-js instance — the one that directly manages WebRTC, devices, and media.

Your calls (`join()`, `setLocalVideo()`, etc.) are forwarded into the iframe via `postMessage`. Events from the inner instance are forwarded back out the same way, which is why you can listen for them on the outer call object just like in call object mode.

Because the inner instance is served directly from Daily's CDN rather than from your npm dependency, **the two versions may not be identical** — but they are tested for compatibility. This also means that in Prebuilt, you're always running Daily's latest Prebuilt release, and frequently ahead of what's published to npm.

## Call lifecycle

<Steps>
  <Step title="Create">
    Call one of the [factory methods](/reference/daily-js/factory-methods) to create a `DailyCall` instance. No network activity starts yet.
  </Step>

  <Step title="Join">
    Call `call.join({ url })`. Daily fetches the call bundle, connects to the room, and meeting state transitions through [`joining-meeting`](/reference/daily-js/events/lifecycle-events#joining-meeting) → [`joined-meeting`](/reference/daily-js/events/lifecycle-events#joined-meeting).
  </Step>

  <Step title="In call">
    Participant and track events fire. Your application renders media and handles interactions.
  </Step>

  <Step title="Leave">
    Call `call.leave()` to disconnect. Meeting state becomes `left-meeting`. The instance is reusable — you can call `join()` again.
  </Step>

  <Step title="Destroy">
    Call `call.destroy()` to release all resources. In iframe mode, this also removes the iframe from the DOM. After this the instance must not be used.
  </Step>
</Steps>

## Next steps

<CardGroup>
  <Card title="Quickstart" icon="rocket" href="/docs/daily-js/quickstart">
    Get a working video call running in under 5 minutes
  </Card>

  <Card title="Installation" icon="wrench" href="/docs/daily-js/installation">
    Install daily-js via npm/yarn or a CDN script tag
  </Card>

  <Card title="Call Modes" icon="grid-2" href="/docs/daily-js/concepts/call-modes">
    Choose between iframe-based or headless call object mode
  </Card>

  <Card title="API Reference" icon="code" href="/reference/daily-js/factory-methods/create-call-object">
    Explore the full API surface
  </Card>
</CardGroup>


# Quickstart
Source: https://docs.daily.co/docs/daily-js/quickstart

Get a working video call running in under 5 minutes with daily-js.

<Note>
  You need a Daily account and a room URL to complete this guide. Create a free account at [daily.co](https://www.daily.co) and create a room from the dashboard to get a URL in the format `https://your-domain.daily.co/room-name`.
</Note>

## Choose your integration mode

daily-js supports two integration modes. Pick the one that fits your use case:

* **Iframe mode** — Daily renders a full-featured call UI (participant tiles, controls, chat) inside an `<iframe>`. Minimal code required.
* **Call object mode** — Daily handles media with no built-in UI. You build the interface entirely yourself.

<Tabs>
  <Tab title="Iframe mode (Prebuilt UI)">
    <Steps>
      <Step title="Install the package">
        Add `@daily-co/daily-js` to your project:

        <CodeGroup>
          ```bash npm theme={null}
          npm install @daily-co/daily-js
          ```

          ```bash yarn theme={null}
          yarn add @daily-co/daily-js
          ```

          ```bash pnpm theme={null}
          pnpm add @daily-co/daily-js
          ```
        </CodeGroup>
      </Step>

      <Step title="Create a call frame">
        Import `DailyIframe` and call `createFrame()`. This creates an `<iframe>` element and appends it to `document.body` by default.

        ```javascript theme={null}
        import Daily from '@daily-co/daily-js';

        const callFrame = Daily.createFrame();
        ```

        To mount the iframe inside a specific container instead of `document.body`, pass the element as the first argument:

        ```javascript theme={null}
        const container = document.getElementById('call-container');
        const callFrame = Daily.createFrame(container);
        ```

        You can also pass style options:

        ```javascript theme={null}
        const callFrame = Daily.createFrame({
          iframeStyle: {
            position: 'fixed',
            width: '100%',
            height: '100%',
            top: 0,
            left: 0,
            border: 0,
          },
        });
        ```
      </Step>

      <Step title="Join a room">
        Call `join()` with your room URL. This returns a promise that resolves once you have entered the meeting.

        ```javascript theme={null}
        await callFrame.join({ url: 'https://your-domain.daily.co/room-name' });
        ```
      </Step>

      <Step title="Listen for events">
        Subscribe to call events using `.on()`. The `joined-meeting` event fires once you are connected and includes the current participants.

        ```javascript theme={null}
        callFrame
          .on('joined-meeting', (event) => {
            console.log('Joined!', event.participants);
          })
          .on('participant-joined', (event) => {
            console.log('Participant joined:', event.participant.user_name);
          })
          .on('participant-left', (event) => {
            console.log('Participant left:', event.participant.user_name);
          })
          .on('error', (event) => {
            console.error('Call error:', event.errorMsg);
          });
        ```
      </Step>

      <Step title="Leave the call">
        Call `leave()` to disconnect. Optionally call `destroy()` afterward to remove the iframe from the DOM and clean up all event listeners.

        ```javascript theme={null}
        await callFrame.leave();

        // Optionally remove the iframe entirely:
        await callFrame.destroy();
        ```
      </Step>
    </Steps>
  </Tab>

  <Tab title="Call object mode (Custom UI)">
    <Steps>
      <Step title="Install the package">
        Add `@daily-co/daily-js` to your project:

        <CodeGroup>
          ```bash npm theme={null}
          npm install @daily-co/daily-js
          ```

          ```bash yarn theme={null}
          yarn add @daily-co/daily-js
          ```

          ```bash pnpm theme={null}
          pnpm add @daily-co/daily-js
          ```
        </CodeGroup>
      </Step>

      <Step title="Create a call object">
        `createCallObject()` returns a headless call instance with no iframe or built-in UI. All audio and video rendering is your responsibility.

        ```javascript theme={null}
        import Daily from '@daily-co/daily-js';

        const call = Daily.createCallObject();
        ```

        You can pass options at construction time:

        ```javascript theme={null}
        const call = Daily.createCallObject({
          startVideoOff: true,
          startAudioOff: false,
        });
        ```
      </Step>

      <Step title="Join a room">
        Call `join()` with your room URL:

        ```javascript theme={null}
        await call.join({ url: 'https://your-domain.daily.co/room-name' });
        ```
      </Step>

      <Step title="Listen for events and render tracks">
        Subscribe to events to drive your UI. Each participant gets a `<div>` when they join; tracks are appended to it as they start.

        ```javascript theme={null}
        function addParticipantDiv(sessionId) {
          const div = document.createElement('div');
          div.id = sessionId;
          document.getElementById('participants').appendChild(div);
        }

        call
          .on('joined-meeting', (event) => {
            // Set up a div for the local participant
            addParticipantDiv(event.participants.local.session_id);
          })
          .on('participant-joined', (event) => {
            addParticipantDiv(event.participant.session_id);
          })
          .on('track-started', (event) => {
            const { participant, track, type } = event;
            const id = `${participant.session_id}-${type}`;
            let el = document.getElementById(id);
            if (!el) {
              el = document.createElement(track.kind === 'video' ? 'video' : 'audio');
              el.id = id;
              el.autoplay = true;
              el.playsInline = true;
              document.getElementById(participant.session_id).appendChild(el);
            }
            el.srcObject = new MediaStream([track]);
          })
          .on('track-stopped', (event) => {
            document.getElementById(`${event.participant.session_id}-${event.type}`)?.remove();
          })
          .on('participant-left', (event) => {
            document.getElementById(event.participant.session_id)?.remove();
          })
          .on('error', (event) => {
            console.error('Call error:', event.errorMsg);
          });
        ```
      </Step>

      <Step title="Leave the call">
        ```javascript theme={null}
        await call.leave();

        // Optionally destroy the instance when you're fully done with it:
        await call.destroy();
        ```
      </Step>
    </Steps>
  </Tab>
</Tabs>

## Complete example

A complete call object mode integration. Drop these three files into a project, open `index.html`, and you have a working video call.

<CodeGroup>
  ```javascript call.js theme={null}
  import Daily from '@daily-co/daily-js';

  const joinBtn = document.getElementById('join-btn');
  const leaveBtn = document.getElementById('leave-btn');
  const roomUrlInput = document.getElementById('room-url');

  const call = Daily.createCallObject();

  function addParticipantDiv(sessionId) {
    const div = document.createElement('div');
    div.id = sessionId;
    document.getElementById('participants').appendChild(div);
  }

  call
    .on('joined-meeting', (event) => {
      addParticipantDiv(event.participants.local.session_id);
      joinBtn.disabled = true;
      leaveBtn.disabled = false;
    })
    .on('participant-joined', (event) => {
      addParticipantDiv(event.participant.session_id);
    })
    .on('track-started', (event) => {
      const { participant, track, type } = event;
      const id = `${participant.session_id}-${type}`;
      let track_el = document.getElementById(id);
      if (!track_el) {
        let p_el = document.getElementById(participant.session_id);
        if (!p_el) {
          addParticipantDiv(participant.session_id);
          p_el = document.getElementById(participant.session_id);
        }
        track_el = document.createElement(
          track.kind === 'video' ? 'video' : 'audio',
        );
        track_el.id = id;
        track_el.autoplay = true;
        track_el.playsInline = true;
        p_el.appendChild(track_el);
      }
      track_el.srcObject = new MediaStream([track]);
    })
    .on('track-stopped', (event) => {
      document.getElementById(`${event.participant.session_id}-${event.type}`)?.remove();
    })
    .on('participant-left', (event) => {
      document.getElementById(event.participant.session_id)?.remove();
    })
    .on('left-meeting', () => {
      document.getElementById('participants').innerHTML = '';
      joinBtn.disabled = false;
      leaveBtn.disabled = true;
    })
    .on('error', (event) => {
      console.error('Call error:', event.errorMsg);
    });

  joinBtn.addEventListener('click', () => {
    call.join({ url: roomUrlInput.value.trim() });
  });

  leaveBtn.addEventListener('click', () => {
    call.leave();
  });
  ```

  ```html index.html theme={null}
  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <title>Daily call</title>
      <link rel="stylesheet" href="style.css" />
    </head>
    <body>
      <div id="controls">
        <input id="room-url" type="text" placeholder="https://your-domain.daily.co/room-name" />
        <button id="join-btn">Join</button>
        <button id="leave-btn" disabled>Leave</button>
      </div>
      <div id="participants"></div>
      <script type="module" src="call.js"></script>
    </body>
  </html>
  ```

  ```css style.css theme={null}
  #controls {
    display: flex;
    gap: 0.5rem;
    padding: 1rem;
  }

  #room-url {
    flex: 1;
    padding: 0.4rem 0.6rem;
  }

  #participants {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
  }

  #participants > div {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  video {
    width: 320px;
    height: 240px;
    background: #000;
    border-radius: 4px;
  }
  ```
</CodeGroup>

## Next steps

<CardGroup>
  <Card title="Installation" icon="wrench" href="/docs/daily-js/installation">
    All install methods: npm, yarn, pnpm, and CDN script tag
  </Card>

  <Card title="Call modes" icon="grid-2" href="/docs/daily-js/concepts/call-modes">
    Deep-dive into iframe vs. call object mode trade-offs
  </Card>

  <Card title="Events reference" icon="bell" href="/reference/daily-js/events/index">
    Full list of events and their payloads
  </Card>

  <Card title="API reference" icon="code" href="/reference/daily-js/factory-methods/create-call-object">
    Complete method and property reference
  </Card>
</CardGroup>


# Active speaker and audio levels
Source: https://docs.daily.co/docs/daily-react/docs/active-speaker

Highlight whoever is talking with useActiveSpeakerId and build volume meters with useAudioLevelObserver.

Showing who is speaking makes a call feel alive. Daily React gives you two tools: [`useActiveSpeakerId`](/reference/daily-react/use-active-speaker-id) for the current speaker, and [`useAudioLevelObserver`](/reference/daily-react/use-audio-level-observer) for continuous volume.

## Highlight the active speaker

[`useActiveSpeakerId`](/reference/daily-react/use-active-speaker-id) returns the session ID of the participant Daily considers the active speaker, or `null` when nobody has spoken:

```jsx theme={null}
import { useActiveSpeakerId, DailyVideo } from '@daily-co/daily-react';

function Tile({ sessionId }) {
  const activeSpeakerId = useActiveSpeakerId();
  const isSpeaking = sessionId === activeSpeakerId;
  return (
    <div style={{ outline: isSpeaking ? '3px solid limegreen' : 'none' }}>
      <DailyVideo sessionId={sessionId} type="video" />
    </div>
  );
}
```

### Spotlight layouts

For a spotlight that follows the speaker, render the active speaker's video directly. Pass `ignoreLocal` so your own voice does not steal the spotlight:

```jsx theme={null}
import { useActiveSpeakerId, DailyVideo } from '@daily-co/daily-react';

function Spotlight() {
  const activeSpeakerId = useActiveSpeakerId({ ignoreLocal: true });
  if (!activeSpeakerId) return <p>Waiting for someone to speak…</p>;
  return <DailyVideo sessionId={activeSpeakerId} type="video" fit="cover" />;
}
```

Pass a `filter` callback to restrict which participants can become the active speaker, for example to spotlight only presenters:

```jsx theme={null}
const activeSpeakerId = useActiveSpeakerId({
  filter: (sessionId) => presenterIds.includes(sessionId),
});
```

## Build a volume meter

The active speaker is a coarse, on/off signal. For a continuous volume meter, [`useAudioLevelObserver`](/reference/daily-react/use-audio-level-observer) calls you back with a number between 0 and 1 as a participant's volume changes:

```jsx theme={null}
import { useAudioLevelObserver, useLocalSessionId } from '@daily-co/daily-react';
import { useCallback, useRef } from 'react';

function MicMeter() {
  const localSessionId = useLocalSessionId();
  const barRef = useRef(null);

  useAudioLevelObserver(
    localSessionId,
    useCallback((volume) => {
      // Drive the DOM directly; avoid setState on every frame.
      if (barRef.current) barRef.current.style.transform = `scaleY(${Math.max(0.05, volume)})`;
    }, [])
  );

  return <div ref={barRef} style={{ height: 40, width: 8, background: 'limegreen', transformOrigin: 'bottom' }} />;
}
```

<Tip>
  Volume fires frequently. Write to a ref and mutate the DOM (as above) rather than calling `setState` on every change, which would re-render the component dozens of times a second. The callback must be memoized with `useCallback`, like all Daily React event callbacks.
</Tip>

Pass `interval` (minimum 100ms) to control how often the callback fires, and `onError` to handle browsers where the observer is unavailable.

<Note>
  The older `useAudioLevel` hook (which took a raw `MediaStreamTrack`) is **deprecated as of 0.20.0**. Use `useAudioLevelObserver` with a `sessionId` instead.
</Note>

## Speaking indicator, complete

A muted-aware speaking dot for a tile:

```jsx theme={null}
import { useCallback, useRef } from 'react';
import { useAudioLevelObserver, useMediaTrack } from '@daily-co/daily-react';

function SpeakingDot({ sessionId }) {
  const audio = useMediaTrack(sessionId, 'audio');
  const dotRef = useRef(null);

  useAudioLevelObserver(
    sessionId,
    useCallback((volume) => {
      if (dotRef.current) dotRef.current.style.opacity = String(Math.min(1, volume * 4));
    }, [])
  );

  if (audio.isOff) return <span>🔇</span>;
  return <span ref={dotRef} style={{ opacity: 0 }}>🟢</span>;
}
```

## Next steps

<CardGroup>
  <Card title="Rendering media" icon="video" href="/docs/daily-react/docs/rendering-media">
    The video and audio components.
  </Card>

  <Card title="Working with participants" icon="users" href="/docs/daily-react/docs/participants">
    Read more participant state.
  </Card>
</CardGroup>


# Custom messages
Source: https://docs.daily.co/docs/daily-react/docs/app-messages

Send and receive arbitrary data between participants in React with useAppMessage, for chat, reactions, and app state.

App messages are Daily's general-purpose data channel: arbitrary JSON sent between participants, separate from audio and video. Use them for chat, emoji reactions, "raise hand," shared cursors, or any custom signaling. [`useAppMessage`](/reference/daily-react/use-app-message) wraps both sending and receiving in one hook.

## Send and receive

`useAppMessage` returns a `sendAppMessage` function, and takes an `onAppMessage` callback for incoming messages:

```jsx theme={null}
import { useCallback, useState } from 'react';
import { useAppMessage } from '@daily-co/daily-react';

function Chat() {
  const [messages, setMessages] = useState([]);

  const sendAppMessage = useAppMessage({
    onAppMessage: useCallback((event) => {
      // event.fromId is the sender's session ID; event.data is your payload.
      setMessages((prev) => [...prev, { from: event.fromId, ...event.data }]);
    }, []),
  });

  const send = (text) => sendAppMessage({ text }, '*');

  return (
    <div>
      <ul>
        {messages.map((m, i) => (
          <li key={i}>{m.from.slice(0, 6)}: {m.text}</li>
        ))}
      </ul>
      <ChatInput onSend={send} />
    </div>
  );
}
```

The `onAppMessage` callback must be memoized with `useCallback`, like all Daily React event callbacks.

## Addressing messages

The second argument to `sendAppMessage` chooses recipients:

* `'*'` sends to every other participant (the default broadcast).
* A `session_id` string sends to one participant only.

```jsx theme={null}
sendAppMessage({ type: 'reaction', emoji: '👏' }, '*');      // everyone
sendAppMessage({ type: 'private', text: 'hi' }, theirSessionId); // one person
```

<Note>
  App messages are not delivered to the sender. If you want the sender's own UI to reflect the message (an optimistic chat bubble, your own reaction), update local state when you call `sendAppMessage`, not from `onAppMessage`.
</Note>

## Replying from the handler

`onAppMessage` receives `sendAppMessage` as its second argument, so you can respond to a message without calling the hook twice or threading the function through closures:

```jsx theme={null}
useAppMessage({
  onAppMessage: useCallback((event, sendAppMessage) => {
    if (event.data?.type === 'ping') {
      sendAppMessage({ type: 'pong' }, event.fromId);
    }
  }, []),
});
```

## Patterns

Use a `type` field to multiplex different kinds of messages over the one channel:

```jsx theme={null}
const sendAppMessage = useAppMessage({
  onAppMessage: useCallback((event) => {
    switch (event.data?.type) {
      case 'chat':
        addChatMessage(event.fromId, event.data.text);
        break;
      case 'reaction':
        showReaction(event.fromId, event.data.emoji);
        break;
      case 'raise-hand':
        toggleRaisedHand(event.fromId, event.data.raised);
        break;
    }
  }, []),
});
```

<Warning>
  App messages are for transient signaling, not durable state, and have a per-message size limit. Do not send large blobs (images, files); send a URL instead. For persisting shared call state, see [`useMeetingSessionState`](/reference/daily-react/use-meeting-session-state).
</Warning>

## Next steps

<CardGroup>
  <Card title="Handling events" icon="bolt" href="/docs/daily-react/docs/events">
    The event model behind the callbacks.
  </Card>

  <Card title="sendAppMessage reference" icon="code" href="/reference/daily-js/instance-methods/send-app-message">
    The underlying daily-js method and limits.
  </Card>
</CardGroup>


# The call object and provider
Source: https://docs.daily.co/docs/daily-react/docs/call-object-and-provider

How the Daily call object is created, shared through DailyProvider, and moved through its lifecycle in a React app.

The call object is the heart of every Daily app: it is the `daily-js` instance that joins rooms, sends media, and emits events. [`DailyProvider`](/reference/daily-react/daily-provider) holds it and shares it with your component tree. In most apps, the provider creates and manages the call object for you.

## Let DailyProvider create the call object

The simplest and recommended setup is to pass your room `url` (and any other [factory options](/reference/daily-js/factory-methods/create-call-object) such as `token` or `userName`) directly to [`DailyProvider`](/reference/daily-react/daily-provider). The provider creates the call object, manages its lifecycle, and tears it down for you.

```jsx theme={null}
import { DailyProvider } from '@daily-co/daily-react';

function App() {
  return (
    <DailyProvider url="https://your-domain.daily.co/room-name">
      <Call />
    </DailyProvider>
  );
}
```

This is the right default for most apps: there is no instance to create, store, or clean up, and it is the hardest setup to get wrong.

<Warning>
  The provider recreates the call object whenever a creation prop's value changes (`url`, `token`, and so on), tearing down the current call and resetting all call and error state. These props are compared by value, so re-passing an equivalent object on each render is safe; only an actual value change triggers a rebuild, and nothing defers it while a call is in progress. Treat creation props as stable configuration for the duration of a call.
</Warning>

## Create the call object yourself

Create the instance yourself only when you need direct control over it, for example to access it before the provider mounts, share it outside the provider tree, or create it conditionally. Use [`useCallObject`](/reference/daily-react/use-call-object), then pass it to the provider with the `callObject` prop:

```jsx theme={null}
import { DailyProvider, useCallObject } from '@daily-co/daily-react';

function App() {
  const callObject = useCallObject({
    options: {
      subscribeToTracksAutomatically: true,
    },
  });
  return (
    <DailyProvider callObject={callObject}>
      <Call />
    </DailyProvider>
  );
}
```

<Tip>
  Use [`useCallObject`](/reference/daily-react/use-call-object) rather than calling `Daily.createCallObject()` yourself. It deduplicates instances, which prevents the `Duplicate DailyIframe instances are not allowed` error that surfaces under [React Strict Mode](https://react.dev/reference/react/StrictMode) (where effects intentionally run twice in development).
</Tip>

To delay creation until some condition is met, pass `shouldCreateInstance`:

```jsx theme={null}
// roomUrl comes from your props, router, or state
const callObject = useCallObject({
  shouldCreateInstance: () => Boolean(roomUrl),
});
```

## Access it anywhere with useDaily

Inside the provider, [`useDaily`](/reference/daily-react/use-daily) returns the same [`DailyCall`](/reference/daily-js/daily-call-client) instance. Use it for imperative actions that do not have a dedicated hook:

```jsx theme={null}
import { useDaily } from '@daily-co/daily-react';

function Controls() {
  const daily = useDaily();
  return (
    <>
      <button onClick={() => daily?.setLocalAudio(false)}>Mute me</button>
      <button onClick={() => daily?.setLocalVideo(false)}>Camera off</button>
    </>
  );
}
```

`daily` is `null` until the call object exists, so guard with optional chaining or an early return.

## The call lifecycle

A custom call moves through the same lifecycle as any `daily-js` call. [`useMeetingState`](/reference/daily-react/use-meeting-state) gives you the current stage reactively:

```jsx theme={null}
import { useMeetingState } from '@daily-co/daily-react';

function CallStatus() {
  const meetingState = useMeetingState();
  // 'new' | 'loading' | 'loaded' | 'joining-meeting'
  // | 'joined-meeting' | 'left-meeting' | 'error'
  return <span>Status: {meetingState}</span>;
}
```

### Joining and leaving

There is no `useJoin` hook: joining is an imperative action, so call `join()` on the object from `useDaily`. A mount effect with a cleanup that calls `leave()` is the idiomatic pattern:

```jsx theme={null}
import { useEffect } from 'react';
import { useDaily } from '@daily-co/daily-react';

function Call({ roomUrl, token }) {
  const daily = useDaily();

  useEffect(() => {
    if (!daily) return;
    daily.join({ url: roomUrl, token });
    return () => {
      daily.leave();
    };
  }, [daily, roomUrl, token]);

  return null;
}
```

If you set `url` (and `token`) on `DailyProvider` as recommended above, the call object already has them, so you can call `daily.join()` with no arguments. Pass them to `join()` explicitly only when they are not already on the provider.

The instance is reusable: after `leave()`, the meeting state becomes `left-meeting` and you can `join()` again.

### Handling errors

[`useDailyError`](/reference/daily-react/use-daily-error) exposes the most recent fatal and nonfatal errors as state:

```jsx theme={null}
import { useDailyError } from '@daily-co/daily-react';

function ErrorBanner() {
  const { meetingError, nonFatalError } = useDailyError();
  if (!meetingError && !nonFatalError) return null;
  return <p role="alert">{meetingError?.errorMsg ?? nonFatalError?.errorMsg}</p>;
}
```

<Warning>
  A fatal `error` ejects the participant from the meeting immediately. If you render UI from `meetingError`, do not destroy the call object (or change `DailyProvider`'s creation props, which destroys it internally) until you no longer need the error state.
</Warning>

## Embedding Prebuilt instead of a custom UI

If you want Daily's ready-made UI, create a Prebuilt iframe with [`useCallFrame`](/reference/daily-react/use-call-frame) and pass it to the same provider:

```jsx theme={null}
import { DailyProvider, useCallFrame } from '@daily-co/daily-react';
import { useRef } from 'react';

function PrebuiltApp() {
  const ref = useRef(null);
  const callFrame = useCallFrame({ parentElRef: ref });
  return (
    <DailyProvider callObject={callFrame}>
      <div ref={ref} style={{ height: '100vh' }} />
    </DailyProvider>
  );
}
```

<Note>
  An iframe runs in a separate secure context, so track-level data is not available across the boundary. Hooks that read meeting and participant state still work, but media hooks like [`useMediaTrack`](/reference/daily-react/use-media-track) will not return tracks. For full control over media, use a [call object](#create-the-call-object-yourself) instead.
</Note>

## Next steps

<CardGroup>
  <Card title="Working with participants" icon="users" href="/docs/daily-react/docs/participants">
    Read and react to participant state.
  </Card>

  <Card title="Rendering media" icon="video" href="/docs/daily-react/docs/rendering-media">
    Show video and play audio.
  </Card>
</CardGroup>


# Cameras, mics, and speakers
Source: https://docs.daily.co/docs/daily-react/docs/devices

Enumerate, select, and toggle media devices in React with useDevices, and handle permission and device errors.

[`useDevices`](/reference/daily-react/use-devices) 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:

```jsx theme={null}
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`](https://developer.mozilla.org/en-US/docs/Web/API/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:

```jsx theme={null}
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'`:

```jsx theme={null}
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.

<Note>
  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.
</Note>

## Toggle camera and mic

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

```jsx theme={null}
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`](/reference/daily-react/use-input-settings) wraps the input-processing pipeline. Use it to enable background blur, virtual backgrounds, or noise cancellation:

```jsx theme={null}
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>;
}
```

<Warning>
  Calls to `updateInputSettings()` before the meeting is joined are silently ignored. Apply input settings after `joined-meeting`.
</Warning>

## Next steps

<CardGroup>
  <Card title="Permissions" icon="lock" href="/docs/daily-react/docs/permissions">
    Control what each participant is allowed to send.
  </Card>

  <Card title="Rendering media" icon="video" href="/docs/daily-react/docs/rendering-media">
    Show the camera you just selected.
  </Card>
</CardGroup>


# Handling events
Source: https://docs.daily.co/docs/daily-react/docs/events

Subscribe to daily-js events in React with useDailyEvent and useThrottledDailyEvent, including the memoized-callback rule.

In Daily React you rarely subscribe to events directly, because most call state already has a hook. When you do need a raw event, [`useDailyEvent`](/reference/daily-react/use-daily-event) and [`useThrottledDailyEvent`](/reference/daily-react/use-throttled-daily-event) register and tear down listeners for you.

## Reach for a hook first

Before subscribing to an event, check whether a hook already exposes the state it carries. The hooks keep the state for you and re-render on change, which is usually what you actually want:

| Event                                                           | Hook                                                                        |
| --------------------------------------------------------------- | --------------------------------------------------------------------------- |
| `participant-joined`, `participant-left`, `participant-updated` | [`useParticipantIds`](/reference/daily-react/use-participant-ids)           |
| `active-speaker-change`                                         | [`useActiveSpeakerId`](/reference/daily-react/use-active-speaker-id)        |
| `app-message`                                                   | [`useAppMessage`](/reference/daily-react/use-app-message)                   |
| `recording-started`, `recording-stopped`, `recording-error`     | [`useRecording`](/reference/daily-react/use-recording)                      |
| `live-streaming-*`                                              | [`useLiveStreaming`](/reference/daily-react/use-live-streaming)             |
| `transcription-*`                                               | [`useTranscription`](/reference/daily-react/use-transcription)              |
| `network-quality-change`, `network-connection`                  | [`useNetwork`](/reference/daily-react/use-network)                          |
| `error`, `nonfatal-error`                                       | [`useDailyError`](/reference/daily-react/use-daily-error)                   |
| `waiting-participant-*`                                         | [`useWaitingParticipants`](/reference/daily-react/use-waiting-participants) |

Many of these hooks also accept the corresponding `on...` callback, so you can run side effects on the event while still getting the reactive state.

## Subscribe with useDailyEvent

For events without a dedicated hook, [`useDailyEvent`](/reference/daily-react/use-daily-event) registers a listener and removes it when the component unmounts:

```jsx theme={null}
import { useCallback, useState } from 'react';
import { useDailyEvent } from '@daily-co/daily-react';

function JoinStatus() {
  const [joined, setJoined] = useState(false);

  useDailyEvent(
    'joined-meeting',
    useCallback(() => setJoined(true), [])
  );

  return <span>{joined ? 'In the call' : 'Not joined'}</span>;
}
```

### The callback must be memoized

This is the one rule that trips people up. The `callback` you pass must be a stable reference, normally wrapped in [`useCallback`](https://react.dev/reference/react/useCallback):

```jsx theme={null}
// Correct: stable reference
useDailyEvent('left-meeting', useCallback(() => cleanup(), []));

// Wrong: a new function every render
useDailyEvent('left-meeting', () => cleanup());
```

<Warning>
  Passing a fresh function each render makes the hook resubscribe on every render, which can trigger a console error about a potential re-render loop. Always memoize the callback, and list its real dependencies in the `useCallback` array.
</Warning>

## Batch high-frequency events

Some events fire in bursts, for example a wave of `participant-joined` events when a large call starts. [`useThrottledDailyEvent`](/reference/daily-react/use-throttled-daily-event) collects events over a window and hands you an **array** of everything that happened, so you update state once instead of once per event:

```jsx theme={null}
import { useCallback, useState } from 'react';
import { useThrottledDailyEvent } from '@daily-co/daily-react';

function ParticipantCounter() {
  const [count, setCount] = useState(0);

  useThrottledDailyEvent(
    ['participant-joined', 'participant-left'],
    useCallback((events) => {
      setCount((current) => {
        let next = current;
        for (const event of events) {
          next += event.action === 'participant-joined' ? 1 : -1;
        }
        return next;
      });
    }, [])
  );

  return <span>{count} in call</span>;
}
```

The default throttle window is 100ms; pass `throttleTimeout` to change it. The same memoized-callback rule applies. Note that the callback receives an array, unlike `useDailyEvent`, which receives a single event.

## Choosing between them

* One-off or low-frequency event, react immediately: [`useDailyEvent`](/reference/daily-react/use-daily-event).
* Bursty or high-frequency event where you only need the net result: [`useThrottledDailyEvent`](/reference/daily-react/use-throttled-daily-event).
* The event maps to call state you want to render: use the dedicated hook from the table above.

## Next steps

<CardGroup>
  <Card title="Custom messages" icon="message" href="/docs/daily-react/docs/app-messages">
    Send and receive your own data with useAppMessage.
  </Card>

  <Card title="Events reference" icon="bolt" href="/reference/daily-js/events">
    Every daily-js event and its payload.
  </Card>
</CardGroup>


# Introduction
Source: https://docs.daily.co/docs/daily-react/docs/index

What Daily React is, when to reach for it, and how it relates to daily-js.

Daily React is a helper library for building custom Daily calls in React. It does not replace [`daily-js`](/docs/daily-js/introduction): it sits on top of it and exposes the same call object, methods, and events through React hooks and components, so you can work with a call the way you already work with React state.

## Why use it

Building a custom call UI on raw `daily-js` means wiring event listeners by hand, mirroring call state into local component state, attaching media tracks to DOM nodes, and tearing all of that down on unmount. Daily React does that work for you:

* **Reactive state.** Hooks like [`useParticipantIds`](/reference/daily-react/use-participant-ids) and [`useMeetingState`](/reference/daily-react/use-meeting-state) re-render your component when the relevant call state changes. No manual `setState` inside event handlers.
* **Granular re-renders.** Hooks read from an internal store and subscribe only to the slice you ask for, so a participant muting their mic does not re-render every tile in your call.
* **Media components.** [`DailyVideo`](/reference/daily-react/daily-video) and [`DailyAudio`](/reference/daily-react/daily-audio) handle track attachment, autoplay quirks, and speaker management that are tedious to get right by hand.
* **Automatic cleanup.** Event subscriptions registered through hooks are torn down when the component unmounts.

<Tip>
  Daily React powers [Daily Prebuilt](/docs/prebuilt). If you have ever embedded Prebuilt, you have already shipped Daily React in production.
</Tip>

## When to use it (and when not to)

Daily React is for **[call object mode](/docs/daily-js/concepts/call-modes#call-object-mode)**: building your own call interface in React with full control over the UI.

| Your situation                                      | Recommendation                                                                                                                                     |
| --------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| Custom call UI in a React app                       | Use Daily React                                                                                                                                    |
| Embedding [Daily Prebuilt](/docs/prebuilt) in React | Optional. You can use [`useCallFrame`](/reference/daily-react/use-call-frame) to manage the iframe, but Prebuilt also works with plain `daily-js`. |
| A non-React app, or a framework without hooks       | Use [`daily-js`](/docs/daily-js/introduction) directly                                                                                             |
| React Native                                        | Use [`@daily-co/react-native-daily-js`](/docs/react-native)                                                                                        |

<Note>
  **Building a voice or multimodal AI agent?** Reach for the [Pipecat React SDK](https://docs.pipecat.ai/client/react/introduction) (`@pipecat-ai/client-react`) instead. It is purpose-built for real-time AI agents and uses Daily as its transport, so you get the agent tooling out of the box rather than building it on Daily React yourself.
</Note>

## How it fits together

```mermaid theme={null}
%%{init: {'theme':'base','themeVariables':{'fontFamily':'ui-sans-serif, system-ui, sans-serif','fontSize':'14px','primaryColor':'#F1F3F5','primaryBorderColor':'#CDD5DC','primaryTextColor':'#1F2933','lineColor':'#0E9F9F','edgeLabelBackground':'#F1F3F5'}}}%%
flowchart TD
    app("<b>Your React app</b><br/>renders UI from hook state")
    react("<b>@daily-co/daily-react</b><br/>hooks and components · state via Jotai")
    js("<b>@daily-co/daily-js</b><br/>call object · methods · events")
    app -->|uses| react
    react -->|wraps| js
    classDef focal fill:#DCF5F3,stroke:#0E9F9F,stroke-width:2.5px;
    class react focal
```

Daily React manages its internal state with [Jotai](https://jotai.org/). Both `@daily-co/daily-js` and `jotai` are **peer dependencies**, so you install all three packages and they share a single version. See [Installation](/docs/daily-react/docs/installation) for the details.

## Prerequisites

* A Daily account and a room URL. Create a free account at [daily.co](https://www.daily.co) and create a room to get a URL like `https://your-domain.daily.co/room-name`.
* A React 18+ app. Daily React's hooks run on the client; for server-rendered frameworks like Next.js, see the [Installation](/docs/daily-react/docs/installation) notes.
* Familiarity with the daily-js [call object](/docs/daily-js/concepts/call-modes#call-object-mode), [participants](/docs/daily-js/concepts/participants), and [tracks](/docs/daily-js/concepts/tracks) concepts. The guides here link back to them rather than repeating them.

## Next steps

<CardGroup>
  <Card title="Quickstart" icon="rocket" href="/docs/daily-react/docs/quickstart">
    Build a working call in a few minutes.
  </Card>

  <Card title="Installation" icon="wrench" href="/docs/daily-react/docs/installation">
    Install and set up the provider.
  </Card>

  <Card title="Thinking in Daily React" icon="brain" href="/docs/daily-react/docs/thinking-in-daily-react">
    The mental model behind the hooks.
  </Card>

  <Card title="API reference" icon="code" href="/reference/daily-react/daily-provider">
    The full API for every hook and component.
  </Card>
</CardGroup>


# Installation
Source: https://docs.daily.co/docs/daily-react/docs/installation

Install Daily React and its peer dependencies, and set up the DailyProvider at the root of your app.

## Install the packages

Install Daily React together with its two peer dependencies, `@daily-co/daily-js` and `jotai`:

<CodeGroup>
  ```bash npm theme={null}
  npm install @daily-co/daily-react @daily-co/daily-js jotai
  ```

  ```bash yarn theme={null}
  yarn add @daily-co/daily-react @daily-co/daily-js jotai
  ```

  ```bash pnpm theme={null}
  pnpm add @daily-co/daily-react @daily-co/daily-js jotai
  ```
</CodeGroup>

<Note>
  `@daily-co/daily-js` and `jotai` are **peer dependencies**, not bundled. Installing them explicitly guarantees that your app and Daily React share a single version of each. This matters if you also use `daily-js` directly (for example, to create your own call object) or use `jotai` for your app's own state, because two copies of either would not see each other's state.
</Note>

## Set up the provider

Everything in Daily React reads from a call object held by [`DailyProvider`](/reference/daily-react/daily-provider). Wrap the part of your tree that needs call state in it. The simplest setup, and the one we recommend for most apps, is to let the provider create and manage the call object: pass your room `url` (and any other [factory options](/reference/daily-js/factory-methods/create-call-object) such as `token` or `userName`) straight to `DailyProvider`.

```jsx theme={null}
import { DailyProvider } from '@daily-co/daily-react';

function App() {
  return (
    <DailyProvider url="https://your-domain.daily.co/room-name">
      <Call />
    </DailyProvider>
  );
}
```

The provider owns the call object's lifecycle, so there is no instance for you to create, store, or tear down. This is the hardest setup to get wrong, which is why it is the default recommendation.

<Warning>
  The provider recreates the call object whenever a creation prop's value changes (`url`, `token`, and so on), tearing down the current call and resetting all call and error state. These props are compared by value, so re-passing an equivalent object on each render is safe; only an actual value change triggers a rebuild, and nothing defers it while a call is in progress. Treat creation props as stable configuration for the lifetime of a call.
</Warning>

### Creating the call object yourself

Pass an existing `callObject` instead when you need direct control over the instance, for example to access it before the provider mounts, share it outside the provider tree, or create it conditionally. Create it with [`useCallObject`](/reference/daily-react/use-call-object):

```jsx theme={null}
import { DailyProvider, useCallObject } from '@daily-co/daily-react';

function App() {
  const callObject = useCallObject({
    options: {
      // createCallObject() factory options:
      // subscribeToTracksAutomatically: true,
    },
  });

  return (
    <DailyProvider callObject={callObject}>
      <Call />
    </DailyProvider>
  );
}
```

<Tip>
  If you create the instance yourself, use [`useCallObject`](/reference/daily-react/use-call-object) rather than calling `Daily.createCallObject()` directly. It guards against the `Duplicate DailyIframe instances are not allowed` error that otherwise appears under [React Strict Mode](https://react.dev/reference/react/StrictMode), where effects run twice in development.
</Tip>

## Embedding Daily Prebuilt instead

If you want Daily's ready-made call UI rather than a custom one, create a Prebuilt iframe with [`useCallFrame`](/reference/daily-react/use-call-frame) and hand it to the same provider:

```jsx theme={null}
import { DailyProvider, useCallFrame } from '@daily-co/daily-react';
import { useRef } from 'react';

function PrebuiltApp() {
  const wrapperRef = useRef(null);
  const callFrame = useCallFrame({
    parentElRef: wrapperRef,
    options: {
      iframeStyle: { width: '100%', height: '100%', border: '0' },
    },
  });

  return (
    <DailyProvider callObject={callFrame}>
      <div ref={wrapperRef} style={{ height: '100vh' }} />
    </DailyProvider>
  );
}
```

<Note>
  A Prebuilt iframe runs in a separate, secure browsing context. Some data the hooks expect is not available across that boundary, most notably raw audio and video tracks, so media hooks like [`useMediaTrack`](/reference/daily-react/use-media-track) will not return tracks for an iframe instance.
</Note>

## Next.js and server-side rendering

Daily React's hooks depend on browser APIs and React state, so they must run on the client.

* In the Next.js App Router, mark any component that imports Daily React hooks or components with `'use client'` at the top of the file.
* If a hook touches `window` or media devices during render, gate the component so it only mounts in the browser (for example, render it after the component has mounted, or with a dynamic import using `{ ssr: false }`).

```jsx theme={null}
'use client';

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

export function CallRoot({ url, children }) {
  return <DailyProvider url={url}>{children}</DailyProvider>;
}
```

## Sharing state with your own Jotai store

If your app already uses Jotai, pass your store to both your `<Provider>` and to `DailyProvider` via the `jotaiStore` prop so Daily React's atoms live in the same store:

```jsx theme={null}
import { DailyProvider } from '@daily-co/daily-react';
import { createStore, Provider } from 'jotai';

const store = createStore();

function App() {
  return (
    <Provider store={store}>
      <DailyProvider url="https://your-domain.daily.co/room-name" jotaiStore={store}>
        <Call />
      </DailyProvider>
    </Provider>
  );
}
```

## Next steps

<CardGroup>
  <Card title="Quickstart" icon="rocket" href="/docs/daily-react/docs/quickstart">
    Put the provider to work in a full example.
  </Card>

  <Card title="The call object and provider" icon="box" href="/docs/daily-react/docs/call-object-and-provider">
    Lifecycle, joining, and leaving in depth.
  </Card>
</CardGroup>


# Live streaming
Source: https://docs.daily.co/docs/daily-react/docs/live-streaming

Start, stop, and observe RTMP live streams in React with the useLiveStreaming hook.

<Badge>Paid plans only</Badge>

Live streaming broadcasts a call to an RTMP endpoint such as YouTube Live, Twitch, or a custom server. [`useLiveStreaming`](/reference/daily-react/use-live-streaming) mirrors [`useRecording`](/docs/daily-react/docs/recording): reactive state plus start, stop, and update helpers.

## Start and stop a stream

`startLiveStreaming` takes RTMP endpoint options and an optional layout; `stopLiveStreaming` ends it. `isLiveStreaming` reflects whether any stream is active:

```jsx theme={null}
import { useLiveStreaming } from '@daily-co/daily-react';

function StreamButton({ rtmpUrl }) {
  const { isLiveStreaming, startLiveStreaming, stopLiveStreaming } = useLiveStreaming();

  const start = () =>
    startLiveStreaming({
      rtmpUrl,
      layout: { preset: 'default' },
    });

  return (
    <button onClick={() => (isLiveStreaming ? stopLiveStreaming() : start())}>
      {isLiveStreaming ? 'Stop stream' : 'Go live'}
    </button>
  );
}
```

The options match the daily-js [`startLiveStreaming()`](/reference/daily-js/instance-methods/start-live-streaming) method. To change the layout or endpoints while live, call `updateLiveStreaming`.

## Gate on permission

Like recording, starting and stopping streams requires owner status or `canAdmin: 'streaming'`. Gate the controls with [`usePermissions`](/reference/daily-react/use-permissions):

```jsx theme={null}
import { usePermissions, useLiveStreaming } from '@daily-co/daily-react';

function StreamControls({ rtmpUrl }) {
  const { canAdminStreaming } = usePermissions();
  const { isLiveStreaming, startLiveStreaming, stopLiveStreaming } = useLiveStreaming();
  if (!canAdminStreaming) return null;
  return (
    <button
      onClick={() =>
        isLiveStreaming ? stopLiveStreaming() : startLiveStreaming({ rtmpUrl })
      }
    >
      {isLiveStreaming ? 'Stop' : 'Go live'}
    </button>
  );
}
```

## React to stream events and errors

Live streaming has more failure modes than recording (the remote RTMP endpoint can reject or drop the connection), so handle the error and warning callbacks:

```jsx theme={null}
import { useCallback, useState } from 'react';
import { useLiveStreaming } from '@daily-co/daily-react';

function StreamStatus() {
  const [error, setError] = useState(null);

  const { isLiveStreaming } = useLiveStreaming({
    onLiveStreamingStarted: useCallback(() => setError(null), []),
    onLiveStreamingError: useCallback((event) => setError(event.errorMsg), []),
    onLiveStreamingWarning: useCallback((event) => console.warn(event), []),
  });

  if (error) return <p role="alert">Live streaming error: {error}</p>;
  return <p>{isLiveStreaming ? '🔴 Live' : 'Offline'}</p>;
}
```

## Multiple concurrent streams

To run several streams at once (for example, different layouts for mobile and desktop), pass an `instanceId` (a valid UUID) to scope the hook. Without it, the hook returns aggregate state across all instances:

```jsx theme={null}
const { isLiveStreaming } = useLiveStreaming();                  // any active?
const mobile = useLiveStreaming({ instanceId: MOBILE_UUID });    // one instance
```

[`useLiveStreamingInstances`](/reference/daily-react/use-live-streaming-instances) lists every active stream. See the [multi-instance guide](/docs/guides/features/live-streaming/multi-instance) for details.

## Next steps

<CardGroup>
  <Card title="Recording" icon="circle-dot" href="/docs/daily-react/docs/recording">
    The same pattern, for recordings.
  </Card>

  <Card title="Live streaming guide" icon="book-open" href="/docs/guides/features/live-streaming">
    Layouts and RTMP configuration in depth.
  </Card>
</CardGroup>


# Network quality and diagnostics
Source: https://docs.daily.co/docs/daily-react/docs/network-quality

Monitor network quality, topology, and CPU load in React with useNetwork and useCPULoad, and adapt your UI to poor conditions.

Real calls run on imperfect networks and busy devices. [`useNetwork`](/reference/daily-react/use-network) and [`useCPULoad`](/reference/daily-react/use-cpu-load) let you surface connection quality to users and adapt the UI when conditions degrade.

## Show network quality

`useNetwork` returns the current `networkState`, the reasons behind it, and the connection `topology`:

```jsx theme={null}
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>;
}
```

When the state is `'warning'` or `'bad'`, `networkStateReasons` tells you why (`'sendPacketLoss'`, `'recvPacketLoss'`, `'roundTripTime'`, `'availableOutgoingBitrate'`), which is useful for a tooltip or a targeted hint:

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

<Note>
  The older `quality` (1-100) and `threshold` fields are **deprecated as of 0.23.0**. Use `networkState` and `networkStateReasons` instead.
</Note>

## React to changes

Pass `onNetworkQualityChange` and `onNetworkConnection` to run side effects, such as toast notifications, when the network changes:

```jsx theme={null}
import { useCallback } from 'react';
import { useNetwork } from '@daily-co/daily-react';

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

## Detailed stats

For richer diagnostics, `getStats()` returns the latest network statistics (the same data as the daily-js [`getNetworkStats()`](/reference/daily-js/instance-methods/get-network-stats) method):

```jsx theme={null}
const { getStats } = useNetwork();
const stats = await getStats();
```

## Topology

`topology` is `'peer'`, `'sfu'`, or `'none'`, telling you whether the call is peer-to-peer or routed through Daily's SFU. This is informational; it changes automatically as the call scales. See [video architecture](/docs/guides/architecture-and-monitoring/intro-to-video-arch) for what drives it.

## Monitor CPU load

A choppy call is often the device, not the network. [`useCPULoad`](/reference/daily-react/use-cpu-load) reports whether Daily is under CPU pressure and why:

```jsx theme={null}
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>;
}
```

## Adapting to poor conditions

A common pattern: when the network is `'bad'`, reduce what you send or receive. Lower the published quality with [`useSendSettings`](/reference/daily-react/use-send-settings), or reduce what you subscribe to with [`useReceiveSettings`](/reference/daily-react/use-receive-settings):

```jsx theme={null}
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;
}
```

## Next steps

<CardGroup>
  <Card title="Rendering media" icon="video" href="/docs/daily-react/docs/rendering-media">
    Render placeholders when video drops.
  </Card>

  <Card title="Video architecture" icon="diagram-project" href="/docs/guides/architecture-and-monitoring/intro-to-video-arch">
    Peer-to-peer vs SFU, and what topology means.
  </Card>
</CardGroup>


# Working with participants
Source: https://docs.daily.co/docs/daily-react/docs/participants

Read, filter, sort, and react to participant state in Daily React without over-rendering.

Participants are the core of any call UI. Daily React gives you a set of hooks for reading participant state, designed so that you subscribe to the smallest slice you need and re-render only when it changes.

## List participants

[`useParticipantIds`](/reference/daily-react/use-participant-ids) returns an array of participant session IDs and updates as people join and leave. It is the starting point for any grid or list:

```jsx theme={null}
import { useParticipantIds } from '@daily-co/daily-react';

function CallGrid() {
  const participantIds = useParticipantIds();
  return participantIds.map((id) => <Tile key={id} sessionId={id} />);
}
```

### Filter and sort

Pass `filter` and `sort` to scope the list. String-based filters and sorts are computed directly from the internal store and are cheaper than a custom function evaluated at runtime:

```jsx theme={null}
// Remote participants only, sorted by join time
const remoteIds = useParticipantIds({
  filter: 'remote',
  sort: 'joined_at',
});
```

Built-in filters are `'local'`, `'remote'`, `'screen'`, `'owner'`, and `'record'`; built-in sorts are `'joined_at'`, `'session_id'`, `'user_id'`, and `'user_name'`. For anything more specific, pass a function that receives the full [participant object](/reference/daily-js/instance-methods/participants):

```jsx theme={null}
const handRaisedIds = useParticipantIds({
  filter: (p) => Boolean(p.userData?.handRaised),
});
```

<Tip>
  Prefer the string filters and sorts when they fit. They run against the store and avoid re-evaluating a callback on every participant on every change.
</Tip>

`useParticipantIds` also accepts event callbacks (`onParticipantJoined`, `onParticipantLeft`, `onParticipantUpdated`, `onActiveSpeakerChange`) if you need to react to a change rather than just render the current list.

## Read a single property

[`useParticipantProperty`](/reference/daily-react/use-participant-property) reads one property (or a few) of a participant and re-renders only when that property changes. This is the workhorse hook for tiles:

```jsx theme={null}
import { useParticipantProperty } from '@daily-co/daily-react';

function Tile({ sessionId }) {
  const userName = useParticipantProperty(sessionId, 'user_name');
  const audioState = useParticipantProperty(sessionId, 'tracks.audio.state');
  return (
    <div>
      <span>{userName}</span>
      {audioState === 'off' && <MutedIcon />}
    </div>
  );
}
```

Dot paths reach nested properties (`'tracks.video.subscribed'`), and you can request several at once by passing an array:

```jsx theme={null}
const [isOwner, userName] = useParticipantProperty(sessionId, [
  'owner',
  'user_name',
]);
```

<Note>
  Use `useParticipantProperty` instead of the deprecated `useParticipant`, which returns the whole participant object and re-renders on any change to it. `useParticipant`, `useLocalParticipant`, and `useActiveParticipant` were all deprecated in 0.17.0 for this reason.
</Note>

## The local participant

You usually want the local participant's session ID, not the whole object. [`useLocalSessionId`](/reference/daily-react/use-local-session-id) gives you just that, and you compose it with the other hooks:

```jsx theme={null}
import { useLocalSessionId, useParticipantProperty } from '@daily-co/daily-react';

function LocalName() {
  const localSessionId = useLocalSessionId();
  const userName = useParticipantProperty(localSessionId, 'user_name');
  return <span>You are {userName}</span>;
}
```

## Who is speaking

[`useActiveSpeakerId`](/reference/daily-react/use-active-speaker-id) returns the session ID of the current active speaker, or `null` when nobody has spoken. Pass `ignoreLocal` to exclude yourself, or a `filter` to limit which participants can become the active speaker:

```jsx theme={null}
import { useActiveSpeakerId, DailyVideo } from '@daily-co/daily-react';

function Spotlight() {
  const activeSpeakerId = useActiveSpeakerId({ ignoreLocal: true });
  if (!activeSpeakerId) return null;
  return <DailyVideo sessionId={activeSpeakerId} type="video" />;
}
```

See [Active speaker and audio levels](/docs/daily-react/docs/active-speaker) for speaking indicators and volume meters.

## Count participants

[`useParticipantCounts`](/reference/daily-react/use-participant-counts) returns `present` and `hidden` counts. `hidden` counts participants with `hasPresence: false`, such as observers or bots:

```jsx theme={null}
import { useParticipantCounts } from '@daily-co/daily-react';

function Header() {
  const { present } = useParticipantCounts();
  return <span>{present} in call</span>;
}
```

## Choosing the right hook

| You need                             | Hook                                                                                                                                |
| ------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------- |
| The list of participants to render   | [`useParticipantIds`](/reference/daily-react/use-participant-ids)                                                                   |
| One property of a participant        | [`useParticipantProperty`](/reference/daily-react/use-participant-property)                                                         |
| The local participant's session ID   | [`useLocalSessionId`](/reference/daily-react/use-local-session-id)                                                                  |
| The current speaker                  | [`useActiveSpeakerId`](/reference/daily-react/use-active-speaker-id)                                                                |
| Head counts                          | [`useParticipantCounts`](/reference/daily-react/use-participant-counts)                                                             |
| To admit or deny people in the lobby | [`useWaitingParticipants`](/reference/daily-react/use-waiting-participants) (see [Permissions](/docs/daily-react/docs/permissions)) |

## Next steps

<CardGroup>
  <Card title="Rendering media" icon="video" href="/docs/daily-react/docs/rendering-media">
    Turn participant IDs into video and audio.
  </Card>

  <Card title="Active speaker and audio levels" icon="waveform-lines" href="/docs/daily-react/docs/active-speaker">
    Highlight whoever is talking.
  </Card>
</CardGroup>


# Permissions
Source: https://docs.daily.co/docs/daily-react/docs/permissions

Control what participants can send, receive, and administer in a Daily call, including knock-to-join waiting rooms.

Daily's permissions system lets you control exactly what each participant is allowed to do in a call: which media they can publish, which streams they can receive, and which administrative actions they can perform. Permissions can be set at join time via a [meeting token](/reference/rest-api/meeting-tokens/create-meeting-token) or updated dynamically at runtime.

## DailyParticipantPermissions

Every participant object exposes a `permissions` field of type `DailyParticipantPermissions`:

```typescript theme={null}
interface DailyParticipantPermissions {
  hasPresence: boolean;
  canSend: Set<'video' | 'audio' | 'screenVideo' | 'screenAudio' | 'customVideo' | 'customAudio'> | boolean;
  canReceive: DailyParticipantCanReceivePermission;
  canAdmin: Set<'participants' | 'streaming' | 'transcription'> | boolean;
}
```

<ResponseField name="hasPresence" type="boolean">
  When `false`, the participant is hidden from all other participants. They do not appear in `participants()` for others, cannot be seen, and their events are not broadcast. Useful for silent observers or bots. Hidden participants require SFU topology.
</ResponseField>

<ResponseField name="canSend" type="Set<string> | boolean">
  Controls which media tracks the participant may publish.

  <Expandable title="allowed values">
    <ResponseField name="video" type="string">Camera video track.</ResponseField>
    <ResponseField name="audio" type="string">Microphone audio track.</ResponseField>
    <ResponseField name="screenVideo" type="string">Screen share video.</ResponseField>
    <ResponseField name="screenAudio" type="string">Screen share audio.</ResponseField>
    <ResponseField name="customVideo" type="string">Any custom video track started with `startCustomTrack()`.</ResponseField>
    <ResponseField name="customAudio" type="string">Any custom audio track started with `startCustomTrack()`.</ResponseField>
  </Expandable>

  Pass `true` to allow all, `false` to block all, or a `Set` of specific values.
</ResponseField>

<ResponseField name="canReceive" type="DailyParticipantCanReceivePermission">
  Controls which participants' media streams this participant may subscribe to.

  <Expandable title="properties">
    <ResponseField name="base" type="DailyParticipantCanReceiveMediaPermissionFull | boolean">
      Default receive permission that applies to all participants unless overridden. `true` allows all media from all participants, `false` blocks all. Or provide a granular object:

      ```typescript theme={null}
      {
        video: boolean;
        audio: boolean;
        screenVideo: boolean;
        screenAudio: boolean;
        customVideo: { '*': boolean; [trackName: string]: boolean };
        customAudio: { '*': boolean; [trackName: string]: boolean };
      }
      ```
    </ResponseField>

    <ResponseField name="byUserId" type="Record<string, DailyParticipantCanReceiveMediaPermissionPartial | boolean>">
      Per-user overrides keyed by `user_id`. Values are partial permission objects — only the fields you specify override the base.
    </ResponseField>

    <ResponseField name="byParticipantId" type="Record<string, DailyParticipantCanReceiveMediaPermissionPartial | boolean>">
      Per-session overrides keyed by `session_id`. Takes priority over `byUserId` and `base`.
    </ResponseField>
  </Expandable>

  Override resolution order (highest to lowest): `byParticipantId` → `byUserId` → `base`.
</ResponseField>

<ResponseField name="canAdmin" type="Set<string> | boolean">
  Controls which administrative capabilities the participant holds.

  <Expandable title="allowed values">
    <ResponseField name="participants" type="string">Can mute, eject, and update permissions of other participants. Can also admit waiting participants.</ResponseField>
    <ResponseField name="streaming" type="string">Can start and stop cloud recordings and live streams.</ResponseField>
    <ResponseField name="transcription" type="string">Can start and stop transcription.</ResponseField>
  </Expandable>

  Pass `true` to grant all admin rights, `false` to grant none, or a `Set` of specific values.
</ResponseField>

## Reading permissions

Use [`usePermissions`](/reference/daily-react/use-permissions) to reactively read the local participant's permissions. It returns convenience booleans for each permission type:

```jsx theme={null}
import { usePermissions } from '@daily-co/daily-react';

function MediaControls() {
  const {
    canSendAudio,
    canSendVideo,
    canSendScreenVideo,
    canAdminParticipants,
    canAdminTranscription,
  } = usePermissions();

  return (
    <div>
      {canSendAudio && <MicButton />}
      {canSendVideo && <CameraButton />}
      {canSendScreenVideo && <ScreenShareButton />}
      {canAdminTranscription && <TranscriptionButton />}
    </div>
  );
}
```

To read another participant's permissions, pass their `sessionId` to `usePermissions`:

```jsx theme={null}
const { canSendAudio } = usePermissions(participantSessionId);
```

## Updating permissions at runtime

Use [`useDaily`](/reference/daily-react/use-daily) to get the call object and call `updateParticipant()`. The caller must themselves have `canAdmin: 'participants'` (or `canAdmin: true`).

```jsx theme={null}
import { useDaily } from '@daily-co/daily-react';

function ParticipantControls({ sessionId }) {
  const daily = useDaily();

  const muteParticipant = () => {
    daily.updateParticipant(sessionId, {
      updatePermissions: {
        canSend: new Set(['video']), // video only, no audio
      },
    });
  };

  const restoreParticipant = () => {
    daily.updateParticipant(sessionId, {
      updatePermissions: {
        canSend: new Set(['audio', 'video']),
      },
    });
  };

  return (
    <>
      <button onClick={muteParticipant}>Mute</button>
      <button onClick={restoreParticipant}>Unmute</button>
    </>
  );
}
```

The `updatePermissions` object is partial — only the fields you provide are changed:

```typescript theme={null}
type DailyParticipantPermissionsUpdate = {
  hasPresence?: boolean;
  canSend?: Array<string> | Set<string> | boolean;
  canReceive?: Partial<DailyParticipantCanReceivePermission>;
  canAdmin?: Array<string> | Set<string> | boolean;
};
```

### Restricting what a participant can send

Restrict a participant to audio-only (no camera or screen share):

```jsx theme={null}
daily.updateParticipant(sessionId, {
  updatePermissions: {
    canSend: new Set(['audio']),
  },
});
```

### Restricting what a participant can receive

Allow a participant to receive audio from everyone but video only from a specific user:

```jsx theme={null}
daily.updateParticipant(sessionId, {
  updatePermissions: {
    canReceive: {
      base: {
        video: false,
        audio: true,
        screenVideo: false,
        screenAudio: false,
        customVideo: { '*': false },
        customAudio: { '*': false },
      },
      byUserId: {
        'presenter-user-id': { video: true },
      },
    },
  },
});
```

### Granting admin permissions

Grant a participant transcription admin rights so they can start and stop transcription:

```jsx theme={null}
daily.updateParticipant(sessionId, {
  updatePermissions: {
    canAdmin: new Set(['transcription']),
  },
});
```

## Waiting room (knock-to-join)

When a room has knocking enabled, participants who attempt to join land in a waiting room until a host admits or denies them. Use [`useWaitingParticipants`](/reference/daily-react/use-waiting-participants) to manage the waiting room from the host side.

### Host: managing waiting participants

`useWaitingParticipants` returns `waitingParticipants`, `grantAccess`, and `denyAccess`. Pass callbacks to react to participants entering or leaving the lobby:

```jsx theme={null}
import { useCallback } from 'react';
import { useWaitingParticipants } from '@daily-co/daily-react';

function WaitingRoom() {
  const onWaitingParticipantAdded = useCallback((event) => {
    console.log(`${event.participant.name} is waiting`);
  }, []);

  const { waitingParticipants, grantAccess, denyAccess } = useWaitingParticipants({
    onWaitingParticipantAdded,
  });

  return (
    <ul>
      {waitingParticipants.map((p) => (
        <li key={p.id}>
          {p.name}
          <button onClick={() => grantAccess(p.id)}>Admit</button>
          <button onClick={() => denyAccess(p.id)}>Deny</button>
        </li>
      ))}
    </ul>
  );
}
```

To admit or deny all waiting participants at once, pass `'*'`:

```jsx theme={null}
grantAccess('*'); // admit everyone
denyAccess('*');  // deny everyone
```

### Guest: checking access state

Use [`useDaily`](/reference/daily-react/use-daily) and [`useDailyEvent`](/reference/daily-react/use-daily-event) to track the local participant's access state:

```jsx theme={null}
import { useState, useCallback } from 'react';
import { useDaily, useDailyEvent } from '@daily-co/daily-react';

function AccessStateHandler() {
  const daily = useDaily();
  const [screen, setScreen] = useState('joining');

  useDailyEvent('access-state-updated', useCallback(({ access }) => {
    if (typeof access === 'object') {
      if (access.level === 'lobby') setScreen('waiting');
      else if (access.level === 'full') setScreen('call');
      else if (access.level === 'none') setScreen('denied');
    }
  }, []));

  if (screen === 'waiting') return <p>Waiting for the host to admit you…</p>;
  if (screen === 'denied') return <p>Access denied.</p>;
  return null;
}
```

## Example: setting up a waiting room

<Steps>
  <Step title="Enable knocking on the room">
    Create or configure a Daily room with `enable_knocking: true` via the Daily REST API or dashboard.
  </Step>

  <Step title="Listen for waiting participants (host)">
    ```jsx theme={null}
    import { useCallback } from 'react';
    import { useWaitingParticipants } from '@daily-co/daily-react';

    function KnockingManager() {
      const onWaitingParticipantAdded = useCallback(({ participant }) => {
        showKnockPrompt(participant);
      }, []);

      const onWaitingParticipantRemoved = useCallback(({ participant }) => {
        dismissKnockPrompt(participant.id);
      }, []);

      const { waitingParticipants, grantAccess, denyAccess } = useWaitingParticipants({
        onWaitingParticipantAdded,
        onWaitingParticipantRemoved,
      });

      return waitingParticipants.map((p) => (
        <KnockPrompt
          key={p.id}
          participant={p}
          onAdmit={() => grantAccess(p.id)}
          onDeny={() => denyAccess(p.id)}
        />
      ));
    }
    ```
  </Step>

  <Step title="Handle access state changes (guest)">
    ```jsx theme={null}
    import { useState, useCallback } from 'react';
    import { useDailyEvent } from '@daily-co/daily-react';

    function LobbyScreen() {
      const [accessLevel, setAccessLevel] = useState(null);

      useDailyEvent('access-state-updated', useCallback(({ access }) => {
        if (typeof access === 'object') setAccessLevel(access.level);
      }, []));

      if (accessLevel === 'lobby') return <p>Waiting for the host…</p>;
      if (accessLevel === 'full') return <CallView />;
      if (accessLevel === 'none') return <p>You were not admitted.</p>;
      return null;
    }
    ```
  </Step>
</Steps>

<Note>
  Participants with `hasPresence: false` require SFU network topology. Daily automatically switches to SFU mode when hidden participants are present, but your room must support SFU.
</Note>


# Quickstart
Source: https://docs.daily.co/docs/daily-react/docs/quickstart

Build a working multi-participant video call in React with Daily React, from install to a rendered call grid.

This guide builds a minimal but complete custom call: it joins a room, renders a tile per participant, and plays everyone's audio. By the end you will have the full pattern that every Daily React app is built on.

<Note>
  You need a Daily room URL to follow along. Create a free account at [daily.co](https://www.daily.co) and create a room to get a URL like `https://your-domain.daily.co/room-name`.
</Note>

## The shape of a Daily React app

Three pieces appear in every app:

1. A **[`DailyProvider`](/reference/daily-react/daily-provider)** that creates the call object from your room `url` and shares it with the tree.
2. **Hooks** inside the provider that read call state.
3. **Components** like [`DailyVideo`](/reference/daily-react/daily-video) and [`DailyAudio`](/reference/daily-react/daily-audio) that render media.

<Steps>
  <Step title="Install the packages">
    Daily React needs `@daily-co/daily-js` and `jotai` as peer dependencies.

    <CodeGroup>
      ```bash npm theme={null}
      npm install @daily-co/daily-react @daily-co/daily-js jotai
      ```

      ```bash yarn theme={null}
      yarn add @daily-co/daily-react @daily-co/daily-js jotai
      ```

      ```bash pnpm theme={null}
      pnpm add @daily-co/daily-react @daily-co/daily-js jotai
      ```
    </CodeGroup>
  </Step>

  <Step title="Wrap your app in DailyProvider">
    [`DailyProvider`](/reference/daily-react/daily-provider) holds the call object and shares it with every component in your tree. The simplest setup is to let the provider create the call object for you: pass your room `url` straight to it.

    ```jsx theme={null}
    import { DailyProvider } from '@daily-co/daily-react';

    const ROOM_URL = 'https://your-domain.daily.co/room-name';

    function App() {
      return (
        <DailyProvider url={ROOM_URL}>
          <Call />
        </DailyProvider>
      );
    }
    ```
  </Step>

  <Step title="Join and leave the room">
    Get the call object with [`useDaily`](/reference/daily-react/use-daily) and call `join()` when the component mounts. The room `url` is already configured on the provider, so `join()` needs no arguments. Returning a cleanup function that calls `leave()` makes leaving automatic when the component unmounts.

    ```jsx theme={null}
    import { useEffect } from 'react';
    import { useDaily, useMeetingState } from '@daily-co/daily-react';

    function Call() {
      const daily = useDaily();
      const meetingState = useMeetingState();

      useEffect(() => {
        if (!daily) return;
        daily.join();
        return () => {
          daily.leave();
        };
      }, [daily]);

      if (meetingState !== 'joined-meeting') {
        return <p>Joining…</p>;
      }

      return <CallGrid />;
    }
    ```

    [`useMeetingState`](/reference/daily-react/use-meeting-state) re-renders the component as the meeting moves through `joining-meeting` to `joined-meeting`, so you can show a loading state without listening for events yourself.
  </Step>

  <Step title="Render a tile for each participant">
    [`useParticipantIds`](/reference/daily-react/use-participant-ids) returns the list of participant session IDs and updates as people join and leave. Map over it to render a tile per participant.

    ```jsx theme={null}
    import { useParticipantIds, DailyAudio } from '@daily-co/daily-react';

    function CallGrid() {
      const participantIds = useParticipantIds();

      return (
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1rem' }}>
          {participantIds.map((id) => (
            <Tile key={id} sessionId={id} />
          ))}
          {/* One DailyAudio for the whole call handles everyone's audio */}
          <DailyAudio />
        </div>
      );
    }
    ```

    <Tip>
      Render exactly one [`DailyAudio`](/reference/daily-react/daily-audio) for the whole call, not one per tile. It manages speaker slots and autoplay for every remote participant in a single place.
    </Tip>
  </Step>

  <Step title="Render each participant's video and name">
    [`DailyVideo`](/reference/daily-react/daily-video) renders a participant's video track given their `sessionId`. [`useParticipantProperty`](/reference/daily-react/use-participant-property) reads just the `user_name`, so the tile only re-renders when that one property changes.

    ```jsx theme={null}
    import { DailyVideo, useParticipantProperty } from '@daily-co/daily-react';

    function Tile({ sessionId }) {
      const userName = useParticipantProperty(sessionId, 'user_name');

      return (
        <div>
          <DailyVideo sessionId={sessionId} type="video" automirror />
          <span>{userName || 'Guest'}</span>
        </div>
      );
    }
    ```
  </Step>
</Steps>

## Complete example

A full working call. Set `ROOM_URL` to your room and render `<App />`.

```jsx App.jsx theme={null}
import { useEffect } from 'react';
import {
  DailyProvider,
  DailyAudio,
  DailyVideo,
  useDaily,
  useMeetingState,
  useParticipantIds,
  useParticipantProperty,
} from '@daily-co/daily-react';

const ROOM_URL = 'https://your-domain.daily.co/room-name';

export default function App() {
  return (
    <DailyProvider url={ROOM_URL}>
      <Call />
    </DailyProvider>
  );
}

function Call() {
  const daily = useDaily();
  const meetingState = useMeetingState();

  useEffect(() => {
    if (!daily) return;
    daily.join();
    return () => {
      daily.leave();
    };
  }, [daily]);

  if (meetingState === 'error') return <p>Something went wrong.</p>;
  if (meetingState !== 'joined-meeting') return <p>Joining…</p>;

  return <CallGrid />;
}

function CallGrid() {
  const participantIds = useParticipantIds();

  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1rem' }}>
      {participantIds.map((id) => (
        <Tile key={id} sessionId={id} />
      ))}
      <DailyAudio />
    </div>
  );
}

function Tile({ sessionId }) {
  const userName = useParticipantProperty(sessionId, 'user_name');

  return (
    <div style={{ width: 320 }}>
      <DailyVideo
        sessionId={sessionId}
        type="video"
        automirror
        style={{ width: '100%', borderRadius: 8, background: '#000' }}
      />
      <span>{userName || 'Guest'}</span>
    </div>
  );
}
```

That is the entire pattern: create a call object, provide it, then read state with hooks and render media with components. No event listeners, no manual track attachment, no cleanup boilerplate.

## What just happened

* You never wrote a single `.on('participant-joined', ...)` listener. [`useParticipantIds`](/reference/daily-react/use-participant-ids) tracks that for you.
* Muting a mic or changing a name re-renders only the affected tile, because [`useParticipantProperty`](/reference/daily-react/use-participant-property) subscribes to one property at a time.
* Video and audio attach to the DOM through [`DailyVideo`](/reference/daily-react/daily-video) and [`DailyAudio`](/reference/daily-react/daily-audio), including the autoplay handling that is easy to get wrong by hand.

## Next steps

<CardGroup>
  <Card title="Thinking in Daily React" icon="brain" href="/docs/daily-react/docs/thinking-in-daily-react">
    Why the hooks re-render the way they do.
  </Card>

  <Card title="Rendering media" icon="video" href="/docs/daily-react/docs/rendering-media">
    Video, audio, and screen tracks in depth.
  </Card>

  <Card title="Devices" icon="microphone" href="/docs/daily-react/docs/devices">
    Camera, mic, and speaker selection and toggling.
  </Card>

  <Card title="Working with participants" icon="users" href="/docs/daily-react/docs/participants">
    Filtering, sorting, and reading participant state.
  </Card>
</CardGroup>


# Recording
Source: https://docs.daily.co/docs/daily-react/docs/recording

Start, stop, and observe call recordings in React with the useRecording hook.

<Badge>Paid plans only</Badge>

[`useRecording`](/reference/daily-react/use-recording) gives you reactive recording state and start/stop helpers, so you can build recording controls and a "recording" indicator without managing recording events yourself.

## Recording controls

Destructure `isRecording`, `startRecording`, and `stopRecording`:

```jsx theme={null}
import { useRecording } from '@daily-co/daily-react';

function RecordButton() {
  const { isRecording, startRecording, stopRecording } = useRecording();
  return (
    <button onClick={() => (isRecording ? stopRecording() : startRecording())}>
      {isRecording ? 'Stop recording' : 'Start recording'}
    </button>
  );
}
```

`startRecording` accepts the same options as the daily-js [`startRecording()`](/reference/daily-js/instance-methods/start-recording) method, including layout presets:

```jsx theme={null}
startRecording({ layout: { preset: 'active-participant' } });
```

## Gate controls on permission

Only owners and participants with `canAdmin: 'streaming'` can start or stop recordings. Gate your controls with [`usePermissions`](/reference/daily-react/use-permissions):

```jsx theme={null}
import { usePermissions, useRecording } from '@daily-co/daily-react';

function RecordingControls() {
  const { canAdminStreaming } = usePermissions();
  const { isRecording, startRecording, stopRecording } = useRecording();
  if (!canAdminStreaming) return null;
  return (
    <button onClick={() => (isRecording ? stopRecording() : startRecording())}>
      {isRecording ? 'Stop' : 'Record'}
    </button>
  );
}
```

See the [Permissions guide](/docs/daily-react/docs/permissions) for how to grant `canAdmin` rights.

## Show a recording indicator

Every participant can read recording state, so anyone can show that the call is being recorded. `isLocalParticipantRecorded` tells the current user whether they are in the recording:

```jsx theme={null}
import { useRecording } from '@daily-co/daily-react';

function RecordingIndicator() {
  const { isRecording, isLocalParticipantRecorded, recordingStartedDate, startedBy } =
    useRecording();
  if (!isRecording) return null;
  return (
    <div role="status">
      🔴 Recording {isLocalParticipantRecorded ? '(you are recorded)' : ''}
      {recordingStartedDate && ` since ${recordingStartedDate.toLocaleTimeString()}`}
    </div>
  );
}
```

## React to recording events

Pass callbacks to run side effects when recording state changes:

```jsx theme={null}
import { useCallback } from 'react';
import { useRecording } from '@daily-co/daily-react';

useRecording({
  onRecordingStarted: useCallback((event) => console.log('Started', event), []),
  onRecordingStopped: useCallback(() => console.log('Stopped'), []),
  onRecordingError: useCallback((event) => console.error(event), []),
});
```

## Multiple concurrent recordings

When several recordings run at once, pass an `instanceId` (a valid UUID) to scope the hook to one recording. Without it, the hook returns aggregate state, where `isRecording` is true if any instance is active and the scalar fields reflect the first active instance:

```jsx theme={null}
const { isRecording } = useRecording();                 // aggregate: any active?
const portrait = useRecording({ instanceId: PORTRAIT_UUID }); // one instance
```

To list every active instance, use [`useRecordingInstances`](/reference/daily-react/use-recording-instances), which returns an array of per-instance state. See the [multi-instance recording and live streaming guide](/docs/guides/features/live-streaming/multi-instance) for the full pattern.

## Next steps

<CardGroup>
  <Card title="Live streaming" icon="signal-stream" href="/docs/daily-react/docs/live-streaming">
    The same model, for RTMP output.
  </Card>

  <Card title="Permissions" icon="lock" href="/docs/daily-react/docs/permissions">
    Grant the rights to start recordings.
  </Card>
</CardGroup>


# Rendering media
Source: https://docs.daily.co/docs/daily-react/docs/rendering-media

Show participant video with DailyVideo, play audio with DailyAudio, and read track state with useMediaTrack.

Media is the one part of a call that has to touch the DOM: a video track needs a `<video>` element, an audio track needs an `<audio>` element. Daily React provides components that own that work so your render stays declarative.

## Render video with DailyVideo

[`DailyVideo`](/reference/daily-react/daily-video) renders a `<video>` for a participant's track. Give it a `sessionId` and a track `type`:

```jsx theme={null}
import { DailyVideo } from '@daily-co/daily-react';

function Tile({ sessionId }) {
  return <DailyVideo sessionId={sessionId} type="video" automirror />;
}
```

Useful props:

* `type` — `'video'` (camera, the default) or `'screenVideo'` (screen share).
* `automirror` — mirrors the local camera, the convention users expect when seeing themselves.
* `fit` — `'contain'` (default) or `'cover'`, mapping to CSS `object-fit`.
* `playableStyle` — styles applied only while the video is actually playing, handy for hiding the element or showing a placeholder when the camera is off.

### Style from the data attributes

`DailyVideo` renders data attributes you can target with CSS instead of reaching into props for conditional styling: `data-playable`, `data-local`, `data-mirrored`, `data-session-id`, `data-subscribed`, and `data-video-type`. For example, dim a tile until its video is playable:

```css theme={null}
[data-playable='false'] {
  opacity: 0.4;
}
```

## Play audio with DailyAudio

Render exactly one [`DailyAudio`](/reference/daily-react/daily-audio) for the whole call. It plays all remote `audio` and `screenAudio` tracks, manages a pool of speaker slots, and handles the autoplay failures that browsers throw at you:

```jsx theme={null}
import { DailyAudio } from '@daily-co/daily-react';

function Call() {
  return (
    <>
      <Grid />
      <DailyAudio />
    </>
  );
}
```

<Warning>
  Do not render one `DailyAudio` per tile. It is a single, call-wide component. Use [`DailyAudioTrack`](#custom-audio-with-dailyaudiotrack) if you genuinely need per-participant audio elements.
</Warning>

By default `DailyAudio` keeps up to 5 speaker slots; raise it with `maxSpeakers`. Handle playback failures with `onPlayFailed`:

```jsx theme={null}
const onPlayFailed = useCallback((e) => {
  console.error(`Audio play() failed for ${e.sessionId}`, e.target);
}, []);

return <DailyAudio maxSpeakers={8} onPlayFailed={onPlayFailed} />;
```

To reach the underlying `<audio>` elements, for example to set output volume, pass a `ref` and use its methods such as `getAllAudio()` and `getAudioBySessionId(sessionId)`.

## Custom audio with DailyAudioTrack

When you need to compose audio yourself, [`DailyAudioTrack`](/reference/daily-react/daily-audio-track) renders a single `<audio>` for one participant and track type. Most apps should use `DailyAudio` instead; reach for `DailyAudioTrack` only when you need direct control over each element:

```jsx theme={null}
import { DailyAudioTrack, useParticipantIds } from '@daily-co/daily-react';

function CustomAudio() {
  const remoteIds = useParticipantIds({ filter: 'remote' });
  return remoteIds.map((id) => <DailyAudioTrack key={id} sessionId={id} />);
}
```

## Read track state with useMediaTrack

When you need the track itself or its state rather than a rendered element, use [`useMediaTrack`](/reference/daily-react/use-media-track). It returns the [`MediaTrackState`](/reference/daily-js/types/daily-track-state) plus an `isOff` convenience boolean:

```jsx theme={null}
import { useMediaTrack } from '@daily-co/daily-react';

function CameraStatus({ sessionId }) {
  const video = useMediaTrack(sessionId, 'video');
  return <span>{video.isOff ? 'Camera off' : 'Camera on'}</span>;
}
```

There are convenience hooks for each track type: `useVideoTrack`, `useAudioTrack`, `useScreenVideoTrack`, and `useScreenAudioTrack`, each taking just a `sessionId`.

```jsx theme={null}
import { useVideoTrack } from '@daily-co/daily-react';

const video = useVideoTrack(sessionId); // same as useMediaTrack(sessionId, 'video')
```

<Tip>
  Use `useMediaTrack` to drive placeholders: when `isOff` is true, render an avatar instead of the `<video>`. To attach a track to your own element you can read `track.persistentTrack`, but prefer `DailyVideo` unless you have a specific reason not to.
</Tip>

## A complete tile

Putting video, name, and a mic indicator together:

```jsx theme={null}
import {
  DailyVideo,
  useMediaTrack,
  useParticipantProperty,
} from '@daily-co/daily-react';

function Tile({ sessionId }) {
  const userName = useParticipantProperty(sessionId, 'user_name');
  const audio = useMediaTrack(sessionId, 'audio');

  return (
    <div style={{ position: 'relative', width: 320 }}>
      <DailyVideo
        sessionId={sessionId}
        type="video"
        automirror
        fit="cover"
        style={{ width: '100%', borderRadius: 8, background: '#000' }}
      />
      <span>
        {userName || 'Guest'} {audio.isOff && '🔇'}
      </span>
    </div>
  );
}
```

## Next steps

<CardGroup>
  <Card title="Devices" icon="microphone" href="/docs/daily-react/docs/devices">
    Let users pick and toggle their camera and mic.
  </Card>

  <Card title="Screen sharing" icon="display" href="/docs/daily-react/docs/screen-sharing">
    Render and control screen shares.
  </Card>
</CardGroup>


# Screen sharing
Source: https://docs.daily.co/docs/daily-react/docs/screen-sharing

Start, stop, and render screen shares in React with useScreenShare and DailyVideo.

[`useScreenShare`](/reference/daily-react/use-screen-share) covers the sending side of screen sharing: starting and stopping your own share, and observing all active shares in the call. Rendering a share reuses the same [`DailyVideo`](/reference/daily-react/daily-video) component, with the `screenVideo` track type.

## Start and stop sharing

`useScreenShare` returns `startScreenShare`, `stopScreenShare`, and `isSharingScreen` for the local participant:

```jsx theme={null}
import { useScreenShare } from '@daily-co/daily-react';

function ScreenShareButton() {
  const { isSharingScreen, startScreenShare, stopScreenShare } = useScreenShare();
  return (
    <button onClick={() => (isSharingScreen ? stopScreenShare() : startScreenShare())}>
      {isSharingScreen ? 'Stop sharing' : 'Share screen'}
    </button>
  );
}
```

`startScreenShare` triggers the browser's native screen-picker dialog. The user can cancel it, so do not assume a share started just because you called the function. React to the actual outcome with the callbacks:

```jsx theme={null}
import { useCallback } from 'react';
import { useScreenShare } from '@daily-co/daily-react';

function ScreenShare() {
  const { startScreenShare } = useScreenShare({
    onLocalScreenShareStarted: useCallback(() => console.log('Sharing started'), []),
    onLocalScreenShareStopped: useCallback(() => console.log('Sharing stopped'), []),
    onError: useCallback((e) => console.error('Screen share error', e), []),
  });
  return <button onClick={startScreenShare}>Share</button>;
}
```

## Render active screen shares

The `screens` array describes every active share in the call, local and remote. Each entry has a `session_id`, a `screen_id`, `local`, and the `video` and `audio` track states. Render each one with `DailyVideo` using `type="screenVideo"`:

```jsx theme={null}
import { useScreenShare, DailyVideo } from '@daily-co/daily-react';

function ScreenShares() {
  const { screens } = useScreenShare();
  if (screens.length === 0) return null;
  return (
    <div>
      {screens.map((screen) => (
        <DailyVideo
          key={screen.screen_id}
          sessionId={screen.session_id}
          type="screenVideo"
          fit="contain"
        />
      ))}
    </div>
  );
}
```

<Tip>
  You can also find who is sharing with [`useParticipantIds`](/reference/daily-react/use-participant-ids) and the built-in `filter: 'screen'`. Use `screens` from `useScreenShare` when you need the screen track state; use the participant filter when you just need the IDs.
</Tip>

## Screen share audio

A share can include audio (for example, sharing a browser tab with sound). Remote screen audio is played automatically by [`DailyAudio`](/reference/daily-react/daily-audio). To also play the local participant's own screen audio, set `playLocalScreenAudio`:

```jsx theme={null}
<DailyAudio playLocalScreenAudio />
```

## A complete screen-share area

```jsx theme={null}
import { useScreenShare, DailyVideo } from '@daily-co/daily-react';

function ScreenShareArea() {
  const { screens, isSharingScreen, startScreenShare, stopScreenShare } = useScreenShare();

  return (
    <div>
      <button onClick={() => (isSharingScreen ? stopScreenShare() : startScreenShare())}>
        {isSharingScreen ? 'Stop sharing' : 'Share screen'}
      </button>
      {screens.map((screen) => (
        <DailyVideo
          key={screen.screen_id}
          sessionId={screen.session_id}
          type="screenVideo"
          style={{ width: '100%', background: '#000' }}
        />
      ))}
    </div>
  );
}
```

## Next steps

<CardGroup>
  <Card title="Rendering media" icon="video" href="/docs/daily-react/docs/rendering-media">
    More on DailyVideo and track types.
  </Card>

  <Card title="Recording" icon="circle-dot" href="/docs/daily-react/docs/recording">
    Capture the call, screen shares included.
  </Card>
</CardGroup>


# Thinking in Daily React
Source: https://docs.daily.co/docs/daily-react/docs/thinking-in-daily-react

The reactive mental model behind Daily React: hooks as selectors, granular re-renders, and events as subscriptions.

Daily React is small once the mental model clicks. This page is the model. The rest of the guides are applications of it.

## From listeners to hooks

With plain `daily-js`, a call is a stream of events. You keep your own copy of call state and update it as events arrive:

```js theme={null}
// daily-js: you own the state and the listeners
const participants = {};

call
  .on('participant-joined', (e) => {
    participants[e.participant.session_id] = e.participant;
    render();
  })
  .on('participant-updated', (e) => {
    participants[e.participant.session_id] = e.participant;
    render();
  })
  .on('participant-left', (e) => {
    delete participants[e.participant.session_id];
    render();
  });
```

Daily React keeps that state for you in an internal store and exposes it through hooks. The same logic becomes:

```jsx theme={null}
// Daily React: read the state, let it re-render you
import { useParticipantIds } from '@daily-co/daily-react';

function CallGrid() {
  const participantIds = useParticipantIds();
  return participantIds.map((id) => <Tile key={id} sessionId={id} />);
}
```

There are no listeners to register and none to tear down. When a participant joins or leaves, the store updates and any component reading `useParticipantIds` re-renders.

## Hooks are selectors

Under the hood, Daily React stores call state in [Jotai](https://jotai.org/) atoms and updates them as `daily-js` events fire. Each hook is a **selector**: it reads one slice of that store and subscribes your component to changes in that slice only.

This is the single most important thing to internalize, because it drives both correctness and performance. Two hooks that read different slices re-render independently:

* [`useParticipantIds`](/reference/daily-react/use-participant-ids) re-renders when the set of participants changes, not when one participant mutes.
* [`useParticipantProperty(id, 'user_name')`](/reference/daily-react/use-participant-property) re-renders when that one participant's name changes, and ignores everything else.

### Read the smallest slice you need

Prefer the narrow hook over the broad one. Reading a whole participant object re-renders your component on every property change; reading a single property does not.

```jsx theme={null}
// Re-renders only when this participant's audio subscription changes:
const isAudioSubscribed = useParticipantProperty(
  sessionId,
  'tracks.audio.subscribed'
);
```

The same principle is why dedicated hooks exist for common slices:

| Want                     | Use                                                                         | Not                                |
| ------------------------ | --------------------------------------------------------------------------- | ---------------------------------- |
| The local session ID     | [`useLocalSessionId`](/reference/daily-react/use-local-session-id)          | the full local participant object  |
| One participant property | [`useParticipantProperty`](/reference/daily-react/use-participant-property) | the full participant object        |
| Who is speaking          | [`useActiveSpeakerId`](/reference/daily-react/use-active-speaker-id)        | the full active participant object |

<Note>
  The object-returning hooks `useParticipant`, `useLocalParticipant`, and `useActiveParticipant` are **deprecated as of 0.17.0** in favor of the property-and-ID hooks above, precisely because returning whole objects causes broad re-renders. New code should use the narrow hooks.
</Note>

## Events become hook callbacks

You rarely call [`useDailyEvent`](/reference/daily-react/use-daily-event) directly, because most events already have a hook that exposes their state and an optional callback. Reach for the feature hook first:

| Instead of listening for         | Use                                                                                                       |
| -------------------------------- | --------------------------------------------------------------------------------------------------------- |
| `participant-joined` / `-left`   | [`useParticipantIds`](/reference/daily-react/use-participant-ids) (or its `onParticipantJoined` callback) |
| `active-speaker-change`          | [`useActiveSpeakerId`](/reference/daily-react/use-active-speaker-id)                                      |
| `recording-started` / `-stopped` | [`useRecording`](/reference/daily-react/use-recording)                                                    |
| `transcription-message`          | [`useTranscription`](/reference/daily-react/use-transcription)                                            |
| `app-message`                    | [`useAppMessage`](/reference/daily-react/use-app-message)                                                 |
| `network-quality-change`         | [`useNetwork`](/reference/daily-react/use-network)                                                        |

Drop down to [`useDailyEvent`](/reference/daily-react/use-daily-event) only for events without a dedicated hook. See [Handling events](/docs/daily-react/docs/events) for the rules.

## Components own the DOM

Hooks give you state; two things in a call need to touch the DOM directly, and those are components:

* [`DailyVideo`](/reference/daily-react/daily-video) attaches a participant's video track to a `<video>` element.
* [`DailyAudio`](/reference/daily-react/daily-audio) plays remote audio, managing speaker slots and autoplay.

Keeping media in components means your render logic stays declarative: you map participant IDs to `<DailyVideo>` elements and never imperatively call `el.srcObject = ...`. See [Rendering media](/docs/daily-react/docs/rendering-media).

## The escape hatch

Daily React does not wrap every `daily-js` method. When you need one that has no dedicated hook, get the call object with [`useDaily`](/reference/daily-react/use-daily) and call it directly:

```jsx theme={null}
import { useDaily } from '@daily-co/daily-react';

function MuteButton({ sessionId }) {
  const daily = useDaily();
  return (
    <button onClick={() => daily.updateParticipant(sessionId, { setAudio: false })}>
      Mute
    </button>
  );
}
```

`useDaily` returns the exact same [`DailyCall`](/reference/daily-js/daily-call-client) instance you would get from `daily-js`, so anything in the daily-js reference works here. The difference is that imperative calls do not re-render anything by themselves; the resulting events flow back through the store and re-render the hooks that read the affected state.

## Putting it together

A Daily React component, in one breath: **read the state you need with the narrowest hooks, render media with components, and use `useDaily` for the imperative actions that have no hook.** Everything else, the subscriptions and the cleanup, is handled for you.

## Next steps

<CardGroup>
  <Card title="The call object and provider" icon="box" href="/docs/daily-react/docs/call-object-and-provider">
    Creating, joining, and leaving.
  </Card>

  <Card title="Working with participants" icon="users" href="/docs/daily-react/docs/participants">
    The hooks that read participant state.
  </Card>

  <Card title="Handling events" icon="bolt" href="/docs/daily-react/docs/events">
    When and how to use the event hooks.
  </Card>

  <Card title="Rendering media" icon="video" href="/docs/daily-react/docs/rendering-media">
    Video and audio components.
  </Card>
</CardGroup>


# Real-Time Transcription
Source: https://docs.daily.co/docs/daily-react/docs/transcription

Transcribe speech in Daily calls in real time using Deepgram, with the useTranscription hook for React apps.

<Badge>Paid plans only</Badge>

Daily's transcription feature streams speech-to-text output to all participants in a call. It is powered by [Deepgram](https://deepgram.com) and supports a wide range of languages, models, and configuration options.

In Daily React, the [`useTranscription`](/reference/daily-react/use-transcription) hook gives you reactive state and helper functions for managing transcription — without writing manual event listener boilerplate.

## Transcription permissions

Only meeting owners and participants with `canAdmin: 'transcription'` can start or stop transcription. The permission can be granted via a [meeting token](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties-permissions) at join time or dynamically via `updateParticipant()` during the call. See the [Permissions guide](/docs/daily-react/docs/permissions) for the full details.

Use [`usePermissions`](/reference/daily-react/use-permissions) to gate your transcription controls on the local participant's permission:

```jsx theme={null}
import { usePermissions, useTranscription } from '@daily-co/daily-react';

function TranscriptionControls() {
  const { canAdminTranscription } = usePermissions();
  const { isTranscribing, startTranscription, stopTranscription } = useTranscription();

  if (!canAdminTranscription) return null;

  return (
    <button onClick={() => isTranscribing ? stopTranscription() : startTranscription()}>
      {isTranscribing ? 'Stop captions' : 'Start captions'}
    </button>
  );
}
```

## Starting transcription

Destructure `startTranscription` from [`useTranscription`](/reference/daily-react/use-transcription) and call it when you are ready to begin:

```jsx theme={null}
import { useTranscription } from '@daily-co/daily-react';

function TranscriptionControls() {
  const { startTranscription, isTranscribing } = useTranscription();
  const { canAdminTranscription } = usePermissions();

  const handleStart = () => {
    startTranscription({
      language: 'en',
      model: 'nova-2',
      punctuate: true,
      profanity_filter: false,
    });
  };

  return (
    <button onClick={handleStart} disabled={isTranscribing || !canAdminTranscription}>
      Start captions
    </button>
  );
}
```

`startTranscription` is a thin wrapper around the daily-js [`startTranscription()`](/reference/daily-js/instance-methods/start-transcription) method, so it accepts the same `DailyTranscriptionDeepgramOptions` object described below.

### Start Options

**`DailyTranscriptionDeepgramOptions`**

<ParamField type="string">
  BCP-47 language tag. Examples: `'en'`, `'es'`, `'fr'`, `'de'`, `'ja'`, `'pt-BR'`. The available languages depend on the Deepgram model tier in use.
</ParamField>

<ParamField type="string">
  Deepgram model name. Examples: `'nova-2'`, `'nova'`, `'enhanced'`, `'base'`. Higher-tier models offer better accuracy at higher cost.
</ParamField>

<ParamField type="string">
  Deepgram tier. Deprecated in favor of specifying `model` directly, but still accepted for backwards compatibility.
</ParamField>

<ParamField type="boolean">
  When `true`, Deepgram replaces profane words with asterisks.
</ParamField>

<ParamField type="Array<string> | Array<boolean> | boolean">
  Entities to redact from the transcript. Pass `true` to redact all supported entities, or an array of entity type strings (e.g. `['pci', 'ssn']`).
</ParamField>

<ParamField type="number | boolean">
  Controls how long Deepgram waits for silence before ending an utterance. Pass a number (milliseconds) or `true`/`false` to enable/disable.
</ParamField>

<ParamField type="boolean">
  When `true`, Deepgram adds punctuation to the transcript.
</ParamField>

<ParamField type="Record<string, any>">
  Arbitrary key-value pairs forwarded directly to the Deepgram API. Use this to pass advanced Deepgram options not exposed directly.
</ParamField>

<ParamField type="boolean">
  When `true`, each transcription message includes the full raw Deepgram response object in the `rawResponse` field of the event passed to `onTranscriptionMessage`.
</ParamField>

<ParamField type="string">
  Identifier for this transcription instance. Required when running multiple simultaneous transcriptions.
</ParamField>

<ParamField type="string[]">
  Array of session IDs. When provided, only those participants' audio is transcribed. Omit to transcribe everyone.
</ParamField>

### Language and model selection

<Tip>
  Check out [Deepgram's language support documentation](https://developers.deepgram.com/docs/models-languages-overview) for the `model`/`language` combination that works best for your use case.
</Tip>

## Handling transcription messages

Pass an `onTranscriptionMessage` callback to [`useTranscription`](/reference/daily-react/use-transcription) to receive transcript segments in real time. This is the React equivalent of listening to the `transcription-message` event on the call object.

```jsx theme={null}
import { useCallback, useState } from 'react';
import { useTranscription } from '@daily-co/daily-react';

function LiveCaptions() {
  const [lines, setLines] = useState([]);

  const onTranscriptionMessage = useCallback((event) => {
    const { participantId, text, timestamp, trackType, instanceId, rawResponse } = event;

    setLines((prev) => [
      ...prev,
      { participantId, text, timestamp },
    ]);

    if (rawResponse) {
      // Full Deepgram response — available when includeRawResponse: true
      console.log('raw Deepgram response:', rawResponse);
    }
  }, []);

  useTranscription({ onTranscriptionMessage });

  return (
    <div className="captions">
      {lines.map(({ participantId, text, timestamp }, i) => (
        <p key={i}>
          <span className="speaker">{participantId.slice(0, 8)}</span>: {text}
        </p>
      ))}
    </div>
  );
}
```

### Message Format

**`DailyEventObjectTranscriptionMessage`**

| Field           | Type                  | Description                                                                                               |
| --------------- | --------------------- | --------------------------------------------------------------------------------------------------------- |
| `participantId` | `string`              | Session ID of the speaking participant                                                                    |
| `text`          | `string`              | Transcribed text segment                                                                                  |
| `timestamp`     | `Date`                | When the segment was produced                                                                             |
| `rawResponse`   | `Record<string, any>` | Full Deepgram response (when `includeRawResponse: true`)                                                  |
| `trackType`     | `string`              | Which audio track was transcribed (`'cam-audio'`, `'screen-audio'`, `'rmpAudio'`, or a custom track name) |
| `instanceId`    | `string \| undefined` | The transcription instance that produced this message                                                     |

## Updating transcription

To change which participants are being transcribed while transcription is already running, use [`useDaily`](/reference/daily-react/use-daily) to access the call object directly and call `updateTranscription`:

```jsx theme={null}
import { useDaily } from '@daily-co/daily-react';

function TranscriptionFilter({ presenterSessionId }) {
  const daily = useDaily();

  const transcribePresenterOnly = () => {
    daily.updateTranscription({
      participants: [presenterSessionId],
    });
  };

  const transcribeEveryone = () => {
    daily.updateTranscription({
      participants: [], // empty array = all participants
    });
  };

  const transcribeSpecificInstance = () => {
    daily.updateTranscription({
      instanceId: 'primary',
      participants: [presenterSessionId],
    });
  };

  return (
    <div>
      <button onClick={transcribePresenterOnly}>Presenter only</button>
      <button onClick={transcribeEveryone}>Everyone</button>
    </div>
  );
}
```

<ParamField type="string[]">
  Array of session IDs to transcribe going forward. Pass an empty array to
  transcribe all participants. This field is required.
</ParamField>

<ParamField type="string">
  The instance to update. Omit to update the default instance.
</ParamField>

## Stopping transcription

Destructure `stopTranscription` from [`useTranscription`](/reference/daily-react/use-transcription):

```jsx theme={null}
import { useTranscription } from '@daily-co/daily-react';

function LeaveButton({ onLeave }) {
  const { stopTranscription } = useTranscription();

  const handleLeave = () => {
    stopTranscription();
    onLeave();
  };

  return <button onClick={handleLeave}>Leave</button>;
}
```

To stop a named instance, pass the call object directly via [`useDaily`](/reference/daily-react/use-daily):

```jsx theme={null}
const daily = useDaily();
daily.stopTranscription({ instanceId: 'primary' });
```

## Events

Pass event callbacks directly to [`useTranscription`](/reference/daily-react/use-transcription). The hook handles subscribing and unsubscribing automatically as your component mounts and unmounts.

### `onTranscriptionStarted`

Called for all participants when transcription begins. Use it to show a "live captions" indicator in your UI. The event object mirrors [`DailyEventObjectTranscriptionStarted`](/reference/daily-js/events/transcription-events#transcription-started) and includes fields such as `language`, `model`, `startedBy`, and `instanceId`.

```jsx theme={null}
const onTranscriptionStarted = useCallback((event) => {
  console.log('Transcription started:', event.instanceId);
  console.log('  Language:', event.language);
  console.log('  Model:', event.model);
  console.log('  Started by:', event.startedBy); // session ID
  setIsTranscribing(true);
}, []);

useTranscription({ onTranscriptionStarted });
```

### `onTranscriptionStopped`

Called for all participants when transcription ends. Use it to hide the captions UI and clear any status text.

```jsx theme={null}
const onTranscriptionStopped = useCallback((event) => {
  console.log('Transcription stopped. Instance:', event.instanceId);
  console.log('Stopped by:', event.updatedBy); // session ID
  setIsTranscribing(false);
}, []);

useTranscription({ onTranscriptionStopped });
```

### `onTranscriptionError`

Called when the transcription service encounters an error. The event includes `instanceId` and `errorMsg`.

```jsx theme={null}
const onTranscriptionError = useCallback((event) => {
  console.error('Transcription error on instance', event.instanceId, ':', event.errorMsg);
  setTranscriptionError(event.errorMsg);
}, []);

useTranscription({ onTranscriptionError });
```

You can pass all callbacks together in a single `useTranscription` call:

```jsx theme={null}
useTranscription({
  onTranscriptionStarted,
  onTranscriptionStopped,
  onTranscriptionError,
  onTranscriptionMessage,
});
```

## Complete example

<Steps>
  <Step title="Set up useTranscription with callbacks">
    ```jsx theme={null}
    import { useCallback, useState } from 'react';
    import { useTranscription } from '@daily-co/daily-react';

    function useLiveCaptions() {
      const [isActive, setIsActive] = useState(false);
      const [statusText, setStatusText] = useState('');
      const [captions, setCaptions] = useState([]);
      const [error, setError] = useState(null);

      const onTranscriptionStarted = useCallback(({ model, language }) => {
        setIsActive(true);
        setStatusText(`Live captions on (${model}/${language})`);
        setError(null);
      }, []);

      const onTranscriptionStopped = useCallback(() => {
        setIsActive(false);
        setStatusText('');
      }, []);

      const onTranscriptionError = useCallback(({ errorMsg }) => {
        setError(errorMsg);
        console.error('Transcription error:', errorMsg);
      }, []);

      const onTranscriptionMessage = useCallback(({ participantId, text, timestamp }) => {
        setCaptions((prev) => [...prev, { participantId, text, timestamp }]);
      }, []);

      const { startTranscription, stopTranscription } = useTranscription({
        onTranscriptionStarted,
        onTranscriptionStopped,
        onTranscriptionError,
        onTranscriptionMessage,
      });

      return { isActive, statusText, captions, error, startTranscription, stopTranscription };
    }
    ```
  </Step>

  <Step title="Display captions from onTranscriptionMessage">
    ```jsx theme={null}
    function CaptionsDisplay({ captions }) {
      return (
        <div
          className="captions-box"
          style={{ height: 200, overflowY: 'auto' }}
        >
          {captions.map(({ participantId, text, timestamp }, i) => (
            <p key={i}>
              <strong>{participantId.slice(0, 8)}</strong>: {text}
            </p>
          ))}
        </div>
      );
    }
    ```
  </Step>

  <Step title="Show status from onTranscriptionStarted/Stopped">
    ```jsx theme={null}
    function CaptionsStatus({ statusText, error }) {
      if (error) {
        return <p className="error">Captions error: {error}</p>;
      }
      return statusText ? <p className="status">{statusText}</p> : null;
    }
    ```
  </Step>

  <Step title="Start/stop button">
    ```jsx theme={null}
    import { usePermissions } from '@daily-co/daily-react';

    function LiveCaptionsFeature() {
      const { canAdminTranscription } = usePermissions();
      const {
        isActive,
        statusText,
        captions,
        error,
        startTranscription,
        stopTranscription,
      } = useLiveCaptions();

      const handleToggle = () => {
        if (isActive) {
          stopTranscription();
        } else {
          startTranscription({
            language: 'en',
            model: 'nova-2',
            punctuate: true,
            includeRawResponse: false,
          });
        }
      };

      return (
        <div>
          <CaptionsStatus statusText={statusText} error={error} />
          <CaptionsDisplay captions={captions} />
          {canAdminTranscription && (
            <button onClick={handleToggle}>
              {isActive ? 'Stop captions' : 'Start captions'}
            </button>
          )}
        </div>
      );
    }
    ```
  </Step>
</Steps>


# Daily Client SDK for Flutter
Source: https://docs.daily.co/docs/flutter/index

Build real-time video and audio calling into your Flutter mobile applications.

The Daily Client SDK for Flutter is a Dart package built on WebRTC. It handles media negotiation, network traversal, and participant management so you can focus on building your UI.

<CardGroup>
  <Card title="Demo app" icon="rocket" href="https://github.com/daily-demos/daily-flutter-demo">
    A complete working example on GitHub
  </Card>

  <Card title="API reference" icon="code" href="https://pub.dev/documentation/daily_flutter/latest/">
    Full Dart API docs on pub.dev
  </Card>
</CardGroup>

## Getting started

Add the package to your `pubspec.yaml`:

```yaml theme={null}
dependencies:
  daily_flutter: ^latest
```

Then join a call and display participant video:

```dart theme={null}
import 'package:daily_flutter/daily_flutter.dart';

final call = CallClient();

// Subscribe to events
call.events.listen((event) {
  if (event is ParticipantJoinedEvent) {
    // Add a VideoView for this participant
  } else if (event is ParticipantUpdatedEvent) {
    // Update tracks for this participant
  } else if (event is ParticipantLeftEvent) {
    // Remove the participant's VideoView
  }
});

// Join the call
await call.join(url: Uri.parse('https://your-domain.daily.co/room-name'));

// Toggle camera
await call.setInputsEnabled(camera: false);

// Leave when done
await call.leave();
call.dispose();
```

Render a participant's video using `VideoView`:

```dart theme={null}
VideoView(
  participant: participant,
  videoSource: VideoSource.camera,
)
```

## API structure

The SDK is organized around the tasks involved in building a call. For each task you get methods to **update** state, properties to **get** current state, and **events** via `CallClient.events` to react to changes.

<CardGroup>
  <Card title="Call lifecycle" icon="phone" href="https://pub.dev/documentation/daily_flutter/latest/daily_flutter/CallClient/join.html">
    `join()`, `leave()`, `callState`, `CallStateUpdated`
  </Card>

  <Card title="Participants" icon="users" href="https://pub.dev/documentation/daily_flutter/latest/daily_flutter/CallClient/participants.html">
    `participants()`, `ParticipantJoined`, `ParticipantUpdated`, `ParticipantLeft`
  </Card>

  <Card title="Media inputs" icon="video" href="https://pub.dev/documentation/daily_flutter/latest/daily_flutter/CallClient/updateInputs.html">
    `updateInputs()`, `setInputsEnabled()`, `InputsUpdated`
  </Card>

  <Card title="Publishing" icon="signal-stream" href="https://pub.dev/documentation/daily_flutter/latest/daily_flutter/CallClient/updatePublishing.html">
    `updatePublishing()`, `PublishingUpdated`
  </Card>

  <Card title="Subscriptions" icon="rss" href="https://pub.dev/documentation/daily_flutter/latest/daily_flutter/CallClient/updateSubscriptions.html">
    `updateSubscriptions()`, `updateSubscriptionProfiles()`, `SubscriptionsUpdated`
  </Card>

  <Card title="Active speaker" icon="microphone" href="https://pub.dev/documentation/daily_flutter/latest/daily_flutter/CallClient/activeSpeaker.html">
    `activeSpeaker`, `ActiveSpeakerChanged`
  </Card>
</CardGroup>

## Requirements

* Flutter 3.0 or later
* iOS deployment target >= 13.0
* Android minSdkVersion >= 23


# Installing the Daily Client SDK for Flutter
Source: https://docs.daily.co/docs/flutter/installation

Learn how to get set up with the Daily Client SDK for Flutter.

## Minimum requirements

The Daily Client SDK for Flutter requires the following versions:

* Flutter ≥ 3.0.0
* iOS ≥ 13.0 (objective-C and Swift applications are supported)
* Android compileSdkVersion ≥ 33
* Android minSdkVersion ≥ 24
* Android NDK ≥ 25.1.8937393

## Setup

1. Add `daily_flutter` as a dependency: `flutter pub add daily_flutter`

2. Follow the platform-specific setup instructions for [`permission_handler`](https://pub.dev/packages/permission_handler).

### iOS

According to the `permission_handler` instructions above, add the permission flags for camera and microphone.

We recommend adding the `audio` background mode to your app's capabilities.

### Android

Add the necessary permissions to your `AndroidManifest.xml`:

```
  ...
  <uses-permission android:name="android.permission.INTERNET" />
  <uses-permission android:name="android.permission.CAMERA" />
  <uses-permission android:name="android.permission.RECORD_AUDIO" />
  <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
```

Add the permission flags for camera and microphone according to the `permission_handler` instructions above.


# Daily Adaptive Bitrate
Source: https://docs.daily.co/docs/guides/architecture-and-monitoring/adaptive-bitrate

Automatically adjust video quality in real time based on network conditions, delivering the best visual experience your network can support.

<Note>
  Unlock next-gen video quality with Daily Adaptive Bitrate, combining ultra-reliable calls and the best visual experience your network can offer — automatically adjusting in real time to your changing needs.
</Note>

## Overview

Video calls must be reliable. With traditional simulcast technology, achieving reliability requires conservative preconfigured settings — which means users may get a sub-par visual experience. Increasing the bitrate improves quality but risks call reliability.

The root of the quality-reliability trade-off is how traditional simulcast works: a sender has a predefined number of layers (usually three) with settings statically configured before the call. If a network issue arises, the only options are to reduce frame rate or drop to a lower layer.

**Example with static simulcast:**

You configure three layers:

| Layer  | Max bitrate | Resolution | Max framerate |
| ------ | ----------- | ---------- | ------------- |
| High   | 700 kbps    | 640x360    | 30 fps        |
| Medium | 200 kbps    | 427x240    | 15 fps        |
| Low    | 100 kbps    | 320x180    | 15 fps        |

A user joins on a WiFi network with 5 Mbps download / 1 Mbps upload. Due to the slow upload speed, they can't send all three layers. Result: they send either 360p @ 15fps or 240p @ 15fps.

**With Daily Adaptive Bitrate:**

Instead of static settings, Daily automatically adjusts to changing network conditions. When bandwidth is constrained, bitrate and resolution are reduced to keep the call connected. When bandwidth is available, bitrate and resolution increase up to 2 Mbps at 720p.

The same user on the same network would instead:

* Send video at 540p @ 30fps (\~800 kbps)
* Receive video at 720p @ 30fps (\~2 Mbps)

In 1:1 calls, only a single video layer is sent, saving bandwidth and enabling higher quality. In multi-party calls, the top layer adapts dynamically and lower layers serve as fallbacks.

## Usage

### daily-js and react-native-daily-js

Adaptive Bitrate is **enabled by default** for all `daily-js` and `react-native-daily-js` clients — this includes both Daily Prebuilt and custom call object apps. No additional configuration is required.

To disable it, set `enable_adaptive_simulcast` to `false` on the [domain](/reference/rest-api/domain/set-domain-config#body-properties-enable-adaptive-simulcast) or [room](/reference/rest-api/rooms/update-room#body-properties-enable-adaptive-simulcast).

Minimum supported versions:

* `daily-js`: `0.60.0` or later
* `react-native-daily-js`: `0.61.0` or later

### daily-android, daily-ios, and python

Adaptive Bitrate is **not enabled by default** for native SDK clients. To enable it:

1. Set `enable_adaptive_simulcast` to `true` on the [domain](/reference/rest-api/domain/set-domain-config#body-properties-enable-adaptive-simulcast) or [room](/reference/rest-api/rooms/update-room#body-properties-enable-adaptive-simulcast).
2. Set `allowAdaptiveLayers: true` in your client's `sendSettings`. \[ [Android docs](https://reference-android.daily.co/daily-android/co.daily.settings/-video-send-settings-update/index.html) | [iOS docs](https://reference-ios.daily.co/documentation/daily/videosendsettingsupdate) | [Python docs](https://reference-python.daily.co/) ]
3. Use the **VP8** video codec — Adaptive Bitrate is only supported with VP8 on native clients.

Minimum supported versions:

* `daily-android`: `0.18.0` or later
* `daily-ios`: `0.18.0` or later
* `daily-python`: `0.18.0` or later

### Multi-party Adaptive Bitrate

Multi-party Adaptive Bitrate is **off by default for all clients**. Enable it via the `enable_multiparty_adaptive_simulcast` [domain property](/reference/rest-api/domain/set-domain-config#body-properties-enable-multiparty-adaptive-simulcast) or [room property](/reference/rest-api/rooms/update-room#body-properties-enable-multiparty-adaptive-simulcast).

## Caveats

* Daily Adaptive Bitrate works for camera video only.
* In 1:1 calls, when a third participant joins, standard simulcast is automatically enabled. When the call drops back to two participants, Adaptive Bitrate re-enables automatically.
* Works best on Chrome and Safari (desktop and mobile). Firefox users can join, but will send video using 3-layer simulcast.


# Using the Daily Dashboard
Source: https://docs.daily.co/docs/guides/architecture-and-monitoring/experiment-in-the-dashboard

A tour of the Daily dashboard — manage rooms, inspect sessions, access API keys, and monitor usage.

The [Daily dashboard](https://dashboard.daily.co) is your control center for managing your Daily domain. From here you can create and configure rooms, inspect past and live sessions, manage API keys, and monitor usage.

<Card title="Go to your Daily dashboard" icon="arrow-right" href="https://dashboard.daily.co">
  Create and manage rooms, configure your domain, and explore call settings.
</Card>

<Warning>
  Opening a Daily room URL directly in your browser is a quick way to test [Daily Prebuilt](/docs/prebuilt). For production, you'll want to [embed calls on your own domain](https://www.daily.co/blog/how-to-embed-video-calls-on-your-own-domain/).
</Warning>

## Overview

The Overview page is your domain's home screen. It shows real-time and monthly usage at a glance:

* **Real time**: live session count and active participant count, updated every 15 seconds
* **Monthly overview**: total sessions, participant-minutes, cloud recording minutes and storage, and live streaming usage for the current billing period
* **Rooms**: how many rooms you've created against your account limit

<img alt="Daily dashboard overview page" />

<img alt="Daily dashboard overview page" />

## Sessions

The Sessions page lists all past and live sessions on your domain, with session ID, room name, participant count, duration, and last-active time. Switch between the **Past sessions** and **Live sessions** tabs to filter the view.

<img alt="Sessions list in the Daily dashboard" />

<img alt="Sessions list in the Daily dashboard" />

### Session details

Clicking a session opens its detail view, showing session status, total participant-minutes, and a per-participant table with packet loss and join time.

<img alt="Session details page in the Daily dashboard" />

<img alt="Session details page in the Daily dashboard" />

### Participant details

Clicking a participant opens a deep-dive view with their browser and OS, network type, and time-series charts for packet loss and bitrate over the duration of their session. Below the charts, a full event log shows every significant event from that participant's perspective — useful for diagnosing reported call quality issues.

<img alt="Participant details page in the Daily dashboard showing metrics charts" />

<img alt="Participant details page in the Daily dashboard showing metrics charts" />

<img alt="Participant details event log in the Daily dashboard" />

<img alt="Participant details event log in the Daily dashboard" />

See the [logging and metrics guide](/docs/guides/architecture-and-monitoring/logging-and-metrics) for guidance on reading these logs and charts.

## Rooms

The Rooms page lists all rooms on your domain with their creation date. From here you can create new rooms, delete existing ones, update settings on an existing room, and configure default room settings that apply to all newly created rooms.

<img alt="Rooms list in the Daily dashboard" />

<img alt="Rooms list in the Daily dashboard" />

### Creating a room

Click **Create room** to open the room creation form. Some of the options include:

* **Room name** — leave blank to auto-generate a random name
* **Privacy** — public (anyone with the link) or private (requires a meeting token)
* **Prejoin UI** — whether participants see a name/device configuration screen before joining
* **Knocking** — allow participants to request access to private rooms
* **Cameras and microphones on start** — default device state when joining
* **Various UI Settings** — enable or disable per room (only applies to calls using Daily Prebuilt)

<img alt="Room creation form in the Daily dashboard" />

<img alt="Room creation form in the Daily dashboard" />

<Tip>
  The dashboard room creator is great for testing and for creating internal meeting spaces. In production, use the [REST API](/reference/rest-api/rooms/create-room) to create rooms programmatically — for example, generating a unique room per user or meeting on demand. See the [full room configuration reference](/reference/rest-api/rooms/create-room#body-properties) for the complete list of available properties.
</Tip>

## Recordings

The Recordings page lists cloud recordings stored on your domain. From here you can download or delete recordings. See the [recording guide](/docs/guides/features/recording/index) for how to enable and configure recording.

## Developers

The Developers page has two sections:

* **API keys**: view, create, and rotate your Daily API keys. Your API key authenticates all REST API requests — treat it like a password and never expose it client-side.
* **API logs**: a real-time log of all REST API requests made against your domain, with HTTP status, method, endpoint, and timestamp. Logs are retained for 3 days and are useful for debugging integration issues.

<img alt="Developers page in the Daily dashboard showing API keys and API logs" />

<img alt="Developers page in the Daily dashboard showing API keys and API logs" />

## Settings

The Settings page is where admins manage team access to the dashboard.

### User roles

There are two roles on a Daily team:

* **Admin** — full access, including billing, API keys, and team management
* **Member** — access to rooms, sessions, and API logs, but not billing or API keys

### Dashboard permissions

| Permission           | Admin | Member |
| -------------------- | ----- | ------ |
| View API key         | ✓     |        |
| Regenerate API key   | ✓     |        |
| Delete rooms         | ✓     |        |
| Make billing updates | ✓     |        |
| Access recordings    | ✓     |        |
| View domain usage    | ✓     | ✓      |
| View session details | ✓     | ✓      |
| Create rooms         | ✓     | ✓      |
| View rooms           | ✓     | ✓      |
| Change room settings | ✓     | ✓      |
| Access API logs      | ✓     | ✓      |
| See members table    | ✓     | ✓      |

### Adding team members

1. Click the **Settings** tab.
2. Click **Add member**.
3. Copy and share the invite link from the modal that appears.

<img alt="Add member button in the Daily dashboard settings" />

<img alt="Add member button in the Daily dashboard settings" />

<img alt="Invite link modal in the Daily dashboard" />

<img alt="Invite link modal in the Daily dashboard" />

### Updating or removing a team member

Click the **⋮** menu to the right of a member's name to change their role or remove them from the team.


# Global Mesh Network (Mesh SFU)
Source: https://docs.daily.co/docs/guides/architecture-and-monitoring/global-mesh-network

Daily's global infrastructure for delivering real-time video and audio to anyone, anywhere in the world.

<img alt="" />

## Overview

Daily’s **Mesh SFU** (Selective Forwarding Unit) is a network architecture in which our globally distributed media servers are used to reduce the impact of the public internet and isolate it to the end user’s local ISP. In many cases, this reduces the latency, packet loss, and jitter — improving the overall call experience for end users around the globe. Some of our competitors call this architecture Cascaded Media Servers.

## How does Daily's Mesh SFU work?

It’s best to start with an example — if a user in California has a video call with a user from New York, the traditional approach would be for both of them to connect to a centralized media server (an SFU). This central media server can be equidistant to both users, or close to one user and far from the other. In either case, the connection between the end user and the SFU is on the public internet and, therefore, subject to disruption and unpredictability of the public internet.

<img alt="Traditional Network Topology" />

This is remedied by the Mesh SFU topology, in which the end user is directly communicating with their nearest SFU, **and those SFUs communicate with each other over our provider’s internal backhaul network,** avoiding as much exposure to the public internet as possible. Our data shows that the backhaul connection within a cloud infrastructure is far more performant compared to the connections between the ISPs.

<img alt="Mesh SFU Topology" />

## AWS Infrastructure

Our Mesh SFU topology is built on [AWS infrastructure](https://aws.amazon.com/about-aws/global-infrastructure/), which has 400+ POPs (points of presence) between 26 regions around the world. As AWS continues to expand its availability zones and POPs across the globe, Daily’s own capacity and performance also scale alongside it.

The AWS 50th-percentile ping benchmarks below demonstrate very low latencies between AWS regions within both the EU and US. End user latencies would be even lower than these averages, since `user <-> SFU` distance is generally smaller than `SFU <-> SFU` distance.

|              | EU Frankfurt | EU Stockholm | EU Milan | EU Ireland | EU London | EU Paris |      |
| ------------ | ------------ | ------------ | -------- | ---------- | --------- | -------- | ---- |
| EU Frankfurt | 3            | 23           | 12       | 26         | 17        | 12       |      |
| EU Stockholm | 22           | 3            | 32       | 42         | 33        | 31       |      |
| EU Milan     | 12           | 32           | 2        | 35         | 26        | 20       |      |
| EU Ireland   | 27           | 43           | 35       | 2          | 13        | 19       |      |
| EU London    | 18           | 34           | 27       | 13         | 4         | 11       |      |
| EU Paris     | 13           | 32           | 21       | 19         | 11        | 4        |      |
| Average      |              |              |          |            |           |          | 20ms |

|               | US Virginia | US Ohio | US California | US Oregon |      |
| ------------- | ----------- | ------- | ------------- | --------- | ---- |
| US Virginia   | 5           | 14      | 63            | 68        |      |
| US Ohio       | 14          | 4       | 53            | 55        |      |
| US California | 62          | 52      | 4             | 22        |      |
| US Oregon     | 68          | 54      | 22            | 2         |      |
| Average       |             |         |               |           | 35ms |

## Further reading

<Card title="Deep dive: How Daily's Global Mesh Network works" icon="book-open" href="https://www.daily.co/blog/global-mesh-network/">
  A detailed look at the architecture behind Daily's mesh SFU infrastructure — how media routing, region selection, and backbone networking work under the hood.
</Card>


# Video Call Architecture (Quick Intro)
Source: https://docs.daily.co/docs/guides/architecture-and-monitoring/intro-to-video-arch

Learn the basics of WebRTC, SFUs, and how Daily routes media between participants.

Daily is built on [WebRTC](https://webrtc.org/), the open standard that powers real-time audio and video in the browser. Understanding a few key concepts — what WebRTC does, how media moves between participants, and why the network architecture matters — will help you build better experiences with Daily.

## WebRTC: real-time media in the browser

WebRTC is a collection of standards, protocols, and APIs built into every modern browser. It handles several hard problems for you:

* **No plugins or installs required.** WebRTC is native to Chrome, Firefox, Safari, and Edge.
* **Encryption by default.** All WebRTC media is encrypted in transit using DTLS and SRTP.
* **Adaptive to network conditions.** WebRTC continuously probes available bandwidth and adjusts bitrates, frame rates, and resolutions to maintain the best possible quality.

But WebRTC is a low-level set of primitives, not a complete video calling solution. Building directly on raw WebRTC means solving a long list of additional problems yourself:

* **Signaling.** WebRTC defines how to send media once a connection exists, but not how two peers find each other or negotiate that connection in the first place. You need to build and operate a signaling layer.
* **NAT traversal and TURN servers.** Most devices are behind NATs or firewalls that block direct peer connections. WebRTC uses ICE, STUN, and TURN protocols to work around this — but you need to run TURN server infrastructure, which relays media when direct connections fail. Without it, calls fail for a significant portion of real-world users.
* **SFU infrastructure.** Direct P2P connections don't scale. To support calls with more than a couple of participants, you need to build, operate, and maintain SFU media servers — globally distributed if you want low latency for users in different regions.
* **Device and track management.** Handling camera and microphone permissions, device switching mid-call, dealing with browser inconsistencies, managing track lifecycle across join/leave events — all of this falls on you.
* **Call quality.** Detecting and adapting to degraded network conditions, implementing simulcast, managing receive-side quality — these require deep, ongoing work to get right across the range of real-world devices and networks.
* **Cross-browser and cross-platform differences.** Every browser implements WebRTC and media APIs slightly differently, with different constraints, quirks, and bugs — and they keep changing. Safari handles audio contexts differently than Chrome. Mobile browsers impose their own restrictions. New browser releases routinely introduce regressions. Staying on top of this is a continuous maintenance burden.

Daily handles all of this. The SDK gives you a clean API for participants, tracks, permissions, and call events, backed by globally distributed infrastructure — so you can focus on building your product instead of the plumbing beneath it.

## Rooms and participants

The core building block in Daily is a **room** — a virtual space where **participants** meet to exchange audio and video in real-time. Rooms are configurable: you can set privacy rules, recording preferences, permissions, and more via the [REST API](/reference/rest-api/rooms/create-room).

A room persists over time and can host many **sessions** — individual calls — one at a time. When the last participant leaves, the session ends, but the room remains available for future calls.

## The architecture of a room: P2P vs. SFU calls

How media actually travels between participants depends on the call's network topology. Daily supports two models.

**In a peer-to-peer (P2P) call**, each participant's device connects directly to every other participant's device. Media flows directly between peers with no central server involved. Because each participant must upload a separate stream to every other participant, upstream bandwidth scales as `n-1` where `n` is the number of participants — making P2P hard to scale beyond very small calls.

**In a Selective Forwarding Unit (SFU) call**, participants send their media to a central media server instead. The SFU processes, re-encrypts, and routes each track to the correct recipients. Because each participant uploads only once — to the SFU — a call routed this way can use as little as 200 kbps upstream regardless of how many people are on the call.

<img alt="Abstract representation of P2P vs. SFU connections, where in P2P circles are connected by arrows and in SFU circles point arrows to a server icon" />

Daily uses what we call a [**mesh SFU**](./global-mesh-network): each participant connects to the Daily server geographically closest to them, and traffic is then routed between servers via fast backbone networks to reach servers near the other participants. This means a Daily SFU call can actually have *lower* latency than a P2P call when participants are in different locations — the backbone routing outperforms a direct peer connection over the public internet.

For this reason, Daily defaults to SFU for all calls. The SFU model also offers:

* More reliable connections
* More control over send and receive settings (including [track subscriptions](#track-subscriptions))

P2P is still available and may be preferable for 1:1 calls where both participants are known to be geographically close and end-to-end encryption is required. To enforce P2P, set the  [`sfu_switchover`](/reference/rest-api/rooms/update-room#body-properties-sfu-switchover) room property to a value at or above the number of participants you want to stay on P2P (for a 1:1 call, set it to `2`) via the REST API, or call [`setNetworkTopology({ topology: 'peer' })`](/reference/daily-js/instance-methods/set-network-topology) from the Daily JS SDK.

## Track subscriptions

Video rooms are based on a **publish/subscribe model**: participants publish audio and video [tracks](https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack) from their mic and camera, and subscribe to tracks published by others.

By default, Daily subscribes each participant to every other participant's tracks automatically. This works well for small calls, but in large calls — a webinar with hundreds of attendees, for example — most participants don't need to receive every other participant's video. Subscribing to tracks you're not displaying wastes bandwidth and CPU.

[Daily track subscriptions](/docs/daily-js/concepts/tracks#track-subscription) let you control this precisely: subscribe to the tracks you're displaying, stage nearby pages, and unsubscribe from the rest. This is the foundation of features like pagination, breakout rooms, and large-scale broadcasts.

<Note>
  Track subscriptions are only available on SFU calls.
</Note>

## Call quality and bandwidth

The biggest factor affecting call quality is the number of active video streams. Each video stream a participant receives requires bandwidth to download and CPU to decode. As a rough guide:

* Each incoming video stream requires approximately **75 kbps downstream**
* A participant's total upstream is only **\~200 kbps**, regardless of how many others are on the call (thanks to the SFU)
* So a 10-person call needs roughly 200 kbps up and 750 kbps down per participant
* Most modern laptops handle 30 simultaneous streams; older devices and mobile clients start to struggle around 12

Daily continuously adapts to network conditions — probing bandwidth, adjusting bitrates, and tuning resolution and frame rate in real time. But there's a floor below which the experience degrades regardless of adaptation.

As a developer, the most impactful thing you can do is limit how many streams each participant needs to decode at once. Track subscriptions, pagination, and [simulcast layer control](/docs/guides/scaling-calls/best-practices-to-scale-large-experiences#simulcast-layer-control) are the main tools for this.

## Summary

* **WebRTC** handles encryption, adaptive bitrate, and real-time media transport — Daily builds on it so you don't have to.
* **Daily defaults to SFU** for all calls. The mesh SFU connects participants to nearby servers and routes traffic over backbone networks, giving better latency than P2P for most real-world calls.
* **P2P** is an option for 1:1 calls where participants are geographically close and E2E encryption is needed.
* **Track subscriptions** let you control exactly which streams each participant receives — essential for calls with more than a handful of participants.
* **Bandwidth and CPU are finite.** The fewer streams a participant has to decode, the better their experience. Design your UI with this in mind.


# Daily call quality logging and metrics
Source: https://docs.daily.co/docs/guides/architecture-and-monitoring/logging-and-metrics

Learn how to use Daily's call quality logs and metrics to understand and diagnose call quality issues.

At Daily, we want to give all of our users as much information as possible about their calls, allowing users to gain a better understanding of call quality without intruding on call participants' privacy. And even though we don't save or record any audio and video (unless you [want us to](/docs/guides/features/recording/index)), calls can still generate a lot of metadata!

This guide will help support teams know what to look for when a participant reports a bad call experience. It covers what to look out for when reading through Daily call logs.

## What is call quality?

At Daily, we define call quality as *the user's perception of how good or bad a call was.* In particular, a good quality call is one where a user does not perceive any issues in sending or receiving audio and video to/from others in a call.

This sounds simple, but user-perceived issues often depend on external factors like network issues, device capabilities, user error, and confusing UI. For example, a user may report not being able to hear others in a call. This could be because the sound output was muted or it could have been an issue with receiving the audio streams.

This guide will primarily focus on reading the logs and metrics to determine if issues were due to network or CPU concerns.

## What causes call quality issues?

The two most common constraints are:

* Bandwidth and network congestion
* CPU load on participant's machine

### Bandwidth and network constraints

Some common network issues include:

* Poor WiFi or cellular connections
* Internet router constraints
* Network congestion (such as other applications sending or receiving a lot of bandwidth at the same time as the video call)
* VPNs and corporate firewalls

### CPU load on a participant's machine

Diagnosing CPU issues is less exact than diagnosing network issues. Browsers don't expose CPU usage directly to web applications, so Daily infers CPU pressure indirectly — primarily from encoding and decoding frame rates. This means the signals available reflect how WebRTC media processing is performing, not the full picture of what's happening on the device. Other applications or browser tabs consuming CPU can degrade call quality without showing up in these signals.

### Technical aside

We rely on web browsers to convey any information about the participant's technical setup and configuration. We can then make some assumptions based on the data we are getting back. Browsers do not implement the [WebRTC standard](https://www.w3.org/TR/webrtc/) equally, and not all browsers consistently convey accurate information.

## Logs and Metrics

Daily collects and stores events from a call (these are the logs) and gathers statistics about tracks as they change over time (these are the metrics).

Call logs detail what happens in a call from the point of view of each participant. These logs include information about signaling connections, participant connections and events, participants' environments and their actions, and error states.

Call metrics help to characterize the performance and stability of the connection by providing statistics about each track and transport layer for every participant and their connections. Daily visualizes this information in the [Daily Dashboard](https://dashboard.daily.co/) for each user of each session.

## Logs

Below are some significant log messages to look out for. If your user can also include timestamps with their complaint, this can significantly cut down on the time spent searching in logs.

### `[Track]-videoQualityLimReason=[Value]`

This video quality limitation reason message can be triggered by a variety of network conditions or CPU issues and can give some clues about what might have caused the low video resolution during a call.

The above log line will look something like this: `cam-video-videoQualityLimReason=bandwidth`. The Track will be the specific video that is being limited and the Value is the reason why the limitation was implemented. This reason is implemented by the participant's browser, not by Daily. You can dig into the details by looking at the [WebRTC stats specification](https://www.w3.org/TR/webrtc-stats/#dom-rtcoutboundrtpstreamstats-qualitylimitationreason).

When the browser is encoding the video a participant is sending out, it may need to temporarily reduce the quality below what has been requested. The value of this log line will describe the reason for the limit. The only options are `bandwidth`, `cpu` or `other`. If the issue has been resolved and the browser is announcing that it is returning the video to full expected quality, there will be a log line where the `videoQualityLimReason` will be `none`.

When the quality limitation is CPU, this is the only time when we directly receive information from the browser that there are detected CPU constraints. CPU limitations can still negatively impact call quality in ways that manifest without this message.

### `[Track]-videoSendFrame=[Value]` and `[Track]-HighestVideoSendFrameSize=[Value]`

These log messages give us insight into what the participant's browser is doing to adjust the participant's video resolution. This adjustment is determined by the browser and made in response to various conditions described above, such as bandwidth or CPU issues. These log events are generated anytime the video resolution changes.

The participant's browser (not Daily) implements these constraints, as defined by the [RTCInboundRtpStreamStats specification](https://www.w3.org/TR/webrtc-stats/#dom-rtcinboundrtpstreamstats-framewidth). This adjustment by the browser is only supported on Chrome and Chromium-based applications (Microsoft Edge, Electron).

As an example, a call where our servers are sending 3 simulcast cam-video Tracks with the following resolutions:

* High (1280x720)
* Mid (640x360)
* Low (320x180)

Our logs will show:

* `cam-video-videoSendFrame=1280x720`
* `cam-video-2-videoSendFrame=640x360`
* `cam-video-3-videoSendFrame=320x180`
* `cam-video-HighestVideoSendFrameSize=1280x720`

This above example represents a normal and expected call. In this, the log `cam-video-HighestVideoSendFrameSize` represents the highest video resolution that is being sent at that time. If the `HighestVideoSendFrameSize` is less than the highest `videoSendFrame`, there is probably an issue. Look for the above log lines around `videoQualityLimReason` prior to this log for insight into what might be causing the browser to send frames that are smaller than what you requested.

### `Connection downlink = [Value]`

At the very beginning of the call, we log data sent from the participant's browser. The `Connection downlink = [Value]` log line can indicate that the browser is conveying poor network measurements at the beginning of the call when this value is less than 10.

Note that 10 is also the maximum possible number for this value. Any number below this cap of 10 is strongly indicative of network issues that will impact the user.

This value is pulled from the NetworkInformation API's [downlink](https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation/downlink) property and the number represents the bandwidth estimated at the beginning of the call in megabits per second (Mbps). We recommend keeping the receiving bitrate of calls to under 3 Mbps. If a connection downlink of less than 3 is reported, they will likely have a hard time even joining the call, and won't have a good experience if they do manage to connect.

Note that this log captures only the download speed and does not include upload speeds. If your users run a speed test on their machine, their upload rates are likely far worse than their download rates. So if the download rate reported here is low, their upload rate is probably even lower.

Note that this is only supported on Chrome and Chromium-based applications (Microsoft Edge, Electron).

### `videoEncoderImpl=ExternalEncoder`

This could point the blame at the participant's operating system and possibly hardware acceleration (either at the OS level or the browser level, configurable in Chrome). We have seen this cause some problems with encoding, ranging from keyframe issues to black frames.

We want to see the `videoEncoderImpl` value as pretty much anything else, such as a known encoder value like `libvpx`. Even something more complex like `SimulcastEncoderAdapter (libvpx, libvpx, libvpx)` is fine.

### `[beta] cpu load state change`

This log is emitted when Daily detects a change in the participant's CPU load state:

```
[beta] cpu load state change: previous: <previousState>; current: <cpuLoadState>; reason: <cpuLoadStateReason>
```

The state is either `high` or `low`. The reason describes what triggered the change:

* **`encode`**: the encoder is struggling to keep up with the target frame rate — the participant's CPU is under pressure from encoding outbound video.
* **`decode`**: the decoder is struggling to keep up with incoming video streams — the participant's CPU is under pressure from decoding inbound video.
* **`scheduleDuration`**: Daily's internal scheduler is running significantly behind schedule, indicating general CPU pressure on the device regardless of encoding or decoding activity.
* **`none`**: CPU load has returned to normal.

CPU load state is determined by comparing actual encoding and decoding frame rates against their targets. A `high` state requires several consecutive high readings before being reported, to avoid false positives from momentary spikes.

### Miscellaneous CPU warning signs

There are cases when a `network-connection` turns to `interrupted` not because of a network issue, but because of an overloaded CPU. This can result in erratic logging and create `wss is stale` logs. Seeing a `network-connection` state move to interrupted repeatedly over a short period of time could be an indication of networking issues or CPU issues. If all other indicators point to the actual network performing well, the issue could be CPU-based. Look for any other indicators that CPU is to blame, like those outlined above.

### Network disruptions

You can look for log lines that mention `wss is stale` and `network-connection` interrupted events. These indicate that a connection between the Daily client (embedded within your app) and our signaling server has been temporarily broken and our code is working towards remedying that severed connection. If and when the client and server are reconnected, any missed messages are redelivered, but it can still cause some gaps and a poor call quality experience.

If paired with a message that reads `recv/send transport changed to disconnected`, the user experience is more jarring because it means the user had a complete disconnect (from both UDP and WebSocket). When this happens, we reconnect all media connections. A disconnect on just one or the other could go undetected depending on how long the connections were disconnected. Transport disconnects (UDP) oftentimes reconnect almost instantaneously.

### `unexpected server time offset change (ms) = [Value]`

The value here could be a negative or positive number. If this line is in the logs and the value is significantly negative (that is, a negative number larger than a couple hundred milliseconds), it can indicate an unexpected delay between the device sending data and when our servers receive that data. Look for a report logging any number greater than 1 second (1000 ms).

This log line can help build the case that there is an issue, but is harder to rely on as a sole indicator of poor call performance due to bandwidth or device constraints. It is possible that the clock on the device is not perfectly in sync with global time and is not an accurate measurement.

This log message is only logged once, at the beginning of the call, so it is possible that the issue will correct itself or get worse as the call goes on. If your user is having issues for the entire duration of their call, this could be one to look for. But if your user starts off having a great call that suddenly experiences trouble 15 minutes into the call, this line will not provide much insight.

### `deviceMemory=[Value]`

Chrome browsers will announce the estimated [device memory](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/deviceMemory) of the device they are on. This value will be a floating point number, representing the estimated amount of gigabytes capacity on the device. If this number is `2` or below, the device may not have a suitable amount of RAM to have good quality calls, especially if there are other programs running on the machine or other interactive elements in the application that can cause the device to struggle with memory management.

The maximum value for `deviceMemory` is `8`.

## Metrics

In addition to the verbose logs we provide about events happening during a call, we also calculate metrics collected from WebRTC stats for deeper insights into call experience (and make them available in the [Daily Dashboard](https://dashboard.daily.co/)). Below are a few things to keep an eye out for when looking at the metrics charts or if building your own.

### High average bits per second

A high average sending or receiving bitrate can indicate that the participant is receiving more data than their network can handle. We recommend that the overall bandwidth of the call stays under 3Mbps (three million bits per second). Short spikes are okay, but look for any sustained heavy data. Meetings that are heavy on screen sharing can especially have large, lingering bursts of data and participants' networks may struggle to keep up.

### Packet loss

Take a look at the packet loss metrics to determine if there was high and continuous packet loss for the participant. Sustained continuous packet loss could mean the network was always struggling to send and receive data. A short burst in packet loss could mean that something momentarily went wrong in the network. Calls should be able to fully recover from short bursts of packet loss.

### `framesEncodedPerSec`

Look for `framesEncodedPerSec` inside `outbound-cam-video-XX` track for this user. A low value could represent the encoder on the user's device struggling to encode video bytes.

## Next steps

### When to reach out

You can [reach out to us](https://www.daily.co/contact) at any time for help understanding your call quality. First, visit [our status page](https://status.daily.co/) to determine if there is a known outage or issue, especially if you are seeing recurring problems with multiple calls over a short period of time.

### Beyond analysis

Engineers working to integrate Daily can listen for two events that signal degraded conditions in real time:

* [`network-quality-change`](/reference/daily-js/events/network-events#network-quality-change) fires when Daily detects a change in network quality. Use it to adapt the experience for participants with poor connections — for example, by reducing the number of subscribed video streams.
* [`cpu-load-change`](/reference/daily-js/events/network-events#cpu-load-change) fires when Daily detects a change in the local participant's CPU load state (`high` or `low`), along with a reason (`encode`, `decode`, or `scheduleDuration`). Use it to reduce decoding load — for example, by unsubscribing from non-essential video tracks or lowering requested simulcast layers — when the participant's device is struggling.

You can also check out the [best practices guide for scaling large experiences](/docs/guides/scaling-calls/best-practices-to-scale-large-experiences) for guidance on optimizing send and receive video quality.


# Build audio-only experiences with Daily
Source: https://docs.daily.co/docs/guides/features/audio-only

Learn how to build voice-first and voice-only applications with Daily, including best practices and common feature patterns.

## Audio-only pricing

Accounts are automatically billed at the lower audio-only rate when no video tracks are present in a call. See our [pricing page](https://www.daily.co/pricing) for details.

<Note>
  If even one participant has an active video track at any point, the call will be billed as a video call.
</Note>

## Set up an audio-only room

The best way to enforce an audio-only experience is to configure room-level permissions to allow audio only. This way, even if a participant tries to turn on their camera, it won't work.

```bash theme={null}
curl --request POST \
     --url https://api.daily.co/v1/rooms \
     --header 'Authorization: Bearer DAILY_API_KEY' \
     --header 'Content-Type: application/json' \
     --data '{"properties": {"permissions": {"canSend": ["audio"]}}}'
```

Note that screen sharing is also blocked by this configuration, since screen captures are treated as video tracks.

## Best practices for audio quality

<Tip>
  These recommendations apply to working with audio in general, not just audio-only applications.
</Tip>

### Decouple `<audio>` elements from visual components

When `<audio>` tags are tied to visual elements (like an avatar), audio stops playing when the element scrolls out of view. Render `<audio>` elements separately from visual components:

```javascript theme={null}
return (
  <>
    <Container>
      <Header>Speakers</Header>
      {speakerTiles}
      <Header>Listeners</Header>
      {listenerTiles}
    </Container>
    <Audio participants={participants} />
  </>
);
```

### Offload expensive processing to an AudioWorklet

An [AudioWorklet](https://developer.mozilla.org/en-US/docs/Web/API/AudioWorklet) executes custom audio processing in a separate thread for low-latency processing. Daily Prebuilt uses this approach to detect microphone audio.

## Managing larger calls

For calls with more than \~5 participants, you need to actively manage audio to keep the experience usable. There are two complementary approaches: **receive-side** (limit which tracks each participant subscribes to) and **send-side** (limit who can unmute and speak).

### Receive-side: subscribe to active speakers only

By default, Daily subscribes every participant to every other participant's tracks. In a large audio-only call with many unmuted participants, this creates a cacophony of background noise and wastes bandwidth.

Disable automatic subscriptions and manage them manually:

```javascript theme={null}
const call = Daily.createCallObject({
  subscribeToTracksAutomatically: false,
});
```

Then subscribe only to the most recent active speakers using the [`active-speaker-change`](/reference/daily-js/events/participant-events#active-speaker-change) event:

```javascript theme={null}
const MAX_SPEAKERS = 5;
const activeSpeakers = [];

call.on('active-speaker-change', (event) => {
  const id = event.activeSpeaker?.peerId;
  if (activeSpeakers.includes(id)) return;

  call.updateParticipant(id, { setSubscribedTracks: { audio: true } });
  activeSpeakers.unshift(id);

  if (activeSpeakers.length > MAX_SPEAKERS) {
    const removed = activeSpeakers.pop();
    call.updateParticipant(removed, { setSubscribedTracks: { audio: false } });
  }
});
```

For more details, see the [track subscriptions guide](/docs/guides/scaling-calls/best-practices-to-scale-large-experiences#track-subscriptions).

If you're using Daily React, this behavior is built into the [`DailyAudio` component](/reference/daily-react/daily-audio):

```jsx theme={null}
import { DailyAudio } from '@daily-co/daily-react';

function CallComponent() {
  return <DailyAudio maxSpeakers={5} />;
}
```

### Send-side: control who can speak

For moderated experiences — webinars, Q\&As, stage-based calls — you'll want to limit how many participants can unmute at once. There are two approaches depending on whether participants should start muted or be promoted dynamically.

#### Start all participants as listeners

Set `canSend` to `False` at the room level so participants join as listeners by default, then grant audio permission individually:

```bash theme={null}
# Room where all participants join as listeners
curl --request POST \
     --url https://api.daily.co/v1/rooms \
     --header 'Authorization: Bearer DAILY_API_KEY' \
     --header 'Content-Type: application/json' \
     --data '{"properties": {"permissions": {"canSend": false}}}'
```

An owner can then promote a participant to speaker by calling [`updateParticipant()`](/reference/daily-js/instance-methods/update-participant) with updated permissions:

```javascript theme={null}
// Grant audio send permission to a specific participant
call.updateParticipant(participantSessionId, {
  updatePermissions: {
    canSend: new Set(['audio']),
  },
});

// Revoke it (mute them server-side)
call.updateParticipant(participantSessionId, {
  updatePermissions: {
    canSend: False,
  },
});
```

<Note>
  `updateParticipant()` with `updatePermissions` requires the caller to have `canAdmin: ['participants']` permission (i.e. they must be an owner or have been granted admin rights).
</Note>

#### Hand raising

Rather than polling or using app messages, use [`setUserData()`](/reference/daily-js/instance-methods/set-user-data) to broadcast raise/lower hand state. Each participant controls their own `userData`, and changes propagate to all participants via `participant-updated` events:

```javascript theme={null}
// Participant raises their hand
call.setUserData({ handRaised: true });

// Participant lowers their hand
call.setUserData({ handRaised: false });
```

Listen for `participant-updated` to update your UI when any participant's hand state changes:

```javascript theme={null}
call.on('participant-updated', (event) => {
  const { participant } = event;
  if (participant.userData?.handRaised) {
    // show raised hand indicator for this participant
  }
});
```

An owner can then call `updateParticipant()` to grant the raised-hand participant `canSend: ['audio']`.

## Analyze performance issues

Audio-only calls require relatively low bandwidth and CPU compared to video calls. If you see CPU or stale WebSocket issues, check for other causes — complex CSS animations can have a noticeable impact.

* Use the [`/logs` endpoint](/reference/rest-api/logs) after a session to analyze data.
* Use [`getNetworkStats()`](/reference/daily-js/instance-methods/get-network-stats) to get live audio bitrates and packet loss during a call.


# SIP and PSTN dial-in/dial-out
Source: https://docs.daily.co/docs/guides/features/dial-in-dial-out/index

Add phone and SIP connectivity to Daily rooms — dial-in with a PIN, pinless dial-in via webhook, SIP video, dial-out, DTMF, and call transfers.

Daily supports connecting standard phone and SIP participants to video calls, enabling telephony integration for contact centers, conferencing, and voice bot applications.

## Prerequisites

* **Paid Daily account** — add a credit card in the [dashboard](https://dashboard.daily.co/billing).
* **Dial-out approval** — fill out the [dial-out request form](https://forms.gle/Q5eaHLEosuKyzC7BA) to avoid fraud and misuse. Once approved, set `enable_dialout` on your rooms.
* Default limit: `max_sip_pstn_sessions_per_room = 5`. Contact [support](mailto:help@daily.co) to increase this.

<Note>
  We've removed the requirement for a paid-support plan for SIP and PSTN dial-in, it is now available for all pay-as-you-go accounts. You just need to have a credit card associated to your domain.
</Note>

## SIP

Daily supports SIP dial-in and SIP dial-out with the following codecs:

* **Audio:** PCMU, PCMA, G722, Opus (default: PCMU/PCMA)
* **Video:** H264, VP8 (default: VP8)

If a codec is not supported by the remote party, Daily transcodes the stream (transcoding charges apply — see [pricing](https://www.daily.co/pricing)).

Tested with CPaaS vendors (Twilio, Telnyx, SignalWire) and SIP hardware phones (Poly, Cisco).

For full SIP setup details, see the [SIP guide](/docs/guides/features/dial-in-dial-out/sip).

## PSTN phone numbers

### Global dial-in numbers

You can receive PSTN calls without purchasing a phone number. Daily provides global dial-in numbers in 27 countries. Each room gets a unique 11-digit PIN code, generated at room creation and deleted when the room expires.

Free tier includes US and Canada:

* US: +1 (209) 503-8039
* CA: +1 (226) 807-8039

Access to the other 25 countries (including all major European countries, Japan, Singapore, Malaysia, India, China, Hong Kong, Brazil, Mexico) requires a paid support plan. See [this page](./pstn-international-dialin) for the full list of countries and numbers.

### Purchasing phone numbers

Daily's REST API supports [purchasing phone numbers](/reference/rest-api/phone-numbers/buy-number) in the US and Canada (+1). A single number can handle hundreds of simultaneous calls.

A purchased number can can be used for PSTN dialout. However, a number can only be assigned to either PIN dial-in or pinless dial-in, but not both.

## PSTN dial-in methods

Daily supports two PSTN dial-in flows:

* **[PIN dial-in](/docs/guides/features/dial-in-dial-out/pstn-pin-dialin)** — callers dial a phone number and enter a room-specific PIN code.
* **[SIP Interconnect and Pinless dial-in](/docs/guides/features/dial-in-dial-out/sip-interconnect-pinless)** — incoming calls trigger a webhook where you can define logic to route the call to a Daily room without requiring a PIN.

## PSTN dial-out

<Note>
  Dial-out checklist ([once your account is approved](https://forms.gle/Q5eaHLEosuKyzC7BA)):

  1. [Purchase a phone number](/reference/rest-api/phone-numbers/buy-number) (skip if dialing a SIP URI)
  2. [Enable dial-out](/reference/rest-api/rooms/create-room#body-properties-enable-dialout) on the room
  3. Join the room with an [owner token](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties-is-owner)
  4. Dial US/Canada (+1) numbers in [E.164 format](https://en.wikipedia.org/wiki/E.164) (e.g., +16505551212). For international dial-out, contact [help@daily.co](mailto:help@daily.co).
</Note>

Dial out to a mobile or PSTN phone number from within a Daily room:

* [`startDialOut()`](/reference/daily-js/instance-methods/start-dial-out) in daily-js
* [`/rooms/:name/dialOut/start`](/reference/rest-api/rooms/dial-out/start) via REST API

## DTMF tones

Send DTMF (touch-tone) signals during a call — commonly used for IVR interactions:

* [`sendDTMF()`](/reference/daily-js/instance-methods/send-dtmf) in daily-js
* [`/rooms/:name/dialOut/sendDTMF`](/reference/rest-api/rooms/dial-out/send-dtmf) via REST API

On a dial-out call, Daily can signal DTMF two ways:

* **RTP telephone events** per [RFC 2833](https://datatracker.ietf.org/doc/html/rfc2833)/[RFC 4733](https://datatracker.ietf.org/doc/html/rfc4733). This method works with almost every endpoint.
* **SIP INFO** requests that carry an `application/dtmf-relay` body with `Signal` and `Duration` fields.

With the default `method: 'auto'`, Daily uses SIP INFO when the remote SIP peer lists `INFO` in the `Allow` header of its answer. If it does not, Daily uses RTP telephone events. Nothing else changes that choice. If you ask for `method: 'sip-info'` and the far end does not allow `INFO`, the request returns an error.

Receiving DTMF from a PSTN/SIP connection into a Daily room is not yet supported.

<Note>
  **Sending more than one tone**

  When you send several tones in a single request over SIP INFO, Daily waits a fixed 100ms between tones. You cannot change that gap. `digitDurationMs` sets the digit duration that Daily signals to the far end. It does not set the gap between tones.

  There is no queueing or ordering guarantee **across** separate requests, so two that overlap can interleave their tones.

  Pass the whole sequence in one request when you can, for example `tones: '1234#'`. If you have to send digits one at a time, wait for each request to finish before starting the next one and add your own pacing between them.
</Note>

## Call transfers

Daily provides two transfer methods. Both methods maintain the original SIP/PSTN connection, meaning the initial caller's connection does not disconnect during the transfer:

* **[SIP Call Transfer](/docs/guides/features/dial-in-dial-out/transfers)** — keeps the original SIP leg anchored to Daily and redirects the far end to a new SIP or PSTN destination. Both connections remain active and billable.
* **[SIP REFER](/docs/guides/features/dial-in-dial-out/transfers)** — hands the call off to the originating SIP system. Daily exits the call entirely. A one-time SIP REFER fee may apply.


# PSTN dial-in with a PIN code
Source: https://docs.daily.co/docs/guides/features/dial-in-dial-out/pstn-pin-dialin

Let participants join a Daily room by dialing a phone number and entering a room-specific PIN code.

With PIN dial-in, phone participants dial a shared phone number and enter a room-specific PIN code to join. The PIN is unique to each room and generated automatically at room creation.

## Create a room with PIN dial-in

Add the `dialin` property when [creating](/reference/rest-api/rooms/create-room) or [updating](/reference/rest-api/rooms/update-room) a room:

```bash theme={null}
curl --request POST \
  --url https://api.daily.co/v1/rooms/your-room-name \
  --header 'Authorization: Bearer $DAILY_API_KEY' \
  --header 'Content-Type: application/json' \
  --data '{
    "properties": {
      "dialin": {
        "display_name": "Phone Caller",
        "wait_for_meeting_start": true
      },
      "exp": 1700016686
    }
  }'
```

**`dialin` properties:**

* `display_name` — name shown for the PSTN participant in the call.
* `wait_for_meeting_start` — if `true`, the caller hears hold music until a meeting participant joins; if `false`, the call disconnects if no one is present.
* `room_numbers` — optional array of purchased phone numbers to use for this room (e.g., `[{"phone_number": "+12095038039"}]`). Defaults to the earliest purchased number on your account. [See below](#assign-a-purchased-number-to-pin-dial-in) for details on assigning purchased numbers to PIN dial-in.

<Warning>
  All PSTN-enabled rooms must have an [expiry (`exp`)](/reference/rest-api/rooms/create-room#body-properties-exp) of less than 365 days. If using an owner token, we also recommend setting [`eject_at_room_exp`](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties-eject-at-token-exp).
</Warning>

The API response includes a `dialin_code` — the room's unique PIN:

```json theme={null}
{
  "config": {
    "dialin": {
      "display_name": "Phone Caller"
    },
    "dialin_code": "12345678987"
  }
}
```

## How callers join

Share the phone number and PIN with participants. For a frictionless experience, provide the full dial string with pauses (`,,`) so the phone automatically enters the PIN after connecting:

```
+12095038039,,12345678987
```

The `,,` instructs the dialer to pause before sending the PIN digits, so callers don't have to manually type the PIN.

## Assign a purchased number to PIN dial-in

If you've purchased a phone number and want to use it for the PIN flow, configure it at the domain level:

```bash theme={null}
curl --request POST \
  --url https://api.daily.co/v1/ \
  --header 'Authorization: Bearer $DAILY_API_KEY' \
  --header 'Content-Type: application/json' \
  --data '{
    "properties": {
      "pin_dialin": [{
        "phone_number": "+12095038039",
        "name_prefix": "pin-dialin",
        "ivr_greeting": {
          "message": "Welcome to the Daily meeting room. Please enter your dial-in PIN."
        }
      }]
    }
  }'
```

See the [`pin_dialin` domain configuration reference](/reference/rest-api/domain/set-domain-config#body-properties-pinless-dialin) for full details.

## Global dial-in numbers

If you don't purchase a phone number, Daily provides global dial-in numbers in 27 countries. Free tier includes US and Canada. See the [overview](/docs/guides/features/dial-in-dial-out/index#global-dial-in-numbers) for more information.


# SIP dial-in and dial-out
Source: https://docs.daily.co/docs/guides/features/dial-in-dial-out/sip

Configure SIP audio and video dial-in and dial-out for Daily rooms, including multiple SIP endpoints and dynamic display names.

Daily supports both SIP dial-in and SIP dial-out. See the [overview](/docs/guides/features/dial-in-dial-out) for prerequisites and codec information.

## SIP dial-in (audio only)

### Single SIP endpoint

Set the `sip` [room property](/reference/rest-api/rooms/update-room#body-properties-sip) to enable SIP dial-in:

```bash theme={null}
curl --request POST \
  --url https://api.daily.co/v1/rooms/your-room-name \
  --header 'Authorization: Bearer $DAILY_API_KEY' \
  --header 'Content-Type: application/json' \
  --data '{"properties": {"sip": {"sip_mode": "dial-in", "display_name": "SIP Participant"}}}'
```

The response includes [a read-only `sip_uri.endpoint`](/reference/rest-api/rooms/get-room#response-config-sip-uri) — the SIP address your client dials:

```json theme={null}
{
  "config": {
    "sip_uri": {
      "endpoint": "sip:123456780@example.sip.daily.co"
    },
    "sip": {
      "sip_mode": "dial-in",
      "display_name": "SIP Participant"
    }
  }
}
```

Set `sip` to `null` to disable SIP on a room.

### Multiple SIP endpoints

Use `num_endpoints` to provision multiple SIP dial-in addresses. Each SIP and PSTN connection counts toward the `max_sip_pstn_sessions_per_room` limit (default: 5).

```bash theme={null}
curl --request POST \
  --url https://api.daily.co/v1/rooms/your-room-name \
  --header 'Authorization: Bearer $DAILY_API_KEY' \
  --header 'Content-Type: application/json' \
  --data '{"properties": {"sip": {"sip_mode": "dial-in", "display_name": "SIP Participant", "num_endpoints": 2}}}'
```

The response includes `sip_uri.extra_endpoints` with additional SIP addresses:

```json theme={null}
{
  "config": {
    "sip_uri": {
      "endpoint": "sip:123456780@example.sip.daily.co",
      "extra_endpoints": ["sip:abcdefg@example.sip.daily.co"]
    }
  }
}
```

## SIP dial-in (audio and video)

Set `video: true` to enable video SIP dial-in. You can also specify codecs explicitly:

```bash theme={null}
curl --request POST \
  --url https://api.daily.co/v1/rooms/your-room-name \
  --header 'Authorization: Bearer $DAILY_API_KEY' \
  --header 'Content-Type: application/json' \
  --data '{
    "properties": {
      "sip": {
        "display_name": "sip-user",
        "sip_mode": "dial-in",
        "video": true,
        "codecs": {
          "audio": ["OPUS"],
          "video": ["H264"]
        }
      }
    }
  }'
```

If the remote party doesn't support the specified codec, Daily transcodes the stream (transcoding charges apply). See our [pricing page](https://www.daily.co/pricing/) for details.

## Dynamic display names

`display_name` is set at room creation time. To pass a name at dial time instead, append it as a URL-encoded query parameter on the SIP URI:

```
sip:123456780@example.sip.daily.co?x-daily_display_name=my%20user%20name
```

Use [`encodeURIComponent`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent) to encode the name. If `x-daily_display_name` is not passed, the room-level `display_name` is used.

## Testing SIP dial-in

Below describes the SIP dial-in flow for a room with one SIP endpoint. For multiple endpoints, the flow is the same but with additional `dialin-ready` events and SIP URIs.

1. A session starts and the SIP worker registers with the SIP network.
2. The [`dialin-ready`](/reference/daily-js/events/telephony-events#dialin-ready) event fires for each registered SIP URI.
3. After `dialin-ready`, your SIP client dials the `sip_uri.endpoint`.

**Notes:**

* Each `sip_uri` endpoint can only be used by one SIP client at a time.
* After a disconnect, the same `sip_uri` can be redialed.
* When the Daily session ends, all SIP connections are terminated.

## SIP dial-out

A Daily room can dialout to a one or more `"sipUri"`. You can initiate dial-out from the client SDK or REST API. See the [overview](/docs/guides/features/dial-in-dial-out) for details on dial-out prerequisites and supported codecs.

**Dial out audio-only:**

```bash theme={null}
curl -H "Content-Type: application/json" \
  -H "Authorization: Bearer $DAILY_API_KEY" \
  -XPOST -d '{"sipUri": "sip:user@example.calls.webex.com"}' \
  https://api.daily.co/v1/rooms/$ROOM_NAME/dialOut/start
```

**Dial out with video enabled:**

```bash theme={null}
curl -H "Content-Type: application/json" \
  -H "Authorization: Bearer $DAILY_API_KEY" \
  -XPOST -d '{"sipUri": "sip:user@example.calls.webex.com", "video": true, "codecs": {"audio": ["OPUS"], "video": ["H264"]}}' \
  https://api.daily.co/v1/rooms/$ROOM_NAME/dialOut/start
```

SIP URIs must be prefixed with `sip:`. You can also use [`startDialOut()`](/reference/daily-js/instance-methods/start-dial-out) from the client SDK.

## Call transfers

For transferring SIP calls to another room or external SIP/PSTN endpoint, see the [transfers guide](/docs/guides/features/dial-in-dial-out/transfers).


# SIP Interconnect and Pinless PSTN dial-in
Source: https://docs.daily.co/docs/guides/features/dial-in-dial-out/sip-interconnect-pinless

Route incoming phone and SIP calls to Daily rooms via webhook, without requiring callers to enter a PIN code.

Pinless dial-in and SIP Interconnect allow incoming calls to trigger a webhook on your infrastructure, which then routes the call to a Daily room — no PIN required from the caller.

This pattern is common in contact centers, voice bots, and IVR flows where the destination room isn't known at call time.

## How it works

1. A caller dials your purchased phone number or a static SIP URI.
2. Daily places the caller on hold (hold music plays).
3. Daily sends a webhook to your configured [`room_creation_api`](/reference/rest-api/domain/set-domain-config#body-properties-pinless-dialin-items-room-creation-api) URL.
4. Your server creates or selects a Daily room and waits for [`dialin-ready`](/reference/daily-js/events/telephony-events#dialin-ready) to fire.
5. Your server calls [`pinlessCallUpdate`](/reference/rest-api/dial-in/pinless-update) with the room's `sip_uri` to connect the held caller.

## Configure pinless dial-in

[Configure your domain](/reference/rest-api/domain/set-domain-config#body-properties-pinless-dialin) with a `pinless_dialin` array. Each object represents one incoming number or SIP interconnect:

```bash theme={null}
curl --request POST \
  --url https://api.daily.co/v1/ \
  --header 'Authorization: Bearer $DAILY_API_KEY' \
  --header 'Content-Type: application/json' \
  --data '{
    "properties": {
      "pinless_dialin": [
        {
          "phone_number": "$PURCHASED_NUMBER",
          "room_creation_api": "$WEBHOOK_URL",
          "name_prefix": "my-pinless-phone",
          "hmac": "base64-encoded-secret",
          "hold_music_url": "https://example.com/hold.mp3",
          "timeout_config": {
            "message": "Agent not available. Please call later."
          }
        },
        {
          "room_creation_api": "$WEBHOOK_URL",
          "name_prefix": "sip-interconnect"
        }
      ]
    }
  }'
```

You can omit `phone_number` for SIP Interconnect (no phone number needed). Otherwise, `phone_number` is required and must be a number [purchased from Daily](/reference/rest-api/phone-numbers/index).

The response is the room's `config` object, including an array of `pinless_dialin` entries, each with a static `sip_uri` and the corresponding `room_creation_api` URL — the `sip_uri` is the address your SIP system dials for interconnect flows:

```json theme={null}
{
  "config": {
    "pinless_dialin": [
      {
        "sip_uri": "8a1f0c4e2b7d9351--1739943585193@daily-8a1f0c4e2b7d9351-pinless-sip.dapp.signalwire.com",
        "phone_number": "+12095038039",
        "room_creation_api": "https://webhook.example.com/create_room",
        "hmac": "base64-encoded-secret"
      },
      {
        "sip_uri": "8a1f0c4e2b7d9351--1739943585194@daily-8a1f0c4e2b7d9351-pinless-sip.dapp.signalwire.com",
        "room_creation_api": "https://webhook.example.com/handle_twilio",
        "hmac": "base64-encoded-secret"
      }
    ]
  }
}
```

<Warning>
  Daily generates each `sip_uri` for your domain. Copy the exact value from the API response and store it. Do not build the address by hand and do not change any part of it.

  Incoming calls are matched against the exact address Daily generated. If your SIP system dials an address you built yourself, or an edited version of the real one, the call will not match. Daily ends the call, your `room_creation_api` webhook never fires, and you see no sign of the call at all.
</Warning>

<Tip>
  When you configure `pinless_dialin`, Daily sends a test request to your `room_creation_api` endpoint with the body `{"test": "test"}`. This test request is sent every time you configure `pinless_dialin`, not only the first time. It only checks that your endpoint is reachable. Your endpoint is still configured even if it does not return a 200 response, so that existing domains that do not recognize the test body keep working.

  Do not use "my webhook was called" as proof that call routing works. The test request looks nothing like a real call. Only a real incoming call includes `callId` and `callDomain` in the body, so check for those two fields when you want to know whether a real call reached you.
</Tip>

## Incoming webhook payload

When a call arrives, Daily POSTs to your `room_creation_api`:

```json theme={null}
{
  "From": "+CALLERS_PHONE",
  "To": "$PURCHASED_PHONE",
  "callId": "a7bf8461-7d33-4083-9677-5cfdb4f337a5",
  "callDomain": "9c975848-a067-4de0-bf47-1b4179ceba4e",
  "sipHeaders": {
    "x-custom-header": "value"
  }
}
```

* `From`: caller's phone or SIP address
* `To`: your Daily phone number or static SIP URI
* `callId` + `callDomain`: use these to connect the held call to a Daily room. They are only sent for real calls, never for the config-time test request
* `sipHeaders`: custom SIP headers sent to the `sip_uri` (e.g., for external SIP systems forwarding caller context). For example, when you receive a call on your Avaya on-premise SIP server and need to send the caller phone and called phone, the `to` and `from` fields will already be the Avaya sip addresses. In that case, you can add custom sip headers prepended with an `x-`. This would be something like `8a1f0c4e2b7d9351--1739943585193@daily-8a1f0c4e2b7d9351-pinless-sip.dapp.signalwire.com?x-caller=7861230000&x-called=6501230000`.

## Verifying the webhook signature (HMAC)

Each `pinless_dialin` entry has an `hmac` — a Base64-encoded HMAC-SHA256 secret shared between Daily and your server. Use it to verify that the webhook came from Daily.

Daily includes two headers with each webhook request:

* `X-Pinless-Timestamp`
* `X-Pinless-Signature`

To verify:

```javascript theme={null}
// You'll need to save the hmac value the API returned when you created your webhook and insert it here
const hmacSecret = 'NQrSA5z0FkJ44QPrFerW7uCc5kdNLv3l2FDEKDanL1U=';
const signature = headers['X-Pinless-Timestamp'] + '.' + JSON.stringify(body);
const base64DecodedSecret = Buffer.from(hmacSecret, 'base64');
const hmac = crypto.createHmac('sha256', base64DecodedSecret);
const computedSignature = hmac.update(signature).digest('base64');
// computedSignature should match headers['X-Pinless-Signature']
```

You can provide your own Base64-encoded secret in the `hmac` field when configuring. If omitted, Daily generates a new one each time you update `pinless_dialin`.

<Warning>
  Keep your `hmac` secret private. Anyone with it can forge webhook requests.
</Warning>

## Connecting the held call to a Daily room

Once your webhook handler has created or selected a room:

1. Join the room with a Daily participant (e.g., a Pipecat bot or agent) so the room is active.
2. Wait for [`dialin-ready`](/reference/daily-js/events/telephony-events#dialin-ready) to fire.
3. Call [`pinlessCallUpdate`](/reference/rest-api/dial-in/pinless-update) with the room's `sip_uri` and the `callId`/`callDomain` from the webhook:

```bash theme={null}
curl --request POST \
  --url https://api.daily.co/v1/dialin/pinlessCallUpdate \
  --header 'Authorization: Bearer $DAILY_API_KEY' \
  --header 'Content-Type: application/json' \
  --data '{
    "callId": "a7bf8461-7d33-4083-9677-5cfdb4f337a5",
    "callDomain": "9c975848-a067-4de0-bf47-1b4179ceba4e",
    "sipUri": "sip:room-specific-id@example.sip.daily.co?x-daily_display_name=caller"
  }'
```

<Warning>
  Calling `pinlessCallUpdate` before `dialin-ready` fires may cause the call to drop.
</Warning>

Make sure the `sip_uri` you provide is not already in use by another SIP client. See [multiple SIP endpoints](/docs/guides/features/dial-in-dial-out/sip#multiple-sip-endpoints) for provisioning multiple endpoints per room.

For building voice bots with this pattern, see the [Pipecat dial-in docs](https://docs.pipecat.ai/pipecat/telephony/daily-pstn).


# SIP and PSTN call transfers
Source: https://docs.daily.co/docs/guides/features/dial-in-dial-out/transfers

Transfer SIP and PSTN calls between Daily rooms or to external destinations using SIP Call Transfer or SIP REFER.

Daily provides two methods for transferring SIP and PSTN calls:

* **PSTN and SIP Call Transfer** — redirects the far end of the call to a new SIP or PSTN destination while keeping the original SIP connection anchored to Daily.
* **SIP REFER** — hands the call off to the originating SIP system, removing Daily from the call entirely.

<Warning>
  **SIP Call Transfer**: Both the original and new connections stay active after the transfer. Usage is billed on both legs for the duration of the transferred call.
</Warning>

<Warning>
  **SIP REFER**: Daily exits the media path when the REFER succeeds. A one-time SIP REFER fee may apply. Contact [support](mailto:help@daily.co) for pricing.
</Warning>

## SIP Call Transfer

Use `sipCallTransfer` when you want to redirect a caller to another Daily room or external destination while Daily remains in the media path. This preserves session continuity, analytics, and room state.

Works for both dial-in and dial-out connections.

### Transfer scenarios

**1. Room-to-room transfer**

Alice is in Room A (via dial-in or dial-out). Transfer her to Room B:

```javascript theme={null}
await call.sipCallTransfer({
  sessionId: 'alice-session-id',
  toEndPoint: 'sip:room-b@domain.sip.daily.co',
});
```

Alice leaves Room A (`participant-left`, `dialin-stopped` / `dialout-stopped` fire) and joins Room B. Transfer webhooks (`triggered`, `initiated`, `answered`, `complete`) fire in Room A.

**2. External SIP transfer**

Transfer Alice to an external SIP endpoint:

```javascript theme={null}
await call.sipCallTransfer({
  sessionId: 'alice-session-id',
  toEndPoint: 'sip:callme@sip.somewhere.com',
});
```

Alice leaves Room A, but the call continues to route through Daily to the external destination.

**3. PSTN transfer**

Transfer Alice's phone call to another phone number:

```javascript theme={null}
await call.sipCallTransfer({
  sessionId: 'pstn-session-id',
  toEndPoint: '+123456xxx',
  callerID: '99ae8ddd-d32c-4786-9bb4-62235a4e7d55', // optional: ID of purchased number to use as caller ID
});
```

SIP-to-PSTN and PSTN-to-SIP cross-type transfers are supported. Billing depends on the connection types (e.g., two PSTN connections = two PSTN minutes per minute).

If no `callerID` is provided, Daily uses a phone number from your account. To present the original caller's number (number masquerading), contact [support](mailto:help@daily.co) — this feature requires account enablement.

## SIP REFER

Use `sipRefer` to fully hand off a call to an external SIP system, removing Daily from the call flow:

```javascript theme={null}
await call.sipRefer({
  sessionId: 'sip-session-id',
  toEndPoint: 'sip:external-ivr@sip.example.com',
});
```

When the REFER succeeds, the original SIP caller connects directly to the target. `participant-left` and `dialin-stopped` / `dialout-stopped` events fire in the Daily room, and transfer webhooks are emitted.

Common use cases:

* Returning a call to an IVR, PBX, or call-center platform
* Handing off between SIP providers without Daily staying in the loop

<Note>
  If the originating SIP system doesn't support SIP REFER, use `sipCallTransfer` instead. The call remains anchored to Daily and usage accrues during the transfer.
</Note>

## Choosing the right method

| Scenario                                                       | Method            |
| -------------------------------------------------------------- | ----------------- |
| Transfer caller between Daily rooms                            | `sipCallTransfer` |
| Transfer to external SIP/PSTN destination, Daily stays in path | `sipCallTransfer` |
| Hand call fully back to originating SIP system                 | `sipRefer`        |
| Add a new SIP/PSTN participant to the current room             | `startDialOut()`  |

## Implementation

**REST API:**

* [`/rooms/:name/callTransfer/sipCallTransfer`](/reference/rest-api/rooms/call-transfer/sip-call-transfer)
* [`/rooms/:name/callTransfer/sipRefer`](/reference/rest-api/rooms/call-transfer/sip-refer)

**Client SDK:**

* [`sipCallTransfer()`](/reference/daily-js/instance-methods/sip-call-transfer) — daily-js
* [`sipRefer()`](/reference/daily-js/instance-methods/sip-refer) — daily-js


# Streaming HLS with Daily
Source: https://docs.daily.co/docs/guides/features/live-streaming/hls

Learn how to configure HTTP Live Streaming (HLS) with Daily, including S3 storage and multi-bitrate output.

<Badge>Paid plans only</Badge>

<Tip>
  **Receive a \$15 credit for free**

  New accounts have a \$15 credit automatically applied when you add a credit card. See our [pricing page](https://www.daily.co/pricing) for details.
</Tip>

Daily supports HLS ([HTTP Live Streaming](https://www.streamingmedia.com/Articles/Editorial/What-Is-.../What-is-HLS-\(HTTP-Live-Streaming\)-78221.aspx)), a multi-bitrate adaptive streaming protocol. HLS allows viewers on cellular connections to receive a lower bitrate while viewers on high-speed connections receive higher quality.

The tradeoff is latency — expect roughly 12–20 seconds of delay vs. live. HLS is best when you want to host your own stream and control where the output is stored. If you want your audience to watch on YouTube, Twitch, or similar platforms, use Daily's [RTMP streaming](/docs/guides/features/live-streaming) instead.

## The HLS architecture at Daily

<img alt="HLS architecture" />

## Configure HLS

HLS is configured via the [`streaming_endpoints`](/reference/rest-api/rooms/update-room) room property. Here is an example of creating an HLS live stream configuration named `hls_s3`:

```json theme={null}
{
  "properties": {
    "streaming_endpoints": [
      {
        "name": "hls_s3",
        "type": "hls",
        "hls_config": {
          "save_hls_recording": true,
          "storage": {
            "bucket_name": "daily-hls-streams",
            "bucket_region": "us-west-2",
            "assume_role_arn": "arn:aws:iam::999999999999:role/DailyS3AccessRole",
            "path": "path-to/recordings"
          }
        }
      }
    ]
  }
}
```

**Properties:**

* `name`: the label that will be used in `daily-js` to reference a specific configuration
* `type`: either `rtmp` or `hls` for an RTMP and HLS configuration
* `rtmp_config`: the RTMP configuration details (when `type` is `rtmp`)
  * `url`: the RTMP url
* `hls_config`: the HLS configuration details (when `type` is `hls`)
  * `save_hls_recording`: `true` when you want to save the output of the live stream once the stream is finished; otherwise, `false`. This can be used as a replacement for cloud recording.
  * `variants`: specifies all the HLS variants to generate. Specified as array with following properties.
    * `width`: output width.
    * `height`: output height.
    * `fps`: output FPS.
    * `bitrate`: output bitrate in kilobits per second (kbps).
    * `iframe_only`: whether this is iframe-only variant.
  * `storage`: the storage details when `save_hls_recording` is set to `true`
    * `bucket_name`: the name of the S3 bucket where the HLS output will be stored
    * `bucket_region`: the AWS region of the S3 bucket (this is an S3 bucket that you own)
    * `assume_role_arn`: The Amazon Resource Name to assume in order to write to the S3 bucket
    * `path`: (deprecated, use path\_template) the S3 key path prefix for where to store the output HLS. The final master.m3u8 path template is `<bucket_name>/<path>/<mtgSessionId>/master.m3u8`.
    * `path_template`: define the template to derive the S3 key path prefix where HLS is stored.

For a complete list of the properties available on `streaming_endpoints`, check out the \[rooms configuration]\[http\://localhost:3000/reference/rest-api/rooms/update-room#body-properties-streaming-endpoints].

<Note>
  Daily only supports sending HLS output to your AWS S3 bucket. There is no support for storing HLS video within the Daily infrastructure. Check out our guide on [storing call recordings in a custom Amazon S3 bucket](/docs/guides/features/recording/custom-s3-storage).
</Note>

Use the [rooms API](/reference/rest-api/rooms/create-room) to set `streaming_endpoints` on your room:

```bash theme={null}
curl --request POST \
  --url https://api.daily.co/v1/rooms/my-room \
  --header 'Authorization: Bearer $DAILY_API_KEY' \
  --header 'Content-Type: application/json' \
  --data '{
    "properties": {
      "streaming_endpoints": [
        {
          "name": "hls_s3",
          "type": "hls",
          "hls_config": {
            "save_hls_recording": true,
            "variants": [
              { "width": 1920, "height": 1080, "fps": 30, "bitrate": 2500, "iframe_only": false },
              { "width": 1280, "height": 720, "fps": 30, "bitrate": 1500, "iframe_only": false },
              { "width": 640, "height": 360, "fps": 24, "bitrate": 700, "iframe_only": true }
            ],
            "storage": {
              "bucket_name": "daily-hls-streams",
              "bucket_region": "us-west-2",
              "assume_role_arn": "arn:aws:iam::999999999999:role/DailyS3AccessRole",
              "path": "path-to/recordings"
            }
          }
        }
      ]
    }
  }'
```

## The `save_hls_recording` parameter

HLS is a livestream, i.e. it is available for consumption soon after \[`startLiveStreaming()`]\[/reference/daily-js/instance-methods/start-live-streaming] call. This livestream can also be saved for later viewing with `save_hls_recording`.

* `true`: During the livestream, the m3u8 playlist is `[EVENT type playlist]` and segments are not deleted. At the end of streaming, the playlist is converted to `[VOD type playlist]`.
* `false`: During the livestream, new segments are appended to the m3u8 playlist and old segments are deleted from the playlist (as well as from S3). This keeps only the most recent 5 segments in the playlist at any point of time.

## Start an HLS stream

After configuring `streaming_endpoints`, start the stream with [`startLiveStreaming()`](/reference/daily-js/instance-methods/start-live-streaming):

```javascript theme={null}
await call.startLiveStreaming({
  endpoints: [{ endpoint: 'hls_s3' }],
});
```

`hls_s3` refers to the `name` of the endpoint defined in `streaming_endpoints`.

<Note>
  If you need HLS and cloud recording, or HLS and RTMP, in the same session, use [multiple instances](/docs/guides/features/live-streaming/multi-instance) with unique `instanceId` values. HLS cannot share an `instanceId` with RTMP or cloud recording.
</Note>

## Serve HLS to your audience

Daily writes HLS output to your S3 bucket. Serve it to viewers through a CDN (such as [Amazon CloudFront](https://aws.amazon.com/cloudfront/)) rather than directly from S3. This reduces security risk and ensures content is served from the closest edge location to each viewer. In order to reduce security risk, your S3 resources should implement a "\[least privilege access]\[[https://docs.aws.amazon.com/AmazonS3/latest/userguide/security-best-practices.html](https://docs.aws.amazon.com/AmazonS3/latest/userguide/security-best-practices.html)]" model.

CDN setup is outside the scope of this guide. Daily has an [example project](https://github.com/daily-co/daily-cloudfront-hls-example) that creates the AWS infrastructure to serve HLS through CloudFront.

## Limitations

**Daily does not store HLS output**

Output is stored in one of your AWS S3 buckets.
This allows you to have more control over your data and its storage and access.

**Daily supports 4 bitrates out-of-the-box**

| Width | Height | FPS | Bitrate (kbps) |
| ----- | ------ | --- | -------------- |
| 1920  | 1080   | 30  | 2500           |
| 1280  | 720    | 30  | 1500           |
| 640   | 360    | 24  | 700            |
| 320   | 180    | 24  | 200            |

Daily also generates an [i-frames-only stream](https://datatracker.ietf.org/doc/html/rfc8216#section-4.3.3.6) at 640×480 for trick play. Default bitrates can be overridden via the `streaming_endpoints` configuration.

**HLS configuration is only available as a room property**

`streaming_endpoints` is a room property and cannot be set at the domain level.

**There is a maximum of 20 `streaming_endpoints`**

You can store up to 20 `streaming_endpoints` configuration objects per room.


# Live streaming with Daily
Source: https://docs.daily.co/docs/guides/features/live-streaming/index

Broadcast a real-time Daily video call to any RTMP streaming platform of your choice.

<Badge>Paid plans only</Badge>

<img alt="Video stream with a Live red indicator indicating that the call is being live streamed" />

[Daily live streaming](https://www.daily.co/livestreaming) lets you broadcast a real-time, multi-participant video call to the streaming platform of your choice.

Live streaming sends [RTMP streams](https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Live_streaming_web_audio_and_video#rtmp), real-time data like call participants' video and audio, to a specific location over the internet where interested people can tune into the broadcast.

Webinars, conference panels, classes, concerts, all-hands meetings, and many other live events are all good candidates for live streaming.

<Tip>
  **Receive a \$15 credit for free**

  New accounts have a \$15 credit automatically applied when you add a credit card. See our [pricing page](https://www.daily.co/pricing) for details.
</Tip>

## Key terms

**Encoder** — software (or hardware) that compresses the stream. Daily is the encoder.

**Transcoder** — software that ingests the RTMP stream and transcodes it into an HLS stream. Examples: YouTube Live, Mux, AWS IVS.

**HLS stream** — [HTTP Live Streaming](https://en.wikipedia.org/wiki/HTTP_Live_Streaming), an HTTP-based adaptive bitrate streaming protocol.

## Daily live streaming

Daily manages audio, video, and screen share streams for calls of up to 100,000 participants. (Read our [interactive live streaming guide](/docs/guides/scaling-calls/interactive-live-streaming-rtmp-output#interactive-live-streaming-up-to-100000-participants) for more information.) Daily live streaming encodes the collective call stream to a transcoder of your choice, and provides options to [customize the stream layout](#live-streaming-layout-options). No external dependencies or multimedia streaming libraries are required.

By default, Daily live streaming outputs video at 1920x1080, 30 fps encoded as H.264 at 5 Mbps. The currently set maximum is 3840x2160 (4K UHD), but please [reach out](https://www.daily.co/contact) if you have other requirements.

Daily live streaming outputs audio encoded as AAC at 96 Kbps. [Contact us](https://www.daily.co/contact) if you have additional needs.

All live streams must occur over an [SFU network connection](/docs/guides/architecture-and-monitoring/intro-to-video-arch#the-architecture-of-a-room-p2p-vs-sfu-calls).

There are two parts to using Daily live streaming: [setting up prerequisite accounts and values](#prerequisites), and using those values in an application to [create a Daily live stream](#how-to-create-a-daily-live-streaming-app).

## Prerequisites

1. **Pay-as-you-go Daily account** — add a credit card in the [dashboard](https://dashboard.daily.co/billing).
2. **A Daily room** — create via the [dashboard](https://dashboard.daily.co/rooms) or [REST API](/reference/rest-api/rooms/create-room).
3. **An owner or streaming admin meeting token** — only meeting owners or streaming admins can start a live stream:

```bash theme={null}
curl --request POST \
     --url https://api.daily.co/v1/meeting-tokens \
     --header 'Authorization: Bearer DAILY_API_KEY' \
     --header 'Content-Type: application/json' \
     --data '{"properties": {"room_name": "DAILY_ROOM_NAME", "is_owner": true}}'
```

Or, for a streaming admin only:

```bash theme={null}
curl --request POST \
     --url https://api.daily.co/v1/meeting-tokens \
     --header 'Authorization: Bearer DAILY_API_KEY' \
     --header 'Content-Type: application/json' \
     --data '{"properties": {"room_name": "DAILY_ROOM_NAME", "permissions": {"canAdmin": ["streaming"]}}}'
```

4. **A transcoding provider account** — popular options: [Amazon IVS](https://aws.amazon.com/ivs/), [Mux](https://mux.com/), [YouTube Live](https://www.youtube.com/howyoutubeworks/product-features/live/), [Cloudflare Stream](https://www.cloudflare.com/products/cloudflare-stream/).
5. **An `rtmpUrl`** — combine your transcoder's ingest URL and stream key.

### RTMP URL templates by provider

| Provider                                                                                            | Template `rtmpUrl`                                                                                                                       |
| --------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| [Amazon IVS](https://aws.amazon.com/ivs/)                                                           | `rtmp(s)://DOMAIN.global-contribute.live-video.net:443/app/STREAM_KEY`                                                                   |
| [Mux](https://mux.com/)                                                                             | `rtmp(s)://global-live.mux.com:443/app/STREAM_KEY`                                                                                       |
| [YouTube Live](https://www.youtube.com/howyoutubeworks/product-features/live/)                      | `rtmp://DOMAIN.rtmp.youtube.com/live2/STREAM_KEY`                                                                                        |
| [LivePeer](https://livepeer.org/)                                                                   | `rtmp://mdw-rtmp.livepeer.com/live/STREAM_KEY`                                                                                           |
| [Azure](https://docs.microsoft.com/en-us/azure/media-services/latest/stream-live-streaming-concept) | `rtmps://DOMAIN.channel.media.azure.net:2935/live/DOMAIN/foo` *(Azure doesn't provide a stream key — use an arbitrary value like `foo`)* |
| [Cloudflare](https://www.cloudflare.com/products/cloudflare-stream/)                                | `rtmps://live.cloudflare.com:443/live/STREAM_KEY`                                                                                        |

Generic template: `rtmp(s)://DOMAIN/BASE_INGEST_URL/STREAM_KEY`

## How to create a Daily live streaming app

**1. Initialize a Daily call:**

```javascript theme={null}
// Daily Prebuilt
call = await window.Daily.createFrame(document.getElementById('callframe'), {
  iframeStyle: { /* ... */ },
});

// Custom call object
call = await window.Daily.createCallObject();
```

**2. Join with an owner or streaming admin token:**

```javascript theme={null}
await call.join({ url: 'DAILY_ROOM_URL', token: 'DAILY_MEETING_TOKEN' });
```

**3. Start the live stream:**

```javascript theme={null}
call.startLiveStreaming({ rtmpUrl: 'RTMP_URL' });
```

**4. Stop the live stream:**

```javascript theme={null}
call.stopLiveStreaming();
```

<Tip>
  **Sample code:**

  * [Daily Prebuilt live streaming demo](https://github.com/daily-demos/prebuilt-ui/tree/live-streaming-demo)
  * [Custom call object live streaming demo](https://github.com/daily-demos/examples/tree/main/custom/live-streaming)
  * [Live streaming with react-native-daily-js](https://github.com/daily-demos/react-native-live-streaming)
</Tip>

## Listening for live streaming events

* [`"live-streaming-started"`](/reference/daily-js/events/live-streaming-events#live-streaming-started)
* [`"live-streaming-updated"`](/reference/daily-js/events/live-streaming-events#live-streaming-updated)
* [`"live-streaming-stopped"`](/reference/daily-js/events/live-streaming-events#live-streaming-stopped)
* [`"live-streaming-error"`](/reference/daily-js/events/live-streaming-events#live-streaming-error)

```javascript theme={null}
call.on('live-streaming-started', (e) => console.log('live stream started', e));
```

## Live streaming layout options

Pass layout configuration to [`startLiveStreaming()`](/reference/daily-js/instance-methods/start-live-streaming) or [`updateLiveStreaming()`](/reference/daily-js/instance-methods/update-live-streaming):

```javascript theme={null}
await call.startLiveStreaming({
  width: 1280,
  height: 720,
  layout: { preset: 'default', max_cam_streams: 5 },
});
```

```javascript theme={null}
await call.updateLiveStreaming({
  layout: { preset: 'single-participant', session_id: 'abcd123...' },
});
```

* `height`, `width` — controls output resolution (set once via `startLiveStreaming()`).
* `backgroundColor` — formatted as `#rrggbb` or `#aarrggbb`.This can only be set once via \`startLiveStreaming().
* `layout`: an object specifying the way participants' videos are laid out in the stream.
  * `preset`: The layout preset to use. Options (see below for examples):
    * `"default"` — grid layout; supports `max_cam_streams` (default 20, max 20).
    * `"single-participant"` — stream only a single participant's audio and video. The selected participant’s session ID must be specified via a `session_id` key.
    * `"active-participant"` — This layout focuses on the current speaker, and places up to 9 other cameras to the right in a single column vertical grid in the order in which they last spoke.
    * `"portrait"` — mobile-friendly; `"vertical"` (default) or `"inset"` variant.
      * `"vertical"`: up to two participants are shown in a vertical layout. Participants with the `is_owner` flag are shown lower in the grid.
      * `"inset"`: one participant's video takes up the entire screen and the other is inset in a smaller rectangle. Participants' videos are scaled and cropped to fit the entire available space. Participants with the `is_owner` flag are shown full screen.
    * `"custom"` — full custom layout via [VCS](/docs/guides/features/live-streaming/vcs), with `composition_params` and optional `session_assets`. A full list of available parameters is available in the [reference docs](/reference/daily-js/types/daily-streaming-layout-config#vcs-baseline-composition). You can also test available options with the [VCS Simulator](https://www.daily.co/tools/vcs-simulator/daily_baseline.html).

*Example `"default"` layout*:

<img alt="Grid of nine participants on a video call" />

*Example screenshare `"default"` layout*:

<img alt="A screenshare takes up the main video call screen with participant videos to the right vertically" />

*Example `"single-participant"` layout*:

<img alt="One participant video screen takes up the entire video call" />

*Example `"active-participant"` layout*:

<img alt="One participant video screen takes up the majority of space on a call with two others to the right in a small vertical bar" />

*Example `"portrait"` layout with `"vertical"` variant*:

<img alt="Two participant screens on a mobile vertical video call" />

*Example `"portrait"` layout with `"inset"` variant*:

<img alt="Two participant screens on a mobile vertical video call" />

*Example `"custom"` layout with a text overlay:*

<img alt="Text overlay and dominant video layout example" />

## Multiple live streaming instances

Daily supports multiple live streaming and recording instances per room — useful for generating independent layouts for different audiences (e.g. portrait for mobile, landscape for desktop).

Pass a unique `instanceId` to [`startLiveStreaming()`](/reference/daily-js/instance-methods/start-live-streaming) or [`startRecording()`](/reference/daily-js/instance-methods/start-recording) to start independent instances. Each is independently controllable via [`updateLiveStreaming()`](/reference/daily-js/instance-methods/update-live-streaming)/[`updateRecording()`](/reference/daily-js/instance-methods/update-recording) and [`stopLiveStreaming()`](/reference/daily-js/instance-methods/stop-live-streaming)/[`stopRecording()`](/reference/daily-js/instance-methods/stop-recording), and all events include an `instanceId` to distinguish them.

For full details, see the [multi-instance guide](/docs/guides/features/live-streaming/multi-instance).

The number of allowed instances per room is controlled by the `max_streaming_instances_per_room` domain property. [Contact us](https://www.daily.co/contact/support) to configure this.


# Multi-instance live streaming and recording
Source: https://docs.daily.co/docs/guides/features/live-streaming/multi-instance

Run independent live streaming and recording instances in a single Daily room, each with its own layout.

Daily allows multiple live streaming and recording instances to run simultaneously within a single room. Each instance is independently controllable with its own layout.

<Note>
  Multi-instance is not the same as sending one stream to multiple destinations. A single live streaming instance already supports sending to multiple RTMP endpoints simultaneously. Multi-instance is for generating independent *compositions* — for example, a portrait layout for mobile and a landscape layout for desktop.
</Note>

## Use cases

* Generating a portrait layout for mobile viewers and a landscape layout for desktop viewers
* Presenting an enhanced layout to users with more features enabled (such as premium features or moderation views)
* Defining separate layouts for a live stream and a recording of the same event

## Architecture

Daily uses the same underlying infrastructure for recording and live streaming. Recording and live streaming instances that share an `instanceId` are linked — updating the layout of one updates the other.

<img alt="Multi-instance live streaming and recording architecture" />

<Info>
  Recording and live streaming with the same `instanceId` are interlinked. [Updating](/reference/daily-js/instance-methods/update-live-streaming) the layout of a live streaming instance will also affect the recording instance (if any) of that ID.
</Info>

## Setting up multi-instance

First, contact [Daily support](https://www.daily.co/contact/support) to configure `max_streaming_instances_per_room` for your domain.

Then pass a unique `instanceId` (a valid UUID) to [`startLiveStreaming()`](/reference/daily-js/instance-methods/start-live-streaming) or [`startRecording()`](/reference/daily-js/instance-methods/start-recording):

```javascript theme={null}
await call.startLiveStreaming({
  rtmpUrl: ['your_rtmp_url'],
  instanceId: 'YOUR_UUID',
  width: 1280,
  height: 720,
});
```

To update the layout for an existing live stream, use the [`updateLiveStreaming()`](/reference/daily-js/instance-methods/update-live-streaming) or [`updateRecording()`](/reference/daily-js/instance-methods/update-recording) call object instance methods:

```javascript theme={null}
await call.updateLiveStreaming({
  instanceId: 'YOUR_UUID',
  layout: { preset: 'active-participant' },
});
```

To stop a specific live streaming or recording instance, pass its `instanceId` to the [`stopLiveStreaming()`](/reference/daily-js/instance-methods/stop-live-streaming) or [`stopRecording()`](/reference/daily-js/instance-methods/stop-recording) call object instance method:

```javascript theme={null}
await call.stopLiveStreaming({
  instanceId: 'YOUR_UUID',
});
```

When `instanceId` is provided, all subsequent calls to `updateLiveStreaming()`, `stopLiveStreaming()`, `updateRecording()`, and `stopRecording()` must include the same `instanceId`.

If no `instanceId` is provided, Daily assigns the reserved default ID `'c3df927c-f738-4471-a2b7-066fa7e95a6b'`.

All [live streaming](/reference/daily-js/events/live-streaming-events#live-streaming-started) and [recording](/reference/daily-js/events/recording-events#recording-started) events include an `instanceId` field so your app can distinguish between running instances.

## Using multi-instance with daily-react

**Per-instance state**

The [`useRecording`](/reference/daily-react/use-recording) and [`useLiveStreaming`](/reference/daily-react/use-live-streaming) hooks accept an optional `instanceId` for per-instance state:

```jsx theme={null}
import { useRecording, useLiveStreaming } from '@daily-co/daily-react';

// instanceId must be a valid UUID
const PORTRAIT_INSTANCE = 'a1b2c3d4-5678-9abc-def0-1234567890ab';
const MOBILE_INSTANCE = 'c3d4e5f6-789a-bcde-f012-3456789abcde';

// State for a specific recording instance
const portraitRecording = useRecording({
  instanceId: PORTRAIT_INSTANCE,
});

// State for a specific live streaming instance
const mobileStream = useLiveStreaming({
  instanceId: MOBILE_INSTANCE,
});
```

When `instanceId` is provided, event callbacks are also filtered to only fire for that instance:

```jsx theme={null}
const { isRecording } = useRecording({
  instanceId: PORTRAIT_INSTANCE,
  onRecordingStarted: (ev) => {
    // Only fires when this instance starts
    console.log('Portrait recording started');
  },
});
```

**Aggregate state**

Without `instanceId`, hooks return aggregate state across all instances — `isRecording` and `isLiveStreaming` are `true` if any instance is active:

```jsx theme={null}
const { isRecording } = useRecording();
// true if ANY recording instance is active
```

**Listing all instances**

To get an array of all instance states, use `useRecordingInstances` and `useLiveStreamingInstances`:

```jsx theme={null}
import {
  useRecordingInstances,
  useLiveStreamingInstances,
} from '@daily-co/daily-react';

const recordingInstances = useRecordingInstances();
const streamingInstances = useLiveStreamingInstances();

// Each instance has its own state (isRecording, layout, instanceId, etc.)
recordingInstances.forEach((instance) => {
  console.log(`${instance.instanceId}: ${instance.isRecording}`);
});
```

## Billing

Each instance is billed separately. Two instances running for 60 minutes = 120 streaming minutes billed.


# Custom layouts with VCS
Source: https://docs.daily.co/docs/guides/features/live-streaming/vcs

Use Daily's Video Component System to build custom live streaming and cloud recording layouts with text overlays, image overlays, and more.

<Badge>Paid plans only</Badge>

Daily's Video Component System (VCS) lets you build custom layouts for live streaming and cloud recording. VCS goes beyond the built-in presets (`default`, `single-participant`, `active-participant`, `portrait`) to give you full control over composition, overlays, and presentation.

<Warning>
  VCS is only available for `cloud` recordings and live streaming. It is not available for `local` or `raw-tracks` recording.
</Warning>

<img alt="Live streaming UI" />

## What VCS can do

VCS is a video-oriented layout engine based on JavaScript functions. It generates layouts called **compositions**, which let you turn Daily calls into engaging streamed and recorded content.

Using VCS's baseline composition, you can:

* Apply custom video grid layouts and dominant-speaker views
* Add animated overlay graphics
* Display text overlays (titles, lower-thirds)
* Show image overlays (logos, watermarks)
* Embed live web content with the WebFrame component
* Customize layout based on participant count or call state

Some ways developers use VCS:

1. Building a live streaming "studio" for streamers and creators
2. Hosting interactive multiparty virtual events broadcast live to a wider audience via YouTube or Facebook Live
3. Creating high-quality recorded content from live events (e.g. an online fitness studio archiving recorded classes)

## The baseline composition

Daily provides a "baseline" composition as part of [`daily-js`](/reference/daily-js/types/daily-streaming-layout-config#vcs-baseline-composition) and [`react-native-daily-js`](/reference/react-native/types/daily-streaming-layout-config#vcs-baseline-composition). It's available to any Daily call using the live streaming or recording APIs.

Most developers will find the baseline composition flexible enough to meet their needs — it supports a variety of grid formats, layout parameters, overlay text, overlay graphics, and more. The `composition_id` for the baseline is `'daily:baseline'`, which is also the default if you omit it.

If you need customization beyond what the baseline offers, the [VCS SDK](/docs/vcs) is open source and lets you build fully custom compositions from scratch.

## Using the `custom` preset

To use VCS, set `layout.preset` to `'custom'` in your [`startLiveStreaming()`](/reference/daily-js/instance-methods/start-live-streaming) or [`startRecording()`](/reference/daily-js/instance-methods/start-recording) call:

```javascript theme={null}
await call.startLiveStreaming({
  layout: {
    preset: 'custom',
    composition_id: 'daily:baseline', // optional, this is the default
    composition_params: {
      // VCS parameters — see below
    },
    // session_assets must be declared at start if used in any update
    session_assets: {
      'images/logo.png': 'https://example.com/logo.png',
    },
  },
});
```

**Key options:**

* `composition_id` — the composition to use. `'daily:baseline'` is the default and currently the only option.
* `composition_params` — parameters that configure how the composition behaves. Pass them in `startLiveStreaming()` or `startRecording()` to set the initial layout, and in `updateLiveStreaming()` or `updateRecording()` to change the layout mid-stream.
* `session_assets` — a map of string keys to public asset URLs (e.g. `'images/logo.png': 'https://...'`). Think of this as a directory of files loaded from those URLs and named by their keys. Image asset keys must start with `"images/"` and must include the file extension. When you reference an image in `composition_params` via `image.assetName`, use the key with the `"images/"` prefix removed, keeping the extension (so `images/logo.png` becomes `logo.png`).

<Warning>
  `session_assets` must be passed in the `startLiveStreaming()` or `startRecording()` call, even if they won't be used until a later `updateLiveStreaming()` or `updateRecording()` call.
</Warning>

You can update the layout at any time using `updateLiveStreaming()` or `updateRecording()`:

```javascript theme={null}
await call.updateLiveStreaming({
  layout: {
    preset: 'custom', // required even in updates
    composition_params: {
      showTextOverlay: true,
      'text.content': 'Live now',
    },
  },
});
```

## VCS Simulator

The best way to explore VCS is with the **[VCS Simulator](https://daily.co/tools/vcs-simulator)** — an interactive tool that lets you configure baseline composition parameters and see results in real time, without writing code.

<img alt="VCS Simulator example" />

Things to try:

* Set `mode` to `'grid'` and click the numbered video input buttons to preview grid layout changes.
* Set `mode` to `'dominant'` and click "Make dominant" to see the active speaker layout.
* Enable `showTextOverlay` and update the text content, alignment, and positioning.
* Drag a PNG into the asset images box and enable `showImageOverlay`.

### API Call Builder

The **API Call Builder** tab in the Simulator generates ready-to-use `composition_params` based on your interactions:

* **Record / Stop** — capture parameter changes as you interact with the Simulator.
* **Capture all** — output all current parameter values, including defaults.
* **Screenshot** — get a preview image of your current composition.
* **Clear** — reset your recorded options.

<img alt="API call builder tab in the VCS simulator" />

The generated parameters work in `startLiveStreaming()`, `updateLiveStreaming()`, `startRecording()`, and `updateRecording()`.

## Example configurations

### Text overlay

```javascript theme={null}
await call.updateLiveStreaming({
  layout: {
    preset: 'custom',
    composition_params: {
      showTextOverlay: true,
      'text.content': 'Hello streaming',
      'text.align_vertical': 'bottom',
      'text.align_horizontal': 'center',
      'text.offset_y': 20,
      'text.color': 'white',
      'text.strokeColor': 'rgba(0, 0, 0, 0.8)',
    },
  },
});
```

Assuming you are using the default values for other parameters, this will look like:

<img alt="Live streaming with AWS IVS and a text overlay" />

### Dominant speaker layout

```javascript theme={null}
await call.updateLiveStreaming({
  layout: {
    preset: 'custom',
    composition_params: {
      mode: 'dominant',
      'videoSettings.dominant.position': 'left',
    },
  },
});
```

Assuming you are using the default values for other parameters, this will look like:

<img alt="Live streaming with AWS IVS and a text overlay with a larger video displayed on the left side" />

In dominant mode, the active speaker's video renders large on the specified side, with other participants in smaller tiles on the other side. This layout can be further customized with additional `videoSettings.dominant.*` parameters.

<Note>
  The "dominant" video corresponds to the current [active speaker](/reference/daily-js/events/participant-events#participant-counts-updated).
</Note>

## Testing with the Daily Prebuilt demo app

The [`vcs-live-streaming` branch of the Daily Prebuilt demo app](https://github.com/daily-demos/prebuilt-ui/tree/vcs-live-streaming) includes UI for starting a live stream, applying VCS properties via `updateLiveStreaming()`, and stopping the stream. You can use any transcoder — YouTube Live, Mux, or AWS IVS all work.

<img alt="Comparison of Daily Prebuilt UI with the VCS custom properties applied" />

## VCS SDK

The baseline composition is open source. If you need customization beyond what `composition_params` provides, the [VCS SDK](/docs/vcs) lets you build fully custom compositions from scratch.


# Storing Daily call recordings in a custom Amazon S3 bucket
Source: https://docs.daily.co/docs/guides/features/recording/custom-s3-storage

Configure Daily to store call recordings directly in your own S3 bucket.

Developers can configure Daily to store call recordings in an [Amazon S3](https://aws.amazon.com/s3/) bucket of their choice. In this configuration, Daily does not store the recording on its own servers at any point — recordings are written directly into the specified bucket.

<Note>
  If you're new to call recording with Daily, check out the [recording guide](/docs/guides/features/recording) first.
</Note>

***

## S3 bucket configuration requirements

The target S3 bucket can be in any AWS region and must have **versioning enabled**. Select "Enable" under "Bucket Versioning" when [creating your S3 bucket](https://docs.aws.amazon.com/AmazonS3/latest/userguide/creating-bucket.html).

<img alt="Enabling S3 bucket versioning" />

## Shortcut: automated setup script

Our team has created a [GitHub repo with a custom script](https://github.com/daily-co/daily-recordings-bucket) that configures your S3 bucket for Daily recordings automatically.

You'll need:

1. Your Daily domain name (the subdomain of your Daily room URLs — e.g.  `https://your-domain.daily.co/room-name`)
2. The bucket name
3. The bucket region

Follow the [README](https://github.com/daily-co/daily-recordings-bucket) for instructions. Once complete, skip to [configuring your Daily domain or room](#configuring-your-daily-domain-or-room-to-store-recordings-in-s3).

***

## Creating an IAM policy with appropriate permissions

[AWS Identity and Access Management (IAM)](https://docs.amazonaws.cn/en_us/IAM/latest/UserGuide/introduction.html) controls access to AWS resources. To allow Daily to store recordings in your bucket, create an [IAM policy](https://docs.aws.amazon.com/IAM/latest/UserGuide/access_policies_create.html) with these permissions:

```json theme={null}
{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "VisualEditor0",
      "Effect": "Allow",
      "Action": [
        "s3:PutObject",
        "s3:GetObject",
        "s3:ListBucketMultipartUploads",
        "s3:AbortMultipartUpload",
        "s3:ListBucketVersions",
        "s3:ListBucket",
        "s3:GetObjectVersion",
        "s3:ListMultipartUploadParts"
      ],
      "Resource": [
        "arn:aws:s3:::your-bucket-name",
        "arn:aws:s3:::your-bucket-name/*"
      ]
    }
  ]
}
```

Replace `your-bucket-name` with the name of your S3 bucket.

Create this policy in the [IAM dashboard](https://console.aws.amazon.com/iam/home) under **Policies → Create**.

<img alt="Creating an IAM policy" />

### What each permission is for

| Permission                               | What Daily uses it for                                                                                      |
| ---------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
| `s3:PutObject`                           | Writes recording files into your bucket. Also used for the one-time test file that checks your setup works. |
| `s3:ListBucketMultipartUploads`          | Lists uploads that are still open. Large recordings are uploaded in parts.                                  |
| `s3:ListMultipartUploadParts`            | Lists the parts of an open upload so Daily can finish it.                                                   |
| `s3:AbortMultipartUpload`                | Cleans up an upload that can no longer be finished.                                                         |
| `s3:ListBucket`, `s3:ListBucketVersions` | Looks up objects and object versions in your bucket.                                                        |
| `s3:GetObject`, `s3:GetObjectVersion`    | Reads a finished recording back out of your bucket.                                                         |

Everything above `s3:GetObject` is write-side work: Daily needs it to get the recording into your bucket and to close out uploads cleanly. The two `Get` permissions are the only ones that let Daily read your recordings.

<Warning>
  `s3:ListMultipartUploadParts` is a read-sounding name, but it is a separate action from `s3:GetObject` and it is part of the write path. If you add a `Deny` statement written as `s3:Get*` plus `s3:List*`, you will break the step that finishes interrupted uploads. Calls that end abruptly (a crashed tab, a dropped network) leave an open multipart upload, and Daily will not be able to complete it. Those recordings never appear in your bucket. List the actions you want to deny one by one instead of using a wildcard.
</Warning>

### Optional: a write-only policy

If your security policy says Daily should never be able to read your recordings, you can drop the read permissions:

```json theme={null}
{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "DailyWriteOnly",
      "Effect": "Allow",
      "Action": [
        "s3:PutObject",
        "s3:ListBucketMultipartUploads",
        "s3:AbortMultipartUpload",
        "s3:ListMultipartUploadParts"
      ],
      "Resource": [
        "arn:aws:s3:::your-bucket-name",
        "arn:aws:s3:::your-bucket-name/*"
      ]
    }
  ]
}
```

Recording uploads keep working with this policy. Here is what stops working:

* **Download and playback links from Daily.** The [recording access link](/reference/rest-api/recordings/get-recording-link) API and the recording player in the Daily dashboard both hand out a link that is signed with Daily's role. Without read access, that link fails with a `403` when someone opens it. Set `allow_api_access` to `false` so your team does not get handed links that cannot work.
* **The MP4 seek atom.** Daily can add a seek atom (also called "faststart") to finished MP4 files, which is what lets a player jump to the middle of a video without downloading the whole thing. That step reads the file back out of your bucket, so it cannot run.
* **[Batch processor](/reference/rest-api/batch-processor/index) jobs.** Anything that takes a finished recording and processes it (transcription, summaries, transmuxing) has to read the recording first.

The recording files themselves are complete and valid either way. They are just not always seekable in every player. You can add the seek atom yourself after you download a file:

```bash theme={null}
ffmpeg -i input.mp4 -c copy -movflags +faststart output.mp4
```

<Note>
  Two things that often come up when people debug a tightened policy:

  * `HeadObject` is authorized by `s3:GetObject`, so calls that only ask for file metadata show up as `s3:GetObject` denials in CloudTrail. A `GetObject` denial does not always mean something tried to read your recording.
  * The access link API does not fail loudly. It builds and signs the link without touching your bucket, so it still returns a `200` with a URL. The `403` only shows up when someone opens the link.
</Note>

## Creating an IAM role for Daily

Create an [IAM role](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_roles.html) with the policy attached. If you are already familiar with creating IAM roles, feel free to do so with the following settings. Otherwise, follow the walkthrough below.

| Setting                  | Value                            |
| ------------------------ | -------------------------------- |
| Trusted Entity Type      | AWS Account                      |
| Trusted AWS account ID   | `291871421005` (Daily's account) |
| Required external ID     | Your Daily domain name           |
| Maximum session duration | 12 hours                         |

### Role creation walkthrough

1. In the [IAM dashboard](https://console.aws.amazon.com/iam/home), click **Roles → Create Role**.
2. For "Trusted Entity Type", select **AWS Account**.
3. Under "An AWS Account", select **Another AWS account**.
4. Enter `291871421005` as the Account ID (this is Daily's account).
5. Enter your Daily domain name as the "Require External ID".
   <img alt="Configuring IAM role trusted entity" />

<Note>
  Your domain name is the first part of your room URLs: `https://[domain-name].daily.co/[room-name]`. You can also find it as a query parameter at `https://dashboard.daily.co/?domain=[domain-name]`.
</Note>

6. Click **Next** and attach the IAM policy you created.
   <img alt="Attaching IAM policy to the new IAM role" />

7. Click **Next** again to give your role a name and click **Create role**.

8. Find the role in your IAM Roles list, click **Edit**, and set **Maximum session duration** to **12 hours**.
   <img alt="Editing IAM role's maximum session duration" />

9. Copy the ARN (Amazon Resource Name) from the role page — you'll need it in the next step.
   <img alt="Copying IAM role ARN" />

## Configuring your Daily domain or room to store recordings in S3

S3 storage can be configured at the room or domain level. Which configuration gets used depends on the following priority order (highest to lowest):

1. [Customer S3 bucket at the room level](/reference/rest-api/rooms/create-room#body-properties-recordings-bucket)
2. [Customer S3 bucket at the domain level](/reference/rest-api/domain/set-domain-config#body-properties-transcription-bucket)
3. Daily's default storage (no configuration needed)

<Note>
  Recordings stored in a customer's S3 bucket do not incur an additional Daily storage rate. The API will upload a test file (`daily-co-test-upload.txt`) to verify permissions.
</Note>

### Examples

**Set a custom S3 bucket at the room level:**

```bash theme={null}
curl --request POST \
  --url https://api.daily.co/v1/rooms/my-room \
  --header 'Authorization: Bearer $DAILY_API_KEY' \
  --header 'Content-Type: application/json' \
  --data '{
    "properties": {
      "recordings_bucket": {
        "bucket_name": "my-daily-recording",
        "bucket_region": "ap-south-1",
        "assume_role_arn": "arn:aws:iam::555555555555:role/DailyS3AccessRole",
        "allow_api_access": false
      }
    }
  }'
```

**Set a custom S3 bucket at the domain level:**

```bash theme={null}
curl --request POST \
  --url https://api.daily.co/v1/ \
  --header 'Authorization: Bearer $DAILY_API_KEY' \
  --header 'Content-Type: application/json' \
  --data '{
    "properties": {
      "recordings_bucket": {
        "bucket_name": "my-daily-recording",
        "bucket_region": "ap-south-1",
        "assume_role_arn": "arn:aws:iam::555555555555:role/DailyS3AccessRole",
        "allow_api_access": true
      }
    }
  }'
```

**Revert to Daily default storage:**

```bash theme={null}
curl --request POST \
  --url https://api.daily.co/v1/rooms/my-room \
  --header 'Authorization: Bearer $DAILY_API_KEY' \
  --header 'Content-Type: application/json' \
  --data '{"properties": {"recordings_bucket": null}}'
```

**Properties:**

* `bucket_name` — name of your S3 bucket
* `bucket_region` — AWS region of your S3 bucket
* `assume_role_arn` — ARN of the IAM role you created above
* `allow_api_access` — whether Daily's [recording access link](/reference/rest-api/recordings/get-recording-link) API should allow downloading the recording
* `allow_streaming_from_bucket`: whether download links open the recording in the browser (`inline`) instead of saving it to disk (`attachment`)

<Note>
  `allow_api_access` and `allow_streaming_from_bucket` change how Daily behaves. They do not change what your IAM policy allows. Turning `allow_api_access` off stops Daily from handing out a link, but it does not remove Daily's read access to the bucket. If you want to remove read access, do it in the IAM policy: see [the write-only policy above](#optional-a-write-only-policy).
</Note>

If you have any questions or run into issues with the setup, [contact us](https://www.daily.co/contact/support).


# Recording calls with the Daily API
Source: https://docs.daily.co/docs/guides/features/recording/index

Learn about cloud, cloud-audio-only, local, and raw-tracks recording options for Daily calls.

<Badge>Paid plans only</Badge>

<img alt="A notification to start recording a call appears on top of the call participants in Daily Prebuilt" />

There are multiple ways to record calls of up to three hours with the Daily API:

* [`cloud`](#cloud) — server-side video recording stored in Daily's cloud
* [`cloud-audio-only`](#cloud-audio-only) — server-side audio-only recording
* [`local`](#local) — client-side recording saved to the participant's computer
* [`raw-tracks`](#raw-tracks) — individual media tracks stored in your own S3 bucket

<Tip>
  **Receive a \$15 credit for free**

  New accounts have a \$15 credit automatically applied when you add a credit card. See our [pricing page](https://www.daily.co/pricing) for details.
</Tip>

## cloud

Records a Daily call server-side. By default, outputs video at 1920x1080, 30 fps, encoded as H.264 at 5 Mbps, and audio encoded as AAC at 96 kbps, in MP4 format. Files can be retrieved via the [Daily REST API](/reference/rest-api/recordings) or from the [Daily dashboard](https://dashboard.daily.co/).

Cloud recording supports [custom video layouts](#customize-cloud-recording-layouts). It's the best choice when you need recording from any browser or device, or want control over the recording output's look and feel.

Cloud recording is available for [HIPAA](/docs/guides/privacy-and-security/hipaa) use cases when configured to [store recordings in a custom S3 bucket](/docs/guides/features/recording/custom-s3-storage).

### Turn on cloud recording

Set `enable_recording` to `"cloud"` at the room level to allow any participant to start a recording:

```bash theme={null}
curl --request POST \
     --url https://api.daily.co/v1/rooms \
     --header 'Authorization: Bearer DAILY_API_KEY' \
     --header 'Content-Type: application/json' \
     --data '{"properties": {"enable_recording": "cloud"}}'
```

To restrict who can start recording to specific participants, set `enable_recording` on their meeting tokens instead:

```bash theme={null}
curl --request POST \
     --url https://api.daily.co/v1/meeting-tokens \
     --header 'Authorization: Bearer DAILY_API_KEY' \
     --header 'Content-Type: application/json' \
     --data '{"properties": {"room_name": "DAILY_ROOM_NAME", "enable_recording": "cloud"}}'
```

Use [`startRecording()`](/reference/daily-js/instance-methods/start-recording), [`updateRecording()`](/reference/daily-js/instance-methods/update-recording), and [`stopRecording()`](/reference/daily-js/instance-methods/stop-recording) to manage recording in your app.

To start recording automatically when a token holder joins, use the [`start_cloud_recording`](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties-start-cloud-recording) token property.

If a recording doesn't start, wait for the `recording-started` event and retry `startRecording()` with exponential backoff if it doesn't arrive. See [retrying failed recording starts](/docs/daily-js/features/recording#retrying-failed-recording-starts) for example code.

### Customize cloud recording layouts

Pass layout configuration to [`startRecording()`](/reference/daily-js/instance-methods/start-recording) or [`updateRecording()`](/reference/daily-js/instance-methods/update-recording):

```javascript theme={null}
// Start a recording with a specific layout
await call.startRecording({
  width: 1280,
  height: 720,
  backgroundColor: '#FF1F2D3D',
  layout: {
    preset: 'default',
    max_cam_streams: 5,
  },
});
```

```javascript theme={null}
// Change the recording layout in real time
await call.updateRecording({
  layout: {
    preset: 'single-participant',
    session_id: 'abcd123...',
  },
});
```

* `height`, `width` — controls output resolution (set once via `startLiveStreaming()`).
* `backgroundColor` — formatted as `#rrggbb` or `#aarrggbb`.This can only be set once via \`startLiveStreaming().
* `layout`: an object specifying the way participants' videos are laid out in the stream.
  * `preset`: The layout preset to use. Options (see below for examples):
    * `"default"` — grid layout; supports `max_cam_streams` (default 20, max 20).
    * `"single-participant"` — stream only a single participant's audio and video. The selected participant’s session ID must be specified via a `session_id` key.
    * `"active-participant"` — This layout focuses on the current speaker, and places up to 9 other cameras to the right in a single column vertical grid in the order in which they last spoke.
    * `"portrait"` — mobile-friendly; `"vertical"` (default) or `"inset"` variant.
      * `"vertical"`: up to two participants are shown in a vertical layout. Participants with the `is_owner` flag are shown lower in the grid.
      * `"inset"`: one participant's video takes up the entire screen and the other is inset in a smaller rectangle. Participants' videos are scaled and cropped to fit the entire available space. Participants with the `is_owner` flag are shown full screen.
    * `"custom"` — full custom layout via [VCS](/docs/guides/features/live-streaming/vcs), with `composition_params` and optional `session_assets`. A full list of available parameters is available in the [reference docs](/reference/daily-js/types/daily-streaming-layout-config#vcs-baseline-composition). You can also test available options with the [VCS Simulator](https://www.daily.co/tools/vcs-simulator/daily_baseline.html).

*Example `"default"` layout*:

<img alt="Grid of nine participants on a video call" />

*Example screenshare `"default"` layout*:

<img alt="A screenshare takes up the main video call screen with participant videos to the right vertically" />

*Example `"single-participant"` layout*:

<img alt="One participant video screen takes up the entire video call" />

*Example `"active-participant"` layout*:

<img alt="One participant video screen takes up the majority of space on a call with two others to the right in a small vertical bar" />

*Example `"portrait"` layout with `"vertical"` variant*:

<img alt="Two participant screens on a mobile vertical video call" />

*Example `"portrait"` layout with `"inset"` variant*:

<img alt="Two participant screens on a mobile vertical video call" />

*Example `"custom"` layout with a text overlay:*

<img alt="Text overlay and dominant video layout example" />

### Retrieve cloud recordings

Cloud recordings are available in the [Daily dashboard "Recordings" tab](https://dashboard.daily.co/recordings) and via the [recordings REST API](/reference/rest-api/recordings).

### Using cloud recording with Daily Prebuilt

When cloud recording is enabled, end users can start recordings using the "Record" button. The layout is automatically selected based on their current view (grid → `"default"`, speaker view → `"active-speaker"`).

For programmatic control over recording and additional layout presets, use the [`startRecording()`](/reference/daily-js/instance-methods/start-recording) and [`updateRecording()`](/reference/daily-js/instance-methods/update-recording) methods with the `layout` parameter.

## cloud-audio-only

Records a Daily call server-side and produces an audio-only MPEG-4 file (`.m4a`). Configuration and retrieval work the same as `cloud`, except layout options don't apply.

Enable it by setting `enable_recording` to `"cloud-audio-only"` at the room or meeting token level (same pattern as `cloud` above). The [`start_cloud_recording`](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties-start-cloud-recording) token property applies to both `cloud` and `cloud-audio-only`.

Available for [HIPAA](/docs/guides/privacy-and-security/hipaa) use cases when using a [custom S3 bucket](/docs/guides/features/recording/custom-s3-storage).

## local

<Warning>
  Local recording happens on the participant's device and relies on local compositing, so final quality is subject to browser and device limitations. The recording participant must be using Chrome on desktop.
</Warning>

Local recording saves the finished recording as a `.webm` file on the recording participant's computer. The file may need to be [transcoded](#transcoding-webm-files-with-a-gui) for compatibility with most devices and editors.

Use this type to access recordings directly on a participant's computer rather than through Daily's cloud. Local recording is also [HIPAA-compatible](/docs/guides/privacy-and-security/hipaa).

### Turn on local recording

```bash theme={null}
curl --request POST \
     --url https://api.daily.co/v1/rooms \
     --header 'Authorization: Bearer DAILY_API_KEY' \
     --header 'Content-Type: application/json' \
     --data '{"properties": {"enable_recording": "local"}}'
```

Or create a room with local recording enabled from the [Daily dashboard](https://dashboard.daily.co/rooms/create). Use [`startRecording()`](/reference/daily-js/instance-methods/start-recording) and [`stopRecording()`](/reference/daily-js/instance-methods/stop-recording) to manage it.

The recording is downloaded to the computer of the participant who stops it.

### Using local recording with Daily Prebuilt

Tell the participant who started recording to click "Stop" before leaving the call. If they leave without stopping, the recording will be lost. Daily Prebuilt attempts to warn the user before they leave.

## raw-tracks

`"raw-tracks"` captures each individual media track separately and stores them in your [custom S3 bucket](/docs/guides/features/recording/custom-s3-storage).

Use this type when you need to manage individual media tracks separately — for high-quality audio transcription, podcasts, or video production.

### Turn on raw-tracks recording

```bash theme={null}
curl --request POST \
     --url https://api.daily.co/v1/rooms/:room-name \
     --header 'Authorization: Bearer DAILY_API_KEY' \
     --header 'Content-Type: application/json' \
     --data '{"properties": {"enable_recording": "raw-tracks"}}'
```

Use [`startRecording()`](/reference/daily-js/instance-methods/start-recording) and [`stopRecording()`](/reference/daily-js/instance-methods/stop-recording) to manage it.

### Gapless transcoded audio

By default, each raw-tracks audio file is the participant's Opus stream stored as-is in a `.webm` container. Because it captures samples as they arrived over WebRTC, the file can contain gaps: a muted mic, an idle period, or packet loss leaves a hole in the timeline. Those gaps make it harder to line tracks up after the call.

Set `enable_raw_tracks_transcoded_audio` to have Daily decode each audio track, fill any gaps with silence, and re-encode it as a continuous (gapless) file. This keeps each track's audio flowing without holes, which makes alignment and post-processing simpler.

You can set it on a room or on your domain. A room value takes priority over the domain value.

```bash theme={null}
curl --request POST \
     --url https://api.daily.co/v1/rooms/:room-name \
     --header 'Authorization: Bearer DAILY_API_KEY' \
     --header 'Content-Type: application/json' \
     --data '{"properties": {"enable_raw_tracks_transcoded_audio": "wav-48k-stereo"}}'
```

The value is a string that picks the output format:

| Value             | Output               | Container         | Sample rate | Channels |
| ----------------- | -------------------- | ----------------- | ----------- | -------- |
| `aac`             | AAC, fixed 160 kbps  | MP4 (`audio/mp4`) | 48 kHz      | stereo   |
| `wav-48k-stereo`  | 16-bit PCM, lossless | WAV (`audio/wav`) | 48 kHz      | stereo   |
| `wav-48k-mono`    | 16-bit PCM, lossless | WAV (`audio/wav`) | 48 kHz      | mono     |
| `wav-44k1-stereo` | 16-bit PCM, lossless | WAV (`audio/wav`) | 44.1 kHz    | stereo   |
| `wav-44k1-mono`   | 16-bit PCM, lossless | WAV (`audio/wav`) | 44.1 kHz    | mono     |

Two shorthand aliases are accepted: `wav` and `wav-48k` both map to `wav-48k-stereo`, and `wav-44k1` maps to `wav-44k1-stereo`.

Notes:

* This setting only affects audio tracks. Video tracks are unchanged and still record as `.webm`.
* Leave it unset (or use an empty string) to keep the default Opus-in-`.webm` audio behavior.
* The transcoded audio replaces the default `.webm` file for that track. It is not written alongside it. Each audio track produces exactly one file in your S3 bucket: either the default Opus-in-`.webm` file, or the transcoded WAV or MP4 file. So this setting is a choice between two outputs, not a way to get both. If you need the original Opus audio, leave this setting unset.
* WAV gives you lossless audio at the cost of larger files. AAC is smaller and fixed at 160 kbps.
* It fills gaps inside each track so the audio is continuous. It does not pad the start of a late joiner's track to match when the meeting began, so different participants' files can still start at different points. Use the [raw-tracks-tools CLI](#using-raw-tracks-tools-cli) to align tracks to a shared timeline.

## Converting and compositing .webm files

Raw-tracks (and local) recordings produce `.webm` files, which may not play in most video players or be directly editable. This is because they capture raw samples as-is from the WebRTC session — with variable frame rates, varying resolutions, and potential gaps from packet loss.

### Using raw-tracks-tools CLI

Daily's open-source [raw-tracks-tools](https://github.com/daily-co/raw-tracks-tools) CLI can:

* Analyze and convert individual participant tracks
* Align audio and video tracks for sync
* Composite all tracks from a recording into a single MP4 using [VCS](/docs/guides/features/live-streaming/vcs)

See the [project README](https://github.com/daily-co/raw-tracks-tools) for installation and usage.

### Transcoding .webm files with a GUI

Two common options:

* **[CloudConvert](https://cloudconvert.com/)** — browser-based, free and paid plans. Convert `webm` to `mp4` (or `webm` to `mp3` for audio-only).
* **[Handbrake](https://handbrake.fr/)** — free app for Windows and macOS. Drag and drop your `.webm` file, set Format to `MP4` and Video Encoder to `H.264 (x264)`, click Start.

You can also view `.webm` files without transcoding in Chrome, Firefox, or [VLC Media Player](https://www.videolan.org/vlc/).

## Multiple Recordings

See [Multi-instance live streaming and recording](/docs/guides/features/live-streaming/multi-instance) for full details, including how to configure `max_streaming_instances_per_room` for your domain.


# Transcription
Source: https://docs.daily.co/docs/guides/features/transcription

Daily supports both real-time transcription during calls and post-call transcription of recordings, both powered by Deepgram.

<Badge>Paid plans only</Badge>

Daily supports two transcription modes:

* **Real-time** — transcription runs during a call and streams text to all participants as speech is detected. Powered by [Deepgram](https://deepgram.com).
* **Post-call** — submit a recording ID or media URL to the [Batch Processor API](/reference/rest-api/batch-processor/index) after a call ends. It produces a transcript in `txt`, `srt`, `vtt`, or `json` format, and can optionally generate a written summary.

## Pricing

Transcriptions are charged based on usage and Deepgram model. For real-time, you pay per unmuted participant minute. For post-call, you pay per recorded minute. See the [transcription pricing page](https://www.daily.co/pricing/video-sdk/#transcription-ai) for billing details.

## Permissions

To dynamically start or stop a real-time transcription from a client, a participant must have `canAdmin: 'transcription'`. Meeting owners always have this permission.

Non-owners can be granted it in two ways:

* **At join time**: include `canAdmin: ['transcription']` in their [meeting token's `permissions`](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties-permissions).
* **Dynamically**: a meeting owner calls `updateParticipant()` with `updatePermissions: { canAdmin: new Set(['transcription']) }`.

## Storage

By default, real-time transcripts are generated and broadcast to participants but not saved. To persist transcripts as WebVTT files, set `enable_transcription_storage: true` at the room or domain level. While transcription is active, the file is written to storage every two minutes; the final version is written when transcription ends.

Transcripts are stored in Daily's cloud by default. For HIPAA use cases or custom storage, configure the `transcription_bucket` domain property — the setup process is the same as [configuring a custom S3 bucket for recordings](/docs/guides/features/recording/custom-s3-storage):

```json theme={null}
"transcription_bucket": {
  "bucket_name": "notes-bucket",
  "bucket_region": "me-central-1",
  "assume_role_arn": "arn:aws:iam::123456789000:role/DAILY_ROLE",
  "allow_api_access": true
}
```

## Real-time transcription APIs

Real-time transcription streams speech-to-text to all call participants as it's detected. By default, transcripts are ephemeral — participants receive [`transcription-message`](/reference/daily-js/events/transcription-events#transcription-message) events but nothing is persisted. Enable `enable_transcription_storage` at the room or domain level to save transcripts as WebVTT files, accessible after the call via the `/transcript` REST endpoints or a webhook notification.

<CardGroup>
  <Card title="daily-js" icon="js" href="/docs/daily-js/features/transcription">
    Start and manage transcription from a call object. Includes full parameter reference and a complete live captions example.
  </Card>

  <Card title="Daily React" icon="react" href="/docs/daily-react/docs/transcription">
    Overview of the `useTranscription` hook to manage and control transcriptions — with a complete live captions example.
  </Card>

  <Card title="REST API" icon="server" href="/docs/rest-api/transcription">
    Guide to all transcription-related REST endpoints: real-time management, auto-start via meeting tokens, post-call transcription, and storage.
  </Card>
</CardGroup>

## Post-call transcription

The [Batch Processor API](/reference/rest-api/batch-processor/index) generates transcripts and summaries from existing recordings or any publicly accessible audio/video URL. Use it when you need to transcribe a call after it ends, or process media that wasn't transcribed live.

See the [REST API transcription guide](/docs/rest-api/transcription#post-call-transcription) for details on submitting post-call transcription jobs and retrieving results.


# Setting up your CSP for daily-js
Source: https://docs.daily.co/docs/guides/privacy-and-security/content-security-policy

What CSP directives are required to work with `daily-js`.

## What is a Content Security Policy (CSP)?

A [Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) contains data about what origins can be used to load and execute various resources inside your web application.

A CSP essentially serves as an allowlist. Developers can define a CSP in their web applications to minimize the vector of attack against the app and its visitors.

For example, you can specify a [`script-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src) directive to dictate which sources the user agent is allowed to execute JavaScript from while using your app.

If you make use of a CSP in your web application, this guide will summarize the adjustments you might need to make to have it work with `daily-js`.

## Enabling the CSP

The CSP is enabled in one of two ways:

* By adding a `Content-Security-Policy` [HTTP response header](https://developer.mozilla.org/en-US/docs/Glossary/Response_header)
* By adding a `Content-Security-Policy` [`meta`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta) element to the site header

## Daily Prebuilt

If using [Daily Prebuilt](/docs/prebuilt), a minimal functional CSP can look like this:

```html theme={null}
<meta
  http-equiv="Content-Security-Policy"
  content="default-src 'self'; frame-src 'self' https://*.daily.co; script-src 'self' https://unpkg.com/@daily-co/daily-js blob:; worker-src 'self';"
/>
```

The above policy contains two Daily-specific directives:

* It allows the user agent to create an iframe with the Daily domain as the source, via the [`frame-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-src) directive.
* It allows `daily-js` to be loaded and executed from [Unpkg](https://unpkg.com/@daily-co/daily-js) via the [`script-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src) directive.

<Note>
  If you are loading `daily-js` from a local source or somewhere other than Unpkg, you'll need to adjust the origin in `script-src` accordingly. For example, if you are using npm and bundling the library into your app, only the `'self'` origin should be needed.
</Note>

## Custom call object

If using [call object mode](/docs/daily-js), the CSP will require some different allowances. A minimal call object CSP can be defined as follows:

```html theme={null}
<meta
  http-equiv="Content-Security-Policy"
  content="
    default-src 'self';
    frame-src 'self';
    script-src 'self' https://unpkg.com/@daily-co/daily-js 'unsafe-eval' blob:;
    connect-src https://*.daily.co https://*.pluot.blue https://*.banuba.cloud wss:;
    worker-src 'self' blob:;
  "
/>
```

The above policy allows:

* Loading `daily-js` from UNPKG (only needed if you're loading `daily-js` via a script tag)
* Loading relevant resources from Daily domains
* Connecting to Daily calls
* Connecting to Banuba, Daily's video processing provider (only needed if you're using [virtual backgrounds or background blur](/reference/daily-js/instance-methods/update-input-settings#video-processor))

### Avoiding the `'unsafe-eval'` requirement

Call object mode in `daily-js` uses a code path that loads the call object bundle from Daily's CDN and makes a `Function()` call to execute it, which results in an `eval`.

You can create the call object via a code path that does *not* require `'unsafe-eval'`:

1. Enable this alternative with the `avoidEval` property:

```javascript theme={null}
const call = Daily.createCallObject({
  dailyConfig: {
    avoidEval: true,
  },
});
```

2. Replace `'unsafe-eval'` in your `script-src` directive with:

* `https://*.daily.co`
* `'wasm-unsafe-eval'` (only needed if you're using [virtual backgrounds or background blur](/reference/daily-js/instance-methods/update-input-settings#video-processor))

## CSP changes for noise cancellation

When using Krisp noise cancellation with Daily, your CSP must include `blob:` in the `script-src` directive. Krisp creates a worker using a blob: URL, and this ensures the browser permits loading such scripts. The CSP examples above already include this.

## Wrapping up

Please [contact us](https://www.daily.co/contact) if you have any questions.


# Controlling who joins a meeting
Source: https://docs.daily.co/docs/guides/privacy-and-security/controlling-who-joins-a-meeting

Use room privacy settings, meeting tokens, and knocking to restrict access to your Daily rooms.

## The room privacy setting

When a room is created, its `privacy` [setting](/reference/rest-api/rooms/create-room#body-privacy) defaults to `"public"`. **Anyone who knows the room's URL can join a public room.**

For many workflows, public rooms are the right approach. If you create rooms on the fly for one-time use, let the [room creation](/reference/rest-api/rooms/create-room) API generate a random name automatically — the URL will be impossible to guess, so only the people you share it with can join. You can also set an `exp` time on the room so it is automatically deleted after use.

For other workflows, you will want to restrict access. For example, if you use human-readable room names, someone could guess a room name and join uninvited. Or, if you reuse meeting rooms, you may want to control access so that even people who have the URL can't always join.

To restrict access, set the room's `privacy` to `"private"`.

A private room can be joined with a [meeting token](/docs/guides/privacy-and-security/meeting-tokens) or by knocking (if the room property `enable_knocking` is set to `true`).

<Note>
  If you change a room from public to private while participants are in it, those participants will remain. Anyone else who tries to join after the change will need a token or to knock.
</Note>

## Meeting tokens

A [meeting token](/docs/guides/privacy-and-security/meeting-tokens) is the most flexible way to grant access to a private room. Tokens can be unique per participant, time-limited, and carry additional user properties.

Any valid meeting token grants access to a private room. The preferred way to pass a token is via the `token` parameter in [`join()`](/reference/daily-js/instance-methods/join) or [`preAuth()`](/reference/daily-js/instance-methods/pre-auth):

```javascript theme={null}
call.join({ url: DAILY_ROOM_URL, token: DAILY_MEETING_TOKEN });
```

<Warning>
  Always set the `room_name` property when creating meeting tokens to control room access. A token without a `room_name` grants access to **any** room in your domain.
</Warning>

## Meeting owner privileges

Participants who join with the `is_owner` meeting token property set to `true` have access to elevated privileges during a call, including:

* Starting or stopping a live stream
* Allowing participants in (private rooms only)
* Triggering [`updateParticipant()`](/reference/daily-js/instance-methods/update-participant)
* Muting camera and microphone for others in [Daily Prebuilt](/docs/prebuilt)

## Knocking

To allow users to request access to a private room, set the room's `enable_knocking` property to `true`.

<img alt="Web page screen displays waiting for owner to respond and meeting locked by owner message" />

When a user knocks, they enter a waiting state. A room owner — someone who joined with `is_owner: true` in their meeting token — must be present to approve or deny the request.

### Listening for waiting participants

Owners should listen for the following events to respond to knocking participants in real time:

* [`waiting-participant-added`](/reference/daily-js/events/participant-events#waiting-participant-added) — fires when a participant starts knocking
* [`waiting-participant-updated`](/reference/daily-js/events/participant-events#waiting-participant-updated) — fires when a waiting participant updates their display name
* [`waiting-participant-removed`](/reference/daily-js/events/participant-events#waiting-participant-removed) — fires when a waiting participant leaves or gives up

```javascript theme={null}
call.on('waiting-participant-added', (event) => {
  console.log('Someone is knocking:', event.participant);
});
```

### Getting the list of waiting participants

Use [`waitingParticipants()`](/reference/daily-js/instance-methods/waiting-participants) to get the current set of participants in the waiting state at any point:

```javascript theme={null}
const waiting = call.waitingParticipants();
// { 'participant-id': { id, name, ... }, ... }
```

### Admitting or denying waiting participants

Use [`updateWaitingParticipant()`](/reference/daily-js/instance-methods/update-waiting-participant) or [`updateWaitingParticipants()`](/reference/daily-js/instance-methods/update-waiting-participants) to accept or deny access:

```javascript theme={null}
// Admit a single participant
call.updateWaitingParticipant(participantId, { grantRequestedAccess: true });

// Deny a single participant
call.updateWaitingParticipant(participantId, { grantRequestedAccess: false });

// Admit everyone currently waiting
call.updateWaitingParticipants('*', { grantRequestedAccess: true });
```


# Networking Guide
Source: https://docs.daily.co/docs/guides/privacy-and-security/corporate-firewalls-nats-allowed-ip-list

Configuring corporate/enterprise networks to support Daily calls.

Corporate networks often use firewalls, web security appliances, deep packet inspection, VPNs, and other tools to protect internal systems. These tools can sometimes interfere with Daily calls by blocking the connections needed for audio, video, and screen sharing. This guide explains how to configure your network to allow Daily calls to work smoothly.

## Understanding network requirements

There are two kinds of connections that need to happen for a Daily call:

1. Standard client-server web requests
2. Peer-to-peer WebRTC connections to send and receive call media

For web requests, you'll need to allow connections to the following hostnames on port 443:

* `*.daily.co`, `*.dailywebrtc.com`, and `*.dailywebrtc.net`, or your Daily subdomain (for general Daily functionality)
* `*.wss.daily.co`, `*-wss.daily.co`, `*.wss.dailywebrtc.com`, `*-wss.dailywebrtc.com`, `*.wss.dailywebrtc.net`, and `*-wss.dailywebrtc.net`, or the `sfu` servers listed in [the IP list](https://ip-info.daily.co/ips/ip-info.json) (for call signaling)
* `b.daily.co`, `c.daily.co`, `b.dailywebrtc.com`, `c.dailywebrtc.com`, `b.dailywebrtc.net`, and `c.dailywebrtc.net` (for accessing Daily CDN resources)
* `gs.daily.co`, `gs.dailywebrtc.com`, and `gs.dailywebrtc.net` (dispatch server)
* `prod-ks.pluot.blue` (ICE negotiation)

<Note>
  `dailywebrtc.com` and `dailywebrtc.net` are fallback domains that mirror the `daily.co` infrastructure, with the same subdomains pointing at the same servers and IPs. They let calls keep working if the `.co` top-level domain has a DNS outage. If you allowlist by IP rather than by hostname, they're already covered, since the IPs are shared.
</Note>

You'll need to allow the following connections for WebRTC media:

* **STUN:** Required for all media connection types. We recommend both for the best call experience.
  * `stun.cloudflare.com` over UDP/3478 and UDP/53
  * `*.stun.twilio.com`, or at least `global.stun.twilio.com`; [IPs and ports documented here](https://www.twilio.com/docs/stun-turn/regions)
* **UDP direct connection to media servers** for the best call quality:
  * `*.wss.daily.co`, `*-wss.daily.co`, `*.wss.dailywebrtc.com`, `*-wss.dailywebrtc.com`, `*.wss.dailywebrtc.net`, and `*-wss.dailywebrtc.net` over TCP/443, TCP/40000-49999, UDP/23000-26999, and UDP/40000-49999, or all of the `sfu` hostnames and port ranges in [the IP list](https://ip-info.daily.co/ips/ip-info.json)
* **TURN** for relaying media over UDP, TCP, or TLS. We recommend both for the best call experience.
  * `turn.cloudflare.com` over UDP and TCP 3478, UDP/53, TCP/80, TCP/5349, and TCP/TLS 443, [documented here](https://developers.cloudflare.com/realtime/turn/)
  * `*.turn.twilio.com`, [documented here](https://www.twilio.com/docs/stun-turn/regions)

## Using the IP list

If your network tools don't allow wildcard hostnames, you can build an allowlist from [the IP list](https://ip-info.daily.co/ips/ip-info.json). It's a JSON document with these keys:

* `ipAddressInfo.sfu.hosts`: the call servers behind `*.wss.daily.co` and `*-wss.daily.co`. These carry call signaling and direct UDP media. Each host includes a concrete `dnsName` (for example `ip-129-151-164-228s-af-johannesburg-1.wss.daily.co`), its `ipAddress`, the exact `portRanges` it uses, a `provider`, and a `region` tag.
* `ipAddressInfo.web.hosts`: the IPs behind the web hostnames listed above. These entries are IP-only (no `dnsName`).
* `ipAddressInfo.sip.hosts`: the SIP servers for [dial-in and dial-out](/docs/guides/features/dial-in-dial-out) telephony. You only need these if you use Daily's SIP features. They aren't required for normal video calls.
* `lastUpdated`: when the list last changed.

Because the `dailywebrtc.com` and `dailywebrtc.net` fallback domains resolve to these same IPs, allowlisting by IP already covers them. The STUN and TURN IPs are not in this file: get Twilio's [from Twilio's documentation](https://www.twilio.com/docs/stun-turn/regions), and Cloudflare's [from Cloudflare's documentation](https://developers.cloudflare.com/realtime/turn/).

<Note>
  If your tools allow named hosts but not wildcards, you can allowlist the SFU servers by their concrete `dnsName` values instead of `*.wss.daily.co` or raw IPs. The `sfu` entries each include one; the `web` entries are IP-only. Two things to keep in mind. First, these names are as dynamic as the IPs: the `dnsName` encodes the host's IP (`ip-129-151-164-228s-...` resolves to `129.151.164.228`), so it changes whenever the IP changes. Treat the name list like the IP list and poll-and-diff it on the same schedule. Second, hostname (FQDN) firewall rules are reliable for the TCP/443 signaling, but some appliances apply them poorly to the direct UDP media, since UDP gives them no connection setup to key off. If direct UDP over hostnames is unreliable on a given appliance, allow only the TURN-over-443 media path and keep the `dnsName` entries for signaling.
</Note>

<Note>
  The `sfu` hosts are tagged with a `region` (for example `eu-central-1`, `eu-frankfurt-1`, `uk-london-1`). If you pin your rooms to a [`geo`](/reference/rest-api/rooms/create-room#body-properties-geo) region, you can keep only the hosts for the region(s) you use and drop the rest. Two cautions: the file uses more than one name for the same city (for example both `eu-central-1` and `eu-frankfurt-1` are Frankfurt), so keep every host whose region maps to your city. And allow the whole region's host set, not a single host, since a session can move between servers within a region.

  These are the `region` tags in [https://ip-info.daily.co/ips/ip-info.json](https://ip-info.daily.co/ips/ip-info.json) today, grouped by city:

  | City                  | Country        | Region tags                        |
  | --------------------- | -------------- | ---------------------------------- |
  | Cape Town             | South Africa   | `af-south-1`                       |
  | Frankfurt             | Germany        | `eu-central-1`, `eu-frankfurt-1`   |
  | Johannesburg          | South Africa   | `af-johannesburg-1`                |
  | London                | United Kingdom | `eu-west-2`, `uk-london-1`         |
  | Montreal, Quebec      | **Canada**     | `ca-montreal-1`                    |
  | Mumbai                | India          | `ap-south-1`, `ap-mumbai-1`        |
  | N. Virginia / Ashburn | United States  | `us-east-1`, `iad`                 |
  | Oregon                | United States  | `us-west-2`                        |
  | San Jose, California  | United States  | `us-sanjose-1`                     |
  | São Paulo             | Brazil         | `sa-east-1`, `sa-saopaulo-1`       |
  | Seoul                 | South Korea    | `ap-northeast-2`, `ap-seoul-1`     |
  | Singapore             | Singapore      | `ap-southeast-1`, `ap-singapore-1` |
  | Sydney                | Australia      | `ap-southeast-2`, `ap-sydney-1`    |

  Read the region tags from [https://ip-info.daily.co/ips/ip-info.json](https://ip-info.daily.co/ips/ip-info.json) rather than from this table. The set of regions can change, and the table is a snapshot.
</Note>

### Hosting your calls in other regions

If your network policy needs a region that isn't listed here, email [help@daily.co](mailto:help@daily.co).

<Warning>
  The list is dynamic. The IPs are stable day-to-day, but they do change, and a single snapshot is not permanent. When a change is coming, the file is updated 3 days before the change reaches production, which gives you lead time to update your firewall rules. There is no push notification or changelog, so poll the file on a schedule, compare `lastUpdated` (or diff the contents) against your last copy, and apply changes when it moves.
</Warning>

## Important considerations

If your network tools are blocking some of those hostnames, users may experience:

* Not being able to load the call interface at all
* Not being able to load virtual backgrounds
* Loading the call interface but being unable to connect to the call
* Connecting to the call but being unable to send or receive audio and video

<Warning>
  Proxies that decrypt and re-encrypt traffic can break WebRTC, causing users to connect to a call but not be able to send or receive media. Exclude TURN, STUN, and ICE traffic from inspection.
</Warning>

If you use a VPN, configure it to use split tunneling to bypass the VPN for Daily traffic. At a minimum, exempt port 443 for the Twilio IP ranges above. Ideally, exempt UDP traffic altogether.

If you've implemented these recommendations and some users still have problems connecting, use Daily's [Network Test page](https://network-test-v2.daily.co/) to diagnose which connections are failing.

## Advanced tools

In some cases, customers may not be able to allow access to the servers listed above. We have two features that can help: **Self-hosted IP Proxy** and **Self-hosted TURN**. [Contact us](https://www.daily.co/contact) for more information about our Advanced Firewall Control add-on.

<Note>
  If a network blocks direct UDP to the SFUs, you can skip the direct-connection attempts and force all media through TURN relay with [`setIceConfig({ iceTransportPolicy: 'relay' })`](/reference/daily-js/instance-methods/set-ice-config), set before the call connects. This drops the direct-UDP candidates and uses only relay candidates. It does not pin a specific transport: the relay uses whichever TURN transport the network allows, so on a network that only permits TCP/TLS 443 it lands on the HTTPS-looking 443 path. Relay-only adds latency and is meant for networks that require it, not as a default. Relay-only mode and supplying your own TURN servers are both part of the Advanced Firewall Control add-on.
</Note>

## WebRTC media connection types

WebRTC supports a few different kinds of connections for sending and receiving media:

**Direct UDP connection** is the ideal option. It provides the lowest latency and highest throughput. A participant needs to be able to send UDP traffic to `*.wss.daily.co`, `*.wss.dailywebrtc.com`, or `*.wss.dailywebrtc.net` over ports 23000-26999 and 40000-49999, and receive UDP traffic via [UDP hole punching](https://en.wikipedia.org/wiki/UDP_hole_punching). Most home networks and standard firewall configurations allow this.

**TURN relay** is the next best option. A participant needs to connect over UDP or TCP on port 3478. We use Cloudflare and Twilio as TURN providers. This adds a small amount of latency to the media connection (TCP more so than UDP) but is usually not noticeable to other participants.

**TURN over TLS/TCP 443** is the last fallback. It adds latency from both TCP overhead and TLS encryption per packet. This will degrade quality a bit more. However, this traffic looks like any other encrypted internet traffic to most firewalls, so it works in almost all cases.

## The minimal allowlist

If you can't open everything above, here is the smallest set that still lets a Daily call connect, plus what you give up by stopping there.

**The absolute minimum:**

1. **Web and signaling, over TCP/443:** `*.daily.co` (or your subdomain), `b.daily.co`, `c.daily.co`, `gs.daily.co`, `prod-ks.pluot.blue`, and the `*.wss.daily.co` / `*-wss.daily.co` signaling servers (the `web` and `sfu` IPs in the list). Without these, the call interface won't load or won't connect. None of this is optional.
2. **STUN:** `stun.cloudflare.com` and `global.stun.twilio.com`. At least one STUN provider is required for every media path; allow both for resilience.
3. **One media path, TURN over TLS/TCP 443:** `turn.cloudflare.com` and `*.turn.twilio.com`. This is the single most compatible media path, because the traffic looks like ordinary HTTPS and gets through almost any firewall.

That set will connect a call in nearly any network. It is the floor, not the recommendation.

**What you give up by stopping at the minimum:**

* All media is relayed through a TURN server over TCP and TLS. You pay added latency from TCP overhead and per-packet encryption, on top of the relay hop.
* TCP behaves badly under packet loss. It retransmits and stalls the whole stream (head-of-line blocking), while WebRTC over UDP would rather drop a packet and conceal the gap. On a lossy network, TURN over TCP sounds and looks noticeably worse.
* Quality drops most on video and on larger calls. One-to-one audio is usually fine. Multi-party video is where users feel it.
* You have no fallback. If the relay path has a problem, there's no direct UDP path to fall back to.

**The recommended minimum** adds **direct UDP media to the SFU IPs** (the `sfu` hosts, on UDP 23000-26999 and 40000-49999). This gives WebRTC a low-latency path and uses TURN only when UDP can't get through. For most networks this is the difference between "the call works" and "the call is good."

<Tip>
  If you can open only one thing beyond signaling and STUN, open direct UDP to the SFU IPs rather than TURN over TCP. UDP is the path that makes calls feel good. Keep TURN over TLS/443 as the fallback when you have room for it.
</Tip>

## Why traffic inspection breaks WebRTC media

A common reason calls connect but carry no audio or video is a proxy or appliance that tries to inspect the media. Exclude STUN, TURN, ICE, and the SFU media traffic from any decrypt-and-re-encrypt or deep-packet-inspection rule.

**Why inspection breaks it:**

* WebRTC media is encrypted end to end with DTLS-SRTP. The keys are negotiated in a DTLS handshake between the client and Daily. An inspection box in the middle doesn't have those keys, so when it intercepts the handshake or rewrites packets, key agreement fails and no media flows. The call connects (signaling worked) but stays silent and black.
* ICE, the part that finds a working path, depends on the client seeing its real public address and on consistent source ports. A proxy that rewrites or buffers these connectivity checks breaks candidate gathering, so the call never finds a path.

**Why inspecting this traffic is counterproductive:**

* There's nothing readable to inspect. The payload is already encrypted audio and video frames. A DPI box sees opaque SRTP, not content. It can't scan it for data loss or threats, because it can't decrypt it.
* Inspection appliances are built to reassemble TCP streams. WebRTC media is a high rate of small, independent, real-time UDP packets. Buffering them for inspection adds delay and jitter, which is exactly what degrades a live call, in exchange for no readable data.
* Real-time media tolerates a little loss but not added delay. Inspection adds delay. So it harms the one thing it can't even read.
* The security goal is better served another way. The destinations are a known, fixed set of Daily SFU and relay IPs you can allowlist (that's what this guide is for). Allowlisting where the encrypted media is allowed to go is far more effective than trying to inspect what's inside it.


# HIPAA Compliance for healthcare
Source: https://docs.daily.co/docs/guides/privacy-and-security/hipaa

Learn how to turn on HIPAA compliance with the Daily API.

<Badge>Healthcare add-on only</Badge>

With just a few lines of code, developers can embed HIPAA-compliant video calls. Both [Daily Prebuilt](/docs/prebuilt) and custom interfaces built using the [Daily call object](/docs/daily-js) can be used to build HIPAA-compliant applications.

## How to enable HIPAA compliance

1. Sign up for a Daily account at [dashboard.daily.co/signup](https://dashboard.daily.co/signup)
2. Add a credit card via the dashboard [billing page](https://dashboard.daily.co/billing)
3. Apply for the Healthcare add-on using this [form](https://forms.gle/TKfUm8sNp8QUsqKT8)

If you have any additional questions, [contact our support team](https://daily.co/contact-us).

## Business Associate Agreement (BAA)

To partner with you and build HIPAA-compliant applications, we've designed our APIs with data security and privacy as our top concern. We will sign a Business Associate Agreement (BAA) at no additional cost.

## HIPAA mode restrictions

<Warning>
  1. Room names are automatically replaced with random strings to keep PII out. If your workflow sets a custom room name, update that logic or the create-room call will fail.
  2. Logs and metrics will not include `userName` or non-UUID `userId` values.
  3. Recordings are restricted to local storage or a customer-managed S3 bucket — Daily's cloud storage is disabled.
</Warning>

## Room names

To create HIPAA-compliant rooms, use the [REST API](/reference/rest-api/rooms/create-room) to automatically create a randomized name for your room, preventing room names from including any PII or PHI. Trying to set a name manually will result in an error.

## HIPAA-compliant recording types

We offer three HIPAA-compliant recording options:

1. [`"local"`](/reference/daily-js/instance-methods/start-recording) recordings
2. [`"cloud"` and `"cloud-audio-only"`](/reference/daily-js/instance-methods/start-recording) recordings, but only when configured to store recordings in a custom S3 bucket
3. `"raw-tracks"` recordings (requires a custom S3 bucket)

These recordings are not stored on Daily servers.

<Warning>
  Accounts with HIPAA enabled cannot use live streaming, to maintain HIPAA compliance.
</Warning>

## Text chat

HIPAA-compliant text chat is available by default. When using Daily Prebuilt, text chat can be enabled via the `enable_chat` [room property](/reference/rest-api/rooms/create-room). Chat messages in Daily Prebuilt are never stored on Daily servers.

Developers can also build their own HIPAA-compliant text chat using Daily's [`sendAppMessage()`](/reference/daily-js/instance-methods/send-app-message) method. Chat data sent by `sendAppMessage()` is HIPAA-compliant by default. Developers are responsible for ensuring chat messages are not stored externally by their app.

## Pricing

HIPAA compliance requires the paid Healthcare add-on. Visit our [pricing page](https://www.daily.co/pricing) for more information.

<Tip>
  **Receive a \$15 credit for free**

  New accounts have a \$15 credit automatically applied when you add a credit card. Learn more about pay-as-you-go features on our [pricing page](https://www.daily.co/pricing).
</Tip>


# Working with Daily meeting tokens
Source: https://docs.daily.co/docs/guides/privacy-and-security/meeting-tokens

How to obtain, use, and validate Daily meeting tokens.

Daily meeting tokens can be used to set [options and permissions](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties) for users joining a Daily room. Examples of what a token can grant include:

* Access to a private room
* A preset user name
* Permission to initiate screen sharing or recording
* Automatic ejection after a set duration

## What is a Daily meeting token?

Daily meeting tokens are [JSON Web Tokens (JWTs)](https://en.wikipedia.org/wiki/JSON_Web_Token) — strings made up of three base64-encoded parts separated by periods:

* **Header:** algorithm and token type
* **Payload:** claims like expiry, issue time, and room privileges
* **Signature:** the header and payload signed with a secret

The JWT standard is detailed in [RFC 7519](https://tools.ietf.org/html/rfc7519).

An example JWT:

```bash theme={null}
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYmYiOjE1NDg3MjE1NjksImV4cCI6MTg2NDA4MTUzOCwiciI6ImhlbGxvIiwibyI6dHJ1ZSwic3MiOnRydWUsImVyIjoibG9jYWwiLCJkIjoiMjVkZjUwNTctZWYwZC00ZDk3LWJkZTYtMGNmMjg3Mjc2Y2JiIiwiaWF0IjoxNTQ4NzIxODMxfQ.mvVciAengBR4xCblhFpo4mKYftQv1skYO4Y6IKr9Zgo
```

The above token decodes to the following JSON payload:

```json theme={null}
{
  "nbf": 1548721569,
  "exp": 1864081538,
  "r": "hello",
  "o": true,
  "ss": true,
  "er": "local",
  "d": "25df5057-ef0d-4d97-bde6-0cf287276cbb",
  "iat": 1548721831
}
```

Self-signed tokens use abbreviated field names. See [token property abbreviations](./self-signing-tokens#token-property-abbreviations) for the full list.

## Getting a Daily meeting token

A Daily meeting token can be obtained either through the [REST API](/reference/rest-api/meeting-tokens/create-meeting-token), or by [self-signing a JWT](./self-signing-tokens) with your Daily API key.

### Via the REST API

Make a `POST` request to `https://api.daily.co/v1/meeting-tokens` with your chosen [token properties](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties):

```bash theme={null}
# Create a token for the room specified by DAILY_ROOM_NAME, with an expiry of 1 hour.
curl -H "Content-Type: application/json" \
     -H "Authorization: Bearer $DAILY_API_KEY" \
     -XPOST -d \
     '{"properties":{"room_name":"'`expr $DAILY_ROOM_NAME`'","exp":'`expr  $(date +%s) + 3600`'}}' \
     https://api.daily.co/v1/meeting-tokens
```

### Via self-signing

Tokens can also be self-signed using a JWT library. Example using [`jsonwebtoken`](https://www.npmjs.com/package/jsonwebtoken):

```javascript theme={null}
import * as jwt from 'jsonwebtoken';

function generateMeetingToken() {
  const payload = {
    r: 'daily-room-name',
    d: 'daily-domain-uuid',
  };
  try {
    const token = jwt.sign(payload, DAILY_API_KEY, { expiresIn: '1h' });
    return token;
  } catch (e) {
    throw new Error(`failed to create self-signed JWT: ${e.toString()}`);
  }
}
```

Refer to [token property abbreviations](./self-signing-tokens#token-property-abbreviations) when composing your payload.

### Security considerations

We recommend narrowing the scope and lifetime of your token as much as possible:

* **Always set an expiry.** A token without `exp` is valid forever.
* **Specify a room name.** A token without `r` is valid for every room on your domain.

If a Daily-signed token is compromised, the only way to revoke it is to delete the room it was generated for (if you specified one). If a self-signed token is compromised, you can revoke it by regenerating your API key in the [Daily dashboard](https://dashboard.daily.co/developers).

## Using a Daily meeting token

Pass the token as part of the [`join()`](/reference/daily-js/instance-methods/join) call:

```javascript theme={null}
const call = Daily.createCallObject();
call.join({
  token: DAILY_MEETING_TOKEN,
  url: DAILY_ROOM_URL,
});
```

<Note>
  If a meeting token is invalid, no error is emitted at join time. Privileged operations will simply fail when attempted.
</Note>

## Validating a Daily meeting token

To validate a token via the REST API, make a `GET` request to `https://api.daily.co/v1/meeting-tokens/[DAILY_MEETING_TOKEN]`:

```bash theme={null}
curl -H "Content-Type: application/json" \
     -H "Authorization: Bearer $DAILY_API_KEY" \
     https://api.daily.co/v1/meeting-tokens/$DAILY_MEETING_TOKEN
```

A `200` response includes an object with the token's [properties](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties). If the token is invalid, an error is returned.

If you're using a self-signed token, you can validate claims and signature locally using a JWT library without making an API request.


# Self-signing meeting tokens
Source: https://docs.daily.co/docs/guides/privacy-and-security/self-signing-tokens

Generate Daily meeting tokens locally using your API key, without making a round-trip to the Daily API.

<Warning>
  If you're unfamiliar with JWTs and how to create them, use the [`/meeting-tokens` endpoint](/reference/rest-api/meeting-tokens/create-meeting-token) instead.
</Warning>

Using your [API key](https://dashboard.daily.co/developers), you can self-sign tokens that will be accepted by the Daily backend, as long as the API key is still active at the time it is checked. This saves making a round-trip to the Daily API to generate tokens, which is useful if you need to update tokens often or create them in bulk.

## Generating self-signed tokens

Create a JWT using your domain's API key as the secret. The payload must include:

* **`r`**: the room name
* **`iat`**: the current time (Unix timestamp)
* **`d`**: your `domain_id`

```json theme={null}
{ "r": "test", "iat": 1610596413, "d": "30f866c3-9123-452a-8723-ff58322d09c5" }
```

Your `domain_id` is available from the [domain configuration endpoint](/reference/rest-api/domain/get-domain-config#response-domain-id).

To learn more about and test your tokens, refer to [https://jwt.io/](https://jwt.io/).

## Token property abbreviations

Self-signed token [properties](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties) use shortened field names in the JWT payload:

| Property                     | Abbreviation |
| ---------------------------- | ------------ |
| `nbf`                        | `nbf`        |
| `exp`                        | `exp`        |
| `domain_id`                  | `d`          |
| `room_name`                  | `r`          |
| `user_id`                    | `ud`         |
| `user_name`                  | `u`          |
| `is_owner`                   | `o`          |
| `knocking`                   | `k`          |
| `close_tab_on_exit`          | `ctoe`       |
| `redirect_on_meeting_exit`   | `rome`       |
| `intercom_join_alert`        | `ij`         |
| `start_cloud_recording`      | `sr`         |
| `start_cloud_recording_opts` | `sro`        |
| `auto_start_transcription`   | `ast`        |
| `enable_recording`           | `er`         |
| `enable_screenshare`         | `ss`         |
| `start_video_off`            | `vo`         |
| `start_audio_off`            | `ao`         |
| `meeting_join_hook`          | `mjh`        |
| `eject_at_token_exp`         | `ejt`        |
| `eject_after_elapsed`        | `eje`        |
| `lang`                       | `uil`        |
| `enable_recording_ui`        | `erui`       |
| `permissions`                | `p`          |

## Permissions abbreviations

The [`permissions`](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties-permissions) property uses the following abbreviated structure:

```javascript theme={null}
{
  // permissions - all fields optional
  "p": {
    // hasPresence
    "hp": boolean,
    // canSend
    "cs": boolean | // shorthand meaning "all" or "none"
          // A string with some or all of the following values, separated by commas:
          // "v" -> "video"
          // "a" -> "audio"
          // "sv" -> "screenVideo"
          // "sa" -> "screenAudio"
          "v,a,sv,sa",
    // canReceive
    "cr": {
      // base
      "b": boolean | // shorthand meaning "all" or "none"
          {
            "v": false,  // video
            "a": true,   // audio
            "sv": false, // screenVideo
            "sa": true,  // screenAudio
            "cv": {      // customVideo
              "*": false
            },
            "ca": {      // customAudio
              "*": true
            }
          },
      // byUserId
      "u": {
        "foo": boolean | { /* ... */ } // same values as base
        // more user_ids here, or "*" for "all user_ids"
      },
      // byParticipantId
      "p": {
        "42fb115a-6d42-4155-ae4f-c96629f5217d": boolean | { /* ... */ } // same values as base
        // more participant ids here, or "*" for "all participant ids"
      }
    },
    // canAdmin
    "ca": boolean | // shorthand meaning "all" or "none"
          // A string with some or all of the following values, separated by commas:
          // "p" -> "participants"
          // "s" -> "streaming"
          // "t" -> "transcription"
          "p,s,t"
  }
}
```


# Best practices to scale large experiences
Source: https://docs.daily.co/docs/guides/scaling-calls/best-practices-to-scale-large-experiences

Learn how to use pagination, track subscriptions, and simulcast layer control to optimize performance for large Daily calls.

As the number of call participants increases, the number of audio, video, and screen media tracks that need to be routed and then handled by each web client multiplies. This can drain CPU, strain networks to their limits (risking undelivered media streams), and degrade user experience quickly, especially on older or mobile devices.

To optimize performance on calls with hundreds of participants, [pagination](#pagination), [track subscriptions](#track-subscriptions), and [simulcast layer control](#simulcast-layer-control) can all be implemented using Daily's APIs.

## Pagination

Pagination limits the number of participants displayed on a screen at a time, so a call participant has to click to rotate through all other attendees. This reduces the load on any individual participant's CPU and bandwidth.

<Frame>
  <img />
</Frame>

Use the Daily [`participants()`](/reference/daily-js/instance-methods/participants) method to access the full list of active participants in a call. Once the participants are known, you can do the following to build out your pagination logic:

<Steps>
  <Step title="Establish UI constants">
    Define the minimum participant video tile width, default aspect ratio, and the maximum number of tiles per page.
  </Step>

  <Step title="Calculate pages">
    Use the UI constants and the number of call participants to calculate the total number of pages. The number of pages, and which participants are on each page, should update as the number of call participants changes, so set up the state management of your choice.
  </Step>

  <Step title="Add pagination controls">
    Add click handlers to the pagination buttons that update the app state to reflect the current page being viewed.
  </Step>

  <Step title="Determine visible participants">
    Set up a handler using the current page, number of participants, and maximum number of tiles per page to make a copy of the [participants object](/reference/daily-js/instance-methods/participants) that only includes visible participants.
  </Step>

  <Step title="Render the current page">
    Iterate over the visible participants object to render each participant in the UI.
  </Step>
</Steps>

## Track subscriptions

Daily calls operate on a publish-subscribe model: participants publish audio, video, and screen [`MediaStreamTrack`s](https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack), and are subscribed to other participant's tracks.

By default, Daily routes a participant's distinct set of tracks to all the other participants on a call. In large calls with hundreds and thousands of participants, decoding all that video can demand a lot of network bandwidth and processing power.

Turning off Daily's default track handling in favor of manual track subscriptions can deliver better call quality during sessions with many participants. Track subscriptions can also enable features like breakout groups, and improve features like pagination.

There are three steps to set up direct track subscriptions:

<Steps>
  <Step title="Set subscribeToTracksAutomatically to false">
    This turns off Daily's default track management. This property can be set on [`join()`](/reference/daily-js/instance-methods/join) or [call object creation](/reference/daily-js/factory-methods/create-call-object), or via the [`setSubscribeToTracksAutomatically()`](/reference/daily-js/instance-methods/set-subscribe-to-tracks-automatically) method. The latter is a good option if you want to wait to turn on track subscriptions until a certain number of participants have joined the call.

    <Warning>
      Calling `setSubscribeToTracksAutomatically(false)` during a call will unsubscribe from all tracks. You will need to manually re-subscribe to tracks as needed.
    </Warning>
  </Step>

  <Step title="Update participants' subscribed state">
    Call [`updateParticipant()`](/reference/daily-js/instance-methods/update-participant) or [`updateParticipants()`](/reference/daily-js/instance-methods/update-participants) to change the `subscribed` value of a participant's `tracks` property.

    Each participant's `tracks` include `audio` (microphone), `video` (camera), and `screenAudio` and `screenVideo` (screenshare). Each track has a `state` indicating if it can be played, and a `subscribed` value of `true`, `false`, or `"staged"`.

    A `subscribed` status of `"staged"` keeps the connection open but stops bytes from flowing — faster to promote than a full unsubscribe, while still saving bandwidth. Paginated grid apps (including [Daily Prebuilt](/docs/prebuilt)!) often subscribe to tracks on the current page, stage the previous and next pages, and unsubscribe from the rest.

    <img alt="Graphic with subscribed participant tiles in green, staged in the previous and next tiles in yellow, unsubscribed in red" />

    `updateParticipant()` receives an object with the participant's `id` as the key and a `setSubscribedTracks` object as the value:

    ```json theme={null}
    {
      "82e969ed-d081-4f27-92a8-8014609a1919": {
        "setSubscribedTracks": {
          "video": "staged",
          "audio": "staged"
        }
      }
    }
    ```

    If updating multiple participants at once, combine them into one object with `updateParticipants()`.
  </Step>

  <Step title="Listen for participant events">
    The `updateParticipant()` method fires a corresponding [`"participant-updated"`](/reference/daily-js/events/participant-events#participant-updated) event. Add a listener to this event to update the app interface as participants' tracks `state` and `subscribed` statuses change in response.
  </Step>
</Steps>

## Simulcast layer control

When a participant joins a call, their tracks are first sent to a Selective Forwarding Unit (SFU). From there, the SFU processes, re-encrypts, and routes media tracks to participants, allowing tracks to be "selectively" forwarded.

<Frame>
  <img alt="SFU square in center of graphic forwards arrows out from other squares representing tracks forwarded to other participants" />
</Frame>

With [WebRTC simulcast](https://www.w3.org/TR/webrtc/#simulcast-functionality), instead of sending a single track to the SFU, a publishing participant's web client sends the same source track at a few different resolutions, bitrates, and frame rates. Each of these groups of settings is known as a simulcast layer.

By default, the Daily client and SFU will work to send the highest layer possible.

There are several factors that affect which layer a participant receives:

1. **The available bandwidth on the receiving end**: The SFU will send a lower layer if the current one exceeds the available bandwidth.
2. **The send-side is not sending all the layers**: This typically occurs when the browser detects network or CPU issues or the highest video resolution of the device does not support the highest layers. It's also worth noting that the browser can and will modify the actual bitrate, frame rate, and resolution sent on each layer for these same reasons, so the actual settings used oftentimes do not match the configuration.

### Default simulcast layer settings in daily-js

<Tabs>
  <Tab title="Desktop">
    |                           | Layer 0 | Layer 1 | Layer 2  |
    | ------------------------- | ------- | ------- | -------- |
    | Bitrate (bps)             | 90,000  | 200,000 | 680,000  |
    | Frame rate (fps)          | 15      | 15      | 30       |
    | Resolution (width height) | 320x180 | 640x360 | 1280x720 |
  </Tab>

  <Tab title="Mobile">
    |                             | Layer 0 | Layer 1  |
    | --------------------------- | ------- | -------- |
    | Bitrate (bps)               | 110,000 | 520,000  |
    | Frame rate (fps)            | 15      | 30       |
    | Resolution (width x height) | 320x180 | 1280x720 |
  </Tab>

  <Tab title="React Native">
    |                             | Layer 0 | Layer 1  |
    | --------------------------- | ------- | -------- |
    | Bitrate (bps)               | 220,000 | 520,000  |
    | Frame rate (fps)            | 15      | 30       |
    | Resolution (width x height) | 320x180 | 1280x720 |
  </Tab>
</Tabs>

<Warning>
  The above defaults are specific to applications built with our [daily-js](/docs/daily-js). Daily Prebuilt is optimized with its own application-appropriate defaults.
</Warning>

While the default Daily simulcast management suits most use cases, it is possible to adjust the quality of both the video a participant publishes to the server (send-side) and the video that participants receive (receive-side). This can be useful in large calls as a tool to optimize bandwidth, but proceed with caution. Attempting to make changes while calls are in progress or to use values beyond browsers' capacities can cause problems. Please [reach out](https://www.daily.co/contact) if we can help.

<Tip>
  Daily recommends aiming for a maximum bandwidth usage around 3 Mbps for most participants to ensure the best experience for everyone. For example, if you use [`sendSettings`](/reference/daily-js/types/daily-call-options#param-send-settings) to set a main speaker's highest spatial layer to 2 Mbps, then you'd want to make sure the other participant thumbnail videos don't add up to more than 1 Mbps. Otherwise, people's browsers will start using too much CPU to decode video and they'll see A/V sync issues, or other participants with slower connections will experience dropouts.
</Tip>

## Change send-side video quality

Adjusting the quality of the video that participants send to the server can be useful in large calls. For example, the main active speaker showcased prominently in the UI could send higher quality video than the other call participants.

There are two properties that can be manipulated to adjust send-side video quality: `sendSettings` or `userMediaVideoConstraints`.

### `sendSettings`

The `sendSettings` are where a participant's layer settings are defined. These can be configured when the call object is created (via the [call object property](/reference/daily-js/types/daily-call-options#param-send-settings) or by using the [`updateSendSettings()`](/reference/daily-js/instance-methods/update-send-settings) instance method. Through these APIs you can define `maxBitrate`, `maxFramerate`, and `scaleResolutionDownBy` values to set encodings for spatial layers that differ from Daily defaults.

* `maxBitrate`: the desired video bitrate for the layer, in bits per second.
* `maxFramerate`: an integer value lower than the maximum rate expected from the camera, in frames per second.
* `scaleResolutionDownBy`: an integer of 1 or greater. The horizontal and vertical dimensions of the source video will be divided by this number to get the resolution for the layer.

```javascript theme={null}
// Example: create a Daily call object with one custom simulcast layer configuration

const call = Daily.createCallObject({
  sendSettings: {
    video: {
      encodings: {
        low: {
          maxBitrate: 75000,
          scaleResolutionDownBy: 4,
          maxFramerate: 15,
        },
        medium: {
          maxBitrate: 300000,
          scaleResolutionDownBy: 2,
          maxFramerate: 30,
        },
      },
    },
  },
});
```

### `inputSettings`

The `inputSettings` are where a particant's [media constraints](https://w3c.github.io/mediacapture-main/#media-track-constraints) and processors can be defined/overriden. Here, you can enforce what the browser gets from a web cam before its ever sent over the wire by defining a maximum resolution (`width` and `height` values) and/or frame rate (`maxFramerate`). You can set these properties on call object creation via the [call object property](/reference/daily-js/types/daily-call-options#param-input-settings) or by using the [`updateInputSettings()`](/reference/daily-js/instance-methods/update-input-settings) instance method.

```javascript theme={null}
// Example: request specific trackConstraints

call.updateInputSettings({
  video: {
    settings: {
      width: 400,
      height: 400,
    },
  },
});
```

## Adjust receive-side video quality

The Daily [receiveSettings API](/reference/daily-js/instance-methods/update-receive-settings) can be used to override the SFU estimated forwarding and request a specific simulcast layer instead.

If many participant videos will be displayed or if they will be rendered on small mobile screens, for example, programmatically requesting a lower bitrate layer can improve call performance. Lower quality videos not only save downstream bandwidth, but also can dramatically improve CPU performance since they require fewer resources to render.

<Frame>
  <img alt="Graphic shows four participants at highest quality layer, nine at medium quality, twelve at lowest quality" />
</Frame>

To use Daily receiveSettings to request a specific simulcast layer:

1. Request the updated simulcast layer, either through [`updateReceiveSettings()`](/reference/daily-js/instance-methods/update-receive-settings) or by setting `receiveSettings` in the [client properties](/reference/daily-js/types/daily-call-options#param-receive-settings) join().

2. Listen for the [`"receive-settings-updated"` event](/reference/daily-js/events/settings-events#receive-settings-updated) to update the app interface in response.

A common pattern for large calls is to default all participants to a low quality layer and promote only the active speaker to full quality:

```javascript theme={null}
// Default everyone to the lowest layer
await call.updateReceiveSettings({ '*': { video: { layer: 0 } } });

let currentSpeakerId = null;

call.on('active-speaker-change', async ({ activeSpeaker }) => {
  const updates = {};

  // Reset the previous speaker back to the default
  if (currentSpeakerId) {
    updates[currentSpeakerId] = 'inherit';
  }

  // Promote the new active speaker to the highest layer
  if (activeSpeaker.peerId) {
    updates[activeSpeaker.peerId] = { video: { layer: 2 } };
    currentSpeakerId = activeSpeaker.peerId;
  }

  await call.updateReceiveSettings(updates);
});
```

The `'*'` key sets the default for all participants. `'inherit'` resets an individual back to that default. This keeps the total number of API calls small — one call per speaker change rather than one per participant.

## Analyzing large call performance

See the [logs and metrics guide](/docs/guides/architecture-and-monitoring/logging-and-metrics) for details on analyzing call quality.


# Scaling Daily applications
Source: https://docs.daily.co/docs/guides/scaling-calls/index

Guides and best practices for building large-scale call experiences with Daily.

Daily supports three approaches to large-scale experiences, each differing in latency and scale:

| Approach                   | Max participants          | Latency  |
| -------------------------- | ------------------------- | -------- |
| Large real-time calls      | 1,000 (all active)        | \< 200ms |
| Interactive live streaming | 100,000 (25 active)       | \< 400ms |
| RTMP live streaming        | Unlimited passive viewers | 8–20s    |

<Note>
  **Active** participants have a "presence" in a call — they can turn on their devices and appear in [`participants()`](/reference/daily-js/instance-methods/participants). **Hidden** (passive) participants can view the call in real time but cannot turn on devices and do not appear in `participants()`.

  Active and hidden counts are available via [`participantCounts()`](/reference/daily-js/instance-methods/participant-counts) and the [`"participant-counts-updated"`](/reference/daily-js/events/participant-events#participant-counts-updated) event.
</Note>

<CardGroup>
  <Card title="Large real-time calls" icon="users-rays" href="/docs/guides/scaling-calls/large-real-time-calls">
    Room configurations and settings to support up to 1,000 active participants.
  </Card>

  <Card title="Interactive live streaming and RTMP output" icon="broadcast-tower" href="/docs/guides/scaling-calls/interactive-live-streaming-rtmp-output">
    Scale to 100,000 participants with interactive live streaming, or broadcast to external platforms via RTMP.
  </Card>

  <Card title="Best practices for large experiences" icon="clipboard-check" href="/docs/guides/scaling-calls/best-practices-to-scale-large-experiences">
    Pagination, track subscriptions, and simulcast layer control to optimize performance at scale.
  </Card>
</CardGroup>


# Interactive live streaming and RTMP output
Source: https://docs.daily.co/docs/guides/scaling-calls/interactive-live-streaming-rtmp-output

Learn how to build WebRTC-powered calls of up to 100,000 participants, or broadcast to external platforms via RTMP.

Daily's interactive live streaming refers to calls where up to 25 participants can turn on devices and a total of 100,000 participants can watch the call in real time.

Alternatively, Daily sessions can be broadcast to multiple live streaming platforms using RTMP output.

## Choosing between interactive live streaming and RTMP output

Both interactive live streaming and RTMP output can support large audiences. They are two different technologies that offer your audience different latencies and levels of engagement.

Interactive live streaming is useful when all participants need to view and hear the discussion in real time. Some examples include:

* Live commerce, where attendees need to bid or shop in real time
* A town hall, where an attendee doesn't need to have their camera on, but needs to be able to submit chat questions in real time

With Daily's interactive live streaming, up to 100,000 participants can join; they can watch/listen (as well as chat) in real time. Up to 25 participants can have their cams/mics on.

In contrast, you may not need full audience engagement in real-time — for example, broadcasting an interview where a delay is acceptable. You can use [Daily Prebuilt](https://www.daily.co/prebuilt) or build a custom app with our [client SDKs](/docs/daily-js) to conduct the interview, then connect that Daily call to a streaming platform like AWS IVS, YouTube Live, or Twitch via RTMP output. Your audience watches the stream with latencies ranging between 8 and 20 seconds (depending on the platform), compared to the sub-400ms latency of a Daily interactive live stream.

## Interactive live streaming: Up to 100,000 participants

<img alt="Large call with 100,000 participants" />

Interactive live streaming is a type of few-to-many call. It allows up to 25 call participants to turn on their devices and up to 100,000 attendees to view the call in real-time.

### Active vs. hidden participants

Participants who can turn on their devices are considered "active" and participants who cannot turn on devices are considered "hidden."

<Note>
  **Active** participants are participants who have a "presence" in a call. They can turn on their devices during the call and have their participant information available in the [`participants()`](/reference/daily-js/instance-methods/participants) method return value.

  **Hidden** (or "passive") participants are considered to not have a "presence." They can view a real-time call but cannot turn on their devices and do *not* have their participant information returned by the [`participants()`](/reference/daily-js/instance-methods/participants) method.

  Active and hidden participant count totals can be retrieved via the [`participantCounts()`](/reference/daily-js/instance-methods/participant-counts) method and tracked via the [`"participant-counts-updated"`](/reference/daily-js/events/participant-events#participant-counts-updated) event.
</Note>

### General rules for 100,000-participant calls

There are a few key numbers to be aware of:

* Daily calls involving more than 1,000 participants should be configured as interactive live streams.
* At most, 25 participants can be active (cameras and microphones on), plus one screen share.
* All other participants must have cameras and microphones off.
* Every client will receive real-time video and audio, whether they're a speaker or attendee.

<Tip>
  When we say "real-time", we mean it! We have a 82ms median end-to-end network latency for all sessions across our global user base.
</Tip>

[Custom](/docs/daily-js) implementations can have their performance further optimized with our [best practice](/docs/guides/scaling-calls/best-practices-to-scale-large-experiences) suggestions.

### Daily Prebuilt configurations to support 100,000 participants

To set up interactive live streaming with Daily Prebuilt, the following room and/or domain properties must be set to `true`:

* [`enable_mesh_sfu`](/reference/rest-api/rooms/get-room#response-config-enable-mesh-sfu)
* [`enable_terse_logging`](/reference/rest-api/rooms/get-room#response-config-enable-terse-logging)
* [`enable_hidden_participants`](/reference/rest-api/rooms/get-room#response-config-enable-hidden-participants)
* [`experimental_optimize_large_calls`](/reference/rest-api/rooms/get-room#response-config-experimental-optimize-large-calls)

The room's default permissions should also be configured so that participants cannot send media by default:

```json theme={null}
"permissions": {
  "canSend": false,
  "hasPresence": true,
  "canAdmin": false
}
```

Owners (presenters) should join with a [meeting token](/reference/rest-api/meeting-tokens/create-meeting-token) that grants full permissions:

```json theme={null}
"permissions": {
  "canSend": true,
  "hasPresence": true,
  "canAdmin": true
}
```

Here is an example cURL command creating a room with these properties and permissions:

```bash theme={null}
curl --request POST \
 --url https://api.daily.co/v1/rooms/ROOM-NAME \
 --header 'Authorization: Bearer TOKEN' \
 --header 'Content-Type: application/json' \
 --data '{"properties":{"enable_mesh_sfu":true,"enable_terse_logging":true,"enable_hidden_participants":true,"experimental_optimize_large_calls":true,"permissions":{"canSend":false,"hasPresence":true,"canAdmin":false}}}'
```

### Custom app configurations to support 100,000 participants

To set up an interactive live streaming session with a custom Daily app, the following room properties must be set to `true`:

* [`enable_mesh_sfu`](/reference/rest-api/rooms/get-room#response-config-enable-mesh-sfu)
* [`enable_terse_logging`](/reference/rest-api/rooms/get-room#response-config-enable-terse-logging)
* [`enable_hidden_participants`](/reference/rest-api/rooms/get-room#response-config-enable-hidden-participants)

Here is an example cURL command enabling these room properties:

```bash theme={null}
curl --request POST \
 --url https://api.daily.co/v1/rooms/ROOM-NAME \
 --header 'Authorization: Bearer TOKEN' \
 --header 'Content-Type: application/json' \
 --data '{"properties":{"enable_mesh_sfu":true,"enable_terse_logging":true,"enable_hidden_participants":true}}'
```

To control who starts a call as a presenter and who starts as a viewer, consider using the `start_audio_off` and `start_video_off` [meeting token properties](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties).

* Presenters should have these properties set to `false` (the default), so their devices start on.
* Viewers should have these properties set to `true`, so their devices are off when they join.

You can also limit who can turn on devices via the [`is_owner`](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties-is-owner) meeting token property, and only allow meeting owners to access their devices.

<Warning>
  Balancing the number of total participants with the number of devices turned on is important for managing app performance. To host calls with **more than** 12 active participants (i.e. with devices on) and **more than** 200 total participants, [contact our support team](https://www.daily.co/contact).
</Warning>

## RTMP output (live streaming)

<Badge>Paid plans only</Badge>

Daily sessions can be broadcast to multiple live streaming platforms, like AWS IVS or YouTube Live. Live streaming can be the best option for a large call if hundreds of thousands of people or more could be tuning in, or if providing a viewing link to attendees is preferred to managing silent participants on a call. For more details on Daily live streaming and how to implement it, head to the [live streaming guide](/docs/guides/features/live-streaming).

To learn more about customizing the layout of Daily live streams or adding custom graphics, read our guide on using [Daily's Video Component System (VCS)](/docs/vcs).


# Large real-time calls
Source: https://docs.daily.co/docs/guides/scaling-calls/large-real-time-calls

Learn how to configure Daily rooms for WebRTC-powered calls of up to 1,000 active participants.

Daily defines large calls as sessions with up to 1,000 active participants. Conference breakout rooms or workshops, corporate trainings, and other virtual events where any participant may need to speak all fall under this category.

Platforms to support large sessions can be built using [Daily Prebuilt](/docs/prebuilt) or any of Daily's Client SDKs. No matter your platform, core Daily features like recording, live streaming, and transcription are all available.

## Configuration

To support large calls of over 50 participants and up to 1,000 participants, you'll need to set the following domain/room configuration options:

* The [`experimental_optimize_large_calls`](/reference/rest-api/rooms/update-room#body-properties-experimental-optimize-large-calls) room configuration must be set to `true`. This setting is optional for custom clients, but required for Prebuilt. On custom clients, this setting as the same affect as `start_audio_off`.
* The [`enable_terse_logging`](/reference/rest-api/rooms/get-room#response-config-enable-terse-logging) room configuration option must be set to `true` when a room is expected to have more than 200 participants joining. When this setting is enabled, certain per-participant logs will be suppressed to reduce overhead and prevent performance issues. You can control room participant limits using the [`max_participants`](/reference/rest-api/rooms/get-room#response-config-max-participants) room configuration option.
* Be sure that mesh SFU is enabled. This can be done at the [room](/reference/rest-api/rooms/update-room#body-properties-enable-mesh-sfu) or [domain](/reference/rest-api/domain/set-domain-config#body-properties-enable-mesh-sfu) level. *Note: This is on be default, so you only need to set it if it has been disabled.*

## Daily Prebuilt

The `experimental_optimize_large_calls` room configuration will have several side effects in Daily Prebuilt to help manage your call's performance with such a large number of participants:

* The local participant will be automatically muted on join. They can unmute as needed once they've joined a call.
* The grid view will show a maximum of 12 participants in the grid at a time, compared to the default of 25 and maximum of 49.
* Only 16 users can be unmuted at the same time. When more than 16 users are unmuted, the oldest active speaker will be automatically muted.

In addition to these room settings, Daily Prebuilt is built to optimize performance based on its layout options. With Daily Prebuilt, each participant can view the call with either of the following two views:

1. Active speaker layout, where the person currently speaking takes up the majority of the screen.

   <img alt="Daily Prebuilt active speaker mode" />

2. Grid view, a paginated grid layout with a subset of participants visible on screen.

   <img alt="Daily Prebuilt grid view" />

In larger calls, grid view will automatically be paginated and active speaker mode will have a scrollable participant bar for the non-active participants. These features help avoid all media tracks being rendered at the same time.

## Custom Clients

Interactive sessions built using one of Daily's Client SDKs not only offer deeper control over branding, design, and experience, but also open up potential for direct [track subscription management](/docs/guides/scaling-calls/best-practices-to-scale-large-experiences#track-subscriptions).

These calls can support up to 1,000 participants with all cameras on, with each participant viewing (and receiving tracks from) at most 12 other participants at a time.

To further optimize performance of custom apps hosting large calls, read our [guide on best practices for scaling large experiences](/docs/guides/scaling-calls/best-practices-to-scale-large-experiences).


# Daily Client SDK for iOS
Source: https://docs.daily.co/docs/ios/index

Build real-time video and audio calling into your native iOS applications.

The Daily Client SDK for iOS is a native Swift library built on WebRTC. It handles media negotiation, network traversal, and participant management so you can focus on building your UI.

<CardGroup>
  <Card title="Quickstart" icon="rocket" href="/docs/ios/quickstart">
    Build a working video call app step by step
  </Card>

  <Card title="Screen sharing" icon="display" href="/docs/ios/screen-share">
    Add screen share to your iOS app
  </Card>

  <Card title="API reference" icon="code" href="https://reference-ios.daily.co/">
    Full Swift API docs
  </Card>
</CardGroup>

## Hello, world

Add the SDK via Swift Package Manager (`https://github.com/daily-co/daily-client-ios.git`), then join a call:

```swift theme={null}
import Daily

class CallViewController: UIViewController {
    let call: CallClient = .init()
    var videoViews: [ParticipantId: VideoView] = [:]

    override func viewDidLoad() {
        super.viewDidLoad()
        call.delegate = self

        call.join(url: URL(string: "https://your-domain.daily.co/room-name")!) { result in
            switch result {
            case .success: print("Joined!")
            case .failure(let error): print("Error: \(error)")
            }
        }
    }

    @IBAction func didTapTurnOffCamera(_ sender: UIButton) {
        call.setInputEnabled(.camera, false)
    }
}

extension CallViewController: CallClientDelegate {
    func callClient(_ callClient: CallClient, participantJoined participant: Participant) {
        guard !participant.info.isLocal else { return }
        let videoView = VideoView()
        videoViews[participant.id] = videoView
        addVideoViewToMyUI(view: videoView)
        videoView.track = participant.media?.camera.track
    }

    func callClient(_ callClient: CallClient, participantUpdated participant: Participant) {
        videoViews[participant.id]?.track = participant.media?.camera.track
    }

    func callClient(_ callClient: CallClient, participantLeft participant: Participant, withReason reason: ParticipantLeftReason) {
        videoViews.removeValue(forKey: participant.id)
    }
}
```

## API structure

The SDK is organized around the tasks involved in building a call. For each task you get properties/methods to **update** state, properties to **get** current state, and **delegate callbacks** via `CallClientDelegate` to react to changes.

<CardGroup>
  <Card title="Call lifecycle" icon="phone" href="https://reference-ios.daily.co/documentation/daily/callclient">
    `join()`, `leave()`, `callState`, `callClient(_:callStateUpdated:)`
  </Card>

  <Card title="Participants" icon="users" href="https://reference-ios.daily.co/documentation/daily/callclientdelegate">
    `participants()`, `participantJoined`, `participantUpdated`, `participantLeft`
  </Card>

  <Card title="Media inputs" icon="video" href="https://reference-ios.daily.co/documentation/daily/callclient/updateinputs(_:completion:)">
    `updateInputs()`, `setInputEnabled()`, `callClient(_:inputsUpdated:)`
  </Card>

  <Card title="Publishing" icon="signal-stream" href="https://reference-ios.daily.co/documentation/daily/callclient/updatepublishing(_:completion:)">
    `updatePublishing()`, `setIsPublishing()`, `callClient(_:publishingUpdated:)`
  </Card>

  <Card title="Subscriptions" icon="rss" href="https://reference-ios.daily.co/documentation/daily/callclient/updatesubscriptions(forparticipants:participantswithprofiles:completion:)">
    `updateSubscriptions()`, `updateSubscriptionProfiles()`, `setSubscriptionState()`
  </Card>

  <Card title="Active speaker" icon="microphone" href="https://reference-ios.daily.co/documentation/daily/callclient/activespeaker">
    `activeSpeaker`, `callClient(_:activeSpeakerChanged:)`
  </Card>
</CardGroup>

## Resources

<CardGroup>
  <Card title="Demo app" icon="github" href="https://github.com/daily-demos/daily-ios-demo">
    A complete working example on GitHub
  </Card>

  <Card title="Starter kit" icon="toolbox" href="https://github.com/daily-demos/daily-ios-starter-kit">
    Production-ready boilerplate from Daily's engineering team
  </Card>
</CardGroup>

## Requirements

* iOS deployment target >= 13.0
* Xcode 13 or later


# Installing the Daily Client SDK for iOS
Source: https://docs.daily.co/docs/ios/installation

Learn how to get set up with the Daily Client SDK for iOS.

## Minimum iOS version

The Daily Client SDK for iOS requires iOS ≥ 13.0.

## Swift Package Manager

In Xcode, go to `File -> Add Packages...` and enter the following URL in 'Search or Enter Package URL' textbox in the top right corner of that window:
`https://github.com/daily-co/daily-client-ios`

Pick the desired dependency rule (under “Dependency Rule”), as well as build target (under “Add to Project”) and click “Add Package”.

> Note: If you intend to use screen sharing, please add both Products, Daily and DailySystemBroadcast. For more details, refer to [daily-client-ios](https://github.com/daily-co/daily-client-ios) on GitHub.

## Cocoapods

Add the following line to your [Podfile file](https://guides.cocoapods.org/using/the-podfile.html):

```bash theme={null}
pod 'Daily', '~> 0.39.0'
# In case you wish to add support for screen sharing
pod 'DailySystemBroadcast', '~> 0.39.0'
```

At which point it might look something like this:

```bash theme={null}
target 'MyApp' do
  pod 'Daily', '~> 0.39.0'
  # In case you wish to add support for screen sharing
  pod 'DailySystemBroadcast', '~> 0.39.0'
end
```

## App setup

You will need to update your project's `Info.plist` to add three new entries with the following keys:

* `NSCameraUsageDescription`
* `NSMicrophoneUsageDescription`
* `UIBackgroundModes`

For the first two key's values, provide user-facing strings explaining why your app is asking for camera and microphone access.

`UIBackgroundModes` is handled slightly differently and will resolve to an array. For its first item, specify the value `voip`. This ensures that audio will continue uninterrupted when your app is sent to the background.

To add the new entries through Xcode, open the `Info.plist` and add the following three entries:

| Key                                    | Type   | Value                                              |
| -------------------------------------- | ------ | -------------------------------------------------- |
| Privacy - Camera Usage Description     | String | "Daily Playground needs camera access to work"     |
| Privacy - Microphone Usage Description | String | "Daily Playground needs microphone access to work" |
| Required background modes              | Array  | 1 item                                             |
| ---> Item 0                            | String | "App provides Voice over IP services"              |

If you view the raw file contents of Info.plist, it should look like this:

```xml theme={null}
<dict>
    ...
    <key>NSCameraUsageDescription</key>
    <string>Daily Playground needs camera access to work</string>
    <key>NSMicrophoneUsageDescription</key>
    <string>Daily Playground needs microphone access to work</string>
    <key>UIBackgroundModes</key>
    <array>
        <string>voip</string>
        <string>audio</string>
    </array>
    ...
</dict>
```

***

To learn more about building an app with the Daily Client SDK for iOS, see our [iOS Overview](/docs/ios/) and [iOS demo app](https://github.com/daily-demos/daily-ios-demo).


# Daily iOS Mobile SDK Swift Quickstart
Source: https://docs.daily.co/docs/ios/quickstart

Learn how to get started using the Daily iOS Mobile SDK with Swift to create a video mobile application

In this quickstart, we will introduce you to [Daily's Client SDK for iOS](/docs/ios) by walking through the creation of a simple video call application. By the end of this walkthrough, you'll have a starting point for writing Daily-powered video apps for iOS with Swift.

This walkthrough will implement the following features:

* Creating and joining a public Daily room
* Asking for required application permissions
* Displaying videos from local and remote room participants
* Managing local microphone and camera input
* Leaving the call

You can find the full codebase of this iOS app [on GitHub](http://github.com/daily-demos/quickstart-ios).

## Prerequisites

Before you get started, make sure you have a functioning iOS development environment, including the latest version of [Xcode](https://developer.apple.com/xcode/). You will also need a [free Daily account](https://www.daily.co/signup).

If you want to test your app with a physical iOS device, make sure you have iOS 13.0 or newer, have [enabled your device to run your own applications](https://developer.apple.com/documentation/xcode/distributing-your-app-to-registered-devices), and have [enabled developer mode on your device](https://developer.apple.com/documentation/xcode/enabling-developer-mode-on-a-device).

## Create a Daily room

Begin by navigating to Daily's developer dashboard and [creating a new Daily room](https://dashboard.daily.co/rooms/create).

<img alt="Create a room in the Daily Dashboard" />

Give your room a name and click the "Create room" button. All other options can be left at their defaults.

Make note of your Daily room URL. We'll be using it in the code shortly.

## Create a new iOS project

Open Xcode and create a new project. Select the App template for your new project from the iOS tab:

<img alt="Create a new project using the iOS template" />

In the project details window, enter your project and organization name. Select "Storyboard" in the "Interface" dropdown and click "Next":

<img alt="Create a new project using the iOS template" />

You'll be prompted to pick a directory for your project. Once done, click "Create" to finish the process.

## Add a dependency on Daily's Client SDK for iOS

With your new project created, you can add the Daily's iOS SDK as a dependency. When building an application using Xcode and Swift, you can use the Swift Package Manager to help you manage application dependencies.

In the top left corner of your Xcode window, press the File tab and select the "Add Packages..." option.

<img alt="Add Daily dependencies to Xcode" />

In the search box at the top right hand corner, paste in the GitHub URL of Daily's iOS SDK repository: `https://github.com/daily-co/daily-client-ios.git`

A `daily-client-ios` package will appear:

<img alt="Find the daily-client-ios package" />

Select "Branch" from the Dependency Rule dropdown and set the branch to `main`. Then, click "Add Package".

Xcode will now verify and load the package, then display a "Choose Package Products" dialog. Ensure "Daily" is selected and click "Add Package" again:

<img alt="Add Daily dependencies to Xcode" />

<Note>
  Daily recommends using the latest stable version of the package that is
  compatible with your project requirements and your Swift version. Always check
  the release notes of the package to ensure there are no breaking changes that
  could impact your project.
</Note>

In the project details page (which is shown by default), set the project's minimum deployment version to the version of iOS installed on your phone, which must be at least iOS 13.0.

<img alt="Set the project's minimum deployment to iOS 13.0" />

## Set application permissions

The application will need to be granted permissions to access the internet, use the device camera, and record and play audio.

Click on the parent Xcode project name in the project navigation sidebar:

<img alt="Open project settings" />

Click on the "Build Settings" tab and then the "All" sub-tab:

<img alt="Open build settings" />

In the "Filter" input box on the right, type "Camera". Once the "Privacy - Camera Usage Description" row appears, double click on the second column and enter: `"Camera is necessary for transmitting video in a call"`:

<img alt="Add camera usage description" />

Next, do the same with "Privacy - Microphone Usage Description", setting the description to `"Microphone is necessary for transmitting audio in a call"`.

To ensure that audio will continue uninterrupted when your app is sent to the background, you also need to add the `BackgroundModes` capability. To do so, right-click on the `Info.plist` file. Choose "Open As -> Source Code" from the context menu. Then, copy and paste the XML code fragment below into the outermost parts of the file's body (`<dict>...</dict>`): add the following key and value to the top-level `<dict>`:

```xml theme={null}
	<key>UIBackgroundModes</key>
	<array>
		<string>voip</string>
	</array>
```

To confirm your changes are in the right place, refer to the resulting [`Info.plist` file on GitHub](https://github.com/daily-demos/quickstart-ios/blob/main/DailyQuickstart/Info.plist).

## Define the user interface

After implementing permission handling, we can define the user interface for our application. The UI will support the following functionality:

* Displaying participants' video
* Presenting call controls for toggling the camera/microphone and leaving the meeting

Open `ViewController.swift` and declare the following UI elements within the `ViewController` class:

```swift theme={null}
// ViewController.swift
class ViewController: UIViewController {

    // Buttons
    @IBOutlet weak var cameraInputButton: UIButton!
    @IBOutlet weak var microphoneInputButton: UIButton!
    @IBOutlet weak var leaveRoomButton: UIButton!

    // Participant views
    @IBOutlet weak var participantsStack: UIStackView!


    override func viewDidLoad() {
        super.viewDidLoad()
        //…
    }
}
```

Next, we're going to configure the application layout in the `main.storyboard` file of the project. For that, you'll need some familiarity with the Xcode Interface Builder. Alternatively, you can [copy the storyboard source from our existing demo repository](https://github.com/daily-demos/quickstart-ios/blob/main/DailyQuickstart/Base.lproj/Main.storyboard).

### Configuring the application layout through Xcode Interface Builder

If you're not already familiar with the Xcode Interface Builder, we've compiled some relevant resources below:

**Adding objects to a storyboard:**

* [Interface Builder workflow](https://help.apple.com/xcode/mac/current/#/dev31645f17f)
* [Add user interface objects to the canvas](https://help.apple.com/xcode/mac/current/#/dev9ffcd0c51)

**Layout constraints:**

* [About auto layout and layout constraints](https://help.apple.com/xcode/mac/current/#/devc5759ad6f)

**Connecting storyboard objects to code:**

* [Add an `@IBOutlet` connection to send a message to a UI object](https://help.apple.com/xcode/mac/current/#/devc06f7ee11)
* [Add an `@IBAction` connection to receive messages from a UI object](https://help.apple.com/xcode/mac/current/#/dev9662c7670)
* [Add, remove, and modify `@IBAction` and `@IBOutlet` connections](https://help.apple.com/xcode/mac/current/#/devc0cdc8c7a)

Open the `main.storyboard` file and configure the required UI elements. These will be:

* A `UIButton` to toggle the camera
* A `UIButton` to toggle the microphone
* A `UIButton` to leave the call
* A `UIStackView` for the participant stack

Next, use the Xcode Objects Library to set the objects for the `ViewController` and configure their layout constraints.

<img alt="Configure layout constraints" />

Now, connect the `@IBOutlets` you just defined in `ViewController` to their elements in the Storyboard:

<img alt="Connect Outlets" />

Once the UI is configured, we're ready to build and run the application for the first time. To do so, click "Product -> Run" in the top application menu.

Once loaded, the application will prompt you to grant the necessary permissions. When permissions are granted, it should display the basic application interface you created:

<img alt="Application loaded in simulator with a black screen at the top and call controls at the bottom" />

You won't see any video just yet because we haven't set up the call client or joined a Daily room. We'll do that next.

## Setting up the call client

Now that the basics of the application are in place, we can shift our focus to joining and displaying participant videos.

The [`CallClient`](https://reference-ios.daily.co/documentation/daily/callclient) is the main interface into your Daily video call. It should be instantiated and retained for at least the duration of the video call session.

First, open `ViewController.swift` and import Daily:

```swift theme={null}
```

Next, in the `ViewController` class, create a instance of the `CallClient` object, a `VideoView` for the local participant, and a dictionary of `VideoView`.

Finally, create a constant called `roomURLString` for your Daily room URL.

```swift theme={null}
// ViewController.swift
class ViewController: UIViewController {

    // The client used to manage the video call.
    let callClient: CallClient = .init()

    // The local participant video view.
    private let localVideoView: VideoView = .init()

    // A dictionary of remote participant video views.
    private var videoViews: [ParticipantId: VideoView] = [:]

    // The URL for the room to join.
    private let roomURLString: String = "[YOUR_DAILY_ROOM_URL]"

    // Buttons
    //...

    // Participant views
    //...

    override func viewDidLoad() {
        super.viewDidLoad()
        //...
    }
}
```

## Add `CallClient` event listeners

With a `CallClient` instance created, we can set up our application to handle relevant events that occur during a video call. These events are emitted in response to actions like meeting participants joining, leaving, or being updated. We'll handle these events by adding an extension to have `ViewController` adopt the `CallClientDelegate` protocol.

Add the following declaration in `ViewController.swift`, underneath the original `ViewController` class:

```swift theme={null}
// ViewController.swift
// Event listener delegate
extension ViewController: CallClientDelegate {
    //…
}
```

In the `ViewController` `viewDidLoad()` method, set the call client's delegate to `self`:

```swift theme={null}
//ViewController.swift
class ViewController: UIViewController {

    //...

    override func viewDidLoad() {
        super.viewDidLoad()
        // Set callClient's delegate
        self.callClient.delegate = self
    }

    //...
}
```

To reflect accurate camera and microphone states in the local user's call controls, we'll create a function called `updateControls()` in the `ViewController` class. This function will update the state of the camera and microphone buttons. We'll also call `this.updateControls()` from the `viewDidLoad()` override method:

```swift theme={null}
// ViewController.swift
class ViewController: UIViewController {

    //...

    override func viewDidLoad() {
        super.viewDidLoad()

        // Set callClient's delegate
        self.callClient.delegate = self

        self.updateControls()
    }

    // Update the UI according to the input's (e.g camera off/on)
    private func updateControls() {
        // Set the image for the camera button.
        cameraInputButton.setImage(
            UIImage(systemName: callClient.inputs.camera.isEnabled ? "video.fill": "video.slash.fill"),
            for: .normal
        )

        // Set the image for the mic button.
        microphoneInputButton.setImage(
            UIImage(systemName: callClient.inputs.microphone.isEnabled ? "mic.fill": "mic.slash.fill"),
            for: .normal
        )
    }
    //...
}
```

To make sure the controls are updated when input settings actually change, add a handler for the `inputsUpdated` event within the `CallClientDelegate` extension:

```swift theme={null}
extension ViewController: CallClientDelegate {
    //...Previously implemented handlers above...

    func callClient(_ callClient: CallClient, inputsUpdated inputs: InputSettings) {

        print("Inputs Updated")

        // Handle UI updates
        self.updateControls()
    }
}
```

When the local particpant's view loads, we should add their video to the stack view in `viewDidLoad()`. Additionally, disable the idle timer to keep the device screen active while the app is running. The final `viewDidLoad()` method will now look as follows:

```swift theme={null}
override func viewDidLoad() {
    super.viewDidLoad()

    // Set the call client's delegate.
    self.callClient.delegate = self

    // Add the local participant's video view to the stack view.
    self.participantsStack.addArrangedSubview(self.localVideoView)

    // Disable the idle timer, so the screen will remain active while the app is in use.
    UIApplication.shared.isIdleTimerDisabled = true

    // Handle UI updates.
    self.updateControls()
}
```

When remote participants join the Daily room, the app needs to display their video tracks. To do this, we'll listen for the `participantJoined` event in the `CallClientDelegate` extension:

```swift theme={null}
// ViewController.swift
// Event listener delegate
extension ViewController: CallClientDelegate {
    // Handle a remote participant joining
    func callClient(_ callClient: CallClient, participantJoined participant: Participant) {
        print("Participant \(participant.id) joined the call.")

        // Create a new view for this participant's video track.
        let videoView = VideoView()

        // Determine whether the video input is from the camera or screen.
        let cameraTrack = participant.media?.camera.track
        let screenTrack = participant.media?.screenVideo.track
        let videoTrack = screenTrack ?? cameraTrack

        // Set the track for this participant's video view.
        videoView.track = videoTrack

        // Add this participant's video view to the dictionary.
        self.videoViews[participant.id] = videoView

        // Add this participant's video view to the stack view.
        self.participantsStack.addArrangedSubview(videoView)
    }
}
```

Above, when a remote participant joins the room, a new `VideoView` instance is created to display their video. The video view's `track` property is set to the participant's video track. The new participant is then added to a dictionary of video views. Finally, UI updates are performed and the view is set to update its layout.

We should also handle update events for call participants, which will inform the app when a participant toggles their camera or microphone. To do so, we'll handle the `participantUpdated` event:

```swift theme={null}
// ViewController.swift
// Event listener delegate
extension ViewController: CallClientDelegate {

    //...

    // Handle a participant updating (e.g., their tracks changing)
    func callClient(_ callClient: CallClient, participantUpdated participant: Participant) {

        print("Participant \(participant.id) updated.")

        // Determine whether the video track is for a screen or camera.
        let cameraTrack = participant.media?.camera.track
        let screenTrack = participant.media?.screenVideo.track
        let videoTrack = cameraTrack ?? screenTrack

        if participant.info.isLocal {
            // Update the track for the local participant's video view.
            self.localVideoView.track = videoTrack
        } else {
            // Update the track for a remote participant's video view.
            self.videoViews[participant.id]?.track = videoTrack
        }
    }
}
```

Above, using our previously created `videoViews` dictionary, we can find the video view of the remote participant being updated and modify it accordingly. If the participant being updated is local, we update their tracks using `loclVideoView`.

Finally, when a participant leaves the meeting we'll handle the `participantLeft:withReason` event:

```swift theme={null}
// ViewController.swift
// Event listener delegate
extension ViewController: CallClientDelegate {
    //...
    // Handle a participant leaving
    func callClient(_ callClient: CallClient, participantLeft participant: Participant, withReason reason: ParticipantLeftReason) {

        print("Participant \(participant.id) left the room.")

        // Remove remote participant's video view from the dictionary and stack view.
        if let videoView = self.videoViews.removeValue(forKey: participant.id) {
           self.participantsStack.removeArrangedSubview(videoView)
        }
    }
}
```

After a participant leaves the room, their `VideoView` instance in the video views dictionary is removed.

## Joining and leaving a Daily video call

With the `CallClient` instantiated set up to handle relevant Daily events, we're ready to have our app join a Daily room.

Create a new `enterRoom()` function within the `ViewController` class. Within it, invoke the call client's `join()` function, passing in the URL of the Daily room that you created earlier.

```swift theme={null}
// ViewController.swift
class ViewController: UIViewController {

    //...

    override func viewDidLoad() {
        super.viewDidLoad()
        //...
    }

    private func enterRoom() {

        guard let roomURL = URL(string: roomURLString) else {
            return
        }

        // This call is where you would add a meeting token to join a private room.
        callClient.join(url: roomURL, token: nil) { result in
            print(result)

            // You can either handle the join event in a callback or in a delegate method.
        }
    }
    //...
}
```

Call the new `enterRoom()` method from the view controller's `viewDidAppear()` method:

```swift theme={null}
// ViewController.swift
class ViewController: UIViewController {

    //...
    override func viewDidLoad() {
        super.viewDidLoad()
        //...
    }

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)

        // Automatically join the room specified by `roomURLString` when this view controller appears.
        self.enterRoom()
    }

    //...
}
```

To let the user leave the meeting, connect `@IBAction didTapLeaveRoom(_ sender: Any)` to the `leaveRoomButton`. Then, invoke the the call client's `leave()` method:

```swift theme={null}
@IBAction func didTapLeaveRoom(_ sender: Any) {
    self.callClient.leave()
}
```

Run the application. If you are running the app on actual hardware, you should see yourself as the local participant.

If you are running the application in the simulator, you should see a blank video view. This is because the simulator doesn't have access to your camera.

To test the app with a remote participant, open the room URL in your browser on any device. Once you've joined via the browser, the new participant's video should appear in the app view on your iOS device or simulator.

<img alt="Remote video call participants in iOS simulator" />

## Toggling microphone and camera states

Now that we have participant video being displayed in the app, we'll move on to implementing call controls.

Connect the `@IBAction didTapToggleMicrophone(_ sender: Any)` to the `microphoneInputButton`. Use the call client's `setInputEnabled()` instance method to toggle the microphone input:

```swift theme={null}
@IBAction func didTapToggleMicrophone(_ sender: Any) {
    // Disable or Enable the microphone.
    let isEnabled = self.callClient.inputs.microphone.isEnabled
    self.callClient.setInputEnabled(.microphone, !isEnabled)
}
```

Connect the `@IBAction didTapToggleCamera(_ sender: Any)` to the `cameraInputButton`. Use the call client's `setInputEnabled()` instance method to toggle the camera input:

```swift theme={null}
@IBAction func didTapToggleCamera(_ sender: Any) {
    // Disable or enable your camera
    let isEnabled = self.callClient.inputs.camera.isEnabled
    self.callClient.setInputEnabled(.camera, !isEnabled)
}
```

## Wrapping up

This quickstart walked you through the basics of using the Daily's Client SDK for iOS to build a simple video call app. You should now be familiar with:

* How to create the app with appropriate dependencies and permissions
* How to join a Daily room
* How to display participant video in your Android app
* How to toggle the local participant's microphone and camera
* How to leave the Daily room

To delve further into our iOS SDK, please refer to our [reference documentation](https://reference-ios.daily.co) or reach out [to our support team](https://www.daily.co/company/contact/support/)


# Daily iOS Mobile SDK Screen Share Quickstart
Source: https://docs.daily.co/docs/ios/screen-share

Learn how to screen share using the Daily iOS Mobile SDK

## Share a screen using Daily's iOS SDK

Screen sharing enables the local participant to display the contents of their screen to other users in the meeting.

Before you begin, ensure that you understand how to start a video call. For details, see the [iOS Overview](/docs/ios/).

Screen share for iOS is composed by two parts: broadcast upload extension, screen share support inside daily-ios.

This guide will describe how to implement screen sharing using the iOS SDK, show you some examples, and point you to where you can learn more.

#### How to create a broadcast upload extension

In order to use the screen sharing functionality for iOS, you will need to create a Broadcast Upload Extension for your app.

The DailySystemBroadcast framework provides all the files needed for capturing the contents of the user's screen and sending it to Daily.

Follow the steps below to learn how to create a new broadcast upload extension using Daily's framework.

1. Ensure that `DailySystemBroadcast` framework is integrated into the project. You can find the details about how to install broadcast extension framework in our [installation guide](/docs/ios/installation).

2. Create a new Broadcast Upload Extension target in Xcode.

<img alt="new_upload_extension.png" />

* Do not select "include UI extension".
* Recommended naming: `ScreenCaptureExtension`, since it’s an independent process responsible for ingesting and processing the captured video & audio frames that the OS captures and passing it to your app, which then actually sends the media via WebRTC.

3. Add the `DailySystemBroadcast` framework as dependency of your app target and of your new ScreenCaptureExtension target.

4. Add the same [App Group](https://developer.apple.com/documentation/xcode/configuring-app-groups) capability in your main app target as well as in this new Broadcast Upload Extension target.

5. Replace your `SampleHandler.swift` default code that has been created by this code below:

   ```Swift theme={null}
   import DailySystemBroadcast

   public class SampleHandler: DailyBroadcastSampleHandler {

       override init() {
           super.init(appGroupIdentifier: "group.replace.yours.app.group.identifier")
       }

   }
   ```

* Remember to change the `appGroupIdentifier` to use yours.

6. Edit your app target’s `Info.plist`

   * Add an `RTCAppGroupIdentifier` key with your app group identifier.
   * Add a `DailyScreenCaptureExtensionBundleIdentifier` key with your screen share extension’s bundle identifier.

   If you view the raw file contents of `Info.plist`, it should look like this:

   ```xml theme={null}
       <dict>
           ...
           <key>DailyScreenCaptureExtensionBundleIdentifier</key>
           <string>yours.broadcast.upload.extension.identifier</string>
           <key>RTCAppGroupIdentifier</key>
           <string>group.replace.yours.app.group.identifier</string>
           <key>CFBundleDevelopmentRegion</key>
           ...
       </dict>
   ```

<Warning>
  You can find the details about how to install broadcast extension framework in our [installation guide](/docs/ios/installation).
</Warning>

#### How to start the broadcast upload extension

In order to start the broadcast upload extension, you should use the native component `RPSystemBroadcastPickerView`.

The following code snippet shows how you should setup the `RPSystemBroadcastPickerView` to open the right extension.

```Swift theme={null}

class CallViewController: UIViewController {
    @IBOutlet private weak var systemBroadcastPickerView: UIView!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Defining to open the broadcast upload extension that you have created
        let systemBroadcastPickerView = self.systemBroadcastPickerView as! RPSystemBroadcastPickerView
        systemBroadcastPickerView.preferredExtension = "yours.broadcast.upload.extension.identifier"
        systemBroadcastPickerView.showsMicrophoneButton = false
    }
}
```

#### How to start a screen share

The following code snippet shows how you might start a screen share:

```Swift theme={null}

class CallViewController: UIViewController {
    // Create call client
    let call: CallClient = .init()

    override func viewDidLoad() {
        super.viewDidLoad()
        // Set the delegate, so we can receive the listeners when the screen capture has started or stopped
        self.call.delegate = self
    }
}

// to listen to events, use the CallClientDelegate Swift protocol:
extension CallViewController: CallClientDelegate {
    // Once the screen capture has started we can invoke the Daily SDK to start screen share
    func callClientDidDetectStartOfSystemBroadcast(
        _ callClient: CallClient
    ) {
        logger.debug("System broadcast started")

        callClient.updateInputs(
            .set(screenVideo: .set(isEnabled: .set(true))),
            completion: nil
        )
    }
    // ... others not shown
}
```

<Note>
  To confirm that screen sharing started, listen for [`callClient(CallClient, inputsUpdated: InputSettings)`](https://reference-ios.daily.co/documentation/daily/callclientdelegate/callclient%28_%3Ainputsupdated%3A%29-643iq) and check the property `screenVideo`.
</Note>

#### How to stop screen share

The following code snippet shows how you might stop a screen share:

```Swift theme={null}

class CallViewController: UIViewController {
    // Create call client
    let call: CallClient = .init()

    override func viewDidLoad() {
        super.viewDidLoad()
        // Set the delegate, so we can receive the listeners when the screen capture has started or stopped
        self.call.delegate = self
    }
}

// to listen to events, use the CallClientDelegate Swift protocol:
extension CallViewController: CallClientDelegate {
    // Once the screen capture has stopped we can invoke the Daily SDK to stop screen share
    public func callClientDidDetectEndOfSystemBroadcast(
        _ callClient: CallClient
    ) {
        logger.debug("System broadcast ended")

        callClient.updateInputs(
            .set(screenVideo: .set(isEnabled: .set(false))),
            completion: nil
        )
    }
    // ... others not shown
}
```

#### How to check if the local screen sharing is enabled

The following code snippet shows how you might check if the local screen sharing is enabled:

```Swift theme={null}

class CallViewController: UIViewController {
    // Create call client
    let call: CallClient = .init()

    private var screenIsEnabled: Bool {
        // checking if the local screen share is enabled
        self.call.inputs.screenVideo.isEnabled
    }
}

```

#### Demo app

To see a working example of how to interact with the Daily Client SDK for screen sharing, see our [iOS demo app](https://github.com/daily-demos/daily-ios-demo).


# Customize Daily Prebuilt's UI
Source: https://docs.daily.co/docs/prebuilt/customizing-daily-prebuilt

Learn about different ways to customize Daily Prebuilt, a ready-to-use video chat UI.

<Note>
  If you need to build a fully custom UI, use the [Daily call object](/docs/daily-js).
</Note>

## Feature configuration

Many parts of the in-call experience can be customized by changing [domain](/reference/rest-api/domain), [room](/reference/rest-api/rooms), or [meeting token](/reference/rest-api/meeting-tokens) properties.

### Domain and room properties

*If a property is set at both the domain and room level, the room setting takes precedence.*

| Domain and room level properties |
| -------------------------------- |
| `enable_people_ui`               |
| `enable_prejoin_ui`              |
| `enable_network_ui`              |
| `enable_emoji_reactions`         |
| `enable_hand_raising`            |

### Room and meeting token properties

*If a property is set at both the room and meeting token level, the meeting token setting takes precedence.*

| Room and meeting token level properties |
| --------------------------------------- |
| `enable_screenshare`                    |
| `enable_recording`                      |
| `start_with_video_off`                  |

These UI-related properties can be specified at the **room** level:

| Room level properties |
| --------------------- |
| `enable_knocking`     |
| `enable_chat`         |

And these UI-related properties can be configured using **meeting tokens**:

| Meeting token level properties                                   |
| ---------------------------------------------------------------- |
| `is_owner`                                                       |
| `start_cloud_recording`                                          |
| `close_tab_on_exit`                                              |
| `redirect_on_meeting_exit` (can also be set at the domain level) |

### Pre-join experience

If you're using [Daily Prebuilt](https://daily.co/prebuilt), setting `enable_prejoin_ui` to `true` at either the room or domain level turns on a lobby experience for call participants. They can check their camera and microphone before joining a call, and also wait to be admitted by the host if the room is private and they are joining without a token.

You can also take advantage of a suite of Daily methods and events geared towards implementing a custom lobby if you're building on top of the [Daily call object](/docs/daily-js). With these methods and events you can:

* Determine the local participant's access level, even before attempting to join a meeting: [`preAuth()`](/reference/daily-js/instance-methods/pre-auth), [`accessState()`](/reference/daily-js/instance-methods/access-state), [`'access-state-updated'`](/reference/daily-js/events/lifecycle-events#access-state-updated)
* Request elevated access to a meeting: [`requestAccess()`](/reference/daily-js/instance-methods/request-access)
* Manage pending access requests (if you're a meeting owner): [`waitingParticipants()`](/reference/daily-js/instance-methods/waiting-participants), [`updateWaitingParticipant()`](/reference/daily-js/instance-methods/update-waiting-participant), [`updateWaitingParticipants()`](/reference/daily-js/instance-methods/update-waiting-participants), [`'waiting-participant-added'`](/reference/daily-js/events/participant-events#waiting-participant-added), [`'waiting-participant-updated'`](/reference/daily-js/events/participant-events#waiting-participant-updated), [`'waiting-participant-removed'`](/reference/daily-js/events/participant-events#waiting-participant-removed)

These methods and events are also all available when using Daily Prebuilt if you'd like to build similar waiting room experiences around the call embed.

### Leave behavior

Two properties control what happens when a user leaves a meeting from a standalone browser tab: `close_tab_on_exit` and `redirect_on_meeting_exit`.

If `close_tab_on_exit` is set to `true`, the browser tab closes when the user clicks the *leave meeting* button in the in-call menu bar.

If the `redirect_on_meeting_exit` property is set, the property value will be interpreted as a URL that the browser should redirect to when the user clicks the *leave meeting* button. A query string that includes the parameter `recent-call=<domain>/<room>` is appended to the URL.

<Note>
  By default, there is no *leave meeting* button when you embed Daily Prebuilt. You control that meeting flow with your own UI code outside the iframe. Or you can add a leave call button to the embedded UI with our [Javascript API](/docs/daily-js).
</Note>

### Branding

By default, Daily branding is shown in the call UI.

<img alt="Call UI with Daily branding visible" />

There is no associated cost to remove Daily branding from the call UI; you simply need to [add your credit card information](https://dashboard.daily.co/billing) to your account and hide Daily branding via the `hide_daily_branding` [domain property](/reference/rest-api/domain/get-domain-config#response-config-hide-daily-branding).

## JavaScript API customization

The following customizations are applied via the daily-js API rather than room or domain configuration. They require a call instance created with [`createFrame()`](/reference/daily-js/factory-methods/create-frame) or [`wrap()`](/reference/daily-js/factory-methods/wrap).

For color theming, see [Customizing Daily Prebuilt calls with color themes](/docs/prebuilt/customizing-daily-prebuilt-calls-with-color-themes).

## Custom CSS

Inject CSS into the Prebuilt iframe for styling beyond what the theme colors allow. You can pass CSS options at construction time via [`createFrame()`](/reference/daily-js/factory-methods/create-frame):

```javascript theme={null}
const call = Daily.createFrame({
  bodyClass: 'my-call-theme',
  cssFile: 'https://example.com/daily-overrides.css',
  cssText: `
    .daily-video-tile { border-radius: 12px; }
    .daily-controls { background: transparent; }
  `,
});
```

Or update CSS after construction using [`loadCss()`](/reference/daily-js/instance-methods/load):

```javascript theme={null}
call.loadCss({
  bodyClass: 'updated-theme',
  cssFile: 'https://example.com/updated.css',
  cssText: '.my-class { color: red; }',
});
```

<ParamField type="string">
  CSS class name(s) added to the `<body>` element inside the Prebuilt iframe.
</ParamField>

<ParamField type="string">
  URL of an external stylesheet to load inside the iframe.
</ParamField>

<ParamField type="string">
  Inline CSS string injected as a `<style>` tag inside the iframe.
</ParamField>

## Layout configuration

Control the number of video tiles shown in grid view via `layoutConfig` at construction time:

```javascript theme={null}
const call = Daily.createFrame({
  layoutConfig: {
    grid: {
      maxTilesPerPage: 9,
      minTilesPerPage: 1,
    },
  },
});
```

## Custom integrations

Embed external web apps as a sidebar panel or main area overlay inside Prebuilt. Define integrations with [`setCustomIntegrations()`](/reference/daily-js/instance-methods/set-custom-integrations), then start and stop them with [`startCustomIntegrations()`](/reference/daily-js/instance-methods/start-custom-integrations) and [`stopCustomIntegrations()`](/reference/daily-js/instance-methods/stop-custom-integrations).

```javascript theme={null}
call.setCustomIntegrations({
  'my-app': {
    label: 'My App',
    location: 'sidebar',          // 'sidebar' | 'main'
    src: 'https://app.example.com/embed',
    iconURL: 'https://app.example.com/icon.png',
    controlledBy: 'owners',       // '*' | 'owners' | string[]
    shared: true,                 // sync open/close state across all participants
    allow: 'camera; microphone',
    sandbox: 'allow-scripts allow-same-origin',
    loading: 'lazy',
  },
});

// Start or stop integrations
call.startCustomIntegrations('my-app');
call.stopCustomIntegrations('my-app');

// Read currently registered integrations
const integrations = call.customIntegrations();
```

Key options:

| Option         | Description                                                                           |
| -------------- | ------------------------------------------------------------------------------------- |
| `location`     | `'sidebar'` renders as a panel; `'main'` renders as an overlay in the call area       |
| `controlledBy` | Who can start/stop the integration: `'*'` (all), `'owners'`, or a list of session IDs |
| `shared`       | When `true`, starting/stopping is synchronized for all participants                   |
| `loading`      | `'lazy'` (default) loads the iframe on first open; `'eager'` loads immediately        |

## Custom tray buttons

Add custom buttons to Prebuilt's control bar with [`updateCustomTrayButtons()`](/reference/daily-js/instance-methods/update-custom-tray-buttons), then listen for clicks via the [`custom-button-click`](/reference/daily-js/events/iframe-ui-events#custom-button-click) event.

```javascript theme={null}
call.updateCustomTrayButtons({
  'raise-hand': {
    iconPath: 'https://example.com/icons/hand.svg',
    iconPathDarkMode: 'https://example.com/icons/hand-dark.svg',
    label: 'Raise hand',
    tooltip: 'Raise or lower your hand',
    visualState: 'default',
  },
});

call.on('custom-button-click', ({ button_id }) => {
  if (button_id === 'raise-hand') {
    toggleHandRaise();

    // Update the button's visual state to reflect the toggle
    const current = call.customTrayButtons();
    const isActive = current['raise-hand'].visualState === 'active';
    call.updateCustomTrayButtons({
      'raise-hand': {
        ...current['raise-hand'],
        visualState: isActive ? 'default' : 'active',
      },
    });
  }
});
```

`visualState` controls the button's appearance: `'default'`, `'active'` (toggled/pressed style), or `'sidebar-open'` (indicates an open sidebar panel).


# Customizing Daily Prebuilt calls with color themes
Source: https://docs.daily.co/docs/prebuilt/customizing-daily-prebuilt-calls-with-color-themes

Daily Prebuilt includes the ability to customize theme colors for various parts of the video call UI, including light and dark mode options.

<img alt="Example custom Daily Prebuilt colors with blue and black surrounding four participants on a call" />

[Daily Prebuilt](https://www.daily.co/prebuilt) includes the ability to customize theme colors for various parts of the video call UI, even allowing options to specify light or dark modes (see below for specific elements which can be customized).

Color theming is currently available to all users, regardless of the plan you subscribe to. We've also included [Figma templates](#one-more-thing-prototype-in-figma) at the end of this guide to help accelerate your custom theme planning.

But first, let's take a look at how custom color themes work.

## What can be customized?

<img alt="Large Daily Prebuilt call in default dark mode colors" />

Each of the following properties can be customized with any valid hex color, e.g. `#AABBCC` or `#001122`. You can specify as few or as many properties as you want. For example, you could give all ten properties a color. Alternatively, you could simply provide one, like an `accent` color, and leave the rest to use default values.

| Property         | Description                                                                     |
| ---------------- | ------------------------------------------------------------------------------- |
| accent           | Main theme color. Used for primary actions and keyboard focus.                  |
| accentText       | Text color rendered on `accent`.                                                |
| background       | Background color.                                                               |
| backgroundAccent | Background color for highlighted elements.                                      |
| baseText         | Default text and icon color, as rendered on `background` or `backgroundAccent`. |
| border           | Default border color for bordered elements.                                     |
| mainAreaBg       | Background color for the main call area.                                        |
| mainAreaBgAccent | Background color for video tiles.                                               |
| mainAreaText     | Text color for text rendered inside the call main area, e.g. names.             |
| supportiveText   | Text color for supportive, less emphasized, text.                               |

## How do I customize the theme?

There are three ways to customize your theme:

1. Passing a [`theme`](/reference/daily-js/types/daily-call-options#param-theme) property to [`createFrame()`](/reference/daily-js/factory-methods/create-frame)
2. Passing a [`theme`](/reference/daily-js/types/daily-call-options#param-theme) property to [`join()`](/reference/daily-js/instance-methods/join)
3. Via the [`setTheme()`](/reference/daily-js/instance-methods/set-theme) method

You only need to use one of these options to update the color theme of Daily Prebuilt. You can use multiple ones if the color theme changes based on dynamic values or at different points in a call. However, it is most common to set the theme when the call is first created (i.e. in `createFrame()`).

Options 1 and 2 are similar since they both receive the theme as a [`DailyCall` property](/reference/daily-js/types/daily-call-options).

Option 3 ([`setTheme()`](/reference/daily-js/instance-methods/set-theme)) is used when you specifically only need to update the theme.

Let's take a look at examples for each to see how these options work.

### Updating Daily Prebuilt's theme: Code examples

Let's say you want to customize the accent color so it's aligned with your brand.

Using `createFrame()`:

```javascript theme={null}
// call createFrame first
window.call = window.Daily.createFrame({
  theme: {
    colors: {
      accent: '#1AA1FB',
    },
  },
});

// then join
call.join({
  url: `DAILY_ROOM_URL`,
});
```

or via `join()`:

```javascript theme={null}
// call createFrame first
window.call = window.Daily.createFrame();

// then join
call.join({
  url: `DAILY_ROOM_URL`,
  theme: {
    colors: {
      accent: '#1AA1FB',
    },
  },
});
```

Or finally, via `setTheme()`:

```javascript theme={null}
call.setTheme({
  colors: {
    accent: '#1AA1FB',
  },
});
```

We can see now this new accent color is reflected in our Daily Prebuilt UI:

<img alt="Large Daily Prebuilt call with custom accent color" />

<Note>
  When applied during a call, `setTheme()` overrides any color themes specified in `createFrame()` or `join()`.
</Note>

In the above examples, we're customizing a single color, `accent`. Remember, you can customize as many colors as you want, even all ten, effectively creating an entirely new theme!

But, many of your users might have a preference for either a `dark` or `light` theme, so we've provided a means for those to be customized individually.

### Updating Daily Prebuilt's dark and light mode themes: Code examples

Say, for example, you wanted to have a different `accent` color for each theme type:

```javascript theme={null}
call.setTheme({
  light: {
    colors: {
      accent: '#1AA1FB',
    },
  },
  dark: {
    colors: {
      accent: '#E83551',
    },
  },
});
```

Daily Prebuilt in light mode would use mostly default colors, with the `accent` color being customized:

<img alt="Large Daily Prebuilt call in light mode with custom accent color" />

The same changes would be applied to Daily Prebuilt in dark mode but with a different custom `accent` color used:

<img alt="Large Daily Prebuilt call in dark mode with custom accent color" />

<Warning>
  If you provide a `light` theme, you must also provide a `dark`, or vice-versa.
</Warning>

## Daily's `theme-updated` event

Whenever a new theme is applied, we also emit a [`theme-updated`](/reference/daily-js/events/iframe-ui-events#theme-updated) event which contains the theme that was applied.

An example event payload, based on the `setTheme()` call above would look like:

```json theme={null}
{
    "action": "theme-updated",
    "theme": {
      "light": {
        "colors": {
          "accent": "#1AA1FB"
        }
      },
      "dark": {
        "colors": {
          "accent": "#E83551"
        }
      }
    }
}
```

## Daily's `theme()` method

Additionally, you can get the current theme at any point using the [`theme()`](/reference/daily-js/instance-methods/theme) method. Consider the following, where `currentTheme` would contain the same theme object as shown above:

```javascript theme={null}
const currentTheme = call.theme();
```

## Creating a full theme

<img alt="Rainbow colors surround Daily Prebuilt embedded video calls" />

Although every example thus far has been using a single color override (`accent`), you can, of course, provide new values for all available colors to any of the aforementioned methods.

Here is an example of one global theme:

```javascript theme={null}
call.setTheme({
  colors: {
    accent: '#286DA8',
    accentText: '#FFFFFF',
    background: '#FFFFFF',
    backgroundAccent: '#FBFCFD',
    baseText: '#000000',
    border: '#EBEFF4',
    mainAreaBg: '#000000',
    mainAreaBgAccent: '#333333',
    mainAreaText: '#FFFFFF',
    supportiveText: '#808080',
  },
});
```

Or separate `light` and `dark` themes:

```javascript theme={null}
call.setTheme({
  light: {
    colors: {
      accent: '#286DA8',
      accentText: '#FFFFFF',
      background: '#FFFFFF',
      backgroundAccent: '#FBFCFD',
      baseText: '#000000',
      border: '#EBEFF4',
      mainAreaBg: '#000000',
      mainAreaBgAccent: '#333333',
      mainAreaText: '#FFFFFF',
      supportiveText: '#808080',
    },
  },
  dark: {
    colors: {
      accent: '#E83551',
      accentText: '#FFFFFF',
      background: '#071D3A',
      backgroundAccent: '#222E5E',
      baseText: '#FFFFFF',
      border: '#26346B',
      mainAreaBg: '#031429',
      mainAreaBgAccent: '#071D3A',
      mainAreaText: '#FFFFFF',
      supportiveText: '#FFFFFF',
    },
  },
});
```

## One more thing: prototype in Figma

To help you and your team design and preview your color theme, we have put together a few Figma files that will help you better visualize how the colors of your theme map to the individual UI elements of Daily Prebuilt.

If you are a Figma pro, feel free to jump right in! Here are links to the default [dark](https://www.figma.com/file/D4V6bMJzrcF0CajydZfq8P/Daily-Prebuilt-Dark-Theme) and [light](https://www.figma.com/file/Gstc2W2dcaxGT4sZWtsoQJ/Daily-Prebuilt-Light-Theme) Figma theme files, respectively. If you aren't, read on to learn how to use these files.

### Get started

Using the Figma files requires:

1. A Figma account, [sign up](https://www.figma.com) if you do not have one
2. A desktop computer and modern browser (like Chrome). [Figma's browser requirements](https://help.figma.com/hc/en-us/articles/360039827194-Figma-browser-requirements).
3. Your brand's colors!

Once you've signed up, open either of our default theme files via one of these two links: [dark theme](https://www.figma.com/file/D4V6bMJzrcF0CajydZfq8P/Daily-Prebuilt-Dark-Theme) or [light theme](https://www.figma.com/file/Gstc2W2dcaxGT4sZWtsoQJ/Daily-Prebuilt-Light-Theme) and **duplicate it to your Figma account**. These are the default themes that Daily Prebuilt ships with. You will be modifying these files to preview your color palette.

<img alt="Draft templates are duplicated in the Figma interface" />

*Duplicate to drafts by clicking on the chevron (down arrow) in the top bar.*

Once you've duplicated the file, navigate to your drafts folder by clicking on the Figma icon (top left) and selecting Back to files, choose the Drafts tab, and then open the duplicated file—named **Daily Prebuilt \[Light] Theme (Copy)**. If you are using Figma's native Mac/Windows app, click on the home icon.

### Modifying the Figma theme file

Themes are composed of 10, editable, color styles which are shown in Figma's design panel—if you cannot view the styles, hit the escape key to deselect your current selection.

Each style maps to individual elements that are spread across all of the mock interfaces. By editing these styles, you will be able to preview what your theme will look like in real-time.

<img alt="Colors go from red to green to blue to purple in Figma template" />

*Editing the Background color style.*

**To edit a style**:

1. Simply hover over a Color Style and click the edit icon.
2. Then click on the fill color to choose a new color or enter a HEX value.

As you'll see, elements that map to the color are updated in real-time! Feel free to edit all of the colors in the template, or edit only the ones that you'd like.

<Note>
  Certain elements are not editable at this time. These include system colors (errors/warnings), name/mic UI overlaid over participants video feeds, etc.
</Note>

Once you have finalized your theme you will need to copy the HEX values into a string. To do this, just click on the edit icon (beside each style) and copy the HEX value to your clipboard.

Once you have all your HEX values, you just need to add them to your Daily code!

<Note>
  When dealing with color, you will want to consider how this impacts accessibility, in particular the [color contrast](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast). We suggest verifying this with a [contrast checker](https://webaim.org/resources/contrastchecker/).
</Note>

If you have any questions, please [contact us](https://daily.co/contact-us)! We're excited to see what you create.


# Embed video chat quickly with Daily Prebuilt
Source: https://docs.daily.co/docs/prebuilt/index

Use Daily Prebuilt to embed a fully functioning video chat widget into your website or app.

## Daily Prebuilt

[Daily Prebuilt](https://www.daily.co/prebuilt) is a complete, full-featured video call component that you can embed in your app or website with just a few lines of code. Once you create a Daily room URL, you can embed it in any website or app.

<img alt="Video call with one participant's camera on embedded on a web page" />

*Our embedded Daily Prebuilt demo app.*

## When to use Daily Prebuilt

If speed is your top priority, Daily Prebuilt is the best choice: in minutes, you can prototype video calls within your application. You might also want to consider using Daily Prebuilt if video chat is a feature that you need to add, but not necessarily one that you need to customize. If you *do* want to customize your video chat interface, you'll want to use the [Daily call object](/docs/daily-js).

> **Jump in:**
>
> * [See a live demo](https://prebuilt-ui.netlify.app/)
> * [Sample code](https://github.com/daily-demos/prebuilt-ui)
> * [Step-by-step guide](#step-by-step-guide-embed-daily-prebuilt)

## Daily Prebuilt features

* Ready-to-use video chat interface
* Built-in bandwidth management
* Cross-browser compatibility
* Screen sharing
* Active speaker and grid layout modes
* Text chat
* Emoji reactions
* Hand raising
* Participant list
* Custom avatar images
* Network analytics display
* Localized interfaces
* Electron compatible
* [Recording](/reference/daily-js/instance-methods/start-recording)
* [HIPAA compliance](/docs/guides/privacy-and-security/hipaa)

<Note>
  **HIPAA pricing**

  Building a HIPAA compliant video chat with Daily is available with the [Healthcare add-on](https://dashboard.daily.co/billing), and involves a few additional steps to set up. Read our [HIPAA guide](/docs/guides/privacy-and-security/hipaa#how-to-enable-hipaa-compliance) and [pricing page](https://www.daily.co/pricing) for more information.
</Note>

## Step-by-step guide: embed Daily Prebuilt

First, you'll need a Daily room URL — create one via the [dashboard](https://dashboard.daily.co/rooms) or the [REST API](/reference/rest-api/rooms/create-room). Once you have one ready, replace `DAILY_ROOM_URL` in the code snippet below with your own room URL (e.g. `https://your-team.daily.co/hello`).

```html theme={null}
<html>
  <script crossorigin src="https://unpkg.com/@daily-co/daily-js"></script>
  <body>
    <script>
      call = window.Daily.createFrame();
      call.join({ url: 'DAILY_ROOM_URL' });
    </script>
  </body>
</html>
```

### Importing `daily-js` through NPM

As an alternative to the `script` import shown here, you can also import `daily-js` via our [NPM package](https://www.npmjs.com/package/@daily-co/daily-js) as follows:

```bash theme={null}
npm install @daily-co/daily-js

// or with yarn
yarn add @daily-co/daily-js
```

You can pass [configuration properties](/reference/daily-js/types/daily-call-options) to `DailyCall.createFrame()` to customize how the embedded Daily Prebuilt looks. Here's an example that sets the Daily Prebuilt to fullscreen:

```javascript theme={null}
call = window.Daily.createFrame({
  showLeaveButton: true,
  iframeStyle: {
    position: 'fixed',
    top: '0',
    left: '0',
    width: '100%',
    height: '100%',
  },
});
```

You can also set custom avatar images that will be displayed for muted participant tiles and in the People tab. When a custom avatar image is set, it will displayed on the participant's tile and in the People tab:

```javascript theme={null}
call = window.Daily.createFrame({
  userData: {
    avatar: 'https://example.com/avatar.jpg',
  },
});
```

<img alt="Video call with one participant using custom avatar image" />

Read about all the `DailyCall` properties in our [reference docs](/reference/daily-js/types/daily-call-options), including [`iframeStyle`](/reference/daily-js/types/daily-call-options#param-iframe-style) and [`userData`](/reference/daily-js/types/daily-call-options#param-user-data).

## Related guides

* [Customize Daily Prebuilt's UI](/docs/prebuilt/customizing-daily-prebuilt)
* [Customizing Daily Prebuilt calls with color themes](/docs/prebuilt/customizing-daily-prebuilt-calls-with-color-themes)


# Changing the language in Daily Prebuilt
Source: https://docs.daily.co/docs/prebuilt/language

Configure the Daily Prebuilt UI language at the domain, room, token, or call level.

Daily Prebuilt supports over a dozen languages. The language can be set at multiple levels — from a domain-wide default down to a per-participant override — using the `lang` property.

## Supported language values

| Value     | Language                                                                          |
| --------- | --------------------------------------------------------------------------------- |
| `"da"`    | Danish                                                                            |
| `"de"`    | German                                                                            |
| `"en"`    | English (default)                                                                 |
| `"es"`    | Spanish                                                                           |
| `"fi"`    | Finnish                                                                           |
| `"fr"`    | French                                                                            |
| `"it"`    | Italian                                                                           |
| `"jp"`    | Japanese                                                                          |
| `"ka"`    | Georgian                                                                          |
| `"nl"`    | Dutch                                                                             |
| `"no"`    | Norwegian                                                                         |
| `"pt"`    | Portuguese (Portugal)                                                             |
| `"pt-BR"` | Portuguese (Brazil)                                                               |
| `"pl"`    | Polish                                                                            |
| `"ru"`    | Russian                                                                           |
| `"sv"`    | Swedish                                                                           |
| `"tr"`    | Turkish                                                                           |
| `"user"`  | Matches the participant's browser language (falls back to English if unsupported) |

<Note>
  `"no"` (Norwegian) and `"ru"` (Russian) are only available in the current Daily Prebuilt UI.
</Note>

## Setting the language

There are four ways to set the language, listed here from lowest to highest priority.

### 1. Domain level (lowest priority)

Set a default language for all rooms on your domain via the [domain configuration API](/reference/rest-api/domain/set-domain-config):

```bash theme={null}
curl --request POST \
  --url https://api.daily.co/v1/ \
  --header 'Authorization: Bearer $DAILY_API_KEY' \
  --header 'Content-Type: application/json' \
  --data '{"properties": {"lang": "fr"}}'
```

### 2. Room level

Override the domain default for a specific room:

```bash theme={null}
curl --request POST \
  --url https://api.daily.co/v1/rooms/my-room \
  --header 'Authorization: Bearer $DAILY_API_KEY' \
  --header 'Content-Type: application/json' \
  --data '{"properties": {"lang": "de"}}'
```

You can also select a language when creating a room in the [Daily dashboard](https://dashboard.daily.co/rooms).

### 3. Meeting token level

Set a per-participant language by including `lang` in meeting token properties:

```bash theme={null}
curl --request POST \
  --url https://api.daily.co/v1/meeting-tokens \
  --header 'Authorization: Bearer $DAILY_API_KEY' \
  --header 'Content-Type: application/json' \
  --data '{"properties": {"room_name": "my-room", "lang": "jp"}}'
```

### 4. `setDailyLang()` (highest priority)

Call [`setDailyLang()`](/reference/daily-js/instance-methods/set-daily-lang) at runtime to change the language dynamically. This overrides all other settings and is useful for building in-call language selectors:

```javascript theme={null}
call.setDailyLang('es');
```

You can also pass `lang` directly to [`createFrame()`](/reference/daily-js/factory-methods/create-frame):

```javascript theme={null}
const call = Daily.createFrame({ lang: 'nl' });
```

## Priority order

When multiple levels are configured, the highest-priority setting wins:

1. `setDailyLang()` — highest
2. Meeting token `lang`
3. `createFrame()` property
4. Room-level `lang`
5. Domain-level `lang` — lowest


# Getting started with the Daily Python SDK
Source: https://docs.daily.co/docs/python/getting-started

An overview of daily-python functionality with examples for joining meetings, handling events, and sending and receiving media.

<Card icon="cat" href="https://docs.pipecat.ai/pipecat/get-started/quickstart" title="Pipecat Quickstart">
  Building a voice or multimodal AI agent? [Pipecat](https://www.pipecat.ai/) is built on top of `daily-python` and is the faster path — see the [Pipecat Quickstart guide](https://docs.pipecat.ai/pipecat/get-started/quickstart).
</Card>

## Installation

See the [installation guide](/docs/python/installation) for setup instructions.

## Core concepts

### Initializing

[`daily.Daily.init()`](https://reference-python.daily.co/api_reference.html#daily.Daily.init)

Before using the SDK, initialize the `Daily` context:

```python theme={null}
from daily import *
Daily.init()
```

### Creating a call client

[`daily.CallClient()`](https://reference-python.daily.co/api_reference.html#daily.CallClient)

Most SDK functionality lives in the `CallClient` class. Create one after initializing:

```python theme={null}
client = CallClient()
```

### Releasing a call client

[`daily.CallClient.release()`](https://reference-python.daily.co/api_reference.html#daily.CallClient.release)

Once the client is no longer needed, explicitly release its internal resources. This is important when the client holds a circular reference (e.g. via an event handler — see [Handling events](#handling-events) below).

```python theme={null}
client.release()
```

### Joining a meeting

[`daily.CallClient.join()`](https://reference-python.daily.co/api_reference.html#daily.CallClient.join)

Join a Daily meeting with its URL:

```python theme={null}
client.join("https://my.daily.co/meeting")
```

To join a private room or join as the meeting owner, pass a [meeting token](/reference/rest-api/meeting-tokens/create-meeting-token):

```python theme={null}
client.join("https://my.daily.co/meeting", meeting_token="MY_TOKEN")
```

### Leaving a meeting

[`daily.CallClient.leave()`](https://reference-python.daily.co/api_reference.html#daily.CallClient.leave)

Always leave the meeting when done to clean up network connections:

```python theme={null}
client.leave()
```

### Setting the user name

[`daily.CallClient.set_user_name()`](https://reference-python.daily.co/api_reference.html#daily.CallClient.set_user_name)

```python theme={null}
client.set_user_name("Jane Doe")
```

### Setting client permissions

Meeting owners can control whether participants have presence in a meeting, can send media, or can manage other participants. Permissions can be set dynamically from within a meeting or configured in advance with a [meeting token](/reference/rest-api/meeting-tokens/create-meeting-token).

A common use case for `daily-python` is to export media from a call as a hidden participant. To do this, use the REST API to create a meeting token with the [`permissions`](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties-permissions) object's `hasPresence` set to `false`, then pass the resulting JWT to `join()`:

```python theme={null}
client.join(
    "https://my.daily.co/meeting",
    meeting_token="MY_TOKEN")
```

### Completion callbacks

Some `CallClient` methods are asynchronous. Pass an optional callback to be notified when they complete:

```python theme={null}
def on_joined(join_data, error):
    if not error:
        print("We just joined the meeting!")

client.join("https://my.daily.co/meeting", completion=on_joined)
```

### Handling events

To listen and react to various meeting events, such as participant updates, recordings started or ended, etc., simply subclass [`daily.EventHandler`](https://reference-python.daily.co/api_reference.html#daily.EventHandler) and implement the relevant event handler methods. For example:

```python theme={null}
class MyApp(EventHandler):

    def on_participant_joined(self, participant):
        print("New participant joined!")
```

Then, register the event handler when creating the call client:

```python theme={null}
class MyApp(EventHandler):

    def __init__(self):
        self.client = CallClient(event_handler=self)
```

Note the circular reference between `MyApp` and the client — make sure to call `client.release()` during cleanup.

## Inputs and publishing

**Inputs** control devices — whether a camera is enabled and at what resolution, or which microphone is selected.

**Publishing settings** control whether the input is being sent, and at what quality. A camera can be enabled via inputs but not published (i.e. not sent to other participants).

See [`daily.CallClient.inputs`](https://reference-python.daily.co/api_reference.html#daily.CallClient.inputs) and [`daily.CallClient.publishing`](https://reference-python.daily.co/api_reference.html#daily.CallClient.publishing) for details.

## Subscriptions and subscription profiles

**Subscriptions** define which media you receive, from which participants, and the quality you receive it at — for example, you may subscribe to audio from all participants but only subscribe to video from specific ones or you may only subscribe to low-quality video from certain participants.

**Subscription profiles** give a named set of subscription settings. The built-in `base` profile is applied to all remote participants' camera and microphone streams by default.

### Updating subscription profiles

Update the `base` profile to change default subscriptions for all participants — for example, to subscribe to microphone only:

```python theme={null}
client.update_subscription_profiles({
    "base": {
        "camera": "unsubscribed",
        "microphone": "subscribed"
    }
})
```

Define additional profiles to handle different quality tiers:

```python theme={null}
client.update_subscription_profiles({
    "lower": {
        "camera": {
            "subscriptionState": "subscribed",
            "settings": { "maxQuality": "low" }
        },
        "microphone": "unsubscribed"
    },
    "higher": {
        "camera": {
            "subscriptionState": "subscribed",
            "settings": { "maxQuality": "high" }
        },
        "microphone": "unsubscribed"
    }
})
```

### Updating subscriptions for participants

Update a specific participants' subscriptions to use a custom or `"base"` profile:

```python theme={null}
client.update_subscriptions({
    "eb762a39-1850-410e-9b31-92d7b21d515c": {
        "profile": "higher",
    },
    "2aa78bc2-1a0b-4f2b-8447-baa6a95bca1a": {
        "profile": "base"
    }
})
```

Or override specific settings for a participant:

```python theme={null}
client.update_subscriptions({
    "eb762a39-1850-410e-9b31-92d7b21d515c": {
        "profile": "base",
        "media": {
            "camera": "unsubscribed"
        }
    },
})
```

You can update subscriptions profiles and participant subscriptions in a single call:

```python theme={null}
client.update_subscriptions({
    "eb762a39-1850-410e-9b31-92d7b21d515c": {
        "profile": "base",
        "media": {
            "camera": "subscribed"
        }
    }
}, {
    "base": {
        "camera": "unsubscribed",
        "microphone": "subscribed"
    },
})
```

## Sending media

`daily-python` supports virtual video and audio devices for simulating cameras, speakers, and microphones.

### Sending video

Cameras are used to send video into the meeting. A camera is a live stream, so it needs to generate images at a certain framerate.

To start, we need to create a virtual camera with a certain width, height, and an optional color format (frames written to the camera should then be in this color format):

```python theme={null}
camera = Daily.create_camera_device("my-camera",
    width = 1024,
    height = 1024,
    color_format = "RGB")
```

Once the camera is selected, we need to choose it as our default camera input. This is done through the call client input settings:

```python theme={null}
client.update_inputs({
    "camera": {
        "isEnabled": True,
        "settings": {
            "deviceId": "my-camera"
        }
    }
})
```

Finally, we can just write frames to the camera which are then sent as the call client video stream. In the following example, we load a PNG file (using the [Pillow](https://pillow.readthedocs.io) library) in RGB format and we send it 30 times per second.

```python theme={null}
from PIL import Image
im = Image.open("image.png")
while True:
    camera.write_frame(im.tobytes())
    time.sleep(0.033)
```

See [`daily.Daily.create_camera_device`](https://reference-python.daily.co/api_reference.html#daily.Daily.create_camera_device) and [`daily.CallClient.update_inputs`](https://reference-python.daily.co/api_reference.html#daily.CallClient.update_inputs) for more details.

### Sending audio

Create a virtual microphone and write audio frames to it, similar to the virtual camera:

```python theme={null}
microphone = Daily.create_microphone_device("my-mic", sample_rate=16000, channels=1)

client.update_inputs({
    "camera": False,
    "microphone": {
        "isEnabled": True,
        "settings": { "deviceId": "my-mic" }
    }
})

# After joining, write audio frames
microphone.write_frames(frames)
```

See [`daily.Daily.create_microphone_device`](https://reference-python.daily.co/api_reference.html#daily.Daily.create_microphone_device) and [`daily.CallClient.update_inputs`](https://reference-python.daily.co/api_reference.html#daily.CallClient.update_inputs) for more details.

<Note>
  If you are using multiple call clients, where each need their own microphone, create separate processes. Multiple microphones can exist simultaneously, but only one can be active per client.
</Note>

## Receiving media

### Receiving video

[`daily.CallClient.set_video_renderer()`](https://reference-python.daily.co/api_reference.html#daily.CallClient.set_video_renderer)

Register a callback to receive video frames from a specific participant:

```python theme={null}
client.set_video_renderer(PARTICIPANT_ID, on_video_frame)

def on_video_frame(participant_id, video_frame):
    print(f"New frame from {participant_id}")
```

`video_frame` is a [`daily.VideoFrame`](https://reference-python.daily.co/api_reference.html#daily.VideoFrame).

### Receiving audio

Audio can be received from an individual participant or from all meeting participants in a single mixed track.

For individual participant audio, register a callback using [`daily.CallClient.set_audio_renderer()`](https://reference-python.daily.co/api_reference.html#daily.CallClient.set_audio_renderer):

```python theme={null}
client.set_audio_renderer(PARTICIPANT_ID, on_audio_data)

def on_audio_data(participant_id, audio_data):
    print(f"New audio data from {participant_id}")
```

`audio_data` is a [`daily.AudioData`](https://reference-python.daily.co/api_reference.html#daily.AudioData).

#### Receiving mixed audio

Create a virtual speaker to receive mixed audio from all meeting participants:

```python theme={null}
speaker = Daily.create_speaker_device("my-speaker", sample_rate=16000, channels=1)
Daily.select_speaker_device("my-speaker")

# After joining, read audio frames (e.g. every 10ms)
while True:
    buffer = speaker.read_frames(160)
    time.sleep(0.01)
```

Audio is 16-bit linear PCM.

See [`daily.Daily.create_speaker_device`](https://reference-python.daily.co/api_reference.html#daily.Daily.create_speaker_device) and [`daily.Daily.select_speaker_device`](https://reference-python.daily.co/api_reference.html#daily.Daily.select_speaker_device) for more details.

## Transcription

[`start_transcription()`](https://reference-python.daily.co/api_reference.html#daily.CallClient.start_transcription)\
[`stop_transcription()`](https://reference-python.daily.co/api_reference.html#daily.CallClient.stop_transcription)

Room owners or participants with the `'transcription'` [canAdmin permission](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties-permissions-can-admin-one-of-0) can start and stop transcription:

```python theme={null}
client.start_transcription()
```

Optional configuration settings:

| Name                 | Type             | Description                                                                                     |
| -------------------- | ---------------- | ----------------------------------------------------------------------------------------------- |
| `language`           | `str`            | See [Deepgram language docs](https://developers.deepgram.com/docs/language)                     |
| `model`              | `str`            | See [Deepgram model docs](https://developers.deepgram.com/docs/model)                           |
| `profanity_filter`   | `bool`           | See [Deepgram profanity filter docs](https://developers.deepgram.com/docs/profanity-filter)     |
| `redact`             | `bool` or `list` | See [Deepgram redaction docs](https://developers.deepgram.com/docs/redaction)                   |
| `extra`              | `dict`           | Additional Deepgram [streaming options](https://developers.deepgram.com/docs/features-overview) |
| `includeRawResponse` | `bool`           | Whether to include Deepgram's raw response in transcription messages                            |

```python theme={null}
client.start_transcription({
    'language': 'fr-CA',
    'model': 'meeting',
})
```

Listen for transcription events via [`on_transcription_message`](https://reference-python.daily.co/api_reference.html#daily.EventHandler.on_transcription_message), [`on_transcription_started`](https://reference-python.daily.co/api_reference.html#daily.EventHandler.on_transcription_started), and [`on_transcription_stopped`](https://reference-python.daily.co/api_reference.html#daily.EventHandler.on_transcription_stopped).

Stop transcription with:

```python theme={null}
client.stop_transcription()
```

## Recording

[`daily.CallClient.start_recording()`](https://reference-python.daily.co/api_reference.html#daily.CallClient.start_recording)\
[`daily.CallClient.stop_recording()`](https://reference-python.daily.co/api_reference.html#daily.CallClient.stop_recording)

With [recording enabled](/reference/rest-api/rooms/update-room#body-properties-enable-recording-one-of-0) on the room, you can start/stop a cloud recording from your Python client:

```python theme={null}
client.start_recording()
client.stop_recording()
```

Multiple recording sessions can run simultaneously by specifying a unique `stream_id` UUID. For layout options, see the [recording layout reference](/reference/daily-js/types/daily-streaming-layout-config).

See also Daily's [recording guide](/docs/guides/features/recording) for more details on recording features and capabilities.

## Chatting with Prebuilt Clients

[`send_prebuilt_chat_message()`](https://reference-python.daily.co/api_reference.html#daily.CallClient.send_prebuilt_chat_message)

When participants are in a [Daily Prebuilt](/docs/prebuilt) call, your Python client can send messages to Prebuilt's chat like so:

```python theme={null}
client.send_prebuilt_chat_message("Hello, world", "Daily Python Bot")
```

## Reference

Full API reference, types, and method signatures: [reference-python.daily.co](https://reference-python.daily.co/api_reference.html)


# Daily Python SDK
Source: https://docs.daily.co/docs/python/index

Build server-side video and audio calling into Python applications with the Daily Client SDK for Python.

`daily-python` is the Daily Client SDK for Python. It lets you connect to Daily calls from Python desktop and server applications with direct access to raw audio and video — making it well suited for AI bots, media pipelines, content moderation, and other server-side use cases.

## Pipecat

If you're building a real-time voice or multimodal AI agent, [Pipecat](https://www.pipecat.ai/) is the recommended starting point. It's an open-source framework that handles pipeline orchestration, LLM integration, speech synthesis, and more. `daily-python` powers Pipecat's Daily transport layer.

## What you can build

* AI meeting participants (bots, assistants, note-takers)
* Server-side speech-to-text and text-to-speech pipelines
* Object or face detection on participant video
* Content moderation via audio/video track access
* Generative AI video injection into meetings

## Links

* [Getting started guide](/docs/python/getting-started)
* [Installation](/docs/python/installation)
* [Demo apps](https://github.com/daily-co/daily-python/tree/main/demos)
* [API reference](https://reference-python.daily.co)


# Installing the Daily Client SDK for Python
Source: https://docs.daily.co/docs/python/installation

Learn how to get set up with the Daily Client SDK for Python.

## Installing using pip

`daily-python` can be easily installed using `pip`:

```bash theme={null}
pip install daily-python
```

To upgrade:

```bash theme={null}
pip install -U daily-python
```

### Requirements

* Python 3.8 or newer


# Introduction
Source: https://docs.daily.co/docs/react-native/index

react-native-daily-js is Daily's React Native SDK for adding real-time video and audio calls to your mobile applications.

## What is react-native-daily-js?

`react-native-daily-js` (`@daily-co/react-native-daily-js`) is Daily's React Native SDK for building WebRTC-based video and audio calls on iOS and Android. It mirrors the `daily-js` API, so if you've used Daily on the web, the concepts carry over directly.

<CardGroup>
  <Card title="Installation" icon="wrench" href="/docs/react-native/installation">
    Install react-native-daily-js and configure your project
  </Card>

  <Card title="API Reference" icon="code" href="/reference/react-native/daily-call-client">
    Explore the full API surface
  </Card>

  <Card title="Playground demo" icon="github" href="https://github.com/daily-co/react-native-daily-js-playground">
    A working example app to get started quickly
  </Card>

  <Card title="npm package" icon="npm" href="https://www.npmjs.com/package/@daily-co/react-native-daily-js">
    README and peer dependency version requirements
  </Card>
</CardGroup>

## Getting started

Install `react-native-daily-js` along with its peer dependencies:

```bash theme={null}
npm i @daily-co/react-native-daily-js \
  @react-native-async-storage/async-storage@^1.15.7 \
  react-native-background-timer@^2.3.1 \
  react-native-get-random-values@^1.9.0
npm i --save-exact @daily-co/react-native-webrtc@124.0.6-daily.1
```

See the [installation guide](/docs/react-native/installation) for Expo and bare React Native setup steps.

Once installed, join a call:

```javascript theme={null}
import Daily from '@daily-co/react-native-daily-js';

const call = Daily.createCallObject();
await call.join({ url: 'https://your-domain.daily.co/room-name' });
```

## Key features

<CardGroup>
  <Card title="Participant management" icon="users">
    Track participants, control audio/video, and manage permissions
  </Card>

  <Card title="Recording" icon="circle-dot">
    Cloud recording with custom layout presets
  </Card>

  <Card title="Live streaming" icon="signal-stream">
    Stream to any RTMP endpoint
  </Card>

  <Card title="Transcription" icon="closed-captioning">
    Real-time transcription powered by Deepgram
  </Card>

  <Card title="Screen sharing" icon="display">
    Share your screen on supported platforms
  </Card>

  <Card title="Network diagnostics" icon="chart-network">
    Monitor network quality during calls
  </Card>
</CardGroup>

## Platform requirements

| Platform | Minimum version           |
| -------- | ------------------------- |
| iOS      | Deployment target >= 12.0 |
| Android  | minSdkVersion >= 24       |

<Warning>
  Daily Prebuilt (our embeddable video chat UI) is not supported in react-native-daily-js. Use [daily-js](/docs/daily-js) if you want to embed the Prebuilt UI.
</Warning>

<Tip>
  Daily supports versions of `react-native-daily-js` released in the past six months. Update your Daily libraries regularly to access the latest features.
</Tip>


# Installation
Source: https://docs.daily.co/docs/react-native/installation

Install react-native-daily-js and configure your iOS and Android project.

## Requirements

| Platform     | Minimum version                                     |
| ------------ | --------------------------------------------------- |
| iOS          | Deployment target >= 12.0 (14.0 for screen sharing) |
| Android      | `minSdkVersion` >= 24                               |
| React Native | >= 0.60 (autolinking required)                      |

## Install packages

Install `react-native-daily-js` and its peer dependencies:

```bash theme={null}
npm i @daily-co/react-native-daily-js \
  @react-native-async-storage/async-storage@^1.15.7 \
  react-native-background-timer@^2.3.1 \
  react-native-get-random-values@^1.9.0
npm i --save-exact @daily-co/react-native-webrtc@124.0.6-daily.1
```

<Note>
  `@daily-co/react-native-webrtc` must be installed with `--save-exact`. Using a version range can cause native build failures.
</Note>

## Expo projects

If your project uses [Expo](https://expo.dev/), use the [`@daily-co/config-plugin-rn-daily-js`](https://www.npmjs.com/package/@daily-co/config-plugin-rn-daily-js) package to automatically configure the native project. This handles all of the iOS and Android steps below.

Add the plugin to your `app.json`:

```json theme={null}
{
  "expo": {
    "plugins": [
      [
        "@daily-co/config-plugin-rn-daily-js",
        {
          "enableCamera": true,
          "enableMicrophone": true,
          "enableScreenShare": true
        }
      ]
    ]
  }
}
```

Then generate your native project:

```bash theme={null}
npx expo prebuild
```

<Note>
  This project cannot be used with [Expo Go](https://expo.dev/blog/expo-go-vs-development-builds) because it requires custom native code. Use a [development build](https://docs.expo.dev/develop/development-builds/introduction/) instead.
</Note>

## Bare React Native projects

### iOS

Update the `platform` in your `Podfile`:

```ruby theme={null}
platform :ios, '12.0'
```

Then install pods:

```bash theme={null}
npx pod-install
```

Next, add the following keys to your `Info.plist`. **The app will crash silently without the camera and microphone entries.**

```xml theme={null}
<key>NSCameraUsageDescription</key>
<string>Your app needs camera access for video calls</string>
<key>NSMicrophoneUsageDescription</key>
<string>Your app needs microphone access for audio calls</string>
<key>UIBackgroundModes</key>
<array>
    <string>voip</string>
</array>
```

`UIBackgroundModes: voip` ensures audio continues uninterrupted when your app is backgrounded.

### Android

Add permissions and the foreground service to your `AndroidManifest.xml`:

```xml theme={null}
<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus"/>

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.WAKE_LOCK" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

<uses-permission android:name="android.permission.FOREGROUND_SERVICE"/>
<uses-permission android:name="android.permission.FOREGROUND_SERVICE_CAMERA"/>
<uses-permission android:name="android.permission.FOREGROUND_SERVICE_MICROPHONE"/>
<uses-permission android:name="android.permission.FOREGROUND_SERVICE_MEDIA_PROJECTION"/>
<uses-permission android:name="android.permission.POST_NOTIFICATIONS"/>

<application>
  <!-- ... -->
  <service
    android:name="com.daily.reactlibrary.DailyOngoingMeetingForegroundService"
    android:foregroundServiceType="camera|microphone"/>
</application>
```

<Note>
  `FOREGROUND_SERVICE_MEDIA_PROJECTION` is only required if you intend to support screen sharing.
</Note>

Update `minSdkVersion` in your top-level `build.gradle`:

```groovy theme={null}
minSdkVersion = 24
```

## Screen sharing

Screen sharing requires additional setup on both platforms.

**iOS:** Screen sharing requires iOS 14.0 or later (update your Podfile `platform` accordingly). Additional setup is needed to integrate Daily's [React Native Screen Share Extension](https://github.com/daily-co/rn-screen-share-extension/). See that repo's README for a full walkthrough.

**Android:** No additional steps beyond adding `FOREGROUND_SERVICE_MEDIA_PROJECTION` to your `AndroidManifest.xml` as shown above.

## Verify installation

Once installed, join a call to confirm everything is working:

```javascript theme={null}
import Daily from '@daily-co/react-native-daily-js';

const call = Daily.createCallObject();
await call.join({ url: 'https://your-domain.daily.co/room-name' });
```


# Authentication
Source: https://docs.daily.co/docs/rest-api/authentication

How to authenticate with the Daily REST API.

The Daily REST API uses API keys to authenticate requests. Your API key is available in the **Developers** section of the Daily [dashboard](https://dashboard.daily.co/).

* **Domain owners** can view and regenerate the API key.
* **Members** do not have access to the API key. Request it from an owner, or ask an owner to grant you administrator privileges.

<Note>
  **Using Daily through Pipecat Cloud?** You have a separate, integrated Daily API key that comes with your Pipecat Cloud account. Find it under **Settings → Daily (WebRTC)** in the [Pipecat Cloud dashboard](https://pipecat.daily.co/). It has the same capabilities as a key from `dashboard.daily.co`, and 1:1 voice minutes are free when your agent runs on Pipecat Cloud. The two keys belong to different accounts, so a recording or session created with one key won't show up when you query with the other. See the [Daily WebRTC guide](https://docs.pipecat.ai/pipecat-cloud/guides/daily-webrtc) for details.
</Note>

## Staging and testing

Daily doesn't support adding a second domain to an existing account. To set up a staging environment, sign up for a separate Daily account using a variant of your domain name (e.g. `yourdomain-dev`). The new account's API key is immediately available under the **Developers** tab in the dashboard.

Contact [support](https://www.daily.co/contact/support) after creating the staging account to ensure it has access to the same features as your production account at no extra charge.

## Making authenticated requests

Include your API key in the `Authorization` header of every request:

```bash theme={null}
curl --request GET \
  --url https://api.daily.co/v1/rooms \
  --header 'Authorization: Bearer DAILY_API_KEY'
```

Each API key is scoped to a single Daily domain.

<Warning>
  Never include your API key in client-side browser code. Treat it like a password.
</Warning>

HTTPS is required for all Daily REST API requests.

## Authentication errors

| Condition                                   | HTTP status | `error` value                |
| ------------------------------------------- | ----------- | ---------------------------- |
| `Authorization` header missing or malformed | `400`       | `authorization-header-error` |
| API key is not valid                        | `401`       | `authentication-error`       |

## Rate limits

Daily rate-limits the API to ensure stability for all users. If you exceed the limits, you'll receive a `429` response with `error: "rate-limit-error"`.

| Endpoints                                     | Limit                                       |
| --------------------------------------------- | ------------------------------------------- |
| Most endpoints                                | 20 req/sec, or 100 req per 5-second window  |
| `DELETE /rooms/:name`, `GET /recordings`      | \~2 req/sec, or 50 req per 30-second window |
| Start recording, live streaming, PSTN, or SIP | \~1 req/sec, or 5 req per 5-second window   |

Handle `429` responses by retrying with [exponential backoff](https://en.wikipedia.org/wiki/Exponential_backoff). [Contact support](https://www.daily.co/contact/support) if you need higher limits.


# Errors
Source: https://docs.daily.co/docs/rest-api/errors

How to handle errors from the Daily REST API.

Daily API errors are returned as HTTP `4xx` or `5xx` responses. The response body includes two fields:

* `error` — a stable string identifying the error type. Use this for programmatic error handling.
* `info` — a human-readable description with additional context. Treat this as debug information only; the content may change.

```json theme={null}
{
  "error": "invalid-request-error",
  "info": "bad Authorization header format"
}
```

## HTTP status codes

| Status | Meaning                                                              |
| ------ | -------------------------------------------------------------------- |
| `200`  | OK — request succeeded.                                              |
| `400`  | Bad Request — the operation could not be performed as requested.     |
| `401`  | Unauthorized — the API key was not valid.                            |
| `403`  | Forbidden — the API key is valid but the resource is not accessible. |
| `404`  | Not Found — the requested resource does not exist.                   |
| `429`  | Too Many Requests — rate limit exceeded. Back off and retry.         |
| `5xx`  | Server Error — something unexpected happened on Daily's side.        |

## Error types

| `error` value                | Description                                                                                                                                     |
| ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| `authentication-error`       | The API key is not valid.                                                                                                                       |
| `authorization-header-error` | The `Authorization` header is missing or malformed.                                                                                             |
| `forbidden-error`            | The API key is valid but the resource is forbidden.                                                                                             |
| `json-parsing-error`         | The request body could not be parsed as JSON.                                                                                                   |
| `invalid-request-error`      | The request could not be completed. Check the `info` field for details — common causes are missing required parameters or bad parameter values. |
| `rate-limit-error`           | Too many requests in too short a window. See [Authentication](/docs/rest-api/authentication#rate-limits) for limits.                            |
| `server-error`               | An unexpected error occurred on Daily's side.                                                                                                   |

## Pagination

List endpoints (`GET /rooms`, `GET /recordings`, etc.) return up to 100 objects per request, sorted in reverse chronological order by default. Use cursor-based pagination to page through all results.

**Query parameters:**

| Parameter        | Description                                                                                                                                                  |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `limit`          | Number of objects to return. Max and default: `100`.                                                                                                         |
| `starting_after` | Object ID cursor. Returns objects created *after* this ID — use to fetch the next page.                                                                      |
| `ending_before`  | Object ID cursor. Returns objects created *before* this ID — use to fetch a previous page. Pass the special value `OLDEST` to start from the oldest objects. |

**Examples:**

```bash theme={null}
# Most recent 5 rooms
curl -H "Authorization: Bearer DAILY_API_KEY" \
  "https://api.daily.co/v1/rooms?limit=5"

# 5 oldest rooms
curl -H "Authorization: Bearer DAILY_API_KEY" \
  "https://api.daily.co/v1/rooms?limit=5&ending_before=OLDEST"

# Next page after a known room ID
curl -H "Authorization: Bearer DAILY_API_KEY" \
  "https://api.daily.co/v1/rooms?limit=5&starting_after=ROOM_ID"
```

**Fetching all results:**

```javascript theme={null}
let rooms = await getPageOfRooms('https://api.daily.co/v1/rooms');

while (rooms.data.length > 0) {
  for (const room of rooms.data) {
    doSomethingWith(room);
  }
  const lastId = rooms.data[rooms.data.length - 1].id;
  rooms = await getPageOfRooms(`https://api.daily.co/v1/rooms?starting_after=${lastId}`);
}
```

<Note>
  `created_at` timestamps have one-second granularity. If multiple objects are created within the same second, list order is stabilized by `id` as a secondary sort key.
</Note>


# REST API
Source: https://docs.daily.co/docs/rest-api/index

Using our REST API endpoints a developer can manage all things related to Daily rooms, meeting tokens, recordings, domains, metrics and logs.

Your domain's API key is available in the **Developers** section of the Daily [dashboard](https://dashboard.daily.co/).

Domain owners can view and regenerate your team's API key.

Members do not have access to your team's API key.

If you're a member and you require access, request the key from a team member or request administrator privileges from one of your team's admins.

**Staging and testing:** Daily doesn't support adding a second domain to an existing account. To create a staging environment, sign up for a separate Daily account using a variant of your domain name (e.g. `yourdomain-dev`). The staging API key is immediately available under **Developers** in the dashboard. Contact [support](https://www.daily.co/contact/support) to ensure the staging account has access to all the same features as your main account at no extra charge.

<Tip>
  HTTPS is required for all Daily REST API requests.
</Tip>

## OpenAPI specification

The complete Daily REST API is described by an OpenAPI 3.0 specification: [https://docs.daily.co/openapi.json](https://docs.daily.co/openapi.json). Use it to generate API clients, import the API into tools like Postman, or give an AI agent the full API schema in a single machine-readable file.

## Authentication

**The Daily API uses API keys to authenticate requests.**

Almost all of the Daily API endpoints require that you include your API key in the `Authorization` header of your HTTPS request. For example:

```bash theme={null}
curl --request GET \
  --url https://api.daily.co/v1/rooms \
  --header "Authorization: Bearer DAILY_API_KEY"
```

Each API key is tied to a specific Daily domain.

You should keep your API key secret. **Never use the API key in client-side web browser code**, for example.

If an API call requires authentication, but no `Authorization: Bearer` header is present, we return an HTTP `400` error, with a body that includes an `error` parameter set to the string `"authorization-header-error"`.

If an API call requires authentication but the API key provided in the authorization header isn't valid, we return an HTTP `401` error, with a body that includes an `error` parameter set to the string `"authentication-error"`.

## Rate limits

Daily uses rate limiting to ensure the stability of the API across all of Daily's users. If you make lots of requests in succession, you may see `429` status codes returned by the API. Daily has two levels of rate limiting, each of which affect different endpoints.

* For most of our API endpoints, you can expect a limit of `20` requests per second, or `100` requests over a `5` second window.
* For the [DELETE /rooms/:name](/reference/rest-api/rooms/delete-room) and [GET /recordings](/reference/rest-api/recordings/list-recordings) endpoints, you can expect about `2` requests per second, or `50` requests over a `30` second window.
* For starting a Recording, Livestreaming, PSTN, and SIP call, you can expect about `1` requests per second, or `5` requests over a `5` second window. For example, you can start a recording and initiate a PSTN dial-out immediately when the first participant joins a call, so it is possible to do a burst of requests as long as you are within the 5 requests in that 5 second window.

You should attempt to retry `429` status codes in order to handle limiting gracefully. A good technique to apply here is to retry your requests with an [exponential backoff schedule](https://en.wikipedia.org/wiki/Exponential_backoff) to help reduce your request volume over each window. Many HTTP clients offer this as a configuration option out of the box.

In order to ensure stability and prevent abuse, we may alter the stated limits. [Contact support](https://www.daily.co/contact/support) if you need to increase your API limits.

## Errors

The Daily API endpoints all return errors, wherever possible, as HTTP `4xx` or `5xx` error responses.

Error response bodies generally include two parameters: `error`, and `info`. The `error` parameter is a string indicating an error type, and the `info` parameter fills in a bit more human readable information, wherever available.

The `error` types are stable; we don't expect to change them (though we'll likely add new error types over time.) But please treat the `info` strings only as additional information you use while developing and debugging. Content of the `info` parameter is *not* fixed and may change as we improve error feedback.

```json theme={null}
{
  "error": "invalid-request-error",
  "info": "bad Authorization header format"
}
```

### HTTP status codes

| HTTP status code | Response          | Interpretation                                                                                |
| ---------------- | ----------------- | --------------------------------------------------------------------------------------------- |
| 200              | OK                | Everything worked as expected.                                                                |
| 400              | Bad Request       | The operation could not be performed as requested.                                            |
| 401              | Unauthorized      | The provided API key was not valid.                                                           |
| 403              | Forbidden         | The API key was valid but the requested resource was forbidden.                               |
| 404              | Not Found         | The requested REST resource did not exist.                                                    |
| 429              | Too Many Requests | Too many requests were sent in too short a period of time. Please throttle your request rate. |
| 5xx              | Server Errors     | Something unexpected happened on the server side. Please ping us to report this, if possible. |

### Error types

| Error string               | Description                                                                                                                                                                                    |
| -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| authentication-error       | The API key is not valid.                                                                                                                                                                      |
| authorization-header-error | The Authorization header is missing or badly formatted.                                                                                                                                        |
| forbidden-error            | The API key is valid but the requested resource is forbidden.                                                                                                                                  |
| json-parsing-error         | The JSON request body could not be parsed.                                                                                                                                                     |
| invalid-request-error      | The request could not be performed. More information is usually available in the `info` field of the response body. Typical causes are missing required parameters, bad parameter values, etc. |
| rate-limit-error           | Too many requests were sent in too short a period of time. Please throttle your request rate.                                                                                                  |
| server-error               | Something unexpected went wrong.                                                                                                                                                               |

## Pagination

### Fetching 100 results at a time

The [list rooms](/reference/rest-api/rooms/list-rooms) and [list recordings](/reference/rest-api/recordings/list-recordings) API endpoints return a maximum of 100 data objects at one time, and accept pagination arguments in their query strings.

All pagination arguments are optional. Without any pagination arguments, the list methods return up to 100 data objects, sorted in reverse chronological order by creation time.

It's helpful to think of pagination arguments in terms of defining "pages" of results.

* The `limit` argument sets the size of the page (how many objects each page contains), and defaults to a value of 100.
* The `starting_after` argument sets the starting point of the page and is used to fetch "subsequent" pages of results — as if you were paging through a book from front to back.
* The `ending_before` argument is the opposite, and is used to fetch previous pages of results — as if you were paging through a book from back to front.
* A special `ending_before` argument, `OLDEST`, is available to facilitate fetching pages of results "backwards," from oldest objects to newest.

Note that the granularity for `created_at` timestamps is one second. The returned list order is stable, because `id` is the secondary sort field. But if you create multiple rooms within a 1-second window, the list order may not be *precisely* reverse-chronological.

| Pagination argument | Description                                                                                                                                                                                                                                                |
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| limit               | A limit on the number of objects to be returned. Maximum value is 100. Default value (if not supplied) is 100.                                                                                                                                             |
| starting\_after     | An object ID to be used as a pagination cursor. The first object returned will be the object immediately after the object with this id. Commonly used to fetch the "next" page of results.                                                                 |
| ending\_before      | The opposite of `starting_after`. The last page of returned results will be the object immediately preceding the object with this id. The special value `OLDEST` fetches the "last" page of results (the page containing the objects created longest ago). |

### Examples

```bash theme={null}
# List your five most recently created rooms
curl -H "Content-Type: application/json" \
     -H "Authorization: Bearer DAILY_API_KEY" \
     https://api.daily.co/v1/rooms?limit=5
```

```bash theme={null}
# List your five oldest rooms
curl -H "Content-Type: application/json" \
     -H "Authorization: Bearer DAILY_API_KEY" \
     https://api.daily.co/v1/rooms?limit=5&ending_before=OLDEST
```

### Pseudocode for fetching all results

```javascript theme={null}
// Get first page of results
let rooms = getPageOfRooms({
  endpoint: 'https://api.daily.co/v1/rooms',
});

while (rooms.data.length > 0) {
  for (var i = 0; i < rooms.data.length; i++) {
    doSomeStuff(rooms.data[i]);
  }

  // Fetch next page
  rooms = getPageOfRooms({
    endpoint:
      'https://api.daily.co/v1/rooms?starting_after=' +
      rooms.data[rooms.data.length - 1].id,
  });
}
```


# Transcription
Source: https://docs.daily.co/docs/rest-api/transcription

A guide to Daily's transcription REST APIs: real-time transcription during calls, post-call processing via the Batch Processor, and lifecycle events via webhooks.

<Badge>Paid plans only</Badge>

Daily offers two transcription approaches via the REST API:

* **Real-time** — start, update, and stop transcription during an active call using the `/rooms/{room_name}/transcription` endpoints.
* **Post-call** — submit a recording ID or media URL to the [Batch Processor](/reference/rest-api/batch-processor/index) after a call ends to generate a transcript (and optionally a summary).

Both approaches deliver lifecycle notifications via [webhooks](/reference/rest-api/webhooks).

## Real-time transcription

Real-time transcription runs during an active call and streams text to all in-call participants as speech is detected. Transcripts can optionally be saved to storage as WebVTT files.

### Starting transcription

```bash theme={null}
curl --request POST \
     --url https://api.daily.co/v1/rooms/my-room/transcription/start \
     --header 'Authorization: Bearer DAILY_API_KEY' \
     --header 'Content-Type: application/json' \
     --data '{
       "language": "en",
       "model": "nova-2-general",
       "punctuate": true
     }'
```

<ParamField type="string">
  BCP-47 language tag. Examples: `'en'`, `'es'`, `'fr'`, `'de'`, `'ja'`, `'pt-BR'`. Available languages depend on the Deepgram model in use.
</ParamField>

<ParamField type="string">
  Deepgram model name. Examples: `'nova-2-general'`, `'nova-2'`, `'enhanced'`, `'base'`. Higher-tier models offer better accuracy at higher cost.
</ParamField>

<ParamField type="boolean">
  When `true`, Deepgram replaces profane words with asterisks.
</ParamField>

<ParamField type="Array<string> | boolean">
  Entities to redact. Pass `true` to redact all supported entities, or an array of strings (e.g. `['pci', 'ssn']`).
</ParamField>

<ParamField type="number | boolean">
  How long Deepgram waits for silence before ending an utterance. Pass a number (milliseconds) or `true`/`false`.
</ParamField>

<ParamField type="boolean">
  When `true`, Deepgram adds punctuation to the transcript.
</ParamField>

<ParamField type="string">
  Identifier for this transcription instance. Required when running multiple simultaneous transcriptions in the same room.
</ParamField>

<ParamField type="string[]">
  Array of session IDs. When provided, only those participants' audio is transcribed. Omit to transcribe everyone.
</ParamField>

<Tip>
  Check out [Deepgram's language support documentation](https://developers.deepgram.com/docs/models-languages-overview) for the `model`/`language` combination that works best for your use case.
</Tip>

See the [start transcription endpoint](/reference/rest-api/rooms/transcription/start) for the full API reference.

### Updating transcription

Change which participants are transcribed mid-call:

```bash theme={null}
# Transcribe specific participants only
curl --request POST \
     --url https://api.daily.co/v1/rooms/my-room/transcription/update \
     --header 'Authorization: Bearer DAILY_API_KEY' \
     --header 'Content-Type: application/json' \
     --data '{ "participants": ["af5d66d0-d3fd-4cb8-a2ba-c681e429c8ba"] }'
```

```bash theme={null}
# Restore transcription for everyone (empty array = all)
curl --request POST \
     --url https://api.daily.co/v1/rooms/my-room/transcription/update \
     --header 'Authorization: Bearer DAILY_API_KEY' \
     --header 'Content-Type: application/json' \
     --data '{ "participants": [] }'
```

Include `instanceId` to target a specific instance when running multiple transcriptions simultaneously.

See the [update transcription endpoint](/reference/rest-api/rooms/transcription/update) for the full API reference.

### Stopping transcription

```bash theme={null}
curl --request POST \
     --url https://api.daily.co/v1/rooms/my-room/transcription/stop \
     --header 'Authorization: Bearer DAILY_API_KEY' \
     --header 'Content-Type: application/json'
```

To stop a named instance: `--data '{ "instanceId": "primary" }'`

If transcript storage is enabled, the final WebVTT file is written when transcription stops. Listen for the [`transcript.ready-to-download`](#transcript-ready-to-download) webhook to know when the file is available.

See the [stop transcription endpoint](/reference/rest-api/rooms/transcription/stop) for the full API reference.

### Auto-starting transcription

Instead of starting transcription manually, you can have it begin automatically when a meeting owner joins by setting `auto_start_transcription` on their meeting token. Pair it with `auto_transcription_settings` on the room to configure the model and language.

**Meeting token** (triggers auto-start for that owner):

```bash theme={null}
curl --request POST \
     --url https://api.daily.co/v1/meeting-tokens \
     --header 'Authorization: Bearer DAILY_API_KEY' \
     --header 'Content-Type: application/json' \
     --data '{
       "properties": {
         "room_name": "my-room",
         "is_owner": true,
         "auto_start_transcription": true
       }
     }'
```

**Room config** (sets the transcription options used when auto-start fires):

```bash theme={null}
curl --request POST \
     --url https://api.daily.co/v1/rooms/my-room \
     --header 'Authorization: Bearer DAILY_API_KEY' \
     --header 'Content-Type: application/json' \
     --data '{
       "properties": {
         "auto_transcription_settings": {
           "model": "nova-2-general",
           "language": "en"
         }
       }
     }'
```

See the [`auto_start_transcription` meeting token property](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties-auto-start-transcription) and [`auto_transcription_settings` room property](/reference/rest-api/rooms/update-room#body-properties-auto-transcription-settings) for full details.

### Transcript storage

By default, real-time transcripts are streamed to call participants but not saved. To persist transcripts as WebVTT files, enable storage at the room or domain level.

**Room level:**

```bash theme={null}
curl --request POST \
     --url https://api.daily.co/v1/rooms/my-room \
     --header 'Authorization: Bearer DAILY_API_KEY' \
     --header 'Content-Type: application/json' \
     --data '{"properties": {"enable_transcription_storage": true}}'
```

**Domain level:**

```bash theme={null}
curl --request POST \
     --url https://api.daily.co/v1/ \
     --header 'Authorization: Bearer DAILY_API_KEY' \
     --header 'Content-Type: application/json' \
     --data '{"properties": {"enable_transcription_storage": true}}'
```

While transcription is active, the file is written every two minutes. The final version is written when transcription ends.

Transcripts are stored in Daily's cloud by default. To use your own S3 bucket, configure the `transcription_bucket` domain property:

```bash theme={null}
curl --request POST \
     --url https://api.daily.co/v1/ \
     --header 'Authorization: Bearer DAILY_API_KEY' \
     --header 'Content-Type: application/json' \
     --data '{
       "properties": {
         "transcription_bucket": {
           "bucket_name": "my-bucket",
           "bucket_region": "us-east-1",
           "assume_role_arn": "arn:aws:iam::123456789000:role/DAILY_ROLE",
           "allow_api_access": true
         }
       }
     }'
```

The setup process is the same as [configuring a custom S3 bucket for recordings](/docs/guides/features/recording/custom-s3-storage).

## Post-call transcription

The [Batch Processor](/reference/rest-api/batch-processor/index) generates transcripts and summaries from recordings or any publicly accessible audio/video URL — no active call required.

### Submitting a job

Specify a `preset` (`transcript` or `summarize`), an input source, and an output path:

<Tabs>
  <Tab title="From a recording ID">
    ```bash theme={null}
    curl --request POST \
         --url https://api.daily.co/v1/batch-processor \
         --header 'Authorization: Bearer DAILY_API_KEY' \
         --header 'Content-Type: application/json' \
         --data '{
           "preset": "transcript",
           "inParams": {
             "sourceType": "recordingId",
             "recordingId": "uuiasdfe-8ba2-4ee6-bd15-003a92c18245"
           },
           "outParams": {
             "s3Config": { "s3KeyTemplate": "transcript" }
           }
         }'
    ```
  </Tab>

  <Tab title="From a media URL">
    ```bash theme={null}
    curl --request POST \
         --url https://api.daily.co/v1/batch-processor \
         --header 'Authorization: Bearer DAILY_API_KEY' \
         --header 'Content-Type: application/json' \
         --data '{
           "preset": "transcript",
           "inParams": {
             "sourceType": "uri",
             "uri": "https://example.com/recording.mp4"
           },
           "outParams": {
             "s3Config": { "s3KeyTemplate": "transcript" }
           }
         }'
    ```
  </Tab>

  <Tab title="With summary">
    ```bash theme={null}
    curl --request POST \
         --url https://api.daily.co/v1/batch-processor \
         --header 'Authorization: Bearer DAILY_API_KEY' \
         --header 'Content-Type: application/json' \
         --data '{
           "preset": "summarize",
           "inParams": {
             "sourceType": "recordingId",
             "recordingId": "uuiasdfe-8ba2-4ee6-bd15-003a92c18245"
           },
           "outParams": {
             "s3Config": { "s3KeyTemplate": "summary" }
           }
         }'
    ```
  </Tab>
</Tabs>

The response returns a job ID:

```json theme={null}
{ "id": "02c2508e-8835-4f3e-bcf2-e319d00f0eec" }
```

Output formats for `transcript` jobs: `txt`, `srt`, `vtt`, `json`. The `summarize` preset produces a plain text file.

### Retrieving batch job results

Poll job status or get a signed download URL using the job ID returned from submit:

| Endpoint                                                                                 | Description                                                            |
| ---------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- |
| [Get job](/reference/rest-api/batch-processor/reference/get-job)                         | `GET /batch-processor/{jobId}` — check status and see output locations |
| [Get job access link](/reference/rest-api/batch-processor/reference/get-job-access-link) | `GET /batch-processor/{jobId}/access-link` — get a signed download URL |
| [List jobs](/reference/rest-api/batch-processor/reference/list-jobs)                     | `GET /batch-processor` — list all jobs for your domain                 |
| [Delete job](/reference/rest-api/batch-processor/reference/delete-job)                   | `DELETE /batch-processor/{jobId}` — delete a job and its output        |

## Events via webhooks

Subscribe to transcription lifecycle events from the [Daily dashboard](https://dashboard.daily.co) or via the [webhooks REST API](/reference/rest-api/webhooks). Events are delivered as POST requests to your webhook URL.

### Real-time transcription events

#### `transcript.started`

Fired when real-time transcription begins. Includes the `instanceId` and, if storage is enabled, the S3 path where the transcript will be written.

```json theme={null}
{
  "version": "1.1.0",
  "type": "transcript.started",
  "payload": {
    "id": "68f65d4c-a4dc-4179-bbb1-c12432afb924",
    "info": { "instanceId": "a1f2f6b7-b1ac-4202-85e5-d446cb6c3d3f" },
    "room_name": "my-transcript-room",
    "mtg_session_id": "a2bc876d-2816-4732-9c87-01e0b8c0b01b",
    "status": "t_in_progress",
    "out_params": {
      "s3": { "key": "domain/room/1733234355482.vtt", "bucket": "daily-co-transcription-staging", "region": "us-west-2" }
    }
  },
  "event_ts": 1733234355.505
}
```

See the [`transcript.started` reference](/reference/rest-api/webhooks/events/transcript-started).

#### `transcript.ready-to-download`

Fired when transcription ends and the saved transcript file is available. This is the completion signal — use `out_params.s3` to locate the file, or use the [get transcript link](/reference/rest-api/transcripts/get-transcript-link) endpoint to get a signed URL.

<Note>
  Despite the name, `transcript.ready-to-download` is the equivalent of "transcription stopped" — it fires when the transcript reaches a finished state. You may also receive a `transcript.error` event if a storage error occurred alongside completion.
</Note>

```json theme={null}
{
  "version": "1.1.0",
  "type": "transcript.ready-to-download",
  "payload": {
    "id": "68f65d4c-a4dc-4179-bbb1-c12432afb924",
    "out_params": {
      "s3": { "key": "domain/room/1733234355482.vtt", "bucket": "daily-co-transcription-staging", "region": "us-west-2" }
    },
    "room_name": "my-transcript-room",
    "duration": 124.405,
    "status": "t_finished"
  },
  "event_ts": 1733234480.097
}
```

See the [`transcript.ready-to-download` reference](/reference/rest-api/webhooks/events/transcript-ready-to-download).

#### `transcript.error`

Fired if an error occurs during transcription or before it could start. Includes an `error` field with details. May fire alongside `transcript.started` or `transcript.ready-to-download` depending on when the error occurred.

```json theme={null}
{
  "version": "1.1.0",
  "type": "transcript.error",
  "payload": {
    "id": "8d5c03f3-cff3-43c7-b112-0f78989f659f",
    "room_name": "my-room",
    "status": "t_error",
    "error": "User is not authorized to perform: s3:PutObject on resource..."
  },
  "event_ts": 1733234946.616
}
```

See the [`transcript.error` reference](/reference/rest-api/webhooks/events/transcript-error).

### Batch Processor events

#### `batch-processor.job-finished`

Fired when a Batch Processor job completes. The `output` field contains S3 locations for all generated files (transcript in all formats, and summary if requested).

```json theme={null}
{
  "version": "1.0.0",
  "type": "batch-processor.job-finished",
  "payload": {
    "id": "1dae15c5-6a85-4d65-ab00-4b19bb054b84",
    "preset": "summarize",
    "status": "finished",
    "output": {
      "transcription": [
        { "format": "json", "s3Config": { "key": "staging/1dae15c5.../transcript/soap.json", "bucket": "...", "region": "us-west-2" } },
        { "format": "txt",  "s3Config": { "key": "staging/1dae15c5.../transcript/soap.txt",  "bucket": "...", "region": "us-west-2" } },
        { "format": "vtt",  "s3Config": { "key": "staging/1dae15c5.../transcript/soap.vtt",  "bucket": "...", "region": "us-west-2" } }
      ],
      "summary": { "format": "txt", "s3Config": { "key": "staging/1dae15c5.../transcript/soap", "bucket": "...", "region": "us-west-2" } }
    }
  },
  "event_ts": 1711402301.747
}
```

See the [`batch-processor.job-finished` reference](/reference/rest-api/webhooks/events/batch-processor-job-finished).

#### `batch-processor.error`

Fired when a Batch Processor job fails. Includes an `error` field with details.

```json theme={null}
{
  "version": "1.0.0",
  "type": "batch-processor.error",
  "payload": {
    "id": "bcb9f15d-2b00-4d98-be5f-23888e2df2ca",
    "preset": "summarize",
    "status": "error",
    "error": "transcript job failed: Error: Failed to download: 403 Forbidden"
  },
  "event_ts": 1711402402.539
}
```

See the [`batch-processor.error` reference](/reference/rest-api/webhooks/events/batch-processor-error).

## Accessing saved transcripts

Both real-time transcripts (when `enable_transcription_storage` is on) and Batch Processor transcripts are accessible via the `/transcript` endpoints. Use these to list, download, and clean up transcripts after the fact.

### Listing transcripts

```bash theme={null}
curl --request GET \
     --url https://api.daily.co/v1/transcript \
     --header 'Authorization: Bearer DAILY_API_KEY'
```

Returns an array of transcript objects for your domain. Each object includes a `transcriptId`, room and session identifiers, `duration`, and `status`.

### Getting a download link

```bash theme={null}
curl --request GET \
     --url https://api.daily.co/v1/transcript/<TRANSCRIPT_ID>/access-link \
     --header 'Authorization: Bearer DAILY_API_KEY'
```

Returns a signed URL to download the WebVTT file. For Batch Processor transcripts, use the [get job access link](/reference/rest-api/batch-processor/reference/get-job-access-link) endpoint instead.

### Deleting a transcript

```bash theme={null}
curl --request DELETE \
     --url https://api.daily.co/v1/transcript/<TRANSCRIPT_ID> \
     --header 'Authorization: Bearer DAILY_API_KEY'
```

| Endpoint                                                                   | Description                                  |
| -------------------------------------------------------------------------- | -------------------------------------------- |
| [List transcripts](/reference/rest-api/transcripts/list-transcripts)       | `GET /transcript`                            |
| [Get transcript](/reference/rest-api/transcripts/get-transcript)           | `GET /transcript/{transcriptId}`             |
| [Get transcript link](/reference/rest-api/transcripts/get-transcript-link) | `GET /transcript/{transcriptId}/access-link` |
| [Delete transcript](/reference/rest-api/transcripts/delete-transcript)     | `DELETE /transcript/{transcriptId}`          |

### The transcript object

A transcript object represents a single transcription session:

```json theme={null}
{
  "transcriptId": "a759ae14-0327-4bf6-ac0d-192a0323f45b",
  "domainId": "04b89420-cf8b-4ea5-a428-02cc0a0e2a59",
  "roomId": "ad9e57d6-dcb8-4bb0-8100-247146b75713",
  "mtgSessionId": "586f7f8b-2a4f-4091-aa85-99a36094cb4e",
  "duration": 14,
  "status": "t_finished",
  "outParams": {
    "key": "my-domain/my-room/1699441864907.vtt",
    "region": "us-west-2",
    "bucket": "test-daily-meeting-recordings"
  }
}
```

Key status values:

* `"t_finished"` — transcription is complete and the file is available
* `"isVttAvailable": true` — the WebVTT file can be downloaded

## Related

<CardGroup>
  <Card title="Transcription overview" icon="book" href="/docs/guides/features/transcription">
    Billing, storage options, permissions, and a comparison of real-time vs. post-call approaches.
  </Card>

  <Card title="daily-js guide" icon="js" href="/docs/daily-js/features/transcription">
    Start and manage transcription from a call object with full parameter reference and a live captions example.
  </Card>

  <Card title="Daily React guide" icon="react" href="/docs/daily-react/docs/transcription">
    Use the `useTranscription` hook for reactive transcription state in React apps.
  </Card>
</CardGroup>


# VCS Box component
Source: https://docs.daily.co/docs/vcs/components/box

Developers can use Daily's VCS SDK to build custom video layouts and add graphics to live streamed and recorded video calls.

Acts as a container for other components. Can be optionally styled to render a visible element (e.g. a colored background). Similar to a `<div>` in HTML.

```javascript theme={null}
// See the "hello" component for an example of how to use the Box component
// https://github.com/daily-co/daily-vcs/blob/main/js/example/hello.jsx
import * as React from 'react';
import { Box } from '#vcs-react/components';

  // ...
  return <Box id="main">{/* Render something like a video grid here */}</Box>;
}
```

The Box component will typically have a layout prop provided so the Box can act as a layout container for its children (i.e. the components inside the box). Often a Box doesn’t render anything itself, it just specifies the layout that gets inherited by its children. Nesting boxes inside boxes can be a productive way to break down your design into manageable units.

See the section [Layout API](/docs/vcs/layout-api) for more details.

## Props

Properties specific to the `<Box>` component.

| Name        | Type      | Description                                                                                                                                                                                                                                                                                  | Default value |
| ----------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| `transform` | `Object`  | An object defining transformations to be applied at the compositing stage. Supported child properties: `rotate_deg` (Number), which specifies the rotation of the component in degrees.                                                                                                      | `null`        |
| `blend`     | `Object`  | An object of compositing-related properties. Supported child properties: `opacity`: (Number), which can range from 0 to 1 (0 is fully transparent, 1 is fully opaque). If you don't pass a value for `blend`, or the object you pass doesn't include `opacity`, it defaults to full opacity. | `null`        |
| `clip`      | `Boolean` | Controls whether the box clips the rendering of its children within its own layout frame.                                                                                                                                                                                                    | `false`       |

Properties available to all VCS components, including this one.

| Name     | Type               | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | Default value |
| -------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| `id`     | `String`           | A name of your choice for the component instance. Works just like the “id” property in HTML. Primarily useful for debugging.                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `null`        |
| `key`    | `String`, `Number` | This prop has a special meaning to the React runtime. When you render components inside an array (e.g. a list), each individual item in the array should have a different value for the key prop. React uses this internally to quickly compare the rendered array with its previous version.                                                                                                                                                                                                                                                                                    | `null`        |
| `style`  | `Object`           | An object of style. Each component class has its own supported style properties. For example, the `Text` lets you select font styles and sizing using style, but these are not relevant to other components. Note: VCS style properties are not the same as CSS properties.                                                                                                                                                                                                                                                                                                      | `{}`          |
| `layout` | `Array`            | Allows you to hook into your rendered components into the VCS layout system. After the React render cycle completes, the layout system computes final layout frames (coordinates within the output viewport). You can guide the layout process using callback functions and data you provide using the layout prop. The first value of the array must be a layout function. The second (optional) value can be a data object containing param values, which is passed to the layout function when computing the layout. See [Layout API](/docs/vcs/layout-api) for more details. | `null`        |

### `style` prop

The `style` prop accepts an object that can have the following values set.

| Name              | Type     | Description                                                   |
| ----------------- | -------- | ------------------------------------------------------------- |
| `cornerRadius_px` | `Number` | Apply a rounded mask to the corners of the component.         |
| `fillColor`       | `String` | Sets the background color of the component.                   |
| `strokeColor`     | `String` | Sets the outline color of the component.                      |
| `strokeWidth_px`  | `Number` | Sets the width of the outline around the component in pixels. |

<Tip>
  Valid color format options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</Tip>


# VCS Image component
Source: https://docs.daily.co/docs/vcs/components/image

Developers can use Daily's VCS SDK to build custom video layouts and add graphics to live streamed and recorded video calls.

Renders an image. Similar to `<img>` element in HTML. The `src` prop sets the image value; however, the `src` must be made available in [`session_assets`](/docs/vcs/session-assets).

```javascript theme={null}
// See the "hello" component for an example of how to use the Image component
// https://github.com/daily-co/daily-vcs/blob/main/js/example/hello.jsx
import * as React from 'react';
import { Image } from '#vcs-react/components';

  const src = 'test_square';
  const opacity = 0.5;
  return <Image src={src} blend={{ opacity }} />;
}
```

## How to provide image sources

An image source can be provided in one of three ways:

1. **A composition asset**: These are part of the composition itself.
   * For example, the baseline composition includes a small user icon that's used as the placeholder for a participant whose video is off or missing.

<Warning>
  Composition assets cannot be customized currently but we plan to offer this
  option in a future release.
</Warning>

2. **A session asset**: These are specified when you start a streaming session on Daily.
   * These images are downloaded and validated before any VCS rendering happens, so there's a guarantee that the image is never missing (assuming the session asset URL you provided was valid, of course).
   * Session assets are passed via the `session_assets` property in the live streaming or recording method being used. See the [Session assets page](/docs/vcs/session-assets) for more information.
3. **A dynamic asset**: These can be specified during a streaming session on Daily.
   * Sometimes you don't have an image available before the start of the session. Dynamic assets let you pass image URLs via Daily's API at runtime. They are downloaded and validated in the background, and your VCS composition can use a hook to inspect the list of dynamic assets to determine when new content is available. (This API is not yet available.)

## Props

Properties specific to the `<Image>` component.

| Name        | Type     | Description                                                                                                                                                                                                                                                                                                       | Default value |
| ----------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| `src`       | `String` | An asset name within the default namespace. [See above](/docs/vcs/components/image#how-to-provide-image-sources) for ways that assets can be made available.                                                                                                                                                      | `null`        |
| `scaleMode` | `String` | Determines how an imaine should be rendered within its layout frame. Available values: `fit` — image is rendered without any cropping, centered inside its layout frame, scaled as needed; `fill` — image is cropped and scaled to fill its layout frame; `stretch` — image is stretched to fill its layout frame | `fit`         |
| `transform` | `Object` | An object defining transformations to be applied at the compositing stage. Supported properties: `rotate_deg` (Number), which specifies the rotation of the component in degrees.                                                                                                                                 | `null`        |
| `blend`     | `Object` | An object of compositing-related properties. Supported child properties: `opacity`: (Number), which can range from 0 to 1 (0 is fully transparent, 1 is fully opaque). If you don't pass a value for `blend`, or the object you pass doesn't include `opacity`, it defaults to full opacity.                      | `null`        |

Properties available to all VCS components, including this one.

| Name     | Type               | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | Default value |
| -------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| `id`     | `String`           | A name of your choice for the component instance. Works just like the “id” property in HTML. Primarily useful for debugging.                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `null`        |
| `key`    | `String`, `Number` | This prop has a special meaning to the React runtime. When you render components inside an array (e.g. a list), each individual item in the array should have a different value for the key prop. React uses this internally to quickly compare the rendered array with its previous version.                                                                                                                                                                                                                                                                                    | `null`        |
| `style`  | `Object`           | An object of style. Each component class has its own supported style properties. For example, the `Text` lets you select font styles and sizing using style, but these are not relevant to other components. Note: VCS style properties are not the same as CSS properties.                                                                                                                                                                                                                                                                                                      | `{}`          |
| `layout` | `Array`            | Allows you to hook into your rendered components into the VCS layout system. After the React render cycle completes, the layout system computes final layout frames (coordinates within the output viewport). You can guide the layout process using callback functions and data you provide using the layout prop. The first value of the array must be a layout function. The second (optional) value can be a data object containing param values, which is passed to the layout function when computing the layout. See [Layout API](/docs/vcs/layout-api) for more details. | `null`        |

### `style` prop

The `style` prop accepts an object that can have the following values set.

| Name              | Type     | Description                                           |
| ----------------- | -------- | ----------------------------------------------------- |
| `cornerRadius_px` | `Number` | Apply a rounded mask to the corners of the component. |


# VCS Components
Source: https://docs.daily.co/docs/vcs/components/index

Developers can use Daily's VCS SDK to build custom video layouts and add graphics to live streamed and recorded video calls.

<Badge>Paid plans only</Badge>

VCS offers a collection of VCS-specific components for developers to add custom layouts and graphics to their live streaming and cloud recording video feeds.

Although VCS is based on React, it is designed for dynamic real-time video compositions rather than interactive browser-based applications. For this reason, the set of built-in components is different than what you are likely used to. VCS doesn't have the HTML-compatible elements like `<div>` and `<button>` that you would use to build a regular web app in React.js.

Instead, VCS uses four main components to build video compositions:

* [`<Box>`](/docs/vcs/components/box) — comparable to an HTML `<div>`
* [`<Image>`](/docs/vcs/components/image) — comparable to an HTML `<img>`
* [`<Text>`](/docs/vcs/components/text) — comparable to an HTML `<p>`
* [`<Video>`](/docs/vcs/components/video) — comparable to an HTML `<video>`

<Note>
  If you've ever used React Native, this description of library-specific components will sound familiar. React Native also provides its own set of built-in components — like `View` — which map to concepts found in mobile UI frameworks. One useful way to think of VCS is that it's a React-based toolbox, similar in approach to React Native, but designed from scratch for the special needs of video composition and real-time playback.
</Note>

### Embedded web content

There is also a fifth built-in component available: the WebFrame. It's an embedded browser that lets you display web URLs similar to an `<iframe>` tag inside a traditional web page. The embedded web site will render live on Daily's cloud. It will update in real time—not at a full 30fps video frame rate, but good enough for live document updates. You can even send simulated keyboard events to WebFrame for interactivity.

* [`<WebFrame>`](/docs/vcs/components/webframe) — comparable to an HTML `<iframe>`

<Note>
  If you need to play online video inside a VCS composition, you should look
  into Daily's Remote Media Player. See the WebFrame component documentation
  linked above for more information on the differences between the two.
</Note>

### Styling

VCS has made several styling properties available to each component, as described in their specific documentation. To learn more about why VCS is not compatible with CSS styling, read our [Layout API documentation](/docs/vcs/layout-api) for more information.

<Note>
  See the VCS [Core concepts section](/docs/vcs/core-concepts) for more information on how VCS works.
</Note>


# VCS Text component
Source: https://docs.daily.co/docs/vcs/components/text

Developers can use Daily's VCS SDK to build custom video layouts and add graphics to live streamed and recorded video calls.

Renders the provided text, which can optionally overflow onto multiple lines. Similar to a `<p>` element in HTML.

Text components typically have a `style` and `layout` prop provided to define how the text looks and where it should be placed within the parent layout container.

```javascript theme={null}
// See the "hello" component for an example of how to use the Text component
// https://github.com/daily-co/daily-vcs/blob/main/js/example/hello.jsx
import * as React from 'react';
import { Text } from '#vcs-react/components';

const labelStyle = {
  textColor: 'white',
  fontFamily: 'Roboto',
  fontWeight: '600',
  fontSize_px: 16,
};

  return <Text style={labelStyle}>Hello world</Text>;
}
```

VCS doesn’t have a style inheritance cascade like in CSS, so if you don’t pass the style prop, your text will get global default styling.

## Props

Properties specific to the `<Text>` component.

| Name        | Type      | Description                                                                                                                                                                                                                                                                                  | Default value |
| ----------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| `transform` | `Object`  | An object defining transformations to be applied at the compositing stage. Supported properties: `rotate_deg` (Number), which specifies the rotation of the component in degrees.                                                                                                            | `null`        |
| `blend`     | `Object`  | An object of compositing-related properties. Supported child properties: `opacity`: (Number), which can range from 0 to 1 (0 is fully transparent, 1 is fully opaque). If you don't pass a value for `blend`, or the object you pass doesn't include `opacity`, it defaults to full opacity. | `null`        |
| `clip`      | `Boolean` | Controls whether the box clips the rendering of its children within its own layout frame.                                                                                                                                                                                                    | `false`       |

Properties available to all VCS components, including this one.

| Name     | Type               | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | Default value |
| -------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| `id`     | `String`           | A name of your choice for the component instance. Works just like the “id” property in HTML. Primarily useful for debugging.                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `null`        |
| `key`    | `String`, `Number` | This prop has a special meaning to the React runtime. When you render components inside an array (e.g. a list), each individual item in the array should have a different value for the key prop. React uses this internally to quickly compare the rendered array with its previous version.                                                                                                                                                                                                                                                                                    | `null`        |
| `style`  | `Object`           | An object of style. Each component class has its own supported style properties. For example, the `Text` lets you select font styles and sizing using style, but these are not relevant to other components. Note: VCS style properties are not the same as CSS properties.                                                                                                                                                                                                                                                                                                      | `{}`          |
| `layout` | `Array`            | Allows you to hook into your rendered components into the VCS layout system. After the React render cycle completes, the layout system computes final layout frames (coordinates within the output viewport). You can guide the layout process using callback functions and data you provide using the layout prop. The first value of the array must be a layout function. The second (optional) value can be a data object containing param values, which is passed to the layout function when computing the layout. See [Layout API](/docs/vcs/layout-api) for more details. | `null`        |

### `style` prop

The `style` prop accepts an object that can have the following values set.

| Name             | Type     | Description                                                                                                                                                     |
| ---------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `textColor`      | `String` | Color of text to be rendered. Valid CSS values are accepted.                                                                                                    |
| `fontSize_gu`    | `Number` | Size of font in `gu` (grid units), a relative. Refer to the [VCS docs](/docs/vcs/layout-api#the-grid-unit) for information on grid units. unit.                 |
| `fontSize_px`    | `Number` | Size of font in `px` (pixel), an absolute unit.                                                                                                                 |
| `fontFamily`     | `String` | Font family to render text in. Accepted values: `Roboto`, `RobotoCondensed`, `Anton`, `Bangers`, `Bitter`, `Exo`, `Magra`, `PermanentMarker`, `SuezOne`, `Teko` |
| `fontStyle`      | `String` | Font style to render text in. Accepted values: `normal`, `italic`                                                                                               |
| `fontWeight`     | `String` | Font weight to render text in. Accepted values: `'100'`, `'200'`, `'300'`, `'400'`, `'500'`, `'600'`, `'700'`, `'800'`, `'900'`                                 |
| `strokeColor`    | `String` | Color of outline around text characters.                                                                                                                        |
| `strokeWidth_px` | `Number` | Stroke width in pixels of outline around text characters.                                                                                                       |

<Tip>
  Valid color format options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</Tip>


# VCS Video component
Source: https://docs.daily.co/docs/vcs/components/video

Developers can use Daily's VCS SDK to build custom video layouts and add graphics to live streamed and recorded video calls.

Renders a video input, similar to `<video>` in HTML. To set the `Video` component `src`, pass the `id` of a video input.

```javascript theme={null}
// See the "hello" component for an example of how to use the Video component
// https://github.com/daily-co/daily-vcs/blob/main/js/example/hello.jsx
import * as React from 'react';
import { Video } from '#vcs-react/components';
import { useActiveVideo } from '#vcs-react/hooks';

  const { dominantId } = useActiveVideo();
  return <Video key="video" src={dominantId} />;
}
```

Like with the [Image](/docs/vcs/components/image) component, video sources are selected using a `src` prop. However, video sources aren't assets like they are with Images. Instead, they are external inputs described in an array of “video input slots”. You can think of the slots as representing video call participants or potentially any other type of video input (for example, in a video editing application the input slots could represent tracks simultaneously active on a timeline).

There are two hooks available that let you discover what sources are available. [`useActiveVideo()`](/docs/vcs/custom-react-hooks/use-active-video) gives you a list of video source IDs that you can pass directly to a Video component's src prop. There is also [`useMediaInput()`](/docs/vcs/custom-react-hooks/use-media-input), which gives you access to the video input slots as a raw array.

<Note>
  Using [`useMediaInput()`](/docs/vcs/custom-react-hooks/use-media-input)
  is rarely necessary for a typical application, as
  [`useActiveVideo()`](/docs/vcs/custom-react-hooks/use-active-video)
  provides a filtered summary of available video sources.
</Note>

Note that VCS optimizes for video performance and tries to keep video rendering on
a video-specific fast path. This places some special restrictions on how you can
mix video and graphics components.

See the section [Core concepts](/docs/vcs/core-concepts) for more information.

## Props

Properties specific to the `<Video>` component.

| Name        | Type     | Description                                                                                                                                                                                                                                              | Default value |
| ----------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| `src`       | `String` | `id` of the video source that should be displayed. Retrieve video stream `id`s with the [`useActiveVideo()`](/docs/vcs/custom-react-hooks/use-active-video) hook — specifically the `activeIds` property in its returned object.                         | `null`        |
| `scaleMode` | `String` | Determines how an imaine should be rendered within its layout frame. Available values: `fit` — image is rendered without any cropping, centered inside its layout frame, scaled as needed, `fill` — image is cropped and scaled to fill its layout frame | `fit`         |

Properties available to all VCS components, including this one.

| Name     | Type               | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | Default value |
| -------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| `id`     | `String`           | A name of your choice for the component instance. Works just like the “id” property in HTML. Primarily useful for debugging.                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `null`        |
| `key`    | `String`, `Number` | This prop has a special meaning to the React runtime. When you render components inside an array (e.g. a list), each individual item in the array should have a different value for the key prop. React uses this internally to quickly compare the rendered array with its previous version.                                                                                                                                                                                                                                                                                    | `null`        |
| `style`  | `Object`           | An object of style. Each component class has its own supported style properties. For example, the `Text` lets you select font styles and sizing using style, but these are not relevant to other components. Note: VCS style properties are not the same as CSS properties.                                                                                                                                                                                                                                                                                                      | `{}`          |
| `layout` | `Array`            | Allows you to hook into your rendered components into the VCS layout system. After the React render cycle completes, the layout system computes final layout frames (coordinates within the output viewport). You can guide the layout process using callback functions and data you provide using the layout prop. The first value of the array must be a layout function. The second (optional) value can be a data object containing param values, which is passed to the layout function when computing the layout. See [Layout API](/docs/vcs/layout-api) for more details. | `null`        |

### `style` prop

The `style` prop accepts an object that can have the following values set.

| Name              | Type     | Description                                           |
| ----------------- | -------- | ----------------------------------------------------- |
| `cornerRadius_px` | `Number` | Apply a rounded mask to the corners of the component. |


# VCS WebFrame component
Source: https://docs.daily.co/docs/vcs/components/webframe

Developers can use Daily's VCS SDK to build custom video layouts and add graphics to live streamed and recorded video calls.

Renders an embedded web page. Similar to `<iframe>` element in HTML, but with the following essential differences:

* You can only use one WebFrame element inside a VCS composition. (In other words, WebFrame is a "singleton".)
  * Creating multiple WebFrame elements is undefined behavior. They will render the same content even if you set different source URLs. To avoid this, use only one WebFrame element in your composition.
* The WebFrame element doesn't update at a guaranteed frame rate. You should assume the content will be refreshed about two times per second (2 fps).
* You can control the web page by sending keyboard events to it (see section below).

In practice, WebFrame behaves a lot like an image component that renders a live web page instead of a static image asset. You can use all the props that exist on [`<Image>`](/docs/vcs/components/image).

<Note>
  WebFrame is ideal for displaying embedded documents or web-based live widgets,
  but it is not a media player. You shouldn't use it for web pages that contain
  video or dynamic animated content because the frame rate is too low. (To play
  online video sources in a Daily room, you can use Remote Media Player, a beta
  feature. Remote Media Player behaves like a participant in the room so it
  doesn't require any special handling in VCS. For more information about Remote
  Media Player,

  <Anchor href="https://www.daily.co/company/contact/support/">
    contact our support team
  </Anchor>

  .)
</Note>

The `src` prop sets the URL of the web page to be loaded. Note that VCS will load this URL on Daily's cloud-based media servers, so the page must be publicly accessible.

The `viewportSize` prop sets the size of the embedded browser window in pixels. The value must be an object containing properties `w` and `h`. You should always set this prop to a value that fits your content. If unset, WebFrame will use a default viewport size. The default size is currently 1280\*720 pixels, but could change depending on rendering environment.

<Note>
  The choice of viewport size is very important to make your web page look good
  when embedded in a video stream. If you use a large viewport size, text within
  the web page may become too small to read after it's been encoded into video.
  It's usually better to use a smaller viewport to make the page elements more
  legible. Remember that the WebFrame element scales just like an image, so you
  don't have to use a viewport size that matches your output video size exactly.
  (Your web browser's Developer Tools can be useful in determining a suitable
  size: load up the page you want to embed, open Developer Tools, and resize the
  window; the viewport size will be displayed as you resize.)
</Note>

Code example:

```javascript theme={null}
import * as React from 'react';
import { WebFrame } from '#vcs-react/components';

  const src = 'https://example.com';
  const size = { w: 960, h: 640 };
  const opacity = 0.9;
  return <WebFrame src={src} viewportSize={size} blend={{ opacity }} />;
}
```

## Props

Properties specific to the `<WebFrame>` component:

| Name             | Type     | Description                                                                          | Default value |
| ---------------- | -------- | ------------------------------------------------------------------------------------ | ------------- |
| `src`            | `String` | A URL to be loaded into the embedded web browser.                                    | `null`        |
| `viewportSize`   | `Object` | The size of the viewport for the embedded web browser. See description above.        | `null`        |
| `keyPressAction` | `Object` | A simulated key press to be sent to the embedded web browser. See description above. | `null`        |

Properties shared with the `<Image>` component:

| Name        | Type     | Description                                                                                                                                                                                                                                                                                  | Default value |
| ----------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| `scaleMode` | `String` | Determines how the browser image should be rendered within its layout frame. Available values: `"fit"` — image is rendered without any cropping, centered inside its layout frame, scaled as needed, `"fill"` — image is cropped and scaled to fill its layout frame                         | `"fit"`       |
| `transform` | `Object` | An object defining transformations to be applied at the compositing stage. Supported properties: `rotate_deg` (Number), which specifies the rotation of the component in degrees.                                                                                                            | `null`        |
| `blend`     | `Object` | An object of compositing-related properties. Supported child properties: `opacity`: (Number), which can range from 0 to 1 (0 is fully transparent, 1 is fully opaque). If you don't pass a value for `blend`, or the object you pass doesn't include `opacity`, it defaults to full opacity. | `null`        |

Properties available to all VCS components, including this one.

| Name     | Type               | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | Default value |
| -------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| `id`     | `String`           | A name of your choice for the component instance. Works just like the “id” property in HTML. Primarily useful for debugging.                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `null`        |
| `key`    | `String`, `Number` | This prop has a special meaning to the React runtime. When you render components inside an array (e.g. a list), each individual item in the array should have a different value for the key prop. React uses this internally to quickly compare the rendered array with its previous version.                                                                                                                                                                                                                                                                                    | `null`        |
| `style`  | `Object`           | An object of style. Each component class has its own supported style properties. For example, the `Text` lets you select font styles and sizing using style, but these are not relevant to other components. Note: VCS style properties are not the same as CSS properties.                                                                                                                                                                                                                                                                                                      | `{}`          |
| `layout` | `Array`            | Allows you to hook into your rendered components into the VCS layout system. After the React render cycle completes, the layout system computes final layout frames (coordinates within the output viewport). You can guide the layout process using callback functions and data you provide using the layout prop. The first value of the array must be a layout function. The second (optional) value can be a data object containing param values, which is passed to the layout function when computing the layout. See [Layout API](/docs/vcs/layout-api) for more details. | `null`        |

### `style` prop

The `style` prop accepts an object that can have the following values set:

| Name              | Type     | Description                                           |
| ----------------- | -------- | ----------------------------------------------------- |
| `cornerRadius_px` | `Number` | Apply a rounded mask to the corners of the component. |

## Sending events to the web page

You can interact with the page loaded into a WebFrame by sending it a **key press action**, a simulated keyboard event.

This is particularly useful for document viewers. For example, if you're embedding a Google Slides presentation, you might want to first send a key press to enter slideshow mode, then send arrow keys to navigate between slides.

The key press action is described using a prop called `keyPressAction`, which is available on the WebFrame component. Its value must be an object with the following properties:

* `name` - the name of the key to be pressed. (See below for list of key names.)
* `modifiers` - a list of modifier keys to be activated for the key press.
  * Possible values are: `"Shift"`, `"Control"`, `"Alt"`, `"Meta"`
  * On a Mac keyboard, `"Alt"` is equal to Option and `"Meta"` is equal to Command.
  * You should combine the keys with a plus sign. E.g. `"Shift+Meta"`
* `key` - a unique identifier for this specific key press.
  * Should be an integer greater than zero.

The `key` property is required because a key press is functionally an event occurring at a specific moment in time (the simulated key is pressed and depressed). Because the same keys can be pressed over and over, we need a way to tell VCS when a key press has just happened. The `key` property accomplishes this. When you update `key` to a new value, VCS will send the simulated event to the embedded browser.

<Note>
  Note that 'key' in this context means something other than a key on the
  physical keyboard. We opted to follow the established convention of React,
  where 'key' means this kind of distinguishing unique identifier.
</Note>

### Key names

The following key names are supported:

* Digits **0 - 9**
* Letters **A - Z**
* ASCII special characters, e.g. **!**, **@**, **+**, **>**, etc.
* Function keys **F1 - F12**
* **Enter**
* **Escape**
* **Backspace**
* **Tab**
* Arrow keys **ArrowUp, ArrowDown, ArrowLeft, ArrowRight**
* **PageDown, PageUp**

You can combine these with the modifiers listed previously.

### Code example

The following example functions create key press actions to control a Google Slides document.

```javascript theme={null}
let kpkey = 0;

export function makeKeyPressAction_StartSlideShow() {
  return {
    name: 'Enter',
    modifiers: 'Shift+Meta',
    key: ++kpkey,
  };
}

export function makeKeyPressAction_NextSlide() {
  return {
    name: 'ArrowRight',
    modifiers: '',
    key: ++kpkey,
  };
}
```

Note that the returned object from these functions would be used as the `keyPressAction` prop value for a WebFrame component. (In a real application, you'd probably want to store `kpkey` in a React ref within the component that contains the WebFrame.)


# VCS best practices
Source: https://docs.daily.co/docs/vcs/core-concepts/best-practices

Developers can use Daily's VCS SDK to build custom video layouts and add graphics to live streamed and recorded video calls.

<Badge>Paid plans only</Badge>

<Note>
  **VCS is compatible with any frontend framework**

  Even though VCS is React-based, **your app using VCS for Daily live streaming or cloud recording does not need to be built with React**.

  VCS-based cloud rendering is achieved through the Daily API. This means the VCS code you run in the cloud is by default entirely independent of how your client application is structured. In other words, your web app could be written with Vue, Svelte, or any other framework and still be compatible with VCS.
</Note>

When building custom components with the VCS SDK, best practices for building React components will differ slightly from what you may be used to while building standard client-side React apps.

The recommendations below specifically apply to VCS components.

## Avoid event listeners

A VCS composition is a special kind of React program because it doesn't deal with user events directly. There's no need to attach event listeners on your components. Any user actions will be filtered through the embedding host so that the VCS composition just sees param values being updated.

Instead of events happening at unpredictable times, there's a video playback clock that renders frames at completely regular intervals. If some data isn't available yet within your component, you can simply check again at the next frame in 1/30th of a second. There's less need to manage state with dependency callbacks.

## Use the `useRef()` React hook instead of `useState()`

For the two reasons mentioned above, the [`React.useState`](https://reactjs.org/docs/hooks-state.html) hook isn't as useful in VCS as it is in typical interactive client applications. You don't need to update state from event callbacks. Triggering re-renders when state changes may make the single React render cycle take longer, and that makes the overall frame rate more uneven compared to just waiting for the next frame.

Consider using [`React.useRef`](https://reactjs.org/docs/hooks-reference.html#useref) instead, which lets you store data specific to a component instance without triggering re-renders.

<Tip>
  Custom components built in the VCS SDK should have performance benefits by using the [`React.useRef`](https://reactjs.org/docs/hooks-reference.html#useref) hooks instead of [`React.useState`](https://reactjs.org/docs/hooks-state.html). The frame rate of the video feed will be more even when re-renders are avoided.
</Tip>

## Use the `useVideoTime()` VCS custom React hook

The current video time is an important data dependency for any VCS component that renders an animation or something that's displayed for a limited time. You can access it with the [`useVideoTime()`](/docs/vcs/custom-react-hooks/use-video-time) hook.

You should be careful to not use "wall clock" time within your compositions. It's possible that your VCS composition will be rendered in offline mode, i.e. as a batch render job rather than a live video stream. In this case VCS video time may advance at a completely different rate than the value you get from JavaScript time APIs like [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date).

## Avoid `setTimeout()` and `setInterval()`

Additionally, in VCS you should not use [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/setInterval) or [`setTimeout()`](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout). This is because they use the wall clock time rather than video time.

A component that needs to wait a specific interval needs to manage this state itself using `useRef`. The [`Toast` component](https://github.com/daily-co/daily-vcs/blob/main/compositions/daily-baseline/components/Toast.js) in the baseline composition provides an example of how to achieve this.

***

Before testing out the VCS SDK, we recommend reading our other `Core concepts` pages if you haven't already:

* [Core concepts](/docs/vcs/core-concepts)
* [Composition file structure & interface](/docs/vcs/core-concepts/composition)
* [Input and compositing models](/docs/vcs/core-concepts/input-and-compositing-models)


# VCS SDK: Composition file structure and interface
Source: https://docs.daily.co/docs/vcs/core-concepts/composition

Developers can use Daily's VCS SDK to build custom video layouts and add graphics to live streamed and recorded video calls.

<Badge>Paid plans only</Badge>

<Tip>
  See section [`Core concepts: Video composition`](/docs/vcs/core-concepts#video-composition) for more background on this concept of a VCS video composition.
</Tip>

Daily VCS compositions should be supplied as a folder containing an `index.jsx` file. The `index.jsx` file is called the "composition root". The baseline composition's [`index.jsx` file](https://github.com/daily-co/daily-vcs/blob/main/compositions/daily-baseline/index.jsx) can be used an example of what any custom versions should look like.

Your `index.jsx` file must use the newer JavaScript module standard, i.e. `import`/`export` statements. (The older Node.js style of `require` and `module.exports` will not work.)

A `package.json` is not required in the folder supplied for a [live stream](/reference/daily-js/instance-methods/start-live-streaming) or [recording](/reference/daily-js/instance-methods/start-recording). VCS uses runtime inspection to discover the composition's features, and importing third party packages from `npm` isn't supported. (You can still include a `package.json` for metadata, if you want.)

## Composition root entry points

The composition root must export two entry points:

1. The composition interface, a JSON object:

```jsx theme={null}
export const compositionInterface = {
  displayMeta: {
    name: 'Daily Baseline',
    description: "Composition with Daily's baseline features",
  }, // ....
```

2. The root component — a React functional component — which must be the default export:

```jsx theme={null}
  // ... this is a React component that renders the composition
```

We can see examples of how these should look in Daily's VCS baseline composition source code:

* The [composition interface](https://github.com/daily-co/daily-vcs/blob/main/compositions/daily-baseline/index.jsx#L70) for the VCS baseline composition
* The [root composition](https://github.com/daily-co/daily-vcs/blob/main/compositions/daily-baseline/index.jsx#L585) for the VCS baseline composition

<Tip>
  **Reminder**

  The VCS baseline composition is Daily's default collection of layout and graphics features built with the VCS SDK. The VCS SDK has been open sourced to allow developers to customize their layouts/graphics for live streaming and cloud recordings *beyond* what you can already do with the baseline composition.
</Tip>

<Warning>
  You may notice the composition examples included in the [`daily-vcs/js/example`](https://github.com/daily-co/daily-vcs/tree/main/js/example) folder are single-file compositions. We've intentionally broken our own rule to make the examples easier to browse. A single-file composition cannot include [assets](/docs/vcs/core-concepts/input-and-compositing-models#3-assets) so it is an extremely limited way of interacting with the VCS SDK.
</Warning>

## The composition interface format

The object exported as `compositionInterface` may contain the following properties:

### `displayMeta`: Object

* `name`: String
  * User-visible name for the composition (shown in the [simulator](/docs/vcs/tools/simulator) UI)
* `description`: String
  * User-visible description of the composition

### `params`: Array of `ParamDesc`

* `ParamDesc`: Object
  * `id`: String (Mandatory)
    * An internal ID for this param
    * This ID can be used to look up the param's value at runtime
  * `type`: String (enum) (Mandatory)
    * Allowed values are:
      * `boolean`: Rendered as a checkbox in the [simulator](/docs/vcs/tools/simulator) UI
      * `number`: Rendered as a number field (with increment/decrement buttons) in the [simulator](/docs/vcs/tools/simulator) UI
      * `text`: Rendered as a text field in the [simulator](/docs/vcs/tools/simulator) UI
      * `enum`: Rendered as a pop-up menu button (a HTML `<select>` element) in the [simulator](/docs/vcs/tools/simulator) UI
        * When using this type, include the `values` property
  * `defaultValue`: `any`, depends on `type` (Optional)
  * `values`: Array of strings (Optional)
    * Only applies to the `enum` type
  * `step`: Number (Optional)
    * Only applies to the `number` type
    * Sets the increment/decrement step for the [simulator](/docs/vcs/tools/simulator) UI

***

Continue reading our additional `Core concepts` pages:

* [Input and compositing models](/docs/vcs/core-concepts/input-and-compositing-models)
* [VCS Best practices](/docs/vcs/core-concepts/best-practices)


# VCS SDK: Core concepts
Source: https://docs.daily.co/docs/vcs/core-concepts/index

Developers can use Daily's VCS SDK to build custom video layouts and add graphics to live streamed and recorded video calls.

<Badge>Paid plans only</Badge>

Before reviewing the main core concepts for VCS, lets first distinguish between the [baseline composition](/docs/guides/features/live-streaming/vcs#the-baseline-composition) and the SDK.

If you already know the difference between them, jump to [Core concepts](/docs/vcs/core-concepts#core-concepts).

## VCS Baseline composition vs. SDK

### Daily's baseline composition

The baseline composition is VCS's default collection of layout and graphics features that work together and are easily accessible with a unified JSON-based control interface. It allows developers to add custom layouts and graphics via `daily-js` and `react-native-daily-js`'s [live streaming](/reference/daily-js/types/daily-streaming-layout-config#vcs-baseline-composition) and [recording](/reference/daily-js/types/daily-streaming-layout-config#baseline-composition-properties) instance methods.

In other words, you can pass a JSON blob of [composition properties](/reference/daily-js/types/daily-streaming-layout-config#baseline-composition-properties) in the [`startLiveStreaming()`](/reference/daily-js/types/daily-streaming-layout-config#vcs-baseline-composition) or [`startRecording()`](/reference/daily-js/types/daily-streaming-layout-config#baseline-composition-properties) Daily instance methods, and VCS will apply those settings to your video feed.

```javascript theme={null}
await call.startLiveStreaming({
  rtmpUrl: 'RTMP_URL',
  layout: {
    preset: 'custom', // required
    composition_id: 'daily:baseline', // optional: default value
    composition_params: {
      mode: 'dominant',
      showTextOverlay: true,
      'text.content': 'Hello',
      'text.align_horizontal': 'right',
      'text.align_vertical': 'bottom',
      'text.fontFamily': 'Exo',
      'text.fontWeight': '500',
      'videoSettings.roundedCorners': true,
      'videoSettings.showParticipantLabels': true,
      showImageOverlay: true,
      'image.assetName': 'logo.png',
    },
    session_assets: {
      // the key is images/ followed by your file name, including the extension
      // the value must be an absolute URL to a hosted asset
      // image.assetName must match this key without the images/ prefix, e.g. logo.png
      'images/logo.png': 'https://example.com/logo.png',
    },
  },
});
```

<Tip>
  Read our [blog tutorial](https://www.daily.co/blog/use-dailys-video-component-system-to-add-an-image-overlay-to-your-live-stream/) on using the baseline composition for more information.
</Tip>

### VCS SDK

The VCS SDK is the open sourced version of Daily's baseline composition. It's better suited for anyone who wants to customize their live streams or recordings beyond the options made available via the baseline composition. For example, our [tutorial on how to add a moving watermark](https://www.daily.co/blog/vcs-tutorial-moving-watermark/) to your live stream is an example of something you add with the VCS SDK, which is not available through the baseline composition.

Instead of passing a JSON blob, you can clone the VCS SDK [GitHub repo](https://github.com/daily-co/daily-vcs), edit components, and then pass your custom components to the Daily instance method you're using. VCS will swap in your custom components and apply those to the video feed instead.

```javascript theme={null}
await call.startLiveStreaming({
  /* other configuration omitted for brevity */
  layout: {
    preset: 'custom',
    session_assets: {
      'CustomOverlay.js':
        'https://example.com/my_custom_composition/MyCustomComponent.js',
    },
  },
});
```

Let's not get ahead of ourselves, though, because the VCS SDK requires some background information to fully understand how it works. Now that we know what the VCS SDK is, we can take a look at its core concepts.

***

## Core concepts

Daily's Video Component System (VCS) is a video composition SDK build by Daily for Daily [live streaming](/reference/daily-js/instance-methods/start-live-streaming) and [cloud recording](/reference/daily-js/instance-methods/start-recording). VCS is a [React](https://reactjs.org/)-based system for embeddable cross-platform real-time video compositions. Quite a mouthful! Let's expand on each of these points and the main goals of VCS.

* [Video compositions](/docs/vcs/core-concepts#video-composition)
* [Real-time](/docs/vcs/core-concepts#real-time)
* [Embeddable](/docs/vcs/core-concepts#embeddable)
* [Cross-platform](/docs/vcs/core-concepts#cross-platform)
* [React-based](/docs/vcs/core-concepts#react-based)

<Note>
  **VCS is compatible with any frontend framework.**

  Even though VCS is React-based, **your app using VCS for Daily live streaming or cloud recording does not need to be built with React**.

  VCS-based cloud rendering is achieved through the Daily API. This means the VCS code you run in the cloud is by default entirely independent of how your client application is structured. In other words, your web app could be written with Vue, Angular, or any other framework and still be compatible with VCS.
</Note>

### Video composition

In VCS, a video composition is a JavaScript program using the React runtime. The program receives input in specific formats that describe your live video inputs, images, and control data. Based on this input, the composition renders a tree of video and graphics elements, which the VCS framework then further transforms into an optimized representation that gets turned into final video pixels by a native pipeline. In other words, the composition is a long-running program that decides what to render at each frame, but doesn't access or modify video frame data directly.

### Real-time

Live video usually runs at 30fps and missed frames are often noticeable, so VCS has a strict performance constraint. Frames must be delivered quickly. Although JavaScript engines are fast nowadays, they're definitely not so fast that you'd want to execute every aspect of video compositing in pure JavaScript! VCS is designed so that only the parts of the compositing pipeline that benefit from programmability and composability are implemented in JavaScript and React. With any parts, native capabilities are harnessed for the heavy lifting of graphics and video rendering. In other words, all VCS components are “real-time-friendly".

### Embeddable

VCS compositions are programs but they're not standalone applications. Typically VCS provides compositing capabilities to a host application. The VCS composition executes in its own JavaScript sandbox that doesn't have access to the rest of the host.

You may already be familiar with using the [VCS baseline composition](/docs/guides/features/live-streaming/vcs#the-baseline-composition) via the Daily API in [live streaming](/reference/daily-js/types/daily-streaming-layout-config#vcs-baseline-composition) and [recording](/reference/daily-js/types/daily-streaming-layout-config#baseline-composition-properties). When you're sending composition param values over this Daily API, you're working on the outside of the embedding boundary. The baseline composition executes on Daily's cloud embedded inside a media processing pipeline, but the only way to communicate with this composition is through its params API.

<Tip>
  The VCS SDK is the open source version of the Daily [baseline composition](/docs/guides/features/live-streaming/vcs#the-baseline-composition) code. Think of using the VCS SDK as being able to edit and update the baseline composition to match your exact live streaming and recording layout requirements. To see what is available via the baseline composition, try out Daily's [VCS Simulator](https://www.daily.co/tools/vcs-simulator/daily_baseline.html), which contains an interface for toggling or setting every composition param available through the baseline composition.
</Tip>

As a VCS SDK developer, you'll now be working on the inside of the embedding boundary. You get to define the params API in a way that makes sense for your composition. You get access to direct programmability that would be hard or impossible to express in terms of a plain JSON API. Similarly, you also need to be aware of the boundary. That is to say: the host application puts your code in a sandbox for a reason and you need to work within what's available.

The VCS SDK provides a tool called the [VCS Simulator](/docs/vcs/tools/simulator) which loads your custom composition into a standard browser-based GUI. The VCS Simulator is like a generic host application that lets you click buttons to send data to your composition and see how its output changes. When your code works in the simulator, we do our best to guarantee that it will produce the same output on Daily's cloud pipeline as well.

<Note>
  **Note**: The VCS Simulator will reflect whatever local changes have been made. It is the editable version of the [VCS Simulator](https://www.daily.co/tools/vcs-simulator/daily_baseline.html) Daily hosts as a tool for developers working with the baseline composition.
</Note>

### Cross-platform

The previous paragraph implicitly mentioned two quite different platforms already: the VCS Simulator runs locally in your browser, while Daily's server-side pipeline runs somewhere in the cloud. The same VCS composition can be loaded in both contexts.

This is a core promise of VCS — it's an abstraction for programmable video composition that scales to deliver real-time video performance on almost any platform. VCS makes a special effort to optimize its rendering pipeline for the data types and color spaces used in video content. This is unlike browser engines or most tools outside of very specialized live video apps. We currently offer the browser target and the Daily server pipeline, but the VCS paradigm is also compatible with mobile operating systems and GPU-accelerated graphics.

<Tip>
  Though it is not currently available, the composition you make in VCS today could eventually be running inside an iOS app with full acceleration and native graphics performance. We're currently working on this, so keep an eye out for more [announcements](https://twitter.com/trydaily).
</Tip>

### React-based

We chose React for VCS because it's a popular runtime with a powerful abstraction that's independent of browser APIs. The success of React Native has shown that React is very suitable for non-web application contexts. VCS takes many lessons from React Native and applies them to dynamic video compositing. For example, VCS has specific component types defined, similar to how React Native has a `<View>` component that is used similar to how a `<div>` element is used in a browser.

<Note>
  Read our [VCS best practices page](/docs/vcs/core-concepts/best-practices) for more information on building VCS React components.
</Note>

***

## Summary

These features also have some important consequences for how the framework is implemented and how it's best used.

The set of components and styles available in VCS is necessarily limited compared to HTML and CSS. We need to keep everything real-time-friendly and compatible with the performance constraints of scalable server-side rendering, meaning it's simply not possible to provide the enormous range of capabilities found in CSS today.

<Note>
  Even though many of the style options in VCS look similar to CSS, available options are curated for the most common styles required to customize video feed layouts. Review the [style properties](/docs/vcs/components/box#style-prop) included in the description of each VCS component to learn more.
</Note>

You also need to be aware of some requirements around how you structure your composition to be compatible with the embedding and output optimization.

As a next step, let's consider how your mental model of React may need to adjust a little for video rendering in our [VCS best practices](/docs/vcs/core-concepts/best-practices) page.

Next, continue reading our additional `Core concepts` pages:

* [Composition file structure & interface](/docs/vcs/core-concepts/composition)
* [Input and compositing models](/docs/vcs/core-concepts/input-and-compositing-models)


# VCS SDK: Input and compositing models
Source: https://docs.daily.co/docs/vcs/core-concepts/input-and-compositing-models

Developers can use Daily's VCS SDK to build custom video layouts and add graphics to live streamed and recorded video calls.

<Badge>Paid plans only</Badge>

VCS compositions run in a sandbox inside an embedding host.

<Tip>
  See section [`Core concepts: Embeddable`](/docs/vcs/core-concepts#embeddable) for more background on this concept of an "embedding host".
</Tip>

Due to the sandbox, the inputs available to your composition are tightly constrained. This means:

* There are no direct user events
* You can't access devices like video inputs directly
* You can't create network requests to fetch data from online sources

Instead, VCS provides several types of runtime input. Let's take a look at what they are.

## Four types of runtime inputs

The four types of runtime inputs available let your compositions access control data and different types of sources. They include:

### 1. **Parameters**

These are like React props, but defined by your composition and exported to the "outside world".

The data types available for parameters are limited to what's included in the composition parameters. See section [`Composition file structure and interface`](/docs/vcs/core-concepts/composition) for more info about how `compInterface` defines parameters using a JSON format.

The [VCS Simulator](/docs/vcs/tools/simulator) dynamically creates its UI based on the parameters declared by the composition. This way you can easily test sending data to the composition.

Inside your composition, the [`useParams()`](/docs/vcs/custom-react-hooks/use-params) hook provides access to the current param values.

### 2. **Video slots**

These give you access to realtime media. The slots are an array of media stream descriptions.

VCS doesn't have access to the actual media data (e.g. you can't directly modify pixels in video streams). Instead the embedding host provides an array of slots describing the inputs. For each slot, these are the important properties:

1. **Source ID**: An opaque ID identifying the source. This is what you'd pass to a [`<Video>`](/docs/vcs/components/video) element to render this source.
2. **Active**: A boolean value indicating whether this source is active.
3. **Paused**: A boolean value indicating whether the video is paused.
4. **Display name**: A string that represents the source. Depending on the embedding context, it could be a camera device name, a video call participant name, or something else.

The interpretation of "active" and "paused" depends on the application. On a Daily video call, a video slot may be active if there's a connection to the participant, but simultaneously in a paused state if the video is interrupted or muted by the participant.

Although you can read the stream descriptions in the slots directly, it's highly recommended to use the [`useActiveVideo()`](/docs/vcs/custom-react-hooks/use-active-video) hook to get a streamlined representation of the data filtered into convenience objects like `activeIds`.

### 3. **Assets**

Assets refer to any media that's not realtime. Currently, the only type of asset you can access within a VCS composition are images.

Assets come in three flavors:

1. Composition assets
2. Session assets
3. Dynamic assets

<Tip>
  See the documentation for the [`Image`](/docs/vcs/components/image) component for more information on these asset types.
</Tip>

### 4. **WebFrame**

WebFrame gives you an embedded web browser that behaves much like an image component within your composition. You can render it anywhere and change its source URL and size. It will update in real time—not at a full 30fps video frame rate, but good enough for live document updates. You can even send simulated keyboard events to WebFrame for interactivity.

<Tip>
  See the documentation for the [`WebFrame`](/docs/vcs/components/webframe) component for more information.
</Tip>

***

# Compositing model

<Badge>the video hamburger</Badge>

Video frames are a special type of image. They're usually compressed and processed in data formats and color spaces that are specifically intended for video data. These tend to have weird names like "Y'CbCr 4:2:2 Rec.709", which happens to be the most common data format under the umbrella of formats known as [`YUV`](https://en.wikipedia.org/wiki/YUV).

VCS is designed with the assumption that the heavy lifting of your video composition will deal with video inputs that output to either video encoding or display. This is mostly YUV pixel data. Yet there's also a clear need to integrate RGBA graphics so that authors can create motion graphics as they're used to. So VCS adopts a hybrid model where different types of content are internally routed and you only need to be aware of some simple rules.

VCS lets you define your video layers and graphics elements seamlessly together in one composition. It then internally optimizes the composition's output renderables so that the compositing model becomes a "video hamburger".

### The video hamburger metaphor for VCS's compositing model

* The "beef" of the hamburger is a stack of video layers. These are composited in the right [`YUV`](https://en.wikipedia.org/wiki/YUV) color space to match the incoming video data. This allows us to avoid extraneous color space conversions.
* The "buns" of the hamburger are RGBA layer groups. These are your foreground and (optionally) background graphics. Any overlay graphics elements in your VCS composition are rendered with alpha channel in the foreground "bun" which is then composited into the destination video color space, thus avoiding any unwanted color space conversions here as well.

<img alt="VCS video hamburger diagram" />

What this means for you as a VCS composition author in practice is that any graphics elements that you render in between "beef" layers (i.e. [`<Video>`](/docs/vcs/components/video) components) will actually end up rendered as part of the "bun".

This re-shuffling of the layer order doesn't affect the visual output for typical compositions because motion graphics tend to be strictly overlays. However, if you're looking to do something particularly complex where video and graphics content overlap, you may need to "fake" the effect by, for example, using [`<Box>`](/docs/vcs/components/box) components with clipping enabled to punch holes in your graphics to let the video show through.

***

Before testing out the VCS SDK, we recommend reading our other `Core concepts` pages if you haven't already:

* [Core concepts](/docs/vcs/core-concepts)
* [Composition file structure & interface](/docs/vcs/core-concepts/composition)
* [VCS best practices](/docs/vcs/core-concepts/best-practices)


# VCS: Custom React Hooks
Source: https://docs.daily.co/docs/vcs/custom-react-hooks/index

Developers can use Daily's VCS SDK to build custom video layouts and add graphics to live streamed and recorded video calls.

<Badge>Paid plans only</Badge>

VCS leverages custom React hooks to allow developers to access a variety of data managed by VCS. To learn more about the basics of how custom React hooks work, read [React's documentation](https://reactjs.org/docs/hooks-custom.html) on the subject.

<Note>
  **Note: VCS is compatible with any frontend framework.**

  Even though VCS is React-based and has its own custom React hooks, **your app using VCS for Daily live streaming or cloud recording does not need to be built with React**.

  These custom React hooks refer to the hooks VCS is using internally to expose media and layout data to developers to help you build custom video compositions.
</Note>


# VCS: useActiveVideo()
Source: https://docs.daily.co/docs/vcs/custom-react-hooks/use-active-video

Developers can use Daily's VCS SDK to build custom video layouts and add graphics to live streamed and recorded video calls.

`useActiveVideo(params?): Object`

Contains a set of convenient properties, including which video inputs are available and available metadata for them.

The various IDs referenced below are video slot source IDs. These are opaque identifiers, meaning the values won't be meaningful to the reader. You can pass them to the `src` property of a [`<Video>`](/docs/vcs/components/video) component to render the video feed as the source.

## Params

<Badge>optional</Badge>

An object with the following properties:

| Parameter           | Required | Type      | Description                                                                                                                                                                                            |
| :------------------ | :------: | :-------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `preferScreenshare` |    No    | `Boolean` | When enabled, screen share inputs will be sorted before camera inputs. This is useful when prioritizing screen shares in your layout, especially when all inputs are not included in the final stream. |

## Return type

`useActiveVideo()` returns an object with the following propeties:

| Property                     | Type             | Description                                                                                                                                                                                                                                         |
| :--------------------------- | :--------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `activeIds`                  | `Array`          | Currently active video source IDs.                                                                                                                                                                                                                  |
| `activeScreenshareIds`       | `Array`          | Currently active video source ids that are of type `'screenshare'`.                                                                                                                                                                                 |
| `dominantId`                 | `String`, `null` | The first video source which has the `'dominant'` flag set. In a video call context, the first video source with the `'dominant'` flag is the active speaker. If none of the inputs are set as `'dominant'`, this will be `null`.                   |
| `displayNamesById`           | `Object`         | A map of display names for each active video ID. Keys are video IDs, values are strings.                                                                                                                                                            |
| `pausedById`                 | `Object`         | A map of paused flags for each active video ID. Keys are video IDs, values are booleans.                                                                                                                                                            |
| `maxSimultaneousVideoInputs` | `Number`         | A count that indicates how many video inputs the embedding host can support. This number represents the number of simultaneous participant video connections the cloud server running the VCS composition can support. (E.g. 20 video connections.) |

## Sample code

<Tip>
  Additional examples of usage for this custom hook can be found in the [source code for the VCS SDK](https://github.com/daily-co/daily-vcs).
</Tip>

```javascript theme={null}
import * as React from 'react';
import { Box, Video } from '#vcs-react/components';
import { useActiveVideo } from '#vcs-react/hooks';

  scaleMode,
  videoStyle,
  placeholderStyle,
  preferScreenshare,
}) {
  const { activeIds } = useActiveVideo({ preferScreenshare });
  const activeId = activeIds.length > 0 ? activeIds[0] : null;

  if (activeId === null) {
    // if nobody is active, show a placeholder
    return <Box style={placeholderStyle} />;
  }

  return (
    <Video
      id="videosingle"
      src={activeId}
      style={videoStyle}
      scaleMode={scaleMode}
    />
  );
}
```


# VCS: useGrid()
Source: https://docs.daily.co/docs/vcs/custom-react-hooks/use-grid

Developers can use Daily's VCS SDK to build custom video layouts and add graphics to live streamed and recorded video calls.

`useGrid(): Object`

Returns an object describing the composition's base design grid. Learn more about grid units
in the [Layout API docs](/docs/vcs/layout-api#the-grid-unit).

## Return type

| Property            | Type     | Description                                                                  |
| :------------------ | :------- | :--------------------------------------------------------------------------- |
| `pixelsPerGridUnit` | `Number` | This is the scale factor that lets you translate grid units to output pixels |

## Sample code

<Tip>
  Additional examples of usage for this custom hook can be found in the [source code for the VCS SDK](https://github.com/daily-co/daily-vcs).
</Tip>

```javascript theme={null}
import * as React from 'react';
import { Text } from '#vcs-react/components';
import { useGrid } from '#vcs-react/hooks';

  const pxPerGu = useGrid().pixelsPerGridUnit;

  return <Text>There are {pxPerGu} pixels per grid unit</Text>;
}
```


# VCS: useMediaInput()
Source: https://docs.daily.co/docs/vcs/custom-react-hooks/use-media-input

Developers can use Daily's VCS SDK to build custom video layouts and add graphics to live streamed and recorded video calls.

`useMediaInput(): Object`

Returns an object with raw video input data.

<Warning>
  **Note**: We recommend using [`useActiveVideo()`](/docs/vcs/custom-react-hooks/use-active-video) instead for a more
  convenient filtered representation of video data.
</Warning>

## Return type

| Property                | Type    | Description                        |
| :---------------------- | :------ | :--------------------------------- |
| `activeVideoInputSlots` | `Array` | Raw video slot media descriptions. |


# VCS: useParams()
Source: https://docs.daily.co/docs/vcs/custom-react-hooks/use-params

Developers can use Daily's VCS SDK to build custom video layouts and add graphics to live streamed and recorded video calls.

`useParams(): Object`

Contains current values for the composition's params as declared in `compInterface` in your composition root. These values are passed from the embedding host.

<Tip>
  See [Composition file structure and interface](/docs/vcs/core-concepts/composition) for more information on the composition root.
</Tip>

## Return type

The default return value is a object with the baseline composition parameters. Developers can also edit the composition parameters in their own copy of the VCS SDK and retrieve them via this hook.

The default properties available in the return value using VCS are as follows:

<ParamField type="string">
  Sets the layout mode. Valid options:

  * **single**: Show a single full-screen video.
  * **split**: Show the first two participants side-by-side.
  * **grid**: Show up to 20 videos in a grid layout.
  * **dominant**: Show the active speaker in a large pane on the left, with additional video thumbnails on the right.
  * **pip**: Show the active speaker in a full-screen view, with the first participant inlaid in a corner.
</ParamField>

<ParamField type="boolean">
  Sets whether a text overlay is displayed. You can configure the contents of the overlay with the `text.*` properties.
</ParamField>

<ParamField type="boolean">
  Sets whether an image overlay is displayed. You can configure the display of the overlay with the `image.*` properties. The image used must be passed in the `session_id` layout option when the stream or recording is *started*.
</ParamField>

<ParamField type="boolean">
  Sets whether a banner overlay is displayed. The banner can be used for TV-style "lower third" graphics, or displayed in any corner. You can configure the content of the overlay with the `banner.*` properties.
</ParamField>

<ParamField type="boolean">
  Sets whether a WebFrame overlay is displayed. You can configure the display of this live web browser overlay with the `webFrame.*` properties. The URL and the browser viewport size can be changed while your stream or recording is running.
</ParamField>

<ParamField type="boolean">
  Sets whether a sidebar is displayed. You can configure the display of the sidebar with the `sidebar.*` properties.
</ParamField>

<ParamField type="boolean">
  Sets whether a title screen (a "slate") is displayed. You can configure the display of the slate with the `titleSlate.*` properties.
</ParamField>

<ParamField type="boolean">
  Sets whether a title screen (a "slate") is automatically shown at the start of the stream. You can configure the display of this automatic slate with the `openingSlate.` properties.
</ParamField>

### Group: videoSettings

<ParamField type="number">
  Limits the number of non-screenshare streams that are included in the output.
</ParamField>

<ParamField type="string">
  Lets you do render-time reordering of video inputs according to participant IDs within a Daily room. To enable this sorting, pass a comma-separated list of participant IDs as the value for this param; video inputs matching these IDs will be moved to the top of the list. If you pass an ID that is not present in the room, it's ignored. All other video inputs will remain in their original order. The default value is an empty string indicating no reordering. Also note that `videoSettings.preferScreenshare` takes precedence over the ordering passed here.
</ParamField>

<ParamField type="boolean">
  When enabled, screen share inputs will be sorted before camera inputs. This is useful when prioritizing screen shares in your layout, especially when all inputs are not included in the final stream.
</ParamField>

<ParamField type="boolean">
  When enabled, paused video inputs will not be included. By default this is off, and paused inputs are displayed with a placeholder graphic. ("Paused video" means that the video track for a participant is not available, either due to user action or network conditions.)
</ParamField>

<ParamField type="boolean">
  When enabled, audio-only inputs will not be included in rendering. By default this is off, and audio participants are displayed with a placeholder graphic.
</ParamField>

<ParamField type="boolean">
  When enabled, any screenshare video inputs beyond the first one will not be included in rendering. You can control the ordering of the inputs using the `layout.participants` property to explicitly select which participant should be first in the list of inputs.
</ParamField>

<ParamField type="boolean">
  Sets whether call participants' names are displayed on their video tiles.
</ParamField>

<ParamField type="boolean">
  Sets whether to display video tiles with squared or rounded corners. Note that some modes (`dominant` and `pip`) have additional params to control whether the main video has rounded corners or not.
</ParamField>

<ParamField type="number">
  Sets the corner radius applied to video layers when `videoSettings.roundedCorners` is enabled, in grid units.
</ParamField>

<ParamField type="string">
  Controls how source video is displayed inside a tile if they have different aspect ratios. Use `'fill'` to crop the video to fill the entire tile. Use `'fit'` to make sure the entire video fits inside the tile, adding letterboxes or pillarboxes as necessary.
</ParamField>

<ParamField type="string">
  Controls how a screenshare video is displayed inside a tile if they have different aspect ratios. Use `'fill'` to crop the video to fill the entire tile. Use `'fit'` to make sure the entire video fits inside the tile, adding letterboxes or pillarboxes as necessary.
</ParamField>

<ParamField type="string">
  Sets the background color for video placeholder tile. Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="string">
  Sets the highlight color. It's used as the border color to indicate the 'dominant' video input (typically the active speaker). Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="number">
  Sets the stroke width used to render a highlight border. See also `'videoSettings.highlight.color'`. Specified in grid units.
</ParamField>

<ParamField type="number">
  Sets the visual margin between the two video layers shown in `split` mode, in grid units.
</ParamField>

<ParamField type="string">
  Selects whether the `'split'` layout mode is rendered in a horizontal or vertical configuration. The default value `'auto-by-viewport'` means that the split direction will be automatically selected to be most appropriate for the current viewport size: if the viewport is landscape or square, the split axis is vertical; if portrait, the split axis is horizontal. Valid options: `'auto-by-viewport', 'vertical', 'horizontal'`
</ParamField>

<ParamField type="string">
  Overrides the scaleMode setting for the `split` layout mode. Both sides of the split can have separately defined scale modes. Pass a comma-separated list such as `fill, fit` (this would set the left-hand side video to `fill` and the right-hand side video to `fit`). See documentation for the `videoSettings.scaleMode` parameter for the valid options. Note that this setting also overrides `videoSettings.scaleModeForScreenshare`.
</ParamField>

<ParamField type="boolean">
  When enabled, the layout will automatically switch to `dominant` mode from `grid` if a screenshare video input is available. By using this automatic behavior, you avoid having to manually switch the mode via an API call.
</ParamField>

<ParamField type="number">
  Overrides the visual margin between items in `grid` mode, in grid units. The default value of -1 means that the layout algorithm selects a reasonable margin automatically depending on the number of videos.
</ParamField>

<ParamField type="number">
  Overrides the outer padding around items in `grid` mode, in grid units. The default value of -1 means that the layout algorithm selects a reasonable padding automatically depending on the number of videos.
</ParamField>

<ParamField type="boolean">
  By default, the `grid` mode will highlight the dominant video (typically the "active speaker") with a light outline. You can disable the highlight using this setting.
</ParamField>

<ParamField type="boolean">
  By default, the layout for the `grid` mode will try to preserve the aspect ratio of the input videos, i.e. avoid cropping the videos and instead add margins around the grid if needed. Setting this parameter to `false` will make the grid layout fill all available area, potentially cropping the videos.
</ParamField>

<ParamField type="number">
  When set to 0 or greater, the `grid` mode switches to a full-screen highlight of the participant at that zero-based index, hiding the other tiles. The default value of -1 turns this off and renders the normal grid. Use it to jump to a temporary full-screen view of one participant and back without changing the layout mode.
</ParamField>

<ParamField type="string">
  Controls where participant name labels are drawn in `grid` mode. The default `below` puts the label in a strip under each tile. Set it to `inside-at-bottom` to draw the label inside the tile, near the bottom edge.
</ParamField>

<ParamField type="string">
  Control where the dominant (or "active speaker") video is displayed in the `dominant` layout mode. Values are `left`, `right`, `top` or `bottom`.
</ParamField>

<ParamField type="number">
  Sets the position of the imaginary line separating the dominant video from the smaller tiles when using the `dominant` layout. Values are from 0 to 1. The default is 0.8, so if `videoSettings.dominant.position` is set to `left`, the dominant video will take 80% of the width of the screen on the left.
</ParamField>

<ParamField type="number">
  Controls how many "chiclets", or smaller video tiles, appear alongside the dominant video when using the `dominant` layout.
</ParamField>

<ParamField type="boolean">
  When in `dominant` mode, the large tile displays the active speaker by default. Turn off this `followDomFlag` to display the first participant instead of the active speaker.
</ParamField>

<ParamField type="number">
  Margin between the “chiclet” items, in grid units.
</ParamField>

<ParamField type="number">
  Padding around the row/column of “chiclet” items, in grid units.
</ParamField>

<ParamField type="number">
  Margin between the "dominant" video and the row/column of "chiclet" items, in grid units.
</ParamField>

<ParamField type="boolean">
  Sets whether the "dominant" video will be rendered with rounded corners when `videoSettings.roundedCorners` is enabled. Defaults to false because sharp corners are a more natural choice for the default configuration where the dominant video is tightly aligned to viewport edges.
</ParamField>

<ParamField type="string">
  Sets the position of the smaller video in the `pip` (picture-in-picture) layout. Valid options: `'top-left'`, `'top-right'`, `'bottom-left'`, `'bottom-right'`.
</ParamField>

<ParamField type="number">
  Sets the aspect ratio of the smaller video in the `pip` layout. The default is 1.0, which produces a square video.
</ParamField>

<ParamField type="number">
  Sets the height of the smaller video in the `pip` layout, measured in grid units.
</ParamField>

<ParamField type="number">
  Sets the margin between the smaller video and the edge of the frame in the `pip` layout, in grid units.
</ParamField>

<ParamField type="boolean">
  When in "pip" (or picture-in-picture) mode, the overlay tile displays the first participant in the participant array by default. Turn on this `followDomFlag` to display the active speaker instead.
</ParamField>

<ParamField type="boolean">
  Sets whether the main video in `pip` mode will be rendered with rounded corners when `videoSettings.roundedCorners` is enabled. Defaults to false because sharp corners are a more natural choice for the default configuration where the main video is full-screen (no margin to viewport edges).
</ParamField>

<ParamField type="string">
  Sets the participant label style option: font family. Valid options: `DMSans`, `Roboto`, `RobotoCondensed`, `Bitter`, `Exo`, `Magra`, `SuezOne`, `Teko`
</ParamField>

<ParamField type="string">
  Sets the participant label text font weight. Valid options: `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`.

  Note: Not all font weights are valid for every font family.
</ParamField>

<ParamField type="number">
  Sets the participant label text font size.
</ParamField>

<ParamField type="number">
  Sets the offset value for participant labels on the x-axis, measured in grid units.
</ParamField>

<ParamField type="number">
  Sets the offset value for participant labels on the y-axis, measured in grid units.
</ParamField>

<ParamField type="string">
  Sets the participant label font color. Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="string">
  Sets the label font stroke color (the line outlining the text letters). Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="number">
  Sets the left margin value applied to videos (in any layout mode), in grid units. You can use these `videoSettings.margin.*` params to shrink the video area, for example to make room for overlays.
</ParamField>

<ParamField type="number">
  Sets the right margin value applied to videos (in any layout mode), in grid units. You can use these `videoSettings.margin.*` params to shrink the video area, for example to make room for overlays.
</ParamField>

<ParamField type="number">
  Sets the top margin value applied to videos (in any layout mode), in grid units. You can use these `videoSettings.margin.*` params to shrink the video area, for example to make room for overlays.
</ParamField>

<ParamField type="number">
  Sets the bottom margin value applied to videos (in any layout mode), in grid units. You can use these `videoSettings.margin.*` params to shrink the video area, for example to make room for overlays.
</ParamField>

### Group: text

<ParamField type="string">
  Sets the string to be displayed if `showTextOverlay` is true.
</ParamField>

<ParamField type="string">
  Sets the data source used for the text displayed in the overlay. The default value 'param' means that the value of param `text.content` is used. Valid options: `param`, `highlightLines.items`, `chatMessages`, `transcript`
</ParamField>

<ParamField type="string">
  Sets the horizontal alignment of the text overlay within the video frame. Values are `left`, `right`, or `center`.
</ParamField>

<ParamField type="string">
  Sets the vertical alignment of the text overlay within the video frame. Values are `top`, `bottom`, or `center`.
</ParamField>

<ParamField type="number">
  Sets an x-offset (horizontal) to be applied to the text overlay's position based on the values of `text.align_horizontal` and `text.align_vertical`.
</ParamField>

<ParamField type="number">
  Sets a y-offset (vertical) to be applied to the text overlay's position based on the values of `text.align_horizontal` and `text.align_vertical`.
</ParamField>

<ParamField type="number">
  Applies a rotation to the text overlay. Units are degrees, and positive is a clockwise rotation.
</ParamField>

<ParamField type="string">
  Sets the font of the text overlay. Valid options: `DMSans`, `Roboto`, `RobotoCondensed`, `Anton`, `Bangers`, `Bitter`, `Exo`, `Magra`, `PermanentMarker`, `SuezOne`, `Teko`
</ParamField>

<ParamField type="string">
  Selects a weight variant from the selected font family. Valid options: `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`.

  Note: Not all font weights are valid for every font family.
</ParamField>

<ParamField type="string">
  Sets the font style for text. Valid options: 'normal','italic'.
</ParamField>

<ParamField type="number">
  Sets the text overlay font size using grid units (gu). By default, one grid unit is 1/36 of the smaller dimension of the viewport (e.g. 20px in a 1280\*720 stream).
</ParamField>

<ParamField type="string">
  Sets the color and transparency of the text overlay. Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="string">
  Sets the color of the stroke drawn around the characters in the text overlay. Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="number">
  Sets the width of the stroke drawn around the characters in the text overlay. Specified in grid units.
</ParamField>

<ParamField type="text">
  Sets the color and transparency of a highlighted item in the text overlay. To display a highlight, the value of param `text.source` must be set to `highlightLines.items`. Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="enum">
  Sets the font weight of a highlighted item in the text overlay. To display a highlight, the value of param `text.source` must be set to `highlightLines.items`.
</ParamField>

### Group: image

<ParamField type="string">
  Sets the overlay image. Icon asset must be included in `session_assets` object. `showImageOverlay` must be `true`.
</ParamField>

<ParamField type="text">
  Sets an emoji to be rendered instead of an image asset. If this string is non-empty, it will override the value of `image.assetName`. The string value must be an emoji.
</ParamField>

<ParamField type="string">
  Sets position of overlay image. Valid options: `'top-left'`, `'top-right'`, `'bottom-left'`, `'bottom-right'`
</ParamField>

<ParamField type="boolean">
  Sets overlay image to full screen.
</ParamField>

<ParamField type="number">
  Sets aspect ratio of overlay image.
</ParamField>

<ParamField type="number">
  Sets height of overlay image, in grid units.
</ParamField>

<ParamField type="number">
  Sets margin between the overlay image and the viewport edge, in grid units.
</ParamField>

<ParamField type="number">
  Sets opacity of overlay image, in range 0-1. Default value of 1 is full opacity.
</ParamField>

<ParamField type="boolean">
  Sets the overlay image to fade in or out when the `showImageOverlay` property is updated.
</ParamField>

### Group: webFrame

<ParamField type="string">
  Sets the web page URL to be loaded into the WebFrame overlay's embedded browser.
</ParamField>

<ParamField type="number">
  Sets the width of the embedded browser window used to render the WebFrame overlay.
</ParamField>

<ParamField type="number">
  Sets the height of the embedded browser window used to render the WebFrame overlay.
</ParamField>

<ParamField type="string">
  Sets position of the WebFrame overlay. Valid options: `'top-left'`, `'top-right'`, `'bottom-left'`, `'bottom-right'`
</ParamField>

<ParamField type="boolean">
  Sets the WebFrame overlay to full screen.
</ParamField>

<ParamField type="number">
  Sets height of the WebFrame overlay, in grid units.
</ParamField>

<ParamField type="number">
  Sets margin between the WebFrame overlay and the viewport edge, in grid units.
</ParamField>

<ParamField type="number">
  Sets opacity of the WebFrame overlay, in range 0-1. Default value of `1` is full opacity.
</ParamField>

<ParamField type="boolean">
  Sets the WebFrame overlay to fade in or out when the `showWebFrameOverlay` property is updated.
</ParamField>

<ParamField type="string">
  Sets the keyboard key to be sent to the WebFrame browser in a simulated key press. Valid options:

  * Digits **0 - 9**
  * Letters **A - Z**
  * ASCII special characters, e.g. **!**, **@**, **+**, **>**, etc.
  * Function keys **F1 - F12**
  * **Enter**
  * **Escape**
  * **Backspace**
  * **Tab**
  * Arrow keys **ArrowUp, ArrowDown, ArrowLeft, ArrowRight**
  * **PageDown, PageUp**
</ParamField>

<ParamField type="string">
  Sets keyboard modifier keys to be sent to the WebFrame browser in a simulated key press. Valid options: `"Shift"`, `"Control"`, `"Alt"`, `"Meta"` (on a Mac keyboard, Alt is equal to Option and Meta is equal to Command).
</ParamField>

<ParamField type="number">
  Triggers a simulated key press to be sent to WebFrame. To send a key press, increment the value of `key`. (Note the difference between this and `keyName` which is the simulated key to be sent.)
</ParamField>

### Group: banner

<ParamField type="text">
  Sets the title text displayed in the banner component.
</ParamField>

<ParamField type="text">
  Sets the subtitle text displayed in the banner component.
</ParamField>

<ParamField type="string">
  Sets the data source for the text displayed in the banner component. Valid options: `param`, `highlightLines.items`, `chatMessages`, `transcript`
</ParamField>

<ParamField type="string">
  Sets position of the banner component. Valid options: `'top-left'`, `'top-right'`, `'bottom-left'`, `'bottom-right'`
</ParamField>

<ParamField type="boolean">
  Sets the banner to fade in or out when the `showBannerOverlay` property is updated.
</ParamField>

<ParamField type="number">
  Horizontal margin, specified in grid units.
</ParamField>

<ParamField type="number">
  Vertical margin, specified in grid units.
</ParamField>

<ParamField type="number">
  Padding inside the component, specified in grid units.
</ParamField>

<ParamField type="boolean">
  Sets whether the banner component will always use its maximum width (specified using `banner.maxW_pct_default` and `banner.maxW_pct_portrait`). If false, the banner component will shrink horizontally to fit text inside it, if appropriate.
</ParamField>

<ParamField type="number">
  Sets the maximum width for the banner component, as a percentage of the viewport size.
</ParamField>

<ParamField type="number">
  Sets the maximum width for the banner component, as a percentage of the viewport size, applied only when the viewport aspect ratio is portrait (i.e. smaller than 1). This override is useful because on a narrow screen the banner display typically needs more horizontal space than on a landscape screen.
</ParamField>

<ParamField type="number">
  Applies a rotation to the banner component. Units are degrees, and positive is a clockwise rotation.
</ParamField>

<ParamField type="number">
  Sets the corner radius of the banner component outline. Specified in grid units.
</ParamField>

<ParamField type="boolean">
  Sets whether an icon is displayed in the banner component (`true` or `false`).
</ParamField>

<ParamField type="text">
  Sets image asset value for the banner icon. Icon asset must be included in `session_assets` object.
</ParamField>

<ParamField type="text">
  Sets an emoji to be rendered as the banner icon. If this string is non-empty, it will override `banner.icon.assetName`. The string value must be an emoji.
</ParamField>

<ParamField type="number">
  Sets the size of the banner icon, specified in grid units.
</ParamField>

<ParamField type="text">
  Sets the banner component's background color. Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="text">
  Sets the color of the outline drawn around the banner component. Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="number">
  Sets the width of the stroke drawn around the banner component. Specified in grid units.
</ParamField>

<ParamField type="text">
  Sets the banner component's text color. Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="text">
  Sets the color of the stroke drawn around the characters in the banner component. Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="number">
  Sets the width of the stroke drawn around the characters in the banner component. Specified in grid units.
</ParamField>

<ParamField type="string">
  Sets the font of text displayed in the banner component. Valid options: `DMSans`, `Roboto`, `RobotoCondensed`, `Anton`, `Bangers`, `Bitter`, `Exo`, `Magra`, `PermanentMarker`, `SuezOne`, `Teko`
</ParamField>

<ParamField type="number">
  Sets the banner title font size using grid units (gu). By default, one grid unit is 1/36 of the smaller dimension of the viewport (e.g. 20px in a 1280\*720 stream).
</ParamField>

<ParamField type="string">
  Sets the banner title font weight. Valid options: `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`.

  Note: Not all font weights are valid for every font family.
</ParamField>

<ParamField type="string">
  Sets the font style for the banner title. Valid options: 'normal','italic'.
</ParamField>

<ParamField type="number">
  Sets the banner subtitle font size using grid units (gu). By default, one grid unit is 1/36 of the smaller dimension of the viewport (e.g. 20px in a 1280\*720 stream).
</ParamField>

<ParamField type="string">
  Sets the banner subtitle font weight. Valid options: `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`.

  Note: Not all font weights are valid for every font family.
</ParamField>

<ParamField type="string">
  Sets the font style for the banner subtitle. Valid options: 'normal','italic'.
</ParamField>

### Group: toast

<ParamField type="number">
  Triggers display of toast component. To send a toast, increment the value of `key`
</ParamField>

<ParamField type="string">
  Sets text displayed in toast component.
</ParamField>

<ParamField type="string">
  Sets the data source used for the text displayed in the toast component. The default value `param` means that the value of param `toast.content` is used. Valid options: `param`, `chatMessages`, `transcript`
</ParamField>

<ParamField type="number">
  Sets duration of time toast component is displayed (in seconds).
</ParamField>

<ParamField type="number">
  Sets the maximum width for the toast component, as a percentage of the viewport size.
</ParamField>

<ParamField type="number">
  Sets the maximum width for the toast component, as a percentage of the viewport size, applied only when the viewport aspect ratio is portrait (i.e. smaller than 1). This override is useful because on a narrow screen the toast display typically needs more horizontal space than on a landscape screen.
</ParamField>

<ParamField type="boolean">
  Sets whether icon is displayed in toast component (`true` or `false`).
</ParamField>

<ParamField type="string">
  Sets asset value for toast icon. Icon asset must be included in `session_assets` object.
</ParamField>

<ParamField type="text">
  Sets an emoji to be rendered as the toast icon. If this string is non-empty, it will override `toast.icon.assetName`. The string value must be an emoji.
</ParamField>

<ParamField type="number">
  Sets the size of the toast icon, in grid units.
</ParamField>

<ParamField type="string">
  Sets the toast component's background color. Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="string">
  Sets the color of the stroke drawn around the text characters in the toast component. Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="string">
  Sets the toast component's text color. Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="string">
  Sets the toast component's font family. Valid options: `DMSans`, `Roboto`, `RobotoCondensed`, `Bitter`, `Exo`, `Magra`, `SuezOne`, `Teko`
</ParamField>

<ParamField type="number">
  Sets the font weight for the toast component's text. Valid options: `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`.

  Note: Not all font weights are valid for every font family.
</ParamField>

<ParamField type="number">
  Sets the font size for the toast component's text.
</ParamField>

### Group: openingSlate

<ParamField type="number">
  Sets the number of seconds that the opening slate will be displayed when the stream starts. After this time, the slate goes away with a fade-out effect.
</ParamField>

<ParamField type="string">
  Sets text displayed in the main title of the opening slate.
</ParamField>

<ParamField type="string">
  Sets text displayed in the subtitle (second line) of the opening slate.
</ParamField>

<ParamField type="string">
  Sets an image to be used as the background for the slate. This image asset must be included in `session_assets` object when starting the stream/recording.
</ParamField>

<ParamField type="string">
  Sets the slate's background color. Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="string">
  Sets the text color of the titles in the slate. Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="string">
  Sets the font of the titles in the slate. Valid options: `DMSans`, `Roboto`, `RobotoCondensed`, `Anton`, `Bangers`, `Bitter`, `Exo`, `Magra`, `PermanentMarker`, `SuezOne`, `Teko`
</ParamField>

<ParamField type="string">
  Selects a weight variant from the selected font family. Valid options: `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`.

  Note: Not all font weights are valid for every font family.
</ParamField>

<ParamField type="string">
  Sets the font style for the titles in the slate. Valid options: 'normal','italic'.
</ParamField>

<ParamField type="number">
  Sets the main title font size using grid units (gu). By default, one grid unit is 1/36 of the smaller dimension of the viewport (e.g. 20px in a 1280\*720 stream).
</ParamField>

<ParamField type="number">
  Sets the subtitle font size as a percentage of the main title.
</ParamField>

<ParamField type="string">
  Selects a weight variant from the selected font family specifically for the subtitle. Valid options: `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`.

  Note: Not all font weights are valid for every font family.
</ParamField>

### Group: titleSlate

<ParamField type="boolean">
  Sets the slate to fade in or out when the `showTitleSlate` property is updated.'
</ParamField>

<ParamField type="string">
  Sets text displayed in the main title of the slate.
</ParamField>

<ParamField type="string">
  Sets text displayed in the subtitle (second line) of the slate.
</ParamField>

<ParamField type="string">
  Sets an image to be used as the background for the slate. This image asset must be included in `session_assets` object when starting the stream/recording.
</ParamField>

<ParamField type="string">
  Sets the slate's background color. Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="string">
  Sets the text color of the titles in the slate. Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="string">
  Sets the font of the titles in the slate. Valid options: `DMSans`, `Roboto`, `RobotoCondensed`, `Anton`, `Bangers`, `Bitter`, `Exo`, `Magra`, `PermanentMarker`, `SuezOne`, `Teko`
</ParamField>

<ParamField type="string">
  Selects a weight variant from the selected font family. Valid options: `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`.

  Note: Not all font weights are valid for every font family.
</ParamField>

<ParamField type="string">
  Sets the font style for the titles in the slate. Valid options: 'normal','italic'.
</ParamField>

<ParamField type="number">
  Sets the main title font size using grid units (gu). By default, one grid unit is 1/36 of the smaller dimension of the viewport (e.g. 20px in a 1280\*720 stream).
</ParamField>

<ParamField type="number">
  Sets the subtitle font size as a percentage of the main title.
</ParamField>

<ParamField type="string">
  Selects a weight variant from the selected font family specifically for the subtitle. Valid options: `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`.

  Note: Not all font weights are valid for every font family.
</ParamField>

### Group: sidebar

<ParamField type="boolean">
  Sets whether the sidebar is displayed on top of video elements. If set to `true` , the video layout is shrunk horizontally to make room for the sidebar so they don't overlap.
</ParamField>

<ParamField type="string">
  Sets the data source for the text displayed in the sidebar. Valid options: `param`, `highlightLines.items`, `chatMessages`, `transcript`
</ParamField>

<ParamField type="number">
  Padding inside the sidebar, specified in grid units.
</ParamField>

<ParamField type="number">
  Sets the width of the sidebar, as a percentage of the viewport size, applied when the viewport is landscape (its aspect ratio is greater than 1).
</ParamField>

<ParamField type="number">
  Sets the width of the sidebar, as a percentage of the viewport size, applied when the viewport is portrait or square (its aspect ratio is less than or equal to 1).
</ParamField>

<ParamField type="text">
  Sets the sidebar's background color and opacity. Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="text">
  Sets the sidebar's text color and opacity. Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="string">
  Sets the font of text displayed in the sidebar. Valid options: `DMSans`, `Roboto`, `RobotoCondensed`, `Anton`, `Bangers`, `Bitter`, `Exo`, `Magra`, `PermanentMarker`, `SuezOne`, `Teko`
</ParamField>

<ParamField type="string">
  Sets the sidebar text font weight. Valid options: `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`.

  Note: Not all font weights are valid for every font family.
</ParamField>

<ParamField type="string">
  Sets the font style for text in the sidebar. Valid options: 'normal','italic'.
</ParamField>

<ParamField type="number">
  Sets the sidebar text font size using grid units (gu). By default, one grid unit is 1/36 of the smaller dimension of the viewport (e.g. 20px in a 1280\*720 stream).
</ParamField>

<ParamField type="text">
  Sets the color used for the highlighted item in the sidebar.
</ParamField>

<ParamField type="string">
  Sets the font weight used for the highlighted item in the sidebar.
</ParamField>

### Group: highlightLines

<ParamField type="text">
  Sets a list of text items. Items must be separated by newline characters. This param is a data source that can be displayed in other components like TextOverlay, Banner and Sidebar using the various "source" params available in the settings for those components.
</ParamField>

<ParamField type="number">
  Sets the highlight index associated with the text items specified in `highlightLines.items`. The item at this index will be displayed using a special highlight style (which depends on the component used to display this data). If you don't want a highlight, set this value to -1.
</ParamField>

### Group: emojiReactions

<ParamField type="string">
  Sets the data source used for emoji reactions. The default value `emojiReactions` means that this component will display emojis that are sent via the standard source API.

  The other valid option is `param`, which lets you send a reaction using param values instead of the standard source. The steps are as follows: set `emojiReactions.source` to `param`, set a single-emoji string for `emojiReactions.emoji`, and increment the value of `emojiReactions.key` to send one emoji for display.
</ParamField>

<ParamField type="number">
  If `emojiReactions.source` is set to `param`, increment this numeric key to send a new emoji for display.
</ParamField>

<ParamField type="text">
  If `emojiReactions.source` is set to `param`, set a single emoji as the string value for this param, and it will be the next emoji reaction rendered when `emojiReactions.key` is incremented.
</ParamField>

<ParamField type="number">
  Sets a horizontal offset applied to the emoji reactions animation rendering (each new emoji floats up from the bottom of the screen). Specified in grid units.
</ParamField>

### Group: debug

<ParamField type="boolean">
  When set to true, a room state debugging display is visible. It prints various information about participant state.
</ParamField>

<ParamField type="number">
  Sets the opacity of the debugging display which can be toggled using `debug.showRoomState`.
</ParamField>

## Sample code

<Tip>
  Additional examples of usage for this custom hook can be found in the [source code for the VCS SDK](https://github.com/daily-co/daily-vcs).
</Tip>

```javascript theme={null}
  // default or custom composition parameters
  const params = useParams();

  return (
    {params.map((p) => <Text key={param.id}>{param.id}</Text>)}
  );
}

};
```


# VCS: useVideoPlaybackState()
Source: https://docs.daily.co/docs/vcs/custom-react-hooks/use-video-playback-state

Developers can use Daily's VCS SDK to build custom video layouts and add graphics to live streamed and recorded video calls.

`useVideoPlaybackState(): String (enum)`

Returns the video playback state of the composition. You can import `PlaybackStateType` from the same file to get the enum values:

```javascript theme={null}
const PlaybackStateType = {
  PLAYING: 'playing',
  POSTROLL: 'postroll',
};
```

## Return type

| Type     | Description                                                                                                                                                                                                                                                            |
| :------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `String` | `'playing'` or `'postroll'` (`PlaybackStateType.PLAYING` or `PlaybackStateType.POSTROLL`). When the playback state evalutes to `'playing'`, the composition is currently playing. When it evaluates to `'postroll'`, the composition is transitioning to a stop state. |

You can end your composition with any visuals you want to display at the end of the output video file (e.g. end titles) when the playback state is `'postroll'`. The postroll will be at least 300ms long, allowing you to also render an optional fade.

## Sample code

<Tip>
  Additional examples of usage for this custom hook can be found in the [source code for the VCS SDK](https://github.com/daily-co/daily-vcs).
</Tip>

```javascript theme={null}
import * as React from 'react';
import { Text } from '#vcs-react/components';
import { useVideoPlaybackState } from '#vcs-react/hooks';

  const playbackState = useVideoPlaybackState();

  return <Text>Current playback state: {playbackState}</Text>;
}
```


# VCS: useVideoTime()
Source: https://docs.daily.co/docs/vcs/custom-react-hooks/use-video-time

Developers can use Daily's VCS SDK to build custom video layouts and add graphics to live streamed and recorded video calls.

`useVideoTime(): Object`

Returns the current time value from the video clock.

## Return type

| Type     | Description                                                                                                                 |
| :------- | :-------------------------------------------------------------------------------------------------------------------------- |
| `Number` | The current time value from the video clock. **Note**: This value is in seconds, not milliseconds like some JS timing APIs. |

## Sample code

<Tip>
  Additional examples of usage for this custom hook can be found in the [source code for the VCS SDK](https://github.com/daily-co/daily-vcs).
</Tip>

```javascript theme={null}
import * as React from 'react';
import { Text } from '#vcs-react/components';
import { useVideoTime } from '#vcs-react/hooks';

  const time = useVideoTime();

  return <Text>Current video time: {time}</Text>;
}
```


# VCS: useViewportSize()
Source: https://docs.daily.co/docs/vcs/custom-react-hooks/use-viewport-size

Developers can use Daily's VCS SDK to build custom video layouts and add graphics to live streamed and recorded video calls.

`useViewportSize(): Object`

Returns an object describing the viewport size, i.e. the video output resolution.

## Return type

| Property | Type     | Description                               |
| :------- | :------- | :---------------------------------------- |
| `w`      | `Number` | Width of viewport. Values are in pixels.  |
| `h`      | `Number` | Height of viewport. Values are in pixels. |

## Sample code

<Tip>
  Additional examples of usage for this custom hook can be found in the [source code for the VCS SDK](https://github.com/daily-co/daily-vcs).
</Tip>

```javascript theme={null}
import * as React from 'react';
import { Text } from '#vcs-react/components';
import { useViewportSize, useGrid } from '#vcs-react/hooks';

  const viewportSize = useViewportSize();
  const pxPerGu = useGrid().pixelsPerGridUnit;
  const guPerVh = viewportSize.h / pxPerGu;
  const guPerVw = viewportSize.w / pxPerGu;

  return (
    <Text>
      Number of grid units relative to the viewport: height = {guPerVh}, width ={' '}
      {guPerVw}
    </Text>
  );
}
```


# Using Daily's Video Component System (VCS) SDK
Source: https://docs.daily.co/docs/vcs/index

Developers can use Daily's VCS SDK to build custom video layouts and add graphics to live streamed and recorded video calls.

<Badge>Paid plans only</Badge>

## Using Daily's VCS to customize video layouts and add graphics

VCS stands for Video Component System. It's Daily's video-oriented layout engine that can be used to create layouts, known as "compositions," which turn Daily calls into highly customized live streams or engaging recorded content.

<Note>
  **Pricing**

  Daily's VCS is applicable to Daily live streaming and cloud recording, which are both pay-as-you-go features. Using VCS with live streaming or cloud recording is available at no additional cost. See our [pricing page](https://www.daily.co/pricing) for more information.
</Note>

Daily has provided several options for working with VCS with varying degrees of customization and complexity.

For more common video layouts and graphic applications, Daily offers the VCS baseline composition. The baseline composition is VCS's default collection of layout and graphics features that work together and are easily accessible with a unified JSON-based control interface. It is available through [`daily-js`](/docs/daily-js) and [`react-native-daily-js`](/reference/react-native) via the [live streaming](/reference/daily-js/instance-methods/start-live-streaming) and [recording](/reference/daily-js/instance-methods/start-recording) APIs. The baseline composition allows developers to quickly modify their video feeds with a comprehensive list of layout, text, and image options.

To learn more about the baseline composition, see our [VCS baseline composition guide](/docs/guides/features/live-streaming/vcs).

<Tip>
  VCS encompasses both Daily's [baseline composition](/docs/vcs/core-concepts#vcs-baseline-composition-vs-sdk) and the VCS SDK, which is documented here.

  The baseline composition is VCS's default collection of layout and graphics features that work together and are easily accessible with a unified JSON-based control interface.

  The VCS SDK includes the baseline composition's source code which developers can use to customize video compositions even further.
</Tip>

If you've tried out VCS's baseline composition, you may find you still want more control over video layouts in the form of multiple text overlays, animated graphics, your own image assets — or something else that makes your live streams unique!

To help provide developers with even more control, Daily is introducing VCS — the baseline composition source code. The VCS SDK offers a collection of components that provide basic building blocks for developers to build their own custom live streaming and recording layouts.

In these docs, we'll review how to build custom implementations using the VCS SDK directly in your apps.

<Note>
  There are two ways to use the VCS SDK:

  * **Server-side.** Write code that overrides some rendering in the baseline composition, and upload that code as part of a `startLiveStreaming/startRecording` call. This way, your custom code gets executed on Daily's cloud as part of the live stream or recording session.

  * **Client-side.** Load the VCS renderer in your web app to render a live composition using media streams from a Daily room. This can be used to provide a live preview that exactly matches the rendering on Daily's cloud.

  You can use both together. This can be particularly useful for Interactive Live Streaming apps where your web clients should have a shared realtime composition of room participants and overlay graphics, but you also want to produce a visually identical recording or live stream on Daily's cloud.
</Note>

***

Before testing out the VCS SDK, we recommend reading our `Core concepts` pages:

* [Core concepts](/docs/vcs/core-concepts)
* [Composition file structure & interface](/docs/vcs/core-concepts/composition)
* [Input and compositing models](/docs/vcs/core-concepts/input-and-compositing-models)
* [VCS best practices](/docs/vcs/core-concepts/best-practices)


# Daily's Video Component System (VCS) installation guide
Source: https://docs.daily.co/docs/vcs/installation

Developers can use Daily's VCS SDK to build custom video layouts and add graphics to live streamed and recorded video calls.

<Badge>Paid plans only</Badge>

<Note>
  The Daily VCS SDK is available at [https://github.com/daily-co/daily-vcs](https://github.com/daily-co/daily-vcs).
</Note>

VCS can be used in two ways:

1. Daily's [baseline composition](/docs/guides/features/live-streaming/vcs#the-baseline-composition), which does **not** require using the VCS SDK directly. It can be used by passing specific options via Daily's live streaming and recording methods. See the `daily-js` or `react-native-daily-js` [live streaming](/reference/daily-js/instance-methods/start-live-streaming) or [cloud recording](/reference/daily-js/instance-methods/start-recording) reference docs for more information.
2. Daily's [VCS SDK](https://github.com/daily-co/daily-vcs), which includes the source code used to build Daily's baseline composition. The goal of using the VCS SDK is to build your own compositions. In other words, you can consider it a modifiable version of Daily's baseline composition. Using the VCS SDK maximizes how much you can customize your Daily live stream and cloud recording layouts.

These installation instructions describe how to install the VCS SDK (option 2) directly. It is most useful for any developers looking to customize their live streaming or cloud recording layouts beyond what is available via the baseline composition.

<Tip>
  Read the [Core concepts section](/docs/vcs/core-concepts) and Daily's [VCS guide](/docs/guides/features/live-streaming/vcs) for additional information.
</Tip>

***

## Installing the VCS SDK locally

1. Clone the [GitHub repo](https://github.com/daily-co/daily-vcs). Then navigate to the `daily-vcs/js` subdirectory in a terminal, and install the JavaScript components using the yarn package manager.

```bash theme={null}
git clone https://github.com/daily-co/daily-vcs.git
cd daily-vcs/js
yarn install
```

<Note>
  You can also use `npm` instead of `yarn` if you prefer. The project is compatible with either package management tool. For npm, the command is `npm install`.
</Note>

Running this command will allow you to run the Daily's [VCS Simulator](/docs/vcs/tools/simulator) locally. We've included the VCS Simulator in the VCS SDK for developers to be able to see how VCS compositions work. It allows you to quickly update VCS settings and see the effects of those changes immediately without ever having to start a live stream or cloud recording.

<Tip>
  **VCS Simulator**

  The [VCS Simulator](/docs/vcs/tools/simulator) is a development tool that can be run locally on your computer via the VCS SDK and provides a convenient GUI for testing.

  There is also a hosted default version of the [VCS Simulator](https://www.daily.co/tools/vcs-simulator/daily_baseline.html), which provides an interface for toggling VCS baseline composition settings.

  We recommend testing out the hosted [VCS Simulator](https://www.daily.co/tools/vcs-simulator/daily_baseline.html) to see if the baseline composition options meet your needs for customizations before trying to build your own custom compositions with the VCS SDK.

  <figure>
    <img alt="VCS Simulator with default baseline composition settings" />

    <figcaption>
      VCS Simulator with default baseline composition settings
    </figcaption>
  </figure>
</Tip>

### Run the VCS Simulator locally

To test that your local copy of VCS is working correctly, try running the VCS Simulator locally from the `daily-vcs/js` directory with the following command:

```bash theme={null}
yarn open-browser daily:baseline
```

Running this command should open `localhost:8083` in your web browser with your local copy of the VCS Simulator displayed.

This will open the same video feed as shown in Daily's hosted [VCS Simulator](https://www.daily.co/tools/vcs-simulator/daily_baseline.html), which includes default [composition parameters](/reference/daily-js/types/daily-streaming-layout-config#baseline-composition-properties) for the [baseline composition](/docs/guides/features/live-streaming/vcs#the-baseline-composition).

The source code for the baseline composition is part of the VCS SDK. You could just start modifying that code to learn how it works, but it's a rather large program. To make the learning curve easier, we'll look at an isolated example that shows the basic concepts and nothing else.

### Test an example custom composition locally

To help developers understand how to build their own compositions with VCS, we've included an example VCS composition called "hello". This composition adds a semi-transparent purple bar to the bottom of the video frame, with the phrase "Hello world", and a Daily logo watermark that moves around the screen.

<Tip>
  For another VCS SDK example, read our [tutorial](https://www.daily.co/blog/vcs-tutorial-moving-watermark/) on how to add a moving watermark using the VCS SDK.
</Tip>

Since you'll want to test any compositions you build yourself in the VCS Simulator to make sure it looks how you intended, let's load this "hello" example composition in the VCS Simulator to make sure custom compositions can load as expected.

From the `daily-vcs/js` directory in a terminal, run:

```bash theme={null}
yarn open-browser example:hello
```

<Note>
  The source code for `example:hello` is in a file located at: [`daily-vcs/js/example/hello.jsx`](https://github.com/daily-co/daily-vcs/blob/main/js/example/hello.jsx) in the VCS SDK source code.
</Note>

Running this command should open `localhost:8083` in your web browser.

<img alt="VCS Simulator with example &#x22;hello&#x22; composition settings" />

As we can see in this screenshot, the custom composition (the purple bar, logo, and text) are applied to our output video feed.

Since this is a custom composition, let's try customizing it even more now.

### Editing an example custom composition

To see how VCS can control your video feed layout and graphics, try making a change to your copy of [`daily-vcs/js/example/hello.jsx`](https://github.com/daily-co/daily-vcs/blob/main/js/example/hello.jsx) in your text editor. For example, look for the line that defines the name of the composition, "Hello Daily":

```javascript theme={null}
export const compositionInterface = {
  displayMeta: {
    name: 'Hello Daily',
    ...
  }
}
```

Change the name and save the file. The VCS Simulator that's open in your web browser will automatically refresh after you save the file. The new name should be reflected in the UI.

<img alt="VCS Simulator with default baseline composition settings" />

The text has now updated to say "Hello Daily", meaning we've successfully edited a custom composition using the VCS SDK and confirmed the output in the VCS Simulator.

Congratulations, you've installed the VCS SDK and verified that custom compositions and the VCS Simulator work!

To see a more detailed explanation of building a custom composition, see our [tutorial on building a moving watermark](https://www.daily.co/blog/vcs-tutorial-moving-watermark/).

***

## What's next?

Now that you know how to run the VCS Simulator locally, we recommend reading the [VCS Simulator workflow](/docs/vcs/tools/simulator#custom-components-workflow) section of the [VCS Simulator docs](/docs/vcs/tools/simulator#custom-components-workflow) to learn how to start making your own custom compositions.

If you still have some questions related to what VCS is and all the things it can do, don't worry! Read our [Core concepts pages](/docs/vcs/core-concepts) to get a better understanding of how it all works under the hood.


# VCS Layout API
Source: https://docs.daily.co/docs/vcs/layout-api/index

Full reference documentation to help developers rapidly add calls to any site or app using the Daily real-time API built on WebRTC.

<Badge>Paid plans only</Badge>

As was mentioned in the [VCS core concepts](/docs/vcs/core-concepts), one of the goals of VCS is for the engine to be lightweight, easily [embeddable](/docs/vcs/core-concepts#embeddable), and with clear performance guarantees even when features are combined. We want your compositions to render reliably and without surprises, both on Daily's cloud rendering system, as well as within your client applications.

To this end, VCS doesn't include CSS. While CSS is a rich and powerful standard, it's not compatible with the aforementioned goals. Rendering the full range of various visual properties, effects and animations available in CSS practically requires a GPU (Graphics Processing Unit) which is not available on standard servers. Requiring a GPU would make it very hard to scale VCS across the different targets like media servers and offline post-processing services.

## VCS's alternate approach to CSS

Instead, VCS breaks down CSS's responsibilities into separate properties available on the built-in [components](/docs/vcs/components). These are grouped into three separate specifications:

### 1. **Styling**

In VCS, a "style" strictly means the properties applied when generating the content of an element. Examples of style attributes would be font size or fill color. Styles are applied with the `style` prop, which you can find documented for each built-in component.

See the [`<Text>` component's style prop](/docs/vcs/components/text#style-prop) as an example.

### 2. **Compositing**

Compositing refers to transformations and blending properties applied at the last stage when rendering the scene. In VCS, it's accessible by applying the `transform` and `blend` props. You can read more about this topic in the reference for the [`<Box>`](/docs/vcs/components/box) component.

### 3. **Layout**

This is the topic of this section. Layout is applied using the `layout` prop to VCS [components](/docs/vcs/components).

***

## Background

Video layouts are quite different from text documents and interactive application UIs. The layout engines available in CSS were designed for the latter use cases. The VCS layout engine is designed purely for video and presents a functional rather than declarative API.

A fundamental difference in design is that video tends to fill the viewport (i.e. the screen or video content area) by default. Traditional HTML documents are laid out as a flow that expands vertically outside the viewport. This doesn't apply to videos and — indeed — having content flow outside the viewport is generally undesirable.

When designing graphics for video, designers tend to split the available viewport into areas like "lower third" (for title graphics overlays) or "sidebar". The VCS layout engine takes inspiration here and operates on the same principle of splitting and shrinking the available frame. Every layout starts with the full viewport as the frame, and the tree of layout functions will gradually modify the frame as they get called. To create a "lower third", you'd simply write a layout function that returns coordinates where Y is adjusted down by 2/3 and height is reduced to 1/3. Any components nested inside will then receive this as the "parent frame" which they can adjust further.

## Functional vs. declarative

In CSS, everything is expressed by declaring properties which the engine interprets to produce the final layout. It's powerful and often easy to use, but creates a certain engine bloat. There are hundreds of separate CSS properties, some of them conflicting with each other, and many even come with their own specific mini-languages tucked into string values that must be parsed and executed.

It's not possible for a HTML/CSS author themselves to add new layout models to the engine. There's a fixed set of engines available like "flexbox" and "grid". Since any author can request them at any time, the rendering engine must include everything. A modern web engine is a multi-hundred-megabyte affair.

VCS instead uses function-based layout that lets you plug in the exact code you need. It keeps memory footprint down, and more complex layout models can be provided as regular JavaScript libraries loaded as needed. There is no need to wait for the entire system to be updated if your layout engine is missing that one setting!

## The `layout` property

One way to think of VCS's `layout` property is that it's like CSS `display`, but you get to decide exactly what it means and which configuration parameters it takes.

The value of the layout property must be an `Array` that contains one or two values:

1. The layout function (a `Function` object). (Mandatory)
2. Params passed to the layout function (an `Object`). (Optional)

For example:

```jsx theme={null}
<Box layout={[ lowerThird, {pad_gu: 0.5} ]}>
```

Here we're passing a layout function named `lowerThird` and giving it a layout params object containing a property named `pad_gu`. (We'll return to this shortly.)

If an element doesn't have the `layout` property, it will simply inherit the parent frame, which is the entire viewport by default.

Let's look at a possible implementation of the `lowerThird` layout function:

```jsx theme={null}
function lowerThird(parentFrame, params) {
  let { x, y, w, h } = parentFrame;

  h = Math.round(h / 3);
  y += parentFrame.h - h;

  return { x, y, w, h };
}
```

The return value of a layout function must be an object with the properties `x, y, w, h`. This is called a "frame", and it describes a rectangle within the viewport in absolute pixel coordinates.

The most important input argument is `parentFrame` which is similarly a frame rectangle. The purpose of your function is to transform this rectangle.

For simple layout functions like `lowerThird` above, you don't need to think about what the frame units are; it's just slicing down the available frame using a rule contained in the function.

However, for more complex rules, you need to know about the wider context of where the layout is being applied. Let's look at that soon, but first a design detour…

You may have noticed that our previous `lowerThird` implementation didn't actually make use of the `pad_gu` param we passed in. What is the significance of the "`_gu`" suffix here? It refers to the "grid unit", a standard way to express in device-independent measurements in VCS.

<Tip>
  See our [moving watermark tutorial](https://www.daily.co/blog/vcs-tutorial-moving-watermark/) for a complete example on how to use the layout property.
</Tip>

## The grid unit

The grid unit is a designer-friendly, device-independent unit. The default grid size is 1/36 of the output's minimum dimension. In other words, 1 gu = 20px on a 720p stream (and 30px on a 1080p stream).

The more informal definition is that 1 gu is a good minimum text size for a video stream. It's small but still readable on a TV screen. By defining values in grid units, they're automatically aligned on the default grid, and it's easier to get eye-pleasing results where things align, margins are multiples of a common base size, and measurements are guaranteed to scale correctly to different output sizes.

We recommend specifying design measurements in grid units where possible. For example, the font size for a [`<Text>`](/docs/vcs/components/text) component can be passed as grid units using the [`fontSize_gu` style property](/docs/vcs/components/text#style-prop).

It's currently not possible to redefine the grid unit size yourself, but this may eventually be added to Daily's streaming/recording API.

## The layout context object

Returning to the `lowerThird` example above, we can now understand that `pad_gu` is supposed to express a padding measured in grid units. Remember that the layout function must return absolute coordinates. It seems like we need to access the grid unit → pixels scale factor somehow.

There is a third argument passed to the layout function. It's an object called "layout context" and provides a `pixelsPerGridUnit` property just for this purpose. Let's access the pad\_gu param value and scale it. We can now complete the `lowerThird` function:

```jsx theme={null}
function lowerThird(parentFrame, params, layoutCtx) {
  const pad = params.pad_gu * layoutCtx.pixelsPerGridUnit;
  let { x, y, w, h } = parentFrame;

  h = Math.round(h / 3);
  y += parentFrame.h - h;

  // apply padding
  if (pad > 0) {
    x += pad;
    y += pad;
    w -= 2 * pad;
    h -= 2 * pad;
  }

  return { x, y, w, h };
}
```

The layout context offers the following properties:

* `pixelsPerGridUnit`: `Number`. We saw this used in the above example. It's the scale factor to convert grid units to viewport pixels.
* `viewport`: `Object`. This is a frame rectangle, so it has the properties `x`, `y`, `w`, `h`. (`x` and`y` are typically zero, but you should confirm this, rather than assume it.) Accessing the viewport frame is useful if you want to size something based on the viewport size regardless of how deep you're inside the layout tree.
* `useIntrinsicSize`: `Function`. This is a "layout hook", a function that lets you access data and state from the layout system. Calling this function will return the intrinsic size of the current element to which your layout function is applied. For example, if your function is attached to an [`<Image>`](/docs/vcs/components/image) component, `useIntrinsicSize` will return the size of the image.
* `useContentSize`: `Function`. This is a "layout hook", a function that lets you access data and state from the layout system. Calling this function will return the initial computed content size (including children) of the element to which your layout function is applied. "Initial" here means the size that was computed on the first layout pass. For details on how to use this hook, see section "Two-pass layout" below.

## Two-pass layout

It's a common layout requirement that a visual component should adapt and resize based on its children's content. For example, you might want to render a graphic that assumes a default minimum width and height, but is able to grow its height if text content inside the graphic flows to multiple lines.

To enable this kind of dynamic size measurement, VCS does two-pass layout when needed. A layout function implementing a dynamic container can call the `useContentSize` layout hook to inform the VCS layout engine that it wants to know the dynamic size of its children. On the first pass, `useContentSize` returns a zero size because the child sizes are not yet known. The container layout function then returns a default size which gets passed to the children as usual. If any components in the child tree contain text flows (or otherwise they require more space than what's available in the default size being passed), the VCS layout system will capture that information and use it to compute a final `contentSize` value for the container.

On the second layout pass, the container layout function again calls the `useContentSize` layout hook. (It's the same layout function being called again by the layout system.) This time `useContentSize` will return the final `contentSize` value that was computed in the first layout pass. The container can now use this size value to resize and position itself so that the child contents fit snugly. The layout system again proceeds to call the child tree layout functions, and this time they'll receive the parent size that was computed taking into account the `contentSize` from the first layout pass.

There is an example composition available in the VCS SDK that demonstrates this principle with a basic "stretch box" that adapts to its text content. Examining the code for this example may be helpful to understand how `useContentSize` behaves in two-pass layout.

You can run the example with:

`yarn open-browser example:stretchbox`

The source is located in the file `example/stretchbox.jsx`.


# Using session assets in Daily VCS
Source: https://docs.daily.co/docs/vcs/session-assets

Developers can use Daily's VCS SDK to build custom video layouts and add graphics to live streamed and recorded video calls.

<Badge>Paid plans only</Badge>

Session assets are assets made available to VCS when a live stream or cloud recording is started. For example, a logo image can be included under the `session_assets` property, which can then be applied as an image overlay in your video feed.

Session assets must be specified when starting the live stream or recording. The asset URLs you pass will be preloaded immediately and cached on the server. This ensures the data is instantly available when your rendering makes use of it (for example, when you send a param update to display the logo overlay).

If you are using Daily's VCS baseline composition, session assets can only be images. (**Note**: Only `.png` extensions are permitted.)

```javascript theme={null}
await call.startLiveStreaming({
  rtmpUrl: 'RTMP_URL',
  layout: {
    preset: 'custom', // required
    composition_id: 'daily:baseline', // optional: default value
    composition_params: {
      mode: 'dominant',
      showTextOverlay: true,
      'text.content': 'Hello',
      'text.align_horizontal': 'right',
      'text.align_vertical': 'bottom',
      'text.fontFamily': 'Exo',
      'text.fontWeight': '500',
      'videoSettings.roundedCorners': true,
      'videoSettings.showParticipantLabels': true,
      showImageOverlay: true,
      'image.assetName': 'logo.png',
    },
    session_assets: {
      // the key is images/ followed by your file name, including the extension
      // the value must be an absolute URL to a hosted asset
      'images/logo.png': 'https://example.com/logo.png',
    },
  },
});
```

<Warning>
  `image.assetName` must match the `session_assets` key with the `images/` prefix removed, and it must keep the file extension. So a key of `images/logo.png` means you set `image.assetName` to `logo.png`, not `logo`. If the two do not match, the overlay area renders as a plain green box instead of your image.
</Warning>

When using the VCS SDK to add your own customized VCS components, session assets can include images (as described above), as well as external links to the custom components you would like applied to your live stream or recording video feed:

```javascript theme={null}
await call.startLiveStreaming({
  rtmpUrl: 'RTMP_URL',
  layout: {
    preset: 'custom', // required
    composition_id: 'daily:baseline',
    composition_params: {
      // ... Add your composition params here
    },
    session_assets: {
      'images/logo.png': 'https://example.com/logo.png',
      'CustomOverlay.js':
        'https://example.com/my_custom_composition/CustomOverlay.js',
    },
  },
});
```


# Build a JS package
Source: https://docs.daily.co/docs/vcs/tools/build-a-js-package

Full reference documentation to help developers rapidly add calls to any site or app using the Daily real-time API built on WebRTC.

In addition to live testing in the [simulator](/docs/vcs/tools/simulator), you can also build a composition as a JavaScript library bundle, which you can then load into your own web app:

```jsx theme={null}
yarn build-browser daily:baseline
```

The second argument here is a [composition ID](/docs/vcs/tools/simulator#the-composition-id).

The JS library is written into the build subdirectory.

The file name contains the composition ID with the colon replaced by and underscore. For example:

`daily_baseline.bundle.js`

To load the composition in a web application, load the `.js` file using a script tag in your HTML loader. Then you can access the VCS composition library using a global variable that contains the composition ID, like so:

```js theme={null}
const vcsComp = window.VCSComposition_daily_baseline;
```

The library provides a single function named `startDOMOutputAsync`. It takes a container DOM element (where your VCS rendering will be directed), a viewport size, input image descriptions, and a few other arguments. It then returns an API object that lets you send commands data to the live VCS composition.

Please refer to the [VCS web renderer API documentation](/docs/vcs/tools/vcs-web-renderer#using-the-composition-library-directly) for more information for how to use the `vcsComp` object.

A practical way to learn more about this API is to read the [VCS Simulator](/docs/vcs/tools/simulator)'s source code, as it uses this exact mechanism to load up the composition and send data to it. The VCS Simulator is a single-file HTML+JS application without a build step, so its source is entirely in `devrig/vcs-rig.html`.


# VCS tools
Source: https://docs.daily.co/docs/vcs/tools/index

Full reference documentation to help developers rapidly add calls to any site or app using the Daily real-time API built on WebRTC.

<Badge>Paid plans only</Badge>

VCS offers CLI (command line interface) build and development tools in the `js` folder. They are accessible using the yarn package manager (see our [Installation page](/docs/vcs/installation) for more information).

These tools let you develop compositions more easily with the simulator. You can also export your composition as a JavaScript library package that can be loaded on a web page.


# VCS Simulator
Source: https://docs.daily.co/docs/vcs/tools/simulator

Full reference documentation to help developers rapidly add calls to any site or app using the Daily real-time API built on WebRTC.

<img alt="VCS Simulator with default baseline composition settings" />

The VCS Simulator is a web page that loads your custom composition into a standard browser-based GUI. It acts like a generic VCS host application. You can click buttons to send data to your composition and see how its output changes. When your code works in the simulator, we do our best to guarantee that it will produce the same output on Daily's server-side pipeline, as well.

When using the VCS SDK, you will run the simulator as a local web server and load it in a browser. It supports hot auto-reload, which means the simulator will refresh automatically when you modify your composition code.

<Tip>
  If you are using [Daily's baseline composition](/reference/daily-js/types/daily-streaming-layout-config#vcs-baseline-composition), which Daily built with the VCS SDK, you can use the [VCS Simulator](https://www.daily.co/tools/vcs-simulator/daily_baseline.html) publicly hosted by Daily.

  You only need to run the Simulator locally if you are testing your own custom compositions.
</Tip>

To start the Simulator with the "hello" example, enter the following command in a terminal:

```bash theme={null}
yarn open-browser example:hello
```

Which is really a shorthand for:

```bash theme={null}
yarn webpack serve --open --env compid=example:hello
```

(You can see this implementation in the `scripts` section of the [`package.json`](https://github.com/daily-co/daily-vcs/blob/main/js/package.json) file.)

Opening the Simulator is really just calling Webpack's dev server and passing it an env variable named `compid`, whose value in this case is `example:hello`.

Another typical value for `compid` would be `daily:baseline`, which is Daily's baseline composition that provides a wealth of layout and graphics features implemented in VCS. But what is this parameter actually about?

### The composition ID

The ID has two parts:

1. A namespace
2. A composition name

These parts are separated by a colon, like so: `namespace:composition-name`

There are currently two namespaces available:

1. `example`, which refers to the [`daily-vcs/js/example`](https://github.com/daily-co/daily-vcs/tree/main/js/example) folder
2. `daily`, which refers to the [`daily-vcs/compositions`](https://github.com/daily-co/daily-vcs/tree/main/compositions/daily-baseline) folder

This is primarily meant as an extension mechanism for the future so that compositions by different authors don't collide. **It is not currently possible to create your own namespaces.**

### Custom components workflow

When you upload custom components to Daily using the session assets API, your components are layered on top of the `daily:baseline` composition by default.

So, the workflow for developing custom components is that you should start with the baseline composition:

```bash theme={null}
 yarn open-browser daily:baseline
```

Then you can make changes in `daily-vcs/compositions/daily-baseline` and the VCS Simulator will automatically refresh.

<Note>
  If you don't want to the browser window to open automatically, you can alternatively use `yarn devrig daily:baseline` which just launches the local server.
</Note>

You can save your changes into a new git branch, which is named `my-amazing-custom-vcs-components` in this example:

```bash theme={null}
git checkout -b my-amazing-custom-vcs-components
git add -u
git commit -m "My custom components on top of the baseline comp"
```

The changes in this branch are the files that you need to send using the session assets API when starting a live stream or recording on Daily. We intend to provide a CLI tool soon that will make it easier to extract your changes into a Daily API call.


# VCS web renderer
Source: https://docs.daily.co/docs/vcs/tools/vcs-web-renderer

Full reference documentation to help developers rapidly add calls to any site or app using the Daily real-time API built on WebRTC.

You've seen how the [VCS simulator](/docs/vcs/tools/simulator) enables live testing of compositions within a web browser.

Using the **VCS web renderer library**, you can integrate that same capability into your own app. This is useful whenever you want to render live views that match how the VCS composition gets rendered on Daily's cloud. For example, you can offer your app's users a preview of the various layout and graphics options. It's much easier for users to understand how these options work if there's a live preview, and it's much easier for you to develop this live preview by using the VCS web renderer because it takes care of all the hard work of matching rendering.

It's even possible to use the VCS web renderer on its own, without using Daily's cloud VCS capabilities. One such scenario would be an [Interactive Live Streaming](/docs/guides/scaling-calls/interactive-live-streaming-rtmp-output) type of application. These apps usually have a "main view" or "main stage" which should be shared by all viewers and participants. There is also typically a producer or host role who controls what appears on the stage. You can use the VCS web renderer to ensure that everyone has the same rendering which is driven by the VCS commands sent by the producer/host. All the clients will render their own views locally, but they're all guaranteed to match because they're using the same VCS composition and same control data.

In effect, the VCS web renderer on the client is like an advanced multi-track video player for a Daily room (or other media streams). You can configure it with all the rich options available in the VCS baseline composition, or you can even load your own composition with custom code. We'll look at these two options next, starting with the common ground they share.

### VCS renderer and the DOM

These are the basic steps for rendering a VCS composition in the browser:

1. Load the VCS web renderer library.
2. Create an instance of the renderer by pointing it to a DOM element (usually an empty `<div>`) which should contain the live content.
3. Feed your renderer instance with [input data](/docs/vcs/core-concepts/input-and-compositing-models) like video tracks and param value updates.

The VCS web renderer instance will play on its own until you call `stop()`. It takes care of managing display updates and all internal state. In that sense, it's a "black box" player. There are no requirements or mandatory dependencies imposed on the web app that contains the VCS web renderer.

<Tip>
  Even though VCS uses React internally, your web app doesn't need to use React. But if you do use React in your web app, it won't conflict with the internal React state of VCS because they are kept entirely separate. So it also doesn't matter which version of React you're using in your app.
</Tip>

You can also create multiple VCS renderer instances if needed. For example, the producer view of a "Live Studio" style application might show two live views next to each other: one labeled *Preview*, the other *Output*. The user would be able to test layout and graphics changes that only affect the preview, then click a button to commit those changes to the output (which is the stream that viewers receive). This kind of two-step setup needs separate VCS renderer instances for the Preview and Output views.

### Library options

There are two ways to use the VCS web renderer library:

1. Load it from Daily's pre-built npm packages.
2. Build your own composition and include it directly in your app.

If you are using a custom composition (i.e. you've written your own VCS React components or integrated other custom code), then you must choose the second option. Please see [Building a JS package](/docs/vcs/tools/build-a-js-package) for more information.

If you're using Daily's baseline composition, we provide a pre-built version in the npm package `[@daily-co/vcs-composition-daily-baseline-web](https://www.npmjs.com/package/@daily-co/vcs-composition-daily-baseline-web)`.

Note that this pre-built package is just the VCS composition and the web renderer library. It's quite low-level because it's independent of any web framework or even the Daily.js library. This means you don't need any other dependencies, but it can be somewhat laborious to integrate this low-level package in your app because you need to explicitly manage things like passing media streams to the renderer (so that it can play video tracks).

#### Helper library for connecting to a Daily room

To help with integrating the VCS web renderer into an app that's using Daily.js and React, we are working on providing a high-level library that takes care of all the details.

We intend to release this Daily-VCS-React library and associated sample code as part of the VCS 1.0 launch.

<Tip>
  If you're working on an application today that would benefit from this
  library, we can also offer beta access — please

  <Anchor href="https://www.daily.co/company/contact/support/">
    contact our support team
  </Anchor>

  for more details.
</Tip>

### Using the composition library directly

These instructions explain how to use the pre-built version of baseline composition from npm. As discussed above, the interface offered by this package is quite low-level because it's independent of JavaScript frameworks and even Daily.js. You need to provide a DOM element to render into, as well as any media streams (or video elements) that provide the live video content. Because this API only uses standard DOM types, it is compatible with any framework including React (or anything else).

Add the `@daily-co/vcs-composition-daily-baseline-web` to your web app project. Then import the package:

```js theme={null}
import * as vcsComp from '@daily-co/vcs-composition-daily-rundown-web';
```

(If you're using your own custom composition, the instructions in [Building a JS package](/docs/vcs/tools/build-a-js-package) will show you how to load `vcsComp` from a custom-built JS library.)

The `vcsComp` library object exposes a single function named `startDOMOutputAsync()`. This async JavaScript function creates a VCS renderer instance. It returns an API object that manages the renderer instance. Its arguments are:

```js theme={null}
startDOMOutputAsync(
  rootDOMElement,
  viewportWidth,
  viewportHeight,
  initialSources,
  options
);
```

`rootDOMElement` must be a `<div>` or other empty HTML element which will contain the VCS renderer's output.

`viewportWidth` and `viewportHeight` must specify the viewport size, i.e. the resolution at which the VCS renderer will produce images.

`initialSources` must be an object with two properties, `videoSlots` and `imageAssets`. These specify the initial inputs for the composition. See below for details on specifying composition input data.

Supported properties for `options` are:

* `updateCb` (function) - a callback that gets triggered when the composition is updated.
* `errorCb` (function) - an error callback.
* `getAssetUrlCb` (function) - a callback that gets called to load asset URLs requested by the composition.
* `fps` (number) - the suggested frame rate for the VCS player (defaults to 30).
* `scaleFactor` (number) - a display scale factor applied to the output within the given DOM element (defaults to 1).
* `enablePreload` (boolean) - if true, the composition's image preloads are completed before `startDOMOutputAsync` returns.

#### VCS renderer instance API

The API object returned by `startDOMOutputAsync()` offers a number of methods.

The following are essential for controlling the renderer and settings its inputs:

* `stop()` - stops the VCS renderer playback immediately.
* `setParamValue(paramId: string, value: any)` - sets a value for param `paramId`.
* `setActiveVideoInputSlots(slots: Array)` - sets the current video inputs.

The following additional methods provide information about the composition, let you provide optional room metadata, and send messages of known types like "chat" or "emoji reaction" (these are called standard sources):

* `getCompositionInterface()` — returns the composition interface object which describes the params and other input types supported by the composition.
* `setRoomPeerDescriptionsById(peersById: Map)` - sets room peer descriptions associated with video inputs (or audio-only participants who don't have a video input).
* `addStandardSourceMessage(sourceId: string, data: any)` - adds a standard source message of type `sourceId`.

To learn more about this API, you can read the [VCS Simulator](/docs/vcs/tools/simulator)'s source code. The simulator makes use of all these methods to create its UI and send data to the composition. The VCS Simulator is a single-file HTML+JS application without a build step, so its source is entirely in `devrig/vcs-rig.html`.


# Daily Call Client
Source: https://docs.daily.co/reference/daily-js/daily-call-client/index

The core object for managing a Daily video call in daily-js.

A Daily call client is the central object you interact with to manage a video call. It gives you control over the entire call lifecycle — joining and leaving, managing participants and their media, and reacting to call state changes through events.

## Creating a call client

Call clients are created using one of the [factory methods](/reference/daily-js/factory-methods). The two most common are:

* **[`createCallObject()`](/reference/daily-js/factory-methods/create-call-object)** — headless mode. Daily manages WebRTC and media, but renders no UI. Use this when you're building a fully custom call interface.
* **[`createFrame()`](/reference/daily-js/factory-methods/create-frame)** — iframe mode. Daily renders its full Prebuilt UI inside an `<iframe>`. Use this when you want a ready-made call UI.

```javascript theme={null}
// Headless — you build the UI
const call = Daily.createCallObject();

// Prebuilt UI in an iframe
const call = Daily.createFrame();
```

See [Call Modes](/docs/daily-js/concepts/call-modes) for a full comparison.

## Configuration

Configuration properties for your call client can be passed to the factory method at creation time,  to `join()`, or one of the initialization methods, `startCamera()`, `load()`, or `preAuth()`. See the [`DailyCallOptions` reference](/reference/daily-js/types/daily-call-options) for a full list of options.

```javascript theme={null}
// At creation time
const call = Daily.createCallObject({
  dailyConfig: { experimentalChromeVideoMuteLightOff: true },
});

// At join time
await call.join({
  url: 'https://your-domain.daily.co/room-name',
  token: 'YOUR_MEETING_TOKEN',
  startVideoOff: true,
});
```

## Static methods

Static methods are called directly on `DailyIframe` (or `Daily`) without a call client instance. They include environment detection, version info, and the factory methods used to create a call client. See the [static methods reference](/reference/daily-js/static-methods).

## Instance methods

Instance methods are called on a call client you've already created. They cover the full call lifecycle — joining and leaving, managing participants, controlling media, and more. See the [instance methods reference](/reference/daily-js/instance-methods).

## Event handling

The call client is an event emitter. Use `.on()` and `.off()` to subscribe and unsubscribe:

```javascript theme={null}
call.on('joined-meeting', () => console.log('joined'));
call.on('participant-joined', (event) => console.log(event.participant));
call.on('left-meeting', () => call.destroy());
```

All events are documented in the [Events](/reference/daily-js/events/lifecycle-events) reference.

## Running multiple call clients

It's possible to run more than one call client simultaneously. See the [multi-instance guide](/docs/daily-js/guides/multi-instance) for constraints and patterns.

## TypeScript

The underlying class is named `DailyIframe` for historical reasons, but the relevant TypeScript interface is `DailyCall`. All factory methods return a `DailyCall`.

```typescript theme={null}
import Daily, { DailyCall } from '@daily-co/daily-js';

const call: DailyCall = Daily.createCallObject();
```


# Error events
Source: https://docs.daily.co/reference/daily-js/events/error-events

Events for fatal and non-fatal errors — connection failures, device errors, screen share issues, and processing warnings.

These events fire when fatal or non-fatal errors occur during a call.

***

## error

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires when an unrecoverable error ends the call. A [`left-meeting`](/reference/daily-js/events/lifecycle-events#left-meeting) event fires immediately after.

<ResponseField name="action" type="string">
  Always `"error"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="errorMsg" type="string">
  A human-readable description of the error.
</ResponseField>

<ResponseField name="error" type="object">
  Present when the error type is known. Always contains `type` and `msg`. When `type` is `'connection-error'`, also includes a `details` object — see below.

  | `type`             | Description                                                                                                                        |
  | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------- |
  | `ejected`          | The local participant was removed from the call by an owner.                                                                       |
  | `nbf-room`         | The room is not yet valid — current time is before the room's `nbf` (not-before) timestamp.                                        |
  | `nbf-token`        | The meeting token is not yet valid — current time is before the token's `nbf` timestamp.                                           |
  | `exp-room`         | The room has expired.                                                                                                              |
  | `exp-token`        | The meeting token has expired.                                                                                                     |
  | `no-room`          | The room does not exist.                                                                                                           |
  | `meeting-full`     | The room has reached its participant limit.                                                                                        |
  | `end-of-life`      | The daily-js version in use is no longer supported.                                                                                |
  | `not-allowed`      | The participant is not permitted to join this room (e.g. token or privacy settings).                                               |
  | `connection-error` | A network or infrastructure failure prevented or severed the connection. This is the only type with a structured `details` object. |
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "error",
  "errorMsg": "network unreachable",
  "callClientId": "17225364729060.9442072768918943",
  "error": {
    "type": "ejected",
    "msg": "You were removed from the call"
  }
}
```

```javascript theme={null}
call.on('error', ({ error }) => {
  if (error?.type === 'ejected') {
    showEjectedMessage();
  } else {
    showGenericErrorMessage(error?.msg);
  }
});
```

### connection-error details

When `error.type` is `'connection-error'`, an additional `details` object identifies where in the lifecycle the failure occurred:

<ResponseField name="details.on" type="string">
  Lifecycle stage where the failure occurred: `'load'`, `'join'`, `'reconnect'`, `'move'`, `'rtc-connection'`, or `'room-lookup'`.
</ResponseField>

<ResponseField name="details.sourceError" type="object">
  The underlying error from the browser or network layer.
</ResponseField>

<ResponseField name="details.uri" type="string">
  Optional. The resource URL that failed to load.
</ResponseField>

<ResponseField name="details.workerGroup" type="string">
  Optional. Internal routing group.
</ResponseField>

<ResponseField name="details.geoGroup" type="string">
  Optional. Internal geo region.
</ResponseField>

<ResponseField name="details.bundleUrl" type="string">
  Optional. The call bundle URL if the failure was during bundle fetch.
</ResponseField>

```json theme={null}
// Example: connection-error
{
  "action": "error",
  "errorMsg": "Failed to connect",
  "callClientId": "17225364729060.9442072768918943",
  "error": {
    "type": "connection-error",
    "msg": "Failed to connect",
    "details": {
      "on": "join",
      "sourceError": {},
      "uri": "https://c.daily.co/static/call-machine-object-bundle.js"
    }
  }
}
```

***

## nonfatal-error

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Non-fatal errors are recoverable — the call continues after they fire. They signal that something went wrong in a specific subsystem but did not bring down the call. Use these to surface targeted warnings in your UI.

<ResponseField name="action" type="string">
  Always `"nonfatal-error"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="type" type="string">
  Identifies which subsystem the error came from. See the subtypes below.
</ResponseField>

<ResponseField name="errorMsg" type="string">
  A human-readable description of the error.
</ResponseField>

### input-settings-error

Fires when an error occurs while applying input settings changes.

<ResponseField name="details.category" type="string">
  Either `'settings'` (error while applying media settings) or `'processor'` (error while setting up the processor).
</ResponseField>

<ResponseField name="details.media" type="string[]">
  The affected media types — `'video'` and/or `'audio'`.
</ResponseField>

<ResponseField name="details.error" type="object">
  The underlying error. Contains a `camera-error`-shaped object if the failure was getting user media, or the processor error if the failure was in the processor.
</ResponseField>

```json theme={null}
{
  "action": "nonfatal-error",
  "type": "input-settings-error",
  "errorMsg": "...",
  "details": {
    "media": ["video"],
    "category": "settings",
    "error": {
      "failedMedia": ["video"],
      "msg": "Invalid constraints provided.",
      "reason": "invalid",
      "type": "constraints"
    }
  },
  "callClientId": "17225364729060.9442072768918943"
}
```

### live-streaming-warning

Fires when an error occurs during a live stream — for example, when attempting to remove all live streaming endpoints.

```json theme={null}
{
  "action": "nonfatal-error",
  "type": "live-streaming-warning",
  "errorMsg": "...",
  "callClientId": "17225364729060.9442072768918943"
}
```

### local-audio-level-observer-error

Fires if an error occurs while the local audio level observer is running.

```json theme={null}
{
  "action": "nonfatal-error",
  "type": "local-audio-level-observer-error",
  "errorMsg": "...",
  "callClientId": "17225364729060.9442072768918943"
}
```

### meeting-session-data-error

Fires when an error occurs updating meeting session data via [`setMeetingSessionData()`](/reference/daily-js/instance-methods/set-meeting-session-data).

```json theme={null}
{
  "action": "nonfatal-error",
  "type": "meeting-session-data-error",
  "errorMsg": "Meeting session data is too large. Maximum size supported is 100KB.",
  "callClientId": "17225364729060.9442072768918943"
}
```

### screen-share-error

Fires when an error occurs while starting a screen share.

<ResponseField name="details.category" type="string">
  Either `'permissions'` (user or OS blocked screen sharing) or `'unknown'` (a `getDisplayMedia()` exception for another reason).
</ResponseField>

<ResponseField name="details.blockedBy" type="string">
  Present when `category` is `'permissions'`. Either `'browser'` (user denied access) or `'os'` (OS is configured to block screen sharing).
</ResponseField>

<ResponseField name="details.browserError" type="object">
  The underlying browser error, including `name` and `message`.
</ResponseField>

```json theme={null}
// Example: permissions error
{
  "action": "nonfatal-error",
  "callClientId": "17225364729060.9442072768918943",
  "type": "screen-share-error",
  "errorMsg": "Error starting ScreenShare: blocked-by-browser",
  "details": {
    "category": "permissions",
    "blockedBy": "browser",
    "browserError": {
      "name": "NotAllowedError",
      "message": "The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission."
    }
  }
}
```

```json theme={null}
// Example: unknown error
{
  "action": "nonfatal-error",
  "callClientId": "17225364729060.9442072768918943",
  "type": "screen-share-error",
  "errorMsg": "Error starting ScreenShare: unknown",
  "details": {
    "category": "unknown",
    "browserError": {
      "name": "AbortError",
      "message": "In shutdown",
      "code": 20
    }
  }
}
```

### video-processor-warning

Fires when the user enables background effects in a browser where performance will likely be degraded — for example, when hardware graphics acceleration is disabled. This often correlates with very low frame rates on the outgoing video stream.

This is powered by the [`failIfMajorPerformanceCaveat`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext#failifmajorperformancecaveat) WebGL property.

```json theme={null}
{
  "action": "nonfatal-error",
  "type": "video-processor-warning",
  "errorMsg": "Background processing using software WebGL. Performance may be degraded.",
  "callClientId": "17225364729060.9442072768918943"
}
```

### video-processor-error

Fires when CPU usage becomes too high, causing the video processor to turn off and the camera to mute.

```json theme={null}
{
  "action": "nonfatal-error",
  "type": "video-processor-error",
  "errorMsg": "...",
  "callClientId": "17225364729060.9442072768918943"
}
```

### audio-processor-error

Fires when audio processing (noise cancellation) fails, causing the audio processor to turn off and the microphone to mute.

```json theme={null}
{
  "action": "nonfatal-error",
  "type": "audio-processor-error",
  "errorMsg": "...",
  "callClientId": "17225364729060.9442072768918943"
}
```

***

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [join()](/reference/daily-js/instance-methods/join)
    * [startScreenShare()](/reference/daily-js/instance-methods/start-screen-share)
    * [updateInputSettings()](/reference/daily-js/instance-methods/update-input-settings)
    * [setMeetingSessionData()](/reference/daily-js/instance-methods/set-meeting-session-data)
  </Card>

  <Card title="Events" icon="bolt">
    * [Lifecycle events](/reference/daily-js/events/lifecycle-events)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Events](/docs/daily-js/concepts/events)
    * [Device permissions](/docs/daily-js/guides/device-permissions)
  </Card>
</CardGroup>


# Iframe UI events
Source: https://docs.daily.co/reference/daily-js/events/iframe-ui-events

Events for Daily Prebuilt UI state changes — fullscreen, picture-in-picture, sidebar, and more.

These events are specific to calls using [Daily Prebuilt](/docs/prebuilt) (iframe mode). They fire when the UI state changes — entering fullscreen, toggling picture-in-picture, switching sidebar panels, and so on.

***

## fullscreen

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires when the call iframe enters browser fullscreen mode — typically when a user clicks the fullscreen button or when [`requestFullscreen()`](/reference/daily-js/instance-methods/request-fullscreen) is called.

```json theme={null}
// Example event object
{
  "action": "fullscreen",
  "callClientId": "17225364729060.9442072768918943"
}
```

***

## exited-fullscreen

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires when the call iframe exits fullscreen mode.

```json theme={null}
// Example event object
{
  "action": "exited-fullscreen",
  "callClientId": "17225364729060.9442072768918943"
}
```

***

## active-speaker-mode-change

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires when Active Speaker mode is toggled — either via the built-in UI or programmatically via [`setActiveSpeakerMode()`](/reference/daily-js/instance-methods/set-active-speaker-mode).

<Note>
  Active Speaker mode is a Daily Prebuilt concept. If you've built your own custom UI, this event will not fire and `setActiveSpeakerMode()` will have no effect.
</Note>

<ResponseField name="action" type="string">
  Always `"active-speaker-mode-change"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="enabled" type="boolean">
  `true` if Active Speaker mode was turned on, `false` if turned off.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "active-speaker-mode-change",
  "enabled": true,
  "callClientId": "17225364729060.9442072768918943"
}
```

***

## show-local-video-changed

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires when the local participant's self-view is shown or hidden — either by user interaction or when [`setShowLocalVideo()`](/reference/daily-js/instance-methods/set-show-local-video) is called.

<ResponseField name="action" type="string">
  Always `"show-local-video-changed"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="show" type="boolean">
  `true` if the local video is now visible, `false` if hidden.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "show-local-video-changed",
  "show": true,
  "callClientId": "17225364729060.9442072768918943"
}
```

***

## pip-started

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires when picture-in-picture mode starts — either from the built-in PiP button or when the browser's PiP API is activated.

```json theme={null}
// Example event object
{
  "action": "pip-started",
  "callClientId": "17225364729060.9442072768918943"
}
```

***

## pip-stopped

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires when picture-in-picture mode stops — when the user exits PiP via the button, closes the PiP window using browser controls, or the browser deactivates PiP.

```json theme={null}
// Example event object
{
  "action": "pip-stopped",
  "callClientId": "17225364729060.9442072768918943"
}
```

***

## sidebar-view-changed

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires when the sidebar panel changes — either via user interaction or when [`setSidebarView()`](/reference/daily-js/instance-methods/set-sidebar-view) is called.

<ResponseField name="action" type="string">
  Always `"sidebar-view-changed"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="view" type="SidebarView">
  The currently active sidebar panel. Built-in values are `'people'`, `'chat'`, `'network'`, and `'breakout'`. Custom panel names are also possible. `null` means the sidebar is closed.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "sidebar-view-changed",
  "view": "people",
  "callClientId": "17225364729060.9442072768918943"
}
```

***

## custom-button-click

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires when a local participant clicks a custom tray button. See [`customTrayButtons`](/reference/daily-js/types/daily-call-options#param-custom-tray-buttons) and [`updateCustomTrayButtons()`](/reference/daily-js/instance-methods/update-custom-tray-buttons) for how to add custom buttons to the tray.

<ResponseField name="action" type="string">
  Always `"custom-button-click"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="button_id" type="string">
  The ID of the button that was clicked, as defined in `customTrayButtons`.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "custom-button-click",
  "button_id": "myCustomButton",
  "callClientId": "17225364729060.9442072768918943"
}
```

```javascript theme={null}
call.on('custom-button-click', ({ button_id }) => {
  if (button_id === 'raise-hand') {
    toggleHandRaise();
  }
});
```

***

## lang-updated

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires after [`setDailyLang()`](/reference/daily-js/instance-methods/set-daily-lang) is called. `lang` is the language currently in effect; `langSetting` is the value that was explicitly set. For example, calling `setDailyLang('user')` defers to the browser's language preference — `langSetting` will be `'user'` and `lang` will be the resolved language like `'en'`.

In custom call object mode, this event fires but has no automatic visual effect — use the payload to update your own UI if needed.

<ResponseField name="action" type="string">
  Always `"lang-updated"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="lang" type="DailyLanguage">
  The language currently in effect (e.g. `'en'`, `'fr'`).
</ResponseField>

<ResponseField name="langSetting" type="DailyLanguageSetting">
  The value explicitly set via `setDailyLang()` — may be a language code or `'user'` to follow the browser setting.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "lang-updated",
  "callClientId": "17225364729060.9442072768918943",
  "lang": "en",
  "langSetting": "user"
}
```

***

## theme-updated

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires when the Prebuilt theme changes via [`setTheme()`](/reference/daily-js/instance-methods/set-theme).

<ResponseField name="action" type="string">
  Always `"theme-updated"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="theme" type="DailyThemeConfig">
  The full current theme configuration, including the `colors` object.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "theme-updated",
  "callClientId": "17225364729060.9442072768918943",
  "theme": {
    "colors": {
      "accent": "#F3B3A6",
      "background": "#D7FBFE",
      "backgroundAccent": "#9CF6FC",
      "border": "#797BA9",
      "mainAreaBg": "#B7CE63",
      "mainAreaBgAccent": "#8FB339"
    }
  }
}
```

***

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [requestFullscreen()](/reference/daily-js/instance-methods/request-fullscreen)
    * [exitFullscreen()](/reference/daily-js/instance-methods/exit-fullscreen)
    * [setActiveSpeakerMode()](/reference/daily-js/instance-methods/set-active-speaker-mode)
    * [setSidebarView()](/reference/daily-js/instance-methods/set-sidebar-view)
    * [setShowLocalVideo()](/reference/daily-js/instance-methods/set-show-local-video)
    * [setTheme()](/reference/daily-js/instance-methods/set-theme)
    * [setDailyLang()](/reference/daily-js/instance-methods/set-daily-lang)
    * [updateCustomTrayButtons()](/reference/daily-js/instance-methods/update-custom-tray-buttons)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Events](/docs/daily-js/concepts/events)
    * [Daily Prebuilt overview](/docs/prebuilt)
    * [Customizing Daily Prebuilt](/docs/prebuilt/customizing-daily-prebuilt)
  </Card>
</CardGroup>


# daily-js events
Source: https://docs.daily.co/reference/daily-js/events/index

Complete list of daily-js events — emitted for every state change during a call.

<Card title="Events guide" icon="book-open" href="/docs/daily-js/concepts/events">
  Please refer to the Events guide for a conceptual overview with categorized tables, TypeScript types, and usage examples for every event.
</Card>

## All Events

<CardGroup>
  <Card title="Lifecycle Events" icon="arrows-spin" href="/reference/daily-js/events/lifecycle-events">
    Emitted during key lifecycle moments like joining, leaving, and camera start.
  </Card>

  <Card title="Participant Events" icon="users" href="/reference/daily-js/events/participant-events">
    Emitted when participants join, leave, update their state, and more.
  </Card>

  <Card title="Media Events" icon="video" href="/reference/daily-js/events/media-events">
    Emitted for media track starts/stops, screen sharing, audio levels, and face counts.
  </Card>

  <Card title="Network Events" icon="signal" href="/reference/daily-js/events/network-events">
    Emitted for network quality changes, connection state, CPU load, and test results.
  </Card>

  <Card title="Settings & Device Events" icon="gear" href="/reference/daily-js/events/settings-events">
    Emitted when available/selected devices or input/send/receive settings are updated.
  </Card>

  <Card title="Messaging Events" icon="message" href="/reference/daily-js/events/messaging-events">
    Emitted for app messages and meeting session state updates.
  </Card>

  <Card title="Recording Events" icon="circle-dot" href="/reference/daily-js/events/recording-events">
    Emitted when recording starts/stops, stats updates, errors, and data availability. <Badge>Paid</Badge>
  </Card>

  <Card title="Live Streaming Events" icon="signal-stream" href="/reference/daily-js/events/live-streaming-events">
    Emitted when live streaming starts/stops, updates, and errors occur. <Badge>Paid</Badge>
  </Card>

  <Card title="Transcription Events" icon="closed-captioning" href="/reference/daily-js/events/transcription-events">
    Emitted when transcription starts/stops, messages are received, and errors occur. <Badge>Paid</Badge>
  </Card>

  <Card title="Telephony Events" icon="phone" href="/reference/daily-js/events/telephony-events">
    Emitted for dial-in/dial-out readiness, connections, stops, errors    and warnings. <Badge>Paid</Badge>
  </Card>

  <Card title="Error Events" icon="triangle-exclamation" href="/reference/daily-js/events/error-events">
    Emitted for fatal and non-fatal errors during the call lifecycle.
  </Card>

  <Card title="Iframe UI Events" icon="window" href="/reference/daily-js/events/iframe-ui-events">
    Emitted for UI changes in iframe mode, like fullscreen, PiP, sidebar view, and custom button clicks. *(Prebuilt only)*
  </Card>
</CardGroup>


# Lifecycle events
Source: https://docs.daily.co/reference/daily-js/events/lifecycle-events

Events for the full call lifecycle — loading, joining, leaving, and destruction.

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

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires when the JavaScript bundle responsible for the call begins loading. This is the first event in the [`join()`](/reference/daily-js/instance-methods/join) sequence, or the [`load()`](/reference/daily-js/instance-methods/load) sequence if you invoke that directly.

```json theme={null}
// Example event object
{
  "action": "loading",
  "callClientId": "17225364729060.9442072768918943"
}
```

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

***

## loaded

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires when the JavaScript bundle has finished loading. This occurs right before [`joining-meeting`](#joining-meeting) in the [`join()`](/reference/daily-js/instance-methods/join) sequence, or as the final event in the [`load()`](/reference/daily-js/instance-methods/load) sequence.

```json theme={null}
// Example event object
{
  "action": "loaded",
  "callClientId": "17225364729060.9442072768918943"
}
```

***

## load-attempt-failed

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires when a single attempt to load the call bundle has failed. Daily retries a few times before emitting a fatal [`error`](/reference/daily-js/events/error-events#error) event.

<ResponseField name="action" type="string">
  Always `"load-attempt-failed"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="errorMsg" type="string">
  A human-readable description of why the load attempt failed.
</ResponseField>

```json theme={null}
// 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

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires once the call bundle has loaded and the participant is actively connecting. This follows [`loaded`](#loaded) in a successful [`join()`](/reference/daily-js/instance-methods/join) sequence.

```json theme={null}
// Example event object
{
  "action": "joining-meeting",
  "callClientId": "17225364729060.9442072768918943"
}
```

***

## joined-meeting

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires once the local participant has successfully joined the call.

<Note>
  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`](/reference/daily-js/events/participant-events#participant-joined) events. To get a total count at join time, use [`participantCounts()`](/reference/daily-js/instance-methods/participant-counts).
</Note>

<ResponseField name="action" type="string">
  Always `"joined-meeting"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="participants" type="object">
  Contains only the local participant at join time. See [`DailyParticipant`](/reference/daily-js/types/daily-participant) for the full shape.
</ResponseField>

```json theme={null}
// 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
    }
  }
}
```

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

***

## left-meeting

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires once the local participant has left the call.

```json theme={null}
// Example event object
{
  "action": "left-meeting",
  "callClientId": "17225364729060.9442072768918943"
}
```

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

***

## call-instance-destroyed

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires after [`destroy()`](/reference/daily-js/instance-methods/destroy) has been called and all resources have been freed. After this event, [`isDestroyed()`](/reference/daily-js/instance-methods/is-destroyed) returns `true`. Listen for this event if you store the call instance in multiple places, to ensure all references are cleared.

```json theme={null}
// Example event object
{
  "action": "call-instance-destroyed",
  "callClientId": "17225364729060.9442072768918943"
}
```

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

***

## access-state-updated

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires when [`accessState()`](/reference/daily-js/instance-methods/access-state) changes — either the participant's access level changed, or an access request was made or resolved.

<ResponseField name="action" type="string">
  Always `"access-state-updated"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="access" type="object">
  The current access state. The `level` field is one of `'none'`, `'lobby'`, or `'full'`.
</ResponseField>

<ResponseField name="awaitingAccess" type="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.
</ResponseField>

```json theme={null}
// Example: participant has full access
{
  "action": "access-state-updated",
  "callClientId": "17225364729060.9442072768918943",
  "access": { "level": "full" }
}
```

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

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

***

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [join()](/reference/daily-js/instance-methods/join)
    * [leave()](/reference/daily-js/instance-methods/leave)
    * [load()](/reference/daily-js/instance-methods/load)
    * [destroy()](/reference/daily-js/instance-methods/destroy)
    * [accessState()](/reference/daily-js/instance-methods/access-state)
  </Card>

  <Card title="Events" icon="bolt">
    * [Participant events](/reference/daily-js/events/participant-events)
    * [Error events](/reference/daily-js/events/error-events)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Events](/docs/daily-js/concepts/events)
    * [Waiting room](/docs/daily-js/guides/waiting-room)
  </Card>
</CardGroup>


# Live streaming events
Source: https://docs.daily.co/reference/daily-js/events/live-streaming-events

Events for live streaming lifecycle — start, connection state changes, stop, and errors.

<Badge>Paid plans only</Badge>

***

## live-streaming-started

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires when a live stream begins.

<ResponseField name="action" type="string">
  Always `"live-streaming-started"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="instanceId" type="string">
  Unique ID for this live streaming instance.
</ResponseField>

<ResponseField name="layout" type="DailyLiveStreamingLayoutConfig">
  Optional. The layout configuration for this stream. See [`DailyStreamingLayoutConfig`](/reference/daily-js/types/daily-streaming-layout-config) for the full shape.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "live-streaming-started",
  "instanceId": "00000000-0000-4000-8000-000000000000",
  "layout": {},
  "callClientId": "17225364729060.9442072768918943"
}
```

***

## live-streaming-updated

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires when the live stream connection state changes. This event fires in three circumstances:

* The first video frame is published to the RTMP server — `state: "connected"`
* Connection with the RTMP server is interrupted — `state: "interrupted"`
* Connection with the RTMP server is restored — `state: "connected"`

<ResponseField name="action" type="string">
  Always `"live-streaming-updated"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="instanceId" type="string">
  Unique ID for this live streaming instance.
</ResponseField>

<ResponseField name="state" type="DailyStreamingState">
  The current connection state: `'connected'` or `'interrupted'`.
</ResponseField>

<ResponseField name="endpoint" type="DailyStreamingEndpoint">
  Optional. Present when the stream was started with an `endpoints` argument. Contains an `endpoint` string identifying the associated streaming endpoint by name.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "live-streaming-updated",
  "instanceId": "00000000-0000-4000-8000-000000000000",
  "state": "connected",
  "endpoint": { "endpoint": "my_endpoint_name" },
  "callClientId": "17225364729060.9442072768918943"
}
```

***

## live-streaming-stopped

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires when a live stream ends.

<ResponseField name="action" type="string">
  Always `"live-streaming-stopped"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="instanceId" type="string">
  ID of the live streaming instance that stopped.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "live-streaming-stopped",
  "instanceId": "00000000-0000-4000-8000-000000000000",
  "callClientId": "17225364729060.9442072768918943"
}
```

***

## live-streaming-error

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires when a live streaming error occurs.

<ResponseField name="action" type="string">
  Always `"live-streaming-error"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="instanceId" type="string">
  Optional. ID of the live streaming instance that errored.
</ResponseField>

<ResponseField name="errorMsg" type="string">
  A human-readable description of the error.
</ResponseField>

```json theme={null}
// Example: permissions error
{
  "action": "live-streaming-error",
  "instanceId": "00000000-0000-4000-8000-000000000000",
  "errorMsg": "must be meeting owner to start live stream",
  "callClientId": "17225364729060.9442072768918943"
}
```

```json theme={null}
// Example: invalid instanceId
{
  "action": "live-streaming-error",
  "instanceId": "incorrect-uuid",
  "errorMsg": "invalid argument: instanceId is not a valid UUID. Got \"incorrect-uuid\", expected a valid UUID string of the form \"xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx\"",
  "callClientId": "17225364729060.9442072768918943"
}
```

***

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyStreamingLayoutConfig](/reference/daily-js/types/daily-streaming-layout-config)
  </Card>

  <Card title="Methods" icon="code">
    * [startLiveStreaming()](/reference/daily-js/instance-methods/start-live-streaming)
    * [updateLiveStreaming()](/reference/daily-js/instance-methods/update-live-streaming)
    * [stopLiveStreaming()](/reference/daily-js/instance-methods/stop-live-streaming)
    * [addLiveStreamingEndpoints()](/reference/daily-js/instance-methods/add-live-streaming-endpoints)
    * [removeLiveStreamingEndpoints()](/reference/daily-js/instance-methods/remove-live-streaming-endpoints)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Live streaming overview](/docs/guides/features/live-streaming)
    * [daily-js: Live streaming](/docs/daily-js/features/live-streaming)
    * [Events](/docs/daily-js/concepts/events)
  </Card>
</CardGroup>


# Media events
Source: https://docs.daily.co/reference/daily-js/events/media-events

Events for media track lifecycle — when tracks start, stop, and when audio level and face detection data is available.

These events fire when media tracks start or stop, when screen sharing changes, and when audio level and face detection information is available. Support varies per event — see the badge on each section.

***

## track-started

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires when a participant's media track begins. Use this to attach the track to a media element or update your UI when a new audio, video, or screen share track becomes available.

<ResponseField name="action" type="string">
  Always `"track-started"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="participant" type="DailyParticipant">
  The participant whose track started. See [`participants()`](/reference/daily-js/instance-methods/participants) for the full shape.
</ResponseField>

<ResponseField name="track" type="MediaStreamTrack">
  The [MediaStreamTrack](https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack) that started.
</ResponseField>

<ResponseField name="type" type="string">
  The track type. One of `'audio'`, `'video'`, `'screenAudio'`, `'screenVideo'`, or a custom track name.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "track-started",
  "callClientId": "17225364729060.9442072768918943",
  "participant": {
    "session_id": "f2190c86-169a-464f-c0a4-ee1d5c00af58",
    "user_id": "f2190c86-169a-464f-c0a4-ee1d5c00af58",
    "user_name": "",
    "local": true,
    "owner": false,
    "record": false,
    "networkQualityState": "good",
    "tracks": {
      "audio": { "state": "playable", "subscribed": true },
      "video": { "state": "playable", "subscribed": true },
      "screenVideo": { "state": "off", "subscribed": false },
      "screenAudio": { "state": "off", "subscribed": false }
    },
    "joined_at": "2024-06-01T12:00:00.000Z",
    "will_eject_at": "2024-06-01T13:00:00.000Z"
  },
  "track": {
    "contentHint": "",
    "enabled": true,
    "id": "60d47b9f-6b07-4039-930a-8b752c6dbd26",
    "kind": "video",
    "label": "FaceTime HD Camera (Built-in) (05ac:8514)",
    "muted": false,
    "onended": null,
    "onmute": null,
    "onunmute": null,
    "readyState": "live",
    "managedByDaily": true
  },
  "type": "video"
}
```

```javascript theme={null}
call.on('track-started', ({ participant, track, type }) => {
  if (type === 'video' && !participant.local) {
    const videoEl = document.createElement('video');
    videoEl.srcObject = new MediaStream([track]);
    videoEl.autoplay = true;
    document.getElementById('remote-videos').appendChild(videoEl);
  }
});
```

***

## track-stopped

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires when a participant's media track stops. Use this to remove a media element or update your UI when a track is no longer active.

<ResponseField name="action" type="string">
  Always `"track-stopped"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="participant" type="DailyParticipant">
  The participant whose track stopped. See [`participants()`](/reference/daily-js/instance-methods/participants) for the full shape.
</ResponseField>

<ResponseField name="track" type="MediaStreamTrack">
  The [MediaStreamTrack](https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack) that stopped.
</ResponseField>

<ResponseField name="type" type="string">
  The track type. One of `'audio'`, `'video'`, `'screenAudio'`, `'screenVideo'`, or a custom track name.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "track-stopped",
  "callClientId": "17225364729060.9442072768918943",
  "participant": {
    "session_id": "f2190c86-169a-464f-c0a4-ee1d5c00af58",
    "user_id": "f2190c86-169a-464f-c0a4-ee1d5c00af58",
    "user_name": "",
    "local": true,
    "owner": false,
    "record": false,
    "networkQualityState": "good",
    "tracks": {
      "audio": { "state": "playable", "subscribed": true },
      "video": { "state": "off", "subscribed": false },
      "screenVideo": { "state": "off", "subscribed": false },
      "screenAudio": { "state": "off", "subscribed": false }
    },
    "joined_at": "2024-06-01T12:00:00.000Z",
    "will_eject_at": "2024-06-01T13:00:00.000Z"
  },
  "track": {
    "contentHint": "",
    "enabled": true,
    "id": "60d47b9f-6b07-4039-930a-8b752c6dbd26",
    "kind": "video",
    "label": "FaceTime HD Camera (Built-in) (05ac:8514)",
    "muted": false,
    "onended": null,
    "onmute": null,
    "onunmute": null,
    "readyState": "ended",
    "managedByDaily": true
  },
  "type": "video"
}
```

```javascript theme={null}
call.on('track-stopped', ({ participant, track, type }) => {
  if (type === 'video' && !participant.local) {
    const videoEl = document.getElementById(`video-${participant.session_id}`);
    if (videoEl) videoEl.remove();
  }
});
```

***

## local-screen-share-started

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires when the local participant's screen share has started. Use this to update your UI to reflect that sharing is active.

<ResponseField name="action" type="string">
  Always `"local-screen-share-started"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "local-screen-share-started",
  "callClientId": "17225364729060.9442072768918943"
}
```

```javascript theme={null}
call.on('local-screen-share-started', () => {
  document.getElementById('share-btn').textContent = 'Stop sharing';
  document.getElementById('share-indicator').classList.remove('hidden');
});
```

***

## local-screen-share-stopped

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires when the local participant's screen share has stopped. Use this to reset any screen-share UI state.

<ResponseField name="action" type="string">
  Always `"local-screen-share-stopped"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "local-screen-share-stopped",
  "callClientId": "17225364729060.9442072768918943"
}
```

```javascript theme={null}
call.on('local-screen-share-stopped', () => {
  document.getElementById('share-btn').textContent = 'Share screen';
  document.getElementById('share-indicator').classList.add('hidden');
});
```

***

## local-screen-share-canceled

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires when the user dismisses the browser's screen picker before ever starting a screen share.

<Note>
  Detection of this user action only works in Chrome. On Safari and Firefox, this action is reported as the user blocking the permission and a [nonfatal `screen-share-error` event](/reference/daily-js/events/error-events#screen-share-error) is sent instead.
</Note>

<ResponseField name="action" type="string">
  Always `"local-screen-share-canceled"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "local-screen-share-canceled",
  "callClientId": "17225364729060.9442072768918943"
}
```

```javascript theme={null}
call.on('local-screen-share-canceled', () => {
  // User closed the picker — reset the button back to its idle state.
  document.getElementById('share-btn').disabled = false;
  document.getElementById('share-btn').textContent = 'Share screen';
});
```

***

## local-audio-level

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires at the frequency specified when [starting the local audio level observer](/reference/daily-js/instance-methods/start-local-audio-level-observer), providing the local participant's current audio level. Use this to drive a volume indicator in your UI.

<ResponseField name="action" type="string">
  Always `"local-audio-level"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="audioLevel" type="number">
  The local participant's current audio level, from `0.0` (silent) to `1.0` (maximum).
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "local-audio-level",
  "callClientId": "17225364729060.9442072768918943",
  "audioLevel": 0.149356
}
```

```javascript theme={null}
call.on('local-audio-level', ({ audioLevel }) => {
  const bar = document.getElementById('local-volume-bar');
  bar.style.width = `${Math.round(audioLevel * 100)}%`;
});
```

***

## remote-participants-audio-level

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires at the frequency specified when [starting the remote participants audio level observer](/reference/daily-js/instance-methods/start-remote-participants-audio-level-observer), providing audio levels for all remote participants. Use this to drive per-participant volume indicators or highlight the active speaker.

<ResponseField name="action" type="string">
  Always `"remote-participants-audio-level"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="participantsAudioLevel" type="object">
  A map of participant `session_id` to audio level (`0.0`–`1.0`). Only remote participants are included.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "remote-participants-audio-level",
  "callClientId": "17225364729060.9442072768918943",
  "participantsAudioLevel": {
    "24ebb6ed-315f-40c3-acb7-a917c4ea6202": 0.1,
    "cc3d2760-442e-4cfa-afc1-4fd387253f72": 0.0223872113856834
  }
}
```

```javascript theme={null}
call.on('remote-participants-audio-level', ({ participantsAudioLevel }) => {
  let activeSpeakerId = null;
  let maxLevel = 0;

  for (const [sessionId, level] of Object.entries(participantsAudioLevel)) {
    const bar = document.getElementById(`volume-${sessionId}`);
    if (bar) bar.style.width = `${Math.round(level * 100)}%`;

    if (level > maxLevel) {
      maxLevel = level;
      activeSpeakerId = sessionId;
    }
  }

  if (activeSpeakerId) {
    highlightActiveSpeaker(activeSpeakerId);
  }
});
```

***

## face-counts-updated

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires when the face count in the local camera view has changed. Use this to identify how many people are visible in frame at a given time.

This event is only emitted while the `face-detection` video processor is active. See [`updateInputSettings()`](/reference/daily-js/instance-methods/update-input-settings#video-processor) for details on enabling it.

<ResponseField name="action" type="string">
  Always `"face-counts-updated"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="faceCounts" type="number">
  The number of faces currently detected in the local camera view.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "face-counts-updated",
  "callClientId": "17225364729060.9442072768918943",
  "faceCounts": 1
}
```

```javascript theme={null}
call.on('face-counts-updated', ({ faceCounts }) => {
  const label = document.getElementById('face-count-label');
  label.textContent = `${faceCounts} ${faceCounts === 1 ? 'person' : 'people'} in frame`;
});
```

***

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyParticipant](/reference/daily-js/types/daily-participant)
    * [DailyTrackState](/reference/daily-js/types/daily-track-state)
  </Card>

  <Card title="Methods" icon="code">
    * [setLocalVideo()](/reference/daily-js/instance-methods/set-local-video)
    * [setLocalAudio()](/reference/daily-js/instance-methods/set-local-audio)
    * [startScreenShare()](/reference/daily-js/instance-methods/start-screen-share)
    * [stopScreenShare()](/reference/daily-js/instance-methods/stop-screen-share)
  </Card>

  <Card title="Events" icon="bolt">
    * [Participant events](/reference/daily-js/events/participant-events)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Audio and Video](/docs/daily-js/guides/audio-video)
    * [Events](/docs/daily-js/concepts/events)
    * [Tracks and Media](/docs/daily-js/concepts/tracks)
  </Card>
</CardGroup>


# Messaging events
Source: https://docs.daily.co/reference/daily-js/events/messaging-events

Events for in-call app messages and shared meeting session state.

***

## app-message

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires when a participant broadcasts a message via [`sendAppMessage()`](/reference/daily-js/instance-methods/send-app-message). Messages are not stored and not delivered to the sender. Participants who join after a message is sent will not receive it.

<ResponseField name="action" type="string">
  Always `"app-message"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="data" type="any">
  The message payload. Must be JSON-serializable.
</ResponseField>

<ResponseField name="fromId" type="string">
  The `session_id` of the participant who sent the message.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "app-message",
  "callClientId": "15943200481050.884650320964697",
  "data": {
    "message": "Your message here!"
  },
  "fromId": "fc30e773-c71f-4eea-a456-4e7e2449a68a"
}
```

```javascript theme={null}
call.on('app-message', ({ data, fromId }) => {
  displayChatMessage(fromId, data.message);
});
```

***

## meeting-session-state-updated

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires when anything in [`meetingSessionState()`](/reference/daily-js/instance-methods/meeting-session-state) changes — including data set via [`setMeetingSessionData()`](/reference/daily-js/instance-methods/set-meeting-session-data) and session metadata like network topology.

<ResponseField name="action" type="string">
  Always `"meeting-session-state-updated"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="meetingSessionState" type="DailyMeetingSessionState">
  The current meeting session state. Contains `data` (the shared data payload, type `unknown`) and `topology` (the current network topology: `'sfu'`, `'peer'`, or `'none'`).
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "meeting-session-state-updated",
  "callClientId": "17225364729060.9442072768918943",
  "meetingSessionState": {
    "data": {},
    "topology": "sfu"
  }
}
```

***

## meeting-session-summary-updated

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires when the meeting session summary changes. Prefer this over the deprecated [`meeting-session-updated`](#meeting-session-updated) event.

<ResponseField name="action" type="string">
  Always `"meeting-session-summary-updated"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="meetingSession" type="DailyMeetingSessionSummary">
  The current meeting session summary. Contains an `id` string.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "meeting-session-summary-updated",
  "callClientId": "17225364729060.9442072768918943",
  "meetingSession": {
    "id": "meeting-session-abc123"
  }
}
```

***

## meeting-session-updated

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

<Warning>
  `meeting-session-updated` is deprecated. Use [`meeting-session-summary-updated`](#meeting-session-summary-updated) instead.
</Warning>

Fires when the meeting session changes — for example, when you've been alone in a room long enough that a new session begins.

<ResponseField name="action" type="string">
  Always `"meeting-session-updated"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="meetingSession" type="DailyMeetingSession">
  Deprecated. The meeting session object. Contains an `id` string.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "meeting-session-updated",
  "callClientId": "17225364729060.9442072768918943",
  "meetingSession": {
    "id": "meeting-session-abc123"
  }
}
```

***

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [sendAppMessage()](/reference/daily-js/instance-methods/send-app-message)
    * [meetingSessionState()](/reference/daily-js/instance-methods/meeting-session-state)
    * [setMeetingSessionData()](/reference/daily-js/instance-methods/set-meeting-session-data)
    * [meetingSessionSummary()](/reference/daily-js/instance-methods/meeting-session-summary)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Custom messages and shared data](/docs/daily-js/guides/custom-messages)
    * [Events](/docs/daily-js/concepts/events)
  </Card>
</CardGroup>


# Network events
Source: https://docs.daily.co/reference/daily-js/events/network-events

Events for network quality changes, connection interruptions, CPU load, and prejoin test results.

These events fire when network quality or connection state changes, when CPU load fluctuates, and when prejoin tests complete.

***

## network-quality-change

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires when the network quality assessment changes.

<Warning>
  As of daily-js 0.77.0, `threshold` and `quality` are deprecated in favor of `networkState` and `networkStateReasons`. Version 0.77.0 also added the `stats` bundle to the event payload.
</Warning>

<ResponseField name="action" type="string">
  Always `"network-quality-change"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="networkState" type="string">
  Current network assessment: `'good'`, `'low'`, or `'bad'`.
</ResponseField>

<ResponseField name="networkStateReasons" type="string[]">
  Reasons contributing to a `'low'` or `'bad'` state. Possible values include `'sendPacketLoss'` and `'recvPacketLoss'`. Omittied if `networkState` is `'good'`.
</ResponseField>

<ResponseField name="stats" type="object">
  The latest network stats bundle. Shape matches the return value of [`getNetworkStats()`](/reference/daily-js/instance-methods/get-network-stats).
</ResponseField>

<ResponseField name="threshold" type="string">
  Deprecated. Use `networkState` instead.
</ResponseField>

<ResponseField name="quality" type="number">
  Deprecated. Use `networkState` instead.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "network-quality-change",
  "callClientId": "17430118453690.12992179309705953",
  "networkState": "bad",
  "networkStateReasons": ["sendPacketLoss", "recvPacketLoss"],
  "stats": {
    "averageNetworkRoundTripTime": 0.01992261904761905,
    "latest": {
      "audioRecvPacketLoss": 0.15053763440860216,
      "videoSendBitsPerSecond": 1589251.349980054,
      "..."
    }
  }
}
```

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

***

## network-connection

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires when a network connection is established or interrupted. Every call uses two connections simultaneously:

* **`signaling`** — carries call setup and management. If interrupted and not reconnected within \~20 seconds, the participant is ejected from the call.
* **`peer-to-peer`** or **`sfu`** — carries audio and video. A call uses one or the other, never both. All calls default to SFU topology, including 1:1 calls. See [P2P vs SFU calls](/docs/guides/architecture-and-monitoring/intro-to-video-arch#the-architecture-of-a-room-p2p-vs-sfu-calls) for details. Both reconnect automatically as long as `signaling` is alive.

<ResponseField name="action" type="string">
  Always `"network-connection"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="type" type="string">
  The connection type: `'signaling'`, `'peer-to-peer'`, or `'sfu'`.
</ResponseField>

<ResponseField name="event" type="string">
  The connection event: `'connected'` or `'interrupted'`.
</ResponseField>

<ResponseField name="session_id" type="string">
  Present for `peer-to-peer` connections. The remote peer's `session_id`.
</ResponseField>

<ResponseField name="sfu_id" type="string">
  Present for `sfu` connections. The SFU server ID — useful for debugging and support reports.
</ResponseField>

```json theme={null}
// Example: signaling connected
{
  "action": "network-connection",
  "type": "signaling",
  "event": "connected",
  "callClientId": "17225364729060.9442072768918943"
}
```

```json theme={null}
// Example: peer-to-peer connected
{
  "action": "network-connection",
  "type": "peer-to-peer",
  "event": "connected",
  "session_id": "123e4567-e89b-12d3-a456-426655440000",
  "callClientId": "17225364729060.9442072768918943"
}
```

```json theme={null}
// Example: sfu interrupted
{
  "action": "network-connection",
  "type": "sfu",
  "event": "interrupted",
  "sfu_id": "server-id",
  "callClientId": "17225364729060.9442072768918943"
}
```

***

## cpu-load-change

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

<Warning>
  The `cpu-load-change` event applies to video calls only.
</Warning>

Fires when the CPU load state changes. When `cpuLoadState` is `'high'`, consider lowering outgoing video quality via [`updateSendSettings()`](/reference/daily-js/instance-methods/update-send-settings), requesting a lower simulcast layer via [`updateReceiveSettings()`](/reference/daily-js/instance-methods/update-receive-settings), or reducing video subscriptions in large calls.

<ResponseField name="action" type="string">
  Always `"cpu-load-change"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="cpuLoadState" type="string">
  Current CPU load assessment: `'low'` or `'high'`.
</ResponseField>

<ResponseField name="cpuLoadStateReason" type="string">
  The reason for the current state: `'none'` (load is low), `'encode'` (video encoding), `'decode'` (video decoding), or `'scheduleDuration'` (Daily code not completing within its scheduled interval).
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "cpu-load-change",
  "cpuLoadState": "low",
  "cpuLoadStateReason": "none",
  "callClientId": "17225364729060.9442072768918943"
}
```

***

## test-completed

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires when a prejoin test completes.

<Note>
  Daily Prebuilt runs [`testCallQuality()`](/reference/daily-js/instance-methods/test-call-quality) automatically in its prejoin UI — you can listen for this event to read the results without calling it manually.
</Note>

<ResponseField name="action" type="string">
  Always `"test-completed"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="test" type="string">
  Which test completed: `'call-quality'`, `'p2p-call-quality'`, `'network-connectivity'`, or `'websocket-connectivity'`.
</ResponseField>

<ResponseField name="results" type="object">
  The test results. Shape matches the return type of the corresponding test method — see [`testCallQuality()`](/reference/daily-js/instance-methods/test-call-quality).
</ResponseField>

```json theme={null}
// Example: call-quality test completed
{
  "action": "test-completed",
  "test": "call-quality",
  "results": {
    "result": "good",
    "data": {
      "maxRoundTripTime": 0.247,
      "avgRoundTripTime": 0.13130370781129388,
      "avgSendPacketLoss": 0.0036800000000000014,
      "avgAvailableOutgoingBitrate": 2060985,
      "avgSendBitsPerSecond": 1778201
    },
    "id": "47dc6b22-2909-46f3-8d0f-ec1f3807046c",
    "secondsElapsed": 22
  },
  "callClientId": "17225364729060.9442072768918943"
}
```

***

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [getNetworkStats()](/reference/daily-js/instance-methods/get-network-stats)
    * [updateSendSettings()](/reference/daily-js/instance-methods/update-send-settings)
    * [updateReceiveSettings()](/reference/daily-js/instance-methods/update-receive-settings)
    * [testCallQuality()](/reference/daily-js/instance-methods/test-call-quality)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Events](/docs/daily-js/concepts/events)
    * [Network quality](/docs/daily-js/guides/network-quality)
    * [Logging and metrics](/docs/guides/architecture-and-monitoring/logging-and-metrics)
  </Card>
</CardGroup>


# Participant events
Source: https://docs.daily.co/reference/daily-js/events/participant-events

Events for participant state changes — joining, leaving, updates, waiting room, and active speaker.

These events fire when participants join or leave the call, when participant state changes, and when waiting room or active speaker status updates.

***

## participant-joined

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires when a new remote participant joins the call.

<Note>
  This event may fire for a remote participant before the local [`joined-meeting`](/reference/daily-js/events/lifecycle-events#joined-meeting) event fires.
</Note>

<ResponseField name="action" type="string">
  Always `"participant-joined"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="participant" type="DailyParticipant">
  The participant who joined. See [`DailyParticipant`](/reference/daily-js/types/daily-participant) for the full shape.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "participant-joined",
  "callClientId": "17225364729060.9442072768918943",
  "participant": {
    "session_id": "6f0ce557-e6e4-409f-bae9-fe5663ba4ae7",
    "user_name": "A. User Name",
    "user_id": "user_123",
    "joined_at": "2023-06-01T18:37:59.946Z",
    "local": false,
    "owner": false,
    "networkQualityState": "unknown",
    "permissions": {
      "hasPresence": true,
      "canSend": true,
      "canReceive": { "base": true },
      "canAdmin": false
    },
    "will_eject_at": "1970-01-01T00:00:00.000Z",
    "tracks": {
      "audio": { "subscribed": false, "state": "sendable" },
      "video": { "subscribed": false, "state": "sendable" },
      "screenVideo": { "subscribed": false, "state": "off", "off": { "byUser": true } },
      "screenAudio": { "subscribed": false, "state": "off", "off": { "byUser": true } }
    },
    "record": false
  }
}
```

```javascript theme={null}
call.on('participant-joined', ({ participant }) => {
  console.log(`${participant.user_name || participant.session_id} joined`);
  addParticipantTile(participant);
});
```

***

## participant-updated

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires when a local or remote participant's state changes — for example when their audio or video track state changes, their permissions are updated, or their network quality changes.

<ResponseField name="action" type="string">
  Always `"participant-updated"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="participant" type="DailyParticipant">
  The updated participant. See [`DailyParticipant`](/reference/daily-js/types/daily-participant) for the full shape.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "participant-updated",
  "callClientId": "17225364729060.9442072768918943",
  "participant": {
    "session_id": "6f0ce557-e6e4-409f-bae9-fe5663ba4ae7",
    "..."
  }
}
```

```javascript theme={null}
call.on('participant-updated', ({ participant }) => {
  updateParticipantTile(participant);
});
```

***

## participant-left

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires when a remote participant leaves the call. The `participant` object reflects the participant's state just before they disconnected.

<Note>
  A participant [losing presence](/reference/daily-js/instance-methods/update-participant#param-update-permissions) is treated as leaving and triggers this event. In that case, the optional `reason` field will be `'hidden'`.
</Note>

<ResponseField name="action" type="string">
  Always `"participant-left"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="participant" type="DailyParticipant">
  The participant who left, captured just before they disconnected. See [`DailyParticipant`](/reference/daily-js/types/daily-participant) for the full shape.
</ResponseField>

<ResponseField name="reason" type="string">
  Optional. Present when the participant became hidden rather than truly leaving. Value is `'hidden'`.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "participant-left",
  "callClientId": "17225364729060.9442072768918943",
  "participant": {
    "session_id": "6f0ce557-e6e4-409f-bae9-fe5663ba4ae7",
    "..."
  },
  "reason": "hidden"
}
```

```javascript theme={null}
call.on('participant-left', ({ participant }) => {
  removeParticipantTile(participant.session_id);
});
```

***

## participant-counts-updated

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires when the count of present or hidden participants in the call changes. See [`participantCounts()`](/reference/daily-js/instance-methods/participant-counts) for details.

<ResponseField name="action" type="string">
  Always `"participant-counts-updated"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="participantCounts" type="object">
  Contains `present` (number of visible participants) and `hidden` (number of hidden participants).
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "participant-counts-updated",
  "callClientId": "17225364729060.9442072768918943",
  "participantCounts": {
    "present": 4,
    "hidden": 1
  }
}
```

```javascript theme={null}
call.on('participant-counts-updated', ({ participantCounts }) => {
  document.getElementById('participant-count').textContent = participantCounts.present;
});
```

***

## waiting-participant-added

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires when a participant enters the waiting room and is added to the [`waitingParticipants()`](/reference/daily-js/instance-methods/waiting-participants) set.

<ResponseField name="action" type="string">
  Always `"waiting-participant-added"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="participant" type="object">
  Contains `id`, `name`, and `awaitingAccess` (with a `level` field indicating the requested access level).
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "waiting-participant-added",
  "callClientId": "17225364729060.9442072768918943",
  "participant": {
    "id": "a64d30f4-5216-4481-a2ef-515d6dd7dfc6",
    "name": "Jane Smith",
    "awaitingAccess": { "level": "full" }
  }
}
```

***

## waiting-participant-updated

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires when a participant in the waiting room updates their details — currently this only occurs when their `name` changes.

<ResponseField name="action" type="string">
  Always `"waiting-participant-updated"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="participant" type="object">
  Contains `id`, `name`, and `awaitingAccess`.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "waiting-participant-updated",
  "callClientId": "17225364729060.9442072768918943",
  "participant": {
    "id": "a64d30f4-5216-4481-a2ef-515d6dd7dfc6",
    "name": "Jane Smith (updated)",
    "awaitingAccess": { "level": "full" }
  }
}
```

***

## waiting-participant-removed

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires when a participant is removed from the [`waitingParticipants()`](/reference/daily-js/instance-methods/waiting-participants) set — either they were granted access, denied, or left on their own.

<ResponseField name="action" type="string">
  Always `"waiting-participant-removed"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="participant" type="object">
  Contains `id`, `name`, and `awaitingAccess`.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "waiting-participant-removed",
  "callClientId": "17225364729060.9442072768918943",
  "participant": {
    "id": "a64d30f4-5216-4481-a2ef-515d6dd7dfc6",
    "name": "Jane Smith",
    "awaitingAccess": { "level": "full" }
  }
}
```

***

## active-speaker-change

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires when the active speaker — the participant whose audio input is currently loudest — changes. Use this to highlight the speaking participant in a custom UI.

<ResponseField name="action" type="string">
  Always `"active-speaker-change"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="activeSpeaker" type="object">
  Contains `peerId`, which is the `session_id` of the participant currently speaking.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "active-speaker-change",
  "callClientId": "17225364729060.9442072768918943",
  "activeSpeaker": {
    "peerId": "049ebba2-523b-4e6c-9a9f-1f8bb956670d"
  }
}
```

```javascript theme={null}
call.on('active-speaker-change', ({ activeSpeaker }) => {
  highlightSpeaker(activeSpeaker.peerId);
});
```

***

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyParticipant](/reference/daily-js/types/daily-participant)
  </Card>

  <Card title="Methods" icon="code">
    * [participants()](/reference/daily-js/instance-methods/participants)
    * [participantCounts()](/reference/daily-js/instance-methods/participant-counts)
    * [updateParticipant()](/reference/daily-js/instance-methods/update-participant)
    * [waitingParticipants()](/reference/daily-js/instance-methods/waiting-participants)
  </Card>

  <Card title="Events" icon="bolt">
    * [Lifecycle events](/reference/daily-js/events/lifecycle-events)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Participants](/docs/daily-js/concepts/participants)
    * [Waiting room](/docs/daily-js/guides/waiting-room)
  </Card>
</CardGroup>


# Recording events
Source: https://docs.daily.co/reference/daily-js/events/recording-events

Events for recording lifecycle — start, stop, error, upload completion, and raw data delivery.

<Badge>Paid plans only</Badge>

***

## recording-started

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires for all participants when a recording starts.

<ResponseField name="action" type="string">
  Always `"recording-started"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="instanceId" type="string">
  Unique ID for this recording instance.
</ResponseField>

<ResponseField name="type" type="string">
  The recording type: `'local'`, `'cloud'`, `'cloud-audio-only'`, or `'raw-tracks'`.
</ResponseField>

<ResponseField name="local" type="boolean">
  Present only for `local` and `cloud` recordings, and only for the participant who started the recording.
</ResponseField>

<ResponseField name="recordingId" type="string">
  Present only for `cloud` recordings. The ID of the resulting recording.
</ResponseField>

<ResponseField name="startedBy" type="string">
  Present for `cloud`, `cloud-audio-only`, and `raw-tracks` recordings. The `session_id` of the participant who started the recording.
</ResponseField>

<ResponseField name="layout" type="DailyStreamingLayoutConfig">
  Present only for `cloud` recordings. The layout configuration. See [`DailyStreamingLayoutConfig`](/reference/daily-js/types/daily-streaming-layout-config) for the full shape.
</ResponseField>

<Note>
  For `local` recordings, the participant who started the recording may receive additional fields, but other participants receive only `action`, `instanceId`, and `callClientId`.
</Note>

```json theme={null}
// Example event object (cloud recording)
{
  "action": "recording-started",
  "instanceId": "00000000-0000-4000-8000-000000000000",
  "callClientId": "16149871051110.5607513282111183",
  "local": true,
  "recordingId": "cab2be92-1551-42d8-bcdf-11fe7bd81923",
  "startedBy": "1c6d5474-b133-4993-c943-f1ffdbb38cad",
  "type": "cloud"
}
```

***

## recording-stopped

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires for all participants when a recording stops.

<ResponseField name="action" type="string">
  Always `"recording-stopped"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="instanceId" type="string">
  ID of the recording instance that stopped.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "recording-stopped",
  "instanceId": "00000000-0000-4000-8000-000000000000",
  "callClientId": "16149871715780.8113693509425934"
}
```

***

## recording-error

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires when a recording error occurs.

<ResponseField name="action" type="string">
  Always `"recording-error"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="instanceId" type="string">
  ID of the recording instance that errored.
</ResponseField>

<ResponseField name="errorMsg" type="string">
  A human-readable description of the error.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "recording-error",
  "instanceId": "00000000-0000-4000-8000-000000000000",
  "errorMsg": "recording failed",
  "callClientId": "16149871715780.8113693509425934"
}
```

***

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyStreamingLayoutConfig](/reference/daily-js/types/daily-streaming-layout-config)
  </Card>

  <Card title="Methods" icon="code">
    * [startRecording()](/reference/daily-js/instance-methods/start-recording)
    * [stopRecording()](/reference/daily-js/instance-methods/stop-recording)
    * [updateRecording()](/reference/daily-js/instance-methods/update-recording)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Events](/docs/daily-js/concepts/events)
    * [Recording overview](/docs/guides/features/recording)
    * [daily-js: Recording](/docs/daily-js/features/recording)
  </Card>
</CardGroup>


# Settings & device events
Source: https://docs.daily.co/reference/daily-js/events/settings-events

Events for camera startup, device availability and selection, and media send/receive settings.

These events fire when the camera starts or encounters an error, when input or output devices change, and when media send/receive settings are updated.

***

## started-camera

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires when the local participant's camera starts. This happens as part of the standard join flow, or when explicitly calling [`startCamera()`](/reference/daily-js/instance-methods/start-camera).

```json theme={null}
// Example event object
{
  "action": "started-camera",
  "callClientId": "17225364729060.9442072768918943"
}
```

***

## camera-error

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires when a camera or microphone error occurs. The `error.type` field categorizes the problem; `error.msg` is a human-readable description.

<Tip>
  For more on handling device errors, see the [device permissions guide](/docs/daily-js/guides/device-permissions).
</Tip>

<ResponseField name="action" type="string">
  Always `"camera-error"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="error" type="object">
  Always contains `type` and `msg`. Some types include additional fields.

  <Expandable title="error.type values">
    <ResponseField name="&#x22;not-found&#x22;" type="DailyCamDeviceNotFoundError">
      Camera and/or microphone not detected.

      * `missingMedia` — `Array<'video' | 'audio'>` — which devices were not found

      ```json theme={null}
      { "type": "not-found", "msg": "No device found.", "missingMedia": ["video", "audio"] }
      ```
    </ResponseField>

    <ResponseField name="&#x22;permissions&#x22;" type="DailyCamPermissionsError">
      User or browser blocked camera/microphone access.

      * `blockedBy` — `'user'` or `'browser'`
      * `blockedMedia` — `Array<'video' | 'audio'>` — which devices were blocked

      ```json theme={null}
      { "type": "permissions", "msg": "Permissions denied to the browser.", "blockedBy": "browser", "blockedMedia": ["video", "audio"] }
      ```
    </ResponseField>

    <ResponseField name="&#x22;cam-in-use&#x22; | &#x22;mic-in-use&#x22; | &#x22;cam-mic-in-use&#x22;" type="DailyCamInUseError">
      Camera and/or microphone in use by another application. Windows only.

      ```json theme={null}
      { "type": "cam-in-use", "msg": "Camera in use by another application." }
      ```
    </ResponseField>

    <ResponseField name="&#x22;constraints&#x22;" type="DailyCamConstraintsError">
      `getUserMedia()` was called with invalid or empty constraints.

      * `reason` — `'invalid'` or `'none-specified'`
      * `failedMedia` — `Array<'video' | 'audio'>` — which devices were affected

      ```json theme={null}
      { "type": "constraints", "msg": "Invalid constraints provided.", "reason": "invalid", "failedMedia": ["video"] }
      ```
    </ResponseField>

    <ResponseField name="&#x22;undefined-mediadevices&#x22;" type="DailyCamTypeError">
      `window.navigator.mediaDevices` is undefined. Most commonly caused by accessing the call over `http` instead of `https`.

      ```json theme={null}
      { "type": "undefined-mediadevices", "msg": "navigator.mediaDevices is undefined. Check url for https." }
      ```
    </ResponseField>

    <ResponseField name="&#x22;unknown&#x22;" type="DailyCamUnknownError">
      Uncategorized error. The original browser error message is in `msg`.

      ```json theme={null}
      { "type": "unknown", "msg": "Unknown device error (NotReadableError)" }
      ```
    </ResponseField>
  </Expandable>
</ResponseField>

<ResponseField name="errorMsg" type="string | object">
  Retained for backwards compatibility.
</ResponseField>

```javascript theme={null}
call.on('camera-error', ({ error }) => {
  if (error?.type === 'permissions') {
    showPermissionsPrompt(error.blockedBy);
  } else if (error?.type === 'not-found') {
    showNoDeviceMessage(error.missingMedia);
  } else {
    showGenericDeviceError(error?.msg);
  }
});
```

***

## available-devices-updated

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires when a device becomes available or is removed — for example when a headset is connected or disconnected. See [`enumerateDevices()`](/reference/daily-js/instance-methods/enumerate-devices) for details on the device properties returned.

<ResponseField name="action" type="string">
  Always `"available-devices-updated"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="availableDevices" type="MediaDeviceInfo[]">
  An array of [`MediaDeviceInfo`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDeviceInfo) objects representing all devices currently available to the browser.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "available-devices-updated",
  "callClientId": "17225364729060.9442072768918943",
  "availableDevices": [
    { "deviceId": "abc123", "groupId": "", "kind": "videoinput", "label": "Front Camera" },
    { "deviceId": "def456", "groupId": "", "kind": "audioinput", "label": "Built-in Microphone" },
    { "deviceId": "ghi789", "groupId": "", "kind": "audiooutput", "label": "Built-in Speakers" }
  ]
}
```

***

## selected-devices-updated

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires when the participant selects a new input or output device. Unlike [`available-devices-updated`](#available-devices-updated), which fires whenever the system device list changes, this event only fires when the participant has actively chosen a different device.

<ResponseField name="action" type="string">
  Always `"selected-devices-updated"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="devices" type="object">
  Contains `camera`, `mic`, and `speaker` keys with [`MediaDeviceInfo`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDeviceInfo)-shaped objects for the newly selected devices.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "selected-devices-updated",
  "callClientId": "17225364729060.9442072768918943",
  "devices": {
    "camera": {},
    "mic": {},
    "speaker": { "deviceId": "deviceId", "kind": "audiooutput", "label": "label", "groupId": "groupId" }
  }
}
```

***

## input-settings-updated

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires every time the input settings object changes. Includes all current input settings, even those that did not change. See [`updateInputSettings()`](/reference/daily-js/instance-methods/update-input-settings) for details on the settings shape.

<ResponseField name="action" type="string">
  Always `"input-settings-updated"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="inputSettings" type="object">
  The full current input settings object, including `video` and `audio` keys with their `settings` and `processor` sub-objects.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "input-settings-updated",
  "callClientId": "17225364729060.9442072768918943",
  "inputSettings": {
    "video": {
      "settings": { "frameRate": 15 },
      "processor": { "type": "background-blur", "config": { "strength": 0.2 } }
    },
    "audio": {
      "settings": { "deviceId": "default", "echoCancellation": false },
      "processor": { "type": "noise-cancellation" }
    }
  }
}
```

***

## send-settings-updated

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires when video or custom track send settings change. This fires once upon [`join()`](/reference/daily-js/instance-methods/join) and again each time [`updateSendSettings()`](/reference/daily-js/instance-methods/update-send-settings) is called.

<ResponseField name="action" type="string">
  Always `"send-settings-updated"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="sendSettings" type="object">
  The full current send settings object. Contains per-track keys (`video`, `screenVideo`, `customVideoDefaults`) each with `maxQuality` and `encodings` sub-objects.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "send-settings-updated",
  "callClientId": "17225364729060.9442072768918943",
  "sendSettings": {
    "video": {
      "maxQuality": "high",
      "encodings": {
        "low": { "maxBitrate": 90000, "scaleResolutionDownBy": 4, "maxFramerate": 15 },
        "medium": { "maxBitrate": 200000, "scaleResolutionDownBy": 2, "maxFramerate": 15 },
        "high": { "maxBitrate": 680000, "scaleResolutionDownBy": 1, "maxFramerate": 30 }
      }
    },
    "screenVideo": {
      "maxQuality": "low",
      "encodings": {
        "low": { "maxBitrate": 2000000, "scaleResolutionDownBy": 1, "maxFramerate": 30 }
      }
    }
  }
}
```

***

## receive-settings-updated

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires when media receive settings change. This fires once upon [`join()`](/reference/daily-js/instance-methods/join) with the initial `base` settings, and again each time [`updateReceiveSettings()`](/reference/daily-js/instance-methods/update-receive-settings) is called.

<ResponseField name="action" type="string">
  Always `"receive-settings-updated"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="receiveSettings" type="DailyReceiveSettings">
  A map of participant ID or `'base'` to receive settings. The `'base'` key holds the default settings applied to all participants. Additional keys are participant `session_id` values with per-participant overrides.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "receive-settings-updated",
  "callClientId": "17225364729060.9442072768918943",
  "receiveSettings": {
    "base": { "video": { "layer": 2 }, "screenVideo": { "layer": 0 } },
    "f2190c86-169a-464f-c0a4-ee1d5c00af58": { "video": { "layer": 0 } }
  }
}
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [startCamera()](/reference/daily-js/instance-methods/start-camera)
    * [enumerateDevices()](/reference/daily-js/instance-methods/enumerate-devices)
    * [updateInputSettings()](/reference/daily-js/instance-methods/update-input-settings)
    * [updateSendSettings()](/reference/daily-js/instance-methods/update-send-settings)
    * [updateReceiveSettings()](/reference/daily-js/instance-methods/update-receive-settings)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Audio and video](/docs/daily-js/guides/audio-video)
    * [Device permissions](/docs/daily-js/guides/device-permissions)
  </Card>
</CardGroup>


# Telephony events (SIP/PSTN)
Source: https://docs.daily.co/reference/daily-js/events/telephony-events

Events for SIP and PSTN dial-in and dial-out session lifecycle.

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

These events fire during SIP/PSTN telephony sessions started with [`startDialOut()`](/reference/daily-js/instance-methods/start-dial-out) or triggered by inbound SIP dial-in. See the [dial-in/dial-out guide](/docs/guides/features/dial-in-dial-out) for setup.

***

## Dial-in Events

### dialin-ready

Fires when the SIP worker is ready to receive a call. Only emitted when the room has [SIP dial-in](/docs/guides/features/dial-in-dial-out/sip) configured.

<ResponseField name="action" type="string">
  Always `"dialin-ready"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="sipEndpoint" type="string">
  The SIP endpoint URI ready to receive calls (e.g. `"sip:room-name@sip.daily.co"`).
</ResponseField>

<ResponseField name="provider" type="string">
  The SIP/PSTN provider.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "dialin-ready",
  "callClientId": "17225364729060.9442072768918943",
  "sipEndpoint": "sip:room-name@sip.daily.co",
  "provider": "daily"
}
```

***

### dialin-connected

Fires when a SIP or PSTN caller has connected to the Daily room and both endpoints are negotiating media.

<Note>
  `dialin-connected` does not mean media has started flowing — it means the connection request was received and media negotiation is underway.
</Note>

<ResponseField name="action" type="string">
  Always `"dialin-connected"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="sessionId" type="string">
  Session ID of the dial-in participant.
</ResponseField>

<ResponseField name="sipCallId" type="string">
  The SIP Call-ID header value.
</ResponseField>

<ResponseField name="provider" type="string">
  The SIP/PSTN provider.
</ResponseField>

<ResponseField name="userId" type="string">
  Optional user ID associated with the session.
</ResponseField>

<ResponseField name="sipFrom" type="string">
  Optional SIP `From` address of the caller.
</ResponseField>

<ResponseField name="sipEndpoint" type="string">
  Optional SIP endpoint that received the call.
</ResponseField>

<ResponseField name="sipHeaders" type="object">
  Optional SIP headers from the incoming request.
</ResponseField>

<ResponseField name="actionTraceId" type="string">
  Optional trace ID for debugging.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "dialin-connected",
  "callClientId": "17225364729060.9442072768918943",
  "sessionId": "a64d30f4-5216-4481-a2ef-515d6dd7dfc6",
  "userId": "user_123",
  "sipFrom": "sip:caller@example.com",
  "sipEndpoint": "sip:room-name@sip.daily.co",
  "sipCallId": "abc123@sip.daily.co",
  "provider": "daily"
}
```

***

### dialin-stopped

Fires when a SIP or PSTN session ends — either the remote end disconnected or the call was terminated.

<ResponseField name="action" type="string">
  Always `"dialin-stopped"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="sessionId" type="string">
  Session ID of the participant whose session ended.
</ResponseField>

<ResponseField name="provider" type="string">
  The SIP/PSTN provider.
</ResponseField>

<ResponseField name="userId" type="string">
  Optional user ID associated with the session.
</ResponseField>

<ResponseField name="sipFrom" type="string">
  Optional SIP `From` address of the caller.
</ResponseField>

<ResponseField name="sipEndpoint" type="string">
  Optional SIP endpoint that received the call.
</ResponseField>

<ResponseField name="sipHeaders" type="object">
  Optional SIP headers.
</ResponseField>

<ResponseField name="sipCallId" type="string">
  Optional SIP Call-ID.
</ResponseField>

<ResponseField name="actionTraceId" type="string">
  Optional trace ID for debugging.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "dialin-stopped",
  "callClientId": "17225364729060.9442072768918943",
  "sessionId": "a64d30f4-5216-4481-a2ef-515d6dd7dfc6",
  "sipCallId": "abc123@sip.daily.co",
  "provider": "daily"
}
```

***

### dialin-error

Fires when a fatal error occurs in the dial-in pipeline — for example, an SDP negotiation failure.

<ResponseField name="action" type="string">
  Always `"dialin-error"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="errorMsg" type="string">
  Human-readable error description.
</ResponseField>

<ResponseField name="sessionId" type="string">
  Session ID of the affected participant.
</ResponseField>

<ResponseField name="provider" type="string">
  The SIP/PSTN provider.
</ResponseField>

<ResponseField name="type" type="string">
  Optional error classification. Currently only `'start-failed'`.
</ResponseField>

<ResponseField name="userId" type="string">
  Optional user ID.
</ResponseField>

<ResponseField name="sipCallId" type="string">
  Optional SIP Call-ID.
</ResponseField>

<ResponseField name="details" type="object">
  Optional details object. May contain `sipEndpoint`.
</ResponseField>

<ResponseField name="actionTraceId" type="string">
  Optional trace ID for debugging.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "dialin-error",
  "callClientId": "17225364729060.9442072768918943",
  "errorMsg": "SDP negotiation failed",
  "sessionId": "a64d30f4-5216-4481-a2ef-515d6dd7dfc6",
  "type": "start-failed",
  "provider": "daily"
}
```

***

### dialin-warning

Fires for non-fatal dial-in errors, such as when a requested codec is unavailable and a fallback is applied.

<ResponseField name="action" type="string">
  Always `"dialin-warning"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="errorMsg" type="string">
  Human-readable description of the warning.
</ResponseField>

<ResponseField name="sessionId" type="string">
  Session ID of the affected participant.
</ResponseField>

<ResponseField name="provider" type="string">
  The SIP/PSTN provider.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "dialin-warning",
  "callClientId": "17225364729060.9442072768918943",
  "errorMsg": "Requested codec unavailable, using fallback",
  "sessionId": "a64d30f4-5216-4481-a2ef-515d6dd7dfc6",
  "provider": "daily"
}
```

***

## Dial-out Events

### dialout-connected

Fires when the outbound call is established and ringing at the remote end.

<ResponseField name="action" type="string">
  Always `"dialout-connected"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="sessionId" type="string">
  Session ID of the dial-out participant.
</ResponseField>

<ResponseField name="sipCallId" type="string">
  The SIP Call-ID header value.
</ResponseField>

<ResponseField name="provider" type="string">
  The SIP/PSTN provider.
</ResponseField>

<ResponseField name="destination" type="string">
  Optional. Phone number in E.164 format or SIP URI of the remote party.
</ResponseField>

<ResponseField name="origin" type="string">
  Optional. Originating address — phone number in E.164 or SIP URI.
</ResponseField>

<ResponseField name="callerId" type="string">
  Optional. Caller ID presented to the remote party.
</ResponseField>

<ResponseField name="userId" type="string">
  Optional user ID associated with the session.
</ResponseField>

<ResponseField name="actionTraceId" type="string">
  Optional trace ID for debugging.
</ResponseField>

<CodeGroup>
  ```json Phone (E.164) theme={null}
  {
    "action": "dialout-connected",
    "callClientId": "17225364729060.9442072768918943",
    "sessionId": "7d208e2a-520b-4a8d-a2c9-3a36dfa0d342",
    "destination": "+12098888888",
    "origin": "+13977888822",
    "callerId": "+13977888822",
    "sipCallId": "abc123@sip.daily.co",
    "provider": "daily"
  }
  ```

  ```json SIP URI theme={null}
  {
    "action": "dialout-connected",
    "callClientId": "17225364729060.9442072768918943",
    "sessionId": "7d208e2a-520b-4a8d-a2c9-3a36dfa0d342",
    "destination": "sip:callee@example.com",
    "origin": "sip:myroom.0@daily-2358023-app.dapp.signalwire.com",
    "sipCallId": "abc123@sip.daily.co",
    "provider": "daily"
  }
  ```
</CodeGroup>

***

### dialout-answered

Fires when the remote party answers the outbound call.

<ResponseField name="action" type="string">
  Always `"dialout-answered"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="sessionId" type="string">
  Session ID of the dial-out participant.
</ResponseField>

<ResponseField name="sipCallId" type="string">
  The SIP Call-ID header value.
</ResponseField>

<ResponseField name="provider" type="string">
  The SIP/PSTN provider.
</ResponseField>

<ResponseField name="destination" type="string">
  Optional. Phone number in E.164 format or SIP URI of the remote party.
</ResponseField>

<ResponseField name="origin" type="string">
  Optional. Originating address.
</ResponseField>

<ResponseField name="callerId" type="string">
  Optional. Caller ID presented to the remote party.
</ResponseField>

<CodeGroup>
  ```json Phone (E.164) theme={null}
  {
    "action": "dialout-answered",
    "callClientId": "17225364729060.9442072768918943",
    "sessionId": "7d208e2a-520b-4a8d-a2c9-3a36dfa0d342",
    "destination": "+12098888888",
    "origin": "+13977888822",
    "callerId": "+13977888822",
    "sipCallId": "abc123@sip.daily.co",
    "provider": "daily"
  }
  ```

  ```json SIP URI theme={null}
  {
    "action": "dialout-answered",
    "callClientId": "17225364729060.9442072768918943",
    "sessionId": "7d208e2a-520b-4a8d-a2c9-3a36dfa0d342",
    "destination": "sip:callee@example.com",
    "origin": "sip:myroom.0@daily-2358023-app.dapp.signalwire.com",
    "sipCallId": "abc123@sip.daily.co",
    "provider": "daily"
  }
  ```
</CodeGroup>

***

### dialout-stopped

Fires when the dial-out session ends — either the remote party hung up or [`stopDialOut()`](/reference/daily-js/instance-methods/stop-dial-out) was called.

<ResponseField name="action" type="string">
  Always `"dialout-stopped"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="sessionId" type="string">
  Session ID of the dial-out participant.
</ResponseField>

<ResponseField name="provider" type="string">
  The SIP/PSTN provider.
</ResponseField>

<ResponseField name="destination" type="string">
  Optional. Destination phone number or SIP URI.
</ResponseField>

<ResponseField name="origin" type="string">
  Optional. Originating address.
</ResponseField>

<ResponseField name="sipCallId" type="string">
  Optional SIP Call-ID.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "dialout-stopped",
  "callClientId": "17225364729060.9442072768918943",
  "sessionId": "7d208e2a-520b-4a8d-a2c9-3a36dfa0d342",
  "destination": "+12098888888",
  "origin": "+13977888822",
  "provider": "daily"
}
```

***

### dialout-error

Fires when a fatal error occurs in the dial-out pipeline.

<ResponseField name="action" type="string">
  Always `"dialout-error"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="errorMsg" type="string">
  Human-readable error description.
</ResponseField>

<ResponseField name="provider" type="string">
  The SIP/PSTN provider.
</ResponseField>

<ResponseField name="sessionId" type="string">
  Optional session ID.
</ResponseField>

<ResponseField name="userId" type="string">
  Optional user ID.
</ResponseField>

<ResponseField name="sipCallId" type="string">
  Optional SIP Call-ID.
</ResponseField>

<ResponseField name="details" type="object">
  Optional details object. May contain `destination`.
</ResponseField>

<ResponseField name="actionTraceId" type="string">
  Optional trace ID for debugging.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "dialout-error",
  "callClientId": "17225364729060.9442072768918943",
  "errorMsg": "DialOut failed with error: process error, Channel closed",
  "sessionId": "22b32b65-cd65-42b2-9665-db05ef3e1255",
  "details": { "destination": "+12098888888" },
  "provider": "daily"
}
```

***

### dialout-warning

Fires for non-fatal dial-out errors, such as when a requested codec is unavailable and a fallback is applied.

<ResponseField name="action" type="string">
  Always `"dialout-warning"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="errorMsg" type="string">
  Human-readable description of the warning.
</ResponseField>

<ResponseField name="provider" type="string">
  The SIP/PSTN provider.
</ResponseField>

<ResponseField name="sessionId" type="string">
  Optional session ID of the affected participant.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "dialout-warning",
  "callClientId": "17225364729060.9442072768918943",
  "errorMsg": "Requested codec unavailable, using fallback",
  "sessionId": "7d208e2a-520b-4a8d-a2c9-3a36dfa0d342",
  "provider": "daily"
}
```

***

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [startDialOut()](/reference/daily-js/instance-methods/start-dial-out)
    * [stopDialOut()](/reference/daily-js/instance-methods/stop-dial-out)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Events](/docs/daily-js/concepts/events)
    * [Dial-in/Dial-out Overview](/docs/guides/features/dial-in-dial-out)
    * [daily-js: Dial-in and dial-out](/docs/daily-js/features/dialin-dialout)
  </Card>
</CardGroup>


# Transcription events
Source: https://docs.daily.co/reference/daily-js/events/transcription-events

Events for transcription lifecycle — start, stop, new transcription messages, and errors.

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

***

## transcription-started

Fires for all participants when transcription starts.

<ResponseField name="action" type="string">
  Always `"transcription-started"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="instanceId" type="string">
  Unique ID for this transcription instance.
</ResponseField>

<ResponseField name="transcriptId" type="string">
  Optional ID of the resulting transcript.
</ResponseField>

<ResponseField name="language" type="string">
  Language code passed to Deepgram (e.g. `'en'`).
</ResponseField>

<ResponseField name="model" type="string">
  The Deepgram model in use (e.g. `'general'`).
</ResponseField>

<ResponseField name="tier" type="string">
  Optional Deepgram tier.
</ResponseField>

<ResponseField name="profanity_filter" type="boolean">
  Optional. Whether profanity filtering is enabled.
</ResponseField>

<ResponseField name="redact" type="Array | boolean">
  Optional redaction configuration.
</ResponseField>

<ResponseField name="endpointing" type="number | boolean">
  Optional endpointing setting.
</ResponseField>

<ResponseField name="punctuate" type="boolean">
  Optional. Whether punctuation is added to transcriptions.
</ResponseField>

<ResponseField name="extra" type="object">
  Optional extra Deepgram parameters.
</ResponseField>

<ResponseField name="includeRawResponse" type="boolean">
  Optional. When `true`, `transcription-message` events include a `rawResponse` field with the raw Deepgram response.
</ResponseField>

<ResponseField name="startedBy" type="string">
  The `session_id` of the participant who started transcription.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "transcription-started",
  "callClientId": "16323425945550.36134184140203573",
  "instanceId": "a1f2f6b7-b1ac-4202-85e5-d446cb6c3d3f",
  "transcriptId": "transcript-abc123",
  "language": "en",
  "model": "general",
  "startedBy": "049ebba2-523b-4e6c-9a9f-1f8bb956670d"
}
```

***

## transcription-stopped

Fires for all participants when transcription stops.

<ResponseField name="action" type="string">
  Always `"transcription-stopped"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="instanceId" type="string">
  ID of the transcription instance that stopped.
</ResponseField>

<ResponseField name="updatedBy" type="string">
  The `session_id` of the participant who stopped transcription.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "transcription-stopped",
  "callClientId": "16323425945550.36134184140203573",
  "instanceId": "a1f2f6b7-b1ac-4202-85e5-d446cb6c3d3f",
  "updatedBy": "049ebba2-523b-4e6c-9a9f-1f8bb956670d"
}
```

***

## transcription-message

Fires for all participants when a new transcription snippet is available.

<ResponseField name="action" type="string">
  Always `"transcription-message"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="instanceId" type="string">
  Optional ID of the transcription instance.
</ResponseField>

<ResponseField name="participantId" type="string">
  The `session_id` of the participant who spoke.
</ResponseField>

<ResponseField name="trackType" type="string">
  Optional. Which track was transcribed: `'cam-audio'`, `'screen-audio'`, `'rmpAudio'`, or a custom track name.
</ResponseField>

<ResponseField name="text" type="string">
  The transcribed text.
</ResponseField>

<ResponseField name="timestamp" type="Date">
  When the transcription was produced.
</ResponseField>

<ResponseField name="rawResponse" type="object">
  Raw response from Deepgram. Only present when `includeRawResponse` was `true` when transcription started.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "transcription-message",
  "callClientId": "17026592880190.6408519754664044",
  "instanceId": "a1f2f6b7-b1ac-4202-85e5-d446cb6c3d3f",
  "participantId": "9c50d278-abb4-433e-a8b0-3964d363416a",
  "trackType": "cam-audio",
  "text": "Good morning.",
  "timestamp": "2023-12-15T16:55:02.000Z"
}
```

```javascript theme={null}
call.on('transcription-message', ({ participantId, text, timestamp }) => {
  appendTranscriptLine(participantId, text, timestamp);
});
```

***

## transcription-error

Fires for all participants when a transcription error occurs.

<ResponseField name="action" type="string">
  Always `"transcription-error"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="instanceId" type="string">
  ID of the transcription instance that errored.
</ResponseField>

<ResponseField name="errorMsg" type="string">
  Optional human-readable error description.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "transcription-error",
  "callClientId": "16323425945550.36134184140203573",
  "instanceId": "a1f2f6b7-b1ac-4202-85e5-d446cb6c3d3f",
  "errorMsg": "Transcription service unavailable"
}
```

***

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [startTranscription()](/reference/daily-js/instance-methods/start-transcription)
    * [stopTranscription()](/reference/daily-js/instance-methods/stop-transcription)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Events](/docs/daily-js/concepts/events)
    * [Transcription](/docs/daily-js/features/transcription)
  </Card>
</CardGroup>


# Daily.createCallObject()
Source: https://docs.daily.co/reference/daily-js/factory-methods/create-call-object

Creates a headless DailyCall instance for building fully custom call UIs with direct access to media tracks and WebRTC primitives.

`Daily.createCallObject({ properties })`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Creates a headless [`DailyCall`](/reference/daily-js/daily-call-client) instance. Daily manages WebRTC and media internally but renders no UI — use this when building a fully custom call interface with direct access to [`MediaStreamTrack`](https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack) objects and other WebRTC primitives.

## Parameters

<ParamField type="DailyCallOptions">
  Optional configuration. If `url` is not set here, it must be provided when calling [`join()`](/reference/daily-js/instance-methods/join) or [`load()`](/reference/daily-js/instance-methods/load). See [`DailyCallOptions`](/reference/daily-js/types/daily-call-options) for the full list of options.
</ParamField>

## Return value

Returns a new [`DailyCall`](/reference/daily-js/daily-call-client) instance.

## Example

```javascript theme={null}
const call = Daily.createCallObject({
  url: 'https://your-domain.daily.co/room-name',
  subscribeToTracksAutomatically: false,
});

await call.join();
```

<DuplicateCallObjectCallout method="Daily.createCallObject()" />

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyCallOptions](/reference/daily-js/types/daily-call-options)
  </Card>

  <Card title="Methods" icon="code">
    * [Daily.createFrame()](/reference/daily-js/factory-methods/create-frame)
    * [join()](/reference/daily-js/instance-methods/join)
    * [leave()](/reference/daily-js/instance-methods/leave)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Call modes](/docs/daily-js/concepts/call-modes)
    * [Call configuration](/docs/daily-js/concepts/call-configuration)
  </Card>

  <Card title="Demos" icon="circle-play">
    * [Code: call object React demo](https://github.com/daily-demos/call-object-react)
    * [Live demo: call object React](https://call-object-react.netlify.app/)
  </Card>
</CardGroup>


# Daily.createFrame()
Source: https://docs.daily.co/reference/daily-js/factory-methods/create-frame

Creates a DailyCall instance with an embedded Daily Prebuilt iframe appended to the DOM.

`Daily.createFrame(parentEl, { properties })`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Creates a [`DailyCall`](/reference/daily-js/daily-call-client) instance and embeds a Daily Prebuilt `iframe` in the DOM. Both arguments are optional. If `parentEl` is provided, the `iframe` is appended as a child of that element; otherwise it is appended to `document.body`.

## Parameters

<ParamField type="HTMLElement">
  Optional. The DOM element to append the Daily Prebuilt `iframe` into. Defaults to `document.body` if omitted.
</ParamField>

<ParamField type="DailyCallOptions">
  Optional configuration. If `url` is not set here, it must be provided when calling [`join()`](/reference/daily-js/instance-methods/join) or [`load()`](/reference/daily-js/instance-methods/load). See [`DailyCallOptions`](/reference/daily-js/types/daily-call-options) for the full list of options.
</ParamField>

## Prebuilt-specific options

`createFrame()` supports three options that are specific to how it embeds and controls the Daily Prebuilt iframe.

### iframeStyle

A JavaScript CSS properties object applied directly to the `iframe` element. If omitted, the default styles depend on the parent: when appended to `document.body` the iframe floats as a window in the bottom-right corner; when appended to a specific `parentEl` it fills the width and height of that element.

```javascript theme={null}
// Make the call fullscreen
const call = Daily.createFrame({
  iframeStyle: {
    position: 'fixed',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
  },
});
```

### layoutConfig

Customizes Grid View tile counts when Active Speaker View is disabled (via the `activeSpeakerMode` property or [`setActiveSpeakerMode()`](/reference/daily-js/instance-methods/set-active-speaker-mode)). Specifies the minimum and maximum participant tiles per page when the browser is resized.

```javascript theme={null}
Daily.createFrame({
  layoutConfig: {
    grid: {
      minTilesPerPage: 3,  // default: 1, minimum: 1
      maxTilesPerPage: 36, // default: 25, maximum: 49
    },
  },
});
```

### userData

Custom data associated with the local participant. In Daily Prebuilt, setting `userData.avatar` to a publicly accessible image URL displays that image on muted participant tiles and in the People tab. See [`setUserData()`](/reference/daily-js/instance-methods/set-user-data) to update it after joining.

```javascript theme={null}
Daily.createFrame(parentEl, {
  userData: {
    avatar: 'https://example.com/avatar.jpg',
  },
});
```

<img alt="Video call with one participant using custom avatar image" />

## Return value

Returns a new [`DailyCall`](/reference/daily-js/daily-call-client) instance.

## Example

```javascript theme={null}
const call = Daily.createFrame(document.getElementById('call-container'), {
  url: 'https://your-domain.daily.co/room-name',
});

await call.join();
```

<DuplicateCallObjectCallout method="Daily.createFrame()" />

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyCallOptions](/reference/daily-js/types/daily-call-options)
  </Card>

  <Card title="Methods" icon="code">
    * [Daily.createTransparentFrame()](/reference/daily-js/factory-methods/create-transparent-frame)
    * [join()](/reference/daily-js/instance-methods/join)
    * [leave()](/reference/daily-js/instance-methods/leave)
    * [setActiveSpeakerMode()](/reference/daily-js/instance-methods/set-active-speaker-mode)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Call modes](/docs/daily-js/concepts/call-modes)
    * [Call configuration](/docs/daily-js/concepts/call-configuration)
  </Card>

  <Card title="Demos" icon="circle-play">
    * [Daily Prebuilt demo](https://github.com/daily-demos/prebuilt-ui/)
    * [Fullscreen Daily Prebuilt demo](https://github.com/daily-demos/fullscreen-prebuilt-ui/)
  </Card>
</CardGroup>


# Daily.createTransparentFrame()
Source: https://docs.daily.co/reference/daily-js/factory-methods/create-transparent-frame

Creates a full-page transparent Daily Prebuilt iframe overlay that ignores pointer events.

`Daily.createTransparentFrame({ properties })`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Creates a [`DailyCall`](/reference/daily-js/daily-call-client) instance with a transparent, full-page Daily Prebuilt `iframe` overlaid on the page. The `iframe` ignores all pointer events, so clicks pass through to content beneath it. Use this when you want Daily Prebuilt's UI to float over your own page without blocking interaction.

## Parameters

<ParamField type="DailyCallOptions">
  Optional configuration. If `url` is not set here, it must be provided when calling [`join()`](/reference/daily-js/instance-methods/join) or [`load()`](/reference/daily-js/instance-methods/load). See [`DailyCallOptions`](/reference/daily-js/types/daily-call-options) for the full list of options.
</ParamField>

## Return value

Returns a new [`DailyCall`](/reference/daily-js/daily-call-client) instance.

## Example

```javascript theme={null}
const call = Daily.createTransparentFrame({
  url: 'https://your-domain.daily.co/room-name',
});

await call.join();
```

<DuplicateCallObjectCallout method="Daily.createTransparentFrame()" />

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyCallOptions](/reference/daily-js/types/daily-call-options)
  </Card>

  <Card title="Methods" icon="code">
    * [Daily.createFrame()](/reference/daily-js/factory-methods/create-frame)
    * [Daily.createCallObject()](/reference/daily-js/factory-methods/create-call-object)
    * [join()](/reference/daily-js/instance-methods/join)
    * [leave()](/reference/daily-js/instance-methods/leave)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Call modes](/docs/daily-js/concepts/call-modes)
    * [Call configuration](/docs/daily-js/concepts/call-configuration)
  </Card>
</CardGroup>


# Factory methods
Source: https://docs.daily.co/reference/daily-js/factory-methods/index

Using our video chat API, you can call factory methods to create the objects necessary to host a WebRTC call.

You can use Daily [factory methods](https://www.oreilly.com/library/view/learning-javascript-design/9781449334840/ch09s10.html) to create objects that enable a WebRTC call.

These methods include:

* [`createCallObject()`](/reference/daily-js/factory-methods/create-call-object)
* [`createFrame()`](/reference/daily-js/factory-methods/create-frame)
* [`createTransparentFrame()`](/reference/daily-js/factory-methods/create-transparent-frame)
* [`wrap()`](/reference/daily-js/factory-methods/wrap)


# Daily.wrap()
Source: https://docs.daily.co/reference/daily-js/factory-methods/wrap

Creates a DailyCall instance that controls an existing iframe element you provide.

`Daily.wrap(iframe, { properties })`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Creates a [`DailyCall`](/reference/daily-js/daily-call-client) instance that controls an `iframe` element you already have in the DOM. Use `wrap()` instead of [`createFrame()`](/reference/daily-js/factory-methods/create-frame) when you need full control over the `iframe` element itself — its attributes, placement, or lifecycle.

<Warning>
  Your `iframe` element must have the `allow` attribute set to `"microphone; camera; autoplay; display-capture"` for camera, microphone, and screen sharing to work.
</Warning>

<Note>
  The `iframeStyle` property cannot be passed to `wrap()`. Apply styles directly to your `iframe` element, or use [`createFrame()`](/reference/daily-js/factory-methods/create-frame) if you want Daily to manage the `iframe` styles.
</Note>

## Parameters

<ParamField type="HTMLIFrameElement">
  The `iframe` DOM element to attach Daily to. Must have `allow="microphone; camera; autoplay; display-capture"` set.
</ParamField>

<ParamField type="DailyCallOptions">
  Optional configuration. If `url` is not set here, it must be provided when calling [`join()`](/reference/daily-js/instance-methods/join) or [`load()`](/reference/daily-js/instance-methods/load). See [`DailyCallOptions`](/reference/daily-js/types/daily-call-options) for the full list of options.
</ParamField>

## Return value

Returns a new [`DailyCall`](/reference/daily-js/daily-call-client) instance.

## Example

```javascript theme={null}
const iframe = document.createElement('iframe');
iframe.setAttribute('allow', 'microphone; camera; autoplay; display-capture');
document.body.appendChild(iframe);

const call = Daily.wrap(iframe, {
  url: 'https://your-domain.daily.co/room-name',
});

await call.join();
```

<DuplicateCallObjectCallout method="Daily.wrap()" />

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyCallOptions](/reference/daily-js/types/daily-call-options)
  </Card>

  <Card title="Methods" icon="code">
    * [Daily.createFrame()](/reference/daily-js/factory-methods/create-frame)
    * [Daily.createCallObject()](/reference/daily-js/factory-methods/create-call-object)
    * [join()](/reference/daily-js/instance-methods/join)
    * [leave()](/reference/daily-js/instance-methods/leave)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Call modes](/docs/daily-js/concepts/call-modes)
    * [Call configuration](/docs/daily-js/concepts/call-configuration)
  </Card>
</CardGroup>


# abortTestNetworkConnectivity()
Source: https://docs.daily.co/reference/daily-js/instance-methods/abort-test-network-connectivity

Stop an in-progress testNetworkConnectivity() test early.

`abortTestNetworkConnectivity()`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Stops an in-progress [`testNetworkConnectivity()`](/reference/daily-js/instance-methods/test-network-connectivity) test before it completes. The original `testNetworkConnectivity()` Promise resolves immediately with `{ result: 'aborted' }`, and a [`test-completed`](/reference/daily-js/events/network-events#test-completed) event fires with the same result.

If no test is in progress, this method does nothing.

## Return value

`void`

## Example

```javascript theme={null}
const videoTrack = call.participants().local.tracks.video.persistentTrack;

// Start the test
const resultPromise = call.testNetworkConnectivity(videoTrack);

// Abort early if the user cancels
call.abortTestNetworkConnectivity();

const { result } = await resultPromise;
console.log(result); // 'aborted'
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [testNetworkConnectivity()](/reference/daily-js/instance-methods/test-network-connectivity)
    * [testCallQuality()](/reference/daily-js/instance-methods/test-call-quality)
    * [testWebsocketConnectivity()](/reference/daily-js/instance-methods/test-websocket-connectivity)
  </Card>

  <Card title="Events" icon="bolt">
    * [test-completed](/reference/daily-js/events/network-events#test-completed)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Network quality](/docs/daily-js/guides/network-quality)
  </Card>
</CardGroup>


# abortTestWebsocketConnectivity()
Source: https://docs.daily.co/reference/daily-js/instance-methods/abort-test-websocket-connectivity

Stop an in-progress testWebsocketConnectivity() test early.

`abortTestWebsocketConnectivity()`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Stops an in-progress [`testWebsocketConnectivity()`](/reference/daily-js/instance-methods/test-websocket-connectivity) test before it completes. The original `testWebsocketConnectivity()` Promise resolves immediately with partial results — containing information about the regions that were tested up to the abort point — and a [`test-completed`](/reference/daily-js/events/network-events#test-completed) event fires.

If no test is in progress, this method does nothing.

## Return value

`void`

## Example

```javascript theme={null}
const resultPromise = call.testWebsocketConnectivity();

// Abort early if the user cancels
call.abortTestWebsocketConnectivity();

const results = await resultPromise;
console.log(results.result); // 'aborted'
console.log(results.abortedRegions); // regions that were not yet tested when aborted
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [testWebsocketConnectivity()](/reference/daily-js/instance-methods/test-websocket-connectivity)
    * [testNetworkConnectivity()](/reference/daily-js/instance-methods/test-network-connectivity)
    * [abortTestNetworkConnectivity()](/reference/daily-js/instance-methods/abort-test-network-connectivity)
    * [testCallQuality()](/reference/daily-js/instance-methods/test-call-quality)
  </Card>

  <Card title="Events" icon="bolt">
    * [test-completed](/reference/daily-js/events/network-events#test-completed)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Network quality](/docs/daily-js/guides/network-quality)
  </Card>
</CardGroup>


# accessState()
Source: https://docs.daily.co/reference/daily-js/instance-methods/access-state

Returns the local participant's current meeting access state. Use this to check whether the participant can join, is waiting in the lobby, or has been denied access.

`accessState()`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

## Return value

Returns a `DailyAccessState` object:

<ResponseField name="access" type="DailyAccess">
  The participant's current access level. Either `'unknown'` (not yet determined) or an object with a `level` field:

  * `'unknown'` — access has not yet been determined (before `preAuth()` or `join()`)
  * `{ level: 'none' }` — the participant is not allowed to join
  * `{ level: 'lobby' }` — the participant can join but will be in the waiting room until granted full access
  * `{ level: 'full' }` — the participant has full access to the meeting
</ResponseField>

<ResponseField name="awaitingAccess" type="SpecifiedDailyAccess">
  Optional. Present when the participant has requested access that hasn't yet been granted or denied. Always `{ level: 'full' }`.
</ResponseField>

## Example

```javascript theme={null}
const { access, awaitingAccess } = call.accessState();

if (access === 'unknown') {
  // Not yet joined or pre-authed
} else if (access.level === 'lobby') {
  showWaitingRoomUI();
  if (awaitingAccess) {
    showPendingAccessMessage();
  }
} else if (access.level === 'full') {
  showCallUI();
} else if (access.level === 'none') {
  showAccessDeniedMessage();
}
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [preAuth()](/reference/daily-js/instance-methods/pre-auth)
    * [join()](/reference/daily-js/instance-methods/join)
    * [requestAccess()](/reference/daily-js/instance-methods/request-access)
  </Card>

  <Card title="Events" icon="bolt">
    * [access-state-updated](/reference/daily-js/events/lifecycle-events#access-state-updated)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Waiting room](/docs/daily-js/guides/waiting-room)
  </Card>
</CardGroup>


# activeSpeakerMode()
Source: https://docs.daily.co/reference/daily-js/instance-methods/active-speaker-mode

Returns whether Daily Prebuilt is currently in Active Speaker layout mode.

`activeSpeakerMode()`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

In Active Speaker mode, the participant who is currently speaking is displayed prominently while others appear smaller. When disabled, the layout defaults to a grid where every participant appears the same size.

Active Speaker mode is local-only — changing it only affects the local participant's view.

<Note>
  This method always returns `false` in call object mode. To build your own active-speaker UI with a custom call object, listen for [`active-speaker-change`](/reference/daily-js/events/participant-events#active-speaker-change) events instead.
</Note>

## Return value

`boolean` — `true` if Active Speaker mode is currently enabled, `false` otherwise. Returns `false` if the participant has not yet joined a call.

## Example

```javascript theme={null}
const isActiveSpeaker = call.activeSpeakerMode();
console.log('Active Speaker mode:', isActiveSpeaker);
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [setActiveSpeakerMode()](/reference/daily-js/instance-methods/set-active-speaker-mode)
  </Card>

  <Card title="Events" icon="bolt">
    * [active-speaker-change](/reference/daily-js/events/participant-events#active-speaker-change)
    * [active-speaker-mode-change](/reference/daily-js/events/iframe-ui-events#active-speaker-mode-change)
  </Card>
</CardGroup>


# addFakeParticipant()
Source: https://docs.daily.co/reference/daily-js/instance-methods/add-fake-participant

Add a fake video participant to a call for testing layout and UI.

`addFakeParticipant(details?)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Adds a fake participant with a synthetic video stream to the local call view. The fake participant exists only on the local client — they are not an actual participant in the call and are not visible to others. This is a convenience method for building and testing your UI without needing additional real devices or browser tabs.

## Parameters

<ParamField type="number">
  Optional. The aspect ratio of the fake video stream. Supported values are `16/9`, `3/4`, and `4/3`. Defaults to `16/9`.
</ParamField>

## Return value

Returns `this` (the `DailyCall` instance), allowing method chaining.

## Example

```javascript theme={null}
// Add one fake participant with default 16:9 aspect ratio
call.addFakeParticipant();

// Add multiple fake participants to test grid layout
call.addFakeParticipant()
    .addFakeParticipant()
    .addFakeParticipant({ aspectRatio: 4/3 });
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [participants()](/reference/daily-js/instance-methods/participants)
  </Card>

  <Card title="Events" icon="bolt">
    * [participant-joined](/reference/daily-js/events/participant-events#participant-joined)
  </Card>
</CardGroup>


# addLiveStreamingEndpoints()
Source: https://docs.daily.co/reference/daily-js/instance-methods/add-live-streaming-endpoints

Add RTMP destinations to an active live stream.

<Badge>Paid plans only</Badge>

`addLiveStreamingEndpoints({ endpoints, instanceId? })`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Adds one or more RTMP destinations to an active live stream without interrupting it. Must be called after [`startLiveStreaming()`](/reference/daily-js/instance-methods/start-live-streaming).

<Warning>
  Only works when the stream was started with the `endpoints` parameter. Cannot be used to add destinations to a stream started with `rtmpUrl`.
</Warning>

## Parameters

<ParamField type="DailyStreamingEndpoint[]">
  An array of endpoint objects to add. Each object has a single `endpoint` string — the RTMP/RTMPS ingest URL.
</ParamField>

<ParamField type="string">
  Optional. The ID of the streaming instance to add endpoints to. Required when running multiple simultaneous streams.
</ParamField>

## Return value

`void`

## Example

```javascript theme={null}
call.addLiveStreamingEndpoints({
  endpoints: [
    { endpoint: 'rtmps://backup.cdn.example.com/live/key-2' },
    { endpoint: 'rtmps://social.example.com/live/key-3' },
  ],
});
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [startLiveStreaming()](/reference/daily-js/instance-methods/start-live-streaming)
    * [removeLiveStreamingEndpoints()](/reference/daily-js/instance-methods/remove-live-streaming-endpoints)
    * [updateLiveStreaming()](/reference/daily-js/instance-methods/update-live-streaming)
    * [stopLiveStreaming()](/reference/daily-js/instance-methods/stop-live-streaming)
  </Card>

  <Card title="Events" icon="bolt">
    * [Live streaming events](/reference/daily-js/events/live-streaming-events)
  </Card>

  <Card title="Guides" icon="book-open">
    * [daily-js: Live streaming](/docs/daily-js/features/live-streaming)
    * [Live streaming overview](/docs/guides/features/live-streaming)
  </Card>
</CardGroup>


# customIntegrations()
Source: https://docs.daily.co/reference/daily-js/instance-methods/custom-integrations

Returns all currently configured custom integrations for a Daily Prebuilt call.

`customIntegrations()`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

## Return value

Returns a `DailyCustomIntegrations` object — a map of integration ID strings to `DailyCustomIntegration` objects. See [`setCustomIntegrations()`](/reference/daily-js/instance-methods/set-custom-integrations) for the full shape of each integration object.

## Example

```javascript theme={null}
const integrations = call.customIntegrations();

// Check a specific integration by ID
const miro = integrations['miro'];
if (miro) {
  console.log('Miro integration src:', miro.src);
}
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [setCustomIntegrations()](/reference/daily-js/instance-methods/set-custom-integrations)
    * [startCustomIntegrations()](/reference/daily-js/instance-methods/start-custom-integrations)
    * [stopCustomIntegrations()](/reference/daily-js/instance-methods/stop-custom-integrations)
    * [setSidebarView()](/reference/daily-js/instance-methods/set-sidebar-view)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Custom integrations](/docs/prebuilt/customizing-daily-prebuilt#custom-integrations)
  </Card>
</CardGroup>


# customTrayButtons()
Source: https://docs.daily.co/reference/daily-js/instance-methods/custom-tray-buttons

Returns the currently configured custom tray buttons for a Daily Prebuilt call.

`customTrayButtons()`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Returns all currently configured custom tray buttons. Each button is keyed by its button ID.

## Return value

Returns a `DailyCustomTrayButtons` object — a map of button ID strings to `DailyCustomTrayButton` objects:

<ResponseField name="iconPath" type="string">
  URL of the button icon in light mode.
</ResponseField>

<ResponseField name="iconPathDarkMode" type="string">
  Optional. URL of the button icon in dark mode.
</ResponseField>

<ResponseField name="label" type="string">
  The button label shown in the tray.
</ResponseField>

<ResponseField name="tooltip" type="string">
  Tooltip text shown on hover.
</ResponseField>

<ResponseField name="visualState" type="string">
  Optional. The button's current visual state: `'default'`, `'active'`, or `'disabled'`.
</ResponseField>

## Example

```javascript theme={null}
const buttons = call.customTrayButtons();

// Check a specific button's state
const raiseHand = buttons['raise-hand'];
if (raiseHand?.visualState === 'active') {
  console.log('Hand is raised');
}
```

```json theme={null}
// Example return value
{
  "customButtonOne": {
    "iconPath": "https://example.com/path/to/icon.svg",
    "iconPathDarkMode": "https://example.com/path/to/darkmode/icon.svg",
    "label": "My Custom Button",
    "tooltip": "My Custom Button Tooltip",
    "visualState": "default"
  },
  "customButtonTwo": {
    "iconPath": "https://example.com/path/to/icon.svg",
    "label": "Another Custom Button",
    "tooltip": "Another Custom Button Tooltip"
  }
}
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [updateCustomTrayButtons()](/reference/daily-js/instance-methods/update-custom-tray-buttons)
  </Card>

  <Card title="Events" icon="bolt">
    * [custom-button-click](/reference/daily-js/events/iframe-ui-events#custom-button-click)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Custom tray buttons](/docs/prebuilt/customizing-daily-prebuilt#custom-tray-buttons)
  </Card>
</CardGroup>


# cycleCamera()
Source: https://docs.daily.co/reference/daily-js/instance-methods/cycle-camera

Switch the local camera to the next available device.

`cycleCamera(properties?)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

This is the simplest way to toggle between front and rear cameras on mobile. When doing so, pass `preferDifferentFacingMode: true` — without it, the method cycles through devices in list order, which may land on another camera with the same facing mode (common on newer iPhones that expose multiple rear cameras). Has no effect if only one camera is available.

This method is a wrapper around [`updateInputSettings()`](/reference/daily-js/instance-methods/update-input-settings) and triggers an [`input-settings-updated`](/reference/daily-js/events/settings-events#input-settings-updated) event on success.

## Parameters

<ParamField type="boolean">
  Optional. When `true`, prefers switching to a camera with a different facing mode (front ↔ rear). Defaults to `false`.
</ParamField>

## Return value

Returns a `Promise<{ device?: MediaDeviceInfo | null }>` resolving with the newly active camera's [`MediaDeviceInfo`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDeviceInfo), or `null` if no device was found.

## Example

```javascript theme={null}
// Toggle front/rear camera on mobile
await call.cycleCamera({ preferDifferentFacingMode: true });

// Cycle through all cameras in order
await call.cycleCamera();
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [cycleMic()](/reference/daily-js/instance-methods/cycle-mic)
    * [enumerateDevices()](/reference/daily-js/instance-methods/enumerate-devices)
    * [updateInputSettings()](/reference/daily-js/instance-methods/update-input-settings)
    * [getInputSettings()](/reference/daily-js/instance-methods/get-input-settings)
  </Card>

  <Card title="Events" icon="bolt">
    * [input-settings-updated](/reference/daily-js/events/settings-events#input-settings-updated)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Audio and video](/docs/daily-js/guides/audio-video)
    * [Device permissions](/docs/daily-js/guides/device-permissions)
  </Card>
</CardGroup>


# cycleMic()
Source: https://docs.daily.co/reference/daily-js/instance-methods/cycle-mic

Switch the local microphone to the next available device.

`cycleMic()`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

This method is a wrapper around [`updateInputSettings()`](/reference/daily-js/instance-methods/update-input-settings) and triggers an [`input-settings-updated`](/reference/daily-js/events/settings-events#input-settings-updated) event on success. Has no effect if only one microphone is available.

## Return value

Returns a `Promise<{ device?: MediaDeviceInfo | null }>` resolving with the newly active microphone's [`MediaDeviceInfo`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDeviceInfo), or `null` if no device was found.

## Example

```javascript theme={null}
const { device } = await call.cycleMic();
if (device) {
  console.log('Switched to:', device.label);
}
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [cycleCamera()](/reference/daily-js/instance-methods/cycle-camera)
    * [enumerateDevices()](/reference/daily-js/instance-methods/enumerate-devices)
    * [updateInputSettings()](/reference/daily-js/instance-methods/update-input-settings)
    * [getInputSettings()](/reference/daily-js/instance-methods/get-input-settings)
  </Card>

  <Card title="Events" icon="bolt">
    * [input-settings-updated](/reference/daily-js/events/settings-events#input-settings-updated)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Audio and video](/docs/daily-js/guides/audio-video)
    * [Device permissions](/docs/daily-js/guides/device-permissions)
  </Card>
</CardGroup>


# destroy()
Source: https://docs.daily.co/reference/daily-js/instance-methods/destroy

Destroy a Daily call object and release all associated resources.

`destroy()`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Destroys the call object and frees all associated resources. After `destroy()` completes, [`isDestroyed()`](/reference/daily-js/instance-methods/is-destroyed) returns `true` and any further method calls on the instance will throw an error.

If the call is still active when `destroy()` is called, it will leave the call automatically before releasing resources — so you can call `destroy()` directly without a prior `leave()`. Call [`leave()`](/reference/daily-js/instance-methods/leave) instead when you want to end the current session but reuse the call object for a future `join()` or want access to the call object's state before destroying it.

<Warning>
  By default, if you attempt to create a new call object without first destroying the old one, the factory method will throw an error to prevent event handling conflicts. You must explicitly opt in to multiple-instance mode if you want to create more than one call object. See the [Multiple Instances](/docs/daily-js/guides/multi-instance) guide for details.
</Warning>

## Return value

Returns a `Promise<void>` that resolves once all resources have been released.

## Example

```javascript theme={null}
// When the user is completely done with the call
async function endSession() {
  await call.leave();
  await call.destroy();
  callRef.current = null;
}

// Or listen for the event to clean up references
call.on('call-instance-destroyed', () => {
  callRef.current = null;
});
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [leave()](/reference/daily-js/instance-methods/leave)
    * [isDestroyed()](/reference/daily-js/instance-methods/is-destroyed)
  </Card>

  <Card title="Events" icon="bolt">
    * [call-instance-destroyed](/reference/daily-js/events/lifecycle-events#call-instance-destroyed)
    * [left-meeting](/reference/daily-js/events/lifecycle-events#left-meeting)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Introduction](/docs/daily-js/introduction)
    * [Multiple instances](/docs/daily-js/guides/multi-instance)
  </Card>
</CardGroup>


# enumerateDevices()
Source: https://docs.daily.co/reference/daily-js/instance-methods/enumerate-devices

Returns a list of available audio and video input/output devices.

`enumerateDevices()`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

This is a wrapper around [`navigator.mediaDevices.enumerateDevices()`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices). It is especially required for iframe embeds, which return different device IDs than the parent page and must be enumerated from within the iframe context. To get the devices currently active in the call, use [`getInputDevices()`](/reference/daily-js/instance-methods/get-input-devices) instead.

## Return value

Returns a `Promise<{ devices: DailyMediaDeviceInfo[] }>`. Each `DailyMediaDeviceInfo` extends the browser's [`MediaDeviceInfo`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDeviceInfo) with an optional `facing` field:

<ResponseField name="deviceId" type="string">
  Unique identifier for the device. Persists across sessions for the same browser and origin.
</ResponseField>

<ResponseField name="groupId" type="string">
  Devices that share a physical unit (e.g. a combined camera and microphone) have the same `groupId`.
</ResponseField>

<ResponseField name="kind" type="string">
  Device type: `'audioinput'`, `'audiooutput'`, or `'videoinput'`.
</ResponseField>

<ResponseField name="label" type="string">
  Human-readable device name (e.g. `"Built-in Microphone"`). Only populated after the user has granted media permissions.
</ResponseField>

<ResponseField name="facing" type="string">
  Optional. Camera facing mode on mobile devices: `'user'` (front-facing) or `'environment'` (rear-facing).
</ResponseField>

## Example

```javascript theme={null}
const { devices } = await call.enumerateDevices();

const cameras = devices.filter(d => d.kind === 'videoinput');
const mics = devices.filter(d => d.kind === 'audioinput');
const speakers = devices.filter(d => d.kind === 'audiooutput');

console.log('Cameras:', cameras.map(d => d.label));
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [updateInputSettings()](/reference/daily-js/instance-methods/update-input-settings)
    * [setInputDevicesAsync()](/reference/daily-js/instance-methods/set-input-devices-async)
    * [setOutputDeviceAsync()](/reference/daily-js/instance-methods/set-output-device-async)
    * [getInputDevices()](/reference/daily-js/instance-methods/get-input-devices)
  </Card>

  <Card title="Events" icon="bolt">
    * [available-devices-updated](/reference/daily-js/events/settings-events#available-devices-updated)
    * [selected-devices-updated](/reference/daily-js/events/settings-events#selected-devices-updated)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Audio and video](/docs/daily-js/guides/audio-video)
    * [Device permissions](/docs/daily-js/guides/device-permissions)
  </Card>
</CardGroup>


# exitFullscreen()
Source: https://docs.daily.co/reference/daily-js/instance-methods/exit-fullscreen

Exit fullscreen mode in Daily Prebuilt.

`exitFullscreen()`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

<Warning>
  Has no effect on iOS 15.1 and later due to browser limitations.
</Warning>

## Return value

`void`

## Example

```javascript theme={null}
document.getElementById('exit-fullscreen-btn').onclick = () => {
  call.exitFullscreen();
};

call.on('exited-fullscreen', () => {
  // Fullscreen has exited — update UI accordingly
  document.getElementById('exit-fullscreen-btn').hidden = true;
});
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [requestFullscreen()](/reference/daily-js/instance-methods/request-fullscreen)
  </Card>

  <Card title="Events" icon="bolt">
    * [fullscreen](/reference/daily-js/events/iframe-ui-events#fullscreen)
    * [exited-fullscreen](/reference/daily-js/events/iframe-ui-events#exited-fullscreen)
  </Card>
</CardGroup>


# getCpuLoadStats()
Source: https://docs.daily.co/reference/daily-js/instance-methods/get-cpu-load-stats

Returns current CPU load state and per-frame encoding/decoding statistics.

`getCpuLoadStats()`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Returns a snapshot of the current CPU load state and video encode/decode statistics. Stats in the `latest` field are updated approximately every two seconds — poll this method to monitor CPU performance over time.

<Warning>
  Applies to video calls only.
</Warning>

## Return value

Returns a `Promise<DailyCpuLoadStats>`:

<ResponseField name="cpuLoadState" type="string">
  Current CPU load assessment: `'low'` or `'high'`.
</ResponseField>

<ResponseField name="cpuLoadStateReason" type="string">
  Reason for the current state:

  * `'none'` — load is low
  * `'encode'` — video encoding is the primary cause of high load
  * `'decode'` — video decoding is the primary cause of high load
  * `'scheduleDuration'` — Daily code is not completing within its scheduled interval
</ResponseField>

<ResponseField name="stats.latest" type="object">
  Statistics from the most recent measurement period.

  <Expandable title="stats.latest fields">
    <ResponseField name="timestamp" type="number">Unix timestamp (ms) of when the stats were recorded.</ResponseField>
    <ResponseField name="targetEncodeFrameRate" type="number">Target encode frame rate.</ResponseField>
    <ResponseField name="targetDecodeFrameRate" type="number">Target decode frame rate.</ResponseField>
    <ResponseField name="frameEncodeTimeSec" type="number">Average time in seconds to encode a frame.</ResponseField>
    <ResponseField name="avgFrameDecodeTimeSec" type="number">Average time in seconds to decode a frame.</ResponseField>
    <ResponseField name="cpuUsageBasedOnTargetEncode" type="number">CPU usage estimate based on encode frame rate (0–1).</ResponseField>
    <ResponseField name="cpuUsageBasedOnGlobalDecode" type="number">CPU usage estimate based on decode frame rate (0–1).</ResponseField>
    <ResponseField name="cpuPressureState" type="string">Browser-reported CPU pressure: `'nominal'`, `'fair'`, `'serious'`, `'critical'`, or `null` if not supported.</ResponseField>
    <ResponseField name="scheduleDuration" type="number">Actual schedule interval duration in ms.</ResponseField>
    <ResponseField name="targetScheduleDuration" type="number">Expected schedule interval duration in ms.</ResponseField>
    <ResponseField name="totalReceivedVideoTracks" type="number">Number of incoming video tracks currently being decoded.</ResponseField>
    <ResponseField name="cpuInboundVideoStats" type="object[]">Per-track decode stats. Each entry includes `trackId`, `ssrc`, `frameWidth`, `frameHeight`, `fps`, `frameDecodeTimeSec`, `interFrameDelayStandardDeviation`, and `cpuUsageBasedOnTargetDecode`.</ResponseField>
  </Expandable>
</ResponseField>

## Example

```javascript theme={null}
const { cpuLoadState, cpuLoadStateReason, stats } = await call.getCpuLoadStats();

if (cpuLoadState === 'high') {
  console.log('High CPU load — reason:', cpuLoadStateReason);
  // Consider reducing video quality
  call.updateSendSettings({ video: { maxQuality: 'low' } });
}
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [updateSendSettings()](/reference/daily-js/instance-methods/update-send-settings)
    * [updateReceiveSettings()](/reference/daily-js/instance-methods/update-receive-settings)
    * [getNetworkStats()](/reference/daily-js/instance-methods/get-network-stats)
  </Card>

  <Card title="Events" icon="bolt">
    * [cpu-load-change](/reference/daily-js/events/network-events#cpu-load-change)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Call quality](/docs/daily-js/guides/network-quality)
  </Card>
</CardGroup>


# getDailyLang()
Source: https://docs.daily.co/reference/daily-js/instance-methods/get-daily-lang

Returns the current language setting and the resolved language in effect.

`getDailyLang()`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Returns the current language configuration — both the language explicitly set and the language actually in effect. These differ when `langSetting` is `'user'`, which defers to the browser's language preference.

In custom call object mode, this reflects any language configured at the room or domain level, which you can read and apply to your own UI.

## Return value

Returns a `Promise<{ lang: DailyLanguage, langSetting: DailyLanguageSetting }>`:

<ResponseField name="lang" type="DailyLanguage">
  The language currently in effect (e.g. `'en'`, `'fr'`, `'de'`).
</ResponseField>

<ResponseField name="langSetting" type="DailyLanguageSetting">
  The value explicitly set via [`setDailyLang()`](/reference/daily-js/instance-methods/set-daily-lang) or the room/domain configuration. May be a language code or `'user'` (follow the browser's language preference).
</ResponseField>

## Example

```javascript theme={null}
const { lang, langSetting } = await call.getDailyLang();
console.log('In effect:', lang);       // e.g. 'en'
console.log('Setting:', langSetting);  // e.g. 'user'
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [setDailyLang()](/reference/daily-js/instance-methods/set-daily-lang)
  </Card>

  <Card title="Events" icon="bolt">
    * [lang-updated](/reference/daily-js/events/iframe-ui-events#lang-updated)
  </Card>
</CardGroup>


# getInputDevices()
Source: https://docs.daily.co/reference/daily-js/instance-methods/get-input-devices

Returns the camera, microphone, and speaker devices currently selected for the call.

`getInputDevices()`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Returns a `Promise<DailyDeviceInfos>` describing the camera, microphone, and speaker devices currently in use for the call. Handy for building your device selector UI or for debugging. To get a list of all available devices (not just the active ones), use [`enumerateDevices()`](/reference/daily-js/instance-methods/enumerate-devices).

If a device has not been specified or has not yet been acquired, its field will be an empty object `{}`. The field will also be empty if a custom track has been provided for that input.

## Return value

Returns a `Promise<DailyDeviceInfos>`:

<ResponseField name="camera" type="DailyMediaDeviceInfo | {}">
  The currently selected camera (video input device). `DailyMediaDeviceInfo` extends the browser [`MediaDeviceInfo`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDeviceInfo) with an optional `facing` field (`'user'` or `'environment'`).
</ResponseField>

<ResponseField name="mic" type="MediaDeviceInfo | {}">
  The currently selected microphone (audio input device). See [`MediaDeviceInfo`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDeviceInfo) for the full shape.
</ResponseField>

<ResponseField name="speaker" type="MediaDeviceInfo | {}">
  The currently selected speaker or audio output device. See [`MediaDeviceInfo`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDeviceInfo) for the full shape.
</ResponseField>

## Example

```javascript theme={null}
const { camera, mic, speaker } = await call.getInputDevices();

console.log('Camera:', camera.label || camera.deviceId);
console.log('Mic:', mic.label || mic.deviceId);
console.log('Speaker:', speaker.label || speaker.deviceId);
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [enumerateDevices()](/reference/daily-js/instance-methods/enumerate-devices)
    * [setInputDevicesAsync()](/reference/daily-js/instance-methods/set-input-devices-async)
    * [setOutputDeviceAsync()](/reference/daily-js/instance-methods/set-output-device-async)
    * [updateInputSettings()](/reference/daily-js/instance-methods/update-input-settings)
  </Card>

  <Card title="Events" icon="bolt">
    * [available-devices-updated](/reference/daily-js/events/settings-events#available-devices-updated)
    * [selected-devices-updated](/reference/daily-js/events/settings-events#selected-devices-updated)
    * [camera-error](/reference/daily-js/events/settings-events#camera-error)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Audio and video](/docs/daily-js/guides/audio-video)
    * [Device permissions](/docs/daily-js/guides/device-permissions)
  </Card>
</CardGroup>


# getInputSettings()
Source: https://docs.daily.co/reference/daily-js/instance-methods/get-input-settings

Returns the current audio and video input settings, including processor and constraint configuration.

`getInputSettings()`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Returns the current `DailyInputSettings` object — the preferred input settings as last set via [`updateInputSettings()`](/reference/daily-js/instance-methods/update-input-settings). Returns an empty object if no settings have been applied.

<Note>
  The returned settings reflect what was requested, not necessarily what is active. For example, if you request `frameRate: 30` but the device only supports 15fps, `getInputSettings()` returns `30`. If the constraints cause an `OverConstrainedError`, Daily clears the settings and this method returns an empty object.
</Note>

## Return value

Returns a `Promise<DailyInputSettings>`:

<ResponseField name="audio" type="DailyInputAudioSettings">
  Audio input settings.

  <Expandable title="audio fields">
    <ResponseField name="processor" type="object">
      Audio processor configuration. `type` is `'none'` or `'noise-cancellation'`.
    </ResponseField>

    <ResponseField name="settings" type="MediaTrackConstraints | DailyCustomTrackSettings">
      Audio track constraints (e.g. `deviceId`, `echoCancellation`) or a custom track.
    </ResponseField>
  </Expandable>
</ResponseField>

<ResponseField name="video" type="DailyInputVideoSettings">
  Video input settings.

  <Expandable title="video fields">
    <ResponseField name="processor" type="object">
      Video processor configuration. `type` is one of `'none'`, `'background-blur'`, `'background-image'`, or `'face-detection'`. See [`updateInputSettings()`](/reference/daily-js/instance-methods/update-input-settings) for processor-specific fields.
    </ResponseField>

    <ResponseField name="settings" type="MediaTrackConstraints | DailyCustomTrackSettings">
      Video track constraints (e.g. `frameRate`, `width`, `height`) or a custom track.
    </ResponseField>
  </Expandable>
</ResponseField>

## Example

```javascript theme={null}
const settings = await call.getInputSettings();

if (settings.video?.processor?.type === 'background-blur') {
  console.log('Background blur strength:', settings.video.processor.config?.strength);
}
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [updateInputSettings()](/reference/daily-js/instance-methods/update-input-settings)
    * [enumerateDevices()](/reference/daily-js/instance-methods/enumerate-devices)
  </Card>

  <Card title="Events" icon="bolt">
    * [input-settings-updated](/reference/daily-js/events/settings-events#input-settings-updated)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Audio and video processing](/docs/daily-js/guides/audio-video#audio-and-video-processing)
    * [Device permissions](/docs/daily-js/guides/device-permissions)
  </Card>
</CardGroup>


# getLocalAudioLevel()
Source: https://docs.daily.co/reference/daily-js/instance-methods/get-local-audio-level

Returns the current audio level for the local participant.

`getLocalAudioLevel()`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

<Warning>
  You must call [`startLocalAudioLevelObserver()`](/reference/daily-js/instance-methods/start-local-audio-level-observer) before calling this method — otherwise it returns `0`.
</Warning>

## Return value

Returns a `number` between `0.0` (silence) and `1.0` (maximum volume). The value is updated on the interval set when `startLocalAudioLevelObserver()` was called (default: 100ms).

## Example

```javascript theme={null}
await call.startLocalAudioLevelObserver(100);

// Poll or call on a timer to get the current level
const level = call.getLocalAudioLevel();
console.log('Local audio level:', level); // e.g. 0.625
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [startLocalAudioLevelObserver()](/reference/daily-js/instance-methods/start-local-audio-level-observer)
    * [stopLocalAudioLevelObserver()](/reference/daily-js/instance-methods/stop-local-audio-level-observer)
    * [isLocalAudioLevelObserverRunning()](/reference/daily-js/instance-methods/is-local-audio-level-observer-running)
    * [getRemoteParticipantsAudioLevel()](/reference/daily-js/instance-methods/get-remote-participants-audio-level)
  </Card>

  <Card title="Events" icon="bolt">
    * [local-audio-level](/reference/daily-js/events/media-events#local-audio-level)
    * [remote-participants-audio-level](/reference/daily-js/events/media-events#remote-participants-audio-level)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Audio and video](/docs/daily-js/guides/audio-video)
  </Card>
</CardGroup>


# getMeetingSession() (Deprecated)
Source: https://docs.daily.co/reference/daily-js/instance-methods/get-meeting-session

Deprecated. Use meetingSessionSummary() instead.

<Badge>Deprecated 0.55.0</Badge>

`getMeetingSession()`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

<Warning>
  This method is deprecated. Use [`meetingSessionSummary()`](/reference/daily-js/instance-methods/meeting-session-summary) instead, which returns synchronously.
</Warning>

Returns a `Promise<{ meetingSession: { id: string } }>` resolving with the ID of the current meeting session.

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [meetingSessionSummary()](/reference/daily-js/instance-methods/meeting-session-summary)
    * [meetingSessionState()](/reference/daily-js/instance-methods/meeting-session-state)
  </Card>

  <Card title="Events" icon="bolt">
    * [meeting-session-summary-updated](/reference/daily-js/events/messaging-events#meeting-session-summary-updated)
    * [meeting-session-updated](/reference/daily-js/events/messaging-events#meeting-session-updated) (deprecated)
  </Card>
</CardGroup>


# getNetworkStats()
Source: https://docs.daily.co/reference/daily-js/instance-methods/get-network-stats

Returns current network quality stats and per-interval send/receive metrics.

`getNetworkStats()`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Returns a snapshot of the current network statistics, calculated from [WebRTC stats](https://www.w3.org/TR/webrtc-stats/). Stats in `stats.latest` are updated approximately every two seconds — poll this method to monitor network performance over time.

If a value cannot be determined for a given interval, it is set to `null`. This most commonly occurs for `packetLoss` calculations due to the values it relies upon being missing or stale, or media not being transmitted. For instance, if you join a call with audio and video off, your bitrates will be 0 and `packetLoss` will be `null` because it is unknown.

## Return value

Returns a `Promise<DailyNetworkStats>`:

<ResponseField name="networkState" type="string">
  Current network quality assessment: `'good'`, `'warning'`, `'bad'`, or `'unknown'`. Calculated from send/receive packet loss, round trip time, and available outgoing bitrate, averaged over a \~30-second rolling window. In Prebuilt, Daily lowers bandwidth at `'warning'` and disables the local camera at `'bad'`.
</ResponseField>

<ResponseField name="networkStateReasons" type="string[]">
  Reasons for the current `networkState`. Possible values: `'sendPacketLoss'`, `'recvPacketLoss'`, `'roundTripTime'`, `'availableOutgoingBitrate'`. Empty when state is `'good'` or `'unknown'`.
</ResponseField>

<ResponseField name="stats" type="DailyNetworkStatsData | {}">
  Network statistics. Empty object (`{}`) when stats are not yet available.

  <Expandable title="stats fields">
    <ResponseField name="averageNetworkRoundTripTime" type="number">Average round trip time over the course of the call.</ResponseField>
    <ResponseField name="worstAudioRecvPacketLoss" type="number">Highest audio receive packet loss seen during any reporting interval.</ResponseField>
    <ResponseField name="worstAudioSendPacketLoss" type="number">Highest audio send packet loss seen during any reporting interval.</ResponseField>
    <ResponseField name="worstVideoRecvPacketLoss" type="number">Highest video receive packet loss seen during any reporting interval.</ResponseField>
    <ResponseField name="worstVideoSendPacketLoss" type="number">Highest video send packet loss seen during any reporting interval.</ResponseField>
    <ResponseField name="worstVideoRecvJitter" type="number">Highest video receive jitter seen during any reporting interval.</ResponseField>
    <ResponseField name="worstVideoSendJitter" type="number">Highest video send jitter seen during any reporting interval.</ResponseField>
    <ResponseField name="worstAudioRecvJitter" type="number">Highest audio receive jitter seen during any reporting interval.</ResponseField>
    <ResponseField name="worstAudioSendJitter" type="number">Highest audio send jitter seen during any reporting interval.</ResponseField>

    <ResponseField name="latest" type="object">
      Statistics from the most recent reporting interval (\~2s).

      <Expandable title="latest fields">
        <ResponseField name="timestamp" type="number">Unix timestamp (ms) of when the stats were recorded.</ResponseField>
        <ResponseField name="recvBitsPerSecond" type="number | null">Total incoming bits per second (audio + video).</ResponseField>
        <ResponseField name="sendBitsPerSecond" type="number | null">Total outgoing bits per second (audio + video).</ResponseField>
        <ResponseField name="networkRoundTripTime" type="number | null">Average round trip time across all connections.</ResponseField>
        <ResponseField name="availableOutgoingBitrate" type="number | null">Average available outgoing bitrate across all connections.</ResponseField>
        <ResponseField name="audioRecvBitsPerSecond" type="number | null">Incoming audio payload bits per second.</ResponseField>
        <ResponseField name="audioSendBitsPerSecond" type="number | null">Outgoing audio payload bits per second.</ResponseField>
        <ResponseField name="audioRecvPacketLoss" type="number | null">Estimated packet loss percentage for incoming audio.</ResponseField>
        <ResponseField name="audioSendPacketLoss" type="number | null">Estimated packet loss percentage for outgoing audio. Always `null` in Firefox.</ResponseField>
        <ResponseField name="videoRecvBitsPerSecond" type="number | null">Incoming video payload bits per second.</ResponseField>
        <ResponseField name="videoSendBitsPerSecond" type="number | null">Outgoing video payload bits per second.</ResponseField>
        <ResponseField name="videoRecvPacketLoss" type="number | null">Estimated packet loss percentage for incoming video.</ResponseField>
        <ResponseField name="videoSendPacketLoss" type="number | null">Estimated packet loss percentage for outgoing video.</ResponseField>
        <ResponseField name="totalRecvPacketLoss" type="number | null">Overall estimated packet loss for all incoming media.</ResponseField>
        <ResponseField name="totalSendPacketLoss" type="number | null">Overall estimated packet loss for all outgoing media.</ResponseField>
        <ResponseField name="videoRecvJitter" type="number | null">Average jitter across inbound video streams.</ResponseField>
        <ResponseField name="videoSendJitter" type="number | null">Average jitter across outbound video streams.</ResponseField>
        <ResponseField name="audioRecvJitter" type="number | null">Average jitter across inbound audio streams.</ResponseField>
        <ResponseField name="audioSendJitter" type="number | null">Average jitter across outbound audio streams. Always `null` in Firefox.</ResponseField>
      </Expandable>
    </ResponseField>
  </Expandable>
</ResponseField>

<ResponseField name="threshold" type="string">
  Deprecated in 0.77.0. Use `networkState` instead. Was `'good'`, `'low'`, or `'very-low'`.
</ResponseField>

<ResponseField name="quality" type="number">
  Deprecated in 0.77.0. Was a subjective 1–100 quality score.
</ResponseField>

<Warning>
  Firefox does not report send-side packet loss or jitter for audio (`audioSendPacketLoss` and `audioSendJitter` are always `null`), and does not provide `availableOutgoingBitrate`, `networkRoundTripTime`, or `averageNetworkRoundTripTime`.
</Warning>

## Example

<CodeGroup>
  ```javascript Example Usage theme={null}
  const { networkState, networkStateReasons, stats } = await call.getNetworkStats();

  if (networkState === 'bad') {
    console.log('Poor network. Reasons:', networkStateReasons);
  }

  if (stats.latest) {
    console.log('Packet loss (send):', stats.latest.totalSendPacketLoss);
    console.log('Round trip time:', stats.latest.networkRoundTripTime);
  }
  ```

  ```JSON Sample response theme={null}
  {
    "networkState": "bad",
    "networkStateReasons": ["sendPacketLoss", "recvPacketLoss"],
    "threshold": "good",
    "quality": 37,
    "stats": {
      "averageNetworkRoundTripTime": 0.01992261904761905,
      "latest": {
        "audioRecvBitsPerSecond": 23050.048937297845,
        "audioRecvJitter": 0.026,
        "audioRecvPacketLoss": 0.15053763440860216,
        "audioSendBitsPerSecond": 30177.83704675053,
        "audioSendJitter": null,
        "audioSendPacketLoss": null,
        "availableOutgoingBitrate": 2889866,
        "networkRoundTripTime": 0.02,
        "recvBitsPerSecond": 1700344.1895481267,
        "sendBitsPerSecond": 1724499.7493844875,
        "timestamp": 1743011906315,
        "totalRecvPacketLoss": 0.11670020120724346,
        "totalSendPacketLoss": 0.08984375,
        "videoRecvBitsPerSecond": 1567291.2594309496,
        "videoRecvJitter": 0.036,
        "videoRecvPacketLoss": 0.10891089108910891,
        "videoSendBitsPerSecond": 1589251.349980054,
        "videoSendJitter": 0.008922,
        "videoSendPacketLoss": 0.08984375
      },
      "worstAudioRecvJitter": 0.026,
      "worstAudioRecvPacketLoss": 0.23232323232323232,
      "worstAudioSendJitter": 0.003166,
      "worstAudioSendPacketLoss": 0.1953125,
      "worstVideoRecvJitter": 0.036,
      "worstVideoRecvPacketLoss": 0.10891089108910891,
      "worstVideoSendJitter": 0.014355,
      "worstVideoSendPacketLoss": 0.13671875
    }
  }
  ```
</CodeGroup>

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [getCpuLoadStats()](/reference/daily-js/instance-methods/get-cpu-load-stats)
    * [updateSendSettings()](/reference/daily-js/instance-methods/update-send-settings)
    * [updateReceiveSettings()](/reference/daily-js/instance-methods/update-receive-settings)
  </Card>

  <Card title="Events" icon="bolt">
    * [network-quality-change](/reference/daily-js/events/network-events#network-quality-change)
    * [network-connection](/reference/daily-js/events/network-events#network-connection)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Call quality](/docs/daily-js/guides/network-quality)
    * [Logging and metrics](/docs/guides/architecture-and-monitoring/logging-and-metrics)
  </Card>
</CardGroup>


# getNetworkTopology()
Source: https://docs.daily.co/reference/daily-js/instance-methods/get-network-topology

Returns the current WebRTC connection topology for the call.

`getNetworkTopology()`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Returns the WebRTC connection topology currently in use for the call. All calls default to SFU topology, including 1:1 calls.

## Return value

Returns a `Promise<{ topology: 'sfu' | 'peer' | 'none', error?: string }>`:

<ResponseField name="topology" type="string">
  The current connection topology:

  * `'sfu'` — media is routed through Daily's Selective Forwarding Units
  * `'peer'` — media is sent directly between participants
  * `'none'` — topology has not yet been determined or is not applicable (before WebRTC connections have been established or after leaving the call)
</ResponseField>

<ResponseField name="error" type="string">
  Present only if an error occurred while determining the topology.
</ResponseField>

## Example

```javascript theme={null}
const { topology } = await call.getNetworkTopology();
console.log('Topology:', topology); // 'sfu'
```

## See also

<CardGroup>
  <Card title="Events" icon="bolt">
    * [network-connection](/reference/daily-js/events/network-events#network-connection)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Call quality](/docs/daily-js/guides/network-quality)
    * [Video call architecture](/docs/guides/architecture-and-monitoring/intro-to-video-arch)
  </Card>
</CardGroup>


# getReceiveSettings()
Source: https://docs.daily.co/reference/daily-js/instance-methods/get-receive-settings

Returns the current media receive settings, either for all participants or a specific one.

`getReceiveSettings(id?, options?)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Returns the current receive settings. When called with no arguments, returns the full `DailyReceiveSettings` object for all participants. When called with a participant ID, returns only that participant's settings.

<Note>
  `base` settings are not available until after [`join()`](/reference/daily-js/instance-methods/join) is called.
</Note>

## Parameters

<ParamField type="string">
  Optional. A participant session ID. When provided, returns only that participant's receive settings.
</ParamField>

<ParamField type="boolean">
  Optional. When `true`, includes inherited values from `base` in the per-participant result. Defaults to `false`.
</ParamField>

## Return value

Returns a `Promise<DailyReceiveSettings>` when called with no ID, or `Promise<DailySingleParticipantReceiveSettings>` when called with an ID.

See [`updateReceiveSettings()`](/reference/daily-js/instance-methods/update-receive-settings) for a full explanation of the receive settings structure.

## Example

```javascript theme={null}
// Get all receive settings
const settings = await call.getReceiveSettings();
// {
//   base: { video: { layer: 2 }, screenVideo: { layer: 0 } },
//   d38ed17b-1ede-4273-a1c8-cf11ccf16972: { video: { layer: 1 } }
// }

// Get a specific participant's settings (without inherited values)
const participantSettings = await call.getReceiveSettings(id);
// { video: { layer: 1 } }

// Include inherited values from base
const withInherited = await call.getReceiveSettings(id, { showInheritedValues: true });
// { video: { layer: 1 }, screenVideo: { layer: 0 } }
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [updateReceiveSettings()](/reference/daily-js/instance-methods/update-receive-settings)
    * [getSendSettings()](/reference/daily-js/instance-methods/get-send-settings)
  </Card>

  <Card title="Events" icon="bolt">
    * [receive-settings-updated](/reference/daily-js/events/settings-events#receive-settings-updated)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Receive-side video quality](/docs/guides/scaling-calls/best-practices-to-scale-large-experiences#adjust-receive-side-video-quality)
  </Card>
</CardGroup>


# getRemoteParticipantsAudioLevel()
Source: https://docs.daily.co/reference/daily-js/instance-methods/get-remote-participants-audio-level

Returns the current audio level for each remote participant.

`getRemoteParticipantsAudioLevel()`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Returns the latest audio level for each remote participant. You must call [`startRemoteParticipantsAudioLevelObserver()`](/reference/daily-js/instance-methods/start-remote-participants-audio-level-observer) before calling this method — otherwise it returns an empty object.

This method is synchronous — it does not return a Promise.

## Return value

Returns a `DailyParticipantsAudioLevel` object: a map of participant session IDs to audio level values. Each value is a `number` between `0.0` (silence) and `1.0` (maximum volume).

## Example

```javascript theme={null}
await call.startRemoteParticipantsAudioLevelObserver(100);

const levels = call.getRemoteParticipantsAudioLevel();
// {
//   "03ec86c3-59cc-4bea-a61b-f8ffae9a2989": 0.28,
//   "5e1fa0e9-cce6-45a0-ba61-f64d24b41ff6": 0
// }

const activeSpeakerId = Object.entries(levels)
  .sort(([, a], [, b]) => b - a)[0]?.[0];
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [startRemoteParticipantsAudioLevelObserver()](/reference/daily-js/instance-methods/start-remote-participants-audio-level-observer)
    * [stopRemoteParticipantsAudioLevelObserver()](/reference/daily-js/instance-methods/stop-remote-participants-audio-level-observer)
    * [isRemoteParticipantsAudioLevelObserverRunning()](/reference/daily-js/instance-methods/is-remote-participants-audio-level-observer-running)
    * [getLocalAudioLevel()](/reference/daily-js/instance-methods/get-local-audio-level)
  </Card>

  <Card title="Events" icon="bolt">
    * [remote-participants-audio-level](/reference/daily-js/events/media-events#remote-participants-audio-level)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Audio and video](/docs/daily-js/guides/audio-video)
  </Card>
</CardGroup>


# getSendSettings()
Source: https://docs.daily.co/reference/daily-js/instance-methods/get-send-settings

Returns the current media send settings, or null if none have been set.

`getSendSettings()`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Returns the current `DailySendSettings` object, or `null` if [`updateSendSettings()`](/reference/daily-js/instance-methods/update-send-settings) has never been called and no call has been joined.

This method is synchronous — it does not return a Promise.

## Return value

Returns `DailySendSettings | null`.

See [`updateSendSettings()`](/reference/daily-js/instance-methods/update-send-settings) for a full explanation of the `DailySendSettings` structure.

## Example

```javascript theme={null}
const settings = call.getSendSettings();

if (settings?.video?.maxQuality === 'low') {
  console.log('Video quality is currently limited to low');
}
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [updateSendSettings()](/reference/daily-js/instance-methods/update-send-settings)
    * [getReceiveSettings()](/reference/daily-js/instance-methods/get-receive-settings)
    * [getCpuLoadStats()](/reference/daily-js/instance-methods/get-cpu-load-stats)
  </Card>

  <Card title="Events" icon="bolt">
    * [send-settings-updated](/reference/daily-js/events/settings-events#send-settings-updated)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Send-side video quality](/docs/guides/scaling-calls/best-practices-to-scale-large-experiences#change-send-side-video-quality)
    * [Call quality](/docs/daily-js/guides/network-quality)
  </Card>
</CardGroup>


# getSidebarView()
Source: https://docs.daily.co/reference/daily-js/instance-methods/get-sidebar-view

Returns the currently active sidebar tab in Daily Prebuilt.

`getSidebarView()`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Returns the currently selected sidebar tab in Daily Prebuilt.

## Return value

Returns a `Promise<SidebarView>`. Possible values:

* `null` — sidebar is closed
* `'people'` — participants list
* `'chat'` — chat panel
* `'network'` — network stats panel
* `'breakout'` — breakout rooms panel
* A custom `string` — a custom sidebar integration

## Example

```javascript theme={null}
const view = await call.getSidebarView();

if (view === 'chat') {
  console.log('Chat panel is open');
}
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [setSidebarView()](/reference/daily-js/instance-methods/set-sidebar-view)
  </Card>

  <Card title="Events" icon="bolt">
    * [sidebar-view-changed](/reference/daily-js/events/iframe-ui-events#sidebar-view-changed)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Customizing Daily Prebuilt](/docs/prebuilt/customizing-daily-prebuilt)
  </Card>
</CardGroup>


# iframe()
Source: https://docs.daily.co/reference/daily-js/instance-methods/iframe

Returns the iframe DOM element wrapping the Daily Prebuilt call.

`iframe()`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Returns the `HTMLIFrameElement` that wraps the Daily Prebuilt call, or `null` if no iframe exists.

## Return value

Returns `HTMLIFrameElement | null`.

## Example

```javascript theme={null}
const el = call.iframe();
if (el) {
  el.style.borderRadius = '12px';
}
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [createFrame()](/reference/daily-js/factory-methods/create-frame)
    * [wrap()](/reference/daily-js/factory-methods/wrap)
    * [createTransparentFrame()](/reference/daily-js/factory-methods/create-transparent-frame)
  </Card>
</CardGroup>


# Instance methods
Source: https://docs.daily.co/reference/daily-js/instance-methods/index

Using our video API, instance methods allow developers to customize a WebRTC call.

Use Daily instance methods to customize your call experience. Instance methods include:

* [`abortTestNetworkConnectivity()`](/reference/daily-js/instance-methods/abort-test-network-connectivity)
* [`abortTestWebsocketConnectivity()`](/reference/daily-js/instance-methods/abort-test-websocket-connectivity)
* [`accessState()`](/reference/daily-js/instance-methods/access-state)
* [`activeSpeakerMode()`](/reference/daily-js/instance-methods/active-speaker-mode)
* [`addFakeParticipant()`](/reference/daily-js/instance-methods/add-fake-participant)
* [`addLiveStreamingEndpoints()`](/reference/daily-js/instance-methods/add-live-streaming-endpoints)
* [`customIntegrations()`](/reference/daily-js/instance-methods/custom-integrations)
* [`customTrayButtons()`](/reference/daily-js/instance-methods/custom-tray-buttons)
* [`cycleCamera()`](/reference/daily-js/instance-methods/cycle-camera)
* [`cycleMic()`](/reference/daily-js/instance-methods/cycle-mic)
* [`destroy()`](/reference/daily-js/instance-methods/destroy)
* [`enumerateDevices()`](/reference/daily-js/instance-methods/enumerate-devices)
* [`exitFullscreen()`](/reference/daily-js/instance-methods/exit-fullscreen)
* [`getCpuLoadStats()`](/reference/daily-js/instance-methods/get-cpu-load-stats)
* [`getDailyLang()`](/reference/daily-js/instance-methods/get-daily-lang)
* [`getInputDevices()`](/reference/daily-js/instance-methods/get-input-devices)
* [`getInputSettings()`](/reference/daily-js/instance-methods/get-input-settings)
* [`getLocalAudioLevel()`](/reference/daily-js/instance-methods/get-local-audio-level)
* [`getMeetingSession()`](/reference/daily-js/instance-methods/get-meeting-session)
* [`getNetworkStats()`](/reference/daily-js/instance-methods/get-network-stats)
* [`getNetworkTopology()`](/reference/daily-js/instance-methods/get-network-topology)
* [`getReceiveSettings()`](/reference/daily-js/instance-methods/get-receive-settings)
* [`getRemoteParticipantsAudioLevel()`](/reference/daily-js/instance-methods/get-remote-participants-audio-level)
* [`getSendSettings()`](/reference/daily-js/instance-methods/get-send-settings)
* [`getSidebarView()`](/reference/daily-js/instance-methods/get-sidebar-view)
* [`iframe()`](/reference/daily-js/instance-methods/iframe)
* [`isDestroyed()`](/reference/daily-js/instance-methods/is-destroyed)
* [`isLocalAudioLevelObserverRunning()`](/reference/daily-js/instance-methods/is-local-audio-level-observer-running)
* [`isRemoteParticipantsAudioLevelObserverRunning()`](/reference/daily-js/instance-methods/is-remote-participants-audio-level-observer-running)
* [`join()`](/reference/daily-js/instance-methods/join)
* [`leave()`](/reference/daily-js/instance-methods/leave)
* [`load()`](/reference/daily-js/instance-methods/load)
* [`localAudio()`](/reference/daily-js/instance-methods/local-audio)
* [`localScreenAudio()`](/reference/daily-js/instance-methods/local-screen-audio)
* [`localScreenVideo()`](/reference/daily-js/instance-methods/local-screen-video)
* [`localVideo()`](/reference/daily-js/instance-methods/local-video)
* [`meetingSessionState()`](/reference/daily-js/instance-methods/meeting-session-state)
* [`meetingSessionSummary()`](/reference/daily-js/instance-methods/meeting-session-summary)
* [`meetingState()`](/reference/daily-js/instance-methods/meeting-state)
* [`off()`](/reference/daily-js/instance-methods/off)
* [`on()`](/reference/daily-js/instance-methods/on)
* [`once()`](/reference/daily-js/instance-methods/once)
* [`participantCounts()`](/reference/daily-js/instance-methods/participant-counts)
* [`participants()`](/reference/daily-js/instance-methods/participants)
* [`preAuth()`](/reference/daily-js/instance-methods/pre-auth)
* [`removeLiveStreamingEndpoints()`](/reference/daily-js/instance-methods/remove-live-streaming-endpoints)
* [`requestAccess()`](/reference/daily-js/instance-methods/request-access)
* [`requestFullscreen()`](/reference/daily-js/instance-methods/request-fullscreen)
* [`room()`](/reference/daily-js/instance-methods/room)
* [`sendAppMessage()`](/reference/daily-js/instance-methods/send-app-message)
* [`sendDTMF()`](/reference/daily-js/instance-methods/send-dtmf)
* [`setActiveSpeakerMode()`](/reference/daily-js/instance-methods/set-active-speaker-mode)
* [`setBandwidth()`](/reference/daily-js/instance-methods/set-bandwidth)
* [`setCustomIntegrations()`](/reference/daily-js/instance-methods/set-custom-integrations)
* [`setDailyLang()`](/reference/daily-js/instance-methods/set-daily-lang)
* [`setIceConfig()`](/reference/daily-js/instance-methods/set-ice-config)
* [`setInputDevicesAsync()`](/reference/daily-js/instance-methods/set-input-devices-async)
* [`setLocalAudio()`](/reference/daily-js/instance-methods/set-local-audio)
* [`setLocalVideo()`](/reference/daily-js/instance-methods/set-local-video)
* [`setMeetingSessionData()`](/reference/daily-js/instance-methods/set-meeting-session-data)
* [`setNetworkTopology()`](/reference/daily-js/instance-methods/set-network-topology)
* [`setOutputDeviceAsync()`](/reference/daily-js/instance-methods/set-output-device-async)
* [`setPlayNewParticipantSound()`](/reference/daily-js/instance-methods/set-play-new-participant-sound)
* [`setProxyUrl()`](/reference/daily-js/instance-methods/set-proxy-url)
* [`setShowLocalVideo()`](/reference/daily-js/instance-methods/set-show-local-video)
* [`setShowNamesMode()`](/reference/daily-js/instance-methods/set-show-names-mode)
* [`setShowParticipantsBar()`](/reference/daily-js/instance-methods/set-show-participants-bar)
* [`setSidebarView()`](/reference/daily-js/instance-methods/set-sidebar-view)
* [`setSubscribeToTracksAutomatically()`](/reference/daily-js/instance-methods/set-subscribe-to-tracks-automatically)
* [`setTheme()`](/reference/daily-js/instance-methods/set-theme)
* [`setUserData()`](/reference/daily-js/instance-methods/set-user-data)
* [`setUserName()`](/reference/daily-js/instance-methods/set-user-name)
* [`showLocalVideo()`](/reference/daily-js/instance-methods/show-local-video)
* [`showParticipantsBar()`](/reference/daily-js/instance-methods/show-participants-bar)
* [`sipCallTransfer()`](/reference/daily-js/instance-methods/sip-call-transfer)
* [`sipRefer()`](/reference/daily-js/instance-methods/sip-refer)
* [`startCamera()`](/reference/daily-js/instance-methods/start-camera)
* [`startCustomIntegrations()`](/reference/daily-js/instance-methods/start-custom-integrations)
* [`startCustomTrack()`](/reference/daily-js/instance-methods/start-custom-track)
* [`startDialOut()`](/reference/daily-js/instance-methods/start-dial-out)
* [`startLiveStreaming()`](/reference/daily-js/instance-methods/start-live-streaming)
* [`startLocalAudioLevelObserver()`](/reference/daily-js/instance-methods/start-local-audio-level-observer)
* [`startRecording()`](/reference/daily-js/instance-methods/start-recording)
* [`startRemoteParticipantsAudioLevelObserver()`](/reference/daily-js/instance-methods/start-remote-participants-audio-level-observer)
* [`startScreenShare()`](/reference/daily-js/instance-methods/start-screen-share)
* [`startTranscription()`](/reference/daily-js/instance-methods/start-transcription)
* [`stopCustomIntegrations()`](/reference/daily-js/instance-methods/stop-custom-integrations)
* [`stopCustomTrack()`](/reference/daily-js/instance-methods/stop-custom-track)
* [`stopDialOut()`](/reference/daily-js/instance-methods/stop-dial-out)
* [`stopLiveStreaming()`](/reference/daily-js/instance-methods/stop-live-streaming)
* [`stopLocalAudioLevelObserver()`](/reference/daily-js/instance-methods/stop-local-audio-level-observer)
* [`stopRecording()`](/reference/daily-js/instance-methods/stop-recording)
* [`stopRemoteParticipantsAudioLevelObserver()`](/reference/daily-js/instance-methods/stop-remote-participants-audio-level-observer)
* [`stopScreenShare()`](/reference/daily-js/instance-methods/stop-screen-share)
* [`stopTestCallQuality()`](/reference/daily-js/instance-methods/stop-test-call-quality)
* [`stopTestConnectionQuality()`](/reference/daily-js/instance-methods/stop-test-connection-quality)
* [`stopTestPeerToPeerCallQuality()`](/reference/daily-js/instance-methods/stop-test-peer-to-peer-call-quality)
* [`stopTranscription()`](/reference/daily-js/instance-methods/stop-transcription)
* [`testCallQuality()`](/reference/daily-js/instance-methods/test-call-quality)
* [`testConnectionQuality()`](/reference/daily-js/instance-methods/test-connection-quality)
* [`testNetworkConnectivity()`](/reference/daily-js/instance-methods/test-network-connectivity)
* [`testPeerToPeerCallQuality()`](/reference/daily-js/instance-methods/test-peer-to-peer-call-quality)
* [`testWebsocketConnectivity()`](/reference/daily-js/instance-methods/test-websocket-connectivity)
* [`theme()`](/reference/daily-js/instance-methods/theme)
* [`updateCustomTrayButtons()`](/reference/daily-js/instance-methods/update-custom-tray-buttons)
* [`updateInputSettings()`](/reference/daily-js/instance-methods/update-input-settings)
* [`updateLiveStreaming()`](/reference/daily-js/instance-methods/update-live-streaming)
* [`updateParticipant()`](/reference/daily-js/instance-methods/update-participant)
* [`updateParticipants()`](/reference/daily-js/instance-methods/update-participants)
* [`updateReceiveSettings()`](/reference/daily-js/instance-methods/update-receive-settings)
* [`updateRecording()`](/reference/daily-js/instance-methods/update-recording)
* [`updateScreenShare()`](/reference/daily-js/instance-methods/update-screen-share)
* [`updateSendSettings()`](/reference/daily-js/instance-methods/update-send-settings)
* [`updateTranscription()`](/reference/daily-js/instance-methods/update-transcription)
* [`updateWaitingParticipant()`](/reference/daily-js/instance-methods/update-waiting-participant)
* [`updateWaitingParticipants()`](/reference/daily-js/instance-methods/update-waiting-participants)
* [`waitingParticipants()`](/reference/daily-js/instance-methods/waiting-participants)


# isDestroyed()
Source: https://docs.daily.co/reference/daily-js/instance-methods/is-destroyed

Returns whether the call instance has been destroyed.

`isDestroyed()`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Returns `true` if [`destroy()`](/reference/daily-js/instance-methods/destroy) has been called on this instance. A destroyed instance cannot be reused.

A call instance can be reused across multiple calls — a sequence of `join()`, `leave()`, `join()` works as expected. Only call `destroy()` when you are completely done with the instance and want to free all associated resources.

<Warning>
  Calling any method on a destroyed instance throws an `Error`.
</Warning>

## Return value

Returns `boolean`.

## Example

```javascript theme={null}
if (!call.isDestroyed()) {
  await call.destroy();
}
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [destroy()](/reference/daily-js/instance-methods/destroy)
    * [leave()](/reference/daily-js/instance-methods/leave)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Multi-instance calls](/docs/daily-js/guides/multi-instance)
  </Card>
</CardGroup>


# isLocalAudioLevelObserverRunning()
Source: https://docs.daily.co/reference/daily-js/instance-methods/is-local-audio-level-observer-running

Returns whether the local audio level observer is currently active.

`isLocalAudioLevelObserverRunning()`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Returns `true` if [`startLocalAudioLevelObserver()`](/reference/daily-js/instance-methods/start-local-audio-level-observer) has been called and the observer is currently active.

## Return value

Returns `boolean`.

## Example

```javascript theme={null}
if (!call.isLocalAudioLevelObserverRunning()) {
  await call.startLocalAudioLevelObserver(100);
}
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [startLocalAudioLevelObserver()](/reference/daily-js/instance-methods/start-local-audio-level-observer)
    * [stopLocalAudioLevelObserver()](/reference/daily-js/instance-methods/stop-local-audio-level-observer)
    * [getLocalAudioLevel()](/reference/daily-js/instance-methods/get-local-audio-level)
  </Card>

  <Card title="Events" icon="bolt">
    * [local-audio-level](/reference/daily-js/events/media-events#local-audio-level)
  </Card>
</CardGroup>


# isRemoteParticipantsAudioLevelObserverRunning()
Source: https://docs.daily.co/reference/daily-js/instance-methods/is-remote-participants-audio-level-observer-running

Returns whether the remote participants audio level observer is currently active.

`isRemoteParticipantsAudioLevelObserverRunning()`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Returns `true` if [`startRemoteParticipantsAudioLevelObserver()`](/reference/daily-js/instance-methods/start-remote-participants-audio-level-observer) has been called and the observer is currently active.

## Return value

Returns `boolean`.

## Example

```javascript theme={null}
if (!call.isRemoteParticipantsAudioLevelObserverRunning()) {
  await call.startRemoteParticipantsAudioLevelObserver(100);
}
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [startRemoteParticipantsAudioLevelObserver()](/reference/daily-js/instance-methods/start-remote-participants-audio-level-observer)
    * [stopRemoteParticipantsAudioLevelObserver()](/reference/daily-js/instance-methods/stop-remote-participants-audio-level-observer)
    * [getRemoteParticipantsAudioLevel()](/reference/daily-js/instance-methods/get-remote-participants-audio-level)
  </Card>

  <Card title="Events" icon="bolt">
    * [remote-participants-audio-level](/reference/daily-js/events/media-events#remote-participants-audio-level)
  </Card>
</CardGroup>


# join()
Source: https://docs.daily.co/reference/daily-js/instance-methods/join

Join a Daily room and begin sending and receiving media.

`join({properties})`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Joins a meeting. The `properties` argument is optional, but the meeting `url` must be set here if it was not set in a [factory method](/reference/daily-js/factory-methods). You can respond to a successful join either by awaiting the returned Promise or by listening for the [`joined-meeting`](/reference/daily-js/events/lifecycle-events#joined-meeting) event — the two are equivalent.

## Parameters

<ParamField type="DailyCallOptions">
  Optional. Configuration for the meeting. The meeting `url` must be set here if it was not provided to a factory method. All other fields are optional. See the full [properties reference](/reference/daily-js/types/daily-call-options) for all available options.
</ParamField>

## Return value

Returns a `Promise<DailyParticipants>` that resolves with the local participant object once the join completes. This is the same value passed to the `joined-meeting` event. See [`participants()`](/reference/daily-js/instance-methods/participants) for the full shape of the returned object.

## Example

```javascript theme={null}
const call = Daily.createCallObject();

try {
  const participants = await call.join({ url: 'https://your-domain.daily.co/room-name' });
  console.log('Joined as', participants.local.user_name);
  showCallUI(); // update your UI state now that the call is live
} catch (err) {
  console.error('Failed to join:', err);
}
```

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyCallOptions](/reference/daily-js/types/daily-call-options)
  </Card>

  <Card title="Methods" icon="code">
    * [leave()](/reference/daily-js/instance-methods/leave)
    * [preAuth()](/reference/daily-js/instance-methods/pre-auth)
  </Card>

  <Card title="Events" icon="bolt">
    * [joined-meeting](/reference/daily-js/events/lifecycle-events#joined-meeting)
    * [left-meeting](/reference/daily-js/events/lifecycle-events#left-meeting)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Introduction](/docs/daily-js/introduction)
    * [Call configuration](/docs/daily-js/concepts/call-configuration)
  </Card>
</CardGroup>


# leave()
Source: https://docs.daily.co/reference/daily-js/instance-methods/leave

Leave the current Daily call.

`leave()`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Leaves the current meeting. If there is no active meeting, this method does nothing.

After calling `leave()`, the call object remains available and can be reused — call `join()` again to start a new session without having to recreate the call object. Call [`destroy()`](/reference/daily-js/instance-methods/destroy) when you are done with the call object entirely.

## Return value

Returns a `Promise<void>` that resolves once the participant has left.

## Example

```javascript theme={null}
document.getElementById('leave-btn').onclick = async () => {
  await call.leave();
  showLobbyUI();
};

call.on('left-meeting', () => {
  // Also fires when ejected or when a fatal error ends the call
  showLobbyUI();
});
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [join()](/reference/daily-js/instance-methods/join)
    * [destroy()](/reference/daily-js/instance-methods/destroy)
  </Card>

  <Card title="Events" icon="bolt">
    * [left-meeting](/reference/daily-js/events/lifecycle-events#left-meeting)
    * [error](/reference/daily-js/events/error-events#error)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Introduction](/docs/daily-js/introduction)
  </Card>
</CardGroup>


# load()
Source: https://docs.daily.co/reference/daily-js/instance-methods/load

Pre-loads the Daily JavaScript bundle to reduce join latency.

`load(properties?)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Pre-loads the JavaScript bundle needed to join a call, giving you a head start before calling [`join()`](/reference/daily-js/instance-methods/join). This is purely an optimization — if you skip it, the bundle loads automatically on the first call to `preAuth()`, `startCamera()`, or `join()` and is often already cached.

Calling `load()` will update the meeting state and trigger events as follows:

* On success: [`loading`](/reference/daily-js/events/lifecycle-events#loading) → [`loaded`](/reference/daily-js/events/lifecycle-events#loaded)
* On failure: [`loading`](/reference/daily-js/events/lifecycle-events#loading) → one or more [`load-attempt-failed`](/reference/daily-js/events/lifecycle-events#load-attempt-failed) → [`error`](/reference/daily-js/events/error-events#error)

## Return value

Returns `Promise<void>`.

## Example

```javascript theme={null}
// Pre-load on page mount so join() is faster when the user clicks "Join"
call.on('loaded', () => console.log('Bundle ready'));
await call.load();
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [join()](/reference/daily-js/instance-methods/join)
    * [preAuth()](/reference/daily-js/instance-methods/pre-auth)
  </Card>

  <Card title="Events" icon="bolt">
    * [loading](/reference/daily-js/events/lifecycle-events#loading)
    * [loaded](/reference/daily-js/events/lifecycle-events#loaded)
    * [load-attempt-failed](/reference/daily-js/events/lifecycle-events#load-attempt-failed)
  </Card>
</CardGroup>


# localAudio()
Source: https://docs.daily.co/reference/daily-js/instance-methods/local-audio

Returns whether the local microphone is on.

`localAudio()`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Returns whether the local microphone is on. Returns `false` when the local audio track state is `'off'` or `'blocked'`, and `true` otherwise.

## Return value

Returns `boolean`.

## Example

```javascript theme={null}
if (!call.localAudio()) {
  console.log('Mic is off or blocked');
}
```

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyTrackState](/reference/daily-js/types/daily-track-state)
  </Card>

  <Card title="Methods" icon="code">
    * [localVideo()](/reference/daily-js/instance-methods/local-video)
    * [setLocalAudio()](/reference/daily-js/instance-methods/set-local-audio)
    * [participants()](/reference/daily-js/instance-methods/participants)
  </Card>

  <Card title="Events" icon="bolt">
    * [participant-updated](/reference/daily-js/events/participant-events#participant-updated)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Audio and video](/docs/daily-js/guides/audio-video)
  </Card>
</CardGroup>


# localScreenAudio()
Source: https://docs.daily.co/reference/daily-js/instance-methods/local-screen-audio

Returns whether the local screen share audio track is on.

`localScreenAudio()`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Returns whether the local screen share audio track is on. Returns `false` when the screen audio track state is `'off'` or `'blocked'`, `true` otherwise, and `null` if not in a call.

## Return value

Returns `boolean | null`.

## Example

```javascript theme={null}
if (call.localScreenAudio()) {
  console.log('Screen audio is being shared');
}
```

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyTrackState](/reference/daily-js/types/daily-track-state)
  </Card>

  <Card title="Methods" icon="code">
    * [localScreenVideo()](/reference/daily-js/instance-methods/local-screen-video)
    * [startScreenShare()](/reference/daily-js/instance-methods/start-screen-share)
    * [updateScreenShare()](/reference/daily-js/instance-methods/update-screen-share)
    * [stopScreenShare()](/reference/daily-js/instance-methods/stop-screen-share)
  </Card>

  <Card title="Events" icon="bolt">
    * [participant-updated](/reference/daily-js/events/participant-events#participant-updated)
  </Card>
</CardGroup>


# localScreenVideo()
Source: https://docs.daily.co/reference/daily-js/instance-methods/local-screen-video

Returns whether the local screen share video track is on.

`localScreenVideo()`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Returns whether the local screen share video track is on. Returns `false` when the screen video track state is `'off'` or `'blocked'`, `true` otherwise, and `null` if not in a call.

## Return value

Returns `boolean | null`.

## Example

```javascript theme={null}
if (call.localScreenVideo()) {
  console.log('Screen is being shared');
}
```

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyTrackState](/reference/daily-js/types/daily-track-state)
  </Card>

  <Card title="Methods" icon="code">
    * [localScreenAudio()](/reference/daily-js/instance-methods/local-screen-audio)
    * [startScreenShare()](/reference/daily-js/instance-methods/start-screen-share)
    * [updateScreenShare()](/reference/daily-js/instance-methods/update-screen-share)
    * [stopScreenShare()](/reference/daily-js/instance-methods/stop-screen-share)
  </Card>

  <Card title="Events" icon="bolt">
    * [participant-updated](/reference/daily-js/events/participant-events#participant-updated)
  </Card>
</CardGroup>


# localVideo()
Source: https://docs.daily.co/reference/daily-js/instance-methods/local-video

Returns whether the local camera is on.

`localVideo()`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Returns whether the local camera is on. Returns `false` when the local video track state is `'off'` or `'blocked'`, `true` otherwise, and `null` if not in a call.

## Return value

Returns `boolean | null`.

## Example

```javascript theme={null}
if (!call.localVideo()) {
  console.log('Camera is off, blocked, or not in a call');
}
```

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyTrackState](/reference/daily-js/types/daily-track-state)
  </Card>

  <Card title="Methods" icon="code">
    * [localAudio()](/reference/daily-js/instance-methods/local-audio)
    * [setLocalVideo()](/reference/daily-js/instance-methods/set-local-video)
    * [participants()](/reference/daily-js/instance-methods/participants)
  </Card>

  <Card title="Events" icon="bolt">
    * [participant-updated](/reference/daily-js/events/participant-events#participant-updated)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Audio and video](/docs/daily-js/guides/audio-video)
  </Card>
</CardGroup>


# meetingSessionState()
Source: https://docs.daily.co/reference/daily-js/instance-methods/meeting-session-state

Returns the current meeting session state, including shared data and network topology.

`meetingSessionState()`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Returns any shared data set via [`setMeetingSessionData()`](/reference/daily-js/instance-methods/set-meeting-session-data) and the current network topology.

This method is synchronous — it does not return a Promise.

## Return value

Returns `DailyMeetingSessionState`:

<ResponseField name="data" type="unknown">
  Shared session data set by any participant via `setMeetingSessionData()`.
</ResponseField>

<ResponseField name="topology" type="string">
  Current network topology: `'sfu'`, `'peer'`, or `'none'`.
</ResponseField>

## Example

```javascript theme={null}
const { data, topology } = call.meetingSessionState();
console.log('Shared data:', data);
console.log('Topology:', topology);
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [setMeetingSessionData()](/reference/daily-js/instance-methods/set-meeting-session-data)
    * [meetingSessionSummary()](/reference/daily-js/instance-methods/meeting-session-summary)
  </Card>

  <Card title="Events" icon="bolt">
    * [meeting-session-state-updated](/reference/daily-js/events/messaging-events#meeting-session-state-updated)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Custom messages and shared data](/docs/daily-js/guides/custom-messages)
  </Card>
</CardGroup>


# meetingSessionSummary()
Source: https://docs.daily.co/reference/daily-js/instance-methods/meeting-session-summary

Returns a summary of the current or most recently ended meeting session.

`meetingSessionSummary()`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Currently, this method simply returns the session's id. Future goals may include returning information like the total number of unique participants seen in the session or the session's start time and end timestamps.

This method is synchronous — it does not return a Promise. Use it instead of the deprecated [`getMeetingSession()`](/reference/daily-js/instance-methods/get-meeting-session).

## Return value

Returns `DailyMeetingSessionSummary`:

<ResponseField name="id" type="string">
  The unique ID of the meeting session. This ID is stable for the lifetime of the session and can be used for post-call lookups via the REST API — for example, to retrieve [logs](/reference/rest-api/logs/list-logs) or [transcripts](/reference/rest-api/transcripts/list-transcripts) associated with the session or find it in your dashboard.
</ResponseField>

## Example

```javascript theme={null}
const { id } = call.meetingSessionSummary();
console.log('Session ID:', id);

// Use the session ID after the call ends to fetch transcripts
const res = await fetch(`https://api.daily.co/v1/transcripts?mtgSessionId=${id}`, {
  headers: { Authorization: `Bearer ${DAILY_API_KEY}` },
});
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [meetingSessionState()](/reference/daily-js/instance-methods/meeting-session-state)
    * [setMeetingSessionData()](/reference/daily-js/instance-methods/set-meeting-session-data)
  </Card>

  <Card title="Events" icon="bolt">
    * [meeting-session-summary-updated](/reference/daily-js/events/messaging-events#meeting-session-summary-updated)
  </Card>

  <Card title="REST API" icon="server">
    * [List logs](/reference/rest-api/logs/list-logs)
    * [List transcripts](/reference/rest-api/transcripts/list-transcripts)
  </Card>
</CardGroup>


# meetingState()
Source: https://docs.daily.co/reference/daily-js/instance-methods/meeting-state

Returns the current meeting lifecycle state.

`meetingState()`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

This method is synchronous — it does not return a Promise.

## Return value

Returns a `DailyMeetingState` string:

* `'new'` — instance created, no activity yet
* `'loading'` — loading the Daily bundle
* `'loaded'` — bundle loaded, ready to join
* `'joining-meeting'` — [`join()`](/reference/daily-js/instance-methods/join) called, connection in progress
* `'joined-meeting'` — successfully joined the call
* `'left-meeting'` — left or ejected from the call
* `'error'` — a fatal error occurred; the connection is terminated but state is `'error'` rather than `'left-meeting'`

## Example

```javascript theme={null}
const state = call.meetingState();

if (state === 'joined-meeting') {
  console.log('In call');
} else if (state === 'error') {
  console.log('Fatal error — call terminated');
}
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [join()](/reference/daily-js/instance-methods/join)
    * [leave()](/reference/daily-js/instance-methods/leave)
    * [load()](/reference/daily-js/instance-methods/load)
  </Card>

  <Card title="Events" icon="bolt">
    * [joining-meeting](/reference/daily-js/events/lifecycle-events#joining-meeting)
    * [joined-meeting](/reference/daily-js/events/lifecycle-events#joined-meeting)
    * [left-meeting](/reference/daily-js/events/lifecycle-events#left-meeting)
    * [error](/reference/daily-js/events/error-events#error)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Call lifecycle](/docs/daily-js/introduction#call-lifecycle)
  </Card>
</CardGroup>


# off()
Source: https://docs.daily.co/reference/daily-js/instance-methods/off

Removes an event listener from a Daily call event.

`off(eventName, callback)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Removes a previously registered event listener. Follows the Node.js [`EventEmitter`](https://nodejs.org/api/events.html#events_class_eventemitter) interface. The `callback` must be the same function reference passed to [`on()`](/reference/daily-js/instance-methods/on) or [`once()`](/reference/daily-js/instance-methods/once).

Returns `this`, so calls can be chained.

## Parameters

<ParamField type="DailyEvent">
  The event name to unsubscribe from.
</ParamField>

<ParamField type="function">
  The exact function reference that was registered with `on()` or `once()`.
</ParamField>

## Return value

Returns `this` (the `DailyCall` instance) for chaining.

## Example

```javascript theme={null}
function handleParticipantJoined({ participant }) {
  console.log('Joined:', participant.user_name);
}

call.on('participant-joined', handleParticipantJoined);

// Later, remove the listener
call.off('participant-joined', handleParticipantJoined);
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [on()](/reference/daily-js/instance-methods/on)
    * [once()](/reference/daily-js/instance-methods/once)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Events](/docs/daily-js/concepts/events)
  </Card>
</CardGroup>


# on()
Source: https://docs.daily.co/reference/daily-js/instance-methods/on

Subscribes to a Daily call event.

`on(eventName, callback)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Subscribes to a Daily call event. Follows the Node.js [`EventEmitter`](https://nodejs.org/api/events.html#events_class_eventemitter) interface. The callback is called every time the event fires until explicitly removed with [`off()`](/reference/daily-js/instance-methods/off).

Returns `this`, so calls can be chained.

## Parameters

<ParamField type="DailyEvent">
  The event name to subscribe to. See the [Events](/reference/daily-js/events) reference for all available events.
</ParamField>

<ParamField type="function">
  Function called when the event fires. Receives an event object whose shape depends on the event.
</ParamField>

## Return value

Returns `this` (the `DailyCall` instance) for chaining.

## Example

```javascript theme={null}
call
  .on('joined-meeting', ({ participants }) => {
    console.log('Joined! Participants:', participants);
  })
  .on('participant-joined', ({ participant }) => {
    console.log('New participant:', participant.user_name);
  })
  .on('left-meeting', () => {
    console.log('Left the call');
  });
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [off()](/reference/daily-js/instance-methods/off)
    * [once()](/reference/daily-js/instance-methods/once)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Events](/docs/daily-js/concepts/events)
  </Card>
</CardGroup>


# once()
Source: https://docs.daily.co/reference/daily-js/instance-methods/once

Subscribes to a Daily call event, firing only once.

`once(eventName, callback)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Subscribes to a Daily call event and fires the callback exactly once, then automatically removes the listener. Follows the Node.js [`EventEmitter`](https://nodejs.org/api/events.html#events_class_eventemitter) interface.

Returns `this`, so calls can be chained.

## Parameters

<ParamField type="DailyEvent">
  The event name to subscribe to. See the [Events](/reference/daily-js/events) reference for all available events.
</ParamField>

<ParamField type="function">
  Function called when the event fires. Automatically removed after the first invocation.
</ParamField>

## Return value

Returns `this` (the `DailyCall` instance) for chaining.

## Example

```javascript theme={null}
// Wait for the first joined-meeting event, then stop listening
call.once('joined-meeting', ({ participants }) => {
  console.log('Joined for the first time:', participants);
});
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [on()](/reference/daily-js/instance-methods/on)
    * [off()](/reference/daily-js/instance-methods/off)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Events](/docs/daily-js/concepts/events)
  </Card>
</CardGroup>


# participantCounts()
Source: https://docs.daily.co/reference/daily-js/instance-methods/participant-counts

Returns the total number of present and hidden participants currently in the call.

`participantCounts()`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Returns participant totals for the current call, split between present and hidden participants. Useful when you only need counts — for example, a "people in room" indicator — without needing the full participant objects from [`participants()`](/reference/daily-js/instance-methods/participants).

Values are only updated after [`join()`](/reference/daily-js/instance-methods/join) completes. Pre-join steps like [`preAuth()`](/reference/daily-js/instance-methods/pre-auth) and [`startCamera()`](/reference/daily-js/instance-methods/start-camera) do not affect counts. The local participant is included in the totals.

## Return value

Returns `DailyParticipantCounts`:

<ResponseField name="present" type="number">
  Participants with `hasPresence: true` — visible to others and may be able to share media (depending on separate media permissions). These are the participants returned by [`participants()`](/reference/daily-js/instance-methods/participants).
</ResponseField>

<ResponseField name="hidden" type="number">
  Participants with `hasPresence: false` — not visible to others and unable to share media. Common in large meetings where some participants are passive viewers.
</ResponseField>

## Example

```javascript theme={null}
const { present, hidden } = call.participantCounts();
const total = present + hidden;
console.log(`${total} in call (${present} present, ${hidden} hidden)`);
```

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyParticipantPermissions](/reference/daily-js/types/daily-participant-permissions)
  </Card>

  <Card title="Methods" icon="code">
    * [participants()](/reference/daily-js/instance-methods/participants)
    * [updateParticipant()](/reference/daily-js/instance-methods/update-participant)
  </Card>

  <Card title="Events" icon="bolt">
    * [participant-counts-updated](/reference/daily-js/events/participant-events#participant-counts-updated)
  </Card>
</CardGroup>


# participants()
Source: https://docs.daily.co/reference/daily-js/instance-methods/participants

Returns an object containing all current participants in the call, keyed by participant ID.

`participants()`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Returns an object keyed by `'local'` for the local participant and by `session_id` for each remote participant.

## Return value

```typescript theme={null}
interface DailyParticipantsObject {
  local: DailyParticipant;
  [sessionId: string]: DailyParticipant;
}
```

<ResponseField name="session_id" type="string">
  A unique identifier for this specific join event. This is Daily's internal identifier, randomly generated on every `join()` call. It is the key used in `participants()` and `updateParticipant()` as well as REST API endpoints. It is not stable across reconnects — if a participant leaves and rejoins, they will have a new `session_id`.
</ResponseField>

<ResponseField name="user_id" type="string">
  The participant's user ID if set via a meeting token; otherwise defaults to `session_id`.
</ResponseField>

<ResponseField name="user_name" type="string">
  The participant's display name. Set via a meeting token, [`DailyCallOptions`](/reference/daily-js/types/daily-call-options), or [`setUserName()`](/reference/daily-js/instance-methods/set-user-name).
</ResponseField>

<ResponseField name="userData" type="object">
  Optional custom data associated with the participant. Only present if explicitly set via [`DailyCallOptions`](/reference/daily-js/types/daily-call-options) or [`setUserData()`](/reference/daily-js/instance-methods/set-user-data).
</ResponseField>

<ResponseField name="local" type="boolean">
  `true` for the local participant.
</ResponseField>

<ResponseField name="owner" type="boolean">
  `true` if the participant was granted owner status via a meeting token or was granted owner permissions.
</ResponseField>

<ResponseField name="joined_at" type="Date">
  A JavaScript `Date` object representing the time the participant joined the room. Not set until after the joined-meeting event. Note that the timestamp is set to the server’s clock time when the participant joins, so it may be slightly different from the local client’s clock.
</ResponseField>

<ResponseField name="networkQualityState" type="'good' | 'warning' | 'bad' | 'unknown'">
  The current network quality state of the participant. For the local participant, this matches the `networkState` value returned by [`getNetworkStats()`](/reference/daily-js/instance-methods/get-network-stats) and in the `network-quality-change` events.
</ResponseField>

<ResponseField name="participantType" type="string | undefined">
  Describes the participant type for SIP, PSTN, and remote media player participants. Not set for standard web participants.

  <Expandable title="participantType values">
    | Value                 | Description                                                              |
    | --------------------- | ------------------------------------------------------------------------ |
    | `remote-media-player` | Participant is a remote media player                                     |
    | `sip-dial-in`         | Participant joined via a SIP device dialing into the Daily room          |
    | `sip-dial-out`        | Participant joined when a SIP endpoint was called using the dial-out API |
    | `pstn-dial-in`        | Participant joined via dialing a PIN-based phone number                  |
    | `pstn-dial-out`       | Participant joined when a phone number was called using the dial-out API |
    | `unknown`             | Participant is SIP/PSTN but Daily cannot determine the exact type        |
  </Expandable>
</ResponseField>

<ResponseField name="tracks" type="DailyParticipantTracks">
  An object whose keys are track types (`'audio'`, `'video'`, `'screenAudio'`, `'screenVideo'`, plus any custom track names) and whose values are [`DailyTrackState`](/reference/daily-js/types/daily-track-state) objects describing subscription status, playback state, and the underlying `MediaStreamTrack`.
</ResponseField>

<ResponseField name="permissions" type="DailyParticipantPermissions">
  An object describing what the participant is permitted to do — which media they can send, which streams they can receive, and which admin actions they can perform. See [`DailyParticipantPermissions`](/reference/daily-js/types/daily-participant-permissions) for the full field reference.
</ResponseField>

### Example return value

```json theme={null}
{
  "local": {
    "session_id": "3c9ba1ea-baab-4876-d501-21a1d49c0902",
    "user_name": "A. User Name",
    "user_id": "user_123",
    "local": true,
    "owner": true,
    "networkQualityState": "good",
    "joined_at": "Mon Oct 18 2021 13:39:56 GMT-0700 (Pacific Daylight Time)",
    "userData": {},
    "tracks": {
      "audio": {
        "state": "playable",
        "track": MediaStreamTrack,
        "persistentTrack": MediaStreamTrack
      },
      "video": {
        "state": "playable",
        "track": MediaStreamTrack,
        "persistentTrack": MediaStreamTrack
      }
    },
    "permissions": {
      "hasPresence": true,
      "canSend": ["video", "audio"],
      "canReceive": { "base": true },
      "canAdmin": false
    }
  },
  "e20b7ead-54c3-459e-800a-ca4f21882f2f": {
    "session_id": "e20b7ead-54c3-459e-800a-ca4f21882f2f",
    "user_name": "",
    "user_id": "e20b7ead-54c3-459e-800a-ca4f21882f2f",
    "local": false,
    "owner": false,
    "networkQualityState": "warning",
    "joined_at": "Mon Oct 18 2021 13:39:56 GMT-0700 (Pacific Daylight Time)",
    "tracks": {
      "audio": {
        "subscribed": true,
        "state": "playable",
        "track": MediaStreamTrack,
        "persistentTrack": MediaStreamTrack
      },
      "video": {
        "subscribed": false,
        "state": "sendable",
      },
      "screenAudio": {
        "subscribed": true,
        "state": "off",
        "off": { "byUser": true }
      },
      "screenVideo": {
        "subscribed": true,
        "state": "off",
        "off": { "byUser": true }
      },
    },
    "permissions": {
      "hasPresence": true,
      "canSend": ["video", "audio"],
      "canReceive": {
        "base": true,
        "byUserId": { "foo": false },
        "byParticipantId": {
          "42fb115a-6d42-4155-ae4f-c96629f5217d": {
            "audio": false
          }
        }
      },
      "canAdmin": ["participants", "streaming"]
    }
  }
}
```

## Example

```javascript theme={null}
const participants = call.participants();

// Access the local participant
const { session_id, user_name, tracks } = participants.local;

// Iterate over all remote participants
Object.values(participants).forEach((participant) => {
  if (!participant.local) {
    console.log(participant.session_id, participant.networkQualityState);
  }
});
```

## Deprecated properties

<Warning>
  **A note about the `audio`, `video`, and `screen` properties**

  These boolean properties indicate whether the corresponding track is available and ready to send. However, the value briefly becomes `false` when a track is loading. Use the `tracks` property for accurate, detailed track state instead.
</Warning>

<Warning>
  **A note about the `audioTrack`, `videoTrack`, and `screenVideoTrack` properties in call object mode**

  These properties expose the raw `MediaStreamTrack` a participant is sending, if available. Use `tracks[type].persistentTrack` instead for more reliable behavior.
</Warning>

<Warning>
  **A note about the `networkThreshold` property**

  This property corresponds to the deprecated `threshold` value in [`getNetworkStats()`](/reference/daily-js/instance-methods/get-network-stats). Use `networkQualityState` instead.
</Warning>

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyParticipant](/reference/daily-js/types/daily-participant)
    * [DailyTrackState](/reference/daily-js/types/daily-track-state)
    * [DailyParticipantPermissions](/reference/daily-js/types/daily-participant-permissions)
  </Card>

  <Card title="Methods" icon="code">
    * [updateParticipant()](/reference/daily-js/instance-methods/update-participant)
    * [updateParticipants()](/reference/daily-js/instance-methods/update-participants)
  </Card>

  <Card title="Events" icon="bolt">
    * [participant-joined](/reference/daily-js/events/participant-events#participant-joined)
    * [participant-updated](/reference/daily-js/events/participant-events#participant-updated)
    * [participant-left](/reference/daily-js/events/participant-events#participant-left)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Participants](/docs/daily-js/concepts/participants)
    * [Permissions](/docs/daily-js/guides/permissions)
    * [Tracks and Media](/docs/daily-js/concepts/tracks)
  </Card>
</CardGroup>


# preAuth()
Source: https://docs.daily.co/reference/daily-js/instance-methods/pre-auth

Pre-authenticates a participant with the server before joining a call.

`preAuth(properties?)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Optionally called before [`join()`](/reference/daily-js/instance-methods/join) to pre-authenticate with the server. This unlocks information that would otherwise only be available after `join()`:

* [`accessState()`](/reference/daily-js/instance-methods/access-state) — whether the participant needs to wait in a lobby
* [`room()`](/reference/daily-js/instance-methods/room) — room and domain configuration

If the Daily bundle isn't already loaded, `preAuth()` will load it. It also will give access to the local participant through the `participant-updated` and `participants()` method. It will not initialize the local media. To access local devices before joining, use [`startCamera()`](/reference/daily-js/instance-methods/start-camera).

<Note>
  `url` and `token` are locked in when `preAuth()` is called. Attempting to pass different values to `join()` will result in an error.
</Note>

## Parameters

Takes the same properties as [`join()`](/reference/daily-js/instance-methods/join). At minimum, provide:

<ParamField type="string">
  The Daily room URL.
</ParamField>

<ParamField type="string">
  Technically optional, but should be provided if a meeting token will be used for the call.
</ParamField>

## Return value

Returns `Promise<{ access: DailyAccess }>`. `access` is `'unknown'` or `{ level: 'none' | 'lobby' | 'full' }`.

## Example

```javascript theme={null}
const { access } = await call.preAuth({ url: DAILY_ROOM_URL, token: MEETING_TOKEN });

if (access.level === 'lobby') {
  // Show a waiting room UI before joining
  showWaitingRoom();
} else {
  await call.join({ url: DAILY_ROOM_URL, token: MEETING_TOKEN });
}
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [join()](/reference/daily-js/instance-methods/join)
    * [accessState()](/reference/daily-js/instance-methods/access-state)
    * [room()](/reference/daily-js/instance-methods/room)
    * [startCamera()](/reference/daily-js/instance-methods/start-camera)
  </Card>

  <Card title="Events" icon="bolt">
    * [access-state-updated](/reference/daily-js/events/lifecycle-events#access-state-updated)
    * [participant-updated](/reference/daily-js/events/participant-events#participant-updated)
  </Card>

  <Card title="REST API" icon="server">
    * [Create meeting token](/reference/rest-api/meeting-tokens/create-meeting-token)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Waiting room](/docs/daily-js/guides/waiting-room)
  </Card>
</CardGroup>


# removeLiveStreamingEndpoints()
Source: https://docs.daily.co/reference/daily-js/instance-methods/remove-live-streaming-endpoints

Removes one or more RTMP endpoints from an active live stream.

`removeLiveStreamingEndpoints(options)`

<Badge>Paid plans only</Badge>

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Removes one or more RTMP endpoints from an active live stream. Only works on streams started with the `endpoints` parameter in [`startLiveStreaming()`](/reference/daily-js/instance-methods/start-live-streaming) — not on streams started with `rtmpUrl`.

<Warning>
  Do not use this method to remove all endpoints. To stop streaming entirely, call [`stopLiveStreaming()`](/reference/daily-js/instance-methods/stop-live-streaming). Attempting to remove all endpoints with this method will fail and emit a [`nonfatal-error`](/reference/daily-js/events/error-events#nonfatal-error) with type `'live-streaming-warning'`.
</Warning>

## Parameters

<ParamField type="DailyStreamingEndpoint[]">
  Array of endpoints to remove. Each entry must include the `endpoint` URL.
</ParamField>

<ParamField type="string">
  Optional. The live streaming instance to target when multiple streams are active.
</ParamField>

## Return value

`void`

## Example

```javascript theme={null}
await call.removeLiveStreamingEndpoints({
  endpoints: [
    { endpoint: 'rtmp://example.com/live/stream2' },
    { endpoint: 'rtmp://example.com/live/stream3' },
  ],
});
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [addLiveStreamingEndpoints()](/reference/daily-js/instance-methods/add-live-streaming-endpoints)
    * [startLiveStreaming()](/reference/daily-js/instance-methods/start-live-streaming)
    * [updateLiveStreaming()](/reference/daily-js/instance-methods/update-live-streaming)
    * [stopLiveStreaming()](/reference/daily-js/instance-methods/stop-live-streaming)
  </Card>

  <Card title="Events" icon="bolt">
    * [live-streaming-started](/reference/daily-js/events/live-streaming-events#live-streaming-started)
    * [live-streaming-stopped](/reference/daily-js/events/live-streaming-events#live-streaming-stopped)
    * [nonfatal-error](/reference/daily-js/events/error-events#nonfatal-error)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Live streaming](/docs/daily-js/features/live-streaming)
    * [Live streaming overview](/docs/guides/features/live-streaming)
  </Card>
</CardGroup>


# requestAccess()
Source: https://docs.daily.co/reference/daily-js/instance-methods/request-access

Requests full access to a call from the lobby.

`requestAccess({ access?, name })`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Requests full access to a call when the participant is currently in the lobby. Causes the participant to appear in the meeting admins' [`waitingParticipants()`](/reference/daily-js/instance-methods/waiting-participants) set, triggering a [`waiting-participant-added`](/reference/daily-js/events/participant-events#waiting-participant-added) event for admins.

Calling `requestAccess()` again with a new `name` updates the participant's entry in `waitingParticipants()`, triggering [`waiting-participant-updated`](/reference/daily-js/events/participant-events#waiting-participant-updated).

<Note>
  Currently, the only valid request is `{ level: 'full' }`, and it can only be made from `{ level: 'lobby' }`. If access is denied, the response will show `{ level: 'lobby' }` but the participant will be immediately ejected with an [`error`](/reference/daily-js/events/error-events#error) event.
</Note>

## Parameters

<ParamField type="object">
  Optional. The access level to request. Currently must be `{ level: 'full' }` if provided.
</ParamField>

<ParamField type="string">
  The participant's display name shown to the meeting admins in the waiting room.
</ParamField>

## Return value

Returns `Promise<{ access: DailyAccess, granted: boolean }>`:

<ResponseField name="access" type="DailyAccess">
  The new access level: `{ level: 'none' | 'lobby' | 'full' }`.
</ResponseField>

<ResponseField name="granted" type="boolean">
  Whether the access request was granted.
</ResponseField>

## Example

```javascript theme={null}
const { granted } = await call.requestAccess({
  access: { level: 'full' },
  name: 'Jane Smith',
});

if (granted) {
  console.log('Access granted — joining call');
} else {
  console.log('Access denied');
}
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [accessState()](/reference/daily-js/instance-methods/access-state)
    * [waitingParticipants()](/reference/daily-js/instance-methods/waiting-participants)
    * [preAuth()](/reference/daily-js/instance-methods/pre-auth)
  </Card>

  <Card title="Events" icon="bolt">
    * [access-state-updated](/reference/daily-js/events/lifecycle-events#access-state-updated)
    * [waiting-participant-added](/reference/daily-js/events/participant-events#waiting-participant-added)
    * [waiting-participant-updated](/reference/daily-js/events/participant-events#waiting-participant-updated)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Waiting room](/docs/daily-js/guides/waiting-room)
  </Card>
</CardGroup>


# requestFullscreen()
Source: https://docs.daily.co/reference/daily-js/instance-methods/request-fullscreen

Expands the Daily Prebuilt iframe to fullscreen.

`requestFullscreen()`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Calls the browser's [`requestFullscreen()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen) on the Prebuilt iframe.

<Warning>
  Not supported on iOS 15.1 and later due to browser limitations.
</Warning>

## Return value

Returns `Promise<void>`.

## Example

```javascript theme={null}
document.getElementById('fullscreen-btn').onclick = async () => {
  await call.requestFullscreen();
};

call.on('fullscreen', () => {
  document.getElementById('fullscreen-btn').hidden = true;
});
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [exitFullscreen()](/reference/daily-js/instance-methods/exit-fullscreen)
  </Card>

  <Card title="Events" icon="bolt">
    * [fullscreen](/reference/daily-js/events/iframe-ui-events#fullscreen)
    * [exited-fullscreen](/reference/daily-js/events/iframe-ui-events#exited-fullscreen)
  </Card>
</CardGroup>


# room()
Source: https://docs.daily.co/reference/daily-js/instance-methods/room

Returns configuration information about the current room.

`room(options?)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Returns configuration information about the room you're currently connected to, including room-level settings, domain-level settings, and any token configuration.

Also available after [`preAuth()`](/reference/daily-js/instance-methods/pre-auth), before joining. If a room URL has been specified but `join()` hasn't completed yet, resolves with `{ roomUrlPendingJoin: string }`. Resolves to `null` if no room URL has been specified.

## Parameters

<ParamField type="boolean">
  Optional. When `false`, only explicitly-set properties are returned, omitting defaults. Defaults to `true`.
</ParamField>

## Return value

Returns `Promise<DailyRoomInfo | DailyPendingRoomInfo | null>`.

`DailyRoomInfo` contains:

<ResponseField name="id" type="string">Room UUID.</ResponseField>
<ResponseField name="name" type="string">Room name.</ResponseField>

<ResponseField name="config" type="object">
  Room-level configuration. Some properties are omitted for security purposes. See [room configuration](/reference/rest-api/rooms/get-room#response-config) for the full property list.
</ResponseField>

<ResponseField name="domainConfig" type="object">
  Domain-level configuration. Some properties are omitted for security purposes. See [domain configuration](/reference/rest-api/domain) for the full property list.
</ResponseField>

<ResponseField name="tokenConfig" type="object">
  Configuration from the meeting token used to join, if any. See [meeting tokens](/reference/rest-api/meeting-tokens/create-meeting-token) for all properties.
</ResponseField>

## Example

```javascript theme={null}
const info = await call.room();

if (info && 'config' in info) {
  console.log('Max participants:', info.config.max_participants);
  console.log('Recording enabled:', info.config.enable_recording);
}
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [preAuth()](/reference/daily-js/instance-methods/pre-auth)
    * [join()](/reference/daily-js/instance-methods/join)
  </Card>

  <Card title="REST API" icon="server">
    * [Get room](/reference/rest-api/rooms/get-room)
    * [Get domain config](/reference/rest-api/domain/get-domain-config)
    * [Create meeting token](/reference/rest-api/meeting-tokens/create-meeting-token)
  </Card>
</CardGroup>


# sendAppMessage()
Source: https://docs.daily.co/reference/daily-js/instance-methods/send-app-message

Sends a message to one or more participants in the call.

`sendAppMessage(data, recipient?)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Sends a message to other participants during the call. Messages are delivered only to participants currently in the call — they are not stored or replayed for late joiners. Broadcast messages are not delivered to the sender.

## Parameters

<ParamField type="object">
  A JSON-serializable object. Must be within the 4KB size limit.
</ParamField>

<ParamField type="string | string[]">
  Who should receive the message. Pass a participant `session_id`, an array of `session_id`s, or `'*'` to broadcast to everyone. Defaults to `'*'`.

  Note: use `session_id`, not `user_id`.
</ParamField>

## Return value

Returns `this` for chaining.

## Example

```javascript theme={null}
// Broadcast to everyone
call.sendAppMessage({ type: 'reaction', emoji: '👋' });

// Send to a specific participant
call.sendAppMessage({ type: 'dm', text: 'Hey!' }, participantSessionId);

// Send to a set of participants
call.sendAppMessage({ type: 'alert' }, [id1, id2]);
```

## See also

<CardGroup>
  <Card title="Events" icon="bolt">
    * [app-message](/reference/daily-js/events/messaging-events#app-message)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Custom messages and shared data](/docs/daily-js/guides/custom-messages)
  </Card>
</CardGroup>


# sendDTMF()
Source: https://docs.daily.co/reference/daily-js/instance-methods/send-dtmf

Sends DTMF tones during a dial-out call.

`sendDTMF(options)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Sends DTMF tones to a dial-out participant — for example, to navigate an IVR menu after dialing out to a phone number.

## Parameters

<ParamField type="string">
  The `session_id` of the dial-out participant to send tones to.
</ParamField>

<ParamField type="string">
  The DTMF tones to send as a string (e.g. `'1234#'`). Valid characters are `0–9`, `A–D`, `#`, and `*`. Maximum 20 characters.
</ParamField>

<ParamField type="string">
  DTMF method: `'sip-info'`, `'telephone-event'`, or `'auto'`. Defaults to `'auto'`, which selects the best method based on the SIP endpoint's capabilities.
</ParamField>

<ParamField type="number">
  Duration in milliseconds per DTMF digit. Must be an integer between `50` and `2000`. Defaults to `500`.
</ParamField>

## Return value

Returns `Promise<void>`.

## Errors

The following errors may be thrown:

* `sessionId and tones are mandatory parameters of type string`
* `tones string must be upto 20 characters`
* `{character} is not valid DTMF tone` — valid tones are `0–9`, `A–D`, `#`, `*`
* `digitDurationMs must be a finite integer number`
* `digitDurationMs must be between 50ms and 2000ms, the default value is 500ms`

## Example

```javascript theme={null}
// Navigate an IVR: press 1 then confirm with #
await call.sendDTMF({ sessionId: dialOutSessionId, tones: '1#' });

// Use a shorter digit duration
await call.sendDTMF({ sessionId: dialOutSessionId, tones: '2', digitDurationMs: 200 });
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [startDialOut()](/reference/daily-js/instance-methods/start-dial-out)
    * [stopDialOut()](/reference/daily-js/instance-methods/stop-dial-out)
  </Card>

  <Card title="Events" icon="bolt">
    * [dialout-connected](/reference/daily-js/events/telephony-events#dialout-connected)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Dial-in / dial-out](/docs/daily-js/features/dialin-dialout)
  </Card>
</CardGroup>


# setActiveSpeakerMode()
Source: https://docs.daily.co/reference/daily-js/instance-methods/set-active-speaker-mode

Enables or disables Active Speaker mode in Daily Prebuilt.

`setActiveSpeakerMode(enabled)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

In Active Speaker mode, the currently speaking participant is displayed prominently while others appear smaller. This is a local-only change — it does not affect other participants' views.

Has no effect if called before `join()`.

To specify the initial mode when joining, set the `activeSpeakerMode` [call property](/reference/daily-js/types/daily-call-options#param-active-speaker-mode).

<Note>
  Active Speaker mode only exists in Daily Prebuilt. In custom call object builds, listen to [`active-speaker-change`](/reference/daily-js/events/participant-events#active-speaker-change) events to drive your own active speaker UI.
</Note>

## Parameters

<ParamField type="boolean">
  `true` to enable Active Speaker mode, `false` to disable it.
</ParamField>

## Return value

Returns `this` for chaining.

## Example

```javascript theme={null}
document.getElementById('active-speaker-toggle').addEventListener('change', (e) => {
  call.setActiveSpeakerMode(e.target.checked);
});
```

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyCallOptions: activeSpeakerMode](/reference/daily-js/types/daily-call-options#param-active-speaker-mode)
  </Card>

  <Card title="Methods" icon="code">
    * [activeSpeakerMode()](/reference/daily-js/instance-methods/active-speaker-mode)
  </Card>

  <Card title="Events" icon="bolt">
    * [active-speaker-change](/reference/daily-js/events/participant-events#active-speaker-change)
    * [active-speaker-mode-change](/reference/daily-js/events/iframe-ui-events#active-speaker-mode-change)
  </Card>
</CardGroup>


# setBandwidth()
Source: https://docs.daily.co/reference/daily-js/instance-methods/set-bandwidth

Sets a cap on upstream camera video bandwidth.

`setBandwidth({ kbs, trackConstraints? })`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

<Warning>
  Daily's built-in bandwidth management handles most use cases automatically. Only use `setBandwidth()` if you have a specific need — and if you do, [reach out to us](https://www.daily.co/contact/support) so we can better support your use case.
</Warning>

Sets a soft cap on the upstream camera video bandwidth.

In **SFU mode** (the default for all calls), `kbs` caps the total upstream bandwidth across all simulcast layers — Daily sends as many layers as fit within the cap, starting from the lowest.

In **peer-to-peer mode**, `kbs` is a per-peer bitrate target.

## Parameters

<ParamField type="number | 'NO_CAP'">
  Upstream camera bandwidth cap in kilobits per second. Pass `'NO_CAP'` to remove a previously set cap. Does not include audio or screenshare bandwidth.
</ParamField>

<ParamField type="MediaTrackConstraints">
  Deprecated in 0.75.0. Use [`updateInputSettings()`](/reference/daily-js/instance-methods/update-input-settings) instead.
</ParamField>

## Return value

Returns `this` for chaining.

## Example

```javascript theme={null}
// Cap at 20kbps with small frame dimensions
call.setBandwidth({ kbs: 20 });

// Remove the cap
call.setBandwidth({ kbs: 'NO_CAP' });
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [updateSendSettings()](/reference/daily-js/instance-methods/update-send-settings)
    * [updateInputSettings()](/reference/daily-js/instance-methods/update-input-settings)
    * [getNetworkStats()](/reference/daily-js/instance-methods/get-network-stats)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Call quality](/docs/daily-js/guides/network-quality)
  </Card>
</CardGroup>


# setCustomIntegrations()
Source: https://docs.daily.co/reference/daily-js/instance-methods/set-custom-integrations

Sets or updates the custom integrations embedded in Daily Prebuilt.

`setCustomIntegrations(customIntegrations)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Sets the custom integrations displayed in the Daily Prebuilt sidebar. Can be called at any time to update integration configuration.

## Parameters

<ParamField type="DailyCustomIntegrations">
  An object mapping integration IDs (arbitrary strings) to `DailyCustomIntegration` configuration objects.

  <Expandable title="DailyCustomIntegration fields">
    <ResponseField name="allow" type="string">
      Usage: `allow: HTMLIFrameElement['allow']`.\
      [Feature policy](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allow) for the iframe.
    </ResponseField>

    <ResponseField name="controlledBy" type="'*' | 'owners' | string[]">
      Who can start and stop this integration. `'*'` (default) allows all participants; `'owners'` restricts to meeting owners; a `string[]` of `session_id`s restricts to specific participants.
    </ResponseField>

    <ResponseField name="csp" type="string">
      [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) for the iframe. Check browser support before using -- [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#csp) & [here](https://caniuse.com/mdn-api_htmliframeelement_csp)
    </ResponseField>

    <ResponseField name="iconURL" type="string">
      A publicly available URL to an icon image shown alongside the integration in the Prebuilt UI.
    </ResponseField>

    <ResponseField name="label" type="string">
      Display name shown in the Prebuilt UI for this integration.
    </ResponseField>

    <ResponseField name="loading" type="'lazy' | 'eager'">
      `'lazy'` (default) or `'eager'` — controls when the iframe is loaded.
    </ResponseField>

    <ResponseField name="location" type="'main' | 'sidebar'">
      Daily supports two different types of custom integrations:

      1. Main call area integrations
      2. Sidebar integrations
    </ResponseField>

    <ResponseField name="name" type="string">
      Usage: `name: HTMLIFrameElement['name'];`

      A unique [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#name) for the iframe.
    </ResponseField>

    <ResponseField name="referrerPolicy" type="string">
      Usage: `referrerPolicy: HTMLIFrameElement['referrerPolicy'];`

      Indicates which [referrer](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/iframe#referrerpolicy) to send when fetching the frame’s resource.
    </ResponseField>

    <ResponseField name="sandbox" type="string">
      Usage: `sandbox: string`

      A unique policy for the iframe. Applies extra restrictions to the content in the frame.

      For more info see [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#sandbox).
    </ResponseField>

    <ResponseField name="shared" type="'owners' | string[] | boolean">
      **When configured**, it shares the integration’s state with other participants in the call:

      * `true` will share with all other participants
      * `false` won’t share
      * `'owners'` will share with owners only
      * `string[]` will share with participants with given list of session ids

      When the integration is started, it will also be started for other participants with whom it is shared. When it is stopped, it will stop for all participants with whom it is shared.
    </ResponseField>

    <ResponseField name="src" type="string">
      Usage: `src: HTMLIFrameElement['src'];`

      The iframe’s source URL.

      For more info see [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#src).
    </ResponseField>

    <ResponseField name="srcdoc" type="string">
      Usage: `srcdoc: HTMLIFrameElement['srcdoc'];`

      Inline HTML to render in the iframe instead of a URL.

      For more info see [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#srcdoc)

      To see if your browser supports this, see [here](https://caniuse.com/iframe-srcdoc).
    </ResponseField>
  </Expandable>
</ParamField>

## Return value

Returns `this` for chaining.

## Examples

### Setting an integration

```javascript theme={null}
call.setCustomIntegrations({
  miroEmbed: {
    controlledBy: '*',
    iconURL: 'https://files.readme.io/17d4a23-miro-logo-color-square.png',
    label: 'Miro',
    location: 'main',
    name: 'miro',
    shared: false,
    allow: 'fullscreen; clipboard-read; clipboard-write',
    src: 'https://miro.com/app',
  },
});
```

### Restricting control to owners

Setting `controlledBy: 'owners'` means only participants who joined with an owner token can start or stop the integration. Setting `shared: true` propagates the integration's active state to all other participants who have it configured.

```javascript theme={null}
call.setCustomIntegrations({
  miroEmbed: {
    controlledBy: 'owners',
    shared: true,
    // ... other fields
  },
});
```

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyCallOptions: customIntegrations](/reference/daily-js/types/daily-call-options#param-custom-integrations)
  </Card>

  <Card title="Methods" icon="code">
    * [customIntegrations()](/reference/daily-js/instance-methods/custom-integrations)
    * [startCustomIntegrations()](/reference/daily-js/instance-methods/start-custom-integrations)
    * [stopCustomIntegrations()](/reference/daily-js/instance-methods/stop-custom-integrations)
    * [setSidebarView()](/reference/daily-js/instance-methods/set-sidebar-view)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Custom integrations](/docs/prebuilt/customizing-daily-prebuilt#custom-integrations)
  </Card>
</CardGroup>


# setDailyLang()
Source: https://docs.daily.co/reference/daily-js/instance-methods/set-daily-lang

Sets the language for the call.

`setDailyLang(lang)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Sets the language for the call.

<Note>
  **Behavior differs by mode:**

  * **Prebuilt**: updates all UI text immediately.
  * **Custom call object**: stores the language preference internally with no automatic visual effect — you control your own UI. The [`lang-updated`](/reference/daily-js/events/iframe-ui-events#lang-updated) event still fires and [`getDailyLang()`](/reference/daily-js/instance-methods/get-daily-lang) will return the updated value. This is useful for reading language configuration set at the room or domain level and applying it to your own UI.
</Note>

The language can also be set at the domain, room, or token level. See [Changing the language in Daily Prebuilt](/docs/prebuilt/language) for the full guide including priority order.

## Parameters

<ParamField type="DailyLanguageSetting">
  A language code or `'user'`. Supported values:

  | Value     | Language                                                                        |
  | --------- | ------------------------------------------------------------------------------- |
  | `'da'`    | Danish                                                                          |
  | `'de'`    | German                                                                          |
  | `'en'`    | English                                                                         |
  | `'es'`    | Spanish                                                                         |
  | `'fi'`    | Finnish                                                                         |
  | `'fr'`    | French                                                                          |
  | `'it'`    | Italian                                                                         |
  | `'jp'`    | Japanese                                                                        |
  | `'ka'`    | Georgian                                                                        |
  | `'nl'`    | Dutch                                                                           |
  | `'no'`    | Norwegian                                                                       |
  | `'pl'`    | Polish                                                                          |
  | `'pt'`    | Portuguese (Portugal)                                                           |
  | `'pt-BR'` | Portuguese (Brazil)                                                             |
  | `'ru'`    | Russian                                                                         |
  | `'sv'`    | Swedish                                                                         |
  | `'tr'`    | Turkish                                                                         |
  | `'user'`  | Follow the browser's language preference (falls back to English if unsupported) |
</ParamField>

## Return value

Returns `this` for chaining.

## Example

```javascript theme={null}
call.setDailyLang('fr');

call.on('lang-updated', ({ lang, langSetting }) => {
  console.log('Language in effect:', lang);       // 'fr'
  console.log('Language setting:', langSetting);  // 'fr'
});
```

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyCallOptions: lang](/reference/daily-js/types/daily-call-options#param-lang)
  </Card>

  <Card title="Methods" icon="code">
    * [getDailyLang()](/reference/daily-js/instance-methods/get-daily-lang)
  </Card>

  <Card title="Events" icon="bolt">
    * [lang-updated](/reference/daily-js/events/iframe-ui-events#lang-updated)
  </Card>
</CardGroup>


# setIceConfig()
Source: https://docs.daily.co/reference/daily-js/instance-methods/set-ice-config

Configures custom TURN servers for a Daily call.

`setIceConfig(iceConfig?)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

<Note>
  This is part of the **Advanced Firewall Control** add-on. [Contact Sales](https://www.daily.co/company/contact/sales/) to enable this feature.
</Note>

Configures custom TURN servers to use instead of (or alongside) Daily's default TURN servers. Call this periodically — at least once an hour — to keep ICE credentials fresh for reconnections and new peer connections.

For best results, use TURN credentials with a validity period greater than one hour.

## Parameters

<ParamField type="RTCIceServer[]">
  Array of TURN/STUN server configurations. Each entry follows the [`RTCIceServer`](https://w3c.github.io/webrtc-pc/#dom-rtciceserver) shape:

  * `urls`: `string | string[]` (required): Single or multiple STUN/TURN URLs.
  * `username`: `string` (optional): Username for the TURN server(s) specified.
  * `credential`: `string` (optional): Credential for the TURN server(s) specified.
</ParamField>

<ParamField type="'front' | 'back' | 'replace'">
  Controls how custom servers are ordered relative to Daily's defaults:

  * `'front'` — custom servers are tried first (default)
  * `'back'` — Daily's servers are tried first
  * `'replace'` — only custom servers are used

  Most implementations try all servers and pick the lowest-latency option, so ordering rarely matters. Use `'replace'` only when you need to force all traffic through your own TURN servers.
</ParamField>

<ParamField type="'all' | 'relay'">
  * `'all'` (default) uses all candidates.
  * `'relay'` forces relay-only (TURN) candidates — useful for testing firewall traversal but not recommended for production.
</ParamField>

## Return value

Returns `this` for chaining.

## Example

```javascript theme={null}
call.setIceConfig({
  iceServers: [
    {
      urls: [
        'turn:turnserver.example.org:3478?transport=udp',
        'turns:turnserver.example.org:443?transport=tcp',
      ],
      username: 'USER_NAME',
      credential: 'CREDENTIAL',
    },
  ],
  placement: 'front',
});

// Refresh credentials every hour
setInterval(() => call.setIceConfig({ iceServers: [...] }), 60 * 60 * 1000);
```

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyCallOptions: iceConfig](/reference/daily-js/types/daily-call-options#param-ice-config)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Call quality](/docs/daily-js/guides/network-quality)
    * [Corporate firewalls, NATs, and allowed IP list](/docs/guides/privacy-and-security/corporate-firewalls-nats-allowed-ip-list)
  </Card>
</CardGroup>


# setInputDevicesAsync()
Source: https://docs.daily.co/reference/daily-js/instance-methods/set-input-devices-async

Switches the local audio or video input to a specific device or custom track.

`setInputDevicesAsync(devices)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Switches the local audio or video input device during a call. You can specify a device by its ID (from [`enumerateDevices()`](/reference/daily-js/instance-methods/enumerate-devices)) or provide a raw [`MediaStreamTrack`](https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack) directly.

This is a convenience wrapper around [`updateInputSettings()`](/reference/daily-js/instance-methods/update-input-settings) for device switching — it emits an [`input-settings-updated`](/reference/daily-js/events/settings-events#input-settings-updated) event on success.

## Parameters

<ParamField type="string | false | null">
  * `string` — ID of the audio input device to use, as returned by `enumerateDevices()`
  * `false` — locally locks the mic off (see note below)
  * `null` — no-op; no change is made
</ParamField>

<ParamField type="MediaStreamTrack | false">
  * `MediaStreamTrack` — use this track directly as the audio input, bypassing device selection
  * `false` — locally locks the mic off (see note below)

  If provided, takes precedence over `audioDeviceId`.
</ParamField>

<ParamField type="string | false | null">
  * `string` — ID of the video input device to use, as returned by `enumerateDevices()`
  * `false` — locally locks the camera off (see note below)
  * `null` — no-op; no change is made
</ParamField>

<ParamField type="MediaStreamTrack | false">
  * `MediaStreamTrack` — use this track directly as the video input, bypassing device selection
  * `false` — locally locks the camera off (see note below)

  If provided, takes precedence over `videoDeviceId`.
</ParamField>

<Note>
  **Locally locking a device off**

  Passing `false` is distinct from calling `setLocalAudio(false)` or `setLocalVideo(false)`. Those *mute* the track — it can be re-enabled. Passing `false` here *prevents Daily from acquiring or re-acquiring the track entirely*. `setLocalAudio(true)` / `setLocalVideo(true)` will have no effect until you pass a device ID, a `MediaStreamTrack`, or `true` back.

  This is a local-only restriction — the server has no knowledge of it. Use it to enforce device policy in your UI without relying on server-side permissions.
</Note>

## Return value

Returns a `Promise<DailyDeviceInfos>` with the active camera, mic, and speaker. Fields will be an empty object `{}` if the device is unspecified, unacquired, or replaced by a custom track.

## Example

```javascript theme={null}
// Switch to a specific camera by device ID
const { devices } = await call.enumerateDevices();
const rearCamera = devices.find(d => d.kind === 'videoinput' && d.facing === 'environment');
await call.setInputDevicesAsync({ videoDeviceId: rearCamera.deviceId });

// Use a custom video track
await call.setInputDevicesAsync({
  videoSource: myCanvasStream.getVideoTracks()[0],
});
```

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyCallOptions: inputSettings](/reference/daily-js/types/daily-call-options#param-input-settings)
    * [DailyCallOptions: audioSource](/reference/daily-js/types/daily-call-options#param-audio-source)
    * [DailyCallOptions: videoSource](/reference/daily-js/types/daily-call-options#param-video-source)
  </Card>

  <Card title="Methods" icon="code">
    * [enumerateDevices()](/reference/daily-js/instance-methods/enumerate-devices)
    * [getInputDevices()](/reference/daily-js/instance-methods/get-input-devices)
    * [updateInputSettings()](/reference/daily-js/instance-methods/update-input-settings)
    * [setOutputDeviceAsync()](/reference/daily-js/instance-methods/set-output-device-async)
  </Card>

  <Card title="Events" icon="bolt">
    * [input-settings-updated](/reference/daily-js/events/settings-events#input-settings-updated)
    * [selected-devices-updated](/reference/daily-js/events/settings-events#selected-devices-updated)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Audio and video](/docs/daily-js/guides/audio-video)
    * [Device permissions](/docs/daily-js/guides/device-permissions)
  </Card>
</CardGroup>


# setLocalAudio()
Source: https://docs.daily.co/reference/daily-js/instance-methods/set-local-audio

Mutes or unmutes the local microphone.

`setLocalAudio(enabled, options?)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Requires `join()` or `startCamera()` to be called first.

## Parameters

<ParamField type="boolean">
  `true` to unmute the microphone, `false` to mute it.
</ParamField>

<ParamField type="boolean">
  When `true`, the mic track is fully discarded when muting — releasing the hardware and hiding browser/OS mic-in-use indicators.

  By default, `setLocalAudio(false)` mutes without discarding the track so the hardware stays warm. This lets the user unmute instantly without the first few words getting clipped while the mic reinitializes. **This is strongly recommended for most apps.**

  If you only need to suppress the mic indicator before the user's *first* unmute (when starting with `startAudioOff: true`), use the [`alwaysIncludeMicInPermissionPrompt: false`](/reference/daily-js/types/daily-call-options#param-always-include-mic-in-permission-prompt) call option instead.
</ParamField>

## Return value

Returns `this` for chaining.

## Audio-only pricing

<Note>
  For a call to be considered audio-only, it must contain no video tracks at any point. You can ensure this by starting with video disabled when creating the room, setting `videoSource: false` when initializing the call object, or restricting video via meeting token permissions.

  If even one participant has an active video track at any point, the call will be classified and billed as a video call. Qualifying audio-only calls are billed at the audio-only rate automatically, with no setup required.
</Note>

## Example

```javascript theme={null}
// Mute the mic, keeping hardware warm for fast unmute
call.setLocalAudio(false);

// Mute and fully release the microphone hardware
call.setLocalAudio(false, { forceDiscardTrack: true });
```

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyCallOptions: startAudioOff](/reference/daily-js/types/daily-call-options#param-start-audio-off)
    * [DailyCallOptions: alwaysIncludeMicInPermissionPrompt](/reference/daily-js/types/daily-call-options#param-always-include-mic-in-permission-prompt)
    * [DailyTrackState](/reference/daily-js/types/daily-track-state)
  </Card>

  <Card title="Methods" icon="code">
    * [localAudio()](/reference/daily-js/instance-methods/local-audio)
    * [setLocalVideo()](/reference/daily-js/instance-methods/set-local-video)
    * [setInputDevicesAsync()](/reference/daily-js/instance-methods/set-input-devices-async)
  </Card>

  <Card title="Events" icon="bolt">
    * [participant-updated](/reference/daily-js/events/participant-events#participant-updated)
    * [track-started](/reference/daily-js/events/media-events#track-started)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Audio and video](/docs/daily-js/guides/audio-video)
  </Card>
</CardGroup>


# setLocalVideo()
Source: https://docs.daily.co/reference/daily-js/instance-methods/set-local-video

Enables or disables the local camera.

`setLocalVideo(enabled)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Requires `join()` or `startCamera()` to be called first.

## Parameters

<ParamField type="boolean">
  `true` to enable the camera, `false` to disable it.
</ParamField>

## Return value

Returns `this` for chaining.

## Example

```javascript theme={null}
// Disable camera
call.setLocalVideo(false);

// Re-enable camera
call.setLocalVideo(true);
```

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyCallOptions: startVideoOff](/reference/daily-js/types/daily-call-options#param-start-video-off)
    * [DailyTrackState](/reference/daily-js/types/daily-track-state)
  </Card>

  <Card title="Methods" icon="code">
    * [localVideo()](/reference/daily-js/instance-methods/local-video)
    * [setLocalAudio()](/reference/daily-js/instance-methods/set-local-audio)
    * [setInputDevicesAsync()](/reference/daily-js/instance-methods/set-input-devices-async)
  </Card>

  <Card title="Events" icon="bolt">
    * [participant-updated](/reference/daily-js/events/participant-events#participant-updated)
    * [track-started](/reference/daily-js/events/media-events#track-started)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Audio and video](/docs/daily-js/guides/audio-video)
  </Card>
</CardGroup>


# setMeetingSessionData()
Source: https://docs.daily.co/reference/daily-js/instance-methods/set-meeting-session-data

Sets arbitrary shared data on the current meeting session, synced to all participants.

`setMeetingSessionData(data, mergeStrategy?)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Writes to a shared key-value store scoped to the current meeting session. All participants receive the update in near real-time — remote clients typically consume changes via the [`meeting-session-state-updated`](/reference/daily-js/events/messaging-events#meeting-session-state-updated) event, or by polling [`meetingSessionState()`](/reference/daily-js/instance-methods/meeting-session-state). Data is not persisted after the session ends.

## Parameters

<ParamField type="unknown">
  A map-like JavaScript object that:

  * Is serializable to JSON
  * Has a max payload size of 100KB
  * Can be shallow-merged
</ParamField>

<ParamField type="'replace' | 'shallow-merge'">
  How to combine the new data with the existing session data.

  * `'replace'` (default) — replaces the entire existing data object.
  * `'shallow-merge'` — merges top-level keys, leaving unaffected keys intact. Note that nested objects are replaced entirely, not recursively merged.
</ParamField>

## Return value

Returns `void`. To observe changes, listen to the [`meeting-session-state-updated`](/reference/daily-js/events/messaging-events#meeting-session-state-updated) event or poll [`meetingSessionState()`](/reference/daily-js/instance-methods/meeting-session-state).

## Rate limiting

Updates are batched and synced at most once per second. If multiple clients make conflicting `'replace'` or overlapping `'shallow-merge'` calls in rapid succession, precise ordering is not guaranteed.

This makes `setMeetingSessionData()` unsuitable for high-frequency real-time use cases where sub-second updates matter.

## Examples

### Replace

```javascript theme={null}
// Current data: { address: { country: 'Finland' } }
call.setMeetingSessionData({ code: '358' }, 'replace');
// New data: { code: '358' }
```

### Shallow merge

```javascript theme={null}
// Current data: { address: { country: 'Finland' } }
call.setMeetingSessionData({ code: '358' }, 'shallow-merge');
// New data: { address: { country: 'Finland' }, code: '358' }

call.setMeetingSessionData({ address: { city: 'Helsinki' } }, 'shallow-merge');
// New data: { address: { city: 'Helsinki' }, code: '358' }
// Note: address.country was lost because nested objects are replaced, not merged
```

### Listening for updates

```javascript theme={null}
call.on('meeting-session-state-updated', ({ meetingSessionState }) => {
  console.log('Session data updated:', meetingSessionState.data);
});
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [meetingSessionState()](/reference/daily-js/instance-methods/meeting-session-state)
  </Card>

  <Card title="Events" icon="bolt">
    * [meeting-session-state-updated](/reference/daily-js/events/messaging-events#meeting-session-state-updated)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Custom messages and shared data](/docs/daily-js/guides/custom-messages)
  </Card>
</CardGroup>


# setNetworkTopology()
Source: https://docs.daily.co/reference/daily-js/instance-methods/set-network-topology

Forces the network topology for the current call.

`setNetworkTopology({ topology })`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Must be called after `join()`.

<Warning>
  **For testing only.** Calling `setNetworkTopology()` permanently overrides Daily's automatic topology management for the duration of the call — including any `sfu_switchover` threshold configured on the room or domain. Once called, Daily will no longer auto-switch based on participant count.

  Use this only to test topology-specific behavior during development. If Daily's defaults aren't working for your use case, contact [help@daily.co](mailto:help@daily.co).
</Warning>

## Parameters

<ParamField type="'sfu' | 'peer'">
  * `'sfu'` — route media through Daily's Selective Forwarding Unit
  * `'peer'` — use direct peer-to-peer connections
</ParamField>

## Return value

Returns a `Promise` that resolves to an object:

<ResponseField name="workerId" type="string">
  Identifier of the SFU instance connected to. `undefined` for peer connections.
</ResponseField>

<ResponseField name="error" type="string">
  Present if the topology change failed.
</ResponseField>

## Example

```javascript theme={null}
const { workerId } = await call.setNetworkTopology({ topology: 'sfu' });
console.log('Connected to SFU worker:', workerId);
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [getNetworkTopology()](/reference/daily-js/instance-methods/get-network-topology)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Network quality](/docs/daily-js/guides/network-quality)
  </Card>

  <Card title="REST API" icon="server">
    * [domain config: sfu\_switchover](/reference/rest-api/domain/set-domain-config#body-properties-sfu-switchover)
    * [room config: sfu\_switchover](/reference/rest-api/rooms/create-room#body-properties-sfu-switchover)
  </Card>
</CardGroup>


# setOutputDeviceAsync()
Source: https://docs.daily.co/reference/daily-js/instance-methods/set-output-device-async

Sets the audio output (speaker) device for the call.

`setOutputDeviceAsync({ outputDeviceId })`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

## Parameters

<ParamField type="string">
  The ID of the audio output device to use, as returned by [`enumerateDevices()`](/reference/daily-js/instance-methods/enumerate-devices).
</ParamField>

## Return value

Returns a `Promise` that resolves to a `DailyDeviceInfos` object:

```json theme={null}
{
  "camera": { "deviceId": "video-device-id" },
  "mic": { "deviceId": "audio-device-id" },
  "speaker": { "deviceId": "output-device-id" }
}
```

## Browser support

Firefox \<116 and Safari \<18.4 do not support `setSinkId` or listing audio output devices in `enumerateDevices()`. On these browsers, `setOutputDeviceAsync()` logs a warning and returns the device list with `speaker` set to `{}` — it does not throw.

<Warning>
  Safari 18.4 is the first version to introduce speaker selection support, but our experience is that it does not work reliably. Current Safari Technology Preview versions appear to resolve these issues. If a user encounters audio problems after switching speaker devices, recommend trying another browser or refreshing the page.
</Warning>

For browsers that don't report output devices, we recommend listing the speaker as "Default" and hiding any speaker-selection UI.

## Example

```javascript theme={null}
const devices = await call.enumerateDevices();
const speakers = devices.devices.filter((d) => d.kind === 'audiooutput');

await call.setOutputDeviceAsync({ outputDeviceId: speakers[0].deviceId });
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [enumerateDevices()](/reference/daily-js/instance-methods/enumerate-devices)
    * [getInputDevices()](/reference/daily-js/instance-methods/get-input-devices)
    * [setInputDevicesAsync()](/reference/daily-js/instance-methods/set-input-devices-async)
  </Card>

  <Card title="Events" icon="bolt">
    * [available-devices-updated](/reference/daily-js/events/settings-events#available-devices-updated)
    * [selected-devices-updated](/reference/daily-js/events/settings-events#selected-devices-updated)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Audio and video](/docs/daily-js/guides/audio-video)
  </Card>
</CardGroup>


# setPlayNewParticipantSound()
Source: https://docs.daily.co/reference/daily-js/instance-methods/set-play-new-participant-sound

Enables or disables the join sound in Prebuilt when new participants enter the call.

`setPlayNewParticipantSound(sound)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Call this after `load()` or `join()`.

## Parameters

<ParamField type="boolean | number">
  * `true` — enable the join sound (default)
  * `false` — disable the join sound
  * `number` — play the sound only when the participant count is at or below this value (e.g. `5` plays the sound for small calls but suppresses it once the call grows)
</ParamField>

## Return value

Returns `void`.

## Example

```javascript theme={null}
// Disable the join sound entirely
call.setPlayNewParticipantSound(false);

// Play sound only for calls with 5 or fewer participants
call.setPlayNewParticipantSound(5);
```

## See also

<CardGroup>
  <Card title="Events" icon="bolt">
    * [participant-joined](/reference/daily-js/events/participant-events#participant-joined)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Customizing Daily Prebuilt](/docs/prebuilt/customizing-daily-prebuilt)
  </Card>
</CardGroup>


# setProxyUrl()
Source: https://docs.daily.co/reference/daily-js/instance-methods/set-proxy-url

Sets or clears the proxy URL for routing Daily connections through a custom proxy server.

`setProxyUrl(proxyUrl?)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

<Note>
  This is part of the **Advanced Firewall Control** add-on. [Contact Sales](https://www.daily.co/company/contact/sales/) to enable this feature.
</Note>

Updates or clears the [`proxyUrl`](/reference/daily-js/types/daily-call-options#param-proxy-url) setting at runtime. Use this when participants are behind firewall policies that block direct access to Daily's web domains — the proxy server forwards Daily's HTTPS and WebSocket connections on their behalf.

The `proxyUrl` is intended to be set at call creation time via `createFrame()` or `createCallObject()`. Use `setProxyUrl()` to change or clear it dynamically.

## Parameters

<ParamField type="string">
  The URL of your proxy server. If omitted or empty, the proxy setting is cleared and connections go directly to Daily.
</ParamField>

## Return value

Returns `this` for chaining.

## Proxy requirements

The proxy server must forward HTTPS connections to:

* `https://prod-ks.pluot.blue/*`
* `https://c.daily.co/*`
* `https://gs.daily.co/*`

It must also proxy HTTPS-to-WebSocket upgrades for `*.wss.daily.co` and `*-wss.daily.co`. Proxying all of `*.daily.co` is recommended if possible.

<Note>
  The URLs above are subject to change in future releases of `daily-js`.
</Note>

## Examples

```javascript theme={null}
// Set at call creation time
const call = Daily.createFrame({
  dailyConfig: {
    proxyUrl: 'https://my-proxy-server:8080',
  },
});

// Update at runtime
call.setProxyUrl('https://my-proxy-server:8080');

// Clear the proxy setting
call.setProxyUrl();
```

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyCallOptions: proxyUrl](/reference/daily-js/types/daily-call-options#param-proxy-url)
  </Card>

  <Card title="Methods" icon="code">
    * [setIceConfig()](/reference/daily-js/instance-methods/set-ice-config)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Corporate firewalls, NATs, and allowed IP list](/docs/guides/privacy-and-security/corporate-firewalls-nats-allowed-ip-list)
  </Card>
</CardGroup>


# setShowLocalVideo()
Source: https://docs.daily.co/reference/daily-js/instance-methods/set-show-local-video

Shows or hides the local participant's self-view in Daily Prebuilt.

`setShowLocalVideo(show)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Defaults to `true`.

## Parameters

<ParamField type="boolean">
  `true` to show the local video tile, `false` to hide it.
</ParamField>

## Return value

Returns `this` for chaining.

## Example

```javascript theme={null}
// Hide the self-view
call.setShowLocalVideo(false);
```

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyCallOptions: showLocalVideo](/reference/daily-js/types/daily-call-options#param-show-local-video)
  </Card>

  <Card title="Methods" icon="code">
    * [showLocalVideo()](/reference/daily-js/instance-methods/show-local-video)
    * [setShowParticipantsBar()](/reference/daily-js/instance-methods/set-show-participants-bar)
  </Card>

  <Card title="Events" icon="bolt">
    * [show-local-video-changed](/reference/daily-js/events/iframe-ui-events#show-local-video-changed)
  </Card>
</CardGroup>


# setShowNamesMode()
Source: https://docs.daily.co/reference/daily-js/instance-methods/set-show-names-mode

Controls whether participant names are shown over video tiles in Daily Prebuilt.

`setShowNamesMode(mode)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

## Parameters

<ParamField type="'always' | 'never' | false">
  * `'always'` — always show names (default)
  * `'never'` — never show names
  * `false` — same as `'never'`
</ParamField>

## Return value

Returns `this` for chaining.

## Example

```javascript theme={null}
// Hide all participant names
call.setShowNamesMode('never');
```

## See also

<CardGroup>
  <Card title="Guides" icon="book-open">
    * [Customizing Daily Prebuilt](/docs/prebuilt/customizing-daily-prebuilt)
  </Card>
</CardGroup>


# setShowParticipantsBar()
Source: https://docs.daily.co/reference/daily-js/instance-methods/set-show-participants-bar

Shows or hides the participant bar in Daily Prebuilt.

`setShowParticipantsBar(show)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Defaults to `true`.

## Parameters

<ParamField type="boolean">
  `true` to show the participant bar, `false` to hide it.
</ParamField>

## Return value

Returns `this` for chaining.

## Example

```javascript theme={null}
// Hide the participant bar
call.setShowParticipantsBar(false);
```

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyCallOptions: showParticipantsBar](/reference/daily-js/types/daily-call-options#param-show-participants-bar)
  </Card>

  <Card title="Methods" icon="code">
    * [showParticipantsBar()](/reference/daily-js/instance-methods/show-participants-bar)
    * [setShowLocalVideo()](/reference/daily-js/instance-methods/set-show-local-video)
  </Card>
</CardGroup>


# setSidebarView()
Source: https://docs.daily.co/reference/daily-js/instance-methods/set-sidebar-view

Opens the Daily Prebuilt sidebar to a specific panel, or closes it.

`setSidebarView(view)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Fires a [`sidebar-view-changed`](/reference/daily-js/events/iframe-ui-events#sidebar-view-changed) event when the view changes.

## Parameters

<ParamField type="SidebarView">
  The panel to open, or `null` to close the sidebar. Built-in values:

  | Value        | Panel             |
  | ------------ | ----------------- |
  | `'people'`   | Participants list |
  | `'chat'`     | Chat              |
  | `'network'`  | Network stats     |
  | `'breakout'` | Breakout rooms    |
  | `null`       | Close the sidebar |

  Custom sidebar integration names (as defined in [`setCustomIntegrations()`](/reference/daily-js/instance-methods/set-custom-integrations)) are also accepted.
</ParamField>

## Return value

Returns `this` for chaining.

## Example

```javascript theme={null}
// Open to the chat panel
call.setSidebarView('chat');

// Close the sidebar
call.setSidebarView(null);
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [getSidebarView()](/reference/daily-js/instance-methods/get-sidebar-view)
    * [setCustomIntegrations()](/reference/daily-js/instance-methods/set-custom-integrations)
  </Card>

  <Card title="Events" icon="bolt">
    * [sidebar-view-changed](/reference/daily-js/events/iframe-ui-events#sidebar-view-changed)
  </Card>
</CardGroup>


# setSubscribeToTracksAutomatically()
Source: https://docs.daily.co/reference/daily-js/instance-methods/set-subscribe-to-tracks-automatically

Enables or disables automatic subscription to all participant tracks.

`setSubscribeToTracksAutomatically(enabled)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Toggles automatic track subscription during a call. When enabled, Daily automatically subscribes to audio, video, and screen tracks from all participants. When disabled, no new subscriptions are created automatically — you manage subscriptions manually via [`updateParticipant()`](/reference/daily-js/instance-methods/update-participant).

Must be called while in a call. To start a call without subscribing to any tracks, set [`subscribeToTracksAutomatically: false`](/reference/daily-js/types/daily-call-options#param-subscribe-to-tracks-automatically) at call creation time.

<Note>
  Track subscriptions only apply over SFU connections. In P2P calls, all tracks are always received.
</Note>

## Parameters

<ParamField type="boolean">
  `true` to subscribe to all tracks automatically, `false` to manage subscriptions manually.
</ParamField>

## Return value

Returns `this` for chaining.

## Example

```javascript theme={null}
// Stop auto-subscribing, then selectively subscribe to specific participants
call.setSubscribeToTracksAutomatically(false);

call.updateParticipant(participantId, {
  setSubscribedTracks: { audio: true, video: true, screenVideo: false },
});
```

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyCallOptions: subscribeToTracksAutomatically](/reference/daily-js/types/daily-call-options#param-subscribe-to-tracks-automatically)
  </Card>

  <Card title="Methods" icon="code">
    * [updateParticipant()](/reference/daily-js/instance-methods/update-participant)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Track subscriptions](/docs/daily-js/concepts/tracks#track-subscription)
    * [Introduction to video call architecture](/docs/guides/architecture-and-monitoring/intro-to-video-arch#track-subscriptions)
  </Card>
</CardGroup>


# setTheme()
Source: https://docs.daily.co/reference/daily-js/instance-methods/set-theme

Sets the color theme for Daily Prebuilt.

`setTheme(theme)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Sets the color theme for an active Daily Prebuilt call. All colors must be in hex format (e.g. `"#286DA8"`). You can provide a global theme or separate `light` and `dark` variants — if you provide one of `light`/`dark`, you must provide both.

Daily Prebuilt determines the color mode using `@media (prefers-color-scheme: dark | light)`, following the user's browser or OS setting.

Fires a [`theme-updated`](/reference/daily-js/events/iframe-ui-events#theme-updated) event when the theme changes.

## Parameters

<ParamField type="DailyThemeConfig">
  A global theme object `{ colors }`, or a `{ light, dark }` object with separate themes for each mode. All color fields are optional — omitted fields fall back to Prebuilt defaults.

  <Expandable title="DailyThemeColors fields">
    <ResponseField name="accent" type="string">
      Main theme color. Used for primary actions and keyboard focus indicators.
    </ResponseField>

    <ResponseField name="accentText" type="string">
      Text color rendered on top of `accent`.
    </ResponseField>

    <ResponseField name="background" type="string">
      Background color for the UI chrome (toolbar, sidebar, etc.).
    </ResponseField>

    <ResponseField name="backgroundAccent" type="string">
      Background color for highlighted UI elements.
    </ResponseField>

    <ResponseField name="baseText" type="string">
      Default text color, as rendered on `background` or `backgroundAccent`.
    </ResponseField>

    <ResponseField name="border" type="string">
      Default border color for bordered elements.
    </ResponseField>

    <ResponseField name="mainAreaBg" type="string">
      Background color for the main call area.
    </ResponseField>

    <ResponseField name="mainAreaBgAccent" type="string">
      Background color for video tiles within the main call area.
    </ResponseField>

    <ResponseField name="mainAreaText" type="string">
      Text color for labels rendered inside the main call area (e.g. participant names).
    </ResponseField>

    <ResponseField name="supportiveText" type="string">
      Text color for less-emphasized, supportive text.
    </ResponseField>
  </Expandable>
</ParamField>

## Return value

Returns a `Promise` that resolves to the full `DailyThemeConfig` that was set.

## Examples

### Global theme

```javascript theme={null}
call.setTheme({
  colors: {
    accent: '#286DA8',
    accentText: '#FFFFFF',
    background: '#FFFFFF',
    backgroundAccent: '#FBFCFD',
    baseText: '#000000',
    border: '#EBEFF4',
    mainAreaBg: '#000000',
    mainAreaBgAccent: '#333333',
    mainAreaText: '#FFFFFF',
    supportiveText: '#808080',
  },
});
```

### Light and dark themes

```javascript theme={null}
call.setTheme({
  light: {
    colors: {
      accent: '#286DA8',
      background: '#FFFFFF',
    },
  },
  dark: {
    colors: {
      accent: '#E83551',
      background: '#071D3A',
    },
  },
});
```

### Single color override

```javascript theme={null}
// Only override the accent color; everything else uses Prebuilt defaults
call.setTheme({ colors: { accent: '#286DA8' } });
```

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyCallOptions: theme](/reference/daily-js/types/daily-call-options#param-theme)
  </Card>

  <Card title="Methods" icon="code">
    * [theme()](/reference/daily-js/instance-methods/theme)
  </Card>

  <Card title="Events" icon="bolt">
    * [theme-updated](/reference/daily-js/events/iframe-ui-events#theme-updated)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Color themes](/docs/prebuilt/customizing-daily-prebuilt-calls-with-color-themes)
  </Card>
</CardGroup>


# setUserData()
Source: https://docs.daily.co/reference/daily-js/instance-methods/set-user-data

Sets arbitrary custom data on the local participant, visible to all other participants.

`setUserData(data)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Associates arbitrary custom data with the local participant and syncs it to all other participants. The data is stored in the `userData` property of the local participant's [`DailyParticipant`](/reference/daily-js/types/daily-participant) object and replaces any previously set value.

A participant can only set their own `userData` — not another participant's.

<Note>
  Updates are rate limited. The local copy of `userData` is updated immediately, but propagation to other participants is throttled. All participants are guaranteed to converge on the same final value.
</Note>

## Parameters

<ParamField type="unknown">
  Any JSON-serializable value with a max payload size of 4KB. Pass `undefined` to remove `userData` from the participant object entirely.
</ParamField>

## Return value

Returns a `Promise` that resolves to `{ userData: unknown }` — the value that was set.

## Custom avatar in Daily Prebuilt

Setting an `avatar` key displays a custom image on the participant's muted tile and in the People tab. The URL must be publicly accessible.

```javascript theme={null}
call.setUserData({ avatar: 'https://example.com/avatar.jpg' });
```

<img alt="Video call participant tile showing a custom avatar image" />

## Examples

### Custom application state

```javascript theme={null}
call.setUserData({ hasHandRaised: true });
```

### Reading userData

```javascript theme={null}
const local = call.participants()['local'];
console.log(local.userData);

const remote = call.participants()[participantSessionId];
console.log(remote.userData);
```

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyCallOptions: userData](/reference/daily-js/types/daily-call-options#param-user-data)
    * [DailyParticipant](/reference/daily-js/types/daily-participant)
  </Card>

  <Card title="Methods" icon="code">
    * [participants()](/reference/daily-js/instance-methods/participants)
    * [setUserName()](/reference/daily-js/instance-methods/set-user-name)
  </Card>

  <Card title="Events" icon="bolt">
    * [participant-updated](/reference/daily-js/events/participant-events#participant-updated)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Custom messages and shared data](/docs/daily-js/guides/custom-messages)
  </Card>
</CardGroup>


# setUserName()
Source: https://docs.daily.co/reference/daily-js/instance-methods/set-user-name

Sets the local participant's display name, visible to all other participants.

`setUserName(name, options?)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

In Daily Prebuilt, the name appears as a video overlay and in the chat. In custom call object builds, it is available on the `user_name` property of the local `DailyParticipant` object.

## Parameters

<ParamField type="string">
  The display name to set.
</ParamField>

<ParamField type="boolean">
  When `true`, the name change applies only for the current meeting and does not persist to the participant's profile. Defaults to `false`.
</ParamField>

## Return value

Returns a `Promise` that resolves to `{ userName: string }` — the name that was set.

## Example

```javascript theme={null}
const { userName } = await call.setUserName('Ada Lovelace');
console.log('Name set to:', userName);

// Change name for this meeting only
await call.setUserName('Ada (presenting)', { thisMeetingOnly: true });
```

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyCallOptions: userName](/reference/daily-js/types/daily-call-options#param-user-name)
    * [DailyParticipant](/reference/daily-js/types/daily-participant)
  </Card>

  <Card title="Methods" icon="code">
    * [participants()](/reference/daily-js/instance-methods/participants)
    * [setUserData()](/reference/daily-js/instance-methods/set-user-data)
  </Card>

  <Card title="Events" icon="bolt">
    * [participant-updated](/reference/daily-js/events/participant-events#participant-updated)
  </Card>

  <Card title="REST API" icon="server">
    * [Create meeting token: user\_name](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties-user-name)
  </Card>
</CardGroup>


# showLocalVideo()
Source: https://docs.daily.co/reference/daily-js/instance-methods/show-local-video

Returns whether the local participant's self-view is currently visible in Daily Prebuilt.

`showLocalVideo()`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

## Return value

Returns `boolean` — `true` if the self-view is visible, `false` if hidden.

## Example

```javascript theme={null}
if (!call.showLocalVideo()) {
  call.setShowLocalVideo(true);
}
```

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyCallOptions: showLocalVideo](/reference/daily-js/types/daily-call-options#param-show-local-video)
  </Card>

  <Card title="Methods" icon="code">
    * [setShowLocalVideo()](/reference/daily-js/instance-methods/set-show-local-video)
  </Card>
</CardGroup>


# showParticipantsBar()
Source: https://docs.daily.co/reference/daily-js/instance-methods/show-participants-bar

Returns whether the participant bar is currently visible in Daily Prebuilt.

`showParticipantsBar()`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

## Return value

Returns `boolean` — `true` if the participant bar is visible, `false` if hidden.

## Example

```javascript theme={null}
if (!call.showParticipantsBar()) {
  call.setShowParticipantsBar(true);
}
```

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyCallOptions: showParticipantsBar](/reference/daily-js/types/daily-call-options#param-show-participants-bar)
  </Card>

  <Card title="Methods" icon="code">
    * [setShowParticipantsBar()](/reference/daily-js/instance-methods/set-show-participants-bar)
  </Card>
</CardGroup>


# sipCallTransfer()
Source: https://docs.daily.co/reference/daily-js/instance-methods/sip-call-transfer

Transfers a SIP or PSTN participant to another Daily room or external endpoint, keeping Daily in the call path.

`sipCallTransfer(options)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

SIP-to-SIP, PSTN-to-PSTN, SIP-to-PSTN, and PSTN-to-SIP transfers are all supported.

Requires the initiating participant to be [an owner or admin](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties-permissions).

Use [`sipRefer()`](/reference/daily-js/instance-methods/sip-refer) instead when Daily should exit the media path entirely after the transfer.

<Warning>
  When transferring to an external SIP address or PSTN phone number, the call remains anchored on Daily. Both call connections stay active during the transfer period, and usage continues to be billed accordingly.
</Warning>

## Parameters

<ParamField type="string">
  The `session_id` of the SIP or PSTN participant to transfer.
</ParamField>

<ParamField type="string">
  The destination SIP address (e.g., `sip:someone@sip.abc.com`) or PSTN number (e.g., `+16586574500`) to transfer the call to.
</ParamField>

<ParamField type="string">
  Caller ID override. Only valid when transferring to a PSTN number.
</ParamField>

<ParamField type="string">
  Extension to dial after the destination connects. Only valid with a PSTN `toEndPoint`. Max 20 characters.
</ParamField>

<ParamField type="number">
  Seconds to wait after the destination connects before dialing the extension.
</ParamField>

## Return value

Returns a `Promise<void>`.

## Examples

```javascript theme={null}
// Transfer a SIP call to another Daily room
await call.sipCallTransfer({
  sessionId: 'ad96802d-c511-4d9a-a485-1a1af62732d0',
  toEndPoint: 'sip:room@sip.daily.co',
});

// Transfer a PSTN call with caller ID
await call.sipCallTransfer({
  sessionId: 'ad96802d-c511-4d9a-a485-1a1af62732d0',
  toEndPoint: '+16586574500',
  callerId: '99ae8efd-d32c-4786-9bb4-77735a4e7d22',
});
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [sipRefer()](/reference/daily-js/instance-methods/sip-refer)
    * [startDialOut()](/reference/daily-js/instance-methods/start-dial-out)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Dial-in / dial-out transfers](/docs/guides/features/dial-in-dial-out/transfers)
  </Card>
</CardGroup>


# sipRefer()
Source: https://docs.daily.co/reference/daily-js/instance-methods/sip-refer

Hands off a SIP call to an external endpoint and removes Daily from the media path.

`sipRefer(options)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Sends a SIP REFER to instruct the original SIP caller to establish a direct connection with a new destination. Once the REFER succeeds, Daily exits the media path entirely and stops billing for that leg.

Use this instead of [`sipCallTransfer()`](/reference/daily-js/instance-methods/sip-call-transfer) when Daily should not remain in the call path after the transfer. If Daily should stay anchored in the call, use `sipCallTransfer()`.

Requires the initiating participant to be [an owner or admin](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties-permissions).

<Warning>
  Each call to `sipRefer()` is billed separately. A one-time SIP REFER fee may apply when this method is called. Contact support for pricing details.
</Warning>

## Parameters

<ParamField type="string">
  The `session_id` of the SIP participant to transfer.
</ParamField>

<ParamField type="string">
  The destination SIP URI (e.g., `sip:support@sip.example.com`) to refer the caller to.
</ParamField>

## Return value

Returns a `Promise<void>`.

When the REFER is triggered, [`participant-left`](/reference/daily-js/events/participant-events#participant-left), [`dialin-stopped`](/reference/daily-js/events/telephony-events#dialin-stopped), and [`dialout-stopped`](/reference/daily-js/events/telephony-events#dialout-stopped) events fire in the originating room. `calltransfer` webhooks (`triggered`, `initiated`, `answered`, `complete`) are also emitted.

## Example

```javascript theme={null}
await call.sipRefer({
  sessionId: 'ad96802d-c511-4d9a-a485-1a1af62732d0',
  toEndPoint: 'sip:support@sip.example.com',
});
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [sipCallTransfer()](/reference/daily-js/instance-methods/sip-call-transfer)
    * [startDialOut()](/reference/daily-js/instance-methods/start-dial-out)
  </Card>

  <Card title="Events" icon="bolt">
    * [dialin-stopped](/reference/daily-js/events/telephony-events#dialin-stopped)
    * [dialout-stopped](/reference/daily-js/events/telephony-events#dialout-stopped)
    * [participant-left](/reference/daily-js/events/participant-events#participant-left)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Dial-in / dial-out transfers](/docs/guides/features/dial-in-dial-out/transfers)
  </Card>

  <Card title="REST API" icon="server">
    * [calltransfer-triggered webhook](/reference/rest-api/webhooks/events/calltransfer-triggered)
    * [calltransfer-initiated webhook](/reference/rest-api/webhooks/events/calltransfer-initiated)
    * [calltransfer-answered webhook](/reference/rest-api/webhooks/events/calltransfer-answered)
    * [calltransfer-completed webhook](/reference/rest-api/webhooks/events/calltransfer-completed)
  </Card>
</CardGroup>


# startCamera()
Source: https://docs.daily.co/reference/daily-js/instance-methods/start-camera

Acquires camera and microphone access before joining a call.

`startCamera(properties?)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Acquires local camera and microphone access as part of the pre-join flow, without entering a call. Useful for building a "hair check" or lobby screen where participants can preview and configure their devices before joining.

Accepts the same [`DailyCallOptions`](/reference/daily-js/types/daily-call-options) object as the factory methods. `url` is not required.

<Warning>
  Do not call `startCamera()` after `join()`. Use [`setLocalVideo()`](/reference/daily-js/instance-methods/set-local-video) or [`setLocalAudio()`](/reference/daily-js/instance-methods/set-local-audio) to control devices mid-call.
</Warning>

`join()` calls `startCamera()` internally — if you don't need pre-join device access, `join()` alone is sufficient.

## Parameters

<ParamField type="DailyCallOptions">
  Call configuration options. See [`DailyCallOptions`](/reference/daily-js/types/daily-call-options) for the full list of available fields.
</ParamField>

## Return value

Returns a `Promise<DailyDeviceInfos>` with the active camera, mic, and speaker. See [`getInputDevices()`](/reference/daily-js/instance-methods/get-input-devices) for the full shape.

## Example

```javascript theme={null}
const call = Daily.createCallObject();

// Preview devices before joining
await call.startCamera({ url: 'https://your-domain.daily.co/room-name' });

const { local } = call.participants();
const audioTrack = local.tracks.audio.track;
const videoTrack = local.tracks.video.track;

// Later, join the call when ready
await call.join();
```

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyCallOptions](/reference/daily-js/types/daily-call-options)
  </Card>

  <Card title="Methods" icon="code">
    * [join()](/reference/daily-js/instance-methods/join)
    * [setLocalAudio()](/reference/daily-js/instance-methods/set-local-audio)
    * [setLocalVideo()](/reference/daily-js/instance-methods/set-local-video)
    * [setInputDevicesAsync()](/reference/daily-js/instance-methods/set-input-devices-async)
  </Card>

  <Card title="Events" icon="bolt">
    * [started-camera](/reference/daily-js/events/settings-events#started-camera)
    * [participant-updated](/reference/daily-js/events/participant-events#participant-updated)
    * [track-started](/reference/daily-js/events/media-events#track-started)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Audio and video](/docs/daily-js/guides/audio-video)
    * [Tracks and media](/docs/daily-js/concepts/tracks)
  </Card>
</CardGroup>


# startCustomIntegrations()
Source: https://docs.daily.co/reference/daily-js/instance-methods/start-custom-integrations

Starts one or more custom integrations in Daily Prebuilt.

`startCustomIntegrations(id)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Starts one or more custom integrations that were configured via [`setCustomIntegrations()`](/reference/daily-js/instance-methods/set-custom-integrations) or the [`customIntegrations`](/reference/daily-js/types/daily-call-options#param-custom-integrations) call option. Integrations are referenced by their ID — the key used when defining them in the `customIntegrations` object.

## Parameters

<ParamField type="string | string[]">
  A single integration ID or array of integration IDs to start.
</ParamField>

## Return value

Returns `this` for chaining.

## Example

```javascript theme={null}
// Start a single integration
call.startCustomIntegrations('miroEmbed');

// Start multiple integrations at once
call.startCustomIntegrations(['miroEmbed', 'figmaEmbed']);
```

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyCallOptions: customIntegrations](/reference/daily-js/types/daily-call-options#param-custom-integrations)
  </Card>

  <Card title="Methods" icon="code">
    * [customIntegrations()](/reference/daily-js/instance-methods/custom-integrations)
    * [setCustomIntegrations()](/reference/daily-js/instance-methods/set-custom-integrations)
    * [stopCustomIntegrations()](/reference/daily-js/instance-methods/stop-custom-integrations)
    * [setSidebarView()](/reference/daily-js/instance-methods/set-sidebar-view)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Custom integrations](/docs/prebuilt/customizing-daily-prebuilt#custom-integrations)
  </Card>
</CardGroup>


# startCustomTrack()
Source: https://docs.daily.co/reference/daily-js/instance-methods/start-custom-track

Sends a custom MediaStreamTrack to all other participants in the call.

`startCustomTrack(options)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Starts sharing a custom [`MediaStreamTrack`](https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack) with all other participants. Custom tracks are sent in addition to the standard `audio`, `video`, `screenAudio`, and `screenVideo` tracks — they do not replace them. Calling this with the same `trackName` replaces the existing custom track of that name.

Must be called after `join()`. To stop sharing the track, use [`stopCustomTrack()`](/reference/daily-js/instance-methods/stop-custom-track).

<Note>
  Custom tracks are not the right tool for screen sharing. For screen content, use [`startScreenShare()`](/reference/daily-js/instance-methods/start-screen-share) instead. See [Screenshare streams vs. custom tracks](/docs/daily-js/features/screen-sharing#screenshare-streams-vs-custom-tracks) for guidance on when to use each.
</Note>

## Parameters

<ParamField type="MediaStreamTrack">
  The raw `MediaStreamTrack` to send.
</ParamField>

<ParamField type="string">
  An identifier for the custom track (max 50 characters). Must not conflict with reserved names: `"audio"`, `"video"`, `"cam-audio"`, `"cam-video"`, `"screenVideo"`, `"screenAudio"`, `"screen-video"`, `"screen-audio"`, `"rmpAudio"`, `"rmpVideo"`, `"customVideoDefaults"`.

  If omitted, Daily generates a name in the format `custom$TRACK_KIND$COUNT` (e.g. `"customAudio0"`, `"customVideo1"`). The resolved name is returned by the Promise.
</ParamField>

<ParamField type="'music' | 'speech' | DailyMicAudioModeSettings">
  Audio processing mode for the track. Accepts the same values as [`micAudioMode`](/reference/daily-js/types/daily-call-options#param-mic-audio-mode).
</ParamField>

<ParamField type="boolean">
  When `true`, this track is not factored into active speaker events.
</ParamField>

## Return value

Returns a `Promise<string>` that resolves to the track's identifier — either the `trackName` you provided or the auto-generated one.

## Errors

Throws in the following cases:

* Not currently in a call.
* `trackName` matches a reserved name.
* `trackName` exceeds 50 characters.
* `track` is not a `MediaStreamTrack` instance.

## Examples

```javascript theme={null}
// Start a custom track, let Daily generate the name
const trackName = await call.startCustomTrack({ track: customTrack });
console.log('Track started as:', trackName); // e.g. "customVideo0"

// Start with an explicit name
const trackName = await call.startCustomTrack({
  track: customTrack,
  trackName: 'cameraFeed2',
});
```

## Subscribing to custom tracks

To receive a remote participant's custom tracks, subscribe to them via [`updateParticipant()`](/reference/daily-js/instance-methods/update-participant):

```javascript theme={null}
// Subscribe to all custom tracks from a participant
call.updateParticipant(sessionId, {
  setSubscribedTracks: { custom: true },
});

// Subscribe to a specific custom track
call.updateParticipant(sessionId, {
  setSubscribedTracks: { custom: { customVideo0: true } },
});
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [stopCustomTrack()](/reference/daily-js/instance-methods/stop-custom-track)
    * [updateParticipant()](/reference/daily-js/instance-methods/update-participant)
  </Card>

  <Card title="Events" icon="bolt">
    * [participant-updated](/reference/daily-js/events/participant-events#participant-updated)
    * [track-started](/reference/daily-js/events/media-events#track-started)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Custom tracks](/docs/daily-js/features/custom-tracks)
  </Card>
</CardGroup>


# startDialOut()
Source: https://docs.daily.co/reference/daily-js/instance-methods/start-dial-out

Initiates an outbound SIP or PSTN call from a Daily room.

`startDialOut(options)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

The dialed participant joins the room as a regular participant. Requires the initiating participant to be [an owner or admin](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties-permissions).

## Parameters

`options: DailyStartDialoutSipOptions | DailyStartDialoutPhoneOptions`

Provide either `sipUri` (SIP) or `phoneNumber` (PSTN) — not both. Fields marked as SIP-only or PSTN-only are ignored when used with the wrong option type.

### `DailyStartDialoutSipOptions`

<ParamField type="string">
  The SIP URI to dial (e.g. `sip:bob@example.com`). Must conform to [RFC 3261](https://tools.ietf.org/html/rfc3261#section-25). Query parameters appended to the URI appear as `X-` SIP headers in the invite (e.g. `sip:bob@example.com?X-myHeader=value`).
</ParamField>

<ParamField type="string">
  Display name shown for the participant when they join. Defaults to the SIP username from the URI.
</ParamField>

<ParamField type="string">
  Custom identifier for the participant (max 36 characters). See [userId guidance](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties-user-id).
</ParamField>

<ParamField type="boolean">
  Enable/disable SIP video.
</ParamField>

<ParamField type="object">
  Video encoding settings. Only applicable when `video` is `true`.

  * `width`: video width in pixels. Default: `1280`. Maximum: `1280`.
  * `height`: video height in pixels. Default: `720`. Maximum: `720`.
  * `fps`: video frame rate. Default: `15`. Maximum: `30`.
  * `videoBitrate`: video bitrate in kbps. Default: `900`. Maximum: `1000`.
</ParamField>

<ParamField type="DailyDialOutCodecs">
  Preferred codecs. The first entry in each array is used; if the remote party doesn't support it, the stream is transcoded (transcoding charges may apply).

  * `codecs.audio`: `'PCMU' | 'OPUS' | 'G722' | 'PCMA'[]`. Default: `['OPUS']`.
  * `codecs.video`: `'H264' | 'VP8'[]`. Default: `['H264']`.
</ParamField>

<ParamField type="DailySipPstnParticipantPermissions">
  Controls which participants' media the dialed-in SIP participant can receive. Uses the same `canReceive` shape as [participant permissions](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties-permissions).
</ParamField>

### `DailyStartDialoutPhoneOptions`

<ParamField type="string">
  The E.164 phone number to call (e.g. `+12268077097`).
</ParamField>

<ParamField type="string">
  Display name shown for the participant when they join. Defaults to the phone number.
</ParamField>

<ParamField type="string">
  Custom identifier for the participant (max 36 characters). See [userId guidance](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties-user-id).
</ParamField>

<ParamField type="string">
  The outbound caller ID displayed on the called device. Defaults to the oldest [purchased number](/reference/rest-api/phone-numbers/list-purchased) on the domain.
</ParamField>

<ParamField type="string">
  Extension to dial after the call connects. Max 20 characters.
</ParamField>

<ParamField type="number">
  Seconds to wait after connecting before dialing the extension.
</ParamField>

<ParamField type="DailyDialOutCodecs">
  Preferred codecs. The first entry in each array is used; if the remote party doesn't support it, the stream is transcoded (transcoding charges may apply).

  * `codecs.audio`: `'PCMU' | 'OPUS' | 'G722' | 'PCMA'[]`. Default: `['PCMU', 'PCMA']`.
  * `codecs.video`: not applicable for PSTN.
</ParamField>

<ParamField type="DailySipPstnParticipantPermissions">
  Controls which participants' media the dialed-in PSTN participant can receive. Uses the same `canReceive` shape as [participant permissions](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties-permissions).
</ParamField>

## Return value

Returns a `Promise` that resolves to `{ session?: DailyDialOutSession }`, where `session.sessionId` is the UUID identifying the initiated SIP/PSTN session.

## Errors

* `NOT_ALLOWED` — SIP/PSTN is not enabled for the room.
* `DIALOUT_IN_PROGRESS` — A dial-out is already in progress.
* `TEMPORARILY_NOT_AVAILABLE` — No workers available; try again shortly.

## Examples

```javascript theme={null}
// SIP call
const { session } = await call.startDialOut({ sipUri: 'sip:bob@example.com' });

// SIP video call with custom display name
const { session } = await call.startDialOut({
  sipUri: 'sip:boardroom@example.com',
  video: true,
  displayName: 'Board Room',
  codecs: { video: ['H264'], audio: ['OPUS'] },
  videoSettings: { width: 1280, height: 720, fps: 15, videoBitrate: 900 },
});

// PSTN call with extension
const { session } = await call.startDialOut({
  phoneNumber: '+12268077097',
  displayName: 'Support Line',
  extension: '1234',
  waitBeforeExtensionDialSec: 4,
});
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [stopDialOut()](/reference/daily-js/instance-methods/stop-dial-out)
    * [sipCallTransfer()](/reference/daily-js/instance-methods/sip-call-transfer)
    * [sipRefer()](/reference/daily-js/instance-methods/sip-refer)
  </Card>

  <Card title="Events" icon="bolt">
    * [dialout-connected](/reference/daily-js/events/telephony-events#dialout-connected)
    * [dialout-stopped](/reference/daily-js/events/telephony-events#dialout-stopped)
    * [dialout-error](/reference/daily-js/events/telephony-events#dialout-error)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Dial-in / dial-out](/docs/guides/features/dial-in-dial-out)
  </Card>

  <Card title="REST API" icon="server">
    * [Update room: enable\_dialout](/reference/rest-api/rooms/update-room#body-properties-enable-dialout)
    * [Start dial-out](/reference/rest-api/rooms/dial-out/start)
    * [dialout-answered webhook](/reference/rest-api/webhooks/events/dialout-answered)
  </Card>
</CardGroup>


# startLiveStreaming()
Source: https://docs.daily.co/reference/daily-js/instance-methods/start-live-streaming

Starts an RTMP or HLS live stream from a Daily call.

<Badge>Paid plans only</Badge>

`startLiveStreaming(options)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

<CreditCallout />

Starts an RTMP or HLS live stream. Requires the initiating participant to be [an owner or streaming admin](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties-permissions) (a participant with `'streaming'` in their `canAdmin` permission). The number of concurrent streams is subject to your domain's `max_live_streams` limit. [Contact us](https://www.daily.co/contact/support) to configure [`max_streaming_instances_per_room`](/reference/rest-api/domain/get-domain-config#response-config-max-streaming-instances-per-room) for your domain.

## Parameters

`options: DailyLiveStreamingOptions`

Accepts all fields from [`DailyStreamingOptions`](/reference/daily-js/types/daily-streaming-options) plus the following live-streaming-specific fields:

<ParamField type="string | string[]">
  One or more RTMP destination URLs. When multiple URLs are provided, each receives the same layout. Avoid using this field if your URL contains sensitive values (stream keys, etc.) — use `endpoints` instead.
</ParamField>

<ParamField type="DailyStreamingEndpoint[]">
  Array of endpoint objects (`{ endpoint: string }`). Supports both RTMP and HLS. Only one HLS endpoint can be provided. Preferred over `rtmpUrl`.
</ParamField>

<Note>
  Provide either `rtmpUrl` or `endpoints` — not both. HLS can only be started via `endpoints`.
</Note>

See [`DailyStreamingOptions`](/reference/daily-js/types/daily-streaming-options) for all shared options: output quality (`width`, `height`, `fps`, `videoBitrate`, `audioBitrate`, `backgroundColor`), session lifetime (`instanceId`, `minIdleTimeOut`, `maxDuration`), output artifacts (`dataOutputs`), and `layout`.

## Return value

Returns `void`. Listen for [`live-streaming-started`](/reference/daily-js/events/live-streaming-events#live-streaming-started) to confirm the stream is active.

## Example

```javascript theme={null}
await call.startLiveStreaming({
  endpoints: [{ endpoint: 'rtmps://live.example.com/stream/YOUR_STREAM_KEY' }],
  width: 1280,
  height: 720,
  fps: 25,
  videoBitrate: 2500,
  layout: {
    preset: 'default',
    max_cam_streams: 5,
  },
});
```

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyStreamingOptions](/reference/daily-js/types/daily-streaming-options)
    * [DailyStreamingLayoutConfig](/reference/daily-js/types/daily-streaming-layout-config)
  </Card>

  <Card title="Methods" icon="code">
    * [updateLiveStreaming()](/reference/daily-js/instance-methods/update-live-streaming)
    * [stopLiveStreaming()](/reference/daily-js/instance-methods/stop-live-streaming)
    * [addLiveStreamingEndpoints()](/reference/daily-js/instance-methods/add-live-streaming-endpoints)
    * [removeLiveStreamingEndpoints()](/reference/daily-js/instance-methods/remove-live-streaming-endpoints)
  </Card>

  <Card title="Events" icon="bolt">
    * [Live streaming events](/reference/daily-js/events/live-streaming-events)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Live streaming](/docs/daily-js/features/live-streaming)
  </Card>

  <Card title="REST API" icon="server">
    * [Update room: streaming\_endpoints](/reference/rest-api/rooms/update-room#body-properties-streaming-endpoints)
    * [Start live streaming](/reference/rest-api/rooms/live-streaming/start)
    * [streaming-started webhook](/reference/rest-api/webhooks/events/streaming-started)
  </Card>
</CardGroup>


# startLocalAudioLevelObserver()
Source: https://docs.daily.co/reference/daily-js/instance-methods/start-local-audio-level-observer

Starts polling the local microphone audio level at a specified interval.

`startLocalAudioLevelObserver(interval?)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Once started, a [`local-audio-level`](/reference/daily-js/events/media-events#local-audio-level) event is emitted at the specified interval. Use [`getLocalAudioLevel()`](/reference/daily-js/instance-methods/get-local-audio-level) to read the current value synchronously.

## Parameters

<ParamField type="number">
  How often to emit `local-audio-level` events, in milliseconds. Minimum is 100ms. Defaults to 100ms if not specified.
</ParamField>

## Return value

Returns a `Promise<void>` that resolves when the observer is running.

## Example

```javascript theme={null}
// Emit audio level events every 500ms
await call.startLocalAudioLevelObserver(500);

call.on('local-audio-level', ({ audioLevel }) => {
  console.log('Local audio level:', audioLevel);
});

// Stop when done
call.stopLocalAudioLevelObserver();
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [stopLocalAudioLevelObserver()](/reference/daily-js/instance-methods/stop-local-audio-level-observer)
    * [isLocalAudioLevelObserverRunning()](/reference/daily-js/instance-methods/is-local-audio-level-observer-running)
    * [getLocalAudioLevel()](/reference/daily-js/instance-methods/get-local-audio-level)
    * [startRemoteParticipantsAudioLevelObserver()](/reference/daily-js/instance-methods/start-remote-participants-audio-level-observer)
  </Card>

  <Card title="Events" icon="bolt">
    * [local-audio-level](/reference/daily-js/events/media-events#local-audio-level)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Audio and video](/docs/daily-js/guides/audio-video)
  </Card>
</CardGroup>


# startRecording()
Source: https://docs.daily.co/reference/daily-js/instance-methods/start-recording

Starts a recording of a Daily call.

<Badge>Paid plans only</Badge>

`startRecording(options?)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

<CreditCallout />

Only participants with their camera or mic active are recorded — devices that are off are not included. Requires recording to be enabled for the room.

Multiple recording sessions can run concurrently (up to [`max_streaming_instances_per_room`](/reference/rest-api/domain/get-domain-config#response-config-max-streaming-instances-per-room) on your domain) if each is started with a unique `instanceId`.

## Parameters

`options?: DailyStreamingOptions`

All fields are optional. See [`DailyStreamingOptions`](/reference/daily-js/types/daily-streaming-options) for the full list of shared options: output quality (`width`, `height`, `fps`, `videoBitrate`, `audioBitrate`, `backgroundColor`), session lifetime (`instanceId`, `minIdleTimeOut`, `maxDuration`), output artifacts (`dataOutputs`), and `layout`.

The `type` field is recording-specific:

<ParamField type="'cloud' | 'cloud-audio-only' | 'raw-tracks' | 'local'">
  Recording type:

  * `'cloud'` — cloud recording with video composition (default)
  * `'cloud-audio-only'` — cloud recording, audio only; no video composition charges
  * `'raw-tracks'` — individual uncomposed audio/video tracks per participant
  * `'local'` — browser-based local recording using the MediaRecorder API
</ParamField>

## Return value

Returns `void`. Listen for [`recording-started`](/reference/daily-js/events/recording-events#recording-started) to confirm the recording is active.

## Examples

```javascript theme={null}
// Start a cloud recording at 720p
await call.startRecording({
  width: 1280,
  height: 720,
  fps: 25,
  layout: {
    preset: 'default',
    max_cam_streams: 5,
  },
});
```

### Audio-only recording

<Note>
  If you know ahead of time that video is not needed, use `cloud-audio-only` to avoid video composition charges. You can also set the recording type at the room level so that `startRecording()` requires no arguments.
</Note>

```javascript theme={null}
await call.startRecording({
  type: 'cloud-audio-only',
});
```

You can also use the `audio-only` layout preset with a standard cloud recording to select specific participants' audio:

```javascript theme={null}
await call.startRecording({
  layout: {
    preset: 'audio-only',
    participants: {
      audio: ['user-id-of-participant-1', 'user-id-of-participant-2'],
    },
  },
});
```

### Raw tracks (audio only)

```javascript theme={null}
await call.startRecording({
  layout: {
    preset: 'raw-tracks-audio-only',
  },
});
```

### Custom layout with VCS baseline composition

```javascript theme={null}
await call.startRecording({
  layout: {
    preset: 'custom',
    composition_id: 'daily:baseline',
    composition_params: {
      mode: 'dominant',
      'videoSettings.preferScreenshare': true,
    },
    session_assets: {
      'images/logo.png': 'https://example.com/logo.png',
    },
  },
});
```

See [`DailyStreamingLayoutConfig`](/reference/daily-js/types/daily-streaming-layout-config) for all layout presets and the full VCS baseline composition parameter reference.

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyStreamingOptions](/reference/daily-js/types/daily-streaming-options)
    * [DailyStreamingLayoutConfig](/reference/daily-js/types/daily-streaming-layout-config)
  </Card>

  <Card title="Methods" icon="code">
    * [updateRecording()](/reference/daily-js/instance-methods/update-recording)
    * [stopRecording()](/reference/daily-js/instance-methods/stop-recording)
    * [startLiveStreaming()](/reference/daily-js/instance-methods/start-live-streaming)
  </Card>

  <Card title="Events" icon="bolt">
    * [Recording events](/reference/daily-js/events/recording-events)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Recording](/docs/guides/features/recording)
  </Card>

  <Card title="REST API" icon="server">
    * [Create room: enable\_recording](/reference/rest-api/rooms/create-room#body-properties-enable-recording)
    * [Start recording](/reference/rest-api/rooms/recordings/start)
    * [recording-started webhook](/reference/rest-api/webhooks/events/recording-started)
  </Card>
</CardGroup>


# startRemoteParticipantsAudioLevelObserver()
Source: https://docs.daily.co/reference/daily-js/instance-methods/start-remote-participants-audio-level-observer

Starts polling the audio levels of all remote participants in the call.

`startRemoteParticipantsAudioLevelObserver(interval?)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Once started, a [`remote-participants-audio-level`](/reference/daily-js/events/meeting-events#remote-participants-audio-level) event is emitted at the specified interval containing a map of participant IDs to audio level values.

## Parameters

<ParamField type="number">
  Polling interval in milliseconds. Minimum is 100ms. Defaults to 100ms.
</ParamField>

## Return value

Returns `Promise<void>`.

## Example

```javascript theme={null}
// Emit remote-participants-audio-level every 500ms
call.startRemoteParticipantsAudioLevelObserver(500);

call.on('remote-participants-audio-level', ({ participantsAudioLevel }) => {
  for (const [participantId, level] of Object.entries(participantsAudioLevel)) {
    console.log(`${participantId}: ${level}`);
  }
});
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [stopRemoteParticipantsAudioLevelObserver()](/reference/daily-js/instance-methods/stop-remote-participants-audio-level-observer)
    * [isRemoteParticipantsAudioLevelObserverRunning()](/reference/daily-js/instance-methods/is-remote-participants-audio-level-observer-running)
    * [getRemoteParticipantsAudioLevel()](/reference/daily-js/instance-methods/get-remote-participants-audio-level)
    * [startLocalAudioLevelObserver()](/reference/daily-js/instance-methods/start-local-audio-level-observer)
  </Card>

  <Card title="Events" icon="bolt">
    * [remote-participants-audio-level](/reference/daily-js/events/meeting-events#remote-participants-audio-level)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Audio and video](/docs/daily-js/guides/audio-video)
  </Card>
</CardGroup>


# startScreenShare()
Source: https://docs.daily.co/reference/daily-js/instance-methods/start-screen-share

Starts a screen share from the local participant.

`startScreenShare(options?)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Does nothing if there is no active meeting, the browser does not support screen sharing, or `enable_screenshare` is disabled for the room or meeting token.

Listen for [`local-screen-share-started`](/reference/daily-js/events/media-events#local-screen-share-started) to confirm sharing is active, [`local-screen-share-stopped`](/reference/daily-js/events/media-events#local-screen-share-stopped) when it ends, and [`local-screen-share-canceled`](/reference/daily-js/events/media-events#local-screen-share-canceled) if the user dismisses the picker.

## Parameters

`options?: DailyStartScreenShareOptions`

<ParamField type="DailyDisplayMediaStreamOptions | DailyDisplayMediaStreamOptionsElectron">
  Constraints passed to `getDisplayMedia()` when Daily acquires the stream. Provide either this or `mediaStream` — not both.

  **Web (Chrome/Chromium)**

  * `audio` (`boolean | MediaTrackConstraints`) — Whether to capture tab audio. Behavior when omitted is browser-dependent.
  * `video` (`boolean | MediaTrackConstraints`) — Whether to capture video. `getDisplayMedia()` requires a video track, so `false` will cause the call to reject.
  * `selfBrowserSurface` (`'include' | 'exclude'`) — Whether to allow sharing the current tab. Default: `'exclude'` (avoids hall-of-mirrors effect). Chrome/Chromium only.
  * `surfaceSwitching` (`'include' | 'exclude'`) — Whether to show a tab-switch button during sharing. Default: `'include'`. Chrome/Chromium only.
  * `systemAudio` (`'include' | 'exclude'`) — Whether to offer system audio as a source. Chrome/Chromium only.

  **Electron**

  * `audio` (`boolean`) — Whether to include audio in the stream.
  * `video.maxWidth` (`number`, optional) — Max width for the screen share track.
  * `video.maxHeight` (`number`, optional) — Max height for the screen share track.
  * `chromeMediaSourceId` (`string`) — Specific screen source to share.
</ParamField>

<ParamField type="MediaStream">
  A `MediaStream` you obtained yourself (e.g. via your own `getDisplayMedia()` call). Provide either this or `displayMediaOptions` — not both.

  <Warning>
    When you provide `mediaStream`, you are responsible for stopping the track when the share ends. Daily will handle cleanup if the user stops sharing via the browser UI, but you must stop the track explicitly when calling `stopScreenShare()`.
  </Warning>
</ParamField>

<ParamField type="DailyVideoSendSettings | DailyScreenVideoSendSettingsPreset">
  Send settings for the screen video track. Can be used with either `displayMediaOptions` or `mediaStream`. Accepts the same values as [`updateSendSettings()`](/reference/daily-js/instance-methods/update-send-settings).
</ParamField>

## Return value

Returns `void`.

## Example

```javascript theme={null}
// Default — browser picks the screen
call.startScreenShare();

// Custom constraints and send settings
call.startScreenShare({
  displayMediaOptions: {
    audio: false,
    selfBrowserSurface: 'exclude',
    surfaceSwitching: 'include',
    video: { width: 1920, height: 1080 },
  },
  screenVideoSendSettings: 'motion-and-detail-balanced',
});
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [stopScreenShare()](/reference/daily-js/instance-methods/stop-screen-share)
    * [updateSendSettings()](/reference/daily-js/instance-methods/update-send-settings)
  </Card>

  <Card title="Events" icon="bolt">
    * [local-screen-share-started](/reference/daily-js/events/media-events#local-screen-share-started)
    * [local-screen-share-stopped](/reference/daily-js/events/media-events#local-screen-share-stopped)
    * [local-screen-share-canceled](/reference/daily-js/events/media-events#local-screen-share-canceled)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Screen sharing](/docs/daily-js/features/screen-sharing)
  </Card>

  <Card title="REST API" icon="server">
    * [Create room: enable\_screenshare](/reference/rest-api/rooms/create-room#body-properties-enable-screenshare)
    * [Meeting token: enable\_screenshare](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties-enable-screenshare)
  </Card>
</CardGroup>


# startTranscription()
Source: https://docs.daily.co/reference/daily-js/instance-methods/start-transcription

Starts live transcription of a Daily call.

<Badge>Paid plans only</Badge>

`startTranscription(options?)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Starts live transcription for all participants in the room, or a specific subset if `participants` is provided. Transcription is powered by [Deepgram](https://deepgram.com/).

Once started, transcription output is delivered via [`transcription-message`](/reference/daily-js/events/transcription-events#transcription-message) events.

## Parameters

`options?: DailyTranscriptionDeepgramOptions`

All fields are optional.

<ParamField type="string">
  Language to use (e.g. `'en'`, `'fr-CA'`). See [Deepgram language docs](https://developers.deepgram.com/docs/language).
</ParamField>

<ParamField type="string">
  Deepgram model to use (e.g. `'nova-2'`, `'finance'`). See [Deepgram model docs](https://developers.deepgram.com/docs/model).
</ParamField>

<ParamField type="boolean">
  Whether to filter profanity from transcripts. See [Deepgram profanity filter docs](https://developers.deepgram.com/docs/profanity-filter).
</ParamField>

<ParamField type="boolean">
  Whether to add punctuation to transcripts. See [Deepgram punctuation docs](https://developers.deepgram.com/docs/punctuation).
</ParamField>

<ParamField type="number | boolean">
  Controls voice activity detection sensitivity. See [Deepgram endpointing docs](https://developers.deepgram.com/docs/endpointing).
</ParamField>

<ParamField type="boolean | string[]">
  Whether to redact sensitive information. See [Deepgram redaction docs](https://developers.deepgram.com/docs/redaction).
</ParamField>

<ParamField type="object">
  Additional Deepgram streaming parameters not covered by the fields above. See [Deepgram features overview](https://developers.deepgram.com/docs/features-overview).
</ParamField>

<ParamField type="boolean">
  When `true`, Deepgram's raw response object is included in each `transcription-message` event payload.
</ParamField>

<ParamField type="string">
  UUID for the transcription session. Defaults to `'a1f2f6b7-b1ac-4202-85e5-d446cb6c3d3f'`.
</ParamField>

<ParamField type="string[]">
  Array of participant session IDs to transcribe. When provided, only those participants are transcribed.
</ParamField>

<ParamField type="'global' | 'eu'">
  The geographic region where transcription is processed. Set to `'eu'` to ensure transcription data stays within the European Union.
</ParamField>

## Return value

Returns `void`. Listen for [`transcription-started`](/reference/daily-js/events/transcription-events#transcription-started) to confirm transcription is active.

## Examples

```javascript theme={null}
// Start transcription with defaults
await call.startTranscription();

// French Canadian, finance model
await call.startTranscription({
  language: 'fr-CA',
  model: 'finance',
});

// Transcribe specific participants only
await call.startTranscription({
  participants: [
    'd8a14d03-58ef-4b7c-824a-181779ab535a',
    '435fa323-65a1-4654-b788-069936da87a0',
  ],
});
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [updateTranscription()](/reference/daily-js/instance-methods/update-transcription)
    * [stopTranscription()](/reference/daily-js/instance-methods/stop-transcription)
  </Card>

  <Card title="Events" icon="bolt">
    * [Transcription events](/reference/daily-js/events/transcription-events)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Transcription Overview](/docs/guides/features/transcription)
    * [daily-js: Transcription](/docs/daily-js/features/transcription)
  </Card>

  <Card title="REST API" icon="server">
    * [Meeting token: auto\_start\_transcription](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties-auto-start-transcription)
    * [Start transcription](/reference/rest-api/rooms/transcription/start)
    * [transcript-started webhook](/reference/rest-api/webhooks/events/transcript-started)
  </Card>
</CardGroup>


# stopCustomIntegrations()
Source: https://docs.daily.co/reference/daily-js/instance-methods/stop-custom-integrations

Stops one or more running custom integrations in Prebuilt.

`stopCustomIntegrations(id)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

## Parameters

<ParamField type="string | string[]">
  The ID or array of IDs of the integrations to stop. IDs are the string identifiers you defined when configuring the integrations.
</ParamField>

## Return value

Returns the `DailyCall` instance.

## Example

```javascript theme={null}
call.stopCustomIntegrations(['miroEmbed', 'otherEmbed']);
```

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyCallOptions: customIntegrations](/reference/daily-js/types/daily-call-options#param-custom-integrations)
  </Card>

  <Card title="Methods" icon="code">
    * [startCustomIntegrations()](/reference/daily-js/instance-methods/start-custom-integrations)
    * [customIntegrations()](/reference/daily-js/instance-methods/custom-integrations)
    * [setCustomIntegrations()](/reference/daily-js/instance-methods/set-custom-integrations)
    * [setSidebarView()](/reference/daily-js/instance-methods/set-sidebar-view)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Custom integrations](/docs/prebuilt/customizing-daily-prebuilt#custom-integrations)
  </Card>
</CardGroup>


# stopCustomTrack()
Source: https://docs.daily.co/reference/daily-js/instance-methods/stop-custom-track

Stops sending a custom media track to other participants.

`stopCustomTrack(trackName)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Stops the specified custom track. To confirm the track has stopped, listen for [`participant-updated`](/reference/daily-js/events/participant-events#participant-updated) or [`track-stopped`](/reference/daily-js/events/media-events#track-stopped) and check that the track key is no longer present in the local participant's `tracks` property.

## Parameters

<ParamField type="string">
  The name of the custom track to stop. This is the value returned by [`startCustomTrack()`](/reference/daily-js/instance-methods/start-custom-track) when the track was started.
</ParamField>

## Return value

Returns a `Promise<string>` that resolves to the name of the stopped track.

## Example

```javascript theme={null}
const trackName = await call.startCustomTrack({ track: myTrack });

// Later, stop it
await call.stopCustomTrack(trackName);
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [startCustomTrack()](/reference/daily-js/instance-methods/start-custom-track)
    * [updateParticipant()](/reference/daily-js/instance-methods/update-participant)
  </Card>

  <Card title="Events" icon="bolt">
    * [participant-updated](/reference/daily-js/events/participant-events#participant-updated)
    * [track-stopped](/reference/daily-js/events/media-events#track-stopped)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Custom tracks](/docs/daily-js/features/custom-tracks)
  </Card>
</CardGroup>


# stopDialOut()
Source: https://docs.daily.co/reference/daily-js/instance-methods/stop-dial-out

Stops an active SIP or PSTN dial-out session.

`stopDialOut(options)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Has no effect if the session ID is not found.

## Parameters

<ParamField type="string">
  The UUID identifying the dial-out session to stop. This is the `session.sessionId` returned by [`startDialOut()`](/reference/daily-js/instance-methods/start-dial-out).
</ParamField>

## Return value

Returns `Promise<void>`.

## Errors

* `NOT_ALLOWED` — SIP/PSTN is not enabled for the room.
* `NOT_FOUND` — No active dial-out session found with the given `sessionId`.

## Example

```javascript theme={null}
const { session } = await call.startDialOut({ phoneNumber: '+12268077097' });

// Later, stop it
await call.stopDialOut({ sessionId: session.sessionId });
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [startDialOut()](/reference/daily-js/instance-methods/start-dial-out)
    * [sipCallTransfer()](/reference/daily-js/instance-methods/sip-call-transfer)
    * [sipRefer()](/reference/daily-js/instance-methods/sip-refer)
  </Card>

  <Card title="Events" icon="bolt">
    * [dialout-connected](/reference/daily-js/events/telephony-events#dialout-connected)
    * [dialout-stopped](/reference/daily-js/events/telephony-events#dialout-stopped)
    * [dialout-error](/reference/daily-js/events/telephony-events#dialout-error)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Dial-in / dial-out](/docs/guides/features/dial-in-dial-out)
  </Card>

  <Card title="REST API" icon="server">
    * [Update room: enable\_dialout](/reference/rest-api/rooms/update-room#body-properties-enable-dialout)
    * [Stop dial-out](/reference/rest-api/rooms/dial-out/stop)
    * [dialout-stopped webhook](/reference/rest-api/webhooks/events/dialout-stopped)
  </Card>
</CardGroup>


# stopLiveStreaming()
Source: https://docs.daily.co/reference/daily-js/instance-methods/stop-live-streaming

Stops an active live stream from a Daily call.

<Badge>Paid plans only</Badge>

`stopLiveStreaming(options?)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Requires the initiating participant to be [an owner or streaming admin](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties-permissions) (a participant with `'streaming'` in their `canAdmin` permission).

If multiple RTMP endpoints are being live streamed, calling stopLiveStreaming() will stop all live streams. To remove specific endpoints without ending the stream, use [`removeLiveStreamingEndpoints()`](/reference/daily-js/instance-methods/remove-live-streaming-endpoints).

If multiple instances are running, each must be stopped individually with its `instanceId`.

## Parameters

<ParamField type="string">
  The UUID of the streaming instance to stop. Omit to stop the default instance.
</ParamField>

## Return value

Returns `void`. Listen for [`live-streaming-stopped`](/reference/daily-js/events/live-streaming-events#live-streaming-stopped) to confirm the stream has ended.

## Example

```javascript theme={null}
// Stop the default stream
call.stopLiveStreaming();

// Stop a specific instance
call.stopLiveStreaming({ instanceId: 'my-instance-id' });
```

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyStreamingOptions](/reference/daily-js/types/daily-streaming-options)
    * [DailyStreamingLayoutConfig](/reference/daily-js/types/daily-streaming-layout-config)
  </Card>

  <Card title="Methods" icon="code">
    * [startLiveStreaming()](/reference/daily-js/instance-methods/start-live-streaming)
    * [updateLiveStreaming()](/reference/daily-js/instance-methods/update-live-streaming)
    * [addLiveStreamingEndpoints()](/reference/daily-js/instance-methods/add-live-streaming-endpoints)
    * [removeLiveStreamingEndpoints()](/reference/daily-js/instance-methods/remove-live-streaming-endpoints)
  </Card>

  <Card title="Events" icon="bolt">
    * [Live streaming events](/reference/daily-js/events/live-streaming-events)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Live streaming](/docs/daily-js/features/live-streaming)
  </Card>

  <Card title="REST API" icon="server">
    * [Update room: streaming\_endpoints](/reference/rest-api/rooms/update-room#body-properties-streaming-endpoints)
    * [Stop live streaming](/reference/rest-api/rooms/live-streaming/stop)
    * [streaming-ended webhook](/reference/rest-api/webhooks/events/streaming-ended)
  </Card>
</CardGroup>


# stopLocalAudioLevelObserver()
Source: https://docs.daily.co/reference/daily-js/instance-methods/stop-local-audio-level-observer

Stops polling the local participant audio level.

`stopLocalAudioLevelObserver()`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Stops the local audio level observer started by [`startLocalAudioLevelObserver()`](/reference/daily-js/instance-methods/start-local-audio-level-observer). No more [`local-audio-level`](/reference/daily-js/events/meeting-events#local-audio-level) events will be emitted after this call.

## Return value

Returns `void`.

## Example

```javascript theme={null}
call.stopLocalAudioLevelObserver();
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [startLocalAudioLevelObserver()](/reference/daily-js/instance-methods/start-local-audio-level-observer)
    * [isLocalAudioLevelObserverRunning()](/reference/daily-js/instance-methods/is-local-audio-level-observer-running)
    * [getLocalAudioLevel()](/reference/daily-js/instance-methods/get-local-audio-level)
    * [stopRemoteParticipantsAudioLevelObserver()](/reference/daily-js/instance-methods/stop-remote-participants-audio-level-observer)
  </Card>

  <Card title="Events" icon="bolt">
    * [local-audio-level](/reference/daily-js/events/meeting-events#local-audio-level)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Audio and video](/docs/daily-js/guides/audio-video)
  </Card>
</CardGroup>


# stopRecording()
Source: https://docs.daily.co/reference/daily-js/instance-methods/stop-recording

Stops an active recording of a Daily call.

<Badge>Paid plans only</Badge>

`stopRecording(options?)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Has no effect if no recording is currently running. If multiple recording instances are running, each must be stopped individually with its `instanceId`.

## Parameters

<ParamField type="string">
  The UUID of the recording instance to stop. Omit to stop the default instance.
</ParamField>

## Return value

Returns `void`. Listen for [`recording-stopped`](/reference/daily-js/events/recording-events#recording-stopped) to confirm the recording has ended.

## Example

```javascript theme={null}
// Stop the default recording
call.stopRecording();

// Stop a specific instance
call.stopRecording({ instanceId: 'my-instance-id' });
```

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyStreamingOptions](/reference/daily-js/types/daily-streaming-options)
    * [DailyStreamingLayoutConfig](/reference/daily-js/types/daily-streaming-layout-config)
  </Card>

  <Card title="Methods" icon="code">
    * [startRecording()](/reference/daily-js/instance-methods/start-recording)
    * [updateRecording()](/reference/daily-js/instance-methods/update-recording)
    * [stopLiveStreaming()](/reference/daily-js/instance-methods/stop-live-streaming)
  </Card>

  <Card title="Events" icon="bolt">
    * [Recording events](/reference/daily-js/events/recording-events)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Recording](/docs/guides/features/recording)
  </Card>

  <Card title="REST API" icon="server">
    * [Create room: enable\_recording](/reference/rest-api/rooms/create-room#body-properties-enable-recording)
    * [Stop recording](/reference/rest-api/rooms/recordings/stop)
    * [recording-ready-to-download webhook](/reference/rest-api/webhooks/events/recording-ready-to-download)
  </Card>
</CardGroup>


# stopRemoteParticipantsAudioLevelObserver()
Source: https://docs.daily.co/reference/daily-js/instance-methods/stop-remote-participants-audio-level-observer

Stops polling the audio levels of remote participants.

`stopRemoteParticipantsAudioLevelObserver()`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Stops the remote participants audio level observer started by [`startRemoteParticipantsAudioLevelObserver()`](/reference/daily-js/instance-methods/start-remote-participants-audio-level-observer). No more [`remote-participants-audio-level`](/reference/daily-js/events/meeting-events#remote-participants-audio-level) events will be emitted after this call.

## Return value

Returns `void`.

## Example

```javascript theme={null}
call.stopRemoteParticipantsAudioLevelObserver();
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [startRemoteParticipantsAudioLevelObserver()](/reference/daily-js/instance-methods/start-remote-participants-audio-level-observer)
    * [isRemoteParticipantsAudioLevelObserverRunning()](/reference/daily-js/instance-methods/is-remote-participants-audio-level-observer-running)
    * [getRemoteParticipantsAudioLevel()](/reference/daily-js/instance-methods/get-remote-participants-audio-level)
    * [stopLocalAudioLevelObserver()](/reference/daily-js/instance-methods/stop-local-audio-level-observer)
  </Card>

  <Card title="Events" icon="bolt">
    * [remote-participants-audio-level](/reference/daily-js/events/meeting-events#remote-participants-audio-level)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Audio and video](/docs/daily-js/guides/audio-video)
  </Card>
</CardGroup>


# stopScreenShare()
Source: https://docs.daily.co/reference/daily-js/instance-methods/stop-screen-share

Stops the local participant screen share.

`stopScreenShare()`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Stops the current screen share. Has no effect if no screen share is active.

If you provided a custom `mediaStream` when calling `startScreenShare()`, you are responsible for stopping the underlying tracks after calling this method.

## Return value

Returns `void`.

## Example

```javascript theme={null}
call.stopScreenShare();
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [startScreenShare()](/reference/daily-js/instance-methods/start-screen-share)
  </Card>

  <Card title="Events" icon="bolt">
    * [local-screen-share-stopped](/reference/daily-js/events/media-events#local-screen-share-stopped)
    * [local-screen-share-started](/reference/daily-js/events/media-events#local-screen-share-started)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Screen sharing](/docs/daily-js/features/screen-sharing)
  </Card>
</CardGroup>


# stopTestCallQuality()
Source: https://docs.daily.co/reference/daily-js/instance-methods/stop-test-call-quality

Stops an in-progress testCallQuality() test early.

`stopTestCallQuality()`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Interrupts an in-progress [`testCallQuality()`](/reference/daily-js/instance-methods/test-call-quality) test. The original Promise resolves immediately with whatever data has been collected so far. Also emits [`test-completed`](/reference/daily-js/events/network-events#test-completed).

If called before data gathering has started, the result is `'aborted'` with an empty `data` object. If data has been gathered, the result reflects the collected stats up to that point.

<Note>
  There is no need to call `stopTestCallQuality()` before `join()` — the test is stopped automatically when you join.
</Note>

## Return value

Returns `void`.

## Example

```javascript theme={null}
const testResultsPromise = call.testCallQuality();

// Stop early
call.stopTestCallQuality();

const results = await testResultsPromise;
// If stopped before data gathering:
// { result: 'aborted', secondsElapsed: 0 }
//
// If stopped after data gathering:
// { result: 'good', secondsElapsed: 8, data: { ... }, id: '...' }
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [testCallQuality()](/reference/daily-js/instance-methods/test-call-quality)
    * [testNetworkConnectivity()](/reference/daily-js/instance-methods/test-network-connectivity)
    * [testWebsocketConnectivity()](/reference/daily-js/instance-methods/test-websocket-connectivity)
  </Card>

  <Card title="Events" icon="bolt">
    * [test-completed](/reference/daily-js/events/network-events#test-completed)
  </Card>
</CardGroup>


# stopTestConnectionQuality()
Source: https://docs.daily.co/reference/daily-js/instance-methods/stop-test-connection-quality

Stops an in-progress testConnectionQuality() test early.

<Badge>Deprecated 0.68.0</Badge>

`stopTestConnectionQuality()`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

<Warning>
  This method is deprecated. Use [`testCallQuality()`](/reference/daily-js/instance-methods/test-call-quality) and [`stopTestCallQuality()`](/reference/daily-js/instance-methods/stop-test-call-quality) instead.
</Warning>

Interrupts an in-progress [`testConnectionQuality()`](/reference/daily-js/instance-methods/test-connection-quality) test. The original Promise resolves immediately with whatever data has been collected. Also emits [`test-completed`](/reference/daily-js/events/network-events#test-completed).

## Return value

Returns `void`.

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [testConnectionQuality()](/reference/daily-js/instance-methods/test-connection-quality)
    * [stopTestCallQuality()](/reference/daily-js/instance-methods/stop-test-call-quality)
    * [testCallQuality()](/reference/daily-js/instance-methods/test-call-quality)
  </Card>

  <Card title="Events" icon="bolt">
    * [test-completed](/reference/daily-js/events/network-events#test-completed)
  </Card>
</CardGroup>


# stopTestPeerToPeerCallQuality()
Source: https://docs.daily.co/reference/daily-js/instance-methods/stop-test-peer-to-peer-call-quality

Stops an in-progress testPeerToPeerCallQuality() test early.

`stopTestPeerToPeerCallQuality()`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Interrupts an in-progress [`testPeerToPeerCallQuality()`](/reference/daily-js/instance-methods/test-peer-to-peer-call-quality) test. The original Promise resolves immediately with whatever data has been collected so far. Also emits [`test-completed`](/reference/daily-js/events/network-events#test-completed).

If called before data gathering has started, the result is `'aborted'` with an empty `data` object. If data has been gathered, the result reflects the collected stats up to that point.

## Return value

Returns `void`.

## Example

```javascript theme={null}
await call.startCamera();
const videoTrack = call.participants().local.tracks.video.persistentTrack;

const testResultsPromise = call.testPeerToPeerCallQuality({
  videoTrack,
  duration: 250000,
});

// Stop early before joining
call.stopTestPeerToPeerCallQuality();
const results = await testResultsPromise;

if (results.result === 'bad') {
  console.warn('Poor network detected before joining.');
}
await call.join({ url: 'https://your-domain.daily.co/room' });
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [testPeerToPeerCallQuality()](/reference/daily-js/instance-methods/test-peer-to-peer-call-quality)
    * [testCallQuality()](/reference/daily-js/instance-methods/test-call-quality)
  </Card>

  <Card title="Events" icon="bolt">
    * [test-completed](/reference/daily-js/events/network-events#test-completed)
  </Card>
</CardGroup>


# stopTranscription()
Source: https://docs.daily.co/reference/daily-js/instance-methods/stop-transcription

Stops an active transcription session in a Daily call.

<Badge>Paid plans only</Badge>

`stopTranscription(options?)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Requires the caller to be a meeting owner or have `'transcription'` in their `canAdmin` permission. Has no effect if transcription is not active.

If transcript storage is enabled, the final transcript file is written when transcription stops.

## Parameters

`options?: DailyTranscriptionStopOptions`

<ParamField type="string">
  The UUID of the transcription instance to stop. Omit to stop the default instance.
</ParamField>

## Return value

Returns `void`. Listen for [`transcription-stopped`](/reference/daily-js/events/transcription-events#transcription-stopped) to confirm the session has ended.

## Example

```javascript theme={null}
// Stop the default transcription instance
call.stopTranscription();

// Stop a specific instance
call.stopTranscription({ instanceId: 'my-instance-id' });
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [startTranscription()](/reference/daily-js/instance-methods/start-transcription)
    * [updateTranscription()](/reference/daily-js/instance-methods/update-transcription)
  </Card>

  <Card title="Events" icon="bolt">
    * [Transcription events](/reference/daily-js/events/transcription-events)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Transcription Overview](/docs/guides/features/transcription)
    * [daily-js: Transcription](/docs/daily-js/features/transcription)
  </Card>

  <Card title="REST API" icon="server">
    * [Stop transcription](/reference/rest-api/rooms/transcription/stop)
    * [transcript-ready-to-download webhook](/reference/rest-api/webhooks/events/transcript-ready-to-download)
  </Card>
</CardGroup>


# testCallQuality()
Source: https://docs.daily.co/reference/daily-js/instance-methods/test-call-quality

Runs a pre-call network quality test and returns connection quality results.

`testCallQuality()`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

<Note>
  Prebuilt runs this test automatically as part of its prejoin UI.
</Note>

Assesses a user's network performance before joining a Daily call. The method connects to a Daily room and streams video to Daily's infrastructure for up to 30 seconds, collecting outbound WebRTC stats. Results represent the average values over the test period.

Must be called after [`preAuth()`](/reference/daily-js/instance-methods/pre-auth) or [`startCamera()`](/reference/daily-js/instance-methods/start-camera) and before [`join()`](/reference/daily-js/instance-methods/join).

If [Adaptive Bitrate](/docs/guides/architecture-and-monitoring/adaptive-bitrate) is enabled (default for 1:1 calls), results are stored on the call instance and used at join time to initialize the highest simulcast layer appropriately.

## Return value

Returns `Promise<DailyCallQualityTestResults>`.

<ResponseField name="result" type="'good' | 'warning' | 'bad' | 'aborted' | 'failed'">
  Overall connection quality verdict:

  * `'good'` — `avgSendPacketLoss` \< 5%, `maxRoundTripTime` \< 300ms, `avgSendBitsPerSecond` ≥ 1,100,000
  * `'warning'` — `avgSendPacketLoss` 5–10%, `maxRoundTripTime` 300–600ms, `avgSendBitsPerSecond` 700,000–1,100,000
  * `'bad'` — `avgSendPacketLoss` ≥ 10%, `maxRoundTripTime` ≥ 600ms, `avgSendBitsPerSecond` \< 700,000
  * `'failed'` — test meeting ended in error; error details are included in the result
  * `'aborted'` — test stopped before data gathering started (e.g. `join()` or `stopTestCallQuality()` called too quickly)
</ResponseField>

<ResponseField name="secondsElapsed" type="number">
  Seconds over which data was collected (up to 30). Timer starts after the test has joined a call and begun sending data.
</ResponseField>

<ResponseField name="data" type="object">
  Underlying stats used to determine the result. All averages use an exponential moving average biased toward the most recent data.

  * `maxRoundTripTime` (seconds) — maximum [`currentRoundTripTime`](https://developer.mozilla.org/en-US/docs/Web/API/RTCIceCandidatePairStats/currentRoundTripTime) sampled
  * `avgRoundTripTime` (seconds) — average `currentRoundTripTime`
  * `avgSendPacketLoss` (percentage) — average outbound packet loss.  Depending on the browser, this is based off either [fractionLost](https://w3c.github.io/webrtc-stats/#dom-rtcremoteinboundrtpstreamstats-fractionlost) or [packetsLost](https://w3c.github.io/webrtc-stats/#dom-rtcreceivedrtpstreamstats-packetslost)/ [packetsSent](https://w3c.github.io/webrtc-stats/#dom-rtctransportstats-packetssent).
  * `avgAvailableOutgoingBitrate` (bps) — average [`availableOutgoingBitrate`](https://w3c.github.io/webrtc-stats/#dom-rtcicecandidatepairstats-availableoutgoingbitrate) (not available on Firefox)
  * `avgSendBitsPerSecond` (bps) — average outbound bitrate (delta [`bytesSent`](https://www.w3.org/TR/webrtc-stats/#dom-rtcsentrtpstreamstats-bytessent) / delta time)
</ResponseField>

<ResponseField name="id" type="string">
  Session ID of the test call. Test calls use a private domain and do not appear in your account dashboard.
</ResponseField>

<ResponseField name="errorMsg" type="string">
  Human-readable error message. Only present when `result === 'failed'`.
</ResponseField>

<ResponseField name="error" type="DailyFatalErrorObject">
  Structured error object with `type`, `msg`, and `details`. Only present when `result === 'failed'` and error details are available.
</ResponseField>

## Example

```javascript theme={null}
call.testCallQuality().then((results) => {
  switch (results.result) {
    case 'aborted':
      return console.log('Test aborted before any data was gathered.');
    case 'failed':
      return console.warn('Test ended in error.');
    case 'bad':
      return console.warn('Internet connection is bad. Try a different network.');
    case 'warning':
      return console.warn('Video and audio might be choppy.');
    case 'good':
    default:
      return console.log('Internet connection is good.');
  }
});
```

<Tip>
  If the test returns `'bad'` and adaptive bitrate is disabled or the client is on Firefox, consider calling [`updateSendSettings()`](/reference/daily-js/instance-methods/update-send-settings) with `'bandwidth-optimized'` before joining.
</Tip>

### Example failure result

```json theme={null}
{
  "result": "failed",
  "secondsElapsed": 29,
  "errorMsg": "signaling connection failed",
  "error": {
    "type": "connection-error",
    "msg": "signaling connection failed",
    "details": {
      "uri": "wss://ip-10-82-1-65-us-west-2.wss.daily.co:443",
      "sourceError": {
        "message": "WebSocket connection error",
        "name": "WEBSOCKET_ERROR",
        "code": 1006,
        "reason": ""
      }
    }
  },
  "id": "1e30b5fe-b566-46e3-a48d-b8ab762a6673"
}
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [stopTestCallQuality()](/reference/daily-js/instance-methods/stop-test-call-quality)
    * [testNetworkConnectivity()](/reference/daily-js/instance-methods/test-network-connectivity)
    * [testWebsocketConnectivity()](/reference/daily-js/instance-methods/test-websocket-connectivity)
    * [getNetworkStats()](/reference/daily-js/instance-methods/get-network-stats)
  </Card>

  <Card title="Events" icon="bolt">
    * [test-completed](/reference/daily-js/events/network-events#test-completed)
  </Card>
</CardGroup>


# testConnectionQuality()
Source: https://docs.daily.co/reference/daily-js/instance-methods/test-connection-quality

Deprecated. Tests WebRTC connection quality using a video track before joining a call.

<Badge>Deprecated 0.68.0</Badge>

`testConnectionQuality(options)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

<Warning>
  This method is deprecated. Use [`testCallQuality()`](/reference/daily-js/instance-methods/test-call-quality) instead.
</Warning>

Assesses WebRTC connection quality by connecting to Daily's TURN servers and measuring round-trip time and packet loss over the test duration. Useful for precall checks before a room is joined.

The test runs for 15 seconds by default (up to 30 seconds). The longer it runs, the more accurate the results. For in-depth network stats *during* a call, use [`getNetworkStats()`](/reference/daily-js/instance-methods/get-network-stats).

<Note>
  A result does not determine whether a user is allowed to join a call — it's up to you to decide what to do with `'bad'` or `'warning'` results.
</Note>

## Parameters

<ParamField type="MediaStreamTrack">
  A video track used to establish the test connection. You can obtain one from `call.participants().local.tracks.video.persistentTrack` after calling `startCamera()`.
</ParamField>

<ParamField type="number">
  How long to run the test in seconds. Default: `15`. Maximum: `30`.
</ParamField>

## Return value

Returns `Promise<DailyConnectionQualityTestStats>`.

<ResponseField name="result" type="'good' | 'warning' | 'bad' | 'failed' | 'aborted'">
  Overall connection quality verdict. The result is determined when any one condition is met:

  * `'good'` — `packetLoss` \< 5% and `maxRTT` \< 300ms
  * `'warning'` — `packetLoss` 5–10% or `maxRTT` 300–600ms
  * `'bad'` — `packetLoss` ≥ 10% or `maxRTT` ≥ 600ms
  * `'failed'` — connection to Daily's TURN servers could not be made
  * `'aborted'` — test stopped before data gathering started (via [`stopTestConnectionQuality()`](/reference/daily-js/instance-methods/stop-test-connection-quality))
</ResponseField>

<ResponseField name="data" type="DailyConnectionQualityTestData">
  The raw metrics used to determine the result:

  * `maxRTT` (seconds) — the highest [`currentRoundTripTime`](https://developer.mozilla.org/en-US/docs/Web/API/RTCIceCandidatePairStats/currentRoundTripTime) sampled during the test
  * `packetLoss` (percentage) — calculated from [`packetsLost`](https://www.w3.org/TR/webrtc-stats/#dom-rtcreceivedrtpstreamstats-packetslost) and [`packetsReceived`](https://www.w3.org/TR/webrtc-stats/#dom-rtcreceivedrtpstreamstats-packetsreceived)
</ResponseField>

<ResponseField name="secondsElapsed" type="number">
  How long the test ran in seconds.
</ResponseField>

### Example response

```json theme={null}
{
  "result": "good",
  "data": {
    "maxRTT": 0.054,
    "packetLoss": 0.0802
  },
  "secondsElapsed": 15
}
```

## Example

```javascript theme={null}
await call.startCamera();
const videoTrack = call.participants().local.tracks.video.persistentTrack;

const results = await call.testConnectionQuality({ videoTrack, duration: 10 });

switch (results.result) {
  case 'aborted':
    console.log('Test aborted before data was gathered.');
    break;
  case 'failed':
    console.warn('Unable to connect to TURN servers.');
    break;
  case 'bad':
    console.warn('Poor connection. Try a different network.');
    break;
  case 'warning':
    console.warn('Connection may be unstable.');
    break;
  case 'good':
  default:
    console.log('Connection quality is good.');
}
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [testPeerToPeerCallQuality()](/reference/daily-js/instance-methods/test-peer-to-peer-call-quality)
    * [stopTestConnectionQuality()](/reference/daily-js/instance-methods/stop-test-connection-quality)
    * [testCallQuality()](/reference/daily-js/instance-methods/test-call-quality)
    * [testNetworkConnectivity()](/reference/daily-js/instance-methods/test-network-connectivity)
    * [getNetworkStats()](/reference/daily-js/instance-methods/get-network-stats)
  </Card>

  <Card title="Events" icon="bolt">
    * [test-completed](/reference/daily-js/events/network-events#test-completed)
  </Card>
</CardGroup>


# testNetworkConnectivity()
Source: https://docs.daily.co/reference/daily-js/instance-methods/test-network-connectivity

Tests whether a stable WebRTC connection can be established with Daily TURN servers.

`testNetworkConnectivity(videoTrack)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Checks whether a stable connection can be established with Daily's TURN servers. Useful for precall checks before a room is joined. The test times out automatically after 30 seconds.

<Warning>
  A passing result does not indicate that the user is authorized to join a call — only that a TURN connection is possible. A failing result does not guarantee calls will fail: P2P calls may still work.
</Warning>

## Why pass a video track?

Chrome and Firefox can test network connectivity without a media track, but Safari requires one. To ensure the test works across all browsers, `videoTrack` is required.

## Parameters

<ParamField type="MediaStreamTrack">
  A video track used to establish the test connection. You can obtain one from `call.participants().local.tracks.video.persistentTrack` after calling `startCamera()`.
</ParamField>

## Return value

Returns `Promise<DailyNetworkConnectivityTestStats>`.

<ResponseField name="result" type="'passed' | 'failed' | 'aborted'">
  * `'passed'` — connection to Daily's TURN servers was successful
  * `'failed'` — connection could not be established; advise users to check their network or contact their administrator
  * `'aborted'` — test was stopped via [`abortTestNetworkConnectivity()`](/reference/daily-js/instance-methods/abort-test-network-connectivity) before completion
</ResponseField>

## Example

```javascript theme={null}
await call.startCamera();
const videoTrack = call.participants().local.tracks.video.persistentTrack;

const { result } = await call.testNetworkConnectivity(videoTrack);

switch (result) {
  case 'failed':
    console.warn('Cannot connect to TURN servers. Try a different network.');
    break;
  case 'aborted':
    console.log('Test aborted.');
    break;
  case 'passed':
  default:
    console.log('Network connectivity confirmed.');
}
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [abortTestNetworkConnectivity()](/reference/daily-js/instance-methods/abort-test-network-connectivity)
    * [testCallQuality()](/reference/daily-js/instance-methods/test-call-quality)
  </Card>

  <Card title="Events" icon="bolt">
    * [test-completed](/reference/daily-js/events/network-events#test-completed)
  </Card>
</CardGroup>


# testPeerToPeerCallQuality()
Source: https://docs.daily.co/reference/daily-js/instance-methods/test-peer-to-peer-call-quality

Assesses WebRTC connection quality using a local video track before joining a call.

`testPeerToPeerCallQuality(options)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Connects to Daily's TURN servers and collects metrics over the test duration to indicate connection quality. Useful for precall checks before a room is joined.

The test runs for 15 seconds by default (up to 30 seconds). The longer it runs, the more accurate the results. For in-depth network stats *during* a call, use [`getNetworkStats()`](/reference/daily-js/instance-methods/get-network-stats).

## Parameters

<ParamField type="MediaStreamTrack">
  A video track used to establish the test connection. You can obtain one from `call.participants().local.tracks.video.persistentTrack` after calling `startCamera()`.
</ParamField>

<ParamField type="number">
  How long to run the test in seconds. Maximum: `30`.
</ParamField>

## Return value

Returns `Promise<DailyP2PCallQualityTestResults>`.

<ResponseField name="result" type="'good' | 'warning' | 'bad' | 'aborted' | 'failed'">
  Overall connection quality verdict:

  * `'good'` — `avgRecvPacketLoss` \< 5%, `avgRoundTripTime` \< 300ms, `avgRecvBitsPerSecond` ≥ 1,100kbps
  * `'warning'` — `avgRecvPacketLoss` 5–10%, `avgRoundTripTime` 300–600ms, `avgRecvBitsPerSecond` 700kbps–1,100kbps
  * `'bad'` — `avgRecvPacketLoss` ≥ 10%, `avgRoundTripTime` ≥ 600ms, `avgRecvBitsPerSecond` \< 700kbps
  * `'failed'` — connection to TURN servers could not be made; `errorMsg` and `error` fields are populated
  * `'aborted'` — test stopped before data gathering started
</ResponseField>

<ResponseField name="secondsElapsed" type="number">
  Seconds over which data was collected.
</ResponseField>

<ResponseField name="data" type="DailyP2PCallQualityTestData">
  Stats used to determine the result. All averages use an exponential moving average biased toward the most recent data.

  * `maxRoundTripTime` (seconds) — maximum [`currentRoundTripTime`](https://developer.mozilla.org/en-US/docs/Web/API/RTCIceCandidatePairStats/currentRoundTripTime)
  * `avgRoundTripTime` (seconds) — average `currentRoundTripTime`
  * `avgRecvPacketLoss` (percentage) — average inbound packet loss
  * `avgAvailableOutgoingBitrate` (bps) — average [`availableOutgoingBitrate`](https://developer.mozilla.org/en-US/docs/Web/API/RTCIceCandidatePairStats/availableOutgoingBitrate) (not available on Firefox)
  * `avgSendBitsPerSecond` (bps) — average outbound bitrate
  * `avgRecvBitsPerSecond` (bps) — average inbound bitrate
</ResponseField>

<ResponseField name="errorMsg" type="string">
  Human-readable error message. Only present when `result === 'failed'`.
</ResponseField>

<ResponseField name="error" type="DailyFatalErrorObject">
  Structured error object. Only present when `result === 'failed'` and error details are available.
</ResponseField>

## Example

```javascript theme={null}
await call.startCamera();
const videoTrack = call.participants().local.tracks.video.persistentTrack;

const results = await call.testPeerToPeerCallQuality({ videoTrack, duration: 10 });

switch (results.result) {
  case 'aborted':
    console.log('Test aborted before data was gathered.');
    break;
  case 'failed':
    console.warn('Test failed:', results.errorMsg);
    break;
  case 'bad':
    console.warn('Poor connection. Try a different network.');
    break;
  case 'warning':
    console.warn('Connection may be unstable.');
    break;
  case 'good':
  default:
    console.log('Connection quality is good.');
}
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [stopTestPeerToPeerCallQuality()](/reference/daily-js/instance-methods/stop-test-peer-to-peer-call-quality)
    * [testCallQuality()](/reference/daily-js/instance-methods/test-call-quality)
    * [testNetworkConnectivity()](/reference/daily-js/instance-methods/test-network-connectivity)
    * [testWebsocketConnectivity()](/reference/daily-js/instance-methods/test-websocket-connectivity)
    * [getNetworkStats()](/reference/daily-js/instance-methods/get-network-stats)
  </Card>

  <Card title="Events" icon="bolt">
    * [test-completed](/reference/daily-js/events/network-events#test-completed)
  </Card>
</CardGroup>


# testWebsocketConnectivity()
Source: https://docs.daily.co/reference/daily-js/instance-methods/test-websocket-connectivity

Tests whether WebSocket connections can be established with Daily signaling servers across AWS regions.

`testWebsocketConnectivity()`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Tests whether WebSocket connections can be established with Daily's signaling servers across AWS regions. Useful for precall checks to detect firewall or VPN issues before a room is joined.

<Warning>
  A passing result does not indicate that the user is authorized to join a call — only that WebSocket connections are possible. A warning result does not guarantee calls will fail.
</Warning>

## Return value

Returns `Promise<DailyWebsocketConnectivityTestResults>`.

<ResponseField name="result" type="'passed' | 'warning' | 'failed' | 'aborted'">
  * `'passed'` — WebSocket connections succeeded in all regions
  * `'warning'` — at least one region failed; calls may still work but issues are possible
  * `'failed'` — no region could be connected to
  * `'aborted'` — test was stopped via [`abortTestWebsocketConnectivity()`](/reference/daily-js/instance-methods/abort-test-websocket-connectivity) before all regions completed
</ResponseField>

<ResponseField name="passedRegions" type="string[]">
  AWS region identifiers where the WebSocket connection succeeded.
</ResponseField>

<ResponseField name="failedRegions" type="string[]">
  AWS region identifiers where the WebSocket connection failed.
</ResponseField>

<ResponseField name="abortedRegions" type="string[]">
  AWS region identifiers where the connection attempt was aborted.
</ResponseField>

## Example

```javascript theme={null}
const results = await call.testWebsocketConnectivity();

switch (results.result) {
  case 'failed':
    console.warn('Cannot connect via WebSockets. Contact your network admin.');
    break;
  case 'warning':
    console.warn('Some regions unreachable:', results.failedRegions);
    break;
  case 'aborted':
    console.log('Test aborted.');
    break;
  case 'passed':
  default:
    console.log('WebSocket connectivity confirmed in all regions.');
}
```

### Example response

```json theme={null}
{
  "result": "warning",
  "passedRegions": ["eu-west-2", "us-east-1", "us-west-2"],
  "failedRegions": ["eu-central-1"],
  "abortedRegions": []
}
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [abortTestWebsocketConnectivity()](/reference/daily-js/instance-methods/abort-test-websocket-connectivity)
    * [testNetworkConnectivity()](/reference/daily-js/instance-methods/test-network-connectivity)
    * [testCallQuality()](/reference/daily-js/instance-methods/test-call-quality)
  </Card>

  <Card title="Events" icon="bolt">
    * [test-completed](/reference/daily-js/events/network-events#test-completed)
  </Card>
</CardGroup>


# theme()
Source: https://docs.daily.co/reference/daily-js/instance-methods/theme

Returns the current color theme for Daily Prebuilt.

`theme()`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Returns the current `DailyThemeConfig` as last set via [`setTheme()`](/reference/daily-js/instance-methods/set-theme) or the [`theme` call property](/reference/daily-js/types/daily-call-options#param-theme). Returns `undefined` if no theme has been set.

## Return value

Returns `DailyThemeConfig` — either a global `{ colors }` object or a `{ light, dark }` object with separate themes for each color mode. See [`setTheme()`](/reference/daily-js/instance-methods/set-theme#parameters) for the full color field reference.

## Example

```javascript theme={null}
const currentTheme = call.theme();
console.log(currentTheme?.colors?.accent);
```

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyCallOptions: theme](/reference/daily-js/types/daily-call-options#param-theme)
  </Card>

  <Card title="Methods" icon="code">
    * [setTheme()](/reference/daily-js/instance-methods/set-theme)
  </Card>

  <Card title="Events" icon="bolt">
    * [theme-updated](/reference/daily-js/events/iframe-ui-events#theme-updated)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Color themes](/docs/prebuilt/customizing-daily-prebuilt-calls-with-color-themes)
  </Card>
</CardGroup>


# updateCustomTrayButtons()
Source: https://docs.daily.co/reference/daily-js/instance-methods/update-custom-tray-buttons

Sets or updates custom buttons in the Daily Prebuilt tray.

`updateCustomTrayButtons(customTrayButtons)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Sets the custom tray buttons for a Daily Prebuilt call. Equivalent to setting [`customTrayButtons`](/reference/daily-js/types/daily-call-options#param-custom-tray-buttons) at call creation, but can be called at any time to add, update, or remove buttons.

<Warning>
  The provided object completely replaces the previous set of buttons. To add a button to an existing set, include all current buttons alongside the new one.
</Warning>

## Parameters

<ParamField type="DailyCustomTrayButtons">
  An object whose keys are button IDs and whose values are button config objects.

  <Expandable title="DailyCustomTrayButton fields">
    <ParamField type="string">
      URL to the button icon (SVG recommended). Must be an `https:` URL since Prebuilt runs inside an `<iframe>`.
    </ParamField>

    <ParamField type="string">
      Accessible label for the button.
    </ParamField>

    <ParamField type="string">
      Tooltip text shown on hover.
    </ParamField>

    <ParamField type="string">
      URL to an alternate icon for dark mode. Must be an `https:` URL.
    </ParamField>

    <ParamField type="'default' | 'active' | 'sidebar-open'">
      Visual state of the button. Defaults to `'default'`.
    </ParamField>
  </Expandable>
</ParamField>

## Return value

Returns `this` (the `DailyCall` instance) for chaining.

## Example

```javascript theme={null}
call.updateCustomTrayButtons({
  raiseHand: {
    iconPath: 'https://example.com/icons/hand.svg',
    iconPathDarkMode: 'https://example.com/icons/hand-dark.svg',
    label: 'Raise hand',
    tooltip: 'Raise your hand',
    visualState: 'default',
  },
  pollButton: {
    iconPath: 'https://example.com/icons/poll.svg',
    label: 'Poll',
    tooltip: 'Open poll',
  },
});
```

When a custom button is clicked, a [`custom-button-click`](/reference/daily-js/events/iframe-ui-events#custom-button-click) event fires with the button's ID.

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyCallOptions: customTrayButtons](/reference/daily-js/types/daily-call-options#param-custom-tray-buttons)
  </Card>

  <Card title="Methods" icon="code">
    * [customTrayButtons()](/reference/daily-js/instance-methods/custom-tray-buttons)
  </Card>

  <Card title="Events" icon="bolt">
    * [custom-button-click](/reference/daily-js/events/iframe-ui-events#custom-button-click)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Custom tray buttons](/docs/prebuilt/customizing-daily-prebuilt#custom-tray-buttons)
  </Card>
</CardGroup>


# updateInputSettings()
Source: https://docs.daily.co/reference/daily-js/instance-methods/update-input-settings

Updates local camera and microphone settings, including background effects and noise cancellation.

`updateInputSettings(inputSettings)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Updates settings applied to local media inputs during a call. Returns a `Promise` that resolves once settings are applied and triggers an [`input-settings-updated`](/reference/daily-js/events/settings-events#input-settings-updated) event when settings change.

Only the keys you provide are updated — omitting `audio` leaves audio settings unchanged, and vice versa. However, within `settings` or `processor`, you must specify all values you want applied; they are not merged with existing values.

## Parameters

<ParamField type="object">
  Settings for the local microphone.

  <Expandable title="properties">
    <ParamField type="MediaTrackConstraints | { customTrack: MediaStreamTrack }">
      Constraints to apply to the audio track, or a custom track to use instead. See [Providing custom constraints](#providing-custom-constraints) and [Providing a custom track](#providing-a-custom-track) below.
    </ParamField>

    <ParamField type="object">
      Audio processor to apply.

      <Expandable title="properties">
        <ParamField type="'none' | 'noise-cancellation'">
          The processor type. Set to `'none'` to disable processing.
        </ParamField>
      </Expandable>
    </ParamField>
  </Expandable>
</ParamField>

<ParamField type="object">
  Settings for the local camera.

  <Expandable title="properties">
    <ParamField type="MediaTrackConstraints | { customTrack: MediaStreamTrack }">
      Constraints to apply to the video track, or a custom track to use instead. See [Providing custom constraints](#providing-custom-constraints) and [Providing a custom track](#providing-a-custom-track) below.
    </ParamField>

    <ParamField type="object">
      Video processor to apply. Only one processor type can be active at a time — setting a new type disables the previous one.

      <Expandable title="properties">
        <ParamField type="'none' | 'background-blur' | 'background-image' | 'face-detection'">
          The processor type. Set to `'none'` to disable processing.
        </ParamField>

        <ParamField type="object">
          Additional processor configuration. Only applies to `background-blur` and `background-image`.

          <Expandable title="properties">
            <ParamField type="string | ArrayBuffer">
              Image source for `background-image`. Accepts an HTTP/HTTPS URL or an `ArrayBuffer`. Supported formats: `.jpg`, `.jpeg`, `.png`.
            </ParamField>

            <ParamField type="number">
              Blur strength for `background-blur`. Float between 0 and 1 (exclusive/inclusive). Default: `1` (strongest blur).
            </ParamField>
          </Expandable>
        </ParamField>
      </Expandable>
    </ParamField>
  </Expandable>
</ParamField>

## Return value

Returns `Promise<{ inputSettings: DailyInputSettings }>` that resolves once settings are applied.

## Providing custom constraints

`settings` accepts a [`MediaTrackConstraints`](https://w3c.github.io/mediacapture-main/#media-track-constraints) object. Specify all constraints you want applied — they replace existing constraints entirely and are not merged.

```javascript theme={null}
call.updateInputSettings({
  video: {
    settings: {
      deviceId: 'a1b2c3d4...',
      aspectRatio: 1,
    },
  },
});
```

<Note>
  To change just the `deviceId` without affecting other constraints, use [`setInputDevicesAsync()`](/reference/daily-js/instance-methods/set-input-devices-async) — it merges the new `deviceId` with existing constraints.
</Note>

<Warning>
  Daily's default constraints handle cross-browser inconsistencies. Overriding them via `settings` bypasses these defaults. If you need custom constraints, refer to the [`MediaTrackConstraints`](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints) documentation and test across platforms carefully.
</Warning>

## Providing a custom track

Pass `{ customTrack: track }` as `settings` to use a `MediaStreamTrack` you manage directly. When a custom track is provided, any existing constraints are cleared.

<Warning>
  You are responsible for the lifecycle of the custom track — Daily will not stop it for you. To hand control back to Daily, call `updateInputSettings()` with empty settings.
</Warning>

```javascript theme={null}
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
call.updateInputSettings({
  video: { settings: { customTrack: stream.getVideoTracks()[0] } },
});

// To hand control back to Daily:
call.updateInputSettings({ video: { settings: {} } });
```

## Video processor

<Warning>
  Video processors are currently only supported on desktop browsers.
</Warning>

**`background-blur`** — obscures the participant's background. Optionally accepts `config.strength` (float 0–1, default `1`).

```javascript theme={null}
call.updateInputSettings({
  video: { processor: { type: 'background-blur', config: { strength: 0.5 } } },
});
```

**`background-image`** — replaces the background with an image. Accepts an HTTP URL or `ArrayBuffer` as `config.source`. Supported formats: `.jpg`, `.jpeg`, `.png`.

```javascript theme={null}
// Using a hosted image URL
call.updateInputSettings({
  video: {
    processor: {
      type: 'background-image',
      config: { source: 'https://example.com/bg.jpg' },
    },
  },
});
```

```javascript theme={null}
// Using an ArrayBuffer from a file input (via FileReader API)
document.getElementById('setImageBackground').addEventListener('click', function () {
  const file = document.getElementById('imageInput').files[0];
  if (!file) return;

  const reader = new FileReader();
  reader.onload = function () {
    call.updateInputSettings({
      video: {
        processor: {
          type: 'background-image',
          config: { source: reader.result },
        },
      },
    });
  };
  reader.readAsArrayBuffer(file);
});
```

**`face-detection`** — detects the number of faces visible and triggers [`face-counts-updated`](/reference/daily-js/events/media-events#face-counts-updated) events. Does not alter the video.

```javascript theme={null}
call.updateInputSettings({
  video: { processor: { type: 'face-detection' } },
});
```

## Audio processor

<Warning>
  `'noise-cancellation'` is supported on:

  * Desktop: Chrome/Chromium, Firefox, Safari 17.4.1+
  * Mobile: iOS Safari 17.4.1+
</Warning>

**`noise-cancellation`** — reduces background noise on the microphone input.

```javascript theme={null}
call.updateInputSettings({
  audio: { processor: { type: 'noise-cancellation' } },
});
```

## Error handling

Invalid fields or wrong types throw immediately. Errors during application emit a `nonfatal-error` event of type [`input-settings-error`](/reference/daily-js/events/error-events#input-settings-error). In addition:

* **Settings errors** — If the constraints provided result in a `getUserMedia()` error, a [`camera-error`](/reference/daily-js/events/settings-events#camera-error) will also be emitted and the input will likely be muted (There are scenarios where if the device was already on and only a minor constraint was being applied, the device can remain on). When a constraints error occurs, the settings are reset to defaults so that they do not repeatedly cause issues. Note: If the device is off or has not been initialized at the time of the update, the issue will not be detected until the device is turned on and only the `camera-error` event will be emitted. The settings will still be cleared and an `input-settings-updated` event will be emitted with the cleared settings.

* **Processor errors** — If an error occurs after the settings have been applied and the processor has started, a nonfatal-error of type [`video-processor-error`](/reference/daily-js/events/error-events#video-processor-error) or [`audio-processor-error`](/reference/daily-js/events/error-events#audio-processor-error) will be emitted. The processor will be turned off and the processor settings will be cleared. An `input-settings-updated` event will also be emitted with the cleared settings. For video processor failures, the video will be turned off to ensure the user is not broadcasting unintended content.

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [getInputSettings()](/reference/daily-js/instance-methods/get-input-settings)
    * [setInputDevicesAsync()](/reference/daily-js/instance-methods/set-input-devices-async)
    * [cycleCamera()](/reference/daily-js/instance-methods/cycle-camera)
    * [cycleMic()](/reference/daily-js/instance-methods/cycle-mic)
  </Card>

  <Card title="Events" icon="bolt">
    * [input-settings-updated](/reference/daily-js/events/settings-events#input-settings-updated)
    * [face-counts-updated](/reference/daily-js/events/media-events#face-counts-updated)
    * [input-settings-error](/reference/daily-js/events/error-events#input-settings-error)
    * [video-processor-error](/reference/daily-js/events/error-events#video-processor-error)
    * [audio-processor-error](/reference/daily-js/events/error-events#audio-processor-error)
    * [camera-error](/reference/daily-js/events/settings-events#camera-error)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Audio and video processing](/docs/daily-js/guides/audio-video#audio-and-video-processing)
    * [Audio and video](/docs/daily-js/guides/audio-video)
  </Card>
</CardGroup>


# updateLiveStreaming()
Source: https://docs.daily.co/reference/daily-js/instance-methods/update-live-streaming

Updates the layout of an active live stream.

<Badge>Paid plans only</Badge>

`updateLiveStreaming(options)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Requires the caller to be [an owner or streaming admin](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties-permissions) (a participant with `'streaming'` in their `canAdmin` permission).

## Parameters

<ParamField type="DailyLiveStreamingLayoutConfig">
  The new layout configuration. See [`DailyStreamingLayoutConfig`](/reference/daily-js/types/daily-streaming-layout-config) for all presets and options.
</ParamField>

<ParamField type="string">
  The UUID of the streaming instance to update. Omit to update the default instance.
</ParamField>

## Return value

Returns `void`. Listen for [`live-streaming-updated`](/reference/daily-js/events/live-streaming-events#live-streaming-updated) to confirm the change.

## Example

```javascript theme={null}
// Switch to active-participant layout
call.updateLiveStreaming({
  layout: { preset: 'active-participant' },
});

// Update a specific instance with a custom VCS layout
call.updateLiveStreaming({
  instanceId: '00000000-0000-4000-8000-000000000000',
  layout: {
    preset: 'custom',
    composition_params: {
      mode: 'dominant',
      showTextOverlay: true,
      'text.content': 'Hello',
      'videoSettings.roundedCorners': true,
    },
  },
});
```

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyStreamingOptions](/reference/daily-js/types/daily-streaming-options)
    * [DailyStreamingLayoutConfig](/reference/daily-js/types/daily-streaming-layout-config)
  </Card>

  <Card title="Methods" icon="code">
    * [startLiveStreaming()](/reference/daily-js/instance-methods/start-live-streaming)
    * [stopLiveStreaming()](/reference/daily-js/instance-methods/stop-live-streaming)
    * [addLiveStreamingEndpoints()](/reference/daily-js/instance-methods/add-live-streaming-endpoints)
    * [removeLiveStreamingEndpoints()](/reference/daily-js/instance-methods/remove-live-streaming-endpoints)
  </Card>

  <Card title="Events" icon="bolt">
    * [Live streaming events](/reference/daily-js/events/live-streaming-events)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Live streaming](/docs/daily-js/features/live-streaming)
  </Card>

  <Card title="REST API" icon="server">
    * [Update live streaming](/reference/rest-api/rooms/live-streaming/update)
    * [streaming-updated webhook](/reference/rest-api/webhooks/events/streaming-updated)
  </Card>
</CardGroup>


# updateParticipant()
Source: https://docs.daily.co/reference/daily-js/instance-methods/update-participant

Modifies a participant in a Daily call — muting, ejecting, updating permissions, or controlling track subscriptions.

`updateParticipant(sessionId, updates)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Modifies a participant, either by sending a message to change their state, or by changing how you see them locally. Returns `this` for chaining.

## Parameters

<ParamField type="string">
  The participant's `session_id`, or `'local'` for the local participant.
</ParamField>

<ParamField type="DailyParticipantUpdateOptions">
  An object describing what to update. All fields are optional.

  <Expandable title="properties">
    <ParamField type="boolean">
      Mute (`false`) or unmute (`true`) the participant's microphone. Requires the caller to be a **participant admin** (`'participants'` in `canAdmin`). Silently ignored if not possible or if there is no active meeting.

      <Note>
        For the local participant, prefer [`setLocalAudio()`](/reference/daily-js/instance-methods/set-local-audio) — though both work. For remote participants, admins can mute (`false`) but only meeting owners can unmute (`true`), and doing so is strongly discouraged as a privacy concern.
      </Note>
    </ParamField>

    <ParamField type="boolean">
      Enable (`true`) or disable (`false`) the participant's camera. Requires participant admin permission. Silently ignored if not possible.

      <Note>
        For the local participant, prefer [`setLocalVideo()`](/reference/daily-js/instance-methods/set-local-video) — though both work.
      </Note>

      <Warning>
        Remotely controlling another participant's camera or microphone is a potential privacy issue. Use deliberately. Browsers require the user to have explicitly allowed mic/camera access at least once.
      </Warning>
    </ParamField>

    <ParamField type="false">
      Stop the participant's active screen share. Only `false` is accepted. Requires participant admin permission. Has no effect when `sessionId` is `'local'`.
    </ParamField>

    <ParamField type="true">
      Remove the participant from the call. Only `true` is accepted. Requires participant admin permission.
    </ParamField>

    <ParamField type="DailyTrackSubscriptionOptions">
      Controls which tracks you receive from this participant. **SFU mode only** — not supported in Daily Prebuilt. Requires [`subscribeToTracksAutomatically`](/reference/daily-js/types/daily-call-options#param-subscribe-to-tracks-automatically) to be `false`; throws an error if it is `true`.

      Accepts `true`, `false`, `'staged'`, `'avatar'`, or a per-track object:

      ```javascript theme={null}
      call.updateParticipant('session-id', {
        setSubscribedTracks: {
          audio: true,
          video: 'staged',
          screenVideo: false,
          screenAudio: false,
        },
      });
      ```

      * `true` — subscribe: set up a consumer connection and start transmitting data
      * `false` — unsubscribe: tear down the consumer connection
      * `'staged'` — set up the consumer connection but pause data transmission; no bandwidth cost, but going from `'staged'` → `true` is faster than subscribing from scratch
      * `'avatar'` — subscribe to audio only, receive a placeholder for video

      When supporting large calls, subscribe to tracks you're rendering, stage tracks on adjacent pages, and unsubscribe from everything else.
    </ParamField>

    <ParamField type="DailyParticipantPermissionsUpdate">
      Updates the participant's in-call permissions (`canSend`, `canReceive`, `hasPresence`, `canAdmin`). Requires the caller to be a participant admin. See [`DailyParticipantPermissions`](/reference/daily-js/types/daily-participant-permissions) for the full shape and behavior of each field.

      ```javascript theme={null}
      call.updateParticipant('session-id', {
        updatePermissions: {
          canSend: new Set(['video', 'audio']),
          canReceive: { byUserId: { foo: false } },
          hasPresence: false,
          canAdmin: new Set(['participants', 'streaming']),
        },
      });
      ```
    </ParamField>
  </Expandable>
</ParamField>

## Return value

Returns `this` (the `DailyCall` instance) for chaining.

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyParticipantPermissions](/reference/daily-js/types/daily-participant-permissions)
  </Card>

  <Card title="Methods" icon="code">
    * [updateParticipants()](/reference/daily-js/instance-methods/update-participants)
    * [participants()](/reference/daily-js/instance-methods/participants)
    * [participantCounts()](/reference/daily-js/instance-methods/participant-counts)
    * [setLocalAudio()](/reference/daily-js/instance-methods/set-local-audio)
    * [setLocalVideo()](/reference/daily-js/instance-methods/set-local-video)
  </Card>

  <Card title="Events" icon="bolt">
    * [participant-updated](/reference/daily-js/events/participant-events#participant-updated)
    * [participant-left](/reference/daily-js/events/participant-events#participant-left)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Participants](/docs/daily-js/concepts/participants)
    * [Tracks and media](/docs/daily-js/concepts/tracks)
  </Card>

  <Card title="REST API" icon="server">
    * [Meeting token: permissions](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties-permissions)
  </Card>
</CardGroup>


# updateParticipants()
Source: https://docs.daily.co/reference/daily-js/instance-methods/update-participants

Modifies multiple participants at once in a Daily call.

`updateParticipants(updates)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Modifies multiple participants at once. Internally loops over the keys of `updates` and calls [`updateParticipant()`](/reference/daily-js/instance-methods/update-participant) for each. Use this instead of calling `updateParticipant()` in a loop — changes are batched together, making updates faster.

## Parameters

<ParamField type="{ [sessionId: string]: DailyParticipantUpdateOptions }">
  An object whose keys are participant session IDs and whose values are the update options for each participant. See [`updateParticipant()`](/reference/daily-js/instance-methods/update-participant) for all available actions.

  Use `'*'` as a key to apply the same update to all current participants at once.
</ParamField>

## Return value

Returns `this` (the `DailyCall` instance) for chaining.

## Examples

```javascript theme={null}
// Mute all participants using '*'
call.updateParticipants({ '*': { setAudio: false } });
```

```javascript theme={null}
// Apply different updates to specific participants
call.updateParticipants({
  'session-id-1': { setAudio: false },
  'session-id-2': { setVideo: false },
});
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [updateParticipant()](/reference/daily-js/instance-methods/update-participant)
    * [participants()](/reference/daily-js/instance-methods/participants)
  </Card>

  <Card title="Events" icon="bolt">
    * [participant-updated](/reference/daily-js/events/participant-events#participant-updated)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Participants](/docs/daily-js/concepts/participants)
  </Card>
</CardGroup>


# updateReceiveSettings()
Source: https://docs.daily.co/reference/daily-js/instance-methods/update-receive-settings

Updates which simulcast quality layer to receive for each remote participant's video tracks.

`updateReceiveSettings(receiveSettings)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Updates how you receive video tracks from remote participants — specifically, the maximum simulcast layer to decode for each participant's `video` and `screenVideo` tracks. Higher layers correspond to higher quality.

Settings can be applied per-participant, to all current participants at once via `'*'`, or to `base` — a set of defaults inherited by all participants who don't have explicit settings applied.

<Note>
  Simulcast layer settings only apply in [SFU mode](/docs/guides/architecture-and-monitoring/intro-to-video-arch#the-architecture-of-a-room-p2p-vs-sfu-calls). Desktop clients support 3 layers (0–2); mobile clients support 2 layers (0–1). Requesting a higher layer than is available is allowed — you'll receive the highest available.
</Note>

## Parameters

<ParamField type="DailyReceiveSettingsUpdates">
  An object whose keys identify which participants to update, and whose values are the settings to apply.

  <Expandable title="Key options">
    <ParamField type="DailySingleParticipantReceiveSettingsUpdates | 'inherit'">
      Settings for a specific participant. Pass `'inherit'` to reset them to the `base` defaults.
    </ParamField>

    <ParamField type="DailySingleParticipantReceiveSettingsUpdates">
      Default settings inherited by all participants who don't have explicit settings. Applies to current and future participants. Set this at join time via the [`receiveSettings` call property](/reference/daily-js/types/daily-call-options#param-receive-settings) to configure defaults before anyone joins.
    </ParamField>

    <ParamField type="DailySingleParticipantReceiveSettingsUpdates">
      Shorthand to apply the same settings to all participants currently connected to you. Unlike `base`, `'*'` has no effect before joining and does not apply to future participants.
    </ParamField>
  </Expandable>

  Each value (other than `'inherit'`) is a `DailySingleParticipantReceiveSettingsUpdates` object:

  <Expandable title="DailySingleParticipantReceiveSettingsUpdates fields">
    <ParamField type="{ layer?: number | 'inherit' } | 'inherit'">
      Receive settings for the participant's camera track. `layer` selects the simulcast layer (default: `2`). Pass `'inherit'` to reset to the `base` value.
    </ParamField>

    <ParamField type="{ layer?: number | 'inherit' } | 'inherit'">
      Receive settings for the participant's screen share track. Screen video has one layer by default; additional layers require configuration via [`updateSendSettings()`](/reference/daily-js/instance-methods/update-send-settings).
    </ParamField>
  </Expandable>
</ParamField>

## Return value

Returns `Promise<DailyReceiveSettings>` that resolves with the full updated receive settings for all participants.

## Examples

```javascript theme={null}
// Set a low-quality default for all participants at join time
call.join({
  url,
  receiveSettings: {
    base: { video: { layer: 0 } },
  },
});
```

```javascript theme={null}
// After joining: lower quality for everyone, promote the active speaker
await call.updateReceiveSettings({
  '*': { video: { layer: 0 } },
  [activeSpeakerSessionId]: { video: { layer: 2 } },
});
```

```javascript theme={null}
// Reset a participant to inherit from base
await call.updateReceiveSettings({
  [sessionId]: 'inherit',
});
```

```javascript theme={null}
// Reset a single track for a participant while leaving others unchanged
await call.updateReceiveSettings({
  [sessionId]: { video: 'inherit' },
});
```

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyCallOptions: receiveSettings](/reference/daily-js/types/daily-call-options#param-receive-settings)
  </Card>

  <Card title="Methods" icon="code">
    * [getReceiveSettings()](/reference/daily-js/instance-methods/get-receive-settings)
    * [updateSendSettings()](/reference/daily-js/instance-methods/update-send-settings)
  </Card>

  <Card title="Events" icon="bolt">
    * [receive-settings-updated](/reference/daily-js/events/settings-events#receive-settings-updated)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Receive-side video quality](/docs/guides/scaling-calls/best-practices-to-scale-large-experiences#adjust-receive-side-video-quality)
  </Card>
</CardGroup>


# updateRecording()
Source: https://docs.daily.co/reference/daily-js/instance-methods/update-recording

Updates the layout of an active cloud recording.

<Badge>Paid plans only</Badge>

`updateRecording(options)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Only applies to recordings using the `"cloud"` [recording type](/docs/guides/features/recording). Requires the caller to be [an owner or recording admin](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties-permissions) (a participant with `'recording'` in their `canAdmin` permission).

## Parameters

<ParamField type="DailyStreamingLayoutConfig">
  The new layout configuration. See [`DailyStreamingLayoutConfig`](/reference/daily-js/types/daily-streaming-layout-config) for all presets and options.
</ParamField>

<ParamField type="string">
  The UUID of the recording instance to update. Omit to update the default instance.
</ParamField>

## Return value

Returns `void`.

## Example

```javascript theme={null}
// Switch to single-participant layout
call.updateRecording({
  layout: {
    preset: 'single-participant',
    session_id: 'abcd123...',
  },
});

// Update a specific instance with a custom VCS layout
call.updateRecording({
  instanceId: '00000000-0000-4000-8000-000000000000',
  layout: {
    preset: 'custom',
    composition_params: {
      mode: 'dominant',
      showTextOverlay: true,
      'text.content': 'Hello',
      'videoSettings.roundedCorners': true,
    },
  },
});
```

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyStreamingOptions](/reference/daily-js/types/daily-streaming-options)
    * [DailyStreamingLayoutConfig](/reference/daily-js/types/daily-streaming-layout-config)
  </Card>

  <Card title="Methods" icon="code">
    * [startRecording()](/reference/daily-js/instance-methods/start-recording)
    * [stopRecording()](/reference/daily-js/instance-methods/stop-recording)
    * [updateLiveStreaming()](/reference/daily-js/instance-methods/update-live-streaming)
  </Card>

  <Card title="Events" icon="bolt">
    * [Recording events](/reference/daily-js/events/recording-events)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Recording](/docs/guides/features/recording)
  </Card>
</CardGroup>


# updateScreenShare()
Source: https://docs.daily.co/reference/daily-js/instance-methods/update-screen-share

Enables or disables the screen share video or audio track without stopping the screen share.

`updateScreenShare(options)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

## Parameters

<ParamField type="DailyScreenShareUpdateOptions">
  <Expandable title="properties">
    <ParamField type="{ enabled: boolean }">
      Whether to enable or disable the screen video track.
    </ParamField>

    <ParamField type="{ enabled: boolean }">
      Whether to enable or disable the screen audio track.
    </ParamField>
  </Expandable>
</ParamField>

## Return value

Returns `void`.

## Example

```javascript theme={null}
// Disable screen audio while keeping video active
call.updateScreenShare({
  screenVideo: { enabled: true },
  screenAudio: { enabled: false },
});
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [startScreenShare()](/reference/daily-js/instance-methods/start-screen-share)
    * [stopScreenShare()](/reference/daily-js/instance-methods/stop-screen-share)
  </Card>

  <Card title="Events" icon="bolt">
    * [local-screen-share-started](/reference/daily-js/events/media-events#local-screen-share-started)
    * [local-screen-share-stopped](/reference/daily-js/events/media-events#local-screen-share-stopped)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Screen sharing](/docs/daily-js/features/screen-sharing)
  </Card>
</CardGroup>


# updateSendSettings()
Source: https://docs.daily.co/reference/daily-js/instance-methods/update-send-settings

Updates how the local client publishes camera, custom video, and screen share tracks.

`updateSendSettings(settings)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Controls simulcast layer configuration and which layers are sent. Useful for adapting to poor network conditions or high CPU load, or for ensuring high-quality video when conditions allow.

## Parameters

<ParamField type="DailySendSettings">
  An object configuring send settings per track type. All keys are optional. Each value accepts a preset string (see below) or a `DailyVideoSendSettings` object:

  * `video` — local camera track. Also supports `allowAdaptiveLayers` (see below).
  * `customVideoDefaults` — default settings for all custom video tracks. Uses [camera presets](#camera-and-custom-track-presets).
  * `screenVideo` — screen share track. Uses [screen share presets](#screen-share-presets).
  * `[customKey: string]` — settings for a specific named custom track, using the track's `trackName` as the key.

  <Expandable title="DailyVideoSendSettings fields">
    <ParamField type="object">
      Simulcast layer encoding parameters. Accepts up to three layers (`low`, `medium`, `high`), each specified as [RTCRtpEncodingParameters](https://developer.mozilla.org/en-US/docs/Web/API/RTCRtpEncodingParameters). Layers must be defined starting from `"low"` and progressing upward.
    </ParamField>

    <ParamField type="'low' | 'medium' | 'high'">
      The highest simulcast layer to publish. All layers at or below this level are sent. For example, `'medium'` publishes both `low` and `medium`.
    </ParamField>

    <ParamField type="boolean">
      Enables [Daily Adaptive Bitrate](/docs/guides/architecture-and-monitoring/adaptive-bitrate) for the `video` key. When `true`, Daily dynamically adjusts the highest layer based on network conditions.
    </ParamField>
  </Expandable>
</ParamField>

## Camera and custom track presets

| Preset                             | Description                                                                  |
| ---------------------------------- | ---------------------------------------------------------------------------- |
| `'quality-optimized'`              | Higher resolutions and bitrate; best for good networks                       |
| `'bandwidth-and-quality-balanced'` | High resolution with bandwidth savings; suitable for most networks (default) |
| `'bandwidth-optimized'`            | Lower bitrate; best for constrained networks (e.g., cellular)                |
| `'default-video'`                  | Resets to default (same as `'bandwidth-and-quality-balanced'`)               |

## Screen share presets

| Preset                         | Description                                                                 |
| ------------------------------ | --------------------------------------------------------------------------- |
| `'detail-optimized'`           | Low bitrate and frame rate (max 5 fps); best for static content like slides |
| `'motion-and-detail-balanced'` | Balanced; max 15 fps; good for whiteboards and document editing             |
| `'motion-optimized'`           | Full motion; max 30 fps; 2 Mbps cap to protect call quality (default)       |
| `'default-screen-video'`       | Resets to default (same as `'motion-optimized'`)                            |

<Note>
  Send only a single simulcast layer for screen video. Define only the `"low"` layer and set `maxQuality` to `"low"`. Multiple layers are supported but screen shares are bandwidth-intensive and additional layers can degrade performance.
</Note>

## Return value

Returns `Promise<DailySendSettings>` that resolves with the updated send settings. Also triggers a [`send-settings-updated`](/reference/daily-js/events/meeting-events#send-settings-updated) event.

## Examples

```javascript theme={null}
// Switch camera to bandwidth-optimized preset
await call.updateSendSettings({
  video: 'bandwidth-optimized',
});
```

```javascript theme={null}
// Custom screen share with a single simulcast layer
call.updateSendSettings({
  screenVideo: {
    encodings: {
      low: { maxBitrate: 1500000, maxFramerate: 25 },
    },
    maxQuality: 'low',
  },
});
```

```javascript theme={null}
// Custom encodings for all custom video tracks
call.updateSendSettings({
  customVideoDefaults: {
    encodings: {
      low: { maxBitrate: 100000, scaleResolutionDownBy: 4, maxFramerate: 10 },
      medium: { maxBitrate: 200000, scaleResolutionDownBy: 2, maxFramerate: 15 },
      high: { maxBitrate: 700000, scaleResolutionDownBy: 1, maxFramerate: 25 },
    },
  },
});
```

```javascript theme={null}
// Override settings for a specific named custom track
await call.updateSendSettings({
  myCustomVideo: {
    maxQuality: 'medium',
  },
});
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [getSendSettings()](/reference/daily-js/instance-methods/get-send-settings)
    * [startCustomTrack()](/reference/daily-js/instance-methods/start-custom-track)
  </Card>

  <Card title="Events" icon="bolt">
    * [send-settings-updated](/reference/daily-js/events/meeting-events#send-settings-updated)
    * [cpu-load-change](/reference/daily-js/events/quality-events#cpu-load-change)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Send-side video quality](/docs/guides/scaling-calls/best-practices-to-scale-large-experiences#change-send-side-video-quality)
    * [Adaptive bitrate](/docs/guides/architecture-and-monitoring/adaptive-bitrate)
  </Card>
</CardGroup>


# updateTranscription()
Source: https://docs.daily.co/reference/daily-js/instance-methods/update-transcription

Updates the set of participants being transcribed for an active transcription.

<Badge>Paid plans only</Badge>

`updateTranscription(options)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Updates which participants are transcribed for a given transcription instance. If participants are specified or the empty array is passed, any participants that join after this call will not be transcribed unless you call `updateTranscription()` again to include them.

## Parameters

<ParamField type="string">
  The UUID of the transcription instance to update. Omit to update the default instance.
</ParamField>

<ParamField type="string[]">
  Session IDs of the participants to transcribe. Pass an empty array to stop transcribing all participants without ending the transcription session. Pass `null` to transcribe all participants.
</ParamField>

## Return value

Returns `void`.

## Examples

```javascript theme={null}
// Transcribe only specific participants
await call.updateTranscription({
  instanceId: '00000000-0000-4000-8000-000000000000',
  participants: [
    'd8a14d03-58ef-4b7c-824a-181779ab535a',
    '435fa323-65a1-4654-b788-069936da87a0',
  ],
});

// Transcribe all participants
await call.updateTranscription({participants: null});
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [startTranscription()](/reference/daily-js/instance-methods/start-transcription)
    * [stopTranscription()](/reference/daily-js/instance-methods/stop-transcription)
  </Card>

  <Card title="Events" icon="bolt">
    * [Transcription events](/reference/daily-js/events/transcription-events)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Transcription](/docs/guides/features/transcription)
    * [daily-js transcription guide](/docs/daily-js/features/transcription)
  </Card>

  <Card title="REST API" icon="server">
    * [Update transcription](/reference/rest-api/rooms/transcription/update)
  </Card>
</CardGroup>


# updateWaitingParticipant()
Source: https://docs.daily.co/reference/daily-js/instance-methods/update-waiting-participant

Grants or denies access to a participant waiting to join the meeting.

`updateWaitingParticipant(id, updates)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

The `id` must correspond to a participant in [`waitingParticipants()`](/reference/daily-js/instance-methods/waiting-participants) — passing an unknown ID results in an error.

Once access is granted, the participant is removed from [`waitingParticipants()`](/reference/daily-js/instance-methods/waiting-participants) and a [`waiting-participant-removed`](/reference/daily-js/events/participant-events#waiting-participant-removed) event fires.

## Parameters

<ParamField type="string">
  The session ID of the waiting participant.
</ParamField>

<ParamField type="DailyWaitingParticipantUpdateOptions">
  <Expandable title="properties">
    <ParamField type="boolean">
      Pass `true` to grant the participant access to join. Pass `false` to deny it.
    </ParamField>
  </Expandable>
</ParamField>

## Return value

Returns `Promise<{ id: string }>` — resolves with the ID of the updated participant.

## Example

```javascript theme={null}
// Grant access to a specific waiting participant
await call.updateWaitingParticipant('session-id', {
  grantRequestedAccess: true,
});

// Deny access
await call.updateWaitingParticipant('session-id', {
  grantRequestedAccess: false,
});
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [updateWaitingParticipants()](/reference/daily-js/instance-methods/update-waiting-participants)
    * [waitingParticipants()](/reference/daily-js/instance-methods/waiting-participants)
    * [requestAccess()](/reference/daily-js/instance-methods/request-access)
  </Card>

  <Card title="Events" icon="bolt">
    * [waiting-participant-added](/reference/daily-js/events/participant-events#waiting-participant-added)
    * [waiting-participant-updated](/reference/daily-js/events/participant-events#waiting-participant-updated)
    * [waiting-participant-removed](/reference/daily-js/events/participant-events#waiting-participant-removed)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Waiting room](/docs/daily-js/guides/waiting-room)
  </Card>
</CardGroup>


# updateWaitingParticipants()
Source: https://docs.daily.co/reference/daily-js/instance-methods/update-waiting-participants

Grants or denies access to multiple waiting participants at once.

`updateWaitingParticipants(updates)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Use this instead of looping over [`updateWaitingParticipant()`](/reference/daily-js/instance-methods/update-waiting-participant).

## Parameters

<ParamField type="{ [id: string]: DailyWaitingParticipantUpdateOptions }">
  An object whose keys are waiting participant session IDs and whose values are update options. Accepts the special key `'*'` to apply updates to all waiting participants not otherwise explicitly specified.

  <Expandable title="DailyWaitingParticipantUpdateOptions fields">
    <ParamField type="boolean">
      Pass `true` to grant the participant their requested access level. Pass `false` to deny it.
    </ParamField>
  </Expandable>
</ParamField>

## Return value

Returns `Promise<{ ids: string[] }>` — resolves with an array of the updated participants' IDs.

## Examples

```javascript theme={null}
// Grant access to all waiting participants
await call.updateWaitingParticipants({
  '*': { grantRequestedAccess: true },
});
```

```javascript theme={null}
// Grant one participant, deny another
await call.updateWaitingParticipants({
  'session-id-1': { grantRequestedAccess: true },
  'session-id-2': { grantRequestedAccess: false },
});
```

```javascript theme={null}
// Deny all except one
await call.updateWaitingParticipants({
  '*': { grantRequestedAccess: false },
  'session-id-1': { grantRequestedAccess: true },
});
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [updateWaitingParticipant()](/reference/daily-js/instance-methods/update-waiting-participant)
    * [waitingParticipants()](/reference/daily-js/instance-methods/waiting-participants)
    * [requestAccess()](/reference/daily-js/instance-methods/request-access)
  </Card>

  <Card title="Events" icon="bolt">
    * [waiting-participant-added](/reference/daily-js/events/participant-events#waiting-participant-added)
    * [waiting-participant-updated](/reference/daily-js/events/participant-events#waiting-participant-updated)
    * [waiting-participant-removed](/reference/daily-js/events/participant-events#waiting-participant-removed)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Waiting room](/docs/daily-js/guides/waiting-room)
  </Card>
</CardGroup>


# waitingParticipants()
Source: https://docs.daily.co/reference/daily-js/instance-methods/waiting-participants

Returns the set of participants currently waiting for access to the meeting.

`waitingParticipants()`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Returns the set of participants who have called [`requestAccess()`](/reference/daily-js/instance-methods/request-access) and are waiting for elevated access to the meeting. Only available to meeting owners and participant admins. Admins should use [`updateWaitingParticipant()`](/reference/daily-js/instance-methods/update-waiting-participant) or [`updateWaitingParticipants()`](/reference/daily-js/instance-methods/update-waiting-participants) to grant or deny access to waiting participants.

## Return value

Returns `{ [id: string]: DailyWaitingParticipant }` — an object mapping participant IDs to their waiting participant info.

<ResponseField name="id" type="string">
  The participant's session ID.
</ResponseField>

<ResponseField name="name" type="string">
  The participant's display name.
</ResponseField>

<ResponseField name="awaitingAccess" type="SpecifiedDailyAccess">
  The access level the participant is requesting. Currently the only requestable level is `{ level: 'full' }`.
</ResponseField>

## Example

```javascript theme={null}
const waiting = call.waitingParticipants();

for (const [id, participant] of Object.entries(waiting)) {
  console.log(`${participant.name} is waiting for ${participant.awaitingAccess.level} access`);
}
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [updateWaitingParticipant()](/reference/daily-js/instance-methods/update-waiting-participant)
    * [updateWaitingParticipants()](/reference/daily-js/instance-methods/update-waiting-participants)
    * [requestAccess()](/reference/daily-js/instance-methods/request-access)
  </Card>

  <Card title="Events" icon="bolt">
    * [waiting-participant-added](/reference/daily-js/events/participant-events#waiting-participant-added)
    * [waiting-participant-updated](/reference/daily-js/events/participant-events#waiting-participant-updated)
    * [waiting-participant-removed](/reference/daily-js/events/participant-events#waiting-participant-removed)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Waiting room](/docs/daily-js/guides/waiting-room)
  </Card>
</CardGroup>


# Daily.getCallInstance()
Source: https://docs.daily.co/reference/daily-js/static-methods/get-call-instance

Returns a valid DailyCall instance by call client ID, or the current instance if no ID is provided.

`Daily.getCallInstance(callClientId?)`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Returns a valid `daily-js` call instance. If `callClientId` is provided, returns the instance with that ID. If omitted, returns the first instance created. When running [multiple call instances](/docs/daily-js/guides/multi-instance) simultaneously, always pass a `callClientId` to avoid ambiguity. Returns `undefined` if no matching valid instance exists. An instance becomes invalid once [`destroy()`](/reference/daily-js/instance-methods/destroy) has been called on it.

## Parameters

<ParamField type="string">
  Optional. The `callClientId` of the specific instance to retrieve. When running [multiple call instances](/docs/daily-js/guides/multi-instance) simultaneously, use this to look up a specific one.
</ParamField>

## Return value

Returns the matching [`DailyCall`](/reference/daily-js/daily-call-client) instance, or `undefined` if no valid instance exists for the given ID (or no instance exists at all when called without an argument).

## Example

```javascript theme={null}
console.log(Daily.getCallInstance()); // undefined — no instance yet

const call = Daily.createCallObject();
console.log(Daily.getCallInstance() === call); // true

// With multiple instances, omitting the ID returns the first one created
const callA = Daily.createCallObject();
const callB = Daily.createCallObject();
console.log(Daily.getCallInstance() === callA); // true — callA was created first

// Pass a callClientId to retrieve a specific instance
console.log(Daily.getCallInstance(callB.callClientId()) === callB); // true

callA.destroy();
console.log(Daily.getCallInstance(callA.callClientId())); // undefined — destroyed
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [Daily.createCallObject()](/reference/daily-js/factory-methods/create-call-object)
    * [Daily.createFrame()](/reference/daily-js/factory-methods/create-frame)
    * [destroy()](/reference/daily-js/instance-methods/destroy)
    * [isDestroyed()](/reference/daily-js/instance-methods/is-destroyed)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Multiple call instances](/docs/daily-js/guides/multi-instance)
  </Card>
</CardGroup>


# Static methods
Source: https://docs.daily.co/reference/daily-js/static-methods/index

Using our video API, static methods allow developers to get information about the environment surrounding a WebRTC call before constructing a Daily object.

Use Daily [static methods](https://developer.mozilla.org/en-US/docs/Glossary/Static_method) to gather information before constructing a Daily object.

Static methods include:

* [`getCallInstance()`](/reference/daily-js/static-methods/get-call-instance)
* [`supportedBrowser()`](/reference/daily-js/static-methods/supported-browser)


# supportedBrowser()
Source: https://docs.daily.co/reference/daily-js/static-methods/supported-browser

Returns information about the current browser and its Daily feature support.

`Daily.supportedBrowser()`

<Badge> Prebuilt</Badge> <Badge> Custom</Badge>

Returns information about the current browser and which Daily features it supports. Call this before joining to detect unsupported environments and conditionally enable features.

## Example

```javascript theme={null}
const {
  supported,
  mobile,
  name,
  version,
  supportsScreenShare,
  supportsVideoProcessing,
  supportsAudioProcessing,
} = Daily.supportedBrowser();

if (!supported) {
  // Show an unsupported browser message
}
```

## Return value

Returns an object with the following fields:

<ResponseField name="supported" type="boolean">
  Whether the browser supports Daily video calls.
</ResponseField>

<ResponseField name="mobile" type="boolean">
  Whether the browser is running on a mobile device.
</ResponseField>

<ResponseField name="name" type="string">
  The browser name (e.g. `"Chrome"`, `"Firefox"`, `"Safari"`).
</ResponseField>

<ResponseField name="version" type="string">
  The browser version string.
</ResponseField>

<ResponseField name="supportsScreenShare" type="boolean">
  Whether the user can initiate a screen share. See [`supportsScreenShare`](#supportsscreenshare) below.
</ResponseField>

<ResponseField name="supportsFullscreen" type="boolean">
  Whether the browser supports fullscreen mode.
</ResponseField>

<ResponseField name="supportsSfu" type="boolean">
  Whether the browser supports SFU topology.
</ResponseField>

<ResponseField name="supportsVideoProcessing" type="boolean">
  Whether background blur and virtual backgrounds are available. See [`supportsVideoProcessing`](#supportsvideoprocessing) below.
</ResponseField>

<ResponseField name="supportsAudioProcessing" type="boolean">
  Whether noise cancellation is available. See [`supportsAudioProcessing`](#supportsaudioprocessing) below.
</ResponseField>

## Supported browsers

| Browser        | Minimum version | Notes                                                       |
| -------------- | --------------- | ----------------------------------------------------------- |
| Chrome         | 75              | Includes Chromium-based browsers and Edge 75+               |
| Firefox        | 91              |                                                             |
| Safari         | 13.1            |                                                             |
| iOS Safari     | iOS 14.3        | Also WKWebView-based browsers on iOS 14.3+                  |
| Android Chrome | Current         | Also Firefox, Samsung Internet, and Chromium-based browsers |
| Electron       | 6               |                                                             |

All other browsers (including legacy Edge, Internet Explorer, and Opera) are not supported. Chromium-based Edge reports a Chrome user agent and is treated identically to Chrome.

## `supportsScreenShare`

Screen share initiation requires desktop. Mobile users can **view** screen shares but cannot start one.

| Browser            | Can share screen  |
| ------------------ | ----------------- |
| Chrome (desktop)   | Yes               |
| Firefox (desktop)  | Yes               |
| Safari (desktop)   | Yes               |
| Any mobile browser | No — receive only |

## `supportsVideoProcessing`

Background blur and virtual backgrounds are powered by [Banuba](https://www.banuba.com/) and require WebGL2. Mobile browsers are not currently supported.

| Browser                | Supported |
| ---------------------- | --------- |
| Chrome 77+ (desktop)   | Yes       |
| Firefox 97+ (desktop)  | Yes       |
| Safari 15.4+ (desktop) | Yes       |
| Any mobile browser     | No        |
| React Native           | No        |

WebGL2 must be available — either hardware-accelerated or software-rendered. If only software WebGL2 is available, video effects will still work but may result in lower frame rates.

Safari requires version 15.4 or later. Earlier versions (pre-15 and 15.0–15.3) are excluded due to WebGL compatibility issues with Banuba.

## `supportsAudioProcessing`

Noise cancellation is powered by [Krisp](https://krisp.ai/) and requires `AudioWorkletNode`.

| Browser                | Supported |
| ---------------------- | --------- |
| Chrome (desktop)       | Yes       |
| Firefox (desktop)      | Yes       |
| Safari 17.4+ (desktop) | Yes       |
| Android Chrome/Firefox | No        |
| React Native           | No        |

Safari requires version 17.4 or later. Earlier versions lack `AudioWorkletNode` support.

## Known limitations

### Audio output device selection — Firefox 116–122

Audio output device selection is disabled on Firefox 116–122. These versions shipped `setSinkId()` with a bug that breaks echo cancellation when used. Fixed in Firefox 123.

### Local audio level observers — Safari older than 14.1

[`startLocalAudioLevelObserver()`](/reference/daily-js/instance-methods/start-local-audio-level-observer) relies on `AudioWorkletNode`, which is not available in Safari older than 14.1.

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [Daily.createCallObject()](/reference/daily-js/factory-methods/create-call-object)
    * [Daily.createFrame()](/reference/daily-js/factory-methods/create-frame)
    * [join()](/reference/daily-js/instance-methods/join)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Introduction](/docs/daily-js/introduction)
  </Card>
</CardGroup>


# DailyCallOptions
Source: https://docs.daily.co/reference/daily-js/types/daily-call-options

Configuration options accepted by Daily factory methods and join().

`DailyCallOptions` is the configuration object accepted by Daily's factory methods ([`createCallObject()`](/reference/daily-js/factory-methods/create-call-object), [`createFrame()`](/reference/daily-js/factory-methods/create-frame), etc.) and by [`join()`](/reference/daily-js/instance-methods/join) and [`load()`](/reference/daily-js/instance-methods/load). Properties marked with `*` are only supported in [Prebuilt](/docs/prebuilt) mode. Properties marked as `dailyConfig` must be nested inside a `dailyConfig` key.

```javascript theme={null}
const call = Daily.createCallObject({
  subscribeToTracksAutomatically: false,
  dailyConfig: {
    micAudioMode: 'music',
  },
});

await call.join({
  url: 'https://your-domain.daily.co/room-name',
  token: 'YOUR_TOKEN',
  startVideoOff: true,
});
```

## Properties

<Note>
  `*` after a property name indicates that property is only supported when using [Daily Prebuilt](/docs/prebuilt).
</Note>

<ParamField type="string">
  Optional as a DailyCall property if a url is passed to the `join()` method. Otherwise, required.
</ParamField>

<ParamField type="string">
  Optional [meeting token](/reference/rest-api/meeting-tokens)

  (Used with the `join()` method).
</ParamField>

<ParamField type="boolean">
  Optional: set to `true` to disable the default behavior of automatically turning on your camera on the first call to either `join()` or `startCamera()`.

  Note: this means that if you turn on your camera as part of or after `startCamera()`, using `startVideoOff: true` in a subsequent `join()` will have no effect.

  You can also control what happens on a direct `join()` (i.e. without `startCamera()` first) using [token](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties-start-video-off) or [room](/reference/rest-api/rooms/get-room#response-config-start-video-off) properties.
</ParamField>

<ParamField type="boolean">
  Optional: set to `true` to disable the default behavior of automatically turning on your microphone on the first call to either `join()` or `startCamera()`.

  Note: this means that if you turn on your microphone as part of or after `startCamera()`, using `startAudioOff: true` in a subsequent `join()` will have no effect.

  You can also control what happens on a direct `join()` (i.e. without `startCamera()` first) using [token](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties-start-video-off) or [room](/reference/rest-api/rooms/get-room#response-config-start-video-off) properties.
</ParamField>

<ParamField type="string">
  Optional: the default language of [Daily Prebuilt](/docs/prebuilt)

  Currently suppported languages are:

  * `"da"`: Danish

  * `"de"`: German

  * `"en"`: English

  * `"es"`: Spanish

  * `"fi"`: Finnish

  * `"fr"`: French

  * `"it"`: Italian

  * `"jp"`: Japanese

  * `"ka"`: Georgian

  * `"nl"`: Dutch

  * `"no"`: Norwegian

  * `"pt"`: Portuguese (Portugal)

  * `"pt-BR"`: Portuguese (Brazil)

  * `"pl"`: Polish

  * `"ru"`: Russian

  * `"sv"`: Swedish

  * `"tr"`: Turkish

  * `"user"`: Uses the browser's current language setting (defaults to English if the language is not one of the above supported language)
</ParamField>

<ParamField type="boolean">
  Optional

  Defaults to false
</ParamField>

<ParamField type="boolean">
  Optional

  Defaults to false

  ⚠️iOS 15.1 and greater does not support this feature
</ParamField>

<ParamField type="boolean">
  Optional: Display the user name change UI in [Daily Prebuilt](/docs/prebuilt).

  Default: true

  ⚠️Use a token to populate a `user_name` in the Daily Prebuilt UI when this property is disabled.
</ParamField>

<ParamField type="object">
  Optional: Used only by [`createFrame()`](/reference/daily-js/factory-methods/create-frame)

  Example object:

  ```javascript theme={null}
  \{
    iframeStyle: \{
      position: 'fixed',
      border: '1px solid black',
      width: '375px',
      height: '450px',
      right: '1em',
      bottom: '1em'
    \}
  \}
  ```
</ParamField>

<ParamField type="object">
  Allows theme color customization, on either a global, or per sub-theme, basis (`light` and `dark`).

  See [`setTheme()`](/reference/daily-js/instance-methods/set-theme) for detailed options.
</ParamField>

<ParamField type="boolean">
  This configuration property only applies when using `daily-js`'s call object (custom) mode *and* when a CSP (Content Security Policy) is defined. As of `daily-js` v0.27.0, developers using a CSP can remove `'unsafe-eval'` from their `script-src` directive but must pass `'https://*.daily.co'` in its place. Must be passed as a property of a `dailyConfig` object. Learn more in our [CSP guide](/docs/guides/privacy-and-security/content-security-policy#avoiding-the-unsafe-eval-requirement).

  Default: false
</ParamField>

<ParamField type="boolean">
  ⚠️ This configuration property only applies when building on top of [the Daily call object](/call-object). Must be passed as a property of a `dailyConfig` object.

  Optional: Setting to true will keep the hardware video light on even when the participant camera is disabled.

  Default: false
</ParamField>

<ParamField type="boolean">
  ⚠️ Removed in `daily-js 0.43.0`; use [`keepCamIndicatorLightOn`](/reference/daily-js/types/daily-call-options#param-keep-cam-indicator-light-on) instead. This configuration property only applies when building on top of [the Daily call object](/call-object). Must be passed as a property of a `dailyConfig` object.

  Optional: Setting to true will disable the hardware video light when the participant camera is disabled.

  Default: false
</ParamField>

<ParamField type="boolean">
  ⚠️ This configuration property only applies when building on top of [the Daily call object](/call-object). Must be passed as a property of a `dailyConfig` object.

  Optional: When set to true, Daily will store the user's preferred camera, microphone, and speaker devices in browser cookies. On subsequent calls, Daily will automatically select these previously-used devices if they are still available.

  Default: false
</ParamField>

<ParamField type="boolean">
  ⚠️ This configuration property only applies when building on top of [the Daily call object](/call-object). Must be passed as a property of a `dailyConfig` object.

  Optional: Setting to false will make it so that, if the user needs to be prompted by the browser for camera access, that access prompt won't also include a request for microphone access.

  Default: true. For most apps, if the user turns on their camera first, it's preferable to prompt for both camera and microphone access up front to avoid a second prompt when the user later turns on their microphone.
</ParamField>

<ParamField type="boolean">
  ⚠️ This configuration property only applies when building on top of [the Daily call object](/call-object). Must be passed as a property of a `dailyConfig` object.

  Optional: Setting to true will make it so that when the user is first prompted by the browser for device access, the prompt will always include a request for camera access, even if the user is only turning on their microphone.

  Default: false. For most apps, if the user turns on their microphone first, it would be surprising to be asked for camera access as well.)
</ParamField>

<ParamField type="string">
  Optional: Sets the participant's userName
</ParamField>

<ParamField type="unknown">
  Optional: Sets custom `userData` on the participant. See [`setUserData()`](/reference/daily-js/instance-methods/set-user-data) for more details and requirements.

  For Daily Prebuilt, you can use `userData` to add a custom avatar image that will be displayed for muted participant tiles and in the People tab. To add this, include `avatar: 'https://example.com/avatar.jpg'` in the userData object. The avatar image URL must be publicly accessible. When a custom avatar image is set, it will displayed on the participant's tile and in the People tab.
</ParamField>

<ParamField type="boolean">
  Optional: Receive all audio, video, and screen tracks from all call participants

  Default: true

  ⚠️This configuration property is not supported when using [Daily Prebuilt](https://www.daily.co/prebuilt).

  Applies only when building with the [Daily call object](/docs/daily-js/concepts/call-modes#call-object-mode) and while connected in [SFU mode](/docs/guides/architecture-and-monitoring/intro-to-video-arch#the-architecture-of-a-room-p2p-vs-sfu-calls).

  A value of `false` means no tracks will be received until they are explicitly subscribed to. Read more about manual track subscriptions in our [docs](/reference/daily-js/instance-methods/update-participant#param-set-subscribed-tracks).
</ParamField>

<ParamField type="boolean or MediaStreamTrack object">
  Optional: set the audio track, device, or initial state for the call.

  Default: true

  ⚠️This configuration property is not supported when using [Daily Prebuilt](https://www.daily.co/prebuilt).

  Pass false only if the participant's audio should remain muted the entire call.

  Pass a device ID string (like you get back from `enumerateDevices()` to specify what audio input device to use.

  Or pass a [MediaStreamTrack object](https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack) to use that audio/video track directly. If you pass a MediaStreamTrack, you're responsible for managing the lifecycle of that track. If you pass a Device ID string, the Daily API will manage the media track for that device.
</ParamField>

<ParamField type="boolean or MediaStreamTrack object">
  Optional: set the video track, device, or initial state for the call.

  Default: true

  ⚠️This configuration property is not supported when using [Daily Prebuilt](https://www.daily.co/prebuilt).

  Pass false only if the participant's video should remain muted the entire call.

  Pass a device ID string (like you get back from [`enumerateDevices()`](/reference/daily-js/instance-methods/enumerate-devices)) to specify what video input device to use.

  Or pass a [MediaStreamTrack object](https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack) to use that audio/video track directly. If you pass a MediaStreamTrack, you're responsible for managing the lifecycle of that track. If you pass a Device ID string, the Daily API will manage the media track for that device.
</ParamField>

<ParamField type="boolean">
  Optional: Display the video of the local call participant in [Daily Prebuilt](/docs/prebuilt).

  Default: true

  Useful for [webinar-style applications](https://www.daily.co/blog/customize-your-prebuilt-video-call-ui-with-dailys-latest-methods-and-properties/).
</ParamField>

<ParamField type="boolean">
  Optional: Controls visibility of other participants' videos in [Daily Prebuilt](/docs/prebuilt)'s speaker view.

  Default: true

  Useful for [webinar-style applications](https://www.daily.co/blog/customize-your-prebuilt-video-call-ui-with-dailys-latest-methods-and-properties/).
</ParamField>

<ParamField type="boolean">
  Optional: Specifies whether to start the [Daily Prebuilt](https://www.daily.co/prebuilt) call in [active speaker mode](/reference/daily-js/instance-methods/active-speaker-mode). Defaults to true, but can be set to false to start the call in grid mode instead.

  Default: true
</ParamField>

<ParamField type="object">
  Optional: Takes an object of the form: `\{grid: \{ minTilesPerPage: [number], maxTilesPerPage: [number] \}\}`, which specifies how the grid of video tiles behave when the browser is resized when the call is in grid mode.

  Default:

  `maxTilesPerPage` defaults to 25, with a limit of 49\*.

  `minTilesPerPage` defaults to 1, with a minimum of 1.

  \*If you need more than 49 max tiles, please [contact us](https://www.daily.co/contact).
</ParamField>

<ParamField type="object">
  Optional: Takes a media receive settings object (see [`updateReceiveSettings()`](/reference/daily-js/instance-methods/update-receive-settings) for details). Specifies the receive settings to use right away upon joining the call.
</ParamField>

<ParamField type="object">
  Optional: Applies settings to alter local input media streams, making it possible to override track constraints and/or enable a media processor like `"noise-cancellation"` or `"background-blur"`. See [`updateInputSettings()`](/reference/daily-js/instance-methods/update-input-settings) for details.
</ParamField>

<ParamField type="object">
  Optional: Takes a media send settings object (see [`updateSendSettings()`](/reference/daily-js/instance-methods/update-send-settings) for details). Specifies the send settings to use right away upon joining the call.
</ParamField>

<ParamField type="object">
  This property has been deprecated. Instead, use the [`sendSettings`](/reference/daily-js/types/daily-call-options#param-send-settings) iframe property to specify custom simulcast encodings.

  Optional: Requests that a participant sends video spatial layers with specific simulcast encodings (`maxBitrate`, `maxFramerate`, and `scaleResolutionDownBy`) to the server. Must be passed as a property of a `dailyConfig` object.

  <Badge>Deprecated</Badge>
</ParamField>

<ParamField type="string or object">
  Optional (Advanced): Configures the sender's audio tracks (`audio` or `screenAudio`) to be either `music` or `speech`. When set to `music`, a 256kbps stereo audio track will be sent to other participants. When set to `speech`, browser defaults will be applied.

  Alternatively, an object can be provided in order to specify the audio bitrate and stereo mode. The bitrate is a number in bits per second and the stereo mode is a boolean, where `true` enables 2-channel stereo audio and `false` enables 1-channel mono audio.

  Must be passed as a property of a `dailyConfig` object.

  `micAudioMode` works in SFU mode only.

  Example object:

  ```javascript theme={null}
  \{
    micAudioMode: \{
      bitrate: 128000,
      stereo: false,
    \},
  \}
  ```

  Default: `null`
</ParamField>

<ParamField type="object">
  This property has been deprecated. Instead, use the [`inputSettings`](/reference/daily-js/types/daily-call-options#param-input-settings) iframe property to specify custom constraints.

  Optional (Advanced): Allows for audio media constraints to be defined. Must be passed as a property of a `dailyConfig` object. The value passed should be a [`MediaTrackConstraints`](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints) object.

  Constraints will be used when Daily invokes [`getUserMedia()`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia).

  If `micAudioMode` is set to `music`, this property will be overwritten in favor of the `music` settings.

  <Badge>Deprecated</Badge>
</ParamField>

<ParamField type="object">
  This property has been deprecated on daily-js. Instead, use the [`inputSettings`](/reference/daily-js/types/daily-call-options#param-input-settings) iframe property to specify custom constraints.

  Optional (Advanced): Allows for video media constraints to be defined. Must be passed as a property of a `dailyConfig` object. The value passed should be a [`MediaTrackConstraints`](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints) objects.

  Constraints will be used when Daily invokes [`getUserMedia()`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia).

  <Badge>Deprecated</Badge>
</ParamField>

<ParamField type="boolean">
  Must be passed as a property of a `dailyConfig` object.

  Optional: Setting to true will cause Daily to prefer the legacy video processing provider (i.e. for background blur and background image replacement). The legacy provider was the default provider until `daily-js 0.56.0`.

  Default: false
</ParamField>

<ParamField type="boolean">
  Must be passed as a property in a [factory method](/reference/daily-js/factory-methods).

  Optional: Setting to true will override Daily's default behavior and allow multiple call instances to exist and work simultaneously. See [this guide](/docs/daily-js/guides/multi-instance) for more.

  Introduced in `daily-js 0.67.0`.

  Default: false
</ParamField>

<ParamField type="boolean">
  Must be passed as a property in a [factory method](/reference/daily-js/factory-methods).

  Optional: Setting to false will override override Daily's default behavior and allow a call instance to be used after it has been destroyed. Use of this flag is discouraged.

  Default: true
</ParamField>

<ParamField type="object">
  Optional: Configures a set of custom buttons in your [Daily Prebuilt](/docs/prebuilt) call through the passed-in dictionary. You can pass multiple custom buttons in at once. Because Daily Prebuilt runs in an `<iframe>`, the `iconPath` and  `iconPathDarkMode` values must each be a URL, complete with the `https:` protocol string.

  Example object:

  ```javascript theme={null}
  \{
    customTrayButtons: \{
      customButtonOne: \{
        iconPath: 'https://example.com/path/to/your/icon.svg',
        iconPathDarkMode: 'https://example.com/path/to/your/darkmode/icon.svg',
        label: 'My Custom Button',
        tooltip: 'My Custom Button Tooltip',
        visualState: 'default'
      \},
      customButtonTwo: \{
        iconPath: 'https://example.com/path/to/your/icon.svg',
        label: 'Another Custom Button',
        tooltip: 'Another Custom Button Tooltip',
      \},
    \},
  \}
  ```

  `visualState` can be one of

  * `"default"`: default style
  * `"active"`: adds a red background to the provided icon. Use this when the custom button represents a service or state, where `"active"` indicates the service is running or the state is active.
  * `"sidebar-open"`: requires setting a [customIntegration](#customIntegrations) with `"location": "sidebar"`. When the sidebar tab is active, this custom button will have a little bottom-border indicator, similar to "People", "Chat" or "Network".
</ParamField>

<ParamField type="object">
  Optional (Advanced): Configures Daily Prebuilt so that an Internet hosted website can be embedded into Prebuilt as an iframe. Active integrations will appear in one of two areas: in the `main` call area or the `sidebar`. The location depends on the configuration. `main` integrations will appear in the main call area, only when they are running. `sidebar` integrations will appear as additional tabs in the Prebuilt sidebar. The full list of properties are referenced [here](/reference/daily-js/instance-methods/set-custom-integrations#param-custom-integrations).

  Example object:

  ```javascript theme={null}
  \{
    const miroEmbed: DailyCustomIntegration = \{
      iconURL: 'https://files.readme.io/17d4a23-miro-logo-color-square.png',
      label: 'Miro',
      location: 'main',
      name: 'miro',
      shared: false,
      allow: 'fullscreen; clipboard-read; clipboard-write',
      src: '',
    \}
  \}
  ```
</ParamField>

<ParamField type="object">
  Optional (Advanced): Allows for specifying custom TURN servers rather than only using Daily's default TURN servers.

  ⚠️ This configuration property is part of the Advanced Firewall Control add-on. Please contact [Sales](https://live.daily.co/talk-to-us) to enable this functionality.

  Must be passed as a property of a `dailyConfig` object.

  #### Properties:

  `iceServers`:

  * type: [`RTCIceServer[]`](https://w3c.github.io/webrtc-pc/#dom-rtciceserver)
  * description: Each object in the array has properties `urls`, `username` and `credential`. See [`RTCIceServer[]`](https://w3c.github.io/webrtc-pc/#dom-rtciceserver) for full description.
  * default: `[]`

  `placement`:

  * type: `'front'` | `'back'` | `'replace'`
  * description: Controls how the provided `iceServers` are included relative to the Daily-provided servers. `'front'` means the provided `iceServers` are included in the array first. `'back'` means the Daily-provided servers are included first. `'replace'` means that only the provided `iceServers` are used. Since all known WebRTC implementations will try all included `iceServers` and pick one based on the lowest RTT, we recommend omitting this property unless using `'replace'`.
  * default: `'front'`

  `iceTransportPolicy`:

  * type: `'all'` | `'relay'`
  * description: `'all'` will use all of the candidates. `'relay'` will only use relay candidates, such as those passing through a TURN server. See [`RTCIceTransportPolicy` Enum](https://w3c.github.io/webrtc-pc/#rtcicetransportpolicy-enum) for more information. Note: Forcing the use of relay candidates is useful for testing, but for most production use cases, the default value of `'all'` should be used.
  * default: `'all'`

  Example object:

  ```javascript theme={null}
  \{
    iceConfig: \{
      iceServers: [
        \{
          "urls": [
            "stun:stunserver.example.org:3478",
            "turn:turnserver.example.org:3478?transport=udp",
            "turn:turnserver.example.org:3478?transport=tcp",
            "turn:turnserver.example.org:443?transport=tcp",
            "turns:turnserver.example.org:443?transport=tcp"
          ],
          "username": "[USER_NAME]",
          "credential": "[CREDENTIAL]"
        \}
      ],
    \},
  \}
  ```

  After setting `iceConfig` as a frame property, it will be necessary to call [`setIceConfig()`](/reference/daily-js/instance-methods/set-ice-config) periodically so that the `iceServer` credentials remain valid, in case they are needed for reconnections, or to connect to new peers in peer mode.

  It is recommended to use TURN server credentials that are valid for more than one hour, and call [`setIceConfig()`](/reference/daily-js/instance-methods/set-ice-config) every hour to refresh the credentials, if possible.
</ParamField>

<ParamField type="string">
  Optional (Advanced): If defined, connections to Daily's HTTPS and WebSocket endpoints will be sent instead to the specified proxy server.

  ⚠️ This configuration property is part of the Advanced Firewall Control add-on. Please contact [Sales](https://live.daily.co/talk-to-us) to enable this functionality.

  Must be passed as a property of a `dailyConfig` object. Defaults to `null`.

  Example:

  ```javascript theme={null}
  // Pass configuration properties to createFrame()
  call = window.Daily.createFrame(\{
    iframeStyle: \{
      position: 'fixed',
      border: '1px solid black',
      width: '375px',
      height: '450px',
      right: '1em',
      bottom: '1em',
    \},
    dailyConfig: \{
      micAudioMode: 'music',
      proxyUrl: 'https://my-proxy-server:8080',
    \},
    showLeaveButton: true,
    showFullscreenButton: true,
  \});
  call.join(\{ url: 'DAILY_ROOM_URL' \});
  ```

  If needed, [`setProxyUrl()`](/reference/daily-js/instance-methods/set-proxy-url) can be used to modify the property once set.

  #### Proxy requirements

  The proxy server must proxy HTTPS connections to:

  * [https://prod-ks.pluot.blue/](https://prod-ks.pluot.blue/)\*
  * [https://c.daily.co/](https://c.daily.co/)\*
  * [https://gs.daily.co/](https://gs.daily.co/)\*

  It must also proxy HTTPS connections converting to WebSockets on `*.wss.daily.co` and `*-wss.daily.co`. If possible, proxying on `*.daily.co` is best.

  Note: the URLs listed here are subject to change in subsequent releases of `daily-js`.
</ParamField>


# DailyParticipant
Source: https://docs.daily.co/reference/daily-js/types/daily-participant

The object representing a participant in a Daily call, returned by participants() and emitted on participant events.

`DailyParticipant` represents a single participant in a Daily call. It is returned by [`participants()`](/reference/daily-js/instance-methods/participants) and included in the payload of participant events. Daily keeps this object up to date as media states, permissions, and network conditions change.

```typescript theme={null}
interface DailyParticipant {
  session_id: string;
  user_id: string;
  user_name: string;
  userData?: unknown;
  local: boolean;
  owner: boolean;
  record: boolean;
  joined_at?: Date;
  will_eject_at: Date;
  participantType?: DailyParticipantTypeValues;
  networkQualityState?: 'good' | 'warning' | 'bad' | 'unknown';
  tracks: DailyParticipantTracks;
  permissions: DailyParticipantPermissions;
}
```

## Properties

<ResponseField name="session_id" type="string">
  A unique identifier for this specific join event. Randomly generated on every `join()` call. Used as the key in `participants()` and `updateParticipant()`, and in REST API endpoints. Not stable across reconnects — if a participant leaves and rejoins, they get a new `session_id`.
</ResponseField>

<ResponseField name="user_id" type="string">
  A stable identifier for the user, settable via a meeting token. Persists across reconnects within the same call session. Defaults to `session_id` if not set via token.
</ResponseField>

<ResponseField name="user_name" type="string">
  The participant's display name. Set via a meeting token, [`DailyCallOptions`](/reference/daily-js/types/daily-call-options), or [`setUserName()`](/reference/daily-js/instance-methods/set-user-name).
</ResponseField>

<ResponseField name="userData" type="unknown">
  Arbitrary JSON data associated with the participant. Set via [`DailyCallOptions`](/reference/daily-js/types/daily-call-options) or [`setUserData()`](/reference/daily-js/instance-methods/set-user-data).
</ResponseField>

<ResponseField name="local" type="boolean">
  `true` for the local participant. The local participant is always available at `participants().local`.
</ResponseField>

<ResponseField name="owner" type="boolean">
  `true` when the participant joined with an owner-level meeting token or was granted owner permissions.
</ResponseField>

<ResponseField name="record" type="boolean">
  `true` when the participant is a cloud recording bot.
</ResponseField>

<ResponseField name="joined_at" type="Date">
  Timestamp for when the participant joined the call. Not set until after the `joined-meeting` event. The timestamp reflects the server's clock, so it may differ slightly from the local client's clock.
</ResponseField>

<ResponseField name="will_eject_at" type="Date">
  If the token or room has an expiration with `eject_at_token_exp` or `eject_at_room_exp` set to `true`, this is the timestamp when the participant will be ejected. If no ejection is configured, this is `0` (Dec 31, 1969). Note: this timestamp matches the client clock, not the server clock.
</ResponseField>

<ResponseField name="participantType" type="string | undefined">
  Set for non-human participants. Not present for standard web participants.

  <Expandable title="participantType values">
    | Value                   | Description                                                              |
    | ----------------------- | ------------------------------------------------------------------------ |
    | `'remote-media-player'` | Participant is a remote media player                                     |
    | `'sip-dial-in'`         | Participant joined via a SIP device dialing into the Daily room          |
    | `'sip-dial-out'`        | Participant joined when a SIP endpoint was called using the dial-out API |
    | `'pstn-dial-in'`        | Participant joined via dialing a PIN-based phone number                  |
    | `'pstn-dial-out'`       | Participant joined when a phone number was called using the dial-out API |
    | `'unknown'`             | Participant is SIP/PSTN but Daily cannot determine the exact type        |
  </Expandable>
</ResponseField>

<ResponseField name="networkQualityState" type="'good' | 'warning' | 'bad' | 'unknown'">
  The participant's current network quality as assessed by Daily. Updated via [`network-quality-change`](/reference/daily-js/events/network-events#network-quality-change) events.
</ResponseField>

<ResponseField name="tracks" type="DailyParticipantTracks">
  All media track states for this participant. Keys are `'audio'`, `'video'`, `'screenAudio'`, `'screenVideo'`, and any custom track names. Values are [`DailyTrackState`](/reference/daily-js/types/daily-track-state) objects.

  ```typescript theme={null}
  interface DailyParticipantTracks {
    audio: DailyTrackState;
    video: DailyTrackState;
    screenAudio: DailyTrackState;
    screenVideo: DailyTrackState;
    [customTrackKey: string]: DailyTrackState | undefined;
  }
  ```

  See [`DailyTrackState`](/reference/daily-js/types/daily-track-state) for the full field reference.
</ResponseField>

<ResponseField name="permissions" type="DailyParticipantPermissions">
  The participant's current send, receive, and admin permissions. See [`DailyParticipantPermissions`](/reference/daily-js/types/daily-participant-permissions) for the full field reference.
</ResponseField>

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyTrackState](/reference/daily-js/types/daily-track-state)
    * [DailyParticipantPermissions](/reference/daily-js/types/daily-participant-permissions)
  </Card>

  <Card title="Methods" icon="code">
    * [participants()](/reference/daily-js/instance-methods/participants)
    * [updateParticipant()](/reference/daily-js/instance-methods/update-participant)
  </Card>

  <Card title="Events" icon="bolt">
    * [participant-joined](/reference/daily-js/events/participant-events#participant-joined)
    * [participant-updated](/reference/daily-js/events/participant-events#participant-updated)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Participants](/docs/daily-js/concepts/participants)
  </Card>
</CardGroup>


# DailyParticipantPermissions
Source: https://docs.daily.co/reference/daily-js/types/daily-participant-permissions

The send, receive, and admin permissions for a participant in a Daily call.

`DailyParticipantPermissions` describes what a participant is allowed to do in a call. It is exposed as `DailyParticipant.permissions` and can be updated at runtime via [`updateParticipant()`](/reference/daily-js/instance-methods/update-participant).

```typescript theme={null}
interface DailyParticipantPermissions {
  hasPresence: boolean;
  canSend: boolean | Set<'video' | 'audio' | 'screenVideo' | 'screenAudio' | 'customVideo' | 'customAudio'>;
  canReceive: DailyParticipantCanReceivePermission;
  canAdmin: boolean | Set<'participants' | 'streaming' | 'transcription'>;
}
```

## Properties

<ResponseField name="hasPresence" type="boolean">
  When `false`, the participant is hidden from all other participants. They do not appear in `participants()` for others, cannot be seen or heard, and their events are not broadcast. Useful for silent observers or bots.
</ResponseField>

<ResponseField name="canSend" type="boolean | Set<string>">
  Controls which media tracks the participant may publish. `true` allows all, `false` blocks all, or a `Set` of specific track types.

  <Expandable title="allowed values">
    <ResponseField name="&#x22;video&#x22;">Camera video track.</ResponseField>
    <ResponseField name="&#x22;audio&#x22;">Microphone audio track.</ResponseField>
    <ResponseField name="&#x22;screenVideo&#x22;">Screen share video.</ResponseField>
    <ResponseField name="&#x22;screenAudio&#x22;">Screen share audio.</ResponseField>
    <ResponseField name="&#x22;customVideo&#x22;">Any custom video track started with `startCustomTrack()`.</ResponseField>
    <ResponseField name="&#x22;customAudio&#x22;">Any custom audio track started with `startCustomTrack()`.</ResponseField>
  </Expandable>
</ResponseField>

<ResponseField name="canReceive" type="DailyParticipantCanReceivePermission">
  Controls which participants' media this participant may subscribe to. Overrides cascade from most general (`base`) to most specific (`byParticipantId`).

  <Expandable title="canReceive properties">
    <ResponseField name="base" type="boolean | object">
      Default receive permission that applies to all remote participants unless overridden. `true` allows all media, `false` blocks all. Or provide a granular object:

      ```typescript theme={null}
      {
        video: boolean;
        audio: boolean;
        screenVideo: boolean;
        screenAudio: boolean;
        customVideo: { '*': boolean; [trackName: string]: boolean };
        customAudio: { '*': boolean; [trackName: string]: boolean };
      }
      ```
    </ResponseField>

    <ResponseField name="byUserId" type="object">
      Per-`user_id` overrides. A mapping from `user_id` to `true`, `false`, or a partial per-media-type object. Overrides `base` for the matched participant.
    </ResponseField>

    <ResponseField name="byParticipantId" type="object">
      Per-`session_id` overrides. A mapping from `session_id` to `true`, `false`, or a partial per-media-type object. Overrides both `base` and `byUserId` for the matched participant.
    </ResponseField>
  </Expandable>
</ResponseField>

<ResponseField name="canAdmin" type="boolean | Set<string>">
  Controls which administrative capabilities the participant holds. `true` grants all, `false` grants none, or a `Set` of specific capabilities.

  <Expandable title="allowed values">
    <ResponseField name="&#x22;participants&#x22;">Can mute, eject, and update permissions of other participants. Can also admit waiting participants.</ResponseField>
    <ResponseField name="&#x22;streaming&#x22;">Can start and stop cloud recordings and live streams.</ResponseField>
    <ResponseField name="&#x22;transcription&#x22;">Can start and stop transcription.</ResponseField>
  </Expandable>
</ResponseField>

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyParticipant](/reference/daily-js/types/daily-participant)
  </Card>

  <Card title="Methods" icon="code">
    * [updateParticipant()](/reference/daily-js/instance-methods/update-participant)
  </Card>

  <Card title="Events" icon="bolt">
    * [participant-updated](/reference/daily-js/events/participant-events#participant-updated)
  </Card>

  <Card title="REST API" icon="server">
    * [Create meeting token](/reference/rest-api/meeting-tokens/create-meeting-token)
    * [Update participant permissions](/reference/rest-api/rooms/session/update-permissions)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Permissions](/docs/daily-js/guides/permissions)
  </Card>
</CardGroup>


# DailyStreamingLayoutConfig
Source: https://docs.daily.co/reference/daily-js/types/daily-streaming-layout-config

Layout configuration for cloud recordings and live streams. A discriminated union keyed on the preset field.

`DailyStreamingLayoutConfig` controls how participant video is composed when cloud recording or live streaming. It is a discriminated union — the `preset` field determines which layout is used and which additional fields are available.

```typescript theme={null}
type DailyStreamingLayoutConfig =
  | { preset: 'default';               /* ... */ }
  | { preset: 'single-participant';    /* ... */ }
  | { preset: 'active-participant';    /* ... */ }
  | { preset: 'portrait';              /* ... */ }
  | { preset: 'audio-only';            /* ... */ }
  | { preset: 'raw-tracks-audio-only'; /* ... */ }
  | { preset: 'custom';                /* ... */ }
```

Pass a layout config via the `layout` field of [`DailyStreamingOptions`](/reference/daily-js/types/daily-streaming-options) when calling [`startRecording()`](/reference/daily-js/instance-methods/start-recording), [`updateRecording()`](/reference/daily-js/instance-methods/update-recording), [`startLiveStreaming()`](/reference/daily-js/instance-methods/start-live-streaming), or [`updateLiveStreaming()`](/reference/daily-js/instance-methods/update-live-streaming).

<Note>
  `DailyLiveStreamingLayoutConfig` is the same union with one difference: the `audio-only` preset is not available for live streaming.
</Note>

***

## participants

Several presets accept an optional `participants` config that controls which participants are included in the composition and in what order.

<ResponseField name="participants.video" type="string[]">
  Optional. An ordered list of participant `session_id` values to include in the video composition. Participants not in this list are excluded.
</ResponseField>

<ResponseField name="participants.audio" type="string[]">
  Optional. An ordered list of participant `session_id` values to include in the audio mix.
</ResponseField>

<ResponseField name="participants.sort" type="string">
  Optional. Sort method for participants. Currently only `'active'` is supported, which sorts by recent speaking activity.
</ResponseField>

***

## Presets

### default

Shows up to `max_cam_streams` participant camera tiles in a grid. This is the default if no layout is specified.

<ResponseField name="preset" type="string">
  Always `"default"`.
</ResponseField>

<ResponseField name="max_cam_streams" type="number">
  Optional. Maximum number of camera tiles to show. Defaults to 9.
</ResponseField>

<ResponseField name="participants" type="DailyStreamingParticipantsConfig">
  Optional. See [participants](#participants) above.
</ResponseField>

```json theme={null}
{ "preset": "default", "max_cam_streams": 6 }
```

***

### single-participant

Fills the frame with one participant's camera feed.

<ResponseField name="preset" type="string">
  Always `"single-participant"`.
</ResponseField>

<ResponseField name="session_id" type="string">
  The `session_id` of the participant to feature.
</ResponseField>

```json theme={null}
{ "preset": "single-participant", "session_id": "abc123" }
```

***

### active-participant

Fills the frame with the currently active speaker's camera feed.

<ResponseField name="preset" type="string">
  Always `"active-participant"`.
</ResponseField>

<ResponseField name="participants" type="DailyStreamingParticipantsConfig">
  Optional. See [participants](#participants) above.
</ResponseField>

```json theme={null}
{ "preset": "active-participant" }
```

***

### portrait

Stacks participant tiles vertically, optimized for portrait (mobile) aspect ratios.

<ResponseField name="preset" type="string">
  Always `"portrait"`.
</ResponseField>

<ResponseField name="variant" type="string">
  Optional. Layout variant: `'vertical'` (stacked column) or `'inset'` (active speaker fills the frame with a small inset tile). Defaults to `'vertical'`.
</ResponseField>

<ResponseField name="max_cam_streams" type="number">
  Optional. Maximum number of camera tiles to show.
</ResponseField>

<ResponseField name="participants" type="DailyStreamingParticipantsConfig">
  Optional. See [participants](#participants) above.
</ResponseField>

```json theme={null}
{ "preset": "portrait", "variant": "inset" }
```

***

### audio-only

Records audio without any video composition.

<Note>
  Available for cloud recordings only. Not supported for live streaming — use `DailyStreamingLayoutConfig` rather than `DailyLiveStreamingLayoutConfig` when passing this preset to `startRecording()`.
</Note>

<ResponseField name="preset" type="string">
  Always `"audio-only"`.
</ResponseField>

<ResponseField name="participants" type="DailyStreamingParticipantsConfig">
  Optional. See [participants](#participants) above.
</ResponseField>

```json theme={null}
{ "preset": "audio-only" }
```

***

### raw-tracks-audio-only

Records raw audio tracks without mixing. Each participant's audio is captured as a separate track.

<ResponseField name="preset" type="string">
  Always `"raw-tracks-audio-only"`.
</ResponseField>

```json theme={null}
{ "preset": "raw-tracks-audio-only" }
```

***

### custom

Renders a custom composition using Daily's compositor. Requires a `composition_id` when starting a stream or recording; `composition_id` cannot be changed mid-session via an update call.

<ResponseField name="preset" type="string">
  Always `"custom"`.
</ResponseField>

<ResponseField name="composition_id" type="string">
  The ID of the custom composition to use. Required when starting — cannot be changed on update calls.
</ResponseField>

<ResponseField name="composition_params" type="object">
  Optional. Key/value pairs passed to the composition as parameters. Values must be `boolean`, `number`, or `string`. Can be updated mid-session via `updateRecording()` or `updateLiveStreaming()`.
</ResponseField>

<ResponseField name="session_assets" type="object">
  Optional. Key/value pairs mapping asset names to URLs, made available to the composition. Only valid when starting — cannot be set on update calls.
</ResponseField>

<ResponseField name="participants" type="DailyStreamingParticipantsConfig">
  Optional. See [participants](#participants) above.
</ResponseField>

```json theme={null}
// Starting a custom composition
{
  "preset": "custom",
  "composition_id": "my-composition",
  "composition_params": {
    "showLowerThirds": true,
    "accentColor": "#ff0000"
  },
  "session_assets": {
    "logo": "https://example.com/logo.png"
  }
}
```

```json theme={null}
// Updating composition params mid-session
{
  "preset": "custom",
  "composition_params": {
    "showLowerThirds": false
  }
}
```

***

## VCS baseline composition

<Badge>Paid plan only</Badge>

When using `preset: 'custom'`, you can set `composition_id` to `'daily:baseline'` to use Daily's built-in VCS baseline compositor. The `composition_params` object then accepts the following properties to control layouts, overlays, and other visual elements.

<VCSInstanceMethodDesc />

### Baseline composition properties

<ParamField type="string">
  Sets the layout mode. Valid options:

  * **single**: Show a single full-screen video.
  * **split**: Show the first two participants side-by-side.
  * **grid**: Show up to 20 videos in a grid layout.
  * **dominant**: Show the active speaker in a large pane on the left, with additional video thumbnails on the right.
  * **pip**: Show the active speaker in a full-screen view, with the first participant inlaid in a corner.
</ParamField>

<ParamField type="boolean">
  Sets whether a text overlay is displayed. You can configure the contents of the overlay with the `text.*` properties.
</ParamField>

<ParamField type="boolean">
  Sets whether an image overlay is displayed. You can configure the display of the overlay with the `image.*` properties. The image used must be passed in the `session_id` layout option when the stream or recording is *started*.
</ParamField>

<ParamField type="boolean">
  Sets whether a banner overlay is displayed. The banner can be used for TV-style "lower third" graphics, or displayed in any corner. You can configure the content of the overlay with the `banner.*` properties.
</ParamField>

<ParamField type="boolean">
  Sets whether a WebFrame overlay is displayed. You can configure the display of this live web browser overlay with the `webFrame.*` properties. The URL and the browser viewport size can be changed while your stream or recording is running.
</ParamField>

<ParamField type="boolean">
  Sets whether a sidebar is displayed. You can configure the display of the sidebar with the `sidebar.*` properties.
</ParamField>

<ParamField type="boolean">
  Sets whether a title screen (a "slate") is displayed. You can configure the display of the slate with the `titleSlate.*` properties.
</ParamField>

<ParamField type="boolean">
  Sets whether a title screen (a "slate") is automatically shown at the start of the stream. You can configure the display of this automatic slate with the `openingSlate.` properties.
</ParamField>

<ParamField type="number">
  Limits the number of non-screenshare streams that are included in the output.
</ParamField>

<ParamField type="string">
  Lets you do render-time reordering of video inputs according to participant IDs within a Daily room. To enable this sorting, pass a comma-separated list of participant IDs as the value for this param; video inputs matching these IDs will be moved to the top of the list. If you pass an ID that is not present in the room, it's ignored. All other video inputs will remain in their original order. The default value is an empty string indicating no reordering. Also note that `videoSettings.preferScreenshare` takes precedence over the ordering passed here. For more information about how participants and videos are sorted, see the section on [selecting participants](#selecting-participants).
</ParamField>

<ParamField type="boolean">
  When enabled, screen share inputs will be sorted before camera inputs. This is useful when prioritizing screen shares in your layout, especially when all inputs are not included in the final stream. For more information about how participants and videos are sorted, see the section on [selecting participants](#selecting-participants).
</ParamField>

<ParamField type="boolean">
  When enabled, paused video inputs will not be included. By default this is off, and paused inputs are displayed with a placeholder graphic. ("Paused video" means that the video track for a participant is not available, either due to user action or network conditions.)
</ParamField>

<ParamField type="boolean">
  When enabled, audio-only inputs will not be included in rendering. By default this is off, and audio participants are displayed with a placeholder graphic.
</ParamField>

<ParamField type="boolean">
  When enabled, any screenshare video inputs beyond the first one will not be included in rendering. You can control the ordering of the inputs using the `layout.participants` property to explicitly select which participant should be first in the list of inputs.
</ParamField>

<ParamField type="boolean">
  Sets whether call participants' names are displayed on their video tiles.
</ParamField>

<ParamField type="boolean">
  Sets whether to display video tiles with squared or rounded corners. Note that some modes (`dominant` and `pip`) have additional params to control whether the main video has rounded corners or not.
</ParamField>

<ParamField type="number">
  Sets the corner radius applied to video layers when `videoSettings.roundedCorners` is enabled, in grid units.
</ParamField>

<ParamField type="string">
  Controls how source video is displayed inside a tile if they have different aspect ratios. Use `'fill'` to crop the video to fill the entire tile. Use `'fit'` to make sure the entire video fits inside the tile, adding letterboxes or pillarboxes as necessary.
</ParamField>

<ParamField type="string">
  Controls how a screenshare video is displayed inside a tile if they have different aspect ratios. Use `'fill'` to crop the video to fill the entire tile. Use `'fit'` to make sure the entire video fits inside the tile, adding letterboxes or pillarboxes as necessary.
</ParamField>

<ParamField type="string">
  Sets the background color for video placeholder tile. Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="string">
  Sets the highlight color. It's used as the border color to indicate the 'dominant' video input (typically the active speaker). Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="number">
  Sets the stroke width used to render a highlight border. See also `'videoSettings.highlight.color'`. Specified in grid units.
</ParamField>

<ParamField type="number">
  Sets the visual margin between the two video layers shown in `split` mode, in grid units.
</ParamField>

<ParamField type="string">
  Selects whether the `'split'` layout mode is rendered in a horizontal or vertical configuration. The default value `'auto-by-viewport'` means that the split direction will be automatically selected to be most appropriate for the current viewport size: if the viewport is landscape or square, the split axis is vertical; if portrait, the split axis is horizontal. Valid options: `'auto-by-viewport', 'vertical', 'horizontal'`
</ParamField>

<ParamField type="string">
  Overrides the scaleMode setting for the `split` layout mode. Both sides of the split can have separately defined scale modes. Pass a comma-separated list such as `fill, fit` (this would set the left-hand side video to `fill` and the right-hand side video to `fit`). See documentation for the `videoSettings.scaleMode` parameter for the valid options. Note that this setting also overrides `videoSettings.scaleModeForScreenshare`.
</ParamField>

<ParamField type="boolean">
  When enabled, the layout will automatically switch to `dominant` mode from `grid` if a screenshare video input is available. By using this automatic behavior, you avoid having to manually switch the mode via an API call.
</ParamField>

<ParamField type="number">
  Overrides the visual margin between items in `grid` mode, in grid units. The default value of -1 means that the layout algorithm selects a reasonable margin automatically depending on the number of videos.
</ParamField>

<ParamField type="number">
  Overrides the outer padding around items in `grid` mode, in grid units. The default value of -1 means that the layout algorithm selects a reasonable padding automatically depending on the number of videos.
</ParamField>

<ParamField type="boolean">
  By default, the `grid` mode will highlight the dominant video (typically the "active speaker") with a light outline. You can disable the highlight using this setting.
</ParamField>

<ParamField type="boolean">
  By default, the layout for the `grid` mode will try to preserve the aspect ratio of the input videos, i.e. avoid cropping the videos and instead add margins around the grid if needed. Setting this parameter to `false` will make the grid layout fill all available area, potentially cropping the videos.
</ParamField>

<ParamField type="number">
  When set to 0 or greater, the `grid` mode switches to a full-screen highlight of the participant at that zero-based index, hiding the other tiles. The default value of -1 turns this off and renders the normal grid. Use it to jump to a temporary full-screen view of one participant and back without changing the layout mode.
</ParamField>

<ParamField type="string">
  Controls where participant name labels are drawn in `grid` mode. The default `below` puts the label in a strip under each tile. Set it to `inside-at-bottom` to draw the label inside the tile, near the bottom edge.
</ParamField>

<ParamField type="string">
  Control where the dominant (or "active speaker") video is displayed in the `dominant` layout mode. Values are `left`, `right`, `top` or `bottom`.
</ParamField>

<ParamField type="number">
  Sets the position of the imaginary line separating the dominant video from the smaller tiles when using the `dominant` layout. Values are from 0 to 1. The default is 0.8, so if `videoSettings.dominant.position` is set to `left`, the dominant video will take 80% of the width of the screen on the left.
</ParamField>

<ParamField type="number">
  Controls how many "chiclets", or smaller video tiles, appear alongside the dominant video when using the `dominant` layout.
</ParamField>

<ParamField type="boolean">
  When in `dominant` mode, the large tile displays the active speaker by default. Turn off this `followDomFlag` to display the first participant instead of the active speaker.
</ParamField>

<ParamField type="number">
  Margin between the “chiclet” items, in grid units.
</ParamField>

<ParamField type="number">
  Padding around the row/column of “chiclet” items, in grid units.
</ParamField>

<ParamField type="number">
  Margin between the "dominant" video and the row/column of "chiclet" items, in grid units.
</ParamField>

<ParamField type="boolean">
  Sets whether the "dominant" video will be rendered with rounded corners when `videoSettings.roundedCorners` is enabled. Defaults to false because sharp corners are a more natural choice for the default configuration where the dominant video is tightly aligned to viewport edges.
</ParamField>

<ParamField type="string">
  Sets the position of the smaller video in the `pip` (picture-in-picture) layout. Valid options: `'top-left'`, `'top-right'`, `'bottom-left'`, `'bottom-right'`.
</ParamField>

<ParamField type="number">
  Sets the aspect ratio of the smaller video in the `pip` layout. The default is 1.0, which produces a square video.
</ParamField>

<ParamField type="number">
  Sets the height of the smaller video in the `pip` layout, measured in grid units.
</ParamField>

<ParamField type="number">
  Sets the margin between the smaller video and the edge of the frame in the `pip` layout, in grid units.
</ParamField>

<ParamField type="boolean">
  When in "pip" (or picture-in-picture) mode, the overlay tile displays the first participant in the participant array by default. Turn on this `followDomFlag` to display the active speaker instead.
</ParamField>

<ParamField type="boolean">
  Sets whether the main video in `pip` mode will be rendered with rounded corners when `videoSettings.roundedCorners` is enabled. Defaults to false because sharp corners are a more natural choice for the default configuration where the main video is full-screen (no margin to viewport edges).
</ParamField>

<ParamField type="string">
  Sets the participant label style option: font family. Valid options: `DMSans`, `Roboto`, `RobotoCondensed`, `Bitter`, `Exo`, `Magra`, `SuezOne`, `Teko`
</ParamField>

<ParamField type="string">
  Sets the participant label text font weight. Valid options: `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`.

  Note: Not all font weights are valid for every font family.
</ParamField>

<ParamField type="number">
  Sets the participant label text font size.
</ParamField>

<ParamField type="number">
  Sets the offset value for participant labels on the x-axis, measured in grid units.
</ParamField>

<ParamField type="number">
  Sets the offset value for participant labels on the y-axis, measured in grid units.
</ParamField>

<ParamField type="string">
  Sets the participant label font color. Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="string">
  Sets the label font stroke color (the line outlining the text letters). Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="number">
  Sets the left margin value applied to videos (in any layout mode), in grid units. You can use these `videoSettings.margin.*` params to shrink the video area, for example to make room for overlays.
</ParamField>

<ParamField type="number">
  Sets the right margin value applied to videos (in any layout mode), in grid units. You can use these `videoSettings.margin.*` params to shrink the video area, for example to make room for overlays.
</ParamField>

<ParamField type="number">
  Sets the top margin value applied to videos (in any layout mode), in grid units. You can use these `videoSettings.margin.*` params to shrink the video area, for example to make room for overlays.
</ParamField>

<ParamField type="number">
  Sets the bottom margin value applied to videos (in any layout mode), in grid units. You can use these `videoSettings.margin.*` params to shrink the video area, for example to make room for overlays.
</ParamField>

<ParamField type="string">
  Sets the string to be displayed if `showTextOverlay` is true.
</ParamField>

<ParamField type="string">
  Sets the data source used for the text displayed in the overlay. The default value 'param' means that the value of param `text.content` is used. Valid options: `param`, `highlightLines.items`, `chatMessages`, `transcript`
</ParamField>

<ParamField type="string">
  Sets the horizontal alignment of the text overlay within the video frame. Values are `left`, `right`, or `center`.
</ParamField>

<ParamField type="string">
  Sets the vertical alignment of the text overlay within the video frame. Values are `top`, `bottom`, or `center`.
</ParamField>

<ParamField type="number">
  Sets an x-offset (horizontal) to be applied to the text overlay's position based on the values of `text.align_horizontal` and `text.align_vertical`.
</ParamField>

<ParamField type="number">
  Sets a y-offset (vertical) to be applied to the text overlay's position based on the values of `text.align_horizontal` and `text.align_vertical`.
</ParamField>

<ParamField type="number">
  Applies a rotation to the text overlay. Units are degrees, and positive is a clockwise rotation.
</ParamField>

<ParamField type="string">
  Sets the font of the text overlay. Valid options: `DMSans`, `Roboto`, `RobotoCondensed`, `Anton`, `Bangers`, `Bitter`, `Exo`, `Magra`, `PermanentMarker`, `SuezOne`, `Teko`
</ParamField>

<ParamField type="string">
  Selects a weight variant from the selected font family. Valid options: `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`.

  Note: Not all font weights are valid for every font family.
</ParamField>

<ParamField type="string">
  Sets the font style for text. Valid options: 'normal','italic'.
</ParamField>

<ParamField type="number">
  Sets the text overlay font size using grid units (gu). By default, one grid unit is 1/36 of the smaller dimension of the viewport (e.g. 20px in a 1280\*720 stream).
</ParamField>

<ParamField type="string">
  Sets the color and transparency of the text overlay. Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="string">
  Sets the color of the stroke drawn around the characters in the text overlay. Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="number">
  Sets the width of the stroke drawn around the characters in the text overlay. Specified in grid units.
</ParamField>

<ParamField type="text">
  Sets the color and transparency of a highlighted item in the text overlay. To display a highlight, the value of param `text.source` must be set to `highlightLines.items`. Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="enum">
  Sets the font weight of a highlighted item in the text overlay. To display a highlight, the value of param `text.source` must be set to `highlightLines.items`.
</ParamField>

<ParamField type="string">
  Sets the overlay image. Icon asset must be included in `session_assets` object. `showImageOverlay` must be `true`.
</ParamField>

<ParamField type="text">
  Sets an emoji to be rendered instead of an image asset. If this string is non-empty, it will override the value of `image.assetName`. The string value must be an emoji.
</ParamField>

<ParamField type="string">
  Sets position of overlay image. Valid options: `'top-left'`, `'top-right'`, `'bottom-left'`, `'bottom-right'`
</ParamField>

<ParamField type="boolean">
  Sets overlay image to full screen.
</ParamField>

<ParamField type="number">
  Sets aspect ratio of overlay image.
</ParamField>

<ParamField type="number">
  Sets height of overlay image, in grid units.
</ParamField>

<ParamField type="number">
  Sets margin between the overlay image and the viewport edge, in grid units.
</ParamField>

<ParamField type="number">
  Sets opacity of overlay image, in range 0-1. Default value of 1 is full opacity.
</ParamField>

<ParamField type="boolean">
  Sets the overlay image to fade in or out when the `showImageOverlay` property is updated.
</ParamField>

<ParamField type="string">
  Sets the web page URL to be loaded into the WebFrame overlay's embedded browser.
</ParamField>

<ParamField type="number">
  Sets the width of the embedded browser window used to render the WebFrame overlay.
</ParamField>

<ParamField type="number">
  Sets the height of the embedded browser window used to render the WebFrame overlay.
</ParamField>

<ParamField type="string">
  Sets position of the WebFrame overlay. Valid options: `'top-left'`, `'top-right'`, `'bottom-left'`, `'bottom-right'`
</ParamField>

<ParamField type="boolean">
  Sets the WebFrame overlay to full screen.
</ParamField>

<ParamField type="number">
  Sets height of the WebFrame overlay, in grid units.
</ParamField>

<ParamField type="number">
  Sets margin between the WebFrame overlay and the viewport edge, in grid units.
</ParamField>

<ParamField type="number">
  Sets opacity of the WebFrame overlay, in range 0-1. Default value of `1` is full opacity.
</ParamField>

<ParamField type="boolean">
  Sets the WebFrame overlay to fade in or out when the `showWebFrameOverlay` property is updated.
</ParamField>

<ParamField type="string">
  Sets the keyboard key to be sent to the WebFrame browser in a simulated key press. Valid options:

  * Digits **0 - 9**
  * Letters **A - Z**
  * ASCII special characters, e.g. **!**, **@**, **+**, **>**, etc.
  * Function keys **F1 - F12**
  * **Enter**
  * **Escape**
  * **Backspace**
  * **Tab**
  * Arrow keys **ArrowUp, ArrowDown, ArrowLeft, ArrowRight**
  * **PageDown, PageUp**
</ParamField>

<ParamField type="string">
  Sets keyboard modifier keys to be sent to the WebFrame browser in a simulated key press. Valid options: `"Shift"`, `"Control"`, `"Alt"`, `"Meta"` (on a Mac keyboard, Alt is equal to Option and Meta is equal to Command).
</ParamField>

<ParamField type="number">
  Triggers a simulated key press to be sent to WebFrame. To send a key press, increment the value of `key`. (Note the difference between this and `keyName` which is the simulated key to be sent.)
</ParamField>

<ParamField type="text">
  Sets the title text displayed in the banner component.
</ParamField>

<ParamField type="text">
  Sets the subtitle text displayed in the banner component.
</ParamField>

<ParamField type="string">
  Sets the data source for the text displayed in the banner component. Valid options: `param`, `highlightLines.items`, `chatMessages`, `transcript`
</ParamField>

<ParamField type="string">
  Sets position of the banner component. Valid options: `'top-left'`, `'top-right'`, `'bottom-left'`, `'bottom-right'`
</ParamField>

<ParamField type="boolean">
  Sets the banner to fade in or out when the `showBannerOverlay` property is updated.
</ParamField>

<ParamField type="number">
  Horizontal margin, specified in grid units.
</ParamField>

<ParamField type="number">
  Vertical margin, specified in grid units.
</ParamField>

<ParamField type="number">
  Padding inside the component, specified in grid units.
</ParamField>

<ParamField type="boolean">
  Sets whether the banner component will always use its maximum width (specified using `banner.maxW_pct_default` and `banner.maxW_pct_portrait`). If false, the banner component will shrink horizontally to fit text inside it, if appropriate.
</ParamField>

<ParamField type="number">
  Sets the maximum width for the banner component, as a percentage of the viewport size.
</ParamField>

<ParamField type="number">
  Sets the maximum width for the banner component, as a percentage of the viewport size, applied only when the viewport aspect ratio is portrait (i.e. smaller than 1). This override is useful because on a narrow screen the banner display typically needs more horizontal space than on a landscape screen.
</ParamField>

<ParamField type="number">
  Applies a rotation to the banner component. Units are degrees, and positive is a clockwise rotation.
</ParamField>

<ParamField type="number">
  Sets the corner radius of the banner component outline. Specified in grid units.
</ParamField>

<ParamField type="boolean">
  Sets whether an icon is displayed in the banner component (`true` or `false`).
</ParamField>

<ParamField type="text">
  Sets image asset value for the banner icon. Icon asset must be included in `session_assets` object.
</ParamField>

<ParamField type="text">
  Sets an emoji to be rendered as the banner icon. If this string is non-empty, it will override `banner.icon.assetName`. The string value must be an emoji.
</ParamField>

<ParamField type="number">
  Sets the size of the banner icon, specified in grid units.
</ParamField>

<ParamField type="text">
  Sets the banner component's background color. Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="text">
  Sets the color of the outline drawn around the banner component. Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="number">
  Sets the width of the stroke drawn around the banner component. Specified in grid units.
</ParamField>

<ParamField type="text">
  Sets the banner component's text color. Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="text">
  Sets the color of the stroke drawn around the characters in the banner component. Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="number">
  Sets the width of the stroke drawn around the characters in the banner component. Specified in grid units.
</ParamField>

<ParamField type="string">
  Sets the font of text displayed in the banner component. Valid options: `DMSans`, `Roboto`, `RobotoCondensed`, `Anton`, `Bangers`, `Bitter`, `Exo`, `Magra`, `PermanentMarker`, `SuezOne`, `Teko`
</ParamField>

<ParamField type="number">
  Sets the banner title font size using grid units (gu). By default, one grid unit is 1/36 of the smaller dimension of the viewport (e.g. 20px in a 1280\*720 stream).
</ParamField>

<ParamField type="string">
  Sets the banner title font weight. Valid options: `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`.

  Note: Not all font weights are valid for every font family.
</ParamField>

<ParamField type="string">
  Sets the font style for the banner title. Valid options: 'normal','italic'.
</ParamField>

<ParamField type="number">
  Sets the banner subtitle font size using grid units (gu). By default, one grid unit is 1/36 of the smaller dimension of the viewport (e.g. 20px in a 1280\*720 stream).
</ParamField>

<ParamField type="string">
  Sets the banner subtitle font weight. Valid options: `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`.

  Note: Not all font weights are valid for every font family.
</ParamField>

<ParamField type="string">
  Sets the font style for the banner subtitle. Valid options: 'normal','italic'.
</ParamField>

<ParamField type="number">
  Triggers display of toast component. To send a toast, increment the value of `key`
</ParamField>

<ParamField type="string">
  Sets text displayed in toast component.
</ParamField>

<ParamField type="string">
  Sets the data source used for the text displayed in the toast component. The default value `param` means that the value of param `toast.content` is used. Valid options: `param`, `chatMessages`, `transcript`
</ParamField>

<ParamField type="number">
  Sets duration of time toast component is displayed (in seconds).
</ParamField>

<ParamField type="number">
  Sets the maximum width for the toast component, as a percentage of the viewport size.
</ParamField>

<ParamField type="number">
  Sets the maximum width for the toast component, as a percentage of the viewport size, applied only when the viewport aspect ratio is portrait (i.e. smaller than 1). This override is useful because on a narrow screen the toast display typically needs more horizontal space than on a landscape screen.
</ParamField>

<ParamField type="boolean">
  Sets whether icon is displayed in toast component (`true` or `false`).
</ParamField>

<ParamField type="string">
  Sets asset value for toast icon. Icon asset must be included in `session_assets` object.
</ParamField>

<ParamField type="text">
  Sets an emoji to be rendered as the toast icon. If this string is non-empty, it will override `toast.icon.assetName`. The string value must be an emoji.
</ParamField>

<ParamField type="number">
  Sets the size of the toast icon, in grid units.
</ParamField>

<ParamField type="string">
  Sets the toast component's background color. Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="string">
  Sets the color of the stroke drawn around the text characters in the toast component. Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="string">
  Sets the toast component's text color. Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="string">
  Sets the toast component's font family. Valid options: `DMSans`, `Roboto`, `RobotoCondensed`, `Bitter`, `Exo`, `Magra`, `SuezOne`, `Teko`
</ParamField>

<ParamField type="number">
  Sets the font weight for the toast component's text. Valid options: `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`.

  Note: Not all font weights are valid for every font family.
</ParamField>

<ParamField type="number">
  Sets the font size for the toast component's text.
</ParamField>

<ParamField type="number">
  Sets the number of seconds that the opening slate will be displayed when the stream starts. After this time, the slate goes away with a fade-out effect.
</ParamField>

<ParamField type="string">
  Sets text displayed in the main title of the opening slate.
</ParamField>

<ParamField type="string">
  Sets text displayed in the subtitle (second line) of the opening slate.
</ParamField>

<ParamField type="string">
  Sets an image to be used as the background for the slate. This image asset must be included in `session_assets` object when starting the stream/recording.
</ParamField>

<ParamField type="string">
  Sets the slate's background color. Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="string">
  Sets the text color of the titles in the slate. Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="string">
  Sets the font of the titles in the slate. Valid options: `DMSans`, `Roboto`, `RobotoCondensed`, `Anton`, `Bangers`, `Bitter`, `Exo`, `Magra`, `PermanentMarker`, `SuezOne`, `Teko`
</ParamField>

<ParamField type="string">
  Selects a weight variant from the selected font family. Valid options: `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`.

  Note: Not all font weights are valid for every font family.
</ParamField>

<ParamField type="string">
  Sets the font style for the titles in the slate. Valid options: 'normal','italic'.
</ParamField>

<ParamField type="number">
  Sets the main title font size using grid units (gu). By default, one grid unit is 1/36 of the smaller dimension of the viewport (e.g. 20px in a 1280\*720 stream).
</ParamField>

<ParamField type="number">
  Sets the subtitle font size as a percentage of the main title.
</ParamField>

<ParamField type="string">
  Selects a weight variant from the selected font family specifically for the subtitle. Valid options: `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`.

  Note: Not all font weights are valid for every font family.
</ParamField>

<ParamField type="boolean">
  Sets the slate to fade in or out when the `showTitleSlate` property is updated.'
</ParamField>

<ParamField type="string">
  Sets text displayed in the main title of the slate.
</ParamField>

<ParamField type="string">
  Sets text displayed in the subtitle (second line) of the slate.
</ParamField>

<ParamField type="string">
  Sets an image to be used as the background for the slate. This image asset must be included in `session_assets` object when starting the stream/recording.
</ParamField>

<ParamField type="string">
  Sets the slate's background color. Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="string">
  Sets the text color of the titles in the slate. Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="string">
  Sets the font of the titles in the slate. Valid options: `DMSans`, `Roboto`, `RobotoCondensed`, `Anton`, `Bangers`, `Bitter`, `Exo`, `Magra`, `PermanentMarker`, `SuezOne`, `Teko`
</ParamField>

<ParamField type="string">
  Selects a weight variant from the selected font family. Valid options: `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`.

  Note: Not all font weights are valid for every font family.
</ParamField>

<ParamField type="string">
  Sets the font style for the titles in the slate. Valid options: 'normal','italic'.
</ParamField>

<ParamField type="number">
  Sets the main title font size using grid units (gu). By default, one grid unit is 1/36 of the smaller dimension of the viewport (e.g. 20px in a 1280\*720 stream).
</ParamField>

<ParamField type="number">
  Sets the subtitle font size as a percentage of the main title.
</ParamField>

<ParamField type="string">
  Selects a weight variant from the selected font family specifically for the subtitle. Valid options: `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`.

  Note: Not all font weights are valid for every font family.
</ParamField>

<ParamField type="boolean">
  Sets whether the sidebar is displayed on top of video elements. If set to `true` , the video layout is shrunk horizontally to make room for the sidebar so they don't overlap.
</ParamField>

<ParamField type="string">
  Sets the data source for the text displayed in the sidebar. Valid options: `param`, `highlightLines.items`, `chatMessages`, `transcript`
</ParamField>

<ParamField type="number">
  Padding inside the sidebar, specified in grid units.
</ParamField>

<ParamField type="number">
  Sets the width of the sidebar, as a percentage of the viewport size, applied when the viewport is landscape (its aspect ratio is greater than 1).
</ParamField>

<ParamField type="number">
  Sets the width of the sidebar, as a percentage of the viewport size, applied when the viewport is portrait or square (its aspect ratio is less than or equal to 1).
</ParamField>

<ParamField type="text">
  Sets the sidebar's background color and opacity. Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="text">
  Sets the sidebar's text color and opacity. Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="string">
  Sets the font of text displayed in the sidebar. Valid options: `DMSans`, `Roboto`, `RobotoCondensed`, `Anton`, `Bangers`, `Bitter`, `Exo`, `Magra`, `PermanentMarker`, `SuezOne`, `Teko`
</ParamField>

<ParamField type="string">
  Sets the sidebar text font weight. Valid options: `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`.

  Note: Not all font weights are valid for every font family.
</ParamField>

<ParamField type="string">
  Sets the font style for text in the sidebar. Valid options: 'normal','italic'.
</ParamField>

<ParamField type="number">
  Sets the sidebar text font size using grid units (gu). By default, one grid unit is 1/36 of the smaller dimension of the viewport (e.g. 20px in a 1280\*720 stream).
</ParamField>

<ParamField type="text">
  Sets the color used for the highlighted item in the sidebar.
</ParamField>

<ParamField type="string">
  Sets the font weight used for the highlighted item in the sidebar.
</ParamField>

<ParamField type="text">
  Sets a list of text items. Items must be separated by newline characters. This param is a data source that can be displayed in other components like TextOverlay, Banner and Sidebar using the various "source" params available in the settings for those components.
</ParamField>

<ParamField type="number">
  Sets the highlight index associated with the text items specified in `highlightLines.items`. The item at this index will be displayed using a special highlight style (which depends on the component used to display this data). If you don't want a highlight, set this value to -1.
</ParamField>

<ParamField type="string">
  Sets the data source used for emoji reactions. The default value `emojiReactions` means that this component will display emojis that are sent via the standard source API.

  The other valid option is `param`, which lets you send a reaction using param values instead of the standard source. The steps are as follows: set `emojiReactions.source` to `param`, set a single-emoji string for `emojiReactions.emoji`, and increment the value of `emojiReactions.key` to send one emoji for display.
</ParamField>

<ParamField type="number">
  If `emojiReactions.source` is set to `param`, increment this numeric key to send a new emoji for display.
</ParamField>

<ParamField type="text">
  If `emojiReactions.source` is set to `param`, set a single emoji as the string value for this param, and it will be the next emoji reaction rendered when `emojiReactions.key` is incremented.
</ParamField>

<ParamField type="number">
  Sets a horizontal offset applied to the emoji reactions animation rendering (each new emoji floats up from the bottom of the screen). Specified in grid units.
</ParamField>

<ParamField type="boolean">
  When set to true, a room state debugging display is visible. It prints various information about participant state.
</ParamField>

<ParamField type="number">
  Sets the opacity of the debugging display which can be toggled using `debug.showRoomState`.
</ParamField>

## Selecting participants

The baseline composition has several modes that display multiple participant videos. You may be wondering how to control which participants appear in specific places within those layouts.

Internally, VCS uses an ordered array of video inputs that it calls ["video input slots"](/docs/vcs/components/video). By default, that array will contain all participants in the order in which they joined the call. But there are two ways you can override this default behavior and choose which participants appear in your layout:

1. Participant selection on the **room level** using the `participants` property.
2. Input reordering on the **composition level** (a.k.a. switching) using the [`preferredParticipantIds`](#param-video-settings-preferred-participant-ids) and [`preferScreenshare`](#param-video-settings-prefer-screenshare) params available in the baseline composition.

These two are not mutually exclusive. What's the difference, and when should you use one or the other?

**Room-level participant selection** is a powerful generic tool. It lets you choose any participants within the room, and will trigger any necessary backend connections so that a participant's audio and video streams become available to the VCS rendering server. This means there may be a slight delay as connections are made.

In contrast, **composition-level input reordering** (a.k.a. switching) happens at the very last moment in the VCS engine just before a video frame is rendered. (The name "switching" refers to a video switcher, a hardware device used in traditional video production for this kind of input control.) It's applied together with any other composition param updates you're sending, so there is a guarantee of synchronization. You should use this method when you want to ensure that the reordering of inputs happens precisely at the same time as your update to some other composition param value(s). For example, if you're switching a layout mode and want the inputs to be sorted in a different way simultaneously.

You can use the two methods together. Room-level selection using the `participants` property lets you establish the participants whose streams will be available to the rendering. You can then do rapid switching within that selection using the [`preferredParticipantIds`](#param-video-settings-preferred-participant-ids) and [`preferScreenshare`](#param-video-settings-prefer-screenshare) params in the baseline composition.

Here's an example of selecting three specific participant video tracks, everyone's audio tracks, and sorting the video by most recent active speaker:

```javascript theme={null}
{
	layout: {
		preset: "custom",
		composition_params: {...},
		participants: {
			video: ["participant-guid-1", "participant-guid-2", "participant-guid-3"],
			audio: ["*"],
			sort: "active"
		}
	}
}
```

Here's another example where we're further sorting the same video tracks using the baseline composition params. The params update is switching to a different layout mode (`'split'`). This mode can only show two participants, so we use `videoSettings.preferredParticipantIds` to select the two participants in a clean frame-synchronized way, without having to modify the underlying connections made via the `participants` property:

```javascript theme={null}
{
	layout: {
		preset: "custom",
		composition_params: {
			mode: 'split',
			'videoSettings.preferredParticipantIds': 'participant-guid-2, participant-guid-1',
		},
		participants: {
			video: ["participant-guid-1", "participant-guid-2", "participant-guid-3"],
			audio: ["*"],
			sort: "active"
		}
	}
}
```

<Warning>
  **If you include the `participants` object in a `startLiveStreaming()`/`startRecording()` or `updateLiveStreaming()`/`updateRecording()` call, you need to include it in any subsequent `updateLiveStreaming()`/`updateRecording()` calls as well, even if you aren't changing it.**

  If you set the `participants` property for your recording or live stream and then make an `updateLiveStreaming()`/`updateRecording()` call to update the `composition_params`, you'll need to resend the same values you used before in the `participants` property. This is true even if you are not updating the `participants` property. If you don't, the participant configuration will reset to default, as if you hadn't set it in the first place —meaning VCS will receive all audio and video tracks from all participants, sorted by the order in which the participants joined the call.
</Warning>

### `participants` properties

<ParamField type="array">
  Required. An array of strings indicating which participant videos to make available to VCS. Possible values are:

  * `["participant-guid-1", "participant-guid-2", "participant-guid-3"]`: A list of specific participant IDs

  * `["*"]`: everyone

  * `["owners"]`: All call owners
</ParamField>

<ParamField type="array">
  An optional array of strings indicating which participant audio tracks to make available to VCS. Possible values are the same as the `video` property.
</ParamField>

<ParamField type="string">
  The only currently valid value for this property is `"active"`. This property controls the order in which VCS sees the participant video tracks. When set to `"active"`, each time the call's active speaker changes to a different participant, that participant will bubble up to the first position in the array. In other words, setting sort to `"active"` will cause an n-tile layout to always show the n most recent speakers in the call. If you leave the property unset, the list of participants will stay in a fixed order: either the order you specified in the `video` property, or in the order they joined the call if you use `"*"` or `"owners"`.
</ParamField>

## Session assets

Session assets — images or custom VCS components — that can be passed as assets and used during a live stream or cloud recording. To learn more, visit our [Session assets page](/docs/vcs/session-assets) in the VCS SDK reference docs.

**Note**: Session assets must be made available at the beginning of the recording or live stream even if they are not used until later in the call.

```javascript theme={null}
await call.startLiveStreaming({
  instanceId: '00000000-0000-4000-8000-000000000000', // optional: default value
  rtmpUrl: 'RTMP_URL',
  width: 1280,
  height: 720,
  layout: {
    preset: 'custom', // required
    composition_id: 'daily:baseline', // optional: default value
    composition_params: {
      // ... Add your composition params here
    },
    session_assets: {
      // the key is images/ followed by your file name, including the extension
      // the value must be an absolute URL to a hosted asset
      // image.assetName must match this key without the images/ prefix, e.g. logo.png
      'images/logo.png': 'https://example.com/logo.png',
    },
  },
});
```

## Default values

### Composition parameter defaults

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyStreamingOptions](/reference/daily-js/types/daily-streaming-options)
  </Card>

  <Card title="Methods" icon="code">
    * [startRecording()](/reference/daily-js/instance-methods/start-recording)
    * [updateRecording()](/reference/daily-js/instance-methods/update-recording)
    * [startLiveStreaming()](/reference/daily-js/instance-methods/start-live-streaming)
    * [updateLiveStreaming()](/reference/daily-js/instance-methods/update-live-streaming)
  </Card>

  <Card title="Events" icon="bolt">
    * [Recording events](/reference/daily-js/events/recording-events)
    * [Live streaming events](/reference/daily-js/events/live-streaming-events)
  </Card>
</CardGroup>


# DailyStreamingOptions
Source: https://docs.daily.co/reference/daily-js/types/daily-streaming-options

Output quality, lifetime, and layout options shared by cloud recording and live streaming.

`DailyStreamingOptions` defines the base configuration accepted by [`startRecording()`](/reference/daily-js/instance-methods/start-recording), [`updateRecording()`](/reference/daily-js/instance-methods/update-recording), [`startLiveStreaming()`](/reference/daily-js/instance-methods/start-live-streaming), and [`updateLiveStreaming()`](/reference/daily-js/instance-methods/update-live-streaming).

`DailyLiveStreamingOptions` extends `DailyStreamingOptions` with RTMP/HLS endpoint fields.

***

## DailyStreamingOptions

### Output quality

<ResponseField name="width" type="number">
  Output width in pixels. Must be even (a multiple of 2). Default: `1920`.
</ResponseField>

<ResponseField name="height" type="number">
  Output height in pixels. Must be even (a multiple of 2). Default: `1080`.
</ResponseField>

<ResponseField name="fps" type="number">
  Video frame rate. Default: `30`.
</ResponseField>

<ResponseField name="videoBitrate" type="number">
  Video bitrate in kbps (10–10000). Resolution-based defaults: 1080p → 5000, 720p → 3000, 480p → 2000, 360p → 1000.
</ResponseField>

<ResponseField name="audioBitrate" type="number">
  Audio bitrate in kbps (10–320).
</ResponseField>

<ResponseField name="backgroundColor" type="string">
  Background color behind video tiles, as `#rrggbb` or `#aarrggbb`.
</ResponseField>

### Session lifetime

<ResponseField name="instanceId" type="string">
  A UUID identifying this recording or streaming session. Multiple sessions can run concurrently (up to [`max_streaming_instances_per_room`](/reference/rest-api/domain/get-domain-config#response-config-max-streaming-instances-per-room) on your domain) if each has a unique `instanceId`.

  Recording and streaming sessions that share the same `instanceId` share the same underlying composition process — layout changes to one affect the other. HLS cannot share an `instanceId` with a recording or RTMP stream.
</ResponseField>

<ResponseField name="minIdleTimeOut" type="number">
  Seconds to wait before automatically ending the session when the room is idle (all users have muted video and audio). Default: `300`.
</ResponseField>

<ResponseField name="maxDuration" type="number">
  Maximum session duration in seconds after which recording/streaming is forcefully stopped. Default: `10800` (3 hours) for recordings, `86400` (24 hours) for live streams.
</ResponseField>

### Output artifacts

<ResponseField name="dataOutputs" type="string[]">
  Additional output artifacts to generate alongside the stream or recording. Supported values: `"event-json"`, `"transcript-webvtt"`, `"chat-webvtt"`.
</ResponseField>

<ResponseField name="type" type="'cloud' | 'cloud-audio-only' | 'raw-tracks' | 'local'">
  Specifies the recording type to start. **Recording only — not applicable to live streaming.** The type provided must also be enabled for the room or domain with the enable\_recording property; see [Update room](/reference/rest-api/rooms/update-room#body-properties-enable-recording-one-of-0).

  * `'cloud'` (default) — cloud recording with video composition
  * `'cloud-audio-only'` — cloud recording, audio only
  * `'raw-tracks'` — individual raw audio/video tracks, uncomposed
  * `'local'` — local browser recording
</ResponseField>

### Layout

<ResponseField name="layout" type="DailyStreamingLayoutConfig">
  Controls how participant video is composed. See [`DailyStreamingLayoutConfig`](/reference/daily-js/types/daily-streaming-layout-config) for all presets and options.

  For live streaming, the `audio-only` preset is not available — use `DailyLiveStreamingLayoutConfig` (which excludes it).
</ResponseField>

## DailyLiveStreamingOptions

Extends `DailyStreamingOptions` with endpoint configuration. Provide either `rtmpUrl` or `endpoints` — not both. HLS can only be started with `endpoints`.

<ResponseField name="rtmpUrl" type="string | string[]">
  One or more RTMP destination URLs. When multiple URLs are provided, each receives the same layout. Avoid using this field if your URL contains sensitive values (stream keys, etc.) — use `endpoints` instead.
</ResponseField>

<ResponseField name="endpoints" type="DailyStreamingEndpoint[]">
  Array of endpoint objects, each with an `endpoint` string field containing the RTMP or HLS destination URL. Preferred over `rtmpUrl` as it keeps sensitive values out of method call arguments.
</ResponseField>

***

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyStreamingLayoutConfig](/reference/daily-js/types/daily-streaming-layout-config)
  </Card>

  <Card title="Methods" icon="code">
    * [startRecording()](/reference/daily-js/instance-methods/start-recording)
    * [updateRecording()](/reference/daily-js/instance-methods/update-recording)
    * [startLiveStreaming()](/reference/daily-js/instance-methods/start-live-streaming)
    * [updateLiveStreaming()](/reference/daily-js/instance-methods/update-live-streaming)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Live streaming](/docs/daily-js/features/live-streaming)
  </Card>
</CardGroup>


# DailyTrackState
Source: https://docs.daily.co/reference/daily-js/types/daily-track-state

The state of a single media track for a participant, including subscription status, playback state, and the underlying MediaStreamTrack.

`DailyTrackState` describes the current condition of one media track — camera, microphone, screen share, or custom — from the local participant's point of view. It appears as a value in `DailyParticipant.tracks`.

```typescript theme={null}
interface DailyTrackState {
  subscribed: boolean | 'staged';
  state: 'blocked' | 'off' | 'sendable' | 'loading' | 'interrupted' | 'playable';
  off?: {
    byUser?: boolean;
    byRemoteRequest?: boolean;
    byBandwidth?: boolean;
    byCanSendPermission?: boolean;
    byCanReceivePermission?: boolean;
    byServerLimit?: boolean;
  };
  blocked?: {
    byDeviceMissing?: boolean;
    byDeviceInUse?: boolean;
    byPermissions?: boolean;
  };
  track?: MediaStreamTrack;
  persistentTrack?: MediaStreamTrack;
}
```

## Properties

<ResponseField name="subscribed" type="true | false | 'staged'">
  Whether the local participant is subscribed to this track. Only meaningful for remote participants — local tracks are always implicitly subscribed.

  * `true` — subscribed and receiving
  * `false` — not subscribed
  * `'staged'` — SDP negotiated but no bytes are flowing; track can transition to `playable` faster when set to `true`

  Set via [`updateParticipant()`](/reference/daily-js/instance-methods/update-participant) with `setSubscribedTracks`.
</ResponseField>

<ResponseField name="state" type="string">
  The complete, mutually exclusive state of the track from the local participant's point of view.

  | Value           | Meaning                                                                                                           |
  | --------------- | ----------------------------------------------------------------------------------------------------------------- |
  | `'blocked'`     | Track cannot be sent. Check `blocked` for the cause.                                                              |
  | `'off'`         | Track is intentionally not being sent. Check `off` for the cause.                                                 |
  | `'sendable'`    | Track is available to send but the local participant hasn't subscribed to it yet.                                 |
  | `'loading'`     | Track is subscribed and the stream is being established.                                                          |
  | `'playable'`    | Track is live and ready to render.                                                                                |
  | `'interrupted'` | Track was `playable` but has transiently stalled (network fluctuation, iOS background). May return to `playable`. |
</ResponseField>

<ResponseField name="off" type="object">
  Present when `state` is `'off'`. Indicates why the track is off. All sub-fields are optional booleans.

  <Expandable title="off properties">
    <ResponseField name="byUser" type="boolean">
      The sender muted their own track.
    </ResponseField>

    <ResponseField name="byRemoteRequest" type="boolean">
      An admin muted this participant's track remotely.
    </ResponseField>

    <ResponseField name="byBandwidth" type="boolean">
      Daily paused the track due to bandwidth constraints.
    </ResponseField>

    <ResponseField name="byCanSendPermission" type="boolean">
      The participant does not have permission to send this track type.
    </ResponseField>

    <ResponseField name="byCanReceivePermission" type="boolean">
      Remote participants only. The local participant does not have permission to receive this track.
    </ResponseField>

    <ResponseField name="byServerLimit" type="boolean">
      A server-side participant limit has been reached.
    </ResponseField>
  </Expandable>
</ResponseField>

<ResponseField name="blocked" type="object">
  Present when `state` is `'blocked'`. Indicates why the track cannot be sent. All sub-fields are optional booleans.

  <Expandable title="blocked properties">
    <ResponseField name="byDeviceMissing" type="boolean">
      No device of this type is available.
    </ResponseField>

    <ResponseField name="byDeviceInUse" type="boolean">
      The device is in use by another application.
    </ResponseField>

    <ResponseField name="byPermissions" type="boolean">
      The user has denied browser permissions for this device.
    </ResponseField>
  </Expandable>
</ResponseField>

<ResponseField name="track" type="MediaStreamTrack | undefined">
  The underlying [`MediaStreamTrack`](https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack). Only present when `state === 'playable'`. Only available in [call object mode](/docs/daily-js/concepts/call-modes#call-object-mode).

  Prefer `persistentTrack` for attaching to media elements.
</ResponseField>

<ResponseField name="persistentTrack" type="MediaStreamTrack | undefined">
  The underlying [`MediaStreamTrack`](https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack). Present whenever a track exists, regardless of `state`. Only available in [call object mode](/docs/daily-js/concepts/call-modes#call-object-mode).

  **Recommended over `track`** as a proactive defense against black frames during call disruptions and browser limitations. Use `track` only when you need a guarantee that media is currently flowing.
</ResponseField>

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyParticipant](/reference/daily-js/types/daily-participant)
  </Card>

  <Card title="Methods" icon="code">
    * [participants()](/reference/daily-js/instance-methods/participants)
    * [setLocalVideo()](/reference/daily-js/instance-methods/set-local-video)
    * [setLocalAudio()](/reference/daily-js/instance-methods/set-local-audio)
    * [updateParticipant()](/reference/daily-js/instance-methods/update-participant)
  </Card>

  <Card title="Events" icon="bolt">
    * [participant-updated](/reference/daily-js/events/participant-events#participant-updated)
    * [track-started](/reference/daily-js/events/media-events#track-started)
    * [track-stopped](/reference/daily-js/events/media-events#track-stopped)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Tracks and Media](/docs/daily-js/concepts/tracks)
  </Card>
</CardGroup>


# Types
Source: https://docs.daily.co/reference/daily-js/types/index

TypeScript type definitions for the core objects used throughout the daily-js API.

This section documents the TypeScript types that appear throughout the daily-js API. Reference these pages when you need the precise shape of an object returned by a method, accepted as a parameter, or surfaced on an event.

| Type                                                                                     | Description                                                                           |
| ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
| [`DailyCallOptions`](/reference/daily-js/types/daily-call-options)                       | Configuration options accepted by factory methods and `join()`                        |
| [`DailyParticipant`](/reference/daily-js/types/daily-participant)                        | The participant object returned by `participants()` and emitted on participant events |
| [`DailyTrackState`](/reference/daily-js/types/daily-track-state)                         | The state of a single media track for a participant                                   |
| [`DailyParticipantPermissions`](/reference/daily-js/types/daily-participant-permissions) | The send, receive, and admin permissions for a participant                            |
| [`DailyStreamingOptions`](/reference/daily-js/types/daily-streaming-options)             | Configuration options for live streaming and recording                                |
| [`DailyStreamingLayoutConfig`](/reference/daily-js/types/daily-streaming-layout-config)  | Layout configuration for live streaming and recording                                 |


# Daily Audio
Source: https://docs.daily.co/reference/daily-react/daily-audio

The DailyAudio component manages audio for a Daily call in your React app.

`<DailyAudio />`

With default settings it will play any remote `audio` and `screenAudio` tracks,
while maintaining up to 5 speaker slots.
In case one of the `<audio>` tags fails to play, `DailyAudio` will call `onPlayFailed`
with detailed information and a reference to the `<audio>` tag for which the `play()` failed.

`DailyAudio` is meant to be a plug-and-play solution to audio for React apps integrating Daily.
If you need a custom audio composition head over to [`DailyAudioTrack`](/reference/daily-react/daily-audio-track).

## Props (optional)

<ParamField type="boolean">
  When enabled and the call is configured to use manual [track subscriptions](/docs/guides/architecture-and-monitoring/intro-to-video-arch#track-subscriptions), `DailyAudio` automatically subscribes to any active speaker's audio track.
</ParamField>

<ParamField type="number">
  Defines the amount of participants that can be heard simultaneously.
</ParamField>

<ParamField type="Function">
  Callback when an `<audio>` tag fails to `play()`.
</ParamField>

<ParamField type="boolean">
  When set to `true` the local participant's `screenAudio` will be played.
</ParamField>

<ParamField type="Object">
  Grants access to a set of methods to query for `<audio>` elements rendered from `DailyAudio`.

  <Expandable title="ref methods">
    <ResponseField name="getAllAudio()" type="HTMLAudioElement[]">
      Returns all rendered `<audio>` elements.
    </ResponseField>

    <ResponseField name="getActiveSpeakerAudio()" type="HTMLAudioElement | null">
      Returns the `<audio>` element containing the audio track for the active speaker, or `null` in case there is no active speaker.
    </ResponseField>

    <ResponseField name="getScreenAudio()" type="HTMLAudioElement[]">
      Returns all `<audio>` elements with a `screenAudio` track assigned.
    </ResponseField>

    <ResponseField name="getAudioBySessionId(sessionId: string)" type="HTMLAudioElement | null">
      Returns the `<audio>` element for the given `sessionId` and an `audio` track assigned.
    </ResponseField>

    <ResponseField name="getScreenAudioBySessionId(sessionId: string)" type="HTMLAudioElement | null">
      Returns the `<audio>` element for the given `sessionId` and an `screenAudio` track assigned.
    </ResponseField>
  </Expandable>

  When passing a `ref` to `DailyAudio`, the passed ref receives access to methods to query for subsets of rendered `<audio>` elements via [`useImperativeHandle`](https://beta.reactjs.org/reference/react/useImperativeHandle).
  Use these methods to query for `<audio>` elements rendered from `DailyAudio` in order to get DOM-level access.
  As an example, having direct access to the `HTMLAudioElement`s rendered will allow you to adjust output volume levels.
</ParamField>

## Example

```jsx theme={null}
import { DailyAudio } from '@daily-co/daily-react';

function CallComponent() {
  const handlePlayFailed = useCallback((e) => {
    console.error(
      `Failed to play ${e.type} for ${e.sessionId}. Audio tag: ${e.target}.`
    );
  }, []);
  return <DailyAudio maxSpeakers={6} onPlayFailed={handlePlayFailed} />;
}
```

## See also

<CardGroup>
  <Card title="Components" icon="layout">
    * [DailyAudioTrack](/reference/daily-react/daily-audio-track)
    * [DailyVideo](/reference/daily-react/daily-video)
  </Card>

  <Card title="Hooks" icon="code">
    * [useAudioLevelObserver()](/reference/daily-react/use-audio-level-observer)
    * [useMediaTrack()](/reference/daily-react/use-media-track)
  </Card>
</CardGroup>


# Daily Audio Track
Source: https://docs.daily.co/reference/daily-react/daily-audio-track

The DailyAudioTrack sets up an audio tag for a specific audio track, identified by a sessionId and type.

`<DailyAudioTrack sessionId={sessionId} />`

Use this component to compose a custom audio arrangement in a Daily call.

## Props

<ParamField type="string">
  The participant's `session_id` for which the audio track should be played.
</ParamField>

<ParamField type="Function">
  Callback when an `<audio>` tag fails to `play()`.
</ParamField>

<ParamField type="'audio' | 'screenAudio' | 'rmpAudio' | string">
  The participant's track type to play. In addition to the built-in track types, you can pass the `trackName` of a [custom audio track](/reference/daily-js/instance-methods/start-custom-track) started via `startCustomTrack()`.
</ParamField>

## Data attributes

`DailyAudioTrack` renders a couple of dynamic `data` attributes:

| Attribute         | Description                            |
| :---------------- | :------------------------------------- |
| `data-session-id` | Contains the corresponding `sessionId` |
| `data-audio-type` | Contains the corresponding `type`      |

## Example

```jsx theme={null}
import { DailyAudioTrack } from '@daily-co/daily-react';

function ParticipantAudio({ sessionId }) {
  const handlePlayFailed = useCallback((e) => {
    console.error(
      `Failed to play ${e.type} for ${e.sessionId}. Audio tag: ${e.target}.`
    );
  }, []);
  return (
    <DailyAudioTrack
      sessionId={sessionId}
      onPlayFailed={handlePlayFailed}
      type="audio"
    />
  );
}
```

To play a [custom audio track](/reference/daily-js/instance-methods/start-custom-track), pass its `trackName` as the `type`:

```jsx theme={null}
// Started elsewhere with:
// call.startCustomTrack({ track, trackName: 'narration' });

function Narration({ sessionId }) {
  return <DailyAudioTrack sessionId={sessionId} type="narration" />;
}
```

## See also

<CardGroup>
  <Card title="Components" icon="layout">
    * [DailyAudio](/reference/daily-react/daily-audio)
    * [DailyVideo](/reference/daily-react/daily-video)
  </Card>

  <Card title="Hooks" icon="code">
    * [useAudioLevelObserver()](/reference/daily-react/use-audio-level-observer)
    * [useMediaTrack()](/reference/daily-react/use-media-track)
  </Card>
</CardGroup>


# Daily Provider
Source: https://docs.daily.co/reference/daily-react/daily-provider

The DailyProvider gives every component in your application access to the Daily call object.

`<DailyProvider callObject={callObject}>`

Stores call state and manages a [call object](/docs/daily-js/concepts/call-modes#call-object-mode) instance, giving every component in your tree access to it. Two modes are supported: pass an existing call object, or provide props for `DailyProvider` to create one.

We recommend utilizing [`useCallObject`](/reference/daily-react/use-call-object) to create your own call object instance.

## Props

### Existing call object mode

<ParamField type="Object">
  Pre-initialized call object instance (instantiated via [`createCallObject()`](/reference/daily-js/factory-methods/create-call-object)).
</ParamField>

### Call object creation mode

<ParamField type="string">
  The URL of the Daily room to join.
</ParamField>

<ParamField type="string | MediaStreamTrack | boolean">
  Audio source for the call. See [DailyCall properties](/reference/daily-js/types/daily-call-options) for details.
</ParamField>

<ParamField type="string | MediaStreamTrack | boolean">
  Video source for the call. See [DailyCall properties](/reference/daily-js/types/daily-call-options) for details.
</ParamField>

<ParamField type="Object">
  Daily configuration options. See [DailyCall properties](/reference/daily-js/types/daily-call-options) for details.
</ParamField>

<ParamField type="Object">
  Receive settings for the call. See [DailyCall properties](/reference/daily-js/types/daily-call-options) for details.
</ParamField>

<ParamField type="boolean">
  Whether to automatically subscribe to tracks. See [DailyCall properties](/reference/daily-js/types/daily-call-options) for details.
</ParamField>

<ParamField type="string">
  Meeting token. See [DailyCall properties](/reference/daily-js/types/daily-call-options) for details.
</ParamField>

<ParamField type="string">
  Display name for the local participant. See [DailyCall properties](/reference/daily-js/types/daily-call-options) for details.
</ParamField>

<Note>
  Changing any of the props in call object creation mode will destroy the current instance and create a new one with the updated props.
</Note>

### Optional props

<ParamField type="Object">
  `store` to be passed to Daily React's internal Jotai `<Provider>`. If you use Jotai in your app, this will store Daily React's internal state atoms in your Jotai store.
</ParamField>

## Example

```jsx theme={null}
import { DailyProvider, useCallObject } from '@daily-co/daily-react';

function App() {
  // Create an instance of the Daily call object
  const callObject = useCallObject();

  return <DailyProvider callObject={callObject}>{children}</DailyProvider>;
}
```

### Store Daily React's state in your own Jotai Provider

```jsx theme={null}
import { DailyProvider, useCallObject } from '@daily-co/daily-react';
import { createStore, Provider } from 'jotai';

const jotaiStore = createStore();

function App() {
  // Create an instance of the Daily call object
  const callObject = useCallObject();

  return (
    <Provider store={jotaiStore}>
      <DailyProvider callObject={callObject} jotaiStore={jotaiStore}>
        {children}
      </DailyProvider>
    </Provider>
  );
}
```

## See also

<CardGroup>
  <Card title="Hooks" icon="code">
    * [useCallObject()](/reference/daily-react/use-call-object)
    * [useCallFrame()](/reference/daily-react/use-call-frame)
    * [useDaily()](/reference/daily-react/use-daily)
  </Card>
</CardGroup>


# Daily Video
Source: https://docs.daily.co/reference/daily-react/daily-video

The DailyVideo component renders a video tag for a given participant's sessionId and track type.

`<DailyVideo sessionId={sessionId} />`

## Props

<ParamField type="string">
  The participant's `session_id` for which the video track should be played.
</ParamField>

<ParamField type="boolean">
  When enabled, mirrors a local participant's user-facing camera video.
</ParamField>

<ParamField type="'contain' | 'cover'">
  Determines whether the video should be fully contained or cover the element. See [`object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) for details.
</ParamField>

<ParamField type="boolean">
  When set to `true`, video is mirrored.
</ParamField>

<ParamField type="Object">
  Inline styles to be applied when the video is in a playable state. These will overwrite styles passed with the `style` prop. Use this to style the `<video>` differently when it's playing or not (e.g. when the participant's camera is muted or not).
</ParamField>

<ParamField type="Function">
  Callback when the video element is resized. Reports the video's `height`, `width` and `aspectRatio`.
</ParamField>

<ParamField type="Object">
  Inline styles to be applied to the `<video>` element.
</ParamField>

<ParamField type="'video' | 'screenVideo' | 'rmpVideo' | string">
  The participant's track type to play. In addition to the built-in track types, you can pass the `trackName` of a [custom video track](/reference/daily-js/instance-methods/start-custom-track) started via `startCustomTrack()`.
</ParamField>

`DailyVideo` also accepts any other `React.VideoHTMLAttributes`.

## Data attributes

`DailyVideo` renders a couple of dynamic `data` attributes:

| Attribute         | Description                                                                                                                                                   |
| :---------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `data-local`      | `"true"` in case the video comes from the local participant                                                                                                   |
| `data-mirrored`   | `"true"` in case the video is mirrored, due to `automirror` or `mirror`                                                                                       |
| `data-playable`   | `"true"` in case the video is in a playable state                                                                                                             |
| `data-session-id` | Contains the corresponding `sessionId`                                                                                                                        |
| `data-subscribed` | `"true"` or `"staged"` in case the video track is [subscribed or staged](/reference/daily-js/instance-methods/update-participant#param-set-subscribed-tracks) |
| `data-video-type` | Contains the corresponding `type`                                                                                                                             |

## Example

```jsx theme={null}
import { DailyVideo } from '@daily-co/daily-react';

function Tile({ sessionId }) {
  return <DailyVideo automirror sessionId={sessionId} />;
}
```

To play a [custom video track](/reference/daily-js/instance-methods/start-custom-track), pass its `trackName` as the `type`:

```jsx theme={null}
// Started elsewhere with:
// call.startCustomTrack({ track, trackName: 'slides' });

function Slides({ sessionId }) {
  return <DailyVideo sessionId={sessionId} type="slides" />;
}
```

## See also

<CardGroup>
  <Card title="Components" icon="layout">
    * [DailyAudioTrack](/reference/daily-react/daily-audio-track)
    * [DailyAudio](/reference/daily-react/daily-audio)
  </Card>

  <Card title="Hooks" icon="code">
    * [useAudioLevelObserver()](/reference/daily-react/use-audio-level-observer)
    * [useMediaTrack()](/reference/daily-react/use-media-track)
  </Card>
</CardGroup>


# useActiveParticipant
Source: https://docs.daily.co/reference/daily-react/use-active-participant

Returns an object for the participant id mentioned in the most recent active-speaker-change event.

<Badge>Deprecated 0.17.0</Badge>

`useActiveParticipant(params?) : Object | null`

`useActiveParticipant` can also set up an optional callback for the [`active-speaker-change`](/reference/daily-js/events/participant-events#active-speaker-change) event.

## Parameters

<ParamField type="boolean">
  If `true`, `useActiveParticipant` will not return a participant object when the local participant is the active speaker.
</ParamField>

<ParamField type="Function">
  Event callback for the [`active-speaker-change`](/reference/daily-js/events/participant-events#active-speaker-change) event listener.
</ParamField>

## Return value

Returns `DailyParticipant | null`. Contains detailed information about the participant, see [participant properties](/reference/daily-js/types/daily-participant). If no participant has unmuted, `useActiveParticipant` returns `null`.

## Example

```jsx theme={null}
import { useActiveParticipant } from '@daily-co/daily-react';

export const CurrentSpeaker = () => {
  const activeSpeaker = useActiveParticipant();
  return (
    <div>{activeSpeaker?.user_name ?? 'Nobody'} is currently speaking.</div>
  );
};
```

## See also

<CardGroup>
  <Card title="Hooks" icon="code">
    * [useActiveSpeakerId()](/reference/daily-react/use-active-speaker-id)
    * [useParticipantProperty()](/reference/daily-react/use-participant-property)
    * [useParticipant()](/reference/daily-react/use-participant)
    * [useLocalParticipant()](/reference/daily-react/use-local-participant)
    * [useLocalSessionId()](/reference/daily-react/use-local-session-id)
    * [useParticipantCounts()](/reference/daily-react/use-participant-counts)
    * [useParticipantIds()](/reference/daily-react/use-participant-ids)
    * [useWaitingParticipants()](/reference/daily-react/use-waiting-participants)
  </Card>

  <Card title="Events" icon="bolt">
    * [active-speaker-change](/reference/daily-js/events/participant-events#active-speaker-change)
  </Card>
</CardGroup>


# useActiveSpeakerId
Source: https://docs.daily.co/reference/daily-react/use-active-speaker-id

Returns the participant's session_id mentioned in the most recent 'active-speaker-change' event.

`useActiveSpeakerId(params?) : string | null`

Use a `filter` to limit which participants should be considered as active speakers.

## Parameters

<ParamField type="Function">
  Callback function to filter which participants should be considered as active speakers by this hook instance. Return `true` to allow the passed `session_id` to become the next active speaker.
</ParamField>

<ParamField type="boolean">
  If `true`, `useActiveSpeakerId` will ignore when the local participant is the active speaker.
</ParamField>

## Return value

Returns `string | null`. The active speaker's `session_id`. If no participant has unmuted, `useActiveSpeakerId` returns `null`.

## Example

```jsx theme={null}
import { useActiveSpeakerId } from '@daily-co/daily-react';

export const CurrentSpeaker = () => {
  const activeSpeakerId = useActiveSpeakerId();
  return <div>Current speaker id: {activeSpeakerId ?? 'none'}</div>;
};
```

## See also

<CardGroup>
  <Card title="Hooks" icon="code">
    * [useActiveParticipant()](/reference/daily-react/use-active-participant)
    * [useParticipantProperty()](/reference/daily-react/use-participant-property)
    * [useParticipant()](/reference/daily-react/use-participant)
    * [useLocalParticipant()](/reference/daily-react/use-local-participant)
    * [useLocalSessionId()](/reference/daily-react/use-local-session-id)
    * [useParticipantCounts()](/reference/daily-react/use-participant-counts)
    * [useParticipantIds()](/reference/daily-react/use-participant-ids)
    * [useWaitingParticipants()](/reference/daily-react/use-waiting-participants)
  </Card>

  <Card title="Events" icon="bolt">
    * [active-speaker-change](/reference/daily-js/events/participant-events#active-speaker-change)
  </Card>
</CardGroup>


# useAppMessage
Source: https://docs.daily.co/reference/daily-react/use-app-message

Convenience hook for the daily-js sendAppMessage() method.

`useAppMessage({ onAppMessage?: Function}) : Object`

`useAppMessage` can also set up an optional callback for the [`app-message`](/reference/daily-js/events/messaging-events#app-message) event.

## Parameters

<ParamField type="Function">
  Callback for the [`app-message`](/reference/daily-js/events/messaging-events#app-message) event. When an [`app-message`](/reference/daily-js/events/messaging-events#app-message) is sent, the callback will be called with two arguments:

  * `ev` (`Object`): The original [event payload](/reference/daily-js/events/messaging-events#app-message) sent from `daily-js`.
  * `sendAppMessage` (`Function`): The function reference that was created internally inside `useAppMessage`. This avoids having to call the hook twice in order to respond to an `app-message` with an `app-message`.
</ParamField>

## Return value

<ResponseField name="sendAppMessage" type="Function">
  Wraps [sendAppMessage()](/reference/daily-js/instance-methods/send-app-message).
</ResponseField>

## Example

```jsx theme={null}
import { useAppMessage } from '@daily-co/daily-react';
import { useCallback, useState } from 'react';

export const AppMessageDemo = () => {
  const [messages, setMessages] = useState([]);

  const sendAppMessage = useAppMessage({
    onAppMessage: useCallback((ev) => setMessages((m) => [...m, ev]), []),
  });

  useEffect(() => {
    sendAppMessage({ msg: 'Hi, everyone' }, '*');
  }, [sendAppMessage]);

  return (
    <ul>
      {messages.map((ev) => (
        <li>
          {ev.fromId}: {JSON.stringify(ev.data)}
        </li>
      ))}
    </ul>
  );
};
```

## See also

<CardGroup>
  <Card title="daily-js methods" icon="code">
    * [sendAppMessage()](/reference/daily-js/instance-methods/send-app-message)
  </Card>

  <Card title="Events" icon="bolt">
    * [app-message](/reference/daily-js/events/messaging-events#app-message)
  </Card>
</CardGroup>


# useAudioLevel
Source: https://docs.daily.co/reference/daily-react/use-audio-level

useAudioLevel is deprecated.

<Badge>Deprecated 0.20.0</Badge>

`useAudioLevel(params) : void`

<Warning>
  `useAudioLevel` is deprecated. Use [`useAudioLevelObserver`](/reference/daily-react/use-audio-level-observer) instead.
</Warning>

The`useAudioLevel` hook takes a`MediaStreamTrack` (for example, a call participant's audio track). The second parameter, `onVolumeChange`, is a callback function,
which runs when the track's volume level changes. With this callback, you can respond to the track's volume changes in whichever way you want.

## Parameters

<ParamField type="MediaStreamTrack">
  The `MediaStreamTrack` to test.
</ParamField>

<ParamField type="Function">
  A callback reference to run when the track's volume level changes.
</ParamField>

## Example

```jsx theme={null}
import {
  useAudioLevel,
  useAudioTrack,
  useLocalSessionId,
} from '@daily-co/daily-react';
import { useCallback, useRef } from 'react';

export const MicVolumeVisualizer = () => {
  const localSessionId = useLocalSessionId();
  const audioTrack = useAudioTrack(localSessionId);

  const volRef = useRef(null);

  useAudioLevel(
    audioTrack?.persistentTrack,
    useCallback((volume) => {
      // this volume number will be between 0 and 1
      // give it a minimum scale of 0.15 to not completely disappear 👻
      volRef.current.style.transform = `scale(${Math.max(0.15, volume)})`;
    }, [])
  );

  // Your audio track's audio volume visualized in a small circle,
  // whose size changes depending on the volume level
  return (
    <div>
      <div className="vol" ref={volRef} />
      <style jsx>{`
        .vol {
          border: 1px solid black;
          border-radius: 100%;
          height: 32px;
          transition: transform 0.1s ease;
          width: 32px;
        }
      `}</style>
    </div>
  );
};
```

## See also

<CardGroup>
  <Card title="Hooks" icon="code">
    * [useAudioLevelObserver()](/reference/daily-react/use-audio-level-observer) (replacement)
    * [useMediaTrack()](/reference/daily-react/use-media-track)
  </Card>

  <Card title="Components" icon="layout">
    * [DailyAudioTrack](/reference/daily-react/daily-audio-track)
    * [DailyAudio](/reference/daily-react/daily-audio)
  </Card>
</CardGroup>


# useAudioLevelObserver
Source: https://docs.daily.co/reference/daily-react/use-audio-level-observer

The useAudioLevelObserver provides a way to get the local participant's audio levels.

`useAudioLevelObserver(params) : void`

The `onVolumeChange` callback runs when the observed participant's audio level changes, letting you respond to volume changes — for example, to drive a visual indicator.

## Parameters

<ParamField type="string">
  The participant's `sessionId` for which audio level should be observed.
</ParamField>

<ParamField type="Function">
  A callback reference to run when the track's volume level changes.
</ParamField>

<ParamField type="Function">
  A callback reference to run when local audio level observer is not available in the current browser.
</ParamField>

<ParamField type="number">
  The interval in milliseconds at which the volume level is checked (minimum: 100).
</ParamField>

## Example

```jsx theme={null}
import {
  useAudioLevelObserver,
  useLocalSessionId,
} from '@daily-co/daily-react';
import { useCallback, useRef } from 'react';

export const MicVolumeVisualizer = () => {
  const localSessionId = useLocalSessionId();

  const volRef = useRef(null);

  useAudioLevelObserver(
    localSessionId,
    useCallback((volume) => {
      // this volume number will be between 0 and 1
      // give it a minimum scale of 0.15 to not completely disappear 👻
      volRef.current.style.transform = `scale(${Math.max(0.15, volume)})`;
    }, [])
  );

  // Your audio track's audio volume visualized in a small circle,
  // whose size changes depending on the volume level
  return (
    <div>
      <div className="vol" ref={volRef} />
      <style jsx>{`
        .vol {
          border: 1px solid black;
          border-radius: 100%;
          height: 32px;
          transition: transform 0.1s ease;
          width: 32px;
        }
      `}</style>
    </div>
  );
};
```

## See also

<CardGroup>
  <Card title="Components" icon="layout">
    * [DailyAudioTrack](/reference/daily-react/daily-audio-track)
    * [DailyAudio](/reference/daily-react/daily-audio)
  </Card>

  <Card title="Hooks" icon="code">
    * [useMediaTrack()](/reference/daily-react/use-media-track)
    * [useAudioLevel()](/reference/daily-react/use-audio-level) (deprecated replacement)
  </Card>
</CardGroup>


# useCallFrame
Source: https://docs.daily.co/reference/daily-react/use-call-frame

This hook manages a call frame instance in order to embed Daily Prebuilt.

`useCallFrame(): DailyCall`

When manually managing call frame instances in React, it's easy to run into issues like `Error: Duplicate DailyIframe instances are not allowed`, especially in [React's Strict Mode](https://react.dev/reference/react/StrictMode). `useCallFrame()` handles that for you.

## Parameters

`useCallFrame` accepts the same configuration options as [`createFrame()`](/reference/daily-js/factory-methods/create-frame).

<ParamField type="MutableRefObject<HTMLElement>">
  If specified, Daily's iframe will be appended to the referenced element. Otherwise it will be appended as a child of `document.body`.
</ParamField>

<ParamField type="DailyFactoryOptions">
  Contains all factory properties that are passed to `createFrame()`. Check [DailyCall properties](/reference/daily-js/types/daily-call-options) for details.
</ParamField>

<ParamField type="Function">
  Optional callback function with a boolean return to control when the call frame instance should be created.
</ParamField>

## Return value

<ResponseField name="" type="DailyCall">
  The [`DailyCall`](/reference/daily-js/daily-call-client) instance. Wraps [createFrame()](/reference/daily-js/factory-methods/create-frame).
</ResponseField>

## Example

```jsx theme={null}
import { DailyProvider, useCallFrame } from '@daily-co/daily-react';
import { useCallback, useRef } from 'react';

export const UseCallFrameDemo = () => {
  const callRef = useRef(null);
  const callFrame = useCallFrame({
    parentElRef: callRef,
    options: {
      iframeStyle: {
        position: 'fixed',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
      },
    },
  });
  return (
    /*
     * Yes, you can pass a callFrame to DailyProvider!
     * Keep in mind that Daily's iframe runs in a separate
     * secure web context, so some data is not available,
     * such as audio and video tracks.
     */
    <DailyProvider callObject={callFrame}>
      <div ref={callRef} />
    </DailyProvider>
  );
};
```

## See also

<CardGroup>
  <Card title="Hooks" icon="code">
    * [useCallObject()](/reference/daily-react/use-call-object)
    * [useDaily()](/reference/daily-react/use-daily)
  </Card>

  <Card title="Components" icon="layout">
    * [DailyProvider](/reference/daily-react/daily-provider)
  </Card>

  <Card title="daily-js methods" icon="code">
    * [createFrame()](/reference/daily-js/factory-methods/create-frame)
  </Card>
</CardGroup>


# useCallObject
Source: https://docs.daily.co/reference/daily-react/use-call-object

This hook manages a call object instance.

`useCallObject(): DailyCall`

When manually managing call object instances in React, it's easy to run into issues like `Error: Duplicate DailyIframe instances are not allowed`, especially in [React's Strict Mode](https://react.dev/reference/react/StrictMode). `useCallObject()` handles that for you.

<Note>
  `useCallObject` creates and destroys a call object instance.
  [`useDaily`](/reference/daily-react/use-daily) provides access to the call object instance passed to
  or managed by [`DailyProvider`](/reference/daily-react/daily-provider).
</Note>

## Parameters (optional)

`useCallObject` accepts the same configuration options as [`createCallObject()`](/reference/daily-js/factory-methods/create-call-object).

<ParamField type="DailyFactoryOptions">
  Contains all factory properties that are passed to `createCallObject()`. Check [DailyCall properties](/reference/daily-js/types/daily-call-options) for details.
</ParamField>

<ParamField type="Function">
  Optional callback function with a boolean return to control when the call object instance should be created.
</ParamField>

## Return value

<ResponseField name="DailyCall" type="DailyCall">
  The [`DailyCall`](/reference/daily-js/daily-call-client) instance.
</ResponseField>

## Example

```jsx theme={null}
import { useCallback, useRef } from 'react';
import { DailyProvider, useCallObject } from '@daily-co/daily-react';

export const UseCallObjectDemo = () => {
  const callRef = useRef(null);
  const callObject = useCallObject();
  return (
    <DailyProvider callObject={callObject}>
      <div ref={callRef} />
    </DailyProvider>
  );
};
```

## See also

<CardGroup>
  <Card title="Hooks" icon="code">
    * [useCallFrame()](/reference/daily-react/use-call-frame)
    * [useDaily()](/reference/daily-react/use-daily)
  </Card>

  <Card title="Components" icon="layout">
    * [DailyProvider](/reference/daily-react/daily-provider)
  </Card>

  <Card title="daily-js methods" icon="code">
    * [createCallObject()](/reference/daily-js/factory-methods/create-call-object)
  </Card>
</CardGroup>


# useCPULoad
Source: https://docs.daily.co/reference/daily-react/use-cpu-load

Returns current information about the CPU status.

`useCPULoad(params?): Object`

## Parameters (optional)

<ParamField type="Function">
  Event callback for the [`cpu-load-change`](/reference/daily-js/events/network-events#cpu-load-change) event.
</ParamField>

## Return value

An object with the following properties:

<ResponseField name="state" type="string">
  <code>'low' | 'high'</code>, an assessment of the current CPU state. See [`cpu-load-change`](/reference/daily-js/events/network-events#cpu-load-change) for more details.
</ResponseField>

<ResponseField name="reason" type="string">
  <code>'none' | 'encode' | 'decode' | 'scheduleDuration'</code>. See [`cpu-load-change`](/reference/daily-js/events/network-events#cpu-load-change) for more details.
</ResponseField>

```json theme={null}
{
  "state": "low",
  "reason": "none"
}
```

## Example

```jsx theme={null}
import { useCPULoad } from '@daily-co/daily-react';

export const UseCPULoadDemo = () => {
  const cpu = useCPULoad();

  return <div>CPU load: {cpu.state}</div>;
};
```

## See also

<CardGroup>
  <Card title="Events" icon="bolt">
    * [cpu-load-change](/reference/daily-js/events/network-events#cpu-load-change)
  </Card>

  <Card title="daily-js methods" icon="code">
    * [getNetworkStats()](/reference/daily-js/instance-methods/get-network-stats)
  </Card>
</CardGroup>


# useDaily
Source: https://docs.daily.co/reference/daily-react/use-daily

Returns the current call object instance.

`useDaily(): DailyCall`

This is the same instance passed to or created by [`DailyProvider`](/reference/daily-react/daily-provider).

## Return value

Returns a [`DailyCall`](/reference/daily-js/daily-call-client) instance, which is the [call object](/docs/daily-js/concepts/call-modes#call-object-mode).

## Example

```jsx theme={null}
import { useDaily } from '@daily-co/daily-react';

export const UseDailyDemo = () => {
  const daily = useDaily();
  const state = daily?.meetingState();
  return <div>Meeting state: {state ?? 'unknown'}</div>;
};
```

## See also

<CardGroup>
  <Card title="Components" icon="layout">
    * [DailyProvider](/reference/daily-react/daily-provider)
  </Card>

  <Card title="Hooks" icon="code">
    * [useCallFrame()](/reference/daily-react/use-call-frame)
    * [useCallObject()](/reference/daily-react/use-call-object)
  </Card>
</CardGroup>


# useDailyError
Source: https://docs.daily.co/reference/daily-react/use-daily-error

useDailyError returns a stateful representation of the most recent error and nonfatal-error event objects.

`useDailyError() : Object`

<Note>
  Keep in mind that an `error` event will cause a participant to be ejected immediately from a meeting. If you need to render UI based on the `meetingError` state, make sure that you don't destroy the `callObject` instance until you no longer need the error state. This includes updating any props for [`DailyProvider`](/reference/daily-react/daily-provider) as we'll destroy the current `callObject` instance internally in order to setup a new one with the updated props.
</Note>

## Return value

An object with the following properties:

<ResponseField name="meetingError" type="Object">
  The most recent event object from the [`error`](/reference/daily-js/events/error-events#error) event.
</ResponseField>

<ResponseField name="nonFatalError" type="Object">
  The most recent event object from the [`nonfatal-error`](/reference/daily-js/events/error-events#nonfatal-error) event.
</ResponseField>

## Example

```jsx theme={null}
import { useDailyError } from '@daily-co/daily-react';

export const MyMeetingState = () => {
  const { meetingError, nonFatalError } = useDailyError();

  return (
    <div>
      <p>Most recent meeting error: {meetingError?.errorMsg}</p>
      <p>Most recent nonfatal error: {nonFatalError?.errorMsg}</p>
    </div>
  );
};
```

## See also

<CardGroup>
  <Card title="Events" icon="bolt">
    * [error](/reference/daily-js/events/error-events#error)
    * [nonfatal-error](/reference/daily-js/events/error-events#nonfatal-error)
  </Card>

  <Card title="Components" icon="layout">
    * [DailyProvider](/reference/daily-react/daily-provider)
  </Card>
</CardGroup>


# useDailyEvent
Source: https://docs.daily.co/reference/daily-react/use-daily-event

Registers daily-js event listeners.

`useDailyEvent(params): void`

Listeners are automatically torn down when the calling component or hook unmounts.

## Parameters

<ParamField type="string">
  The `daily-js` [event](/reference/daily-js/events) to register.
</ParamField>

<ParamField type="Function">
  A memoized callback reference to run when the event is emitted.
</ParamField>

<Warning>
  The `callback` param has to be a memoized reference (e.g. via [`useCallback`](https://reactjs.org/docs/hooks-reference.html#usecallback)). Otherwise a console error might be thrown indicating a potential re-render loop.
</Warning>

## Example

```jsx theme={null}
import { useDailyEvent } from '@daily-co/daily-react';
import { useCallback, useState } from 'react';

export const DailyEventDemo = () => {
  const [meetingState, setMeetingState] = useState('disconnected');

  useDailyEvent(
    'joined-meeting',
    useCallback((ev) => {
      setMeetingState('connected');
    }, [])
  );

  return <div>Meeting state: {meetingState}</div>;
};
```

## See also

<CardGroup>
  <Card title="Hooks" icon="code">
    * [useThrottledDailyEvent()](/reference/daily-react/use-throttled-daily-event)
  </Card>

  <Card title="Events" icon="bolt">
    * [Events reference](/reference/daily-js/events)
  </Card>
</CardGroup>


# useDevices
Source: https://docs.daily.co/reference/daily-react/use-devices

Returns information about a participant's media devices and their states, along with helper functions that wrap daily-js device-related methods.

`useDevices(): Object`

For more information about the different error states, see the [`camera-error`](/reference/daily-js/events/settings-events#camera-error) event.

## Return value

Returns an object with the following properties:

<ResponseField name="cameraError" type="Object | null">
  Stores the most recent error object that was emitted through the [`camera-error`](/reference/daily-js/events/settings-events#camera-error) event.
</ResponseField>

<ResponseField name="cameras" type="Object[]">
  An array of [device objects](#device-object-properties) that contains information about each camera.
</ResponseField>

<ResponseField name="camState" type="string">
  <code>'idle' | 'pending' | 'not-supported' | 'granted' | 'blocked' | 'in-use' | 'not-found' | 'constraints-invalid' | 'constraints-none-specified' | 'undefined-mediadevices' | 'unknown'</code>, indicates the general state of camera access.
</ResponseField>

<ResponseField name="currentCam" type="Object | undefined">
  References the selected device in the `cameras` array.
</ResponseField>

<ResponseField name="currentMic" type="Object | undefined">
  References the selected device in the `microphones` array.
</ResponseField>

<ResponseField name="currentSpeaker" type="Object | undefined">
  References the selected device in the `speakers` array.
</ResponseField>

<ResponseField name="hasCamError" type="boolean">
  `true` in case `camState` is one of <code>'blocked' | 'in-use' | 'not-found' | 'constraints-invalid' | 'constraints-none-specified' | 'undefined-mediadevices' | 'unknown'</code>.
</ResponseField>

<ResponseField name="hasMicError" type="boolean">
  `true` in case `micState` is one of <code>'blocked' | 'in-use' | 'not-found' | 'constraints-invalid' | 'constraints-none-specified' | 'undefined-mediadevices' | 'unknown'</code>.
</ResponseField>

<ResponseField name="microphones" type="Object[]">
  An array of [device objects](#device-object-properties) that contains information about each microphone.
</ResponseField>

<ResponseField name="micState" type="string">
  <code>'idle' | 'pending' | 'not-supported' | 'granted' | 'blocked' | 'in-use' | 'not-found' | 'constraints-invalid' | 'constraints-none-specified' | 'undefined-mediadevices' | 'unknown'</code>, indicates the general state of microphone access.
</ResponseField>

<ResponseField name="refreshDevices" type="Function">
  Refreshes the list of devices using [`enumerateDevices()`](/reference/daily-js/instance-methods/enumerate-devices).
</ResponseField>

<ResponseField name="setCamera" type="Function">
  Switches to the camera with the specified `deviceId`. Calls [`setInputDevicesAsync()`](/reference/daily-js/instance-methods/set-input-devices-async).
</ResponseField>

<ResponseField name="setMicrophone" type="Function">
  Switches to the mic with the specified `deviceId`. Calls [`setInputDevicesAsync()`](/reference/daily-js/instance-methods/set-input-devices-async).
</ResponseField>

<ResponseField name="setSpeaker" type="Function">
  Switches to the speaker with the specified `deviceId`. Calls [`setOutputDeviceAsync()`](/reference/daily-js/instance-methods/set-output-device-async).
</ResponseField>

<ResponseField name="speakers" type="Object[]">
  An array of [device objects](#device-object-properties) that contains information about each speaker.
</ResponseField>

### About `camState` and `micState`

With 0.7.0 `camState` and `micState` have a new default value of `"idle"` (in previous versions of Daily React, this value was `"pending"`).
Both states remain `"idle"` as long as no device access has been requested, which is the case for rooms configured with `start_audio_off: true` and `start_video_off: true`.
Once device access is requested, `camState` and `micState` switch to `"pending"`, as long as device access is pending.
Once the user grants device access they will switch to `"granted"`. In case the user blocked device access they switch to `"blocked"` accordingly.
In case of an [error](/reference/daily-js/events/settings-events#camera-error) the most representative error state will be applied.

### Device object properties

<ResponseField name="cameras / microphones / speakers item" type="Object">
  <Expandable title="properties">
    <ResponseField name="device" type="Object">
      The same device information returned from [`enumerateDevices()`](/reference/daily-js/instance-methods/enumerate-devices).
    </ResponseField>

    <ResponseField name="selected" type="boolean">
      `true` when this specific device is currently being used by [`getUserMedia()`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia).
    </ResponseField>

    <ResponseField name="state" type="string">
      <code>'granted' | 'in-use'</code>. `'granted'` means the device is available, `'in-use'` means the device is used by another app.
    </ResponseField>
  </Expandable>
</ResponseField>

```json theme={null}
{
  "cameras": [
    {
      "device": <Object>,
      "selected": true,
      "state": "granted",
    },
  ],
  "camState": "granted",
  "currentCam": <Object>,
  "currentMic": <Object>,
  "currentSpeaker": <Object>,
  "hasCamError": false,
  "hasMicError": true,
  "microphones": [
    {
      "device": <Object>,
      "selected": false,
      "state": "in-use",
    },
  ],
  "micState": "in-use",
  "refreshDevices": <Function>,
  "setCamera": <Function>,
  "setMicrophone": <Function>,
  "setSpeaker": <Function>,
  "speakers": [
    {
      "device": <Object>,
      "selected": false,
      "state": "granted",
    },
  ],
}
```

## Example

```jsx theme={null}
import { useDevices } from '@daily-co/daily-react';

export const UseDevicesDemo = () => {
  const devices = useDevices();

  return (
    <ul>
      <li>Cam: {devices.hasCamError ? 'Error' : 'OK'}</li>
      <li>Mic: {devices.hasMicError ? 'Error' : 'OK'}</li>
    </ul>
  );
};
```

## See also

<CardGroup>
  <Card title="daily-js methods" icon="code">
    * [enumerateDevices()](/reference/daily-js/instance-methods/enumerate-devices)
    * [setInputDevicesAsync()](/reference/daily-js/instance-methods/set-input-devices-async)
    * [setOutputDeviceAsync()](/reference/daily-js/instance-methods/set-output-device-async)
  </Card>

  <Card title="Events" icon="bolt">
    * [camera-error](/reference/daily-js/events/settings-events#camera-error)
  </Card>
</CardGroup>


# useDialin
Source: https://docs.daily.co/reference/daily-react/use-dialin

useDialin tracks the readiness of a room to receive PSTN/SIP calls and the state of incoming dial-in sessions.

`useDialin(params?): Object`

Tracks the [dial-in](/docs/daily-js/features/dialin-dialout) readiness of the current room and the
state of incoming caller sessions, and wraps the `daily-js` `startDialIn()` method. Accepts optional
callbacks for the [dial-in events](/reference/daily-js/events/telephony-events).

Readiness is set when a [`dialin-ready`](/reference/daily-js/events/telephony-events#dialin-ready)
event is received. Incoming callers are tracked per session, keyed by `sessionId`. State is reset when
the local participant leaves the meeting or the call instance is destroyed.

<Note>
  Dial-in requires a paid Daily account with a credit card on file. See the
  [Dial-in and dial-out guide](/docs/guides/features/dial-in-dial-out) for setup and requirements.
</Note>

## Parameters

<ParamField type="Function">
  Callback for the [`dialin-ready`](/reference/daily-js/events/telephony-events#dialin-ready) event.
</ParamField>

<ParamField type="Function">
  Callback for the [`dialin-connected`](/reference/daily-js/events/telephony-events#dialin-connected) event.
</ParamField>

<ParamField type="Function">
  Callback for the [`dialin-stopped`](/reference/daily-js/events/telephony-events#dialin-stopped) event.
</ParamField>

<ParamField type="Function">
  Callback for the [`dialin-error`](/reference/daily-js/events/telephony-events#dialin-error) event.
</ParamField>

<ParamField type="Function">
  Callback for the [`dialin-warning`](/reference/daily-js/events/telephony-events#dialin-warning) event.
</ParamField>

## Return value

Returns an object with the following properties:

<ResponseField name="isReady" type="boolean">
  `true` once a `dialin-ready` event has been received, meaning the room's SIP endpoint is ready to
  receive incoming calls.
</ResponseField>

<ResponseField name="sipEndpoint" type="string">
  The room's SIP endpoint. Populated after `dialin-ready`.
</ResponseField>

<ResponseField name="provider" type="string">
  The SIP/PSTN service provider. Populated after `dialin-ready`.
</ResponseField>

<ResponseField name="sessions" type="Object">
  A map of incoming dial-in caller sessions, keyed by `sessionId`.

  <Expandable title="session properties">
    <ResponseField name="sessions[sessionId].sessionId" type="string">
      The session ID of the incoming caller.
    </ResponseField>

    <ResponseField name="sessions[sessionId].status" type="string">
      The latest status for the session: `'connected'`, `'stopped'`, `'error'` or `'warning'`.
    </ResponseField>

    <ResponseField name="sessions[sessionId].provider" type="string">
      The SIP/PSTN service provider for the session, when reported.
    </ResponseField>

    <ResponseField name="sessions[sessionId].sipCallId" type="string">
      The SIP call ID for the session, when reported.
    </ResponseField>

    <ResponseField name="sessions[sessionId].errorMsg" type="string">
      The error or warning message, set when `status` is `'error'` or `'warning'`.
    </ResponseField>
  </Expandable>
</ResponseField>

<ResponseField name="startDialIn" type="Function">
  Wraps `daily-js`'s `startDialIn()` method.
</ResponseField>

## Example

```jsx theme={null}
import { useDialin } from '@daily-co/daily-react';

export const DialinStatus = () => {
  const { isReady, sipEndpoint, sessions } = useDialin({
    onDialinError: (ev) => console.error('Dial-in error', ev.errorMsg),
  });

  return (
    <div>
      <p>
        Dial-in {isReady ? 'ready' : 'not ready'}
        {sipEndpoint ? ` at ${sipEndpoint}` : ''}
      </p>
      <p>{Object.keys(sessions).length} caller(s) connected</p>
    </div>
  );
};
```

## See also

<CardGroup>
  <Card title="Hooks" icon="code">
    * [useDialOut()](/reference/daily-react/use-dialout)
  </Card>

  <Card title="Events" icon="bolt">
    * [dialin-ready](/reference/daily-js/events/telephony-events#dialin-ready)
    * [dialin-connected](/reference/daily-js/events/telephony-events#dialin-connected)
    * [dialin-stopped](/reference/daily-js/events/telephony-events#dialin-stopped)
    * [dialin-error](/reference/daily-js/events/telephony-events#dialin-error)
    * [dialin-warning](/reference/daily-js/events/telephony-events#dialin-warning)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Dial-in and dial-out](/docs/guides/features/dial-in-dial-out)
  </Card>
</CardGroup>


# useDialOut
Source: https://docs.daily.co/reference/daily-react/use-dialout

useDialOut tracks the state of PSTN/SIP dial-out sessions and wraps the daily-js dial-out, DTMF and SIP transfer methods.

`useDialOut(params?): Object`

Tracks the state of [dial-out](/docs/daily-js/features/dialin-dialout) sessions and returns helper
functions that wrap the `daily-js` dial-out, DTMF and SIP transfer methods. Accepts optional
callbacks for the [dial-out events](/reference/daily-js/events/telephony-events).

Dial-out state is tracked per session, keyed by `sessionId`. State is reset when the local
participant leaves the meeting or the call instance is destroyed.

<Note>
  Dial-out requires a paid Daily account, [dial-out approval](https://forms.gle/Q5eaHLEosuKyzC7BA),
  and [`enable_dialout`](/reference/rest-api/rooms/create-room#body-properties-enable-dialout) set on
  the room. See the [Dial-in and dial-out guide](/docs/guides/features/dial-in-dial-out) for setup and
  requirements.
</Note>

## Parameters

<ParamField type="Function">
  Callback for the [`dialout-connected`](/reference/daily-js/events/telephony-events#dialout-connected) event.
</ParamField>

<ParamField type="Function">
  Callback for the [`dialout-answered`](/reference/daily-js/events/telephony-events#dialout-answered) event.
</ParamField>

<ParamField type="Function">
  Callback for the [`dialout-stopped`](/reference/daily-js/events/telephony-events#dialout-stopped) event.
</ParamField>

<ParamField type="Function">
  Callback for the [`dialout-error`](/reference/daily-js/events/telephony-events#dialout-error) event.
</ParamField>

<ParamField type="Function">
  Callback for the [`dialout-warning`](/reference/daily-js/events/telephony-events#dialout-warning) event.
</ParamField>

## Return value

Returns an object with the following properties:

<ResponseField name="sessions" type="Object">
  A map of active dial-out sessions, keyed by `sessionId`.

  <Expandable title="session properties">
    <ResponseField name="sessions[sessionId].sessionId" type="string">
      The session ID of the dial-out participant. Use this value with `stopDialOut`, `sendDTMF`,
      `sipCallTransfer` and `sipRefer`.
    </ResponseField>

    <ResponseField name="sessions[sessionId].status" type="string">
      The latest status for the session: `'connected'`, `'answered'`, `'stopped'`, `'error'` or
      `'warning'`.
    </ResponseField>

    <ResponseField name="sessions[sessionId].provider" type="string">
      The SIP/PSTN service provider for the session, when reported.
    </ResponseField>

    <ResponseField name="sessions[sessionId].sipCallId" type="string">
      The SIP call ID for the session, when reported.
    </ResponseField>

    <ResponseField name="sessions[sessionId].errorMsg" type="string">
      The error or warning message, set when `status` is `'error'` or `'warning'`.
    </ResponseField>
  </Expandable>
</ResponseField>

<ResponseField name="startDialOut" type="Function">
  Wraps `daily-js` [`startDialOut()`](/reference/daily-js/instance-methods/start-dial-out).
</ResponseField>

<ResponseField name="stopDialOut" type="Function">
  Wraps `daily-js` [`stopDialOut()`](/reference/daily-js/instance-methods/stop-dial-out).
</ResponseField>

<ResponseField name="sendDTMF" type="Function">
  Wraps `daily-js` [`sendDTMF()`](/reference/daily-js/instance-methods/send-dtmf).
</ResponseField>

<ResponseField name="sipCallTransfer" type="Function">
  Wraps `daily-js` [`sipCallTransfer()`](/reference/daily-js/instance-methods/sip-call-transfer).
</ResponseField>

<ResponseField name="sipRefer" type="Function">
  Wraps `daily-js` [`sipRefer()`](/reference/daily-js/instance-methods/sip-refer).
</ResponseField>

<Note>
  A `dialout-error` or `dialout-warning` that arrives before a session is established (with no
  `sessionId`) is delivered through the `onDialOutError` / `onDialOutWarning` callbacks, but is not
  added to `sessions`.
</Note>

## Example

```jsx theme={null}
import { useDialOut } from '@daily-co/daily-react';

export const DialOutDemo = () => {
  const { sessions, startDialOut, stopDialOut, sendDTMF } = useDialOut({
    onDialOutError: (ev) => console.error('Dial-out failed', ev.errorMsg),
  });

  const callSupport = () =>
    startDialOut({ phoneNumber: '+15551234567' });

  return (
    <div>
      <button onClick={callSupport}>Call support</button>
      {Object.values(sessions).map((session) => (
        <div key={session.sessionId}>
          <span>
            {session.sessionId}: {session.status}
          </span>
          <button
            onClick={() =>
              sendDTMF({ sessionId: session.sessionId, tones: '1' })
            }
          >
            Press 1
          </button>
          <button onClick={() => stopDialOut({ sessionId: session.sessionId })}>
            Hang up
          </button>
        </div>
      ))}
    </div>
  );
};
```

## See also

<CardGroup>
  <Card title="Hooks" icon="code">
    * [useDialin()](/reference/daily-react/use-dialin)
  </Card>

  <Card title="daily-js methods" icon="code">
    * [startDialOut()](/reference/daily-js/instance-methods/start-dial-out)
    * [stopDialOut()](/reference/daily-js/instance-methods/stop-dial-out)
    * [sendDTMF()](/reference/daily-js/instance-methods/send-dtmf)
    * [sipCallTransfer()](/reference/daily-js/instance-methods/sip-call-transfer)
    * [sipRefer()](/reference/daily-js/instance-methods/sip-refer)
  </Card>

  <Card title="Events" icon="bolt">
    * [dialout-connected](/reference/daily-js/events/telephony-events#dialout-connected)
    * [dialout-answered](/reference/daily-js/events/telephony-events#dialout-answered)
    * [dialout-stopped](/reference/daily-js/events/telephony-events#dialout-stopped)
    * [dialout-error](/reference/daily-js/events/telephony-events#dialout-error)
    * [dialout-warning](/reference/daily-js/events/telephony-events#dialout-warning)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Dial-in and dial-out](/docs/guides/features/dial-in-dial-out)
  </Card>
</CardGroup>


# useInputSettings
Source: https://docs.daily.co/reference/daily-react/use-input-settings

Convenience hook around getInputSettings() and updateInputSettings().

`useInputSettings(params?) : Object`

## Parameters (optional)

<ParamField type="Function">
  Callback for the [`'input-settings-error'`](/reference/daily-js/events/error-events#nonfatal-error) event.
</ParamField>

<ParamField type="Function">
  Callback for the [`input-settings-updated`](/reference/daily-js/events/settings-events#input-settings-updated) event.
</ParamField>

## Return value

An object with the following properties:

<ResponseField name="errorMsg" type="string">
  Details an input settings error. Defaults to `null`.
</ResponseField>

<ResponseField name="inputSettings" type="Object">
  The settings for the participant. See `daily-js` instance method [`getInputSettings()`](/reference/daily-js/instance-methods/get-input-settings) for an overview of input settings.
</ResponseField>

<ResponseField name="updateInputSettings" type="Function">
  Updates input settings, equivalent to calling the `daily-js` [`updateInputSettings()`](/reference/daily-js/instance-methods/update-input-settings) method.
</ResponseField>

<Warning>
  Any calls to `updateInputSettings()` before the meeting is joined will be silently ignored.
</Warning>

## Example

```tsx theme={null}
import { DailyEventObjectInputSettingsUpdated } from '@daily-co/daily-js';
import { useInputSettings } from '@daily-co/daily-react';
import React, { useCallback, useState } from 'react';

export const UseInputSettingsDemo = () => {
  const [, setErrorMessage] = useState('No error!');

  const { updateInputSettings, errorMsg } = useInputSettings({
    onError: useCallback(() => {
      setErrorMessage(errorMsg);
    }, [errorMsg]),

    onInputSettingsUpdated: useCallback(
      (event: DailyEventObjectInputSettingsUpdated) => {
        console.log(
          'Input settings updated:',
          event.inputSettings?.video?.processor
        );
      },
      []
    ),
  });

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

  return (
    <div>
      <button type="button" onClick={enableBackgroundBlur}>
        Enable background blur
      </button>
    </div>
  );
};
```

## See also

<CardGroup>
  <Card title="daily-js methods" icon="code">
    * [getInputSettings()](/reference/daily-js/instance-methods/get-input-settings)
    * [updateInputSettings()](/reference/daily-js/instance-methods/update-input-settings)
  </Card>

  <Card title="Events" icon="bolt">
    * [input-settings-updated](/reference/daily-js/events/settings-events#input-settings-updated)
    * [input-settings-error (nonfatal-error)](/reference/daily-js/events/error-events#nonfatal-error)
  </Card>
</CardGroup>


# useLiveStreaming
Source: https://docs.daily.co/reference/daily-react/use-live-streaming

Returns information about a live stream, along with helper functions that wrap daily-js live streaming-related methods.

<Badge>Paid plans only</Badge>

`useLiveStreaming(params?) : Object`

`useLiveStreaming` can also be used to set up optional callbacks for live streaming [events](/reference/daily-js/events/live-streaming-events).

When multiple live streams are running concurrently (see [multi-instance live streaming](/docs/guides/features/live-streaming/multi-instance)), you can pass an `instanceId` to get per-instance state. Without `instanceId`, the hook returns aggregate state across all instances. For a list of all active instances, see [`useLiveStreamingInstances`](/reference/daily-react/use-live-streaming-instances).

## Parameters (optional)

<ParamField type="string">
  A valid UUID. When provided, returns state for a specific live streaming instance and filters event callbacks to only fire for that instance. See [multi-instance live streaming](/docs/guides/features/live-streaming/multi-instance).
</ParamField>

<ParamField type="Function">
  Callback for the [`live-streaming-error`](/reference/daily-js/events/live-streaming-events#live-streaming-error) event.
</ParamField>

<ParamField type="Function">
  Callback for the [`live-streaming-started`](/reference/daily-js/events/live-streaming-events#live-streaming-started) event.
</ParamField>

<ParamField type="Function">
  Callback for the [`live-streaming-stopped`](/reference/daily-js/events/live-streaming-events#live-streaming-stopped) event.
</ParamField>

<ParamField type="Function">
  Callback for the [`live-streaming-updated`](/reference/daily-js/events/live-streaming-events#live-streaming-updated) event.
</ParamField>

<ParamField type="Function">
  Callback for the [`nonfatal-error` event with type `'live-streaming-warning'`](/reference/daily-js/events/error-events#live-streaming-warning).
</ParamField>

## Return value

An object with the following properties:

### Without `instanceId` (aggregate state)

When called without `instanceId`, the hook returns aggregate state across all live streaming instances. This works well for single-instance use cases — the scalar fields (`errorMsg`, `layout`) reflect the only active instance. With multiple concurrent instances, these fields reflect the first active instance; use `useLiveStreaming({ instanceId })` for unambiguous per-instance access.

<ResponseField name="errorMsg" type="string">
  Error message from the first errored instance. With multiple instances, use `useLiveStreaming({ instanceId })` for per-instance error state.
</ResponseField>

<ResponseField name="isLiveStreaming" type="boolean">
  `true` if any live streaming instance is active.
</ResponseField>

<ResponseField name="layout" type="Object">
  Layout of the first active instance. With multiple instances, use `useLiveStreaming({ instanceId })` for per-instance layout.
</ResponseField>

<ResponseField name="startLiveStreaming" type="Function">
  Wraps [`startLiveStreaming()`](/reference/daily-js/instance-methods/start-live-streaming).
</ResponseField>

<ResponseField name="stopLiveStreaming" type="Function">
  Wraps [`stopLiveStreaming()`](/reference/daily-js/instance-methods/stop-live-streaming).
</ResponseField>

<ResponseField name="updateLiveStreaming" type="Function">
  Wraps [`updateLiveStreaming()`](/reference/daily-js/instance-methods/update-live-streaming).
</ResponseField>

### With `instanceId` (per-instance state)

When called with `instanceId`, the hook returns state for that specific live streaming instance only.

<ResponseField name="errorMsg" type="string">
  Error message for this instance, if any.
</ResponseField>

<ResponseField name="instanceId" type="string">
  The instance ID.
</ResponseField>

<ResponseField name="isLiveStreaming" type="boolean">
  Whether this instance is currently live streaming.
</ResponseField>

<ResponseField name="layout" type="Object">
  The [live streaming layout](/docs/guides/features/live-streaming#live-streaming-layout-options) for this instance.
</ResponseField>

<ResponseField name="startLiveStreaming" type="Function">
  Wraps [`startLiveStreaming()`](/reference/daily-js/instance-methods/start-live-streaming).
</ResponseField>

<ResponseField name="stopLiveStreaming" type="Function">
  Wraps [`stopLiveStreaming()`](/reference/daily-js/instance-methods/stop-live-streaming).
</ResponseField>

<ResponseField name="updateLiveStreaming" type="Function">
  Wraps [`updateLiveStreaming()`](/reference/daily-js/instance-methods/update-live-streaming).
</ResponseField>

<Tip>
  For more on live streaming with Daily, reference our [guide](/docs/guides/features/live-streaming).
</Tip>

## Example

### Basic usage

```jsx theme={null}
import { useLiveStreaming } from '@daily-co/daily-react';

export const UseLiveStreamingDemo = () => {
  const liveStreamingState = useLiveStreaming();

  return (
    <div>
      This call is {!liveStreamingState.isLiveStreaming ? 'not' : ''} live
      streamed
    </div>
  );
};
```

### Multi-instance usage

```jsx theme={null}
import { useLiveStreaming } from '@daily-co/daily-react';
import { useLiveStreamingInstances } from '@daily-co/daily-react';

// instanceId must be a valid UUID
const MOBILE_INSTANCE = 'a1b2c3d4-5678-9abc-def0-1234567890ab';
const DESKTOP_INSTANCE = 'b2c3d4e5-6789-abcd-ef01-234567890abc';

export const MultiStreamDemo = () => {
  // Aggregate state: true if any instance is streaming
  const { isLiveStreaming } = useLiveStreaming();

  // Per-instance state
  const mobileStream = useLiveStreaming({
    instanceId: MOBILE_INSTANCE,
  });
  const desktopStream = useLiveStreaming({
    instanceId: DESKTOP_INSTANCE,
  });

  return (
    <div>
      <p>Any stream active: {isLiveStreaming ? 'Yes' : 'No'}</p>
      <p>Mobile: {mobileStream.isLiveStreaming ? 'Live' : 'Idle'}</p>
      <p>Desktop: {desktopStream.isLiveStreaming ? 'Live' : 'Idle'}</p>
    </div>
  );
};
```

## See also

<CardGroup>
  <Card title="daily-js methods" icon="code">
    * [startLiveStreaming()](/reference/daily-js/instance-methods/start-live-streaming)
    * [stopLiveStreaming()](/reference/daily-js/instance-methods/stop-live-streaming)
    * [updateLiveStreaming()](/reference/daily-js/instance-methods/update-live-streaming)
  </Card>

  <Card title="Events" icon="bolt">
    * [live-streaming-started](/reference/daily-js/events/live-streaming-events#live-streaming-started)
    * [live-streaming-stopped](/reference/daily-js/events/live-streaming-events#live-streaming-stopped)
    * [live-streaming-error](/reference/daily-js/events/live-streaming-events#live-streaming-error)
    * [live-streaming-updated](/reference/daily-js/events/live-streaming-events#live-streaming-updated)
    * [nonfatal-error type live-streaming-warning](/reference/daily-js/events/error-events#live-streaming-warning)
  </Card>

  <Card title="Hooks" icon="code">
    * [useLiveStreamingInstances()](/reference/daily-react/use-live-streaming-instances)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Live streaming guide](/docs/guides/features/live-streaming)
  </Card>
</CardGroup>


# useLiveStreamingInstances
Source: https://docs.daily.co/reference/daily-react/use-live-streaming-instances

useLiveStreamingInstances returns an array of all live streaming instance states.

<Badge>Paid plans only</Badge>

`useLiveStreamingInstances(): LiveStreamingInstanceState[]`

This is useful when working with [multi-instance live streaming](/docs/guides/features/live-streaming/multi-instance) to enumerate and display all active (and recently stopped) streaming instances.

## Return value

An array of `LiveStreamingInstanceState` objects, each with the following properties:

<ResponseField name="errorMsg" type="string">
  Error message for this instance, if any.
</ResponseField>

<ResponseField name="instanceId" type="string">
  The unique identifier for this live streaming instance.
</ResponseField>

<ResponseField name="isLiveStreaming" type="boolean">
  Whether this instance is currently live streaming.
</ResponseField>

<ResponseField name="layout" type="Object">
  The live streaming layout configuration for this instance.
</ResponseField>

## Example

```jsx theme={null}
import { useLiveStreamingInstances } from '@daily-co/daily-react';

export const StreamingInstancesList = () => {
  const instances = useLiveStreamingInstances();

  if (instances.length === 0) {
    return <div>No live streams</div>;
  }

  return (
    <ul>
      {instances.map((instance) => (
        <li key={instance.instanceId}>
          {instance.instanceId}: {instance.isLiveStreaming ? 'Live' : 'Stopped'}
          {instance.layout?.preset && ` (${instance.layout.preset})`}
        </li>
      ))}
    </ul>
  );
};
```

## See also

<CardGroup>
  <Card title="Hooks" icon="code">
    * [useLiveStreaming()](/reference/daily-react/use-live-streaming)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Multi-instance live streaming and recording](/docs/guides/features/live-streaming/multi-instance)
  </Card>
</CardGroup>


# useLocalParticipant
Source: https://docs.daily.co/reference/daily-react/use-local-participant

Returns a local participant object.

<Badge>Deprecated 0.17.0</Badge>

`useLocalParticipant() : Object`

## Return value

Returns an object with detailed information about the participant. See [participant properties](/reference/daily-js/types/daily-participant).

## Example

```jsx theme={null}
import { useLocalParticipant } from '@daily-co/daily-react';

export const UseLocalParticipantDemo = () => {
  const localParticipant = useLocalParticipant();

  return <div>Hello, {localParticipant?.user_name}</div>;
};
```

## See also

<CardGroup>
  <Card title="Hooks" icon="code">
    * [useParticipantProperty()](/reference/daily-react/use-participant-property) (preferred replacement)
    * [useLocalSessionId()](/reference/daily-react/use-local-session-id)
    * [useParticipant()](/reference/daily-react/use-participant)
    * [useActiveParticipant()](/reference/daily-react/use-active-participant)
    * [useActiveSpeakerId()](/reference/daily-react/use-active-speaker-id)
    * [useParticipantCounts()](/reference/daily-react/use-participant-counts)
    * [useParticipantIds()](/reference/daily-react/use-participant-ids)
    * [useWaitingParticipants()](/reference/daily-react/use-waiting-participants)
  </Card>
</CardGroup>


# useLocalSessionId
Source: https://docs.daily.co/reference/daily-react/use-local-session-id

useLocalSessionId is a convenience hook to access the local participant's session_id.

`useLocalSessionId(): string`

Prefer this over [`useLocalParticipant()`](/reference/daily-react/use-local-participant) when you only need the `session_id`, to reduce unnecessary re-renders.

## Return value

The local participant's `session_id` (a string) is returned by this hook. See the [participant properties](/reference/daily-js/types/daily-participant) documentation for more information.

## Example

```jsx theme={null}
import { useLocalSessionId } from '@daily-co/daily-react';

export const UseLocalSessionIdDemo = () => {
  const localSessionId = useLocalSessionId();

  return <div>Your ID: {localSessionId}</div>;
};
```

## See also

<CardGroup>
  <Card title="Hooks" icon="code">
    * [useLocalParticipant()](/reference/daily-react/use-local-participant)
    * [useParticipant()](/reference/daily-react/use-participant)
    * [useParticipantProperty()](/reference/daily-react/use-participant-property)
    * [useParticipantIds()](/reference/daily-react/use-participant-ids)
    * [useParticipantCounts()](/reference/daily-react/use-participant-counts)
    * [useActiveParticipant()](/reference/daily-react/use-active-participant)
    * [useActiveSpeakerId()](/reference/daily-react/use-active-speaker-id)
    * [useWaitingParticipants()](/reference/daily-react/use-waiting-participants)
  </Card>
</CardGroup>


# useMediaTrack
Source: https://docs.daily.co/reference/daily-react/use-media-track

Given a participant session_id and type of track, returns the corresponding track and its state.

`useMediaTrack(params) : Object`

There are also [convenience hooks](#convenience-hooks-for-specific-track-types) for each track type.

## Parameters

<ParamField type="string">
  A unique identifier for the participant
</ParamField>

<ParamField type="string">
  `'audio' | 'video' | 'screenAudio' | 'screenVideo' | 'rmpAudio' | 'rmpVideo'`, specifies the kind of track. You can also pass the `trackName` of a [custom track](/reference/daily-js/instance-methods/start-custom-track) started via `startCustomTrack()`. Note: `trackName` is resolved internally as a participant-property path, so names containing a `.` will not resolve; use simple identifiers (e.g. `my-track`, not `my.track`).
</ParamField>

## Return value

An object with the following properties:

<ResponseField name="MediaTrackState" type="Object">
  Includes detailed information about the given track. See [participant tracks properties](/reference/daily-js/types/daily-track-state)
</ResponseField>

<ResponseField name="isOff" type="boolean">
  Indicates whether a track is turned off or on, `true` when track state is `'blocked' | 'off'`
</ResponseField>

## Convenience hooks for specific track types

### useAudioTrack

`useAudioTrack(session_id: string) : MediaTrackState`

Given a participant's `session_id`, returns the [`MediaTrackState`](#return-value) of their `'audio'` track.

### useScreenAudioTrack

`useScreenAudioTrack(session_id: string) : MediaTrackState`

Given a participant's `session_id`, returns the [`MediaTrackState`](#return-value) of their `'screenAudio'` track.

### useScreenVideoTrack

`useScreenVideoTrack(session_id: string) : MediaTrackState`

Given a participant's `session_id`, returns the [`MediaTrackState`](#return-value) of their `'screenVideo'` track.

### useVideoTrack

`useVideoTrack(session_id: string) : MediaTrackState`

Given a participant's `session_id`, returns the [`MediaTrackState`](#return-value) of their `'video'` track.

## Example

```jsx theme={null}
import { useMediaTrack } from '@daily-co/daily-react';

export const UseMediaTrackDemo = (props) => {
  const sessionID = props.session_id;
  const mediaTrack = useMediaTrack(sessionID, "audio");

  return (
      <div>Audio {mediaTrack.isOff ? "off" : "on"}</div>
  )
};
```

## See also

<CardGroup>
  <Card title="Components" icon="layout">
    * [DailyAudioTrack](/reference/daily-react/daily-audio-track)
    * [DailyAudio](/reference/daily-react/daily-audio)
    * [DailyVideo](/reference/daily-react/daily-video)
  </Card>

  <Card title="Hooks" icon="code">
    * [useAudioLevelObserver()](/reference/daily-react/use-audio-level-observer)
  </Card>

  <Card title="daily-js methods" icon="code">
    * [participants() — tracks properties](/reference/daily-js/types/daily-track-state)
    * [startCustomTrack()](/reference/daily-js/instance-methods/start-custom-track)
  </Card>
</CardGroup>


# useMeetingSessionState
Source: https://docs.daily.co/reference/daily-react/use-meeting-session-state

Returns the current meeting session state as returned by meetingSessionState().

`useMeetingSessionState() : Object`

Wraps [`meetingSessionState()`](/reference/daily-js/instance-methods/meeting-session-state) and accepts a generic type parameter in TypeScript to work seamlessly with custom data type definitions.

## Parameters (optional)

An object with the following properties:

<ParamField type="Function">
  Callback for the [`nonfatal-error` event with type `'meeting-session-data-error'`](/reference/daily-js/events/error-events#meeting-session-data-error)
</ParamField>

## Return value

An object with the following properties:

<ResponseField name="data" type="Object">
  The meeting session data
</ResponseField>

<ResponseField name="topology" type="string">
  `'none' | 'peer' | 'sfu'`, the current meeting network topology
</ResponseField>

## Example

```jsx theme={null}
import { useMeetingSessionState } from '@daily-co/daily-react';

export const UseMeetingSessionStateDemo = (props) => {
  const { data } = useMeetingSessionState();

  return (
    <div>
      <strong>Current session data:</strong>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};
```

## See also

<CardGroup>
  <Card title="daily-js methods" icon="code">
    * [meetingSessionState()](/reference/daily-js/instance-methods/meeting-session-state)
    * [setMeetingSessionData()](/reference/daily-js/instance-methods/set-meeting-session-data)
  </Card>

  <Card title="Events" icon="bolt">
    * [nonfatal-error type meeting-session-data-error](/reference/daily-js/events/error-events#meeting-session-data-error)
  </Card>
</CardGroup>


# useMeetingSessionSummary
Source: https://docs.daily.co/reference/daily-react/use-meeting-session-summary

Returns the current meeting session summary, including the session id once the call has started.

`useMeetingSessionSummary(): DailyMeetingSessionSummary | null`

Wraps [`meetingSessionSummary()`](/reference/daily-js/instance-methods/meeting-session-summary). The value is populated when the local participant joins and stays in sync via the [`meeting-session-summary-updated`](/reference/daily-js/events/messaging-events#meeting-session-summary-updated) event. It is `null` whenever there is no active meeting session: before joining, and again after the local participant leaves (`left-meeting`) or the call instance is destroyed (`call-instance-destroyed`).

The session `id` is useful for correlating a call with its recordings, logs, and REST API resources.

## Return value

Returns a `DailyMeetingSessionSummary` object while a meeting session is active, or `null` when there is no active session (before joining, and after `left-meeting` or `call-instance-destroyed`).

<ResponseField name="id" type="string">
  The meeting session's unique identifier, available once the session has started. Use it to correlate the call with its recordings, logs, and REST API resources.
</ResponseField>

## Example

```jsx theme={null}
import { useMeetingSessionSummary } from '@daily-co/daily-react';

export const UseMeetingSessionSummaryDemo = () => {
  const meetingSessionSummary = useMeetingSessionSummary();

  if (!meetingSessionSummary) {
    return <div>Waiting for the session to start</div>;
  }

  return <div>Session ID: {meetingSessionSummary.id}</div>;
};
```

## See also

<CardGroup>
  <Card title="Hooks" icon="code">
    * [useMeetingSessionState()](/reference/daily-react/use-meeting-session-state)
    * [useMeetingState()](/reference/daily-react/use-meeting-state)
  </Card>

  <Card title="daily-js methods" icon="code">
    * [meetingSessionSummary()](/reference/daily-js/instance-methods/meeting-session-summary)
  </Card>

  <Card title="Events" icon="bolt">
    * [meeting-session-summary-updated](/reference/daily-js/events/messaging-events#meeting-session-summary-updated)
  </Card>
</CardGroup>


# useMeetingState
Source: https://docs.daily.co/reference/daily-react/use-meeting-state

useMeetingState is a convenience hook for the Daily meetingState() method.

`useMeetingState() : DailyMeetingState`

Wraps [`meetingState()`](/reference/daily-js/instance-methods/meeting-state) and triggers a re-render whenever the meeting state changes.

## Return value

Returns a `DailyMeetingState` string: `'new' | 'loading' | 'loaded' | 'joining-meeting' | 'joined-meeting' | 'left-meeting' | 'error'`. Defaults to `'new'`.

## Example

```jsx theme={null}
import { useMeetingState } from '@daily-co/daily-react';

export const MyMeetingState = () => {
  const meetingState = useMeetingState();

  return (
    <div>
      <h1>Current meeting state: {meetingState}</h1>
      <p>{meetingState === 'left-meeting' && 'Goodbye!'}</p>
    </div>
  );
};
```

## See also

<CardGroup>
  <Card title="daily-js methods" icon="code">
    * [meetingState()](/reference/daily-js/instance-methods/meeting-state)
  </Card>

  <Card title="Events" icon="bolt">
    * [joined-meeting](/reference/daily-js/events/lifecycle-events#joined-meeting)
    * [left-meeting](/reference/daily-js/events/lifecycle-events#left-meeting)
  </Card>
</CardGroup>


# useNetwork
Source: https://docs.daily.co/reference/daily-react/use-network

Returns current information about network quality and topology.

`useNetwork(params?): Object`

`useNetwork` can also be used to set up optional callbacks for `daily-js` [network events](/reference/daily-js/events/network-events).

## Parameters (optional)

<ParamField type="Function">
  Event callback for the [`network-quality-change`](/reference/daily-js/events/network-events#network-quality-change) event
</ParamField>

<ParamField type="Function">
  Event callback for the [`network-connection`](/reference/daily-js/events/network-events#network-connection) event
</ParamField>

## Return value

An object with the following properties:

<ResponseField name="getStats" type="Function">
  Details the latest network stats, equivalent to calling [`getNetworkStats()`](/reference/daily-js/instance-methods/get-network-stats)
</ResponseField>

<ResponseField name="networkState" type="string">
  `'good' | 'warning' | 'bad' | 'unknown'`, check [getNetworkStats()](/reference/daily-js/instance-methods/get-network-stats#return-value) for details
</ResponseField>

<ResponseField name="networkStateReasons" type="Array<string>">
  Possible reasons are `'sendPacketLoss' | 'recvPacketLoss' | 'roundTripTime' | 'availableOutgoingBitrate'`, check [getNetworkStats()](/reference/daily-js/instance-methods/get-network-stats#return-value) for details
</ResponseField>

<ResponseField name="networkStatus" type="string">
  `'connected' | 'interrupted'`, the current network connection status
</ResponseField>

<ResponseField name="quality" type="number">
  <Badge>Deprecated 0.23.0</Badge> A subjective calculation of the current network quality on a scale of 1-100, defaults to `100`
</ResponseField>

<ResponseField name="threshold" type="string">
  <Badge>Deprecated 0.23.0</Badge> `'good' | 'low' | 'very-low'`, an assessment of the current network quality. The threshold value is calculated from network stats averaged over an approximately 30-second rolling window. By default, we lower the bandwidth used for the call when the network quality drops to `'low'`; defaults to `'good'`
</ResponseField>

<ResponseField name="topology" type="string">
  `'none' | 'peer' | 'sfu'`, the [network connection type](/docs/guides/architecture-and-monitoring/intro-to-video-arch#the-architecture-of-a-room-p2p-vs-sfu-calls) of the current call, defaults to `'none'`
</ResponseField>

```json theme={null}
{
  "getStats": <Function>,
  "networkState": "good",
  "networkStateReasons": [],
  "networkStatus": "connected",
  "quality": 100,
  "threshold": "good",
  "topology": "sfu",
}
```

## Example

```jsx theme={null}
import { useNetwork } from '@daily-co/daily-react';

export const UseNetworkDemo = () => {
  const network = useNetwork();

  return <div>Network state: {network.networkState}</div>;
};
```

## See also

<CardGroup>
  <Card title="daily-js methods" icon="code">
    * [getNetworkStats()](/reference/daily-js/instance-methods/get-network-stats)
  </Card>

  <Card title="Events" icon="bolt">
    * [network-quality-change](/reference/daily-js/events/network-events#network-quality-change)
    * [network-connection](/reference/daily-js/events/network-events#network-connection)
  </Card>
</CardGroup>


# useParticipant
Source: https://docs.daily.co/reference/daily-react/use-participant

useParticipant returns a participant object for a given participant session_id.

<Badge>Deprecated 0.17.0</Badge>

`useParticipant(params): Object | null`

If no participant is found for the given `session_id`, returns `null`.

`useParticipant` can also be used to set up optional callbacks for [`participant-left`](/reference/daily-js/events/participant-events#participant-left) and [`participant-updated`](/reference/daily-js/events/participant-events#participant-updated) events.

## Parameters

<ParamField type="string">
  A unique identifier for the participant
</ParamField>

<ParamField type="Function">
  Callback for the [`participant-left`](/reference/daily-js/events/participant-events#participant-left) event
</ParamField>

<ParamField type="Function">
  Callback for the [`participant-updated`](/reference/daily-js/events/participant-events#participant-updated) event
</ParamField>

## Return value

Returns an `Object | null` containing detailed information about the participant. See [participant properties](/reference/daily-js/types/daily-participant). If no participant is found for a given `session_id`, `useParticipant` returns `null`.

## Example

```jsx theme={null}
import { useParticipant } from '@daily-co/daily-react';

export const UseParticipantDemo = (params) => {
  const sessionID = params.session_id;
  const participant = useParticipant(sessionID);

  return <div>Participant {participant ? 'found' : 'not found'}</div>;
};
```

## See also

<CardGroup>
  <Card title="Hooks" icon="code">
    * [useParticipantProperty()](/reference/daily-react/use-participant-property)
    * [useLocalSessionId()](/reference/daily-react/use-local-session-id)
    * [useParticipantIds()](/reference/daily-react/use-participant-ids)
    * [useParticipantCounts()](/reference/daily-react/use-participant-counts)
    * [useActiveParticipant()](/reference/daily-react/use-active-participant)
    * [useActiveSpeakerId()](/reference/daily-react/use-active-speaker-id)
    * [useLocalParticipant()](/reference/daily-react/use-local-participant)
    * [useWaitingParticipants()](/reference/daily-react/use-waiting-participants)
  </Card>

  <Card title="Events" icon="bolt">
    * [participant-left](/reference/daily-js/events/participant-events#participant-left)
    * [participant-updated](/reference/daily-js/events/participant-events#participant-updated)
  </Card>
</CardGroup>


# useParticipantCounts
Source: https://docs.daily.co/reference/daily-react/use-participant-counts

useParticipantCounts is a convenience hook around the participantCounts() method.

`useParticipantCounts(): Object`

## Return value

Returns an object with the following properties:

<ResponseField name="present" type="number">
  Amount of participants where `hasPresence` is `true`
</ResponseField>

<ResponseField name="hidden" type="number">
  Amount of participants where `hasPresence` is `false`
</ResponseField>

## Example

```jsx theme={null}
import { useParticipantCounts } from '@daily-co/daily-react';

export const useParticipantCountsDemo = () => {
  const { present, hidden } = useParticipantCounts();

  return (
    <ul>
      <li>{present} participants with presence</li>
      <li>{hidden} participants without presence</li>
    </ul>
  );
};
```

## See also

<CardGroup>
  <Card title="Hooks" icon="code">
    * [useParticipantIds()](/reference/daily-react/use-participant-ids)
    * [useParticipant()](/reference/daily-react/use-participant)
    * [useParticipantProperty()](/reference/daily-react/use-participant-property)
    * [useLocalSessionId()](/reference/daily-react/use-local-session-id)
    * [useActiveParticipant()](/reference/daily-react/use-active-participant)
    * [useActiveSpeakerId()](/reference/daily-react/use-active-speaker-id)
    * [useLocalParticipant()](/reference/daily-react/use-local-participant)
    * [useWaitingParticipants()](/reference/daily-react/use-waiting-participants)
  </Card>

  <Card title="daily-js methods" icon="code">
    * [participantCounts()](/reference/daily-js/instance-methods/participant-counts)
  </Card>
</CardGroup>


# useParticipantIds
Source: https://docs.daily.co/reference/daily-react/use-participant-ids

useParticipantIds returns a list of participant ids based on optional parameters.

`useParticipantIds(params?): string[];`

Use it to render groups, grids, or lists of participant tiles.

If no parameters are provided, the `id`s of all participants in the call are returned.

## Parameters (optional)

An object with the following properties:

<ParamField type="string">
  `'local' | 'remote' | 'screen' | 'owner' | 'record' | FilterParticipantsFunction`, filters the list of participant `id`s according to the provided criteria

  <Expandable title="filter options">
    | Value                        | Type       | Description                                                                                                                                                                                      |
    | :--------------------------- | :--------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
    | `'local'`                    | `string`   | Returns only the `local` participant                                                                                                                                                             |
    | `'remote'`                   | `string`   | Returns remote participants, everybody but `local`                                                                                                                                               |
    | `'screen'`                   | `string`   | Returns participants with active screen shares                                                                                                                                                   |
    | `'owner'`                    | `string`   | Returns participants who joined the call with a meeting token that has the `is_owner` [property](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties-is-owner) set to `true` |
    | `FilterParticipantsFunction` | `Function` | Specifies custom filtering for the list of `id`s. The full Daily [participant object](/reference/daily-js/instance-methods/participants) can be referenced                                       |

    <Note>
      String-based filters can be directly calculated from our internal state store and therefore provide a better render performance than a custom filter that needs to be evaluated at runtime.
    </Note>
  </Expandable>
</ParamField>

<ParamField type="Function">
  Callback for the [`active-speaker-change`](/reference/daily-js/events/participant-events#active-speaker-change) event
</ParamField>

<ParamField type="Function">
  Callback for the [`participant-joined`](/reference/daily-js/events/participant-events#participant-joined) event
</ParamField>

<ParamField type="Function">
  Callback for the [`participant-left`](/reference/daily-js/events/participant-events#participant-left) event
</ParamField>

<ParamField type="Function">
  Callback for the [`participant-updated`](/reference/daily-js/events/participant-events#participant-updated) event
</ParamField>

<ParamField type="string">
  `'joined_at' | 'session_id' | 'user_id' | 'user_name' | SortParticipantsFunction`, sorts the list of participant `id`s according to the provided criteria

  <Expandable title="sort options">
    | Value                      | Type       | Description                                                                                                                                              |
    | :------------------------- | :--------- | :------------------------------------------------------------------------------------------------------------------------------------------------------- |
    | `'joined_at'`              | `string`   | Sorts by when participants joined the call in ascending order.                                                                                           |
    | `'session_id'`             | `string`   | Sorts by participant `session_id`s                                                                                                                       |
    | `'user_id'`                | `string`   | Sorts by participant `user_id`s                                                                                                                          |
    | `'user_name'`              | `string`   | Sorts in alphabetical order by participant `user_name`                                                                                                   |
    | `SortParticipantsFunction` | `Function` | Specifies custom sorting for the list of `id`s. The full Daily [participant object](/reference/daily-js/instance-methods/participants) can be referenced |

    <Note>
      String-based sorting can be directly calculated from our internal state store and therefore provide a better render performance than a custom sort function that needs to be evaluated at runtime.
    </Note>
  </Expandable>
</ParamField>

```json theme={null}
{
  "filter": "remote",
  "onActiveSpeakerChange": <Function>,
  "onParticipantJoined": <Function>,
  "onparticipantUpdated": <Function>,
  "sort": "joined_at",
}
```

## Return value

Returns a `string[]` — an array of participant `id`s.

## Example

```jsx theme={null}
import { useParticipant, useParticipantIds } from '@daily-co/daily-react';
import { useMemo } from 'react';

export const UseParticipantIdsDemo = () => {
  const participantIDs = useParticipantIds({ sort: 'joined_at' });
  const latestParticipantID = useMemo(
    () => participantIDs?.[participantIDs.length - 1],
    [participantIDs]
  );
  const latestParticipant = useParticipant(latestParticipantID);

  return (
    <div>Latest participant: {latestParticipant?.user_name ?? 'none'}</div>
  );
};
```

## See also

<CardGroup>
  <Card title="Hooks" icon="code">
    * [useParticipant()](/reference/daily-react/use-participant)
    * [useParticipantProperty()](/reference/daily-react/use-participant-property)
    * [useLocalSessionId()](/reference/daily-react/use-local-session-id)
    * [useParticipantCounts()](/reference/daily-react/use-participant-counts)
    * [useActiveParticipant()](/reference/daily-react/use-active-participant)
    * [useActiveSpeakerId()](/reference/daily-react/use-active-speaker-id)
    * [useLocalParticipant()](/reference/daily-react/use-local-participant)
    * [useWaitingParticipants()](/reference/daily-react/use-waiting-participants)
  </Card>

  <Card title="Events" icon="bolt">
    * [participant-joined](/reference/daily-js/events/participant-events#participant-joined)
    * [participant-left](/reference/daily-js/events/participant-events#participant-left)
    * [participant-updated](/reference/daily-js/events/participant-events#participant-updated)
    * [active-speaker-change](/reference/daily-js/events/participant-events#active-speaker-change)
  </Card>
</CardGroup>


# useParticipantProperty
Source: https://docs.daily.co/reference/daily-react/use-participant-property

useParticipantProperty returns the requested property belonging to any given session_id.

`useParticipantProperty(sessionId: string, propertyPath: string | string[]): participant[propertyPath]`

Use this hook instead of [`useParticipant`](/reference/daily-react/use-participant) when you only need to subscribe to a small subset of participant properties to optimize for React render cycles. `useParticipant` triggers a re-render when any property in the requested participant object changes. `useParticipantProperty` only triggers a re-render when the selected property changes.

## Parameters

<ParamField type="string">
  A unique identifier for the participant
</ParamField>

<ParamField type="string | string[]">
  The path to a desired participant property, in relation to the parent participant object. Eg: `"tracks.audio.subscribed"`
</ParamField>

## Return value

Returns the value of the requested property (`typeof participant[propertyPath]`), which will be the type of the requested property.

## Example

```jsx theme={null}
import {
  useLocalSessionId,
  useParticipantProperty,
} from '@daily-co/daily-react';

export const ParticipantPropertyExample = () => {
  const localSessionId = useLocalSessionId();
  const userName = useParticipantProperty(localSessionId, 'user_name');

  // Accessing nested properties
  const isParticipantAudioSubscribed = useParticipantProperty(
    'participant-session-id',
    'tracks.audio.subscribed'
  );

  // Requesting multiple properties
  const [isLocalOwner, localUserName] = useParticipantProperty(localSessionId, [
    'owner',
    'user_name',
  ]);

  console.log(isLocalOwner); // true;
  console.log(localUserName); // 'my_username';

  return (
    <div>
      {userName} is {isParticipantAudioSubscribed ? '' : 'not'} subscribed
    </div>
  );
};
```

## See also

<CardGroup>
  <Card title="Hooks" icon="code">
    * [useParticipant()](/reference/daily-react/use-participant)
    * [useLocalSessionId()](/reference/daily-react/use-local-session-id)
    * [useParticipantIds()](/reference/daily-react/use-participant-ids)
    * [useParticipantCounts()](/reference/daily-react/use-participant-counts)
    * [useActiveParticipant()](/reference/daily-react/use-active-participant)
    * [useActiveSpeakerId()](/reference/daily-react/use-active-speaker-id)
    * [useLocalParticipant()](/reference/daily-react/use-local-participant)
    * [useWaitingParticipants()](/reference/daily-react/use-waiting-participants)
  </Card>
</CardGroup>


# usePermissions
Source: https://docs.daily.co/reference/daily-react/use-permissions

usePermissions is a convenience hook to access the local participant's permissions.

`usePermissions(sessionId?: string): Object`

## Parameters

<ParamField type="string">
  A unique identifier for the participant
</ParamField>

## Return value

Returns an object with the following properties:

<ResponseField name="canSendAudio" type="boolean">
  `true` in case the local participant's `permissions.canSend` is `true`, or includes `'audio'`
</ResponseField>

<ResponseField name="canSendVideo" type="boolean">
  `true` in case the local participant's `permissions.canSend` is `true`, or includes `'video'`
</ResponseField>

<ResponseField name="canSendCustomAudio" type="boolean">
  `true` in case the local participant's `permissions.canSend` is `true`, or includes `'customAudio'`
</ResponseField>

<ResponseField name="canSendCustomVideo" type="boolean">
  `true` in case the local participant's `permissions.canSend` is `true`, or includes `'customVideo'`
</ResponseField>

<ResponseField name="canSendScreenAudio" type="boolean">
  `true` in case the local participant's `permissions.canSend` is `true`, or includes `'screenAudio'`
</ResponseField>

<ResponseField name="canSendScreenVideo" type="boolean">
  `true` in case the local participant's `permissions.canSend` is `true`, or includes `'screenVideo'`
</ResponseField>

<ResponseField name="hasPresence" type="boolean">
  `true` in case the local participant's `permissions.hasPresence` is `true`
</ResponseField>

<ResponseField name="canAdminParticipants" type="boolean">
  `true` in case the local participant's `permissions.canAdmin` is `true`, or includes `'participants'`
</ResponseField>

<ResponseField name="canAdminStreaming" type="boolean">
  `true` in case the local participant's `permissions.canAdmin` is `true`, or includes `'streaming'`
</ResponseField>

<ResponseField name="canAdminTranscription" type="boolean">
  `true` in case the local participant's `permissions.canAdmin` is `true`, or includes `'transcription'`
</ResponseField>

<ResponseField name="permissions" type="Object">
  The local participant's `permissions` object, as returned from [`participants()`](/reference/daily-js/instance-methods/participants)
</ResponseField>

## Example

```jsx theme={null}
import { usePermissions } from '@daily-co/daily-react';

export const usePermissionsDemo = () => {
  const { canSendAudio, canSendVideo } = usePermissions();

  return (
    <ul>
      <li>{canSendAudio ? 'can' : 'cannot'} send audio</li>
      <li>{canSendVideo ? 'can' : 'cannot'} send video</li>
    </ul>
  );
};
```

## See also

<CardGroup>
  <Card title="Hooks" icon="code">
    * [useParticipant()](/reference/daily-react/use-participant)
    * [useLocalSessionId()](/reference/daily-react/use-local-session-id)
  </Card>

  <Card title="daily-js methods" icon="code">
    * [participants()](/reference/daily-js/instance-methods/participants)
  </Card>
</CardGroup>


# useReceiveSettings
Source: https://docs.daily.co/reference/daily-react/use-receive-settings

Convenience hook around getReceiveSettings() and updateReceiveSettings().

`useReceiveSettings(params?) : Object`

## Parameters (optional)

<ParamField type="string">
  A unique identifier for the participant, defaults to `base` to return the base `receiveSettings`.
</ParamField>

<ParamField type="Function">
  Callback for the [`receive-settings-updated`](/reference/daily-js/events/settings-events#receive-settings-updated) event.
</ParamField>

## Return value

An object with the following properties:

<ResponseField name="receiveSettings" type="Object">
  The receive settings for the participant. See `daily-js` instance method [`updateReceiveSettings()`](/reference/daily-js/instance-methods/update-receive-settings) for an overview of receive settings.
</ResponseField>

<ResponseField name="updateReceiveSettings" type="Function">
  Updates receive settings, equivalent to calling the `daily-js` [`updateReceiveSettings()`](/reference/daily-js/instance-methods/update-receive-settings) method.
</ResponseField>

<Warning>
  Any calls to `updateReceiveSettings()` before the meeting is joined will be silently ignored.
</Warning>

## Example

```jsx theme={null}
import { useReceiveSettings } from '@daily-co/daily-react';

export const UseReceiveSettingsDemo = () => {
  const receiveSettings = useReceiveSettings();

  return (
    <div>Receiving video layer {receiveSettings?.video?.layer ?? 'N/A'}</div>
  );
};
```

## See also

<CardGroup>
  <Card title="daily-js methods" icon="code">
    * [getReceiveSettings()](/reference/daily-js/instance-methods/get-receive-settings)
    * [updateReceiveSettings()](/reference/daily-js/instance-methods/update-receive-settings)
  </Card>

  <Card title="Events" icon="bolt">
    * [receive-settings-updated](/reference/daily-js/events/settings-events#receive-settings-updated)
  </Card>
</CardGroup>


# useRecording
Source: https://docs.daily.co/reference/daily-react/use-recording

useRecording returns the state and information of a recording in progress, along with helper functions for daily-js recording methods.

<Badge>Paid plans only</Badge>

`useRecording(params?): Object`

Accepts optional callbacks for [recording events](/reference/daily-js/events/recording-events).

When multiple recordings are running concurrently (see [multi-instance recording](/docs/guides/features/live-streaming/multi-instance)), you can pass an `instanceId` to get per-instance state. Without `instanceId`, the hook returns aggregate state across all instances. For a list of all active instances, see [`useRecordingInstances`](/reference/daily-react/use-recording-instances).

## Parameters (optional)

An object with the following properties:

<ParamField type="string">
  A valid UUID. When provided, returns state for a specific recording instance and filters event callbacks to only fire for that instance. See [multi-instance recording](/docs/guides/features/live-streaming/multi-instance).
</ParamField>

<ParamField type="Function">
  Callback for the [`recording-error`](/reference/daily-js/events/recording-events#recording-error) event.
</ParamField>

<ParamField type="Function">
  Callback for the [`recording-started`](/reference/daily-js/events/recording-events#recording-started) event.
</ParamField>

<ParamField type="Function">
  Callback for the [`recording-stopped`](/reference/daily-js/events/recording-events#recording-stopped) event.
</ParamField>

## Return value

An object with the following properties:

### Without `instanceId` (aggregate state)

When called without `instanceId`, the hook returns aggregate state across all recording instances. This works well for single-instance use cases — the scalar fields (`layout`, `recordingId`, etc.) reflect the only active instance. With multiple concurrent instances, these fields reflect the first active instance; use `useRecording({ instanceId })` for unambiguous per-instance access.

<ResponseField name="error" type="boolean">
  `true` if any instance has a [`recording-error`](/reference/daily-js/events/recording-events#recording-error). With multiple instances, use `useRecording({ instanceId })` for per-instance error state.
</ResponseField>

<ResponseField name="isLocalParticipantRecorded" type="boolean">
  `true` if the local participant is recorded by any instance.
</ResponseField>

<ResponseField name="isRecording" type="boolean">
  `true` if any recording instance is active.
</ResponseField>

<ResponseField name="layout" type="Object">
  Layout of the first active instance. With multiple instances, use `useRecording({ instanceId })` for per-instance layout.
</ResponseField>

<ResponseField name="local" type="boolean">
  `true` for [`local` recordings](/docs/guides/features/recording/index#local).
</ResponseField>

<ResponseField name="recordingId" type="string">
  Recording ID of the first active instance. With multiple instances, use `useRecording({ instanceId })` for per-instance recording ID.
</ResponseField>

<ResponseField name="recordingStartedDate" type="Date">
  Start date of the first active instance. With multiple instances, use `useRecording({ instanceId })` for per-instance start date.
</ResponseField>

<ResponseField name="startedBy" type="string">
  Starter of the first active instance. With multiple instances, use `useRecording({ instanceId })` for per-instance starter.
</ResponseField>

<ResponseField name="startRecording" type="Function">
  See `daily-js` [`startRecording()`](/reference/daily-js/instance-methods/start-recording).
</ResponseField>

<ResponseField name="stopRecording" type="Function">
  See `daily-js` [`stopRecording()`](/reference/daily-js/instance-methods/stop-recording).
</ResponseField>

<ResponseField name="type" type="string">
  Recording type of the first active instance. With multiple instances, use `useRecording({ instanceId })` for per-instance type.
</ResponseField>

<ResponseField name="updateRecording" type="Function">
  See `daily-js` [`updateRecording()`](/reference/daily-js/instance-methods/update-recording).
</ResponseField>

### With `instanceId` (per-instance state)

When called with `instanceId`, the hook returns state for that specific recording instance only.

<ResponseField name="error" type="boolean">
  `true` if this instance has a recording error.
</ResponseField>

<ResponseField name="errorMsg" type="string">
  Error message for this instance, if any.
</ResponseField>

<ResponseField name="instanceId" type="string">
  The instance ID.
</ResponseField>

<ResponseField name="isLocalParticipantRecorded" type="boolean">
  Whether the local participant is recorded by this instance.
</ResponseField>

<ResponseField name="isRecording" type="boolean">
  Whether this instance is currently recording.
</ResponseField>

<ResponseField name="layout" type="Object">
  The [recording layout](/docs/guides/features/recording#customize-cloud-recording-layouts) for this instance.
</ResponseField>

<ResponseField name="local" type="boolean">
  `true` if this is a local recording.
</ResponseField>

<ResponseField name="recordingId" type="string">
  The recording ID for this instance.
</ResponseField>

<ResponseField name="recordingStartedDate" type="Date">
  When this instance started recording.
</ResponseField>

<ResponseField name="startedBy" type="string">
  Who started this recording instance.
</ResponseField>

<ResponseField name="startRecording" type="Function">
  See `daily-js` [`startRecording()`](/reference/daily-js/instance-methods/start-recording).
</ResponseField>

<ResponseField name="stopRecording" type="Function">
  See `daily-js` [`stopRecording()`](/reference/daily-js/instance-methods/stop-recording).
</ResponseField>

<ResponseField name="type" type="string">
  The recording type for this instance.
</ResponseField>

<ResponseField name="updateRecording" type="Function">
  See `daily-js` [`updateRecording()`](/reference/daily-js/instance-methods/update-recording).
</ResponseField>

## Example

### Basic usage

```jsx theme={null}
import { useRecording } from '@daily-co/daily-react';

export const UseRecordingDemo = () => {
  const recording = useRecording();

  return <div>{!recording.isRecording ? 'Not' : ''} recording</div>;
};
```

### Multi-instance usage

```jsx theme={null}
import { useRecording } from '@daily-co/daily-react';
import { useRecordingInstances } from '@daily-co/daily-react';

// instanceId must be a valid UUID
const PORTRAIT_INSTANCE = 'a1b2c3d4-5678-9abc-def0-1234567890ab';
const LANDSCAPE_INSTANCE = 'b2c3d4e5-6789-abcd-ef01-234567890abc';

export const MultiRecordingDemo = () => {
  // Aggregate state: true if any instance is recording
  const { isRecording } = useRecording();

  // Per-instance state
  const portraitRecording = useRecording({
    instanceId: PORTRAIT_INSTANCE,
  });
  const landscapeRecording = useRecording({
    instanceId: LANDSCAPE_INSTANCE,
  });

  return (
    <div>
      <p>Any recording active: {isRecording ? 'Yes' : 'No'}</p>
      <p>Portrait: {portraitRecording.isRecording ? 'Recording' : 'Idle'}</p>
      <p>Landscape: {landscapeRecording.isRecording ? 'Recording' : 'Idle'}</p>
    </div>
  );
};
```

## See also

<CardGroup>
  <Card title="Hooks" icon="code">
    * [useRecordingInstances()](/reference/daily-react/use-recording-instances)
  </Card>

  <Card title="daily-js methods" icon="code">
    * [startRecording()](/reference/daily-js/instance-methods/start-recording)
    * [stopRecording()](/reference/daily-js/instance-methods/stop-recording)
    * [updateRecording()](/reference/daily-js/instance-methods/update-recording)
  </Card>

  <Card title="Events" icon="bolt">
    * [recording-started](/reference/daily-js/events/recording-events#recording-started)
    * [recording-stopped](/reference/daily-js/events/recording-events#recording-stopped)
    * [recording-error](/reference/daily-js/events/recording-events#recording-error)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Multi-instance live streaming and recording](/docs/guides/features/live-streaming/multi-instance)
  </Card>
</CardGroup>


# useRecordingInstances
Source: https://docs.daily.co/reference/daily-react/use-recording-instances

useRecordingInstances returns an array of all recording instance states.

<Badge>Paid plans only</Badge>

`useRecordingInstances(): RecordingInstanceState[]`

This is useful when working with [multi-instance recording](/docs/guides/features/live-streaming/multi-instance) to enumerate and display all active (and recently stopped) recording instances.

## Return value

An array of `RecordingInstanceState` objects, each with the following properties:

<ResponseField name="error" type="boolean">
  `true` if this instance encountered a recording error.
</ResponseField>

<ResponseField name="errorMsg" type="string">
  Error message for this instance, if any.
</ResponseField>

<ResponseField name="instanceId" type="string">
  The unique identifier for this recording instance.
</ResponseField>

<ResponseField name="isLocalParticipantRecorded" type="boolean">
  Whether the local participant is recorded by this instance.
</ResponseField>

<ResponseField name="isRecording" type="boolean">
  Whether this instance is currently recording.
</ResponseField>

<ResponseField name="layout" type="Object">
  The recording layout configuration for this instance.
</ResponseField>

<ResponseField name="local" type="boolean">
  `true` if this is a local recording.
</ResponseField>

<ResponseField name="recordingId" type="string">
  The recording ID for this instance.
</ResponseField>

<ResponseField name="recordingStartedDate" type="Date">
  When this instance started recording.
</ResponseField>

<ResponseField name="startedBy" type="string">
  The session ID of the participant who started this recording.
</ResponseField>

<ResponseField name="type" type="string">
  The recording type (e.g., `'cloud'`, `'local'`).
</ResponseField>

## Example

```jsx theme={null}
import { useRecordingInstances } from '@daily-co/daily-react';

export const RecordingInstancesList = () => {
  const instances = useRecordingInstances();

  if (instances.length === 0) {
    return <div>No recordings</div>;
  }

  return (
    <ul>
      {instances.map((instance) => (
        <li key={instance.instanceId}>
          {instance.instanceId}:{' '}
          {instance.isRecording ? 'Recording' : 'Stopped'}
          {instance.layout?.preset && ` (${instance.layout.preset})`}
        </li>
      ))}
    </ul>
  );
};
```

## See also

<CardGroup>
  <Card title="Hooks" icon="code">
    * [useRecording()](/reference/daily-react/use-recording)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Multi-instance live streaming and recording guide](/docs/guides/features/live-streaming/multi-instance)
  </Card>
</CardGroup>


# useRoom
Source: https://docs.daily.co/reference/daily-react/use-room

useRoom is a convenience hook for the Daily room() method.

`useRoom() : Object | null`

Returns [room](/reference/rest-api/rooms/get-room#response-config), [domain](/reference/rest-api/domain), and [token](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties) configuration properties, or `null` if no room has been set for the call.

## Return value

One of the following objects:

* An object detailing information about the [room](/reference/rest-api/rooms/get-room#response-config) that has been specified, but not yet joined
* An object detailing information about the current Daily [room](/reference/rest-api/rooms/get-room#response-config)

For the full shape of the returned object, see [`room()`](/reference/daily-js/instance-methods/room).

## Example

```jsx theme={null}
import { useRoom } from '@daily-co/daily-react';

export const RoomName = () => {
  const room = useRoom();

  return <div>Room name: {room?.name}</div>;
};
```

## See also

<CardGroup>
  <Card title="daily-js methods" icon="code">
    * [room()](/reference/daily-js/instance-methods/room)
  </Card>

  <Card title="REST APIs" icon="server">
    * [Rooms](/reference/rest-api/rooms/get-room)
    * [Meeting tokens](/reference/rest-api/meeting-tokens/create-meeting-token)
    * [Domain](/reference/rest-api/domain)
  </Card>
</CardGroup>


# useRoomExp
Source: https://docs.daily.co/reference/daily-react/use-room-exp

Returns the automatic ejection date for the local participant, based on room or token configuration properties eject_after_elapsed, eject_at_room_exp and exp.

`useRoomExp(params?): Object`

The ejection date is derived from room or token configuration: [`eject_after_elapsed`](/reference/rest-api/rooms/get-room#body-properties-eject-after-elapsed), [`eject_at_room_exp`](/reference/rest-api/rooms/get-room#body-properties-eject-at-room-exp), and [`exp`](/reference/rest-api/rooms/get-room#response-config-exp). The optional `onCountdown` callback fires every second with the remaining `hours`, `minutes`, and `seconds`.

## Parameters (optional)

<ParamField type="Function">
  When `onCountdown` is set and the room is configured to eject the local participant at a given time, `onCountdown` will be called every second with an object parameter with keys `hours`, `minutes` and `seconds`.
</ParamField>

## Return value

An object with the following properties:

<ResponseField name="ejectDate" type="Date | null">
  The date when the local participant will be automatically ejected from the meeting.
</ResponseField>

```json theme={null}
{
  "ejectDate": "Wed Jul 26 2023 09:48:42 GMT+0200 (Central European Summer Time)"
}
```

## Example

```jsx theme={null}
import { useRoomExp } from '@daily-co/daily-react';
import { useCallback, useState } from 'react';

export const UseRoomExpDemo = () => {
  const [countdown, setCountdown] = useState('');
  const { ejectDate } = useRoomExp({
    onCountdown: useCallback(({ hours, minutes, seconds }) => {
      if (hours > 0) return;
      setCountdown(`${minutes}:${seconds.toString().padStart(2, '0')}`);
    }, []),
  });

  return (
    <div>
      Meeting ends in {countdown} (at {ejectDate.toISOString()})
    </div>
  );
};
```

## See also

<CardGroup>
  <Card title="daily-js methods" icon="code">
    * [room()](/reference/daily-js/instance-methods/room)
  </Card>

  <Card title="REST APIs" icon="server">
    * [Get room (eject\_after\_elapsed)](/reference/rest-api/rooms/get-room#body-properties-eject-after-elapsed)
    * [Get room (eject\_at\_room\_exp)](/reference/rest-api/rooms/get-room#body-properties-eject-at-room-exp)
    * [Meeting tokens (exp)](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties-exp)
  </Card>
</CardGroup>


# useScreenShare
Source: https://docs.daily.co/reference/daily-react/use-screen-share

Returns a list of running screen shares and their states, along with helper methods that wrap daily-js screen share events.

`useScreenShare(params?): Object`

`useScreenShare` can also be used to set up optional callbacks for the `local-screen-share-started` and `local-screen-share-stopped` events.

## Parameters (optional)

An object with the following properties:

<ParamField type="Function">
  Callback for the [`nonfatal-error` event with type `'screen-share-error'`](/reference/daily-js/events/error-events#screen-share-error).
</ParamField>

<ParamField type="Function">
  Callback for the [`local-screen-share-started`](/reference/daily-js/events/media-events#local-screen-share-started) event.
</ParamField>

<ParamField type="Function">
  Callback for the [`local-screen-share-stopped`](/reference/daily-js/events/media-events#local-screen-share-stopped) event.
</ParamField>

## Return value

An object with the following properties:

<ResponseField name="isSharingScreen" type="boolean">
  Indicates whether the local user is sharing a screen.
</ResponseField>

<ResponseField name="screens" type="Array">
  Array of screen share objects.

  <Expandable title="screens properties">
    <ResponseField name="audio" type="Object">
      Track state for associated `screenAudio`, see `tracks` [properties](/reference/daily-js/types/daily-track-state) for details.
    </ResponseField>

    <ResponseField name="local" type="boolean">
      Indicates if this is a local screen share.
    </ResponseField>

    <ResponseField name="screen_id" type="string">
      Unique identifier for the screen.
    </ResponseField>

    <ResponseField name="session_id" type="string">
      Unique identifier for the participant screen sharing.
    </ResponseField>

    <ResponseField name="video" type="Object">
      Track state for associated `screenVideo`, see `tracks` [properties](/reference/daily-js/types/daily-track-state) for details.
    </ResponseField>
  </Expandable>
</ResponseField>

<ResponseField name="startScreenShare" type="Function">
  See [`startScreenShare()`](/reference/daily-js/instance-methods/start-screen-share).
</ResponseField>

<ResponseField name="stopScreenShare" type="Function">
  See [`stopScreenShare()`](/reference/daily-js/instance-methods/stop-screen-share).
</ResponseField>

```json theme={null}
{
  "isSharingScreen": false,
  "screens": [{
    "audio": <Object>,
    "local": true,
    "screen_id": "25bfe2e4-3a3d-4c6f-b877-392ce7c998e4-screen",
    "session_id": "25bfe2e4-3a3d-4c6f-b877-392ce7c998e4",
    "video": <Object>,
  }],
  "startScreenShare": <Function>,
  "stopScreenShare": <Function>,
}
```

## Example

```jsx theme={null}
import { useScreenShare } from '@daily-co/daily-react';

export const UseScreenShareDemo = () => {
  const state = useScreenShare();

  return <div>Sharing Screen: {state?.isSharingScreen}</div>;
};
```

## See also

<CardGroup>
  <Card title="daily-js methods" icon="code">
    * [startScreenShare()](/reference/daily-js/instance-methods/start-screen-share)
    * [stopScreenShare()](/reference/daily-js/instance-methods/stop-screen-share)
  </Card>

  <Card title="Events" icon="bolt">
    * [local-screen-share-started](/reference/daily-js/events/media-events#local-screen-share-started)
    * [local-screen-share-stopped](/reference/daily-js/events/media-events#local-screen-share-stopped)
    * [nonfatal-error (screen-share-error)](/reference/daily-js/events/error-events#screen-share-error)
  </Card>
</CardGroup>


# useSendSettings
Source: https://docs.daily.co/reference/daily-react/use-send-settings

useSendSettings is a convenience hook around getSendSettings() and updateSendSettings().

`useSendSettings(params?): Object`

Use this hook to configure [simulcast layer](https://www.daily.co/blog/simulcast) encodings and control which layers a client publishes. See [`updateSendSettings()`](/reference/daily-js/instance-methods/update-send-settings) for the full options.

## Parameters (optional)

<ParamField type="Function">
  Callback for the [`'send-settings-updated'`](/reference/daily-js/events/settings-events#send-settings-updated) event.
</ParamField>

## Return value

Returns an object with the following properties:

<ResponseField name="sendSettings" type="DailySendSettings | null">
  The send settings for the participant. See `daily-js` instance method [`getSendSettings()`](/reference/daily-js/instance-methods/get-send-settings) for an overview.
</ResponseField>

<ResponseField name="updateSendSettings" type="Function">
  Updates send settings, equivalent to calling the `daily-js` [`updateSendSettings()`](/reference/daily-js/instance-methods/update-send-settings) method.
</ResponseField>

## Example

```jsx theme={null}
import { useSendSettings } from '@daily-co/daily-react';

export const SendSettings = () => {
  const { sendSettings } = useSendSettings();
  return (
    <div>
      <strong>Current send settings</strong>
      <pre>{JSON.stringify(sendSettings, null, 2)}</pre>
    </div>
  );
};
```

## See also

<CardGroup>
  <Card title="daily-js methods" icon="code">
    * [getSendSettings()](/reference/daily-js/instance-methods/get-send-settings)
    * [updateSendSettings()](/reference/daily-js/instance-methods/update-send-settings)
  </Card>

  <Card title="Events" icon="bolt">
    * [send-settings-updated](/reference/daily-js/events/settings-events#send-settings-updated)
  </Card>
</CardGroup>


# useThrottledDailyEvent
Source: https://docs.daily.co/reference/daily-react/use-throttled-daily-event

Registers daily-js event listeners.

`useThrottledDailyEvent(params): void`

Listeners are automatically torn down when the calling component or hook unmounts. Unlike [`useDailyEvent`](/reference/daily-react/use-daily-event), the callback receives an array of all events accumulated during the throttle window. The queue is cleared when `daily-js` emits `'call-instance-destroyed'`.

## Parameters

<ParamField type="string | string[]">
  The `daily-js` [event(s)](/reference/daily-js/events) to register.
</ParamField>

<ParamField type="Function">
  A memoized callback reference to run when the event(s) get emitted.
</ParamField>

<ParamField type="integer">
  The minimum waiting time until the callback is called again.
</ParamField>

<Warning>
  The `callback` param has to be a memoized reference (e.g. via [`useCallback`](https://reactjs.org/docs/hooks-reference.html#usecallback)). Otherwise a console error might be thrown indicating a re-render loop.
</Warning>

## Return value

`void`

## Example

```jsx theme={null}
import { useThrottledDailyEvent } from '@daily-co/daily-react';
import { useCallback, useState } from 'react';

export const DailyEventDemo = () => {
  const [hasEmmaJoined, setHasEmmaJoined] = useState(false);

  useThrottledDailyEvent(
    'participant-joined',
    useCallback((evts) => {
      if (evts.some(({ participant }) => participant.user_name === 'Emma')) {
        setHasEmmaJoined(true);
      }
    }, [])
  );
  return <div>Is Emma there yet? {hasEmmaJoined ? 'Yes!' : 'No.'}</div>;
};
```

## Example for multiple events

```jsx theme={null}
import { useThrottledDailyEvent } from '@daily-co/daily-react';
import { useCallback, useState } from 'react';

export const DailyEventDemo = () => {
  const [count, setCount] = useState(0);
  useThrottledDailyEvent(
    ['participant-joined', 'participant-left'],
    useCallback((events) => {
      setCount((c) => {
        let i = c;
        events.forEach((event) => {
          switch (event.action) {
            case 'participant-joined':
              i++;
              break;
            case 'participant-left':
              i--;
              break;
          }
        });
        return i;
      });
    }, [])
  );
  return (
    <div>
      {count === 1
        ? 'There is 1 person in the call'
        : `There are ${count} people in the call.`}
    </div>
  );
};
```

## See also

<CardGroup>
  <Card title="Hooks" icon="code">
    * [useDailyEvent()](/reference/daily-react/use-daily-event)
  </Card>
</CardGroup>


# useTranscription
Source: https://docs.daily.co/reference/daily-react/use-transcription

Returns information about a meeting's current transcription state, along with helper functions that wrap daily-js transcription related methods.

`useTranscription(params?) : Object`

`useTranscription` can also be used to set up optional callbacks for transcription [events](/reference/daily-js/events/transcription-events).

## Parameters (optional)

An object with the following optional properties:

<ParamField type="Function">
  Callback for the [`"transcription-error"`](/reference/daily-js/events/transcription-events#transcription-error) event.
</ParamField>

<ParamField type="Function">
  Callback for the [`"transcription-message"`](/reference/daily-js/events/transcription-events#transcription-message) event.
</ParamField>

<ParamField type="Function">
  Callback for the [`"transcription-started"`](/reference/daily-js/events/transcription-events#transcription-started) event.
</ParamField>

<ParamField type="Function">
  Callback for the [`"transcription-stopped"`](/reference/daily-js/events/transcription-events#transcription-stopped) event.
</ParamField>

<ParamField type="Function">
  <Badge>Deprecated 0.18.0</Badge> Callback for the [`"app-message"`](/reference/daily-js/events/messaging-events#app-message) event from transcription. This parameter is deprecated; use `onTranscriptionMessage` instead.
</ParamField>

## Return value

An object with the following properties:

<ResponseField name="error" type="boolean">
  `true` in the event of a [`"transcription-error"`](/reference/daily-js/events/transcription-events#transcription-error).
</ResponseField>

<ResponseField name="isTranscribing" type="boolean">
  Returns `true` after transcription has started.
</ResponseField>

<ResponseField name="language" type="string">
  Returns the language applied for the transcription. Please check Deepgram's [language](https://developers.deepgram.com/documentation/features/language/) docs for details.
</ResponseField>

<ResponseField name="model" type="string">
  Returns the model applied for transcription. Please check Deepgram's [model](https://developers.deepgram.com/documentation/features/model/) docs for more details.
</ResponseField>

<ResponseField name="profanity_filter" type="boolean">
  Returns `true` when profanity filter is enabled. Please check Deepgram's [profanity filter](https://developers.deepgram.com/documentation/features/profanity-filter/) docs for more details.
</ResponseField>

<ResponseField name="redact" type="boolean | array">
  Returns the redaction applied for transcription. Please check Deepgram's [redaction](https://developers.deepgram.com/documentation/features/redact/) docs for more details.
</ResponseField>

<ResponseField name="startedBy" type="string">
  Returns the `session_id` for the participant who initiated the transcription.
</ResponseField>

<ResponseField name="startTranscription" type="Function">
  See `daily-js` [`startTranscription()`](/reference/daily-js/instance-methods/start-transcription).
</ResponseField>

<ResponseField name="stopTranscription" type="Function">
  See `daily-js` [`stopTranscription()`](/reference/daily-js/instance-methods/stop-transcription).
</ResponseField>

<ResponseField name="tier" type="string">
  This field is deprecated, use `model` instead.
</ResponseField>

<ResponseField name="transcriptions" type="Transcription[]">
  Array of `Transcription` object. See [Transcription](/reference/daily-js/instance-methods/start-transcription) for more information.
</ResponseField>

<ResponseField name="transcriptionStartDate" type="Date">
  Timestamp for when the transcription started.
</ResponseField>

<ResponseField name="updatedBy" type="string">
  Returns the `session_id` for the participant who updated the transcription most recently.
</ResponseField>

```json theme={null}
{
  "error": false,
  "isTranscribing": true,
  "language": "en",
  "model": "nova-2-general",
  "profanity_filter": false,
  "redact": "false",
  "startedBy": "0e92c476-3d2f-4ddc-b814-9447cd7e3b90",
  "startTranscription": <Function>,
  "stopTranscription": <Function>,
  "transcriptions": <Object>,
  "transcriptionStartDate": "Mon Sept 05 2022 10:33:30 GMT+0200 (Central European Summer Time)",
  "updatedBy": "0e92c476-3d2f-4ddc-b814-9447cd7e3b90"
}
```

## Example

```jsx theme={null}
import { useTranscription } from '@daily-co/daily-react';

export const useTranscriptionDemo = () => {
  const { isTranscribing } = useTranscription();

  return <div>{!isTranscribing ? 'Not' : ''} transcribing</div>;
};
```

## See also

<CardGroup>
  <Card title="daily-js methods" icon="code">
    * [startTranscription()](/reference/daily-js/instance-methods/start-transcription)
    * [stopTranscription()](/reference/daily-js/instance-methods/stop-transcription)
  </Card>

  <Card title="Events" icon="bolt">
    * [transcription-started](/reference/daily-js/events/transcription-events#transcription-started)
    * [transcription-stopped](/reference/daily-js/events/transcription-events#transcription-stopped)
    * [transcription-error](/reference/daily-js/events/transcription-events#transcription-error)
    * [transcription-message](/reference/daily-js/events/transcription-events#transcription-message)
  </Card>
</CardGroup>


# useWaitingParticipants
Source: https://docs.daily.co/reference/daily-react/use-waiting-participants

Returns an object containing an array of all participants waiting for access to the call, along with methods to grant or deny access.

`useWaitingParticipants(params?): Object`

`useWaitingParticipants` can also be used to set up optional callbacks for [`waiting-participant-added`](/reference/daily-js/events/participant-events#waiting-participant-added), [`waiting-participant-updated`](/reference/daily-js/events/participant-events#waiting-participant-updated), and [`waiting-participant-removed`](/reference/daily-js/events/participant-events#waiting-participant-removed) events.

## Parameters (optional)

An object with the following properties:

<ParamField type="Function">
  Callback for the [`waiting-participant-added`](/reference/daily-js/events/participant-events#waiting-participant-added) event.
</ParamField>

<ParamField type="Function">
  Callback for the [`waiting-participant-updated`](/reference/daily-js/events/participant-events#waiting-participant-updated) event.
</ParamField>

<ParamField type="Function">
  Callback for the [`waiting-participant-removed`](/reference/daily-js/events/participant-events#waiting-participant-removed) event.
</ParamField>

## Return value

An object with the following properties:

<ResponseField name="waitingParticipants" type="Object[]">
  Details waiting participants, see [`waitingParticipants()`](/reference/daily-js/instance-methods/waiting-participants).
</ResponseField>

<ResponseField name="grantAccess" type="Function">
  Can be used to admit entry to waiting participants. Accepts `'*'` to admit all participants, or a `string` `session_id` to admit a specific participant.
</ResponseField>

<ResponseField name="denyAccess" type="Function">
  Can be used to deny entry to waiting participants. Accepts `'*'` to deny all participants, or a `string` `session_id` to deny a specific participant.
</ResponseField>

## Example

```jsx theme={null}
import { useWaitingParticipants } from '@daily-co/daily-react';

export const UseWaitingParticipantsDemo = () => {
  const { waitingParticipants } = useWaitingParticipants();

  return <div>Waiting participants: {waitingParticipants.length}</div>;
};
```

## See also

<CardGroup>
  <Card title="Hooks" icon="code">
    * [useParticipant()](/reference/daily-react/use-participant)
    * [useParticipantIds()](/reference/daily-react/use-participant-ids)
    * [useParticipantProperty()](/reference/daily-react/use-participant-property)
    * [useLocalSessionId()](/reference/daily-react/use-local-session-id)
    * [useParticipantCounts()](/reference/daily-react/use-participant-counts)
    * [useActiveParticipant()](/reference/daily-react/use-active-participant)
    * [useActiveSpeakerId()](/reference/daily-react/use-active-speaker-id)
    * [useLocalParticipant()](/reference/daily-react/use-local-participant)
  </Card>

  <Card title="daily-js methods" icon="code">
    * [waitingParticipants()](/reference/daily-js/instance-methods/waiting-participants)
    * [updateWaitingParticipant()](/reference/daily-js/instance-methods/update-waiting-participant)
  </Card>

  <Card title="Events" icon="bolt">
    * [waiting-participant-added](/reference/daily-js/events/participant-events#waiting-participant-added)
    * [waiting-participant-updated](/reference/daily-js/events/participant-events#waiting-participant-updated)
    * [waiting-participant-removed](/reference/daily-js/events/participant-events#waiting-participant-removed)
  </Card>
</CardGroup>


# Daily.createCallObject()
Source: https://docs.daily.co/reference/react-native/daily-call-client/create-call-object

Creates a headless DailyCall instance for building fully custom call UIs with direct access to media tracks and WebRTC primitives.

`Daily.createCallObject({ properties })`

Creates a headless [`DailyCall`](/reference/react-native/daily-call-client) instance. Daily manages WebRTC and media internally but renders no UI — use this when building a fully custom call interface with direct access to [`MediaStreamTrack`](https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack) objects and other WebRTC primitives.

## Parameters

<ParamField type="DailyCallOptions">
  Optional configuration. If `url` is not set here, it must be provided when calling [`join()`](/reference/react-native/instance-methods/join) or [`load()`](/reference/react-native/instance-methods/load). See [`DailyCallOptions`](/reference/react-native/types/daily-call-options) for the full list of options.
</ParamField>

## Return value

Returns a new [`DailyCall`](/reference/react-native/daily-call-client) instance.

## Example

```javascript theme={null}
const call = Daily.createCallObject({
  url: 'https://your-domain.daily.co/room-name',
  subscribeToTracksAutomatically: false,
});

await call.join();
```

<DuplicateCallObjectCallout method="Daily.createCallObject()" />

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyCallOptions](/reference/react-native/types/daily-call-options)
  </Card>

  <Card title="Methods" icon="code">
    * [join()](/reference/react-native/instance-methods/join)
    * [leave()](/reference/react-native/instance-methods/leave)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Call modes](/docs/daily-js/concepts/call-modes)
    * [Call configuration](/docs/daily-js/concepts/call-configuration)
  </Card>
</CardGroup>


# Daily Call Client
Source: https://docs.daily.co/reference/react-native/daily-call-client/index

The core object for managing a Daily video call in react-native-daily-js.

A Daily call client is the central object you interact with to manage a video call. It gives you control over the entire call lifecycle — joining and leaving, managing participants and their media, and reacting to call state changes through events.

## Creating a call client

Call clients are created using the [`createCallObject()`](/reference/react-native/daily-call-client/create-call-object) factory method. This creates a headless instance — Daily manages WebRTC and media, but renders no UI. Use this when you're building a fully custom call interface.

```javascript theme={null}
const call = Daily.createCallObject();
```

## Configuration

Configuration properties for your call client can be passed to the factory method at creation time,  to `join()`, or one of the initialization methods, `startCamera()`, `load()`, or `preAuth()`. See the [`DailyCallOptions` reference](/reference/react-native/types/daily-call-options) for a full list of options.

```javascript theme={null}
// At creation time
const call = Daily.createCallObject({
  dailyConfig: { experimentalChromeVideoMuteLightOff: true },
});

// At join time
await call.join({
  url: 'https://your-domain.daily.co/room-name',
  token: 'YOUR_MEETING_TOKEN',
  startVideoOff: true,
});
```

## Static methods

Static methods are called directly on `DailyIframe` (or `Daily`) without a call client instance. They include environment detection, version info, and the factory methods used to create a call client. See the [static methods reference](/reference/react-native/static-methods).

## Instance methods

Instance methods are called on a call client you've already created. They cover the full call lifecycle — joining and leaving, managing participants, controlling media, and more. See the [instance methods reference](/reference/react-native/instance-methods).

## Event handling

The call client is an event emitter. Use `.on()` and `.off()` to subscribe and unsubscribe:

```javascript theme={null}
call.on('joined-meeting', () => console.log('joined'));
call.on('participant-joined', (event) => console.log(event.participant));
call.on('left-meeting', () => call.destroy());
```

All events are documented in the [Events](/reference/react-native/events/lifecycle-events) reference.

## Running multiple call clients

It's possible to run more than one call client simultaneously. See the [multi-instance guide](/docs/daily-js/guides/multi-instance) for constraints and patterns.

## TypeScript

The underlying class is named `DailyIframe` for historical reasons, but the relevant TypeScript interface is `DailyCall`. All factory methods return a `DailyCall`.

```typescript theme={null}
import Daily, { DailyCall } from '@daily-co/react-native-daily-js';

const call: DailyCall = Daily.createCallObject();
```


# Error events
Source: https://docs.daily.co/reference/react-native/events/error-events

Events for fatal and non-fatal errors — connection failures, device errors, screen share issues, and processing warnings.

These events fire when fatal or non-fatal errors occur during a call.

***

## error

Fires when an unrecoverable error ends the call. A [`left-meeting`](/reference/react-native/events/lifecycle-events#left-meeting) event fires immediately after.

<ResponseField name="action" type="string">
  Always `"error"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="errorMsg" type="string">
  A human-readable description of the error.
</ResponseField>

<ResponseField name="error" type="object">
  Present when the error type is known. Always contains `type` and `msg`. When `type` is `'connection-error'`, also includes a `details` object — see below.

  | `type`             | Description                                                                                                                        |
  | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------- |
  | `ejected`          | The local participant was removed from the call by an owner.                                                                       |
  | `nbf-room`         | The room is not yet valid — current time is before the room's `nbf` (not-before) timestamp.                                        |
  | `nbf-token`        | The meeting token is not yet valid — current time is before the token's `nbf` timestamp.                                           |
  | `exp-room`         | The room has expired.                                                                                                              |
  | `exp-token`        | The meeting token has expired.                                                                                                     |
  | `no-room`          | The room does not exist.                                                                                                           |
  | `meeting-full`     | The room has reached its participant limit.                                                                                        |
  | `end-of-life`      | The daily-js version in use is no longer supported.                                                                                |
  | `not-allowed`      | The participant is not permitted to join this room (e.g. token or privacy settings).                                               |
  | `connection-error` | A network or infrastructure failure prevented or severed the connection. This is the only type with a structured `details` object. |
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "error",
  "errorMsg": "network unreachable",
  "callClientId": "17225364729060.9442072768918943",
  "error": {
    "type": "ejected",
    "msg": "You were removed from the call"
  }
}
```

```javascript theme={null}
call.on('error', ({ error }) => {
  if (error?.type === 'ejected') {
    showEjectedMessage();
  } else {
    showGenericErrorMessage(error?.msg);
  }
});
```

### connection-error details

When `error.type` is `'connection-error'`, an additional `details` object identifies where in the lifecycle the failure occurred:

<ResponseField name="details.on" type="string">
  Lifecycle stage where the failure occurred: `'load'`, `'join'`, `'reconnect'`, `'move'`, `'rtc-connection'`, or `'room-lookup'`.
</ResponseField>

<ResponseField name="details.sourceError" type="object">
  The underlying error from the browser or network layer.
</ResponseField>

<ResponseField name="details.uri" type="string">
  Optional. The resource URL that failed to load.
</ResponseField>

<ResponseField name="details.workerGroup" type="string">
  Optional. Internal routing group.
</ResponseField>

<ResponseField name="details.geoGroup" type="string">
  Optional. Internal geo region.
</ResponseField>

<ResponseField name="details.bundleUrl" type="string">
  Optional. The call bundle URL if the failure was during bundle fetch.
</ResponseField>

```json theme={null}
// Example: connection-error
{
  "action": "error",
  "errorMsg": "Failed to connect",
  "callClientId": "17225364729060.9442072768918943",
  "error": {
    "type": "connection-error",
    "msg": "Failed to connect",
    "details": {
      "on": "join",
      "sourceError": {},
      "uri": "https://c.daily.co/static/call-machine-object-bundle.js"
    }
  }
}
```

***

## nonfatal-error

Non-fatal errors are recoverable — the call continues after they fire. They signal that something went wrong in a specific subsystem but did not bring down the call. Use these to surface targeted warnings in your UI.

<ResponseField name="action" type="string">
  Always `"nonfatal-error"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="type" type="string">
  Identifies which subsystem the error came from. See the subtypes below.
</ResponseField>

<ResponseField name="errorMsg" type="string">
  A human-readable description of the error.
</ResponseField>

### input-settings-error

Fires when an error occurs while applying input settings changes.

<ResponseField name="details.category" type="string">
  Either `'settings'` (error while applying media settings) or `'processor'` (error while setting up the processor).
</ResponseField>

<ResponseField name="details.media" type="string[]">
  The affected media types — `'video'` and/or `'audio'`.
</ResponseField>

<ResponseField name="details.error" type="object">
  The underlying error. Contains a `camera-error`-shaped object if the failure was getting user media, or the processor error if the failure was in the processor.
</ResponseField>

```json theme={null}
{
  "action": "nonfatal-error",
  "type": "input-settings-error",
  "errorMsg": "...",
  "details": {
    "media": ["video"],
    "category": "settings",
    "error": {
      "failedMedia": ["video"],
      "msg": "Invalid constraints provided.",
      "reason": "invalid",
      "type": "constraints"
    }
  },
  "callClientId": "17225364729060.9442072768918943"
}
```

### live-streaming-warning

Fires when an error occurs during a live stream — for example, when attempting to remove all live streaming endpoints.

```json theme={null}
{
  "action": "nonfatal-error",
  "type": "live-streaming-warning",
  "errorMsg": "...",
  "callClientId": "17225364729060.9442072768918943"
}
```

### local-audio-level-observer-error

Fires if an error occurs while the local audio level observer is running.

```json theme={null}
{
  "action": "nonfatal-error",
  "type": "local-audio-level-observer-error",
  "errorMsg": "...",
  "callClientId": "17225364729060.9442072768918943"
}
```

### meeting-session-data-error

Fires when an error occurs updating meeting session data via [`setMeetingSessionData()`](/reference/react-native/instance-methods/set-meeting-session-data).

```json theme={null}
{
  "action": "nonfatal-error",
  "type": "meeting-session-data-error",
  "errorMsg": "Meeting session data is too large. Maximum size supported is 100KB.",
  "callClientId": "17225364729060.9442072768918943"
}
```

### screen-share-error

Fires when an error occurs while starting a screen share.

<ResponseField name="details.category" type="string">
  Either `'permissions'` (user or OS blocked screen sharing) or `'unknown'` (a `getDisplayMedia()` exception for another reason).
</ResponseField>

<ResponseField name="details.blockedBy" type="string">
  Present when `category` is `'permissions'`. Either `'browser'` (user denied access) or `'os'` (OS is configured to block screen sharing).
</ResponseField>

<ResponseField name="details.browserError" type="object">
  The underlying browser error, including `name` and `message`.
</ResponseField>

```json theme={null}
// Example: permissions error
{
  "action": "nonfatal-error",
  "callClientId": "17225364729060.9442072768918943",
  "type": "screen-share-error",
  "errorMsg": "Error starting ScreenShare: blocked-by-browser",
  "details": {
    "category": "permissions",
    "blockedBy": "browser",
    "browserError": {
      "name": "NotAllowedError",
      "message": "The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission."
    }
  }
}
```

```json theme={null}
// Example: unknown error
{
  "action": "nonfatal-error",
  "callClientId": "17225364729060.9442072768918943",
  "type": "screen-share-error",
  "errorMsg": "Error starting ScreenShare: unknown",
  "details": {
    "category": "unknown",
    "browserError": {
      "name": "AbortError",
      "message": "In shutdown",
      "code": 20
    }
  }
}
```

### video-processor-warning

Fires when the user enables background effects in a browser where performance will likely be degraded — for example, when hardware graphics acceleration is disabled. This often correlates with very low frame rates on the outgoing video stream.

This is powered by the [`failIfMajorPerformanceCaveat`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext#failifmajorperformancecaveat) WebGL property.

```json theme={null}
{
  "action": "nonfatal-error",
  "type": "video-processor-warning",
  "errorMsg": "Background processing using software WebGL. Performance may be degraded.",
  "callClientId": "17225364729060.9442072768918943"
}
```

### video-processor-error

Fires when CPU usage becomes too high, causing the video processor to turn off and the camera to mute.

```json theme={null}
{
  "action": "nonfatal-error",
  "type": "video-processor-error",
  "errorMsg": "...",
  "callClientId": "17225364729060.9442072768918943"
}
```

### audio-processor-error

Fires when audio processing (noise cancellation) fails, causing the audio processor to turn off and the microphone to mute.

```json theme={null}
{
  "action": "nonfatal-error",
  "type": "audio-processor-error",
  "errorMsg": "...",
  "callClientId": "17225364729060.9442072768918943"
}
```

***

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [join()](/reference/react-native/instance-methods/join)
    * [startScreenShare()](/reference/react-native/instance-methods/start-screen-share)
    * [updateInputSettings()](/reference/react-native/instance-methods/update-input-settings)
    * [setMeetingSessionData()](/reference/react-native/instance-methods/set-meeting-session-data)
  </Card>

  <Card title="Events" icon="bolt">
    * [Lifecycle events](/reference/react-native/events/lifecycle-events)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Events](/docs/daily-js/concepts/events)
    * [Device permissions](/docs/daily-js/guides/device-permissions)
  </Card>
</CardGroup>


# react-native-daily-js events
Source: https://docs.daily.co/reference/react-native/events/index

Complete list of react-native-daily-js events — emitted for every state change during a call.

<Card title="Events guide" icon="book-open" href="/docs/daily-js/concepts/events">
  Please refer to the Events guide for a conceptual overview with categorized tables, TypeScript types, and usage examples for every event.
</Card>

## All Events

<CardGroup>
  <Card title="Lifecycle Events" icon="arrows-spin" href="/reference/react-native/events/lifecycle-events">
    Emitted during key lifecycle moments like joining, leaving, and camera start.
  </Card>

  <Card title="Participant Events" icon="users" href="/reference/react-native/events/participant-events">
    Emitted when participants join, leave, update their state, and more.
  </Card>

  <Card title="Media Events" icon="video" href="/reference/react-native/events/media-events">
    Emitted for media track starts/stops, screen sharing, audio levels, and face counts.
  </Card>

  <Card title="Network Events" icon="signal" href="/reference/react-native/events/network-events">
    Emitted for network quality changes, connection state, CPU load, and test results.
  </Card>

  <Card title="Settings & Device Events" icon="gear" href="/reference/react-native/events/settings-events">
    Emitted when available/selected devices or input/send/receive settings are updated.
  </Card>

  <Card title="Messaging Events" icon="message" href="/reference/react-native/events/messaging-events">
    Emitted for app messages and meeting session state updates.
  </Card>

  <Card title="Recording Events" icon="circle-dot" href="/reference/react-native/events/recording-events">
    Emitted when recording starts/stops, stats updates, errors, and data availability. <Badge>Paid</Badge>
  </Card>

  <Card title="Live Streaming Events" icon="signal-stream" href="/reference/react-native/events/live-streaming-events">
    Emitted when live streaming starts/stops, updates, and errors occur. <Badge>Paid</Badge>
  </Card>

  <Card title="Transcription Events" icon="closed-captioning" href="/reference/react-native/events/transcription-events">
    Emitted when transcription starts/stops, messages are received, and errors occur. <Badge>Paid</Badge>
  </Card>

  <Card title="Telephony Events" icon="phone" href="/reference/react-native/events/telephony-events">
    Emitted for dial-in/dial-out readiness, connections, stops, errors    and warnings. <Badge>Paid</Badge>
  </Card>

  <Card title="Error Events" icon="triangle-exclamation" href="/reference/react-native/events/error-events">
    Emitted for fatal and non-fatal errors during the call lifecycle.
  </Card>
</CardGroup>


# Lifecycle events
Source: https://docs.daily.co/reference/react-native/events/lifecycle-events

Events for the full call lifecycle — loading, joining, leaving, and destruction.

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()`](/reference/react-native/instance-methods/join) sequence, or the [`load()`](/reference/react-native/instance-methods/load) sequence if you invoke that directly.

```json theme={null}
// Example event object
{
  "action": "loading",
  "callClientId": "17225364729060.9442072768918943"
}
```

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

***

## loaded

Fires when the JavaScript bundle has finished loading. This occurs right before [`joining-meeting`](#joining-meeting) in the [`join()`](/reference/react-native/instance-methods/join) sequence, or as the final event in the [`load()`](/reference/react-native/instance-methods/load) sequence.

```json theme={null}
// 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`](/reference/react-native/events/error-events#error) event.

<ResponseField name="action" type="string">
  Always `"load-attempt-failed"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="errorMsg" type="string">
  A human-readable description of why the load attempt failed.
</ResponseField>

```json theme={null}
// 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`](#loaded) in a successful [`join()`](/reference/react-native/instance-methods/join) sequence.

```json theme={null}
// Example event object
{
  "action": "joining-meeting",
  "callClientId": "17225364729060.9442072768918943"
}
```

***

## joined-meeting

Fires once the local participant has successfully joined the call.

<Note>
  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`](/reference/react-native/events/participant-events#participant-joined) events. To get a total count at join time, use [`participantCounts()`](/reference/react-native/instance-methods/participant-counts).
</Note>

<ResponseField name="action" type="string">
  Always `"joined-meeting"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="participants" type="object">
  Contains only the local participant at join time. See [`DailyParticipant`](/reference/react-native/types/daily-participant) for the full shape.
</ResponseField>

```json theme={null}
// 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
    }
  }
}
```

```javascript theme={null}
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.

```json theme={null}
// Example event object
{
  "action": "left-meeting",
  "callClientId": "17225364729060.9442072768918943"
}
```

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

***

## call-instance-destroyed

Fires after [`destroy()`](/reference/react-native/instance-methods/destroy) has been called and all resources have been freed. After this event, [`isDestroyed()`](/reference/react-native/instance-methods/is-destroyed) returns `true`. Listen for this event if you store the call instance in multiple places, to ensure all references are cleared.

```json theme={null}
// Example event object
{
  "action": "call-instance-destroyed",
  "callClientId": "17225364729060.9442072768918943"
}
```

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

***

## access-state-updated

Fires when [`accessState()`](/reference/react-native/instance-methods/access-state) changes — either the participant's access level changed, or an access request was made or resolved.

<ResponseField name="action" type="string">
  Always `"access-state-updated"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="access" type="object">
  The current access state. The `level` field is one of `'none'`, `'lobby'`, or `'full'`.
</ResponseField>

<ResponseField name="awaitingAccess" type="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.
</ResponseField>

```json theme={null}
// Example: participant has full access
{
  "action": "access-state-updated",
  "callClientId": "17225364729060.9442072768918943",
  "access": { "level": "full" }
}
```

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

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

***

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [join()](/reference/react-native/instance-methods/join)
    * [leave()](/reference/react-native/instance-methods/leave)
    * [load()](/reference/react-native/instance-methods/load)
    * [destroy()](/reference/react-native/instance-methods/destroy)
    * [accessState()](/reference/react-native/instance-methods/access-state)
  </Card>

  <Card title="Events" icon="bolt">
    * [Participant events](/reference/react-native/events/participant-events)
    * [Error events](/reference/react-native/events/error-events)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Events](/docs/daily-js/concepts/events)
    * [Waiting room](/docs/daily-js/guides/waiting-room)
  </Card>
</CardGroup>


# Live streaming events
Source: https://docs.daily.co/reference/react-native/events/live-streaming-events

Events for live streaming lifecycle — start, connection state changes, stop, and errors.

<Badge>Paid plans only</Badge>

***

## live-streaming-started

Fires when a live stream begins.

<ResponseField name="action" type="string">
  Always `"live-streaming-started"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="instanceId" type="string">
  Unique ID for this live streaming instance.
</ResponseField>

<ResponseField name="layout" type="DailyLiveStreamingLayoutConfig">
  Optional. The layout configuration for this stream. See [`DailyStreamingLayoutConfig`](/reference/react-native/types/daily-streaming-layout-config) for the full shape.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "live-streaming-started",
  "instanceId": "00000000-0000-4000-8000-000000000000",
  "layout": {},
  "callClientId": "17225364729060.9442072768918943"
}
```

***

## live-streaming-updated

Fires when the live stream connection state changes. This event fires in three circumstances:

* The first video frame is published to the RTMP server — `state: "connected"`
* Connection with the RTMP server is interrupted — `state: "interrupted"`
* Connection with the RTMP server is restored — `state: "connected"`

<ResponseField name="action" type="string">
  Always `"live-streaming-updated"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="instanceId" type="string">
  Unique ID for this live streaming instance.
</ResponseField>

<ResponseField name="state" type="DailyStreamingState">
  The current connection state: `'connected'` or `'interrupted'`.
</ResponseField>

<ResponseField name="endpoint" type="DailyStreamingEndpoint">
  Optional. Present when the stream was started with an `endpoints` argument. Contains an `endpoint` string identifying the associated streaming endpoint by name.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "live-streaming-updated",
  "instanceId": "00000000-0000-4000-8000-000000000000",
  "state": "connected",
  "endpoint": { "endpoint": "my_endpoint_name" },
  "callClientId": "17225364729060.9442072768918943"
}
```

***

## live-streaming-stopped

Fires when a live stream ends.

<ResponseField name="action" type="string">
  Always `"live-streaming-stopped"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="instanceId" type="string">
  ID of the live streaming instance that stopped.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "live-streaming-stopped",
  "instanceId": "00000000-0000-4000-8000-000000000000",
  "callClientId": "17225364729060.9442072768918943"
}
```

***

## live-streaming-error

Fires when a live streaming error occurs.

<ResponseField name="action" type="string">
  Always `"live-streaming-error"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="instanceId" type="string">
  Optional. ID of the live streaming instance that errored.
</ResponseField>

<ResponseField name="errorMsg" type="string">
  A human-readable description of the error.
</ResponseField>

```json theme={null}
// Example: permissions error
{
  "action": "live-streaming-error",
  "instanceId": "00000000-0000-4000-8000-000000000000",
  "errorMsg": "must be meeting owner to start live stream",
  "callClientId": "17225364729060.9442072768918943"
}
```

```json theme={null}
// Example: invalid instanceId
{
  "action": "live-streaming-error",
  "instanceId": "incorrect-uuid",
  "errorMsg": "invalid argument: instanceId is not a valid UUID. Got \"incorrect-uuid\", expected a valid UUID string of the form \"xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx\"",
  "callClientId": "17225364729060.9442072768918943"
}
```

***

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyStreamingLayoutConfig](/reference/react-native/types/daily-streaming-layout-config)
  </Card>

  <Card title="Methods" icon="code">
    * [startLiveStreaming()](/reference/react-native/instance-methods/start-live-streaming)
    * [updateLiveStreaming()](/reference/react-native/instance-methods/update-live-streaming)
    * [stopLiveStreaming()](/reference/react-native/instance-methods/stop-live-streaming)
    * [addLiveStreamingEndpoints()](/reference/react-native/instance-methods/add-live-streaming-endpoints)
    * [removeLiveStreamingEndpoints()](/reference/react-native/instance-methods/remove-live-streaming-endpoints)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Live streaming overview](/docs/guides/features/live-streaming)
    * [daily-js: Live streaming](/docs/daily-js/features/live-streaming)
    * [Events](/docs/daily-js/concepts/events)
  </Card>
</CardGroup>


# Media events
Source: https://docs.daily.co/reference/react-native/events/media-events

Events for media track lifecycle — when tracks start, stop, and when audio level and face detection data is available.

These events fire when media tracks start or stop, when screen sharing changes, and when audio level and face detection information is available. Support varies per event — see the badge on each section.

***

## track-started

Fires when a participant's media track begins. Use this to attach the track to a media element or update your UI when a new audio, video, or screen share track becomes available.

<ResponseField name="action" type="string">
  Always `"track-started"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="participant" type="DailyParticipant">
  The participant whose track started. See [`participants()`](/reference/react-native/instance-methods/participants) for the full shape.
</ResponseField>

<ResponseField name="track" type="MediaStreamTrack">
  The [MediaStreamTrack](https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack) that started.
</ResponseField>

<ResponseField name="type" type="string">
  The track type. One of `'audio'`, `'video'`, `'screenAudio'`, `'screenVideo'`, or a custom track name.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "track-started",
  "callClientId": "17225364729060.9442072768918943",
  "participant": {
    "session_id": "f2190c86-169a-464f-c0a4-ee1d5c00af58",
    "user_id": "f2190c86-169a-464f-c0a4-ee1d5c00af58",
    "user_name": "",
    "local": true,
    "owner": false,
    "record": false,
    "networkQualityState": "good",
    "tracks": {
      "audio": { "state": "playable", "subscribed": true },
      "video": { "state": "playable", "subscribed": true },
      "screenVideo": { "state": "off", "subscribed": false },
      "screenAudio": { "state": "off", "subscribed": false }
    },
    "joined_at": "2024-06-01T12:00:00.000Z",
    "will_eject_at": "2024-06-01T13:00:00.000Z"
  },
  "track": {
    "contentHint": "",
    "enabled": true,
    "id": "60d47b9f-6b07-4039-930a-8b752c6dbd26",
    "kind": "video",
    "label": "FaceTime HD Camera (Built-in) (05ac:8514)",
    "muted": false,
    "onended": null,
    "onmute": null,
    "onunmute": null,
    "readyState": "live",
    "managedByDaily": true
  },
  "type": "video"
}
```

```javascript theme={null}
call.on('track-started', ({ participant, track, type }) => {
  if (type === 'video' && !participant.local) {
    const videoEl = document.createElement('video');
    videoEl.srcObject = new MediaStream([track]);
    videoEl.autoplay = true;
    document.getElementById('remote-videos').appendChild(videoEl);
  }
});
```

***

## track-stopped

Fires when a participant's media track stops. Use this to remove a media element or update your UI when a track is no longer active.

<ResponseField name="action" type="string">
  Always `"track-stopped"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="participant" type="DailyParticipant">
  The participant whose track stopped. See [`participants()`](/reference/react-native/instance-methods/participants) for the full shape.
</ResponseField>

<ResponseField name="track" type="MediaStreamTrack">
  The [MediaStreamTrack](https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack) that stopped.
</ResponseField>

<ResponseField name="type" type="string">
  The track type. One of `'audio'`, `'video'`, `'screenAudio'`, `'screenVideo'`, or a custom track name.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "track-stopped",
  "callClientId": "17225364729060.9442072768918943",
  "participant": {
    "session_id": "f2190c86-169a-464f-c0a4-ee1d5c00af58",
    "user_id": "f2190c86-169a-464f-c0a4-ee1d5c00af58",
    "user_name": "",
    "local": true,
    "owner": false,
    "record": false,
    "networkQualityState": "good",
    "tracks": {
      "audio": { "state": "playable", "subscribed": true },
      "video": { "state": "off", "subscribed": false },
      "screenVideo": { "state": "off", "subscribed": false },
      "screenAudio": { "state": "off", "subscribed": false }
    },
    "joined_at": "2024-06-01T12:00:00.000Z",
    "will_eject_at": "2024-06-01T13:00:00.000Z"
  },
  "track": {
    "contentHint": "",
    "enabled": true,
    "id": "60d47b9f-6b07-4039-930a-8b752c6dbd26",
    "kind": "video",
    "label": "FaceTime HD Camera (Built-in) (05ac:8514)",
    "muted": false,
    "onended": null,
    "onmute": null,
    "onunmute": null,
    "readyState": "ended",
    "managedByDaily": true
  },
  "type": "video"
}
```

```javascript theme={null}
call.on('track-stopped', ({ participant, track, type }) => {
  if (type === 'video' && !participant.local) {
    const videoEl = document.getElementById(`video-${participant.session_id}`);
    if (videoEl) videoEl.remove();
  }
});
```

***

## local-screen-share-started

Fires when the local participant's screen share has started. Use this to update your UI to reflect that sharing is active.

<ResponseField name="action" type="string">
  Always `"local-screen-share-started"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "local-screen-share-started",
  "callClientId": "17225364729060.9442072768918943"
}
```

```javascript theme={null}
call.on('local-screen-share-started', () => {
  document.getElementById('share-btn').textContent = 'Stop sharing';
  document.getElementById('share-indicator').classList.remove('hidden');
});
```

***

## local-screen-share-stopped

Fires when the local participant's screen share has stopped. Use this to reset any screen-share UI state.

<ResponseField name="action" type="string">
  Always `"local-screen-share-stopped"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "local-screen-share-stopped",
  "callClientId": "17225364729060.9442072768918943"
}
```

```javascript theme={null}
call.on('local-screen-share-stopped', () => {
  document.getElementById('share-btn').textContent = 'Share screen';
  document.getElementById('share-indicator').classList.add('hidden');
});
```

***

## local-screen-share-canceled

Fires when the user dismisses the browser's screen picker before ever starting a screen share.

<Note>
  Detection of this user action only works in Chrome. On Safari and Firefox, this action is reported as the user blocking the permission and a [nonfatal `screen-share-error` event](/reference/react-native/events/error-events#screen-share-error) is sent instead.
</Note>

<ResponseField name="action" type="string">
  Always `"local-screen-share-canceled"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "local-screen-share-canceled",
  "callClientId": "17225364729060.9442072768918943"
}
```

```javascript theme={null}
call.on('local-screen-share-canceled', () => {
  // User closed the picker — reset the button back to its idle state.
  document.getElementById('share-btn').disabled = false;
  document.getElementById('share-btn').textContent = 'Share screen';
});
```

***

## local-audio-level

Fires at the frequency specified when [starting the local audio level observer](/reference/react-native/instance-methods/start-local-audio-level-observer), providing the local participant's current audio level. Use this to drive a volume indicator in your UI.

<ResponseField name="action" type="string">
  Always `"local-audio-level"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="audioLevel" type="number">
  The local participant's current audio level, from `0.0` (silent) to `1.0` (maximum).
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "local-audio-level",
  "callClientId": "17225364729060.9442072768918943",
  "audioLevel": 0.149356
}
```

```javascript theme={null}
call.on('local-audio-level', ({ audioLevel }) => {
  const bar = document.getElementById('local-volume-bar');
  bar.style.width = `${Math.round(audioLevel * 100)}%`;
});
```

***

## remote-participants-audio-level

Fires at the frequency specified when [starting the remote participants audio level observer](/reference/react-native/instance-methods/start-remote-participants-audio-level-observer), providing audio levels for all remote participants. Use this to drive per-participant volume indicators or highlight the active speaker.

<ResponseField name="action" type="string">
  Always `"remote-participants-audio-level"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="participantsAudioLevel" type="object">
  A map of participant `session_id` to audio level (`0.0`–`1.0`). Only remote participants are included.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "remote-participants-audio-level",
  "callClientId": "17225364729060.9442072768918943",
  "participantsAudioLevel": {
    "24ebb6ed-315f-40c3-acb7-a917c4ea6202": 0.1,
    "cc3d2760-442e-4cfa-afc1-4fd387253f72": 0.0223872113856834
  }
}
```

```javascript theme={null}
call.on('remote-participants-audio-level', ({ participantsAudioLevel }) => {
  let activeSpeakerId = null;
  let maxLevel = 0;

  for (const [sessionId, level] of Object.entries(participantsAudioLevel)) {
    const bar = document.getElementById(`volume-${sessionId}`);
    if (bar) bar.style.width = `${Math.round(level * 100)}%`;

    if (level > maxLevel) {
      maxLevel = level;
      activeSpeakerId = sessionId;
    }
  }

  if (activeSpeakerId) {
    highlightActiveSpeaker(activeSpeakerId);
  }
});
```

***

## face-counts-updated

Fires when the face count in the local camera view has changed. Use this to identify how many people are visible in frame at a given time.

This event is only emitted while the `face-detection` video processor is active. See [`updateInputSettings()`](/reference/react-native/instance-methods/update-input-settings#video-processor) for details on enabling it.

<ResponseField name="action" type="string">
  Always `"face-counts-updated"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="faceCounts" type="number">
  The number of faces currently detected in the local camera view.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "face-counts-updated",
  "callClientId": "17225364729060.9442072768918943",
  "faceCounts": 1
}
```

```javascript theme={null}
call.on('face-counts-updated', ({ faceCounts }) => {
  const label = document.getElementById('face-count-label');
  label.textContent = `${faceCounts} ${faceCounts === 1 ? 'person' : 'people'} in frame`;
});
```

***

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyParticipant](/reference/react-native/types/daily-participant)
    * [DailyTrackState](/reference/react-native/types/daily-track-state)
  </Card>

  <Card title="Methods" icon="code">
    * [setLocalVideo()](/reference/react-native/instance-methods/set-local-video)
    * [setLocalAudio()](/reference/react-native/instance-methods/set-local-audio)
    * [startScreenShare()](/reference/react-native/instance-methods/start-screen-share)
    * [stopScreenShare()](/reference/react-native/instance-methods/stop-screen-share)
  </Card>

  <Card title="Events" icon="bolt">
    * [Participant events](/reference/react-native/events/participant-events)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Audio and Video](/docs/daily-js/guides/audio-video)
    * [Events](/docs/daily-js/concepts/events)
    * [Tracks and Media](/docs/daily-js/concepts/tracks)
  </Card>
</CardGroup>


# Messaging events
Source: https://docs.daily.co/reference/react-native/events/messaging-events

Events for in-call app messages and shared meeting session state.

***

## app-message

Fires when a participant broadcasts a message via [`sendAppMessage()`](/reference/react-native/instance-methods/send-app-message). Messages are not stored and not delivered to the sender. Participants who join after a message is sent will not receive it.

<ResponseField name="action" type="string">
  Always `"app-message"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="data" type="any">
  The message payload. Must be JSON-serializable.
</ResponseField>

<ResponseField name="fromId" type="string">
  The `session_id` of the participant who sent the message.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "app-message",
  "callClientId": "15943200481050.884650320964697",
  "data": {
    "message": "Your message here!"
  },
  "fromId": "fc30e773-c71f-4eea-a456-4e7e2449a68a"
}
```

```javascript theme={null}
call.on('app-message', ({ data, fromId }) => {
  displayChatMessage(fromId, data.message);
});
```

***

## meeting-session-state-updated

Fires when anything in [`meetingSessionState()`](/reference/react-native/instance-methods/meeting-session-state) changes — including data set via [`setMeetingSessionData()`](/reference/react-native/instance-methods/set-meeting-session-data) and session metadata like network topology.

<ResponseField name="action" type="string">
  Always `"meeting-session-state-updated"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="meetingSessionState" type="DailyMeetingSessionState">
  The current meeting session state. Contains `data` (the shared data payload, type `unknown`) and `topology` (the current network topology: `'sfu'`, `'peer'`, or `'none'`).
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "meeting-session-state-updated",
  "callClientId": "17225364729060.9442072768918943",
  "meetingSessionState": {
    "data": {},
    "topology": "sfu"
  }
}
```

***

## meeting-session-summary-updated

Fires when the meeting session summary changes. Prefer this over the deprecated [`meeting-session-updated`](#meeting-session-updated) event.

<ResponseField name="action" type="string">
  Always `"meeting-session-summary-updated"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="meetingSession" type="DailyMeetingSessionSummary">
  The current meeting session summary. Contains an `id` string.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "meeting-session-summary-updated",
  "callClientId": "17225364729060.9442072768918943",
  "meetingSession": {
    "id": "meeting-session-abc123"
  }
}
```

***

## meeting-session-updated

<Warning>
  `meeting-session-updated` is deprecated. Use [`meeting-session-summary-updated`](#meeting-session-summary-updated) instead.
</Warning>

Fires when the meeting session changes — for example, when you've been alone in a room long enough that a new session begins.

<ResponseField name="action" type="string">
  Always `"meeting-session-updated"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="meetingSession" type="DailyMeetingSession">
  Deprecated. The meeting session object. Contains an `id` string.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "meeting-session-updated",
  "callClientId": "17225364729060.9442072768918943",
  "meetingSession": {
    "id": "meeting-session-abc123"
  }
}
```

***

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [sendAppMessage()](/reference/react-native/instance-methods/send-app-message)
    * [meetingSessionState()](/reference/react-native/instance-methods/meeting-session-state)
    * [setMeetingSessionData()](/reference/react-native/instance-methods/set-meeting-session-data)
    * [meetingSessionSummary()](/reference/react-native/instance-methods/meeting-session-summary)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Events](/docs/daily-js/concepts/events)
  </Card>
</CardGroup>


# Network events
Source: https://docs.daily.co/reference/react-native/events/network-events

Events for network quality changes, connection interruptions, CPU load, and prejoin test results.

These events fire when network quality or connection state changes, when CPU load fluctuates, and when prejoin tests complete.

***

## network-quality-change

Fires when the network quality assessment changes.

<Warning>
  As of daily-js 0.77.0, `threshold` and `quality` are deprecated in favor of `networkState` and `networkStateReasons`. Version 0.77.0 also added the `stats` bundle to the event payload.
</Warning>

<ResponseField name="action" type="string">
  Always `"network-quality-change"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="networkState" type="string">
  Current network assessment: `'good'`, `'low'`, or `'bad'`.
</ResponseField>

<ResponseField name="networkStateReasons" type="string[]">
  Reasons contributing to a `'low'` or `'bad'` state. Possible values include `'sendPacketLoss'` and `'recvPacketLoss'`. Omittied if `networkState` is `'good'`.
</ResponseField>

<ResponseField name="stats" type="object">
  The latest network stats bundle. Shape matches the return value of [`getNetworkStats()`](/reference/react-native/instance-methods/get-network-stats).
</ResponseField>

<ResponseField name="threshold" type="string">
  Deprecated. Use `networkState` instead.
</ResponseField>

<ResponseField name="quality" type="number">
  Deprecated. Use `networkState` instead.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "network-quality-change",
  "callClientId": "17430118453690.12992179309705953",
  "networkState": "bad",
  "networkStateReasons": ["sendPacketLoss", "recvPacketLoss"],
  "stats": {
    "averageNetworkRoundTripTime": 0.01992261904761905,
    "latest": {
      "audioRecvPacketLoss": 0.15053763440860216,
      "videoSendBitsPerSecond": 1589251.349980054,
      "..."
    }
  }
}
```

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

***

## network-connection

Fires when a network connection is established or interrupted. Every call uses two connections simultaneously:

* **`signaling`** — carries call setup and management. If interrupted and not reconnected within \~20 seconds, the participant is ejected from the call.
* **`peer-to-peer`** or **`sfu`** — carries audio and video. A call uses one or the other, never both. All calls default to SFU topology, including 1:1 calls. See [P2P vs SFU calls](/docs/guides/architecture-and-monitoring/intro-to-video-arch#the-architecture-of-a-room-p2p-vs-sfu-calls) for details. Both reconnect automatically as long as `signaling` is alive.

<ResponseField name="action" type="string">
  Always `"network-connection"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="type" type="string">
  The connection type: `'signaling'`, `'peer-to-peer'`, or `'sfu'`.
</ResponseField>

<ResponseField name="event" type="string">
  The connection event: `'connected'` or `'interrupted'`.
</ResponseField>

<ResponseField name="session_id" type="string">
  Present for `peer-to-peer` connections. The remote peer's `session_id`.
</ResponseField>

<ResponseField name="sfu_id" type="string">
  Present for `sfu` connections. The SFU server ID — useful for debugging and support reports.
</ResponseField>

```json theme={null}
// Example: signaling connected
{
  "action": "network-connection",
  "type": "signaling",
  "event": "connected",
  "callClientId": "17225364729060.9442072768918943"
}
```

```json theme={null}
// Example: peer-to-peer connected
{
  "action": "network-connection",
  "type": "peer-to-peer",
  "event": "connected",
  "session_id": "123e4567-e89b-12d3-a456-426655440000",
  "callClientId": "17225364729060.9442072768918943"
}
```

```json theme={null}
// Example: sfu interrupted
{
  "action": "network-connection",
  "type": "sfu",
  "event": "interrupted",
  "sfu_id": "server-id",
  "callClientId": "17225364729060.9442072768918943"
}
```

***

## cpu-load-change

<Warning>
  The `cpu-load-change` event applies to video calls only.
</Warning>

Fires when the CPU load state changes. When `cpuLoadState` is `'high'`, consider lowering outgoing video quality via [`updateSendSettings()`](/reference/react-native/instance-methods/update-send-settings), requesting a lower simulcast layer via [`updateReceiveSettings()`](/reference/react-native/instance-methods/update-receive-settings), or reducing video subscriptions in large calls.

<ResponseField name="action" type="string">
  Always `"cpu-load-change"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="cpuLoadState" type="string">
  Current CPU load assessment: `'low'` or `'high'`.
</ResponseField>

<ResponseField name="cpuLoadStateReason" type="string">
  The reason for the current state: `'none'` (load is low), `'encode'` (video encoding), `'decode'` (video decoding), or `'scheduleDuration'` (Daily code not completing within its scheduled interval).
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "cpu-load-change",
  "cpuLoadState": "low",
  "cpuLoadStateReason": "none",
  "callClientId": "17225364729060.9442072768918943"
}
```

***

## test-completed

Fires when a prejoin test completes.

<Note>
  This event fires when a prejoin test method completes.
</Note>

<ResponseField name="action" type="string">
  Always `"test-completed"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="test" type="string">
  Which test completed: `'call-quality'`, `'p2p-call-quality'`, `'network-connectivity'`, or `'websocket-connectivity'`.
</ResponseField>

<ResponseField name="results" type="object">
  The test results. Shape matches the return type of the corresponding test method.
</ResponseField>

```json theme={null}
// Example: call-quality test completed
{
  "action": "test-completed",
  "test": "call-quality",
  "results": {
    "result": "good",
    "data": {
      "maxRoundTripTime": 0.247,
      "avgRoundTripTime": 0.13130370781129388,
      "avgSendPacketLoss": 0.0036800000000000014,
      "avgAvailableOutgoingBitrate": 2060985,
      "avgSendBitsPerSecond": 1778201
    },
    "id": "47dc6b22-2909-46f3-8d0f-ec1f3807046c",
    "secondsElapsed": 22
  },
  "callClientId": "17225364729060.9442072768918943"
}
```

***

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [getNetworkStats()](/reference/react-native/instance-methods/get-network-stats)
    * [updateSendSettings()](/reference/react-native/instance-methods/update-send-settings)
    * [updateReceiveSettings()](/reference/react-native/instance-methods/update-receive-settings)
    * [testPeerToPeerCallQuality()](/reference/react-native/instance-methods/test-peer-to-peer-call-quality)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Events](/docs/daily-js/concepts/events)
    * [Network quality](/docs/daily-js/guides/network-quality)
    * [Logging and metrics](/docs/guides/architecture-and-monitoring/logging-and-metrics)
  </Card>
</CardGroup>


# Participant events
Source: https://docs.daily.co/reference/react-native/events/participant-events

Events for participant state changes — joining, leaving, updates, waiting room, and active speaker.

These events fire when participants join or leave the call, when participant state changes, and when waiting room or active speaker status updates.

***

## participant-joined

Fires when a new remote participant joins the call.

<Note>
  This event may fire for a remote participant before the local [`joined-meeting`](/reference/react-native/events/lifecycle-events#joined-meeting) event fires.
</Note>

<ResponseField name="action" type="string">
  Always `"participant-joined"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="participant" type="DailyParticipant">
  The participant who joined. See [`DailyParticipant`](/reference/react-native/types/daily-participant) for the full shape.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "participant-joined",
  "callClientId": "17225364729060.9442072768918943",
  "participant": {
    "session_id": "6f0ce557-e6e4-409f-bae9-fe5663ba4ae7",
    "user_name": "A. User Name",
    "user_id": "user_123",
    "joined_at": "2023-06-01T18:37:59.946Z",
    "local": false,
    "owner": false,
    "networkQualityState": "unknown",
    "permissions": {
      "hasPresence": true,
      "canSend": true,
      "canReceive": { "base": true },
      "canAdmin": false
    },
    "will_eject_at": "1970-01-01T00:00:00.000Z",
    "tracks": {
      "audio": { "subscribed": false, "state": "sendable" },
      "video": { "subscribed": false, "state": "sendable" },
      "screenVideo": { "subscribed": false, "state": "off", "off": { "byUser": true } },
      "screenAudio": { "subscribed": false, "state": "off", "off": { "byUser": true } }
    },
    "record": false
  }
}
```

```javascript theme={null}
call.on('participant-joined', ({ participant }) => {
  console.log(`${participant.user_name || participant.session_id} joined`);
  addParticipantTile(participant);
});
```

***

## participant-updated

Fires when a local or remote participant's state changes — for example when their audio or video track state changes, their permissions are updated, or their network quality changes.

<ResponseField name="action" type="string">
  Always `"participant-updated"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="participant" type="DailyParticipant">
  The updated participant. See [`DailyParticipant`](/reference/react-native/types/daily-participant) for the full shape.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "participant-updated",
  "callClientId": "17225364729060.9442072768918943",
  "participant": {
    "session_id": "6f0ce557-e6e4-409f-bae9-fe5663ba4ae7",
    "..."
  }
}
```

```javascript theme={null}
call.on('participant-updated', ({ participant }) => {
  updateParticipantTile(participant);
});
```

***

## participant-left

Fires when a remote participant leaves the call. The `participant` object reflects the participant's state just before they disconnected.

<Note>
  A participant [losing presence](/reference/react-native/instance-methods/update-participant#param-update-permissions) is treated as leaving and triggers this event. In that case, the optional `reason` field will be `'hidden'`.
</Note>

<ResponseField name="action" type="string">
  Always `"participant-left"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="participant" type="DailyParticipant">
  The participant who left, captured just before they disconnected. See [`DailyParticipant`](/reference/react-native/types/daily-participant) for the full shape.
</ResponseField>

<ResponseField name="reason" type="string">
  Optional. Present when the participant became hidden rather than truly leaving. Value is `'hidden'`.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "participant-left",
  "callClientId": "17225364729060.9442072768918943",
  "participant": {
    "session_id": "6f0ce557-e6e4-409f-bae9-fe5663ba4ae7",
    "..."
  },
  "reason": "hidden"
}
```

```javascript theme={null}
call.on('participant-left', ({ participant }) => {
  removeParticipantTile(participant.session_id);
});
```

***

## participant-counts-updated

Fires when the count of present or hidden participants in the call changes. See [`participantCounts()`](/reference/react-native/instance-methods/participant-counts) for details.

<ResponseField name="action" type="string">
  Always `"participant-counts-updated"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="participantCounts" type="object">
  Contains `present` (number of visible participants) and `hidden` (number of hidden participants).
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "participant-counts-updated",
  "callClientId": "17225364729060.9442072768918943",
  "participantCounts": {
    "present": 4,
    "hidden": 1
  }
}
```

```javascript theme={null}
call.on('participant-counts-updated', ({ participantCounts }) => {
  document.getElementById('participant-count').textContent = participantCounts.present;
});
```

***

## waiting-participant-added

Fires when a participant enters the waiting room and is added to the [`waitingParticipants()`](/reference/react-native/instance-methods/waiting-participants) set.

<ResponseField name="action" type="string">
  Always `"waiting-participant-added"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="participant" type="object">
  Contains `id`, `name`, and `awaitingAccess` (with a `level` field indicating the requested access level).
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "waiting-participant-added",
  "callClientId": "17225364729060.9442072768918943",
  "participant": {
    "id": "a64d30f4-5216-4481-a2ef-515d6dd7dfc6",
    "name": "Jane Smith",
    "awaitingAccess": { "level": "full" }
  }
}
```

***

## waiting-participant-updated

Fires when a participant in the waiting room updates their details — currently this only occurs when their `name` changes.

<ResponseField name="action" type="string">
  Always `"waiting-participant-updated"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="participant" type="object">
  Contains `id`, `name`, and `awaitingAccess`.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "waiting-participant-updated",
  "callClientId": "17225364729060.9442072768918943",
  "participant": {
    "id": "a64d30f4-5216-4481-a2ef-515d6dd7dfc6",
    "name": "Jane Smith (updated)",
    "awaitingAccess": { "level": "full" }
  }
}
```

***

## waiting-participant-removed

Fires when a participant is removed from the [`waitingParticipants()`](/reference/react-native/instance-methods/waiting-participants) set — either they were granted access, denied, or left on their own.

<ResponseField name="action" type="string">
  Always `"waiting-participant-removed"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="participant" type="object">
  Contains `id`, `name`, and `awaitingAccess`.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "waiting-participant-removed",
  "callClientId": "17225364729060.9442072768918943",
  "participant": {
    "id": "a64d30f4-5216-4481-a2ef-515d6dd7dfc6",
    "name": "Jane Smith",
    "awaitingAccess": { "level": "full" }
  }
}
```

***

## active-speaker-change

Fires when the active speaker — the participant whose audio input is currently loudest — changes. Use this to highlight the speaking participant in a custom UI.

<ResponseField name="action" type="string">
  Always `"active-speaker-change"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="activeSpeaker" type="object">
  Contains `peerId`, which is the `session_id` of the participant currently speaking.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "active-speaker-change",
  "callClientId": "17225364729060.9442072768918943",
  "activeSpeaker": {
    "peerId": "049ebba2-523b-4e6c-9a9f-1f8bb956670d"
  }
}
```

```javascript theme={null}
call.on('active-speaker-change', ({ activeSpeaker }) => {
  highlightSpeaker(activeSpeaker.peerId);
});
```

***

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyParticipant](/reference/react-native/types/daily-participant)
  </Card>

  <Card title="Methods" icon="code">
    * [participants()](/reference/react-native/instance-methods/participants)
    * [participantCounts()](/reference/react-native/instance-methods/participant-counts)
    * [updateParticipant()](/reference/react-native/instance-methods/update-participant)
    * [waitingParticipants()](/reference/react-native/instance-methods/waiting-participants)
  </Card>

  <Card title="Events" icon="bolt">
    * [Lifecycle events](/reference/react-native/events/lifecycle-events)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Participants](/docs/daily-js/concepts/participants)
    * [Waiting room](/docs/daily-js/guides/waiting-room)
  </Card>
</CardGroup>


# Recording events
Source: https://docs.daily.co/reference/react-native/events/recording-events

Events for recording lifecycle — start, stop, error, upload completion, and raw data delivery.

<Badge>Paid plans only</Badge>

***

## recording-started

Fires for all participants when a recording starts.

<ResponseField name="action" type="string">
  Always `"recording-started"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="instanceId" type="string">
  Unique ID for this recording instance.
</ResponseField>

<ResponseField name="type" type="string">
  The recording type: `'local'`, `'cloud'`, `'cloud-audio-only'`, or `'raw-tracks'`.
</ResponseField>

<ResponseField name="local" type="boolean">
  Present only for `local` and `cloud` recordings, and only for the participant who started the recording.
</ResponseField>

<ResponseField name="recordingId" type="string">
  Present only for `cloud` recordings. The ID of the resulting recording.
</ResponseField>

<ResponseField name="startedBy" type="string">
  Present for `cloud`, `cloud-audio-only`, and `raw-tracks` recordings. The `session_id` of the participant who started the recording.
</ResponseField>

<ResponseField name="layout" type="DailyStreamingLayoutConfig">
  Present only for `cloud` recordings. The layout configuration. See [`DailyStreamingLayoutConfig`](/reference/react-native/types/daily-streaming-layout-config) for the full shape.
</ResponseField>

<Note>
  For `local` recordings, the participant who started the recording may receive additional fields, but other participants receive only `action`, `instanceId`, and `callClientId`.
</Note>

```json theme={null}
// Example event object (cloud recording)
{
  "action": "recording-started",
  "instanceId": "00000000-0000-4000-8000-000000000000",
  "callClientId": "16149871051110.5607513282111183",
  "local": true,
  "recordingId": "cab2be92-1551-42d8-bcdf-11fe7bd81923",
  "startedBy": "1c6d5474-b133-4993-c943-f1ffdbb38cad",
  "type": "cloud"
}
```

***

## recording-stopped

Fires for all participants when a recording stops.

<ResponseField name="action" type="string">
  Always `"recording-stopped"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="instanceId" type="string">
  ID of the recording instance that stopped.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "recording-stopped",
  "instanceId": "00000000-0000-4000-8000-000000000000",
  "callClientId": "16149871715780.8113693509425934"
}
```

***

## recording-error

Fires when a recording error occurs.

<ResponseField name="action" type="string">
  Always `"recording-error"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="instanceId" type="string">
  ID of the recording instance that errored.
</ResponseField>

<ResponseField name="errorMsg" type="string">
  A human-readable description of the error.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "recording-error",
  "instanceId": "00000000-0000-4000-8000-000000000000",
  "errorMsg": "recording failed",
  "callClientId": "16149871715780.8113693509425934"
}
```

***

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyStreamingLayoutConfig](/reference/react-native/types/daily-streaming-layout-config)
  </Card>

  <Card title="Methods" icon="code">
    * [startRecording()](/reference/react-native/instance-methods/start-recording)
    * [stopRecording()](/reference/react-native/instance-methods/stop-recording)
    * [updateRecording()](/reference/react-native/instance-methods/update-recording)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Events](/docs/daily-js/concepts/events)
    * [Recording overview](/docs/guides/features/recording)
    * [daily-js: Recording](/docs/daily-js/features/recording)
  </Card>
</CardGroup>


# Settings & device events
Source: https://docs.daily.co/reference/react-native/events/settings-events

Events for camera startup, device availability and selection, and media send/receive settings.

These events fire when the camera starts or encounters an error, when input or output devices change, and when media send/receive settings are updated.

***

## started-camera

Fires when the local participant's camera starts. This happens as part of the standard join flow, or when explicitly calling [`startCamera()`](/reference/react-native/instance-methods/start-camera).

```json theme={null}
// Example event object
{
  "action": "started-camera",
  "callClientId": "17225364729060.9442072768918943"
}
```

***

## camera-error

Fires when a camera or microphone error occurs. The `error.type` field categorizes the problem; `error.msg` is a human-readable description.

<Tip>
  For more on handling device errors, see the [device permissions guide](/docs/daily-js/guides/device-permissions).
</Tip>

<ResponseField name="action" type="string">
  Always `"camera-error"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="error" type="object">
  Always contains `type` and `msg`. Some types include additional fields.

  <Expandable title="error.type values">
    <ResponseField name="&#x22;not-found&#x22;" type="DailyCamDeviceNotFoundError">
      Camera and/or microphone not detected.

      * `missingMedia` — `Array<'video' | 'audio'>` — which devices were not found

      ```json theme={null}
      { "type": "not-found", "msg": "No device found.", "missingMedia": ["video", "audio"] }
      ```
    </ResponseField>

    <ResponseField name="&#x22;permissions&#x22;" type="DailyCamPermissionsError">
      User or browser blocked camera/microphone access.

      * `blockedBy` — `'user'` or `'browser'`
      * `blockedMedia` — `Array<'video' | 'audio'>` — which devices were blocked

      ```json theme={null}
      { "type": "permissions", "msg": "Permissions denied to the browser.", "blockedBy": "browser", "blockedMedia": ["video", "audio"] }
      ```
    </ResponseField>

    <ResponseField name="&#x22;cam-in-use&#x22; | &#x22;mic-in-use&#x22; | &#x22;cam-mic-in-use&#x22;" type="DailyCamInUseError">
      Camera and/or microphone in use by another application. Windows only.

      ```json theme={null}
      { "type": "cam-in-use", "msg": "Camera in use by another application." }
      ```
    </ResponseField>

    <ResponseField name="&#x22;constraints&#x22;" type="DailyCamConstraintsError">
      `getUserMedia()` was called with invalid or empty constraints.

      * `reason` — `'invalid'` or `'none-specified'`
      * `failedMedia` — `Array<'video' | 'audio'>` — which devices were affected

      ```json theme={null}
      { "type": "constraints", "msg": "Invalid constraints provided.", "reason": "invalid", "failedMedia": ["video"] }
      ```
    </ResponseField>

    <ResponseField name="&#x22;undefined-mediadevices&#x22;" type="DailyCamTypeError">
      `window.navigator.mediaDevices` is undefined. Most commonly caused by accessing the call over `http` instead of `https`.

      ```json theme={null}
      { "type": "undefined-mediadevices", "msg": "navigator.mediaDevices is undefined. Check url for https." }
      ```
    </ResponseField>

    <ResponseField name="&#x22;unknown&#x22;" type="DailyCamUnknownError">
      Uncategorized error. The original browser error message is in `msg`.

      ```json theme={null}
      { "type": "unknown", "msg": "Unknown device error (NotReadableError)" }
      ```
    </ResponseField>
  </Expandable>
</ResponseField>

<ResponseField name="errorMsg" type="string | object">
  Retained for backwards compatibility.
</ResponseField>

```javascript theme={null}
call.on('camera-error', ({ error }) => {
  if (error?.type === 'permissions') {
    showPermissionsPrompt(error.blockedBy);
  } else if (error?.type === 'not-found') {
    showNoDeviceMessage(error.missingMedia);
  } else {
    showGenericDeviceError(error?.msg);
  }
});
```

***

## available-devices-updated

Fires when a device becomes available or is removed — for example when a headset is connected or disconnected. See [`enumerateDevices()`](/reference/react-native/instance-methods/enumerate-devices) for details on the device properties returned.

<ResponseField name="action" type="string">
  Always `"available-devices-updated"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="availableDevices" type="MediaDeviceInfo[]">
  An array of [`MediaDeviceInfo`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDeviceInfo) objects representing all devices currently available to the browser.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "available-devices-updated",
  "callClientId": "17225364729060.9442072768918943",
  "availableDevices": [
    { "deviceId": "abc123", "groupId": "", "kind": "videoinput", "label": "Front Camera" },
    { "deviceId": "def456", "groupId": "", "kind": "audioinput", "label": "Built-in Microphone" },
    { "deviceId": "ghi789", "groupId": "", "kind": "audiooutput", "label": "Built-in Speakers" }
  ]
}
```

***

## selected-devices-updated

Fires when the participant selects a new input or output device. Unlike [`available-devices-updated`](#available-devices-updated), which fires whenever the system device list changes, this event only fires when the participant has actively chosen a different device.

<ResponseField name="action" type="string">
  Always `"selected-devices-updated"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="devices" type="object">
  Contains `camera`, `mic`, and `speaker` keys with [`MediaDeviceInfo`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDeviceInfo)-shaped objects for the newly selected devices.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "selected-devices-updated",
  "callClientId": "17225364729060.9442072768918943",
  "devices": {
    "camera": {},
    "mic": {},
    "speaker": { "deviceId": "deviceId", "kind": "audiooutput", "label": "label", "groupId": "groupId" }
  }
}
```

***

## input-settings-updated

Fires every time the input settings object changes. Includes all current input settings, even those that did not change. See [`updateInputSettings()`](/reference/react-native/instance-methods/update-input-settings) for details on the settings shape.

<ResponseField name="action" type="string">
  Always `"input-settings-updated"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="inputSettings" type="object">
  The full current input settings object, including `video` and `audio` keys with their `settings` and `processor` sub-objects.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "input-settings-updated",
  "callClientId": "17225364729060.9442072768918943",
  "inputSettings": {
    "video": {
      "settings": { "frameRate": 15 },
      "processor": { "type": "background-blur", "config": { "strength": 0.2 } }
    },
    "audio": {
      "settings": { "deviceId": "default", "echoCancellation": false },
      "processor": { "type": "noise-cancellation" }
    }
  }
}
```

***

## send-settings-updated

Fires when the call's send settings change. Includes the full current send settings object.

<ResponseField name="action" type="string">
  Always `"send-settings-updated"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="sendSettings" type="DailySendSettings">
  The full current send settings object. See [`updateSendSettings()`](/reference/react-native/instance-methods/update-send-settings) for the shape.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "send-settings-updated",
  "callClientId": "17225364729060.9442072768918943",
  "sendSettings": {
    "video": "default"
  }
}
```

***

## receive-settings-updated

Fires when the call's receive settings change. Includes the full current receive settings object.

<ResponseField name="action" type="string">
  Always `"receive-settings-updated"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="receiveSettings" type="DailyReceiveSettings">
  The full current receive settings object. See [`updateReceiveSettings()`](/reference/react-native/instance-methods/update-receive-settings) for the shape.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "receive-settings-updated",
  "callClientId": "17225364729060.9442072768918943",
  "receiveSettings": {
    "base": { "video": { "layer": 2 } }
  }
}
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [startCamera()](/reference/react-native/instance-methods/start-camera)
    * [enumerateDevices()](/reference/react-native/instance-methods/enumerate-devices)
    * [updateInputSettings()](/reference/react-native/instance-methods/update-input-settings)
    * [updateSendSettings()](/reference/react-native/instance-methods/update-send-settings)
    * [updateReceiveSettings()](/reference/react-native/instance-methods/update-receive-settings)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Audio and video](/docs/daily-js/guides/audio-video)
    * [Device permissions](/docs/daily-js/guides/device-permissions)
  </Card>
</CardGroup>


# Telephony events (SIP/PSTN)
Source: https://docs.daily.co/reference/react-native/events/telephony-events

Events for SIP and PSTN dial-in and dial-out session lifecycle.

These events fire during SIP/PSTN telephony sessions started with [`startDialOut()`](/reference/react-native/instance-methods/start-dial-out) or triggered by inbound SIP dial-in. See the [dial-in/dial-out guide](/docs/guides/features/dial-in-dial-out) for setup.

***

## Dial-in Events

### dialin-ready

Fires when the SIP worker is ready to receive a call. Only emitted when the room has [SIP dial-in](/docs/guides/features/dial-in-dial-out/sip) configured.

<ResponseField name="action" type="string">
  Always `"dialin-ready"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="sipEndpoint" type="string">
  The SIP endpoint URI ready to receive calls (e.g. `"sip:room-name@sip.daily.co"`).
</ResponseField>

<ResponseField name="provider" type="string">
  The SIP/PSTN provider.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "dialin-ready",
  "callClientId": "17225364729060.9442072768918943",
  "sipEndpoint": "sip:room-name@sip.daily.co",
  "provider": "daily"
}
```

***

### dialin-connected

Fires when a SIP or PSTN caller has connected to the Daily room and both endpoints are negotiating media.

<Note>
  `dialin-connected` does not mean media has started flowing — it means the connection request was received and media negotiation is underway.
</Note>

<ResponseField name="action" type="string">
  Always `"dialin-connected"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="sessionId" type="string">
  Session ID of the dial-in participant.
</ResponseField>

<ResponseField name="sipCallId" type="string">
  The SIP Call-ID header value.
</ResponseField>

<ResponseField name="provider" type="string">
  The SIP/PSTN provider.
</ResponseField>

<ResponseField name="userId" type="string">
  Optional user ID associated with the session.
</ResponseField>

<ResponseField name="sipFrom" type="string">
  Optional SIP `From` address of the caller.
</ResponseField>

<ResponseField name="sipEndpoint" type="string">
  Optional SIP endpoint that received the call.
</ResponseField>

<ResponseField name="sipHeaders" type="object">
  Optional SIP headers from the incoming request.
</ResponseField>

<ResponseField name="actionTraceId" type="string">
  Optional trace ID for debugging.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "dialin-connected",
  "callClientId": "17225364729060.9442072768918943",
  "sessionId": "a64d30f4-5216-4481-a2ef-515d6dd7dfc6",
  "userId": "user_123",
  "sipFrom": "sip:caller@example.com",
  "sipEndpoint": "sip:room-name@sip.daily.co",
  "sipCallId": "abc123@sip.daily.co",
  "provider": "daily"
}
```

***

### dialin-stopped

Fires when a SIP or PSTN session ends — either the remote end disconnected or the call was terminated.

<ResponseField name="action" type="string">
  Always `"dialin-stopped"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="sessionId" type="string">
  Session ID of the participant whose session ended.
</ResponseField>

<ResponseField name="provider" type="string">
  The SIP/PSTN provider.
</ResponseField>

<ResponseField name="userId" type="string">
  Optional user ID associated with the session.
</ResponseField>

<ResponseField name="sipFrom" type="string">
  Optional SIP `From` address of the caller.
</ResponseField>

<ResponseField name="sipEndpoint" type="string">
  Optional SIP endpoint that received the call.
</ResponseField>

<ResponseField name="sipHeaders" type="object">
  Optional SIP headers.
</ResponseField>

<ResponseField name="sipCallId" type="string">
  Optional SIP Call-ID.
</ResponseField>

<ResponseField name="actionTraceId" type="string">
  Optional trace ID for debugging.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "dialin-stopped",
  "callClientId": "17225364729060.9442072768918943",
  "sessionId": "a64d30f4-5216-4481-a2ef-515d6dd7dfc6",
  "sipCallId": "abc123@sip.daily.co",
  "provider": "daily"
}
```

***

### dialin-error

Fires when a fatal error occurs in the dial-in pipeline — for example, an SDP negotiation failure.

<ResponseField name="action" type="string">
  Always `"dialin-error"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="errorMsg" type="string">
  Human-readable error description.
</ResponseField>

<ResponseField name="sessionId" type="string">
  Session ID of the affected participant.
</ResponseField>

<ResponseField name="provider" type="string">
  The SIP/PSTN provider.
</ResponseField>

<ResponseField name="type" type="string">
  Optional error classification. Currently only `'start-failed'`.
</ResponseField>

<ResponseField name="userId" type="string">
  Optional user ID.
</ResponseField>

<ResponseField name="sipCallId" type="string">
  Optional SIP Call-ID.
</ResponseField>

<ResponseField name="details" type="object">
  Optional details object. May contain `sipEndpoint`.
</ResponseField>

<ResponseField name="actionTraceId" type="string">
  Optional trace ID for debugging.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "dialin-error",
  "callClientId": "17225364729060.9442072768918943",
  "errorMsg": "SDP negotiation failed",
  "sessionId": "a64d30f4-5216-4481-a2ef-515d6dd7dfc6",
  "type": "start-failed",
  "provider": "daily"
}
```

***

### dialin-warning

Fires for non-fatal dial-in errors, such as when a requested codec is unavailable and a fallback is applied.

<ResponseField name="action" type="string">
  Always `"dialin-warning"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="errorMsg" type="string">
  Human-readable description of the warning.
</ResponseField>

<ResponseField name="sessionId" type="string">
  Session ID of the affected participant.
</ResponseField>

<ResponseField name="provider" type="string">
  The SIP/PSTN provider.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "dialin-warning",
  "callClientId": "17225364729060.9442072768918943",
  "errorMsg": "Requested codec unavailable, using fallback",
  "sessionId": "a64d30f4-5216-4481-a2ef-515d6dd7dfc6",
  "provider": "daily"
}
```

***

## Dial-out Events

### dialout-connected

Fires when the outbound call is established and ringing at the remote end.

<ResponseField name="action" type="string">
  Always `"dialout-connected"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="sessionId" type="string">
  Session ID of the dial-out participant.
</ResponseField>

<ResponseField name="sipCallId" type="string">
  The SIP Call-ID header value.
</ResponseField>

<ResponseField name="provider" type="string">
  The SIP/PSTN provider.
</ResponseField>

<ResponseField name="destination" type="string">
  Optional. Phone number in E.164 format or SIP URI of the remote party.
</ResponseField>

<ResponseField name="origin" type="string">
  Optional. Originating address — phone number in E.164 or SIP URI.
</ResponseField>

<ResponseField name="callerId" type="string">
  Optional. Caller ID presented to the remote party.
</ResponseField>

<ResponseField name="userId" type="string">
  Optional user ID associated with the session.
</ResponseField>

<ResponseField name="actionTraceId" type="string">
  Optional trace ID for debugging.
</ResponseField>

<CodeGroup>
  ```json Phone (E.164) theme={null}
  {
    "action": "dialout-connected",
    "callClientId": "17225364729060.9442072768918943",
    "sessionId": "7d208e2a-520b-4a8d-a2c9-3a36dfa0d342",
    "destination": "+12098888888",
    "origin": "+13977888822",
    "callerId": "+13977888822",
    "sipCallId": "abc123@sip.daily.co",
    "provider": "daily"
  }
  ```

  ```json SIP URI theme={null}
  {
    "action": "dialout-connected",
    "callClientId": "17225364729060.9442072768918943",
    "sessionId": "7d208e2a-520b-4a8d-a2c9-3a36dfa0d342",
    "destination": "sip:callee@example.com",
    "origin": "sip:myroom.0@daily-2358023-app.dapp.signalwire.com",
    "sipCallId": "abc123@sip.daily.co",
    "provider": "daily"
  }
  ```
</CodeGroup>

***

### dialout-answered

Fires when the remote party answers the outbound call.

<ResponseField name="action" type="string">
  Always `"dialout-answered"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="sessionId" type="string">
  Session ID of the dial-out participant.
</ResponseField>

<ResponseField name="sipCallId" type="string">
  The SIP Call-ID header value.
</ResponseField>

<ResponseField name="provider" type="string">
  The SIP/PSTN provider.
</ResponseField>

<ResponseField name="destination" type="string">
  Optional. Phone number in E.164 format or SIP URI of the remote party.
</ResponseField>

<ResponseField name="origin" type="string">
  Optional. Originating address.
</ResponseField>

<ResponseField name="callerId" type="string">
  Optional. Caller ID presented to the remote party.
</ResponseField>

<CodeGroup>
  ```json Phone (E.164) theme={null}
  {
    "action": "dialout-answered",
    "callClientId": "17225364729060.9442072768918943",
    "sessionId": "7d208e2a-520b-4a8d-a2c9-3a36dfa0d342",
    "destination": "+12098888888",
    "origin": "+13977888822",
    "callerId": "+13977888822",
    "sipCallId": "abc123@sip.daily.co",
    "provider": "daily"
  }
  ```

  ```json SIP URI theme={null}
  {
    "action": "dialout-answered",
    "callClientId": "17225364729060.9442072768918943",
    "sessionId": "7d208e2a-520b-4a8d-a2c9-3a36dfa0d342",
    "destination": "sip:callee@example.com",
    "origin": "sip:myroom.0@daily-2358023-app.dapp.signalwire.com",
    "sipCallId": "abc123@sip.daily.co",
    "provider": "daily"
  }
  ```
</CodeGroup>

***

### dialout-stopped

Fires when the dial-out session ends — either the remote party hung up or [`stopDialOut()`](/reference/react-native/instance-methods/stop-dial-out) was called.

<ResponseField name="action" type="string">
  Always `"dialout-stopped"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="sessionId" type="string">
  Session ID of the dial-out participant.
</ResponseField>

<ResponseField name="provider" type="string">
  The SIP/PSTN provider.
</ResponseField>

<ResponseField name="destination" type="string">
  Optional. Destination phone number or SIP URI.
</ResponseField>

<ResponseField name="origin" type="string">
  Optional. Originating address.
</ResponseField>

<ResponseField name="sipCallId" type="string">
  Optional SIP Call-ID.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "dialout-stopped",
  "callClientId": "17225364729060.9442072768918943",
  "sessionId": "7d208e2a-520b-4a8d-a2c9-3a36dfa0d342",
  "destination": "+12098888888",
  "origin": "+13977888822",
  "provider": "daily"
}
```

***

### dialout-error

Fires when a fatal error occurs in the dial-out pipeline.

<ResponseField name="action" type="string">
  Always `"dialout-error"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="errorMsg" type="string">
  Human-readable error description.
</ResponseField>

<ResponseField name="provider" type="string">
  The SIP/PSTN provider.
</ResponseField>

<ResponseField name="sessionId" type="string">
  Optional session ID.
</ResponseField>

<ResponseField name="userId" type="string">
  Optional user ID.
</ResponseField>

<ResponseField name="sipCallId" type="string">
  Optional SIP Call-ID.
</ResponseField>

<ResponseField name="details" type="object">
  Optional details object. May contain `destination`.
</ResponseField>

<ResponseField name="actionTraceId" type="string">
  Optional trace ID for debugging.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "dialout-error",
  "callClientId": "17225364729060.9442072768918943",
  "errorMsg": "DialOut failed with error: process error, Channel closed",
  "sessionId": "22b32b65-cd65-42b2-9665-db05ef3e1255",
  "details": { "destination": "+12098888888" },
  "provider": "daily"
}
```

***

### dialout-warning

Fires for non-fatal dial-out errors, such as when a requested codec is unavailable and a fallback is applied.

<ResponseField name="action" type="string">
  Always `"dialout-warning"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="errorMsg" type="string">
  Human-readable description of the warning.
</ResponseField>

<ResponseField name="provider" type="string">
  The SIP/PSTN provider.
</ResponseField>

<ResponseField name="sessionId" type="string">
  Optional session ID of the affected participant.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "dialout-warning",
  "callClientId": "17225364729060.9442072768918943",
  "errorMsg": "Requested codec unavailable, using fallback",
  "sessionId": "7d208e2a-520b-4a8d-a2c9-3a36dfa0d342",
  "provider": "daily"
}
```

***

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [startDialOut()](/reference/react-native/instance-methods/start-dial-out)
    * [stopDialOut()](/reference/react-native/instance-methods/stop-dial-out)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Events](/docs/daily-js/concepts/events)
    * [Dial-in/Dial-out Overview](/docs/guides/features/dial-in-dial-out)
    * [daily-js: Dial-in and dial-out](/docs/daily-js/features/dialin-dialout)
  </Card>
</CardGroup>


# Transcription events
Source: https://docs.daily.co/reference/react-native/events/transcription-events

Events for transcription lifecycle — start, stop, new transcription messages, and errors.

***

## transcription-started

Fires for all participants when transcription starts.

<ResponseField name="action" type="string">
  Always `"transcription-started"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="instanceId" type="string">
  Unique ID for this transcription instance.
</ResponseField>

<ResponseField name="transcriptId" type="string">
  Optional ID of the resulting transcript.
</ResponseField>

<ResponseField name="language" type="string">
  Language code passed to Deepgram (e.g. `'en'`).
</ResponseField>

<ResponseField name="model" type="string">
  The Deepgram model in use (e.g. `'general'`).
</ResponseField>

<ResponseField name="tier" type="string">
  Optional Deepgram tier.
</ResponseField>

<ResponseField name="profanity_filter" type="boolean">
  Optional. Whether profanity filtering is enabled.
</ResponseField>

<ResponseField name="redact" type="Array | boolean">
  Optional redaction configuration.
</ResponseField>

<ResponseField name="endpointing" type="number | boolean">
  Optional endpointing setting.
</ResponseField>

<ResponseField name="punctuate" type="boolean">
  Optional. Whether punctuation is added to transcriptions.
</ResponseField>

<ResponseField name="extra" type="object">
  Optional extra Deepgram parameters.
</ResponseField>

<ResponseField name="includeRawResponse" type="boolean">
  Optional. When `true`, `transcription-message` events include a `rawResponse` field with the raw Deepgram response.
</ResponseField>

<ResponseField name="startedBy" type="string">
  The `session_id` of the participant who started transcription.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "transcription-started",
  "callClientId": "16323425945550.36134184140203573",
  "instanceId": "a1f2f6b7-b1ac-4202-85e5-d446cb6c3d3f",
  "transcriptId": "transcript-abc123",
  "language": "en",
  "model": "general",
  "startedBy": "049ebba2-523b-4e6c-9a9f-1f8bb956670d"
}
```

***

## transcription-stopped

Fires for all participants when transcription stops.

<ResponseField name="action" type="string">
  Always `"transcription-stopped"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="instanceId" type="string">
  ID of the transcription instance that stopped.
</ResponseField>

<ResponseField name="updatedBy" type="string">
  The `session_id` of the participant who stopped transcription.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "transcription-stopped",
  "callClientId": "16323425945550.36134184140203573",
  "instanceId": "a1f2f6b7-b1ac-4202-85e5-d446cb6c3d3f",
  "updatedBy": "049ebba2-523b-4e6c-9a9f-1f8bb956670d"
}
```

***

## transcription-message

Fires for all participants when a new transcription snippet is available.

<ResponseField name="action" type="string">
  Always `"transcription-message"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="instanceId" type="string">
  Optional ID of the transcription instance.
</ResponseField>

<ResponseField name="participantId" type="string">
  The `session_id` of the participant who spoke.
</ResponseField>

<ResponseField name="trackType" type="string">
  Optional. Which track was transcribed: `'cam-audio'`, `'screen-audio'`, `'rmpAudio'`, or a custom track name.
</ResponseField>

<ResponseField name="text" type="string">
  The transcribed text.
</ResponseField>

<ResponseField name="timestamp" type="Date">
  When the transcription was produced.
</ResponseField>

<ResponseField name="rawResponse" type="object">
  Raw response from Deepgram. Only present when `includeRawResponse` was `true` when transcription started.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "transcription-message",
  "callClientId": "17026592880190.6408519754664044",
  "instanceId": "a1f2f6b7-b1ac-4202-85e5-d446cb6c3d3f",
  "participantId": "9c50d278-abb4-433e-a8b0-3964d363416a",
  "trackType": "cam-audio",
  "text": "Good morning.",
  "timestamp": "2023-12-15T16:55:02.000Z"
}
```

```javascript theme={null}
call.on('transcription-message', ({ participantId, text, timestamp }) => {
  appendTranscriptLine(participantId, text, timestamp);
});
```

***

## transcription-error

Fires for all participants when a transcription error occurs.

<ResponseField name="action" type="string">
  Always `"transcription-error"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="instanceId" type="string">
  ID of the transcription instance that errored.
</ResponseField>

<ResponseField name="errorMsg" type="string">
  Optional human-readable error description.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "transcription-error",
  "callClientId": "16323425945550.36134184140203573",
  "instanceId": "a1f2f6b7-b1ac-4202-85e5-d446cb6c3d3f",
  "errorMsg": "Transcription service unavailable"
}
```

***

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [startTranscription()](/reference/react-native/instance-methods/start-transcription)
    * [stopTranscription()](/reference/react-native/instance-methods/stop-transcription)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Events](/docs/daily-js/concepts/events)
    * [Transcription](/docs/daily-js/features/transcription)
  </Card>
</CardGroup>


# abortTestNetworkConnectivity()
Source: https://docs.daily.co/reference/react-native/instance-methods/abort-test-network-connectivity

Stop an in-progress testNetworkConnectivity() test early.

`abortTestNetworkConnectivity()`

Stops an in-progress [`testNetworkConnectivity()`](/reference/react-native/instance-methods/test-network-connectivity) test before it completes. The original `testNetworkConnectivity()` Promise resolves immediately with `{ result: 'aborted' }`, and a [`test-completed`](/reference/react-native/events/network-events#test-completed) event fires with the same result.

If no test is in progress, this method does nothing.

## Return value

`void`

## Example

```javascript theme={null}
const videoTrack = call.participants().local.tracks.video.persistentTrack;

// Start the test
const resultPromise = call.testNetworkConnectivity(videoTrack);

// Abort early if the user cancels
call.abortTestNetworkConnectivity();

const { result } = await resultPromise;
console.log(result); // 'aborted'
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [testNetworkConnectivity()](/reference/react-native/instance-methods/test-network-connectivity)
    * [testWebsocketConnectivity()](/reference/react-native/instance-methods/test-websocket-connectivity)
  </Card>

  <Card title="Events" icon="bolt">
    * [test-completed](/reference/react-native/events/network-events#test-completed)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Network quality](/docs/daily-js/guides/network-quality)
  </Card>
</CardGroup>


# abortTestWebsocketConnectivity()
Source: https://docs.daily.co/reference/react-native/instance-methods/abort-test-websocket-connectivity

Stop an in-progress testWebsocketConnectivity() test early.

`abortTestWebsocketConnectivity()`

Stops an in-progress [`testWebsocketConnectivity()`](/reference/react-native/instance-methods/test-websocket-connectivity) test before it completes. The original `testWebsocketConnectivity()` Promise resolves immediately with partial results — containing information about the regions that were tested up to the abort point — and a [`test-completed`](/reference/react-native/events/network-events#test-completed) event fires.

If no test is in progress, this method does nothing.

## Return value

`void`

## Example

```javascript theme={null}
const resultPromise = call.testWebsocketConnectivity();

// Abort early if the user cancels
call.abortTestWebsocketConnectivity();

const results = await resultPromise;
console.log(results.result); // 'aborted'
console.log(results.abortedRegions); // regions that were not yet tested when aborted
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [testWebsocketConnectivity()](/reference/react-native/instance-methods/test-websocket-connectivity)
    * [testNetworkConnectivity()](/reference/react-native/instance-methods/test-network-connectivity)
    * [abortTestNetworkConnectivity()](/reference/react-native/instance-methods/abort-test-network-connectivity)
  </Card>

  <Card title="Events" icon="bolt">
    * [test-completed](/reference/react-native/events/network-events#test-completed)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Network quality](/docs/daily-js/guides/network-quality)
  </Card>
</CardGroup>


# accessState()
Source: https://docs.daily.co/reference/react-native/instance-methods/access-state

Returns the local participant's current meeting access state. Use this to check whether the participant can join, is waiting in the lobby, or has been denied access.

`accessState()`

## Return value

Returns a `DailyAccessState` object:

<ResponseField name="access" type="DailyAccess">
  The participant's current access level. Either `'unknown'` (not yet determined) or an object with a `level` field:

  * `'unknown'` — access has not yet been determined (before `preAuth()` or `join()`)
  * `{ level: 'none' }` — the participant is not allowed to join
  * `{ level: 'lobby' }` — the participant can join but will be in the waiting room until granted full access
  * `{ level: 'full' }` — the participant has full access to the meeting
</ResponseField>

<ResponseField name="awaitingAccess" type="SpecifiedDailyAccess">
  Optional. Present when the participant has requested access that hasn't yet been granted or denied. Always `{ level: 'full' }`.
</ResponseField>

## Example

```javascript theme={null}
const { access, awaitingAccess } = call.accessState();

if (access === 'unknown') {
  // Not yet joined or pre-authed
} else if (access.level === 'lobby') {
  showWaitingRoomUI();
  if (awaitingAccess) {
    showPendingAccessMessage();
  }
} else if (access.level === 'full') {
  showCallUI();
} else if (access.level === 'none') {
  showAccessDeniedMessage();
}
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [preAuth()](/reference/react-native/instance-methods/pre-auth)
    * [join()](/reference/react-native/instance-methods/join)
    * [requestAccess()](/reference/react-native/instance-methods/request-access)
  </Card>

  <Card title="Events" icon="bolt">
    * [access-state-updated](/reference/react-native/events/lifecycle-events#access-state-updated)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Waiting room](/docs/daily-js/guides/waiting-room)
  </Card>
</CardGroup>


# addLiveStreamingEndpoints()
Source: https://docs.daily.co/reference/react-native/instance-methods/add-live-streaming-endpoints

Add RTMP destinations to an active live stream.

<Badge>Paid plans only</Badge>

`addLiveStreamingEndpoints({ endpoints, instanceId? })`

Adds one or more RTMP destinations to an active live stream without interrupting it. Must be called after [`startLiveStreaming()`](/reference/react-native/instance-methods/start-live-streaming).

<Warning>
  Only works when the stream was started with the `endpoints` parameter. Cannot be used to add destinations to a stream started with `rtmpUrl`.
</Warning>

## Parameters

<ParamField type="DailyStreamingEndpoint[]">
  An array of endpoint objects to add. Each object has a single `endpoint` string — the RTMP/RTMPS ingest URL.
</ParamField>

<ParamField type="string">
  Optional. The ID of the streaming instance to add endpoints to. Required when running multiple simultaneous streams.
</ParamField>

## Return value

`void`

## Example

```javascript theme={null}
call.addLiveStreamingEndpoints({
  endpoints: [
    { endpoint: 'rtmps://backup.cdn.example.com/live/key-2' },
    { endpoint: 'rtmps://social.example.com/live/key-3' },
  ],
});
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [startLiveStreaming()](/reference/react-native/instance-methods/start-live-streaming)
    * [removeLiveStreamingEndpoints()](/reference/react-native/instance-methods/remove-live-streaming-endpoints)
    * [updateLiveStreaming()](/reference/react-native/instance-methods/update-live-streaming)
    * [stopLiveStreaming()](/reference/react-native/instance-methods/stop-live-streaming)
  </Card>

  <Card title="Events" icon="bolt">
    * [Live streaming events](/reference/react-native/events/live-streaming-events)
  </Card>

  <Card title="Guides" icon="book-open">
    * [daily-js: Live streaming](/docs/daily-js/features/live-streaming)
    * [Live streaming overview](/docs/guides/features/live-streaming)
  </Card>
</CardGroup>


# cycleCamera()
Source: https://docs.daily.co/reference/react-native/instance-methods/cycle-camera

Switch the local camera to the next available device.

`cycleCamera(properties?)`

This is the simplest way to toggle between front and rear cameras on mobile. When doing so, pass `preferDifferentFacingMode: true` — without it, the method cycles through devices in list order, which may land on another camera with the same facing mode (common on newer iPhones that expose multiple rear cameras). Has no effect if only one camera is available.

This method is a wrapper around [`updateInputSettings()`](/reference/react-native/instance-methods/update-input-settings) and triggers an [`input-settings-updated`](/reference/react-native/events/settings-events#input-settings-updated) event on success.

## Parameters

<ParamField type="boolean">
  Optional. When `true`, prefers switching to a camera with a different facing mode (front ↔ rear). Defaults to `false`.
</ParamField>

## Return value

Returns a `Promise<{ device?: MediaDeviceInfo | null }>` resolving with the newly active camera's [`MediaDeviceInfo`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDeviceInfo), or `null` if no device was found.

## Example

```javascript theme={null}
// Toggle front/rear camera on mobile
await call.cycleCamera({ preferDifferentFacingMode: true });

// Cycle through all cameras in order
await call.cycleCamera();
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [enumerateDevices()](/reference/react-native/instance-methods/enumerate-devices)
    * [updateInputSettings()](/reference/react-native/instance-methods/update-input-settings)
  </Card>

  <Card title="Events" icon="bolt">
    * [input-settings-updated](/reference/react-native/events/settings-events#input-settings-updated)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Audio and video](/docs/daily-js/guides/audio-video)
    * [Device permissions](/docs/daily-js/guides/device-permissions)
  </Card>
</CardGroup>


# destroy()
Source: https://docs.daily.co/reference/react-native/instance-methods/destroy

Destroy a Daily call object and release all associated resources.

`destroy()`

Destroys the call object and frees all associated resources. After `destroy()` completes, [`isDestroyed()`](/reference/react-native/instance-methods/is-destroyed) returns `true` and any further method calls on the instance will throw an error.

If the call is still active when `destroy()` is called, it will leave the call automatically before releasing resources — so you can call `destroy()` directly without a prior `leave()`. Call [`leave()`](/reference/react-native/instance-methods/leave) instead when you want to end the current session but reuse the call object for a future `join()` or want access to the call object's state before destroying it.

<Warning>
  By default, if you attempt to create a new call object without first destroying the old one, the factory method will throw an error to prevent event handling conflicts. You must explicitly opt in to multiple-instance mode if you want to create more than one call object. See the [Multiple Instances](/docs/daily-js/guides/multi-instance) guide for details.
</Warning>

## Return value

Returns a `Promise<void>` that resolves once all resources have been released.

## Example

```javascript theme={null}
// When the user is completely done with the call
async function endSession() {
  await call.leave();
  await call.destroy();
  callRef.current = null;
}

// Or listen for the event to clean up references
call.on('call-instance-destroyed', () => {
  callRef.current = null;
});
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [leave()](/reference/react-native/instance-methods/leave)
    * [isDestroyed()](/reference/react-native/instance-methods/is-destroyed)
  </Card>

  <Card title="Events" icon="bolt">
    * [call-instance-destroyed](/reference/react-native/events/lifecycle-events#call-instance-destroyed)
    * [left-meeting](/reference/react-native/events/lifecycle-events#left-meeting)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Introduction](/docs/daily-js/introduction)
    * [Multiple instances](/docs/daily-js/guides/multi-instance)
  </Card>
</CardGroup>


# enumerateDevices()
Source: https://docs.daily.co/reference/react-native/instance-methods/enumerate-devices

Returns a list of available audio and video input/output devices.

`enumerateDevices()`

This is a wrapper around [`navigator.mediaDevices.enumerateDevices()`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices). It is especially required for iframe embeds, which return different device IDs than the parent page and must be enumerated from within the iframe context. To get the devices currently active in the call, use [`getInputDevices()`](/reference/react-native/instance-methods/get-input-devices) instead.

## Return value

Returns a `Promise<{ devices: DailyMediaDeviceInfo[] }>`. Each `DailyMediaDeviceInfo` extends the browser's [`MediaDeviceInfo`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDeviceInfo) with an optional `facing` field:

<ResponseField name="deviceId" type="string">
  Unique identifier for the device. Persists across sessions for the same browser and origin.
</ResponseField>

<ResponseField name="groupId" type="string">
  Devices that share a physical unit (e.g. a combined camera and microphone) have the same `groupId`.
</ResponseField>

<ResponseField name="kind" type="string">
  Device type: `'audioinput'`, `'audiooutput'`, or `'videoinput'`.
</ResponseField>

<ResponseField name="label" type="string">
  Human-readable device name (e.g. `"Built-in Microphone"`). Only populated after the user has granted media permissions.
</ResponseField>

<ResponseField name="facing" type="string">
  Optional. Camera facing mode on mobile devices: `'user'` (front-facing) or `'environment'` (rear-facing).
</ResponseField>

## Example

```javascript theme={null}
const { devices } = await call.enumerateDevices();

const cameras = devices.filter(d => d.kind === 'videoinput');
const mics = devices.filter(d => d.kind === 'audioinput');
const speakers = devices.filter(d => d.kind === 'audiooutput');

console.log('Cameras:', cameras.map(d => d.label));
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [updateInputSettings()](/reference/react-native/instance-methods/update-input-settings)
    * [getInputDevices()](/reference/react-native/instance-methods/get-input-devices)
  </Card>

  <Card title="Events" icon="bolt">
    * [available-devices-updated](/reference/react-native/events/settings-events#available-devices-updated)
    * [selected-devices-updated](/reference/react-native/events/settings-events#selected-devices-updated)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Audio and video](/docs/daily-js/guides/audio-video)
    * [Device permissions](/docs/daily-js/guides/device-permissions)
  </Card>
</CardGroup>


# getCameraFacingMode()
Source: https://docs.daily.co/reference/react-native/instance-methods/get-camera-facing-mode

Returns the facing mode of the currently active camera on a mobile device.

`getCameraFacingMode()`

Returns the facing mode of the currently active camera: `'user'` (front-facing) or `'environment'` (rear-facing). Returns `null` if the facing mode cannot be determined.

## Return value

Returns a `Promise<DailyCameraFacingMode | null>` where `DailyCameraFacingMode` is `'user' | 'environment'`.

## Example

```javascript theme={null}
const facingMode = await call.getCameraFacingMode();
if (facingMode === 'environment') {
  console.log('Using rear camera');
} else if (facingMode === 'user') {
  console.log('Using front camera');
}
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [cycleCamera()](/reference/react-native/instance-methods/cycle-camera)
    * [setCamera()](/reference/react-native/instance-methods/set-camera)
    * [enumerateDevices()](/reference/react-native/instance-methods/enumerate-devices)
  </Card>
</CardGroup>


# getCpuLoadStats()
Source: https://docs.daily.co/reference/react-native/instance-methods/get-cpu-load-stats

Returns current CPU load state and per-frame encoding/decoding statistics.

`getCpuLoadStats()`

Returns a snapshot of the current CPU load state and video encode/decode statistics. Stats in the `latest` field are updated approximately every two seconds — poll this method to monitor CPU performance over time.

<Warning>
  Applies to video calls only.
</Warning>

## Return value

Returns a `Promise<DailyCpuLoadStats>`:

<ResponseField name="cpuLoadState" type="string">
  Current CPU load assessment: `'low'` or `'high'`.
</ResponseField>

<ResponseField name="cpuLoadStateReason" type="string">
  Reason for the current state:

  * `'none'` — load is low
  * `'encode'` — video encoding is the primary cause of high load
  * `'decode'` — video decoding is the primary cause of high load
  * `'scheduleDuration'` — Daily code is not completing within its scheduled interval
</ResponseField>

<ResponseField name="stats.latest" type="object">
  Statistics from the most recent measurement period.

  <Expandable title="stats.latest fields">
    <ResponseField name="timestamp" type="number">Unix timestamp (ms) of when the stats were recorded.</ResponseField>
    <ResponseField name="targetEncodeFrameRate" type="number">Target encode frame rate.</ResponseField>
    <ResponseField name="targetDecodeFrameRate" type="number">Target decode frame rate.</ResponseField>
    <ResponseField name="frameEncodeTimeSec" type="number">Average time in seconds to encode a frame.</ResponseField>
    <ResponseField name="avgFrameDecodeTimeSec" type="number">Average time in seconds to decode a frame.</ResponseField>
    <ResponseField name="cpuUsageBasedOnTargetEncode" type="number">CPU usage estimate based on encode frame rate (0–1).</ResponseField>
    <ResponseField name="cpuUsageBasedOnGlobalDecode" type="number">CPU usage estimate based on decode frame rate (0–1).</ResponseField>
    <ResponseField name="cpuPressureState" type="string">Browser-reported CPU pressure: `'nominal'`, `'fair'`, `'serious'`, `'critical'`, or `null` if not supported.</ResponseField>
    <ResponseField name="scheduleDuration" type="number">Actual schedule interval duration in ms.</ResponseField>
    <ResponseField name="targetScheduleDuration" type="number">Expected schedule interval duration in ms.</ResponseField>
    <ResponseField name="totalReceivedVideoTracks" type="number">Number of incoming video tracks currently being decoded.</ResponseField>
    <ResponseField name="cpuInboundVideoStats" type="object[]">Per-track decode stats. Each entry includes `trackId`, `ssrc`, `frameWidth`, `frameHeight`, `fps`, `frameDecodeTimeSec`, `interFrameDelayStandardDeviation`, and `cpuUsageBasedOnTargetDecode`.</ResponseField>
  </Expandable>
</ResponseField>

## Example

```javascript theme={null}
const { cpuLoadState, cpuLoadStateReason, stats } = await call.getCpuLoadStats();

if (cpuLoadState === 'high') {
  console.log('High CPU load — reason:', cpuLoadStateReason);
  // Consider reducing video quality
  call.updateSendSettings({ video: { maxQuality: 'low' } });
}
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [updateSendSettings()](/reference/react-native/instance-methods/update-send-settings)
    * [updateReceiveSettings()](/reference/react-native/instance-methods/update-receive-settings)
    * [getNetworkStats()](/reference/react-native/instance-methods/get-network-stats)
  </Card>

  <Card title="Events" icon="bolt">
    * [cpu-load-change](/reference/react-native/events/network-events#cpu-load-change)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Call quality](/docs/daily-js/guides/network-quality)
  </Card>
</CardGroup>


# getInputDevices()
Source: https://docs.daily.co/reference/react-native/instance-methods/get-input-devices

Returns the camera, microphone, and speaker devices currently selected for the call.

`getInputDevices()`

Returns a `Promise<DailyDeviceInfos>` describing the camera, microphone, and speaker devices currently in use for the call. Handy for building your device selector UI or for debugging. To get a list of all available devices (not just the active ones), use [`enumerateDevices()`](/reference/react-native/instance-methods/enumerate-devices).

If a device has not been specified or has not yet been acquired, its field will be an empty object `{}`. The field will also be empty if a custom track has been provided for that input.

## Return value

Returns a `Promise<DailyDeviceInfos>`:

<ResponseField name="camera" type="DailyMediaDeviceInfo | {}">
  The currently selected camera (video input device). `DailyMediaDeviceInfo` extends the browser [`MediaDeviceInfo`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDeviceInfo) with an optional `facing` field (`'user'` or `'environment'`).
</ResponseField>

<ResponseField name="mic" type="MediaDeviceInfo | {}">
  The currently selected microphone (audio input device). See [`MediaDeviceInfo`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDeviceInfo) for the full shape.
</ResponseField>

<ResponseField name="speaker" type="MediaDeviceInfo | {}">
  The currently selected speaker or audio output device. See [`MediaDeviceInfo`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDeviceInfo) for the full shape.
</ResponseField>

## Example

```javascript theme={null}
const { camera, mic, speaker } = await call.getInputDevices();

console.log('Camera:', camera.label || camera.deviceId);
console.log('Mic:', mic.label || mic.deviceId);
console.log('Speaker:', speaker.label || speaker.deviceId);
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [enumerateDevices()](/reference/react-native/instance-methods/enumerate-devices)
    * [updateInputSettings()](/reference/react-native/instance-methods/update-input-settings)
  </Card>

  <Card title="Events" icon="bolt">
    * [available-devices-updated](/reference/react-native/events/settings-events#available-devices-updated)
    * [selected-devices-updated](/reference/react-native/events/settings-events#selected-devices-updated)
    * [camera-error](/reference/react-native/events/settings-events#camera-error)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Audio and video](/docs/daily-js/guides/audio-video)
    * [Device permissions](/docs/daily-js/guides/device-permissions)
  </Card>
</CardGroup>


# getLocalAudioLevel()
Source: https://docs.daily.co/reference/react-native/instance-methods/get-local-audio-level

Returns the current audio level for the local participant.

`getLocalAudioLevel()`

<Warning>
  You must call [`startLocalAudioLevelObserver()`](/reference/react-native/instance-methods/start-local-audio-level-observer) before calling this method — otherwise it returns `0`.
</Warning>

## Return value

Returns a `number` between `0.0` (silence) and `1.0` (maximum volume). The value is updated on the interval set when `startLocalAudioLevelObserver()` was called (default: 100ms).

## Example

```javascript theme={null}
await call.startLocalAudioLevelObserver(100);

// Poll or call on a timer to get the current level
const level = call.getLocalAudioLevel();
console.log('Local audio level:', level); // e.g. 0.625
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [startLocalAudioLevelObserver()](/reference/react-native/instance-methods/start-local-audio-level-observer)
    * [stopLocalAudioLevelObserver()](/reference/react-native/instance-methods/stop-local-audio-level-observer)
    * [isLocalAudioLevelObserverRunning()](/reference/react-native/instance-methods/is-local-audio-level-observer-running)
    * [getRemoteParticipantsAudioLevel()](/reference/react-native/instance-methods/get-remote-participants-audio-level)
  </Card>

  <Card title="Events" icon="bolt">
    * [local-audio-level](/reference/react-native/events/media-events#local-audio-level)
    * [remote-participants-audio-level](/reference/react-native/events/media-events#remote-participants-audio-level)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Audio and video](/docs/daily-js/guides/audio-video)
  </Card>
</CardGroup>


# getNetworkStats()
Source: https://docs.daily.co/reference/react-native/instance-methods/get-network-stats

Returns current network quality stats and per-interval send/receive metrics.

`getNetworkStats()`

Returns a snapshot of the current network statistics, calculated from [WebRTC stats](https://www.w3.org/TR/webrtc-stats/). Stats in `stats.latest` are updated approximately every two seconds — poll this method to monitor network performance over time.

If a value cannot be determined for a given interval, it is set to `null`. This most commonly occurs for `packetLoss` calculations due to the values it relies upon being missing or stale, or media not being transmitted. For instance, if you join a call with audio and video off, your bitrates will be 0 and `packetLoss` will be `null` because it is unknown.

## Return value

Returns a `Promise<DailyNetworkStats>`:

<ResponseField name="networkState" type="string">
  Current network quality assessment: `'good'`, `'warning'`, `'bad'`, or `'unknown'`. Calculated from send/receive packet loss, round trip time, and available outgoing bitrate, averaged over a \~30-second rolling window. In Prebuilt, Daily lowers bandwidth at `'warning'` and disables the local camera at `'bad'`.
</ResponseField>

<ResponseField name="networkStateReasons" type="string[]">
  Reasons for the current `networkState`. Possible values: `'sendPacketLoss'`, `'recvPacketLoss'`, `'roundTripTime'`, `'availableOutgoingBitrate'`. Empty when state is `'good'` or `'unknown'`.
</ResponseField>

<ResponseField name="stats" type="DailyNetworkStatsData | {}">
  Network statistics. Empty object (`{}`) when stats are not yet available.

  <Expandable title="stats fields">
    <ResponseField name="averageNetworkRoundTripTime" type="number">Average round trip time over the course of the call.</ResponseField>
    <ResponseField name="worstAudioRecvPacketLoss" type="number">Highest audio receive packet loss seen during any reporting interval.</ResponseField>
    <ResponseField name="worstAudioSendPacketLoss" type="number">Highest audio send packet loss seen during any reporting interval.</ResponseField>
    <ResponseField name="worstVideoRecvPacketLoss" type="number">Highest video receive packet loss seen during any reporting interval.</ResponseField>
    <ResponseField name="worstVideoSendPacketLoss" type="number">Highest video send packet loss seen during any reporting interval.</ResponseField>
    <ResponseField name="worstVideoRecvJitter" type="number">Highest video receive jitter seen during any reporting interval.</ResponseField>
    <ResponseField name="worstVideoSendJitter" type="number">Highest video send jitter seen during any reporting interval.</ResponseField>
    <ResponseField name="worstAudioRecvJitter" type="number">Highest audio receive jitter seen during any reporting interval.</ResponseField>
    <ResponseField name="worstAudioSendJitter" type="number">Highest audio send jitter seen during any reporting interval.</ResponseField>

    <ResponseField name="latest" type="object">
      Statistics from the most recent reporting interval (\~2s).

      <Expandable title="latest fields">
        <ResponseField name="timestamp" type="number">Unix timestamp (ms) of when the stats were recorded.</ResponseField>
        <ResponseField name="recvBitsPerSecond" type="number | null">Total incoming bits per second (audio + video).</ResponseField>
        <ResponseField name="sendBitsPerSecond" type="number | null">Total outgoing bits per second (audio + video).</ResponseField>
        <ResponseField name="networkRoundTripTime" type="number | null">Average round trip time across all connections.</ResponseField>
        <ResponseField name="availableOutgoingBitrate" type="number | null">Average available outgoing bitrate across all connections.</ResponseField>
        <ResponseField name="audioRecvBitsPerSecond" type="number | null">Incoming audio payload bits per second.</ResponseField>
        <ResponseField name="audioSendBitsPerSecond" type="number | null">Outgoing audio payload bits per second.</ResponseField>
        <ResponseField name="audioRecvPacketLoss" type="number | null">Estimated packet loss percentage for incoming audio.</ResponseField>
        <ResponseField name="audioSendPacketLoss" type="number | null">Estimated packet loss percentage for outgoing audio. Always `null` in Firefox.</ResponseField>
        <ResponseField name="videoRecvBitsPerSecond" type="number | null">Incoming video payload bits per second.</ResponseField>
        <ResponseField name="videoSendBitsPerSecond" type="number | null">Outgoing video payload bits per second.</ResponseField>
        <ResponseField name="videoRecvPacketLoss" type="number | null">Estimated packet loss percentage for incoming video.</ResponseField>
        <ResponseField name="videoSendPacketLoss" type="number | null">Estimated packet loss percentage for outgoing video.</ResponseField>
        <ResponseField name="totalRecvPacketLoss" type="number | null">Overall estimated packet loss for all incoming media.</ResponseField>
        <ResponseField name="totalSendPacketLoss" type="number | null">Overall estimated packet loss for all outgoing media.</ResponseField>
        <ResponseField name="videoRecvJitter" type="number | null">Average jitter across inbound video streams.</ResponseField>
        <ResponseField name="videoSendJitter" type="number | null">Average jitter across outbound video streams.</ResponseField>
        <ResponseField name="audioRecvJitter" type="number | null">Average jitter across inbound audio streams.</ResponseField>
        <ResponseField name="audioSendJitter" type="number | null">Average jitter across outbound audio streams. Always `null` in Firefox.</ResponseField>
      </Expandable>
    </ResponseField>
  </Expandable>
</ResponseField>

<ResponseField name="threshold" type="string">
  Deprecated in 0.77.0. Use `networkState` instead. Was `'good'`, `'low'`, or `'very-low'`.
</ResponseField>

<ResponseField name="quality" type="number">
  Deprecated in 0.77.0. Was a subjective 1–100 quality score.
</ResponseField>

<Warning>
  Firefox does not report send-side packet loss or jitter for audio (`audioSendPacketLoss` and `audioSendJitter` are always `null`), and does not provide `availableOutgoingBitrate`, `networkRoundTripTime`, or `averageNetworkRoundTripTime`.
</Warning>

## Example

<CodeGroup>
  ```javascript Example Usage theme={null}
  const { networkState, networkStateReasons, stats } = await call.getNetworkStats();

  if (networkState === 'bad') {
    console.log('Poor network. Reasons:', networkStateReasons);
  }

  if (stats.latest) {
    console.log('Packet loss (send):', stats.latest.totalSendPacketLoss);
    console.log('Round trip time:', stats.latest.networkRoundTripTime);
  }
  ```

  ```JSON Sample response theme={null}
  {
    "networkState": "bad",
    "networkStateReasons": ["sendPacketLoss", "recvPacketLoss"],
    "threshold": "good",
    "quality": 37,
    "stats": {
      "averageNetworkRoundTripTime": 0.01992261904761905,
      "latest": {
        "audioRecvBitsPerSecond": 23050.048937297845,
        "audioRecvJitter": 0.026,
        "audioRecvPacketLoss": 0.15053763440860216,
        "audioSendBitsPerSecond": 30177.83704675053,
        "audioSendJitter": null,
        "audioSendPacketLoss": null,
        "availableOutgoingBitrate": 2889866,
        "networkRoundTripTime": 0.02,
        "recvBitsPerSecond": 1700344.1895481267,
        "sendBitsPerSecond": 1724499.7493844875,
        "timestamp": 1743011906315,
        "totalRecvPacketLoss": 0.11670020120724346,
        "totalSendPacketLoss": 0.08984375,
        "videoRecvBitsPerSecond": 1567291.2594309496,
        "videoRecvJitter": 0.036,
        "videoRecvPacketLoss": 0.10891089108910891,
        "videoSendBitsPerSecond": 1589251.349980054,
        "videoSendJitter": 0.008922,
        "videoSendPacketLoss": 0.08984375
      },
      "worstAudioRecvJitter": 0.026,
      "worstAudioRecvPacketLoss": 0.23232323232323232,
      "worstAudioSendJitter": 0.003166,
      "worstAudioSendPacketLoss": 0.1953125,
      "worstVideoRecvJitter": 0.036,
      "worstVideoRecvPacketLoss": 0.10891089108910891,
      "worstVideoSendJitter": 0.014355,
      "worstVideoSendPacketLoss": 0.13671875
    }
  }
  ```
</CodeGroup>

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [getCpuLoadStats()](/reference/react-native/instance-methods/get-cpu-load-stats)
    * [updateSendSettings()](/reference/react-native/instance-methods/update-send-settings)
    * [updateReceiveSettings()](/reference/react-native/instance-methods/update-receive-settings)
  </Card>

  <Card title="Events" icon="bolt">
    * [network-quality-change](/reference/react-native/events/network-events#network-quality-change)
    * [network-connection](/reference/react-native/events/network-events#network-connection)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Call quality](/docs/daily-js/guides/network-quality)
    * [Logging and metrics](/docs/guides/architecture-and-monitoring/logging-and-metrics)
  </Card>
</CardGroup>


# getReceiveSettings()
Source: https://docs.daily.co/reference/react-native/instance-methods/get-receive-settings

Returns the current media receive settings, either for all participants or a specific one.

`getReceiveSettings(id?, options?)`

Returns the current receive settings. When called with no arguments, returns the full `DailyReceiveSettings` object for all participants. When called with a participant ID, returns only that participant's settings.

<Note>
  `base` settings are not available until after [`join()`](/reference/react-native/instance-methods/join) is called.
</Note>

## Parameters

<ParamField type="string">
  Optional. A participant session ID. When provided, returns only that participant's receive settings.
</ParamField>

<ParamField type="boolean">
  Optional. When `true`, includes inherited values from `base` in the per-participant result. Defaults to `false`.
</ParamField>

## Return value

Returns a `Promise<DailyReceiveSettings>` when called with no ID, or `Promise<DailySingleParticipantReceiveSettings>` when called with an ID.

See [`updateReceiveSettings()`](/reference/react-native/instance-methods/update-receive-settings) for a full explanation of the receive settings structure.

## Example

```javascript theme={null}
// Get all receive settings
const settings = await call.getReceiveSettings();
// {
//   base: { video: { layer: 2 }, screenVideo: { layer: 0 } },
//   d38ed17b-1ede-4273-a1c8-cf11ccf16972: { video: { layer: 1 } }
// }

// Get a specific participant's settings (without inherited values)
const participantSettings = await call.getReceiveSettings(id);
// { video: { layer: 1 } }

// Include inherited values from base
const withInherited = await call.getReceiveSettings(id, { showInheritedValues: true });
// { video: { layer: 1 }, screenVideo: { layer: 0 } }
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [updateReceiveSettings()](/reference/react-native/instance-methods/update-receive-settings)
    * [getSendSettings()](/reference/react-native/instance-methods/get-send-settings)
  </Card>

  <Card title="Events" icon="bolt">
    * [receive-settings-updated](/reference/react-native/events/settings-events#receive-settings-updated)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Receive-side video quality](/docs/guides/scaling-calls/best-practices-to-scale-large-experiences#adjust-receive-side-video-quality)
  </Card>
</CardGroup>


# getRemoteParticipantsAudioLevel()
Source: https://docs.daily.co/reference/react-native/instance-methods/get-remote-participants-audio-level

Returns the current audio level for each remote participant.

`getRemoteParticipantsAudioLevel()`

Returns the latest audio level for each remote participant. You must call [`startRemoteParticipantsAudioLevelObserver()`](/reference/react-native/instance-methods/start-remote-participants-audio-level-observer) before calling this method — otherwise it returns an empty object.

This method is synchronous — it does not return a Promise.

## Return value

Returns a `DailyParticipantsAudioLevel` object: a map of participant session IDs to audio level values. Each value is a `number` between `0.0` (silence) and `1.0` (maximum volume).

## Example

```javascript theme={null}
await call.startRemoteParticipantsAudioLevelObserver(100);

const levels = call.getRemoteParticipantsAudioLevel();
// {
//   "03ec86c3-59cc-4bea-a61b-f8ffae9a2989": 0.28,
//   "5e1fa0e9-cce6-45a0-ba61-f64d24b41ff6": 0
// }

const activeSpeakerId = Object.entries(levels)
  .sort(([, a], [, b]) => b - a)[0]?.[0];
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [startRemoteParticipantsAudioLevelObserver()](/reference/react-native/instance-methods/start-remote-participants-audio-level-observer)
    * [stopRemoteParticipantsAudioLevelObserver()](/reference/react-native/instance-methods/stop-remote-participants-audio-level-observer)
    * [isRemoteParticipantsAudioLevelObserverRunning()](/reference/react-native/instance-methods/is-remote-participants-audio-level-observer-running)
    * [getLocalAudioLevel()](/reference/react-native/instance-methods/get-local-audio-level)
  </Card>

  <Card title="Events" icon="bolt">
    * [remote-participants-audio-level](/reference/react-native/events/media-events#remote-participants-audio-level)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Audio and video](/docs/daily-js/guides/audio-video)
  </Card>
</CardGroup>


# getSendSettings()
Source: https://docs.daily.co/reference/react-native/instance-methods/get-send-settings

Returns the current media send settings, or null if none have been set.

`getSendSettings()`

Returns the current `DailySendSettings` object, or `null` if [`updateSendSettings()`](/reference/react-native/instance-methods/update-send-settings) has never been called and no call has been joined.

This method is synchronous — it does not return a Promise.

## Return value

Returns `DailySendSettings | null`.

See [`updateSendSettings()`](/reference/react-native/instance-methods/update-send-settings) for a full explanation of the `DailySendSettings` structure.

## Example

```javascript theme={null}
const settings = call.getSendSettings();

if (settings?.video?.maxQuality === 'low') {
  console.log('Video quality is currently limited to low');
}
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [updateSendSettings()](/reference/react-native/instance-methods/update-send-settings)
    * [getReceiveSettings()](/reference/react-native/instance-methods/get-receive-settings)
    * [getCpuLoadStats()](/reference/react-native/instance-methods/get-cpu-load-stats)
  </Card>

  <Card title="Events" icon="bolt">
    * [send-settings-updated](/reference/react-native/events/settings-events#send-settings-updated)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Send-side video quality](/docs/guides/scaling-calls/best-practices-to-scale-large-experiences#change-send-side-video-quality)
    * [Call quality](/docs/daily-js/guides/network-quality)
  </Card>
</CardGroup>


# Instance methods
Source: https://docs.daily.co/reference/react-native/instance-methods/index

Using our video API, instance methods allow developers to customize a WebRTC call.

Use Daily instance methods to customize your call experience. Instance methods include:

* [`abortTestNetworkConnectivity()`](/reference/react-native/instance-methods/abort-test-network-connectivity)
* [`abortTestWebsocketConnectivity()`](/reference/react-native/instance-methods/abort-test-websocket-connectivity)
* [`accessState()`](/reference/react-native/instance-methods/access-state)
* [`addLiveStreamingEndpoints()`](/reference/react-native/instance-methods/add-live-streaming-endpoints)
* [`cycleCamera()`](/reference/react-native/instance-methods/cycle-camera)
* [`destroy()`](/reference/react-native/instance-methods/destroy)
* [`enumerateDevices()`](/reference/react-native/instance-methods/enumerate-devices)
* [`getCameraFacingMode()`](/reference/react-native/instance-methods/get-camera-facing-mode)
* [`getCpuLoadStats()`](/reference/react-native/instance-methods/get-cpu-load-stats)
* [`getInputDevices()`](/reference/react-native/instance-methods/get-input-devices)
* [`getLocalAudioLevel()`](/reference/react-native/instance-methods/get-local-audio-level)
* [`getNetworkStats()`](/reference/react-native/instance-methods/get-network-stats)
* [`getReceiveSettings()`](/reference/react-native/instance-methods/get-receive-settings)
* [`getRemoteParticipantsAudioLevel()`](/reference/react-native/instance-methods/get-remote-participants-audio-level)
* [`getSendSettings()`](/reference/react-native/instance-methods/get-send-settings)
* [`isDestroyed()`](/reference/react-native/instance-methods/is-destroyed)
* [`isLocalAudioLevelObserverRunning()`](/reference/react-native/instance-methods/is-local-audio-level-observer-running)
* [`isRemoteParticipantsAudioLevelObserverRunning()`](/reference/react-native/instance-methods/is-remote-participants-audio-level-observer-running)
* [`join()`](/reference/react-native/instance-methods/join)
* [`leave()`](/reference/react-native/instance-methods/leave)
* [`load()`](/reference/react-native/instance-methods/load)
* [`localAudio()`](/reference/react-native/instance-methods/local-audio)
* [`localScreenAudio()`](/reference/react-native/instance-methods/local-screen-audio)
* [`localScreenVideo()`](/reference/react-native/instance-methods/local-screen-video)
* [`localVideo()`](/reference/react-native/instance-methods/local-video)
* [`meetingSessionState()`](/reference/react-native/instance-methods/meeting-session-state)
* [`meetingSessionSummary()`](/reference/react-native/instance-methods/meeting-session-summary)
* [`meetingState()`](/reference/react-native/instance-methods/meeting-state)
* [`nativeInCallAudioMode()`](/reference/react-native/instance-methods/native-in-call-audio-mode)
* [`off()`](/reference/react-native/instance-methods/off)
* [`on()`](/reference/react-native/instance-methods/on)
* [`once()`](/reference/react-native/instance-methods/once)
* [`participantCounts()`](/reference/react-native/instance-methods/participant-counts)
* [`participants()`](/reference/react-native/instance-methods/participants)
* [`preAuth()`](/reference/react-native/instance-methods/pre-auth)
* [`removeLiveStreamingEndpoints()`](/reference/react-native/instance-methods/remove-live-streaming-endpoints)
* [`requestAccess()`](/reference/react-native/instance-methods/request-access)
* [`room()`](/reference/react-native/instance-methods/room)
* [`sendAppMessage()`](/reference/react-native/instance-methods/send-app-message)
* [`sendDTMF()`](/reference/react-native/instance-methods/send-dtmf)
* [`setAudioDevice()`](/reference/react-native/instance-methods/set-audio-device)
* [`setCamera()`](/reference/react-native/instance-methods/set-camera)
* [`setIceConfig()`](/reference/react-native/instance-methods/set-ice-config)
* [`setLocalAudio()`](/reference/react-native/instance-methods/set-local-audio)
* [`setLocalVideo()`](/reference/react-native/instance-methods/set-local-video)
* [`setMeetingSessionData()`](/reference/react-native/instance-methods/set-meeting-session-data)
* [`setNativeInCallAudioMode()`](/reference/react-native/instance-methods/set-native-in-call-audio-mode)
* [`setProxyUrl()`](/reference/react-native/instance-methods/set-proxy-url)
* [`setSubscribeToTracksAutomatically()`](/reference/react-native/instance-methods/set-subscribe-to-tracks-automatically)
* [`setUserData()`](/reference/react-native/instance-methods/set-user-data)
* [`setUserName()`](/reference/react-native/instance-methods/set-user-name)
* [`sipCallTransfer()`](/reference/react-native/instance-methods/sip-call-transfer)
* [`sipRefer()`](/reference/react-native/instance-methods/sip-refer)
* [`startCamera()`](/reference/react-native/instance-methods/start-camera)
* [`startDialOut()`](/reference/react-native/instance-methods/start-dial-out)
* [`startLiveStreaming()`](/reference/react-native/instance-methods/start-live-streaming)
* [`startLocalAudioLevelObserver()`](/reference/react-native/instance-methods/start-local-audio-level-observer)
* [`startRecording()`](/reference/react-native/instance-methods/start-recording)
* [`startRemoteParticipantsAudioLevelObserver()`](/reference/react-native/instance-methods/start-remote-participants-audio-level-observer)
* [`startScreenShare()`](/reference/react-native/instance-methods/start-screen-share)
* [`startTranscription()`](/reference/react-native/instance-methods/start-transcription)
* [`stopDialOut()`](/reference/react-native/instance-methods/stop-dial-out)
* [`stopLiveStreaming()`](/reference/react-native/instance-methods/stop-live-streaming)
* [`stopLocalAudioLevelObserver()`](/reference/react-native/instance-methods/stop-local-audio-level-observer)
* [`stopRecording()`](/reference/react-native/instance-methods/stop-recording)
* [`stopRemoteParticipantsAudioLevelObserver()`](/reference/react-native/instance-methods/stop-remote-participants-audio-level-observer)
* [`stopScreenShare()`](/reference/react-native/instance-methods/stop-screen-share)
* [`stopTestPeerToPeerCallQuality()`](/reference/react-native/instance-methods/stop-test-peer-to-peer-call-quality)
* [`stopTranscription()`](/reference/react-native/instance-methods/stop-transcription)
* [`testNetworkConnectivity()`](/reference/react-native/instance-methods/test-network-connectivity)
* [`testPeerToPeerCallQuality()`](/reference/react-native/instance-methods/test-peer-to-peer-call-quality)
* [`testWebsocketConnectivity()`](/reference/react-native/instance-methods/test-websocket-connectivity)
* [`updateInputSettings()`](/reference/react-native/instance-methods/update-input-settings)
* [`updateLiveStreaming()`](/reference/react-native/instance-methods/update-live-streaming)
* [`updateParticipant()`](/reference/react-native/instance-methods/update-participant)
* [`updateParticipants()`](/reference/react-native/instance-methods/update-participants)
* [`updateReceiveSettings()`](/reference/react-native/instance-methods/update-receive-settings)
* [`updateRecording()`](/reference/react-native/instance-methods/update-recording)
* [`updateScreenShare()`](/reference/react-native/instance-methods/update-screen-share)
* [`updateSendSettings()`](/reference/react-native/instance-methods/update-send-settings)
* [`updateTranscription()`](/reference/react-native/instance-methods/update-transcription)
* [`updateWaitingParticipant()`](/reference/react-native/instance-methods/update-waiting-participant)
* [`updateWaitingParticipants()`](/reference/react-native/instance-methods/update-waiting-participants)
* [`waitingParticipants()`](/reference/react-native/instance-methods/waiting-participants)


# isDestroyed()
Source: https://docs.daily.co/reference/react-native/instance-methods/is-destroyed

Returns whether the call instance has been destroyed.

`isDestroyed()`

Returns `true` if [`destroy()`](/reference/react-native/instance-methods/destroy) has been called on this instance. A destroyed instance cannot be reused.

A call instance can be reused across multiple calls — a sequence of `join()`, `leave()`, `join()` works as expected. Only call `destroy()` when you are completely done with the instance and want to free all associated resources.

<Warning>
  Calling any method on a destroyed instance throws an `Error`.
</Warning>

## Return value

Returns `boolean`.

## Example

```javascript theme={null}
if (!call.isDestroyed()) {
  await call.destroy();
}
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [destroy()](/reference/react-native/instance-methods/destroy)
    * [leave()](/reference/react-native/instance-methods/leave)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Multi-instance calls](/docs/daily-js/guides/multi-instance)
  </Card>
</CardGroup>


# isLocalAudioLevelObserverRunning()
Source: https://docs.daily.co/reference/react-native/instance-methods/is-local-audio-level-observer-running

Returns whether the local audio level observer is currently active.

`isLocalAudioLevelObserverRunning()`

Returns `true` if [`startLocalAudioLevelObserver()`](/reference/react-native/instance-methods/start-local-audio-level-observer) has been called and the observer is currently active.

## Return value

Returns `boolean`.

## Example

```javascript theme={null}
if (!call.isLocalAudioLevelObserverRunning()) {
  await call.startLocalAudioLevelObserver(100);
}
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [startLocalAudioLevelObserver()](/reference/react-native/instance-methods/start-local-audio-level-observer)
    * [stopLocalAudioLevelObserver()](/reference/react-native/instance-methods/stop-local-audio-level-observer)
    * [getLocalAudioLevel()](/reference/react-native/instance-methods/get-local-audio-level)
  </Card>

  <Card title="Events" icon="bolt">
    * [local-audio-level](/reference/react-native/events/media-events#local-audio-level)
  </Card>
</CardGroup>


# isRemoteParticipantsAudioLevelObserverRunning()
Source: https://docs.daily.co/reference/react-native/instance-methods/is-remote-participants-audio-level-observer-running

Returns whether the remote participants audio level observer is currently active.

`isRemoteParticipantsAudioLevelObserverRunning()`

Returns `true` if [`startRemoteParticipantsAudioLevelObserver()`](/reference/react-native/instance-methods/start-remote-participants-audio-level-observer) has been called and the observer is currently active.

## Return value

Returns `boolean`.

## Example

```javascript theme={null}
if (!call.isRemoteParticipantsAudioLevelObserverRunning()) {
  await call.startRemoteParticipantsAudioLevelObserver(100);
}
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [startRemoteParticipantsAudioLevelObserver()](/reference/react-native/instance-methods/start-remote-participants-audio-level-observer)
    * [stopRemoteParticipantsAudioLevelObserver()](/reference/react-native/instance-methods/stop-remote-participants-audio-level-observer)
    * [getRemoteParticipantsAudioLevel()](/reference/react-native/instance-methods/get-remote-participants-audio-level)
  </Card>

  <Card title="Events" icon="bolt">
    * [remote-participants-audio-level](/reference/react-native/events/media-events#remote-participants-audio-level)
  </Card>
</CardGroup>


# join()
Source: https://docs.daily.co/reference/react-native/instance-methods/join

Join a Daily room and begin sending and receiving media.

`join({properties})`

Joins a meeting. The `properties` argument is optional, but the meeting `url` must be set here if it was not set in a [`createCallObject()`](/reference/react-native/daily-call-client/create-call-object). You can respond to a successful join either by awaiting the returned Promise or by listening for the [`joined-meeting`](/reference/react-native/events/lifecycle-events#joined-meeting) event — the two are equivalent.

## Parameters

<ParamField type="DailyCallOptions">
  Optional. Configuration for the meeting. The meeting `url` must be set here if it was not provided to a factory method. All other fields are optional. See the full [properties reference](/reference/react-native/types/daily-call-options) for all available options.
</ParamField>

## Return value

Returns a `Promise<DailyParticipants>` that resolves with the local participant object once the join completes. This is the same value passed to the `joined-meeting` event. See [`participants()`](/reference/react-native/instance-methods/participants) for the full shape of the returned object.

## Example

```javascript theme={null}
const call = Daily.createCallObject();

try {
  const participants = await call.join({ url: 'https://your-domain.daily.co/room-name' });
  console.log('Joined as', participants.local.user_name);
  showCallUI(); // update your UI state now that the call is live
} catch (err) {
  console.error('Failed to join:', err);
}
```

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyCallOptions](/reference/react-native/types/daily-call-options)
  </Card>

  <Card title="Methods" icon="code">
    * [leave()](/reference/react-native/instance-methods/leave)
    * [preAuth()](/reference/react-native/instance-methods/pre-auth)
  </Card>

  <Card title="Events" icon="bolt">
    * [joined-meeting](/reference/react-native/events/lifecycle-events#joined-meeting)
    * [left-meeting](/reference/react-native/events/lifecycle-events#left-meeting)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Introduction](/docs/daily-js/introduction)
    * [Call configuration](/docs/daily-js/concepts/call-configuration)
  </Card>
</CardGroup>


# leave()
Source: https://docs.daily.co/reference/react-native/instance-methods/leave

Leave the current Daily call.

`leave()`

Leaves the current meeting. If there is no active meeting, this method does nothing.

After calling `leave()`, the call object remains available and can be reused — call `join()` again to start a new session without having to recreate the call object. Call [`destroy()`](/reference/react-native/instance-methods/destroy) when you are done with the call object entirely.

## Return value

Returns a `Promise<void>` that resolves once the participant has left.

## Example

```javascript theme={null}
document.getElementById('leave-btn').onclick = async () => {
  await call.leave();
  showLobbyUI();
};

call.on('left-meeting', () => {
  // Also fires when ejected or when a fatal error ends the call
  showLobbyUI();
});
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [join()](/reference/react-native/instance-methods/join)
    * [destroy()](/reference/react-native/instance-methods/destroy)
  </Card>

  <Card title="Events" icon="bolt">
    * [left-meeting](/reference/react-native/events/lifecycle-events#left-meeting)
    * [error](/reference/react-native/events/error-events#error)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Introduction](/docs/daily-js/introduction)
  </Card>
</CardGroup>


# load()
Source: https://docs.daily.co/reference/react-native/instance-methods/load

Pre-loads the Daily JavaScript bundle to reduce join latency.

`load(properties?)`

Pre-loads the JavaScript bundle needed to join a call, giving you a head start before calling [`join()`](/reference/react-native/instance-methods/join). This is purely an optimization — if you skip it, the bundle loads automatically on the first call to `preAuth()`, `startCamera()`, or `join()` and is often already cached.

Calling `load()` will update the meeting state and trigger events as follows:

* On success: [`loading`](/reference/react-native/events/lifecycle-events#loading) → [`loaded`](/reference/react-native/events/lifecycle-events#loaded)
* On failure: [`loading`](/reference/react-native/events/lifecycle-events#loading) → one or more [`load-attempt-failed`](/reference/react-native/events/lifecycle-events#load-attempt-failed) → [`error`](/reference/react-native/events/error-events#error)

## Return value

Returns `Promise<void>`.

## Example

```javascript theme={null}
// Pre-load on page mount so join() is faster when the user clicks "Join"
call.on('loaded', () => console.log('Bundle ready'));
await call.load();
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [join()](/reference/react-native/instance-methods/join)
    * [preAuth()](/reference/react-native/instance-methods/pre-auth)
  </Card>

  <Card title="Events" icon="bolt">
    * [loading](/reference/react-native/events/lifecycle-events#loading)
    * [loaded](/reference/react-native/events/lifecycle-events#loaded)
    * [load-attempt-failed](/reference/react-native/events/lifecycle-events#load-attempt-failed)
  </Card>
</CardGroup>


# localAudio()
Source: https://docs.daily.co/reference/react-native/instance-methods/local-audio

Returns whether the local microphone is on.

`localAudio()`

Returns whether the local microphone is on. Returns `false` when the local audio track state is `'off'` or `'blocked'`, and `true` otherwise.

## Return value

Returns `boolean`.

## Example

```javascript theme={null}
if (!call.localAudio()) {
  console.log('Mic is off or blocked');
}
```

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyTrackState](/reference/react-native/types/daily-track-state)
  </Card>

  <Card title="Methods" icon="code">
    * [localVideo()](/reference/react-native/instance-methods/local-video)
    * [setLocalAudio()](/reference/react-native/instance-methods/set-local-audio)
    * [participants()](/reference/react-native/instance-methods/participants)
  </Card>

  <Card title="Events" icon="bolt">
    * [participant-updated](/reference/react-native/events/participant-events#participant-updated)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Audio and video](/docs/daily-js/guides/audio-video)
  </Card>
</CardGroup>


# localScreenAudio()
Source: https://docs.daily.co/reference/react-native/instance-methods/local-screen-audio

Returns whether the local screen share audio track is on.

`localScreenAudio()`

Returns whether the local screen share audio track is on. Returns `false` when the screen audio track state is `'off'` or `'blocked'`, `true` otherwise, and `null` if not in a call.

## Return value

Returns `boolean | null`.

## Example

```javascript theme={null}
if (call.localScreenAudio()) {
  console.log('Screen audio is being shared');
}
```

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyTrackState](/reference/react-native/types/daily-track-state)
  </Card>

  <Card title="Methods" icon="code">
    * [localScreenVideo()](/reference/react-native/instance-methods/local-screen-video)
    * [startScreenShare()](/reference/react-native/instance-methods/start-screen-share)
    * [updateScreenShare()](/reference/react-native/instance-methods/update-screen-share)
    * [stopScreenShare()](/reference/react-native/instance-methods/stop-screen-share)
  </Card>

  <Card title="Events" icon="bolt">
    * [participant-updated](/reference/react-native/events/participant-events#participant-updated)
  </Card>
</CardGroup>


# localScreenVideo()
Source: https://docs.daily.co/reference/react-native/instance-methods/local-screen-video

Returns whether the local screen share video track is on.

`localScreenVideo()`

Returns whether the local screen share video track is on. Returns `false` when the screen video track state is `'off'` or `'blocked'`, `true` otherwise, and `null` if not in a call.

## Return value

Returns `boolean | null`.

## Example

```javascript theme={null}
if (call.localScreenVideo()) {
  console.log('Screen is being shared');
}
```

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyTrackState](/reference/react-native/types/daily-track-state)
  </Card>

  <Card title="Methods" icon="code">
    * [localScreenAudio()](/reference/react-native/instance-methods/local-screen-audio)
    * [startScreenShare()](/reference/react-native/instance-methods/start-screen-share)
    * [updateScreenShare()](/reference/react-native/instance-methods/update-screen-share)
    * [stopScreenShare()](/reference/react-native/instance-methods/stop-screen-share)
  </Card>

  <Card title="Events" icon="bolt">
    * [participant-updated](/reference/react-native/events/participant-events#participant-updated)
  </Card>
</CardGroup>


# localVideo()
Source: https://docs.daily.co/reference/react-native/instance-methods/local-video

Returns whether the local camera is on.

`localVideo()`

Returns whether the local camera is on. Returns `false` when the local video track state is `'off'` or `'blocked'`, `true` otherwise, and `null` if not in a call.

## Return value

Returns `boolean | null`.

## Example

```javascript theme={null}
if (!call.localVideo()) {
  console.log('Camera is off, blocked, or not in a call');
}
```

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyTrackState](/reference/react-native/types/daily-track-state)
  </Card>

  <Card title="Methods" icon="code">
    * [localAudio()](/reference/react-native/instance-methods/local-audio)
    * [setLocalVideo()](/reference/react-native/instance-methods/set-local-video)
    * [participants()](/reference/react-native/instance-methods/participants)
  </Card>

  <Card title="Events" icon="bolt">
    * [participant-updated](/reference/react-native/events/participant-events#participant-updated)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Audio and video](/docs/daily-js/guides/audio-video)
  </Card>
</CardGroup>


# meetingSessionState()
Source: https://docs.daily.co/reference/react-native/instance-methods/meeting-session-state

Returns the current meeting session state, including shared data and network topology.

`meetingSessionState()`

Returns any shared data set via [`setMeetingSessionData()`](/reference/react-native/instance-methods/set-meeting-session-data) and the current network topology.

This method is synchronous — it does not return a Promise.

## Return value

Returns `DailyMeetingSessionState`:

<ResponseField name="data" type="unknown">
  Shared session data set by any participant via `setMeetingSessionData()`.
</ResponseField>

<ResponseField name="topology" type="string">
  Current network topology: `'sfu'`, `'peer'`, or `'none'`.
</ResponseField>

## Example

```javascript theme={null}
const { data, topology } = call.meetingSessionState();
console.log('Shared data:', data);
console.log('Topology:', topology);
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [setMeetingSessionData()](/reference/react-native/instance-methods/set-meeting-session-data)
    * [meetingSessionSummary()](/reference/react-native/instance-methods/meeting-session-summary)
  </Card>

  <Card title="Events" icon="bolt">
    * [meeting-session-state-updated](/reference/react-native/events/messaging-events#meeting-session-state-updated)
  </Card>
</CardGroup>


# meetingSessionSummary()
Source: https://docs.daily.co/reference/react-native/instance-methods/meeting-session-summary

Returns a summary of the current or most recently ended meeting session.

`meetingSessionSummary()`

Currently, this method simply returns the session's id. Future goals may include returning information like the total number of unique participants seen in the session or the session's start time and end timestamps.

This method is synchronous — it does not return a Promise.

## Return value

Returns `DailyMeetingSessionSummary`:

<ResponseField name="id" type="string">
  The unique ID of the meeting session. This ID is stable for the lifetime of the session and can be used for post-call lookups via the REST API — for example, to retrieve [logs](/reference/rest-api/logs/list-logs) or [transcripts](/reference/rest-api/transcripts/list-transcripts) associated with the session or find it in your dashboard.
</ResponseField>

## Example

```javascript theme={null}
const { id } = call.meetingSessionSummary();
console.log('Session ID:', id);

// Use the session ID after the call ends to fetch transcripts
const res = await fetch(`https://api.daily.co/v1/transcripts?mtgSessionId=${id}`, {
  headers: { Authorization: `Bearer ${DAILY_API_KEY}` },
});
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [meetingSessionState()](/reference/react-native/instance-methods/meeting-session-state)
    * [setMeetingSessionData()](/reference/react-native/instance-methods/set-meeting-session-data)
  </Card>

  <Card title="Events" icon="bolt">
    * [meeting-session-summary-updated](/reference/react-native/events/messaging-events#meeting-session-summary-updated)
  </Card>

  <Card title="REST API" icon="server">
    * [List logs](/reference/rest-api/logs/list-logs)
    * [List transcripts](/reference/rest-api/transcripts/list-transcripts)
  </Card>
</CardGroup>


# meetingState()
Source: https://docs.daily.co/reference/react-native/instance-methods/meeting-state

Returns the current meeting lifecycle state.

`meetingState()`

This method is synchronous — it does not return a Promise.

## Return value

Returns a `DailyMeetingState` string:

* `'new'` — instance created, no activity yet
* `'loading'` — loading the Daily bundle
* `'loaded'` — bundle loaded, ready to join
* `'joining-meeting'` — [`join()`](/reference/react-native/instance-methods/join) called, connection in progress
* `'joined-meeting'` — successfully joined the call
* `'left-meeting'` — left or ejected from the call
* `'error'` — a fatal error occurred; the connection is terminated but state is `'error'` rather than `'left-meeting'`

## Example

```javascript theme={null}
const state = call.meetingState();

if (state === 'joined-meeting') {
  console.log('In call');
} else if (state === 'error') {
  console.log('Fatal error — call terminated');
}
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [join()](/reference/react-native/instance-methods/join)
    * [leave()](/reference/react-native/instance-methods/leave)
    * [load()](/reference/react-native/instance-methods/load)
  </Card>

  <Card title="Events" icon="bolt">
    * [joining-meeting](/reference/react-native/events/lifecycle-events#joining-meeting)
    * [joined-meeting](/reference/react-native/events/lifecycle-events#joined-meeting)
    * [left-meeting](/reference/react-native/events/lifecycle-events#left-meeting)
    * [error](/reference/react-native/events/error-events#error)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Call lifecycle](/docs/daily-js/introduction#call-lifecycle)
  </Card>
</CardGroup>


# nativeInCallAudioMode()
Source: https://docs.daily.co/reference/react-native/instance-methods/native-in-call-audio-mode

Returns the current native audio mode used during a call on mobile.

`nativeInCallAudioMode()`

Returns the current native in-call audio mode: either `'video'` or `'voice'`.

The audio mode controls automatic audio device selection and routing. `'video'` mode prefers the speakerphone when no headset is connected, while `'voice'` mode prefers the earpiece.

## Return value

Returns `DailyNativeInCallAudioMode`, which is `'video' | 'voice'`.

## Example

```javascript theme={null}
const mode = call.nativeInCallAudioMode();
console.log('Current audio mode:', mode); // 'video' or 'voice'
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [setNativeInCallAudioMode()](/reference/react-native/instance-methods/set-native-in-call-audio-mode)
    * [setAudioDevice()](/reference/react-native/instance-methods/set-audio-device)
  </Card>
</CardGroup>


# off()
Source: https://docs.daily.co/reference/react-native/instance-methods/off

Removes an event listener from a Daily call event.

`off(eventName, callback)`

Removes a previously registered event listener. Follows the Node.js [`EventEmitter`](https://nodejs.org/api/events.html#events_class_eventemitter) interface. The `callback` must be the same function reference passed to [`on()`](/reference/react-native/instance-methods/on) or [`once()`](/reference/react-native/instance-methods/once).

Returns `this`, so calls can be chained.

## Parameters

<ParamField type="DailyEvent">
  The event name to unsubscribe from.
</ParamField>

<ParamField type="function">
  The exact function reference that was registered with `on()` or `once()`.
</ParamField>

## Return value

Returns `this` (the `DailyCall` instance) for chaining.

## Example

```javascript theme={null}
function handleParticipantJoined({ participant }) {
  console.log('Joined:', participant.user_name);
}

call.on('participant-joined', handleParticipantJoined);

// Later, remove the listener
call.off('participant-joined', handleParticipantJoined);
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [on()](/reference/react-native/instance-methods/on)
    * [once()](/reference/react-native/instance-methods/once)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Events](/docs/daily-js/concepts/events)
  </Card>
</CardGroup>


# on()
Source: https://docs.daily.co/reference/react-native/instance-methods/on

Subscribes to a Daily call event.

`on(eventName, callback)`

Subscribes to a Daily call event. Follows the Node.js [`EventEmitter`](https://nodejs.org/api/events.html#events_class_eventemitter) interface. The callback is called every time the event fires until explicitly removed with [`off()`](/reference/react-native/instance-methods/off).

Returns `this`, so calls can be chained.

## Parameters

<ParamField type="DailyEvent">
  The event name to subscribe to. See the [Events](/reference/react-native/events) reference for all available events.
</ParamField>

<ParamField type="function">
  Function called when the event fires. Receives an event object whose shape depends on the event.
</ParamField>

## Return value

Returns `this` (the `DailyCall` instance) for chaining.

## Example

```javascript theme={null}
call
  .on('joined-meeting', ({ participants }) => {
    console.log('Joined! Participants:', participants);
  })
  .on('participant-joined', ({ participant }) => {
    console.log('New participant:', participant.user_name);
  })
  .on('left-meeting', () => {
    console.log('Left the call');
  });
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [off()](/reference/react-native/instance-methods/off)
    * [once()](/reference/react-native/instance-methods/once)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Events](/docs/daily-js/concepts/events)
  </Card>
</CardGroup>


# once()
Source: https://docs.daily.co/reference/react-native/instance-methods/once

Subscribes to a Daily call event, firing only once.

`once(eventName, callback)`

Subscribes to a Daily call event and fires the callback exactly once, then automatically removes the listener. Follows the Node.js [`EventEmitter`](https://nodejs.org/api/events.html#events_class_eventemitter) interface.

Returns `this`, so calls can be chained.

## Parameters

<ParamField type="DailyEvent">
  The event name to subscribe to. See the [Events](/reference/react-native/events) reference for all available events.
</ParamField>

<ParamField type="function">
  Function called when the event fires. Automatically removed after the first invocation.
</ParamField>

## Return value

Returns `this` (the `DailyCall` instance) for chaining.

## Example

```javascript theme={null}
// Wait for the first joined-meeting event, then stop listening
call.once('joined-meeting', ({ participants }) => {
  console.log('Joined for the first time:', participants);
});
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [on()](/reference/react-native/instance-methods/on)
    * [off()](/reference/react-native/instance-methods/off)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Events](/docs/daily-js/concepts/events)
  </Card>
</CardGroup>


# participantCounts()
Source: https://docs.daily.co/reference/react-native/instance-methods/participant-counts

Returns the total number of present and hidden participants currently in the call.

`participantCounts()`

Returns participant totals for the current call, split between present and hidden participants. Useful when you only need counts — for example, a "people in room" indicator — without needing the full participant objects from [`participants()`](/reference/react-native/instance-methods/participants).

Values are only updated after [`join()`](/reference/react-native/instance-methods/join) completes. Pre-join steps like [`preAuth()`](/reference/react-native/instance-methods/pre-auth) and [`startCamera()`](/reference/react-native/instance-methods/start-camera) do not affect counts. The local participant is included in the totals.

## Return value

Returns `DailyParticipantCounts`:

<ResponseField name="present" type="number">
  Participants with `hasPresence: true` — visible to others and may be able to share media (depending on separate media permissions). These are the participants returned by [`participants()`](/reference/react-native/instance-methods/participants).
</ResponseField>

<ResponseField name="hidden" type="number">
  Participants with `hasPresence: false` — not visible to others and unable to share media. Common in large meetings where some participants are passive viewers.
</ResponseField>

## Example

```javascript theme={null}
const { present, hidden } = call.participantCounts();
const total = present + hidden;
console.log(`${total} in call (${present} present, ${hidden} hidden)`);
```

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyParticipantPermissions](/reference/react-native/types/daily-participant-permissions)
  </Card>

  <Card title="Methods" icon="code">
    * [participants()](/reference/react-native/instance-methods/participants)
    * [updateParticipant()](/reference/react-native/instance-methods/update-participant)
  </Card>

  <Card title="Events" icon="bolt">
    * [participant-counts-updated](/reference/react-native/events/participant-events#participant-counts-updated)
  </Card>
</CardGroup>


# participants()
Source: https://docs.daily.co/reference/react-native/instance-methods/participants

Returns an object containing all current participants in the call, keyed by participant ID.

`participants()`

Returns an object keyed by `'local'` for the local participant and by `session_id` for each remote participant.

## Return value

```typescript theme={null}
interface DailyParticipantsObject {
  local: DailyParticipant;
  [sessionId: string]: DailyParticipant;
}
```

<ResponseField name="session_id" type="string">
  A unique identifier for this specific join event. This is Daily's internal identifier, randomly generated on every `join()` call. It is the key used in `participants()` and `updateParticipant()` as well as REST API endpoints. It is not stable across reconnects — if a participant leaves and rejoins, they will have a new `session_id`.
</ResponseField>

<ResponseField name="user_id" type="string">
  The participant's user ID if set via a meeting token; otherwise defaults to `session_id`.
</ResponseField>

<ResponseField name="user_name" type="string">
  The participant's display name. Set via a meeting token, [`DailyCallOptions`](/reference/react-native/types/daily-call-options), or [`setUserName()`](/reference/react-native/instance-methods/set-user-name).
</ResponseField>

<ResponseField name="userData" type="object">
  Optional custom data associated with the participant. Only present if explicitly set via [`DailyCallOptions`](/reference/react-native/types/daily-call-options) or [`setUserData()`](/reference/react-native/instance-methods/set-user-data).
</ResponseField>

<ResponseField name="local" type="boolean">
  `true` for the local participant.
</ResponseField>

<ResponseField name="owner" type="boolean">
  `true` if the participant was granted owner status via a meeting token or was granted owner permissions.
</ResponseField>

<ResponseField name="joined_at" type="Date">
  A JavaScript `Date` object representing the time the participant joined the room. Not set until after the joined-meeting event. Note that the timestamp is set to the server’s clock time when the participant joins, so it may be slightly different from the local client’s clock.
</ResponseField>

<ResponseField name="networkQualityState" type="'good' | 'warning' | 'bad' | 'unknown'">
  The current network quality state of the participant. For the local participant, this matches the `networkState` value returned by [`getNetworkStats()`](/reference/react-native/instance-methods/get-network-stats) and in the `network-quality-change` events.
</ResponseField>

<ResponseField name="participantType" type="string | undefined">
  Describes the participant type for SIP, PSTN, and remote media player participants. Not set for standard web participants.

  <Expandable title="participantType values">
    | Value                 | Description                                                              |
    | --------------------- | ------------------------------------------------------------------------ |
    | `remote-media-player` | Participant is a remote media player                                     |
    | `sip-dial-in`         | Participant joined via a SIP device dialing into the Daily room          |
    | `sip-dial-out`        | Participant joined when a SIP endpoint was called using the dial-out API |
    | `pstn-dial-in`        | Participant joined via dialing a PIN-based phone number                  |
    | `pstn-dial-out`       | Participant joined when a phone number was called using the dial-out API |
    | `unknown`             | Participant is SIP/PSTN but Daily cannot determine the exact type        |
  </Expandable>
</ResponseField>

<ResponseField name="tracks" type="DailyParticipantTracks">
  An object whose keys are track types (`'audio'`, `'video'`, `'screenAudio'`, `'screenVideo'`, plus any custom track names) and whose values are [`DailyTrackState`](/reference/react-native/types/daily-track-state) objects describing subscription status, playback state, and the underlying `MediaStreamTrack`.
</ResponseField>

<ResponseField name="permissions" type="DailyParticipantPermissions">
  An object describing what the participant is permitted to do — which media they can send, which streams they can receive, and which admin actions they can perform. See [`DailyParticipantPermissions`](/reference/react-native/types/daily-participant-permissions) for the full field reference.
</ResponseField>

### Example return value

```json theme={null}
{
  "local": {
    "session_id": "3c9ba1ea-baab-4876-d501-21a1d49c0902",
    "user_name": "A. User Name",
    "user_id": "user_123",
    "local": true,
    "owner": true,
    "networkQualityState": "good",
    "joined_at": "Mon Oct 18 2021 13:39:56 GMT-0700 (Pacific Daylight Time)",
    "userData": {},
    "tracks": {
      "audio": {
        "state": "playable",
        "track": MediaStreamTrack,
        "persistentTrack": MediaStreamTrack
      },
      "video": {
        "state": "playable",
        "track": MediaStreamTrack,
        "persistentTrack": MediaStreamTrack
      }
    },
    "permissions": {
      "hasPresence": true,
      "canSend": ["video", "audio"],
      "canReceive": { "base": true },
      "canAdmin": false
    }
  },
  "e20b7ead-54c3-459e-800a-ca4f21882f2f": {
    "session_id": "e20b7ead-54c3-459e-800a-ca4f21882f2f",
    "user_name": "",
    "user_id": "e20b7ead-54c3-459e-800a-ca4f21882f2f",
    "local": false,
    "owner": false,
    "networkQualityState": "warning",
    "joined_at": "Mon Oct 18 2021 13:39:56 GMT-0700 (Pacific Daylight Time)",
    "tracks": {
      "audio": {
        "subscribed": true,
        "state": "playable",
        "track": MediaStreamTrack,
        "persistentTrack": MediaStreamTrack
      },
      "video": {
        "subscribed": false,
        "state": "sendable",
      },
      "screenAudio": {
        "subscribed": true,
        "state": "off",
        "off": { "byUser": true }
      },
      "screenVideo": {
        "subscribed": true,
        "state": "off",
        "off": { "byUser": true }
      },
    },
    "permissions": {
      "hasPresence": true,
      "canSend": ["video", "audio"],
      "canReceive": {
        "base": true,
        "byUserId": { "foo": false },
        "byParticipantId": {
          "42fb115a-6d42-4155-ae4f-c96629f5217d": {
            "audio": false
          }
        }
      },
      "canAdmin": ["participants", "streaming"]
    }
  }
}
```

## Example

```javascript theme={null}
const participants = call.participants();

// Access the local participant
const { session_id, user_name, tracks } = participants.local;

// Iterate over all remote participants
Object.values(participants).forEach((participant) => {
  if (!participant.local) {
    console.log(participant.session_id, participant.networkQualityState);
  }
});
```

## Deprecated properties

<Warning>
  **A note about the `audio`, `video`, and `screen` properties**

  These boolean properties indicate whether the corresponding track is available and ready to send. However, the value briefly becomes `false` when a track is loading. Use the `tracks` property for accurate, detailed track state instead.
</Warning>

<Warning>
  **A note about the `audioTrack`, `videoTrack`, and `screenVideoTrack` properties in call object mode**

  These properties expose the raw `MediaStreamTrack` a participant is sending, if available. Use `tracks[type].persistentTrack` instead for more reliable behavior.
</Warning>

<Warning>
  **A note about the `networkThreshold` property**

  This property corresponds to the deprecated `threshold` value in [`getNetworkStats()`](/reference/react-native/instance-methods/get-network-stats). Use `networkQualityState` instead.
</Warning>

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyParticipant](/reference/react-native/types/daily-participant)
    * [DailyTrackState](/reference/react-native/types/daily-track-state)
    * [DailyParticipantPermissions](/reference/react-native/types/daily-participant-permissions)
  </Card>

  <Card title="Methods" icon="code">
    * [updateParticipant()](/reference/react-native/instance-methods/update-participant)
    * [updateParticipants()](/reference/react-native/instance-methods/update-participants)
  </Card>

  <Card title="Events" icon="bolt">
    * [participant-joined](/reference/react-native/events/participant-events#participant-joined)
    * [participant-updated](/reference/react-native/events/participant-events#participant-updated)
    * [participant-left](/reference/react-native/events/participant-events#participant-left)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Participants](/docs/daily-js/concepts/participants)
    * [Permissions](/docs/daily-js/guides/permissions)
    * [Tracks and Media](/docs/daily-js/concepts/tracks)
  </Card>
</CardGroup>


# preAuth()
Source: https://docs.daily.co/reference/react-native/instance-methods/pre-auth

Pre-authenticates a participant with the server before joining a call.

`preAuth(properties?)`

Optionally called before [`join()`](/reference/react-native/instance-methods/join) to pre-authenticate with the server. This unlocks information that would otherwise only be available after `join()`:

* [`accessState()`](/reference/react-native/instance-methods/access-state) — whether the participant needs to wait in a lobby
* [`room()`](/reference/react-native/instance-methods/room) — room and domain configuration

If the Daily bundle isn't already loaded, `preAuth()` will load it. It also will give access to the local participant through the `participant-updated` and `participants()` method. It will not initialize the local media. To access local devices before joining, use [`startCamera()`](/reference/react-native/instance-methods/start-camera).

<Note>
  `url` and `token` are locked in when `preAuth()` is called. Attempting to pass different values to `join()` will result in an error.
</Note>

## Parameters

Takes the same properties as [`join()`](/reference/react-native/instance-methods/join). At minimum, provide:

<ParamField type="string">
  The Daily room URL.
</ParamField>

<ParamField type="string">
  Technically optional, but should be provided if a meeting token will be used for the call.
</ParamField>

## Return value

Returns `Promise<{ access: DailyAccess }>`. `access` is `'unknown'` or `{ level: 'none' | 'lobby' | 'full' }`.

## Example

```javascript theme={null}
const { access } = await call.preAuth({ url: DAILY_ROOM_URL, token: MEETING_TOKEN });

if (access.level === 'lobby') {
  // Show a waiting room UI before joining
  showWaitingRoom();
} else {
  await call.join({ url: DAILY_ROOM_URL, token: MEETING_TOKEN });
}
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [join()](/reference/react-native/instance-methods/join)
    * [accessState()](/reference/react-native/instance-methods/access-state)
    * [room()](/reference/react-native/instance-methods/room)
    * [startCamera()](/reference/react-native/instance-methods/start-camera)
  </Card>

  <Card title="Events" icon="bolt">
    * [access-state-updated](/reference/react-native/events/lifecycle-events#access-state-updated)
    * [participant-updated](/reference/react-native/events/participant-events#participant-updated)
  </Card>

  <Card title="REST API" icon="server">
    * [Create meeting token](/reference/rest-api/meeting-tokens/create-meeting-token)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Waiting room](/docs/daily-js/guides/waiting-room)
  </Card>
</CardGroup>


# removeLiveStreamingEndpoints()
Source: https://docs.daily.co/reference/react-native/instance-methods/remove-live-streaming-endpoints

Removes one or more RTMP endpoints from an active live stream.

`removeLiveStreamingEndpoints(options)`

<Badge>Paid plans only</Badge>

Removes one or more RTMP endpoints from an active live stream. Only works on streams started with the `endpoints` parameter in [`startLiveStreaming()`](/reference/react-native/instance-methods/start-live-streaming) — not on streams started with `rtmpUrl`.

<Warning>
  Do not use this method to remove all endpoints. To stop streaming entirely, call [`stopLiveStreaming()`](/reference/react-native/instance-methods/stop-live-streaming). Attempting to remove all endpoints with this method will fail and emit a [`nonfatal-error`](/reference/react-native/events/error-events#nonfatal-error) with type `'live-streaming-warning'`.
</Warning>

## Parameters

<ParamField type="DailyStreamingEndpoint[]">
  Array of endpoints to remove. Each entry must include the `endpoint` URL.
</ParamField>

<ParamField type="string">
  Optional. The live streaming instance to target when multiple streams are active.
</ParamField>

## Return value

`void`

## Example

```javascript theme={null}
await call.removeLiveStreamingEndpoints({
  endpoints: [
    { endpoint: 'rtmp://example.com/live/stream2' },
    { endpoint: 'rtmp://example.com/live/stream3' },
  ],
});
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [addLiveStreamingEndpoints()](/reference/react-native/instance-methods/add-live-streaming-endpoints)
    * [startLiveStreaming()](/reference/react-native/instance-methods/start-live-streaming)
    * [updateLiveStreaming()](/reference/react-native/instance-methods/update-live-streaming)
    * [stopLiveStreaming()](/reference/react-native/instance-methods/stop-live-streaming)
  </Card>

  <Card title="Events" icon="bolt">
    * [live-streaming-started](/reference/react-native/events/live-streaming-events#live-streaming-started)
    * [live-streaming-stopped](/reference/react-native/events/live-streaming-events#live-streaming-stopped)
    * [nonfatal-error](/reference/react-native/events/error-events#nonfatal-error)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Live streaming](/docs/daily-js/features/live-streaming)
    * [Live streaming overview](/docs/guides/features/live-streaming)
  </Card>
</CardGroup>


# requestAccess()
Source: https://docs.daily.co/reference/react-native/instance-methods/request-access

Requests full access to a call from the lobby.

`requestAccess({ access?, name })`

Requests full access to a call when the participant is currently in the lobby. Causes the participant to appear in the meeting admins' [`waitingParticipants()`](/reference/react-native/instance-methods/waiting-participants) set, triggering a [`waiting-participant-added`](/reference/react-native/events/participant-events#waiting-participant-added) event for admins.

Calling `requestAccess()` again with a new `name` updates the participant's entry in `waitingParticipants()`, triggering [`waiting-participant-updated`](/reference/react-native/events/participant-events#waiting-participant-updated).

<Note>
  Currently, the only valid request is `{ level: 'full' }`, and it can only be made from `{ level: 'lobby' }`. If access is denied, the response will show `{ level: 'lobby' }` but the participant will be immediately ejected with an [`error`](/reference/react-native/events/error-events#error) event.
</Note>

## Parameters

<ParamField type="object">
  Optional. The access level to request. Currently must be `{ level: 'full' }` if provided.
</ParamField>

<ParamField type="string">
  The participant's display name shown to the meeting admins in the waiting room.
</ParamField>

## Return value

Returns `Promise<{ access: DailyAccess, granted: boolean }>`:

<ResponseField name="access" type="DailyAccess">
  The new access level: `{ level: 'none' | 'lobby' | 'full' }`.
</ResponseField>

<ResponseField name="granted" type="boolean">
  Whether the access request was granted.
</ResponseField>

## Example

```javascript theme={null}
const { granted } = await call.requestAccess({
  access: { level: 'full' },
  name: 'Jane Smith',
});

if (granted) {
  console.log('Access granted — joining call');
} else {
  console.log('Access denied');
}
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [accessState()](/reference/react-native/instance-methods/access-state)
    * [waitingParticipants()](/reference/react-native/instance-methods/waiting-participants)
    * [preAuth()](/reference/react-native/instance-methods/pre-auth)
  </Card>

  <Card title="Events" icon="bolt">
    * [access-state-updated](/reference/react-native/events/lifecycle-events#access-state-updated)
    * [waiting-participant-added](/reference/react-native/events/participant-events#waiting-participant-added)
    * [waiting-participant-updated](/reference/react-native/events/participant-events#waiting-participant-updated)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Waiting room](/docs/daily-js/guides/waiting-room)
  </Card>
</CardGroup>


# room()
Source: https://docs.daily.co/reference/react-native/instance-methods/room

Returns configuration information about the current room.

`room(options?)`

Returns configuration information about the room you're currently connected to, including room-level settings, domain-level settings, and any token configuration.

Also available after [`preAuth()`](/reference/react-native/instance-methods/pre-auth), before joining. If a room URL has been specified but `join()` hasn't completed yet, resolves with `{ roomUrlPendingJoin: string }`. Resolves to `null` if no room URL has been specified.

## Parameters

<ParamField type="boolean">
  Optional. When `false`, only explicitly-set properties are returned, omitting defaults. Defaults to `true`.
</ParamField>

## Return value

Returns `Promise<DailyRoomInfo | DailyPendingRoomInfo | null>`.

`DailyRoomInfo` contains:

<ResponseField name="id" type="string">Room UUID.</ResponseField>
<ResponseField name="name" type="string">Room name.</ResponseField>

<ResponseField name="config" type="object">
  Room-level configuration. Some properties are omitted for security purposes. See [room configuration](/reference/rest-api/rooms/get-room#response-config) for the full property list.
</ResponseField>

<ResponseField name="domainConfig" type="object">
  Domain-level configuration. Some properties are omitted for security purposes. See [domain configuration](/reference/rest-api/domain) for the full property list.
</ResponseField>

<ResponseField name="tokenConfig" type="object">
  Configuration from the meeting token used to join, if any. See [meeting tokens](/reference/rest-api/meeting-tokens/create-meeting-token) for all properties.
</ResponseField>

## Example

```javascript theme={null}
const info = await call.room();

if (info && 'config' in info) {
  console.log('Max participants:', info.config.max_participants);
  console.log('Recording enabled:', info.config.enable_recording);
}
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [preAuth()](/reference/react-native/instance-methods/pre-auth)
    * [join()](/reference/react-native/instance-methods/join)
  </Card>

  <Card title="REST API" icon="server">
    * [Get room](/reference/rest-api/rooms/get-room)
    * [Get domain config](/reference/rest-api/domain/get-domain-config)
    * [Create meeting token](/reference/rest-api/meeting-tokens/create-meeting-token)
  </Card>
</CardGroup>


# sendAppMessage()
Source: https://docs.daily.co/reference/react-native/instance-methods/send-app-message

Sends a message to one or more participants in the call.

`sendAppMessage(data, recipient?)`

Sends a message to other participants during the call. Messages are delivered only to participants currently in the call — they are not stored or replayed for late joiners. Broadcast messages are not delivered to the sender.

## Parameters

<ParamField type="object">
  A JSON-serializable object. Must be within the 4KB size limit.
</ParamField>

<ParamField type="string | string[]">
  Who should receive the message. Pass a participant `session_id`, an array of `session_id`s, or `'*'` to broadcast to everyone. Defaults to `'*'`.

  Note: use `session_id`, not `user_id`.
</ParamField>

## Return value

Returns `this` for chaining.

## Example

```javascript theme={null}
// Broadcast to everyone
call.sendAppMessage({ type: 'reaction', emoji: '👋' });

// Send to a specific participant
call.sendAppMessage({ type: 'dm', text: 'Hey!' }, participantSessionId);

// Send to a set of participants
call.sendAppMessage({ type: 'alert' }, [id1, id2]);
```

## See also

<CardGroup>
  <Card title="Events" icon="bolt">
    * [app-message](/reference/react-native/events/messaging-events#app-message)
  </Card>
</CardGroup>


# sendDTMF()
Source: https://docs.daily.co/reference/react-native/instance-methods/send-dtmf

Sends DTMF tones during a dial-out call.

`sendDTMF(options)`

Sends DTMF tones to a dial-out participant — for example, to navigate an IVR menu after dialing out to a phone number.

## Parameters

<ParamField type="string">
  The `session_id` of the dial-out participant to send tones to.
</ParamField>

<ParamField type="string">
  The DTMF tones to send as a string (e.g. `'1234#'`). Valid characters are `0–9`, `A–D`, `#`, and `*`. Maximum 20 characters.
</ParamField>

<ParamField type="string">
  DTMF method: `'sip-info'`, `'telephone-event'`, or `'auto'`. Defaults to `'auto'`, which selects the best method based on the SIP endpoint's capabilities.
</ParamField>

<ParamField type="number">
  Duration in milliseconds per DTMF digit. Must be an integer between `50` and `2000`. Defaults to `500`.
</ParamField>

## Return value

Returns `Promise<void>`.

## Errors

The following errors may be thrown:

* `sessionId and tones are mandatory parameters of type string`
* `tones string must be upto 20 characters`
* `{character} is not valid DTMF tone` — valid tones are `0–9`, `A–D`, `#`, `*`
* `digitDurationMs must be a finite integer number`
* `digitDurationMs must be between 50ms and 2000ms, the default value is 500ms`

## Example

```javascript theme={null}
// Navigate an IVR: press 1 then confirm with #
await call.sendDTMF({ sessionId: dialOutSessionId, tones: '1#' });

// Use a shorter digit duration
await call.sendDTMF({ sessionId: dialOutSessionId, tones: '2', digitDurationMs: 200 });
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [startDialOut()](/reference/react-native/instance-methods/start-dial-out)
    * [stopDialOut()](/reference/react-native/instance-methods/stop-dial-out)
  </Card>

  <Card title="Events" icon="bolt">
    * [dialout-connected](/reference/react-native/events/telephony-events#dialout-connected)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Dial-in / dial-out](/docs/daily-js/features/dialin-dialout)
  </Card>
</CardGroup>


# setAudioDevice()
Source: https://docs.daily.co/reference/react-native/instance-methods/set-audio-device

Switch to a specific audio input device on a mobile device by device ID.

`setAudioDevice(deviceId)`

Switches the local audio stream to the device identified by `deviceId`. The `deviceId` should match a `deviceId` value returned by [`enumerateDevices()`](/reference/react-native/instance-methods/enumerate-devices).

If the requested device becomes unavailable (for example, a Bluetooth device that disconnects), the resolved `deviceId` may differ from the one requested.

## Parameters

<ParamField type="string">
  The `deviceId` of the audio device to switch to.
</ParamField>

## Return value

Returns a `Promise<{ deviceId: string }>` with the `deviceId` of the audio device that was actually applied.

## Example

```javascript theme={null}
const { devices } = await call.enumerateDevices();
const speakerphone = devices.find(
  (d) => d.kind === 'audioinput' && d.label.includes('Speakerphone')
);
if (speakerphone) {
  const { deviceId } = await call.setAudioDevice(speakerphone.deviceId);
  console.log('Now using audio device:', deviceId);
}
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [enumerateDevices()](/reference/react-native/instance-methods/enumerate-devices)
    * [getInputDevices()](/reference/react-native/instance-methods/get-input-devices)
    * [nativeInCallAudioMode()](/reference/react-native/instance-methods/native-in-call-audio-mode)
    * [setNativeInCallAudioMode()](/reference/react-native/instance-methods/set-native-in-call-audio-mode)
  </Card>
</CardGroup>


# setCamera()
Source: https://docs.daily.co/reference/react-native/instance-methods/set-camera

Switch to a specific camera on a mobile device by device ID.

`setCamera(cameraDeviceId)`

Switches the local camera stream to the device identified by `cameraDeviceId`. The `cameraDeviceId` should match a `deviceId` value returned by [`enumerateDevices()`](/reference/react-native/instance-methods/enumerate-devices).

Because [`enumerateDevices()`](/reference/react-native/instance-methods/enumerate-devices) classifies cameras by their `facing` value (`'user'` or `'environment'`), this method can be used to switch between front and rear cameras. Has no effect if `cameraDeviceId` matches the camera already in use.

This method can only be invoked while video is unmuted.

## Parameters

<ParamField type="string">
  The `deviceId` of the camera to switch to. Must match a `deviceId` from [`enumerateDevices()`](/reference/react-native/instance-methods/enumerate-devices).
</ParamField>

## Return value

Returns a `Promise<{ device: { facingMode: DailyCameraFacingMode } | null }>` with the newly active camera's facing mode (`'user'` or `'environment'`), or `null` if no device was found.

## Example

```javascript theme={null}
const { devices } = await call.enumerateDevices();
const rearCamera = devices.find(
  (d) => d.kind === 'videoinput' && d.facing === 'environment'
);
if (rearCamera) {
  await call.setCamera(rearCamera.deviceId);
}
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [cycleCamera()](/reference/react-native/instance-methods/cycle-camera)
    * [getCameraFacingMode()](/reference/react-native/instance-methods/get-camera-facing-mode)
    * [enumerateDevices()](/reference/react-native/instance-methods/enumerate-devices)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Audio and video](/docs/daily-js/guides/audio-video)
  </Card>
</CardGroup>


# setIceConfig()
Source: https://docs.daily.co/reference/react-native/instance-methods/set-ice-config

Configures custom TURN servers for a Daily call.

`setIceConfig(iceConfig?)`

<Note>
  This is part of the **Advanced Firewall Control** add-on. [Contact Sales](https://www.daily.co/company/contact/sales/) to enable this feature.
</Note>

Configures custom TURN servers to use instead of (or alongside) Daily's default TURN servers. Call this periodically — at least once an hour — to keep ICE credentials fresh for reconnections and new peer connections.

For best results, use TURN credentials with a validity period greater than one hour.

## Parameters

<ParamField type="RTCIceServer[]">
  Array of TURN/STUN server configurations. Each entry follows the [`RTCIceServer`](https://w3c.github.io/webrtc-pc/#dom-rtciceserver) shape:

  * `urls`: `string | string[]` (required): Single or multiple STUN/TURN URLs.
  * `username`: `string` (optional): Username for the TURN server(s) specified.
  * `credential`: `string` (optional): Credential for the TURN server(s) specified.
</ParamField>

<ParamField type="'front' | 'back' | 'replace'">
  Controls how custom servers are ordered relative to Daily's defaults:

  * `'front'` — custom servers are tried first (default)
  * `'back'` — Daily's servers are tried first
  * `'replace'` — only custom servers are used

  Most implementations try all servers and pick the lowest-latency option, so ordering rarely matters. Use `'replace'` only when you need to force all traffic through your own TURN servers.
</ParamField>

<ParamField type="'all' | 'relay'">
  * `'all'` (default) uses all candidates.
  * `'relay'` forces relay-only (TURN) candidates — useful for testing firewall traversal but not recommended for production.
</ParamField>

## Return value

Returns `this` for chaining.

## Example

```javascript theme={null}
call.setIceConfig({
  iceServers: [
    {
      urls: [
        'turn:turnserver.example.org:3478?transport=udp',
        'turns:turnserver.example.org:443?transport=tcp',
      ],
      username: 'USER_NAME',
      credential: 'CREDENTIAL',
    },
  ],
  placement: 'front',
});

// Refresh credentials every hour
setInterval(() => call.setIceConfig({ iceServers: [...] }), 60 * 60 * 1000);
```

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyCallOptions: iceConfig](/reference/react-native/types/daily-call-options#param-ice-config)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Call quality](/docs/daily-js/guides/network-quality)
    * [Corporate firewalls, NATs, and allowed IP list](/docs/guides/privacy-and-security/corporate-firewalls-nats-allowed-ip-list)
  </Card>
</CardGroup>


# setLocalAudio()
Source: https://docs.daily.co/reference/react-native/instance-methods/set-local-audio

Mutes or unmutes the local microphone.

`setLocalAudio(enabled)`

Requires `join()` or `startCamera()` to be called first.

## Parameters

<ParamField type="boolean">
  `true` to unmute the microphone, `false` to mute it.
</ParamField>

## Return value

Returns `this` for chaining.

## Example

```javascript theme={null}
// Mute the mic
call.setLocalAudio(false);

// Unmute the mic
call.setLocalAudio(true);
```

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyCallOptions: startAudioOff](/reference/react-native/types/daily-call-options#param-start-audio-off)
    * [DailyTrackState](/reference/react-native/types/daily-track-state)
  </Card>

  <Card title="Methods" icon="code">
    * [localAudio()](/reference/react-native/instance-methods/local-audio)
    * [setLocalVideo()](/reference/react-native/instance-methods/set-local-video)
  </Card>

  <Card title="Events" icon="bolt">
    * [participant-updated](/reference/react-native/events/participant-events#participant-updated)
    * [track-started](/reference/react-native/events/media-events#track-started)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Audio and video](/docs/daily-js/guides/audio-video)
  </Card>
</CardGroup>


# setLocalVideo()
Source: https://docs.daily.co/reference/react-native/instance-methods/set-local-video

Enables or disables the local camera.

`setLocalVideo(enabled)`

Requires `join()` or `startCamera()` to be called first.

## Parameters

<ParamField type="boolean">
  `true` to enable the camera, `false` to disable it.
</ParamField>

## Return value

Returns `this` for chaining.

## Example

```javascript theme={null}
// Disable camera
call.setLocalVideo(false);

// Re-enable camera
call.setLocalVideo(true);
```

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyCallOptions: startVideoOff](/reference/react-native/types/daily-call-options#param-start-video-off)
    * [DailyTrackState](/reference/react-native/types/daily-track-state)
  </Card>

  <Card title="Methods" icon="code">
    * [localVideo()](/reference/react-native/instance-methods/local-video)
    * [setLocalAudio()](/reference/react-native/instance-methods/set-local-audio)
  </Card>

  <Card title="Events" icon="bolt">
    * [participant-updated](/reference/react-native/events/participant-events#participant-updated)
    * [track-started](/reference/react-native/events/media-events#track-started)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Audio and video](/docs/daily-js/guides/audio-video)
  </Card>
</CardGroup>


# setMeetingSessionData()
Source: https://docs.daily.co/reference/react-native/instance-methods/set-meeting-session-data

Sets arbitrary shared data on the current meeting session, synced to all participants.

`setMeetingSessionData(data, mergeStrategy?)`

Writes to a shared key-value store scoped to the current meeting session. All participants receive the update in near real-time — remote clients typically consume changes via the [`meeting-session-state-updated`](/reference/react-native/events/messaging-events#meeting-session-state-updated) event, or by polling [`meetingSessionState()`](/reference/react-native/instance-methods/meeting-session-state). Data is not persisted after the session ends.

## Parameters

<ParamField type="unknown">
  A map-like JavaScript object that:

  * Is serializable to JSON
  * Has a max payload size of 100KB
  * Can be shallow-merged
</ParamField>

<ParamField type="'replace' | 'shallow-merge'">
  How to combine the new data with the existing session data.

  * `'replace'` (default) — replaces the entire existing data object.
  * `'shallow-merge'` — merges top-level keys, leaving unaffected keys intact. Note that nested objects are replaced entirely, not recursively merged.
</ParamField>

## Return value

Returns `void`. To observe changes, listen to the [`meeting-session-state-updated`](/reference/react-native/events/messaging-events#meeting-session-state-updated) event or poll [`meetingSessionState()`](/reference/react-native/instance-methods/meeting-session-state).

## Rate limiting

Updates are batched and synced at most once per second. If multiple clients make conflicting `'replace'` or overlapping `'shallow-merge'` calls in rapid succession, precise ordering is not guaranteed.

This makes `setMeetingSessionData()` unsuitable for high-frequency real-time use cases where sub-second updates matter.

## Examples

### Replace

```javascript theme={null}
// Current data: { address: { country: 'Finland' } }
call.setMeetingSessionData({ code: '358' }, 'replace');
// New data: { code: '358' }
```

### Shallow merge

```javascript theme={null}
// Current data: { address: { country: 'Finland' } }
call.setMeetingSessionData({ code: '358' }, 'shallow-merge');
// New data: { address: { country: 'Finland' }, code: '358' }

call.setMeetingSessionData({ address: { city: 'Helsinki' } }, 'shallow-merge');
// New data: { address: { city: 'Helsinki' }, code: '358' }
// Note: address.country was lost because nested objects are replaced, not merged
```

### Listening for updates

```javascript theme={null}
call.on('meeting-session-state-updated', ({ meetingSessionState }) => {
  console.log('Session data updated:', meetingSessionState.data);
});
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [meetingSessionState()](/reference/react-native/instance-methods/meeting-session-state)
  </Card>

  <Card title="Events" icon="bolt">
    * [meeting-session-state-updated](/reference/react-native/events/messaging-events#meeting-session-state-updated)
  </Card>
</CardGroup>


# setNativeInCallAudioMode()
Source: https://docs.daily.co/reference/react-native/instance-methods/set-native-in-call-audio-mode

Set the native audio routing mode for a call on mobile — speakerphone or earpiece.

`setNativeInCallAudioMode(inCallAudioMode)`

Sets the native in-call audio mode. Controls how the device routes audio when no external audio device (headset or Bluetooth) is connected:

* `'video'` — prefers the speakerphone (suitable for video calls viewed at a distance)
* `'voice'` — prefers the earpiece (suitable for audio-only or private calls)

If a call is already in progress and automatic device management is enabled, the new audio mode is applied immediately.

Returns `this` for chaining.

## Parameters

<ParamField type="'video' | 'voice'">
  The audio mode to use. `'video'` routes to speakerphone; `'voice'` routes to the earpiece when no headset is connected.
</ParamField>

## Return value

Returns `this` (the call object), enabling method chaining.

## Example

```javascript theme={null}
// Use earpiece mode for a voice call
call.setNativeInCallAudioMode('voice');

// Switch to speakerphone mode for a video call
call.setNativeInCallAudioMode('video');
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [nativeInCallAudioMode()](/reference/react-native/instance-methods/native-in-call-audio-mode)
    * [setAudioDevice()](/reference/react-native/instance-methods/set-audio-device)
  </Card>
</CardGroup>


# setProxyUrl()
Source: https://docs.daily.co/reference/react-native/instance-methods/set-proxy-url

Sets or clears the proxy URL for routing Daily connections through a custom proxy server.

`setProxyUrl(proxyUrl?)`

<Note>
  This is part of the **Advanced Firewall Control** add-on. [Contact Sales](https://www.daily.co/company/contact/sales/) to enable this feature.
</Note>

Updates or clears the [`proxyUrl`](/reference/react-native/types/daily-call-options#param-proxy-url) setting at runtime. Use this when participants are behind firewall policies that block direct access to Daily's web domains — the proxy server forwards Daily's HTTPS and WebSocket connections on their behalf.

The `proxyUrl` is intended to be set at call creation time via `createFrame()` or `createCallObject()`. Use `setProxyUrl()` to change or clear it dynamically.

## Parameters

<ParamField type="string">
  The URL of your proxy server. If omitted or empty, the proxy setting is cleared and connections go directly to Daily.
</ParamField>

## Return value

Returns `this` for chaining.

## Proxy requirements

The proxy server must forward HTTPS connections to:

* `https://prod-ks.pluot.blue/*`
* `https://c.daily.co/*`
* `https://gs.daily.co/*`

It must also proxy HTTPS-to-WebSocket upgrades for `*.wss.daily.co` and `*-wss.daily.co`. Proxying all of `*.daily.co` is recommended if possible.

<Note>
  The URLs above are subject to change in future releases of `daily-js`.
</Note>

## Examples

```javascript theme={null}
// Set at call creation time
const call = Daily.createFrame({
  dailyConfig: {
    proxyUrl: 'https://my-proxy-server:8080',
  },
});

// Update at runtime
call.setProxyUrl('https://my-proxy-server:8080');

// Clear the proxy setting
call.setProxyUrl();
```

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyCallOptions: proxyUrl](/reference/react-native/types/daily-call-options#param-proxy-url)
  </Card>

  <Card title="Methods" icon="code">
    * [setIceConfig()](/reference/react-native/instance-methods/set-ice-config)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Corporate firewalls, NATs, and allowed IP list](/docs/guides/privacy-and-security/corporate-firewalls-nats-allowed-ip-list)
  </Card>
</CardGroup>


# setSubscribeToTracksAutomatically()
Source: https://docs.daily.co/reference/react-native/instance-methods/set-subscribe-to-tracks-automatically

Enables or disables automatic subscription to all participant tracks.

`setSubscribeToTracksAutomatically(enabled)`

Toggles automatic track subscription during a call. When enabled, Daily automatically subscribes to audio, video, and screen tracks from all participants. When disabled, no new subscriptions are created automatically — you manage subscriptions manually via [`updateParticipant()`](/reference/react-native/instance-methods/update-participant).

Must be called while in a call. To start a call without subscribing to any tracks, set [`subscribeToTracksAutomatically: false`](/reference/react-native/types/daily-call-options#param-subscribe-to-tracks-automatically) at call creation time.

<Note>
  Track subscriptions only apply over SFU connections. In P2P calls, all tracks are always received.
</Note>

## Parameters

<ParamField type="boolean">
  `true` to subscribe to all tracks automatically, `false` to manage subscriptions manually.
</ParamField>

## Return value

Returns `this` for chaining.

## Example

```javascript theme={null}
// Stop auto-subscribing, then selectively subscribe to specific participants
call.setSubscribeToTracksAutomatically(false);

call.updateParticipant(participantId, {
  setSubscribedTracks: { audio: true, video: true, screenVideo: false },
});
```

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyCallOptions: subscribeToTracksAutomatically](/reference/react-native/types/daily-call-options#param-subscribe-to-tracks-automatically)
  </Card>

  <Card title="Methods" icon="code">
    * [updateParticipant()](/reference/react-native/instance-methods/update-participant)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Track subscriptions](/docs/daily-js/concepts/tracks#track-subscription)
    * [Introduction to video call architecture](/docs/guides/architecture-and-monitoring/intro-to-video-arch#track-subscriptions)
  </Card>
</CardGroup>


# setUserData()
Source: https://docs.daily.co/reference/react-native/instance-methods/set-user-data

Sets arbitrary custom data on the local participant, visible to all other participants.

`setUserData(data)`

Associates arbitrary custom data with the local participant and syncs it to all other participants. The data is stored in the `userData` property of the local participant's [`DailyParticipant`](/reference/react-native/types/daily-participant) object and replaces any previously set value.

A participant can only set their own `userData` — not another participant's.

<Note>
  Updates are rate limited. The local copy of `userData` is updated immediately, but propagation to other participants is throttled. All participants are guaranteed to converge on the same final value.
</Note>

## Parameters

<ParamField type="unknown">
  Any JSON-serializable value with a max payload size of 4KB. Pass `undefined` to remove `userData` from the participant object entirely.
</ParamField>

## Return value

Returns a `Promise` that resolves to `{ userData: unknown }` — the value that was set.

## Custom avatar in Daily Prebuilt

Setting an `avatar` key displays a custom image on the participant's muted tile and in the People tab. The URL must be publicly accessible.

```javascript theme={null}
call.setUserData({ avatar: 'https://example.com/avatar.jpg' });
```

<img alt="Video call participant tile showing a custom avatar image" />

## Examples

### Custom application state

```javascript theme={null}
call.setUserData({ hasHandRaised: true });
```

### Reading userData

```javascript theme={null}
const local = call.participants()['local'];
console.log(local.userData);

const remote = call.participants()[participantSessionId];
console.log(remote.userData);
```

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyCallOptions: userData](/reference/react-native/types/daily-call-options#param-user-data)
    * [DailyParticipant](/reference/react-native/types/daily-participant)
  </Card>

  <Card title="Methods" icon="code">
    * [participants()](/reference/react-native/instance-methods/participants)
    * [setUserName()](/reference/react-native/instance-methods/set-user-name)
  </Card>

  <Card title="Events" icon="bolt">
    * [participant-updated](/reference/react-native/events/participant-events#participant-updated)
  </Card>
</CardGroup>


# setUserName()
Source: https://docs.daily.co/reference/react-native/instance-methods/set-user-name

Sets the local participant's display name, visible to all other participants.

`setUserName(name, options?)`

In Daily Prebuilt, the name appears as a video overlay and in the chat. In custom call object builds, it is available on the `user_name` property of the local `DailyParticipant` object.

## Parameters

<ParamField type="string">
  The display name to set.
</ParamField>

<ParamField type="boolean">
  When `true`, the name change applies only for the current meeting and does not persist to the participant's profile. Defaults to `false`.
</ParamField>

## Return value

Returns a `Promise` that resolves to `{ userName: string }` — the name that was set.

## Example

```javascript theme={null}
const { userName } = await call.setUserName('Ada Lovelace');
console.log('Name set to:', userName);

// Change name for this meeting only
await call.setUserName('Ada (presenting)', { thisMeetingOnly: true });
```

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyCallOptions: userName](/reference/react-native/types/daily-call-options#param-user-name)
    * [DailyParticipant](/reference/react-native/types/daily-participant)
  </Card>

  <Card title="Methods" icon="code">
    * [participants()](/reference/react-native/instance-methods/participants)
    * [setUserData()](/reference/react-native/instance-methods/set-user-data)
  </Card>

  <Card title="Events" icon="bolt">
    * [participant-updated](/reference/react-native/events/participant-events#participant-updated)
  </Card>

  <Card title="REST API" icon="server">
    * [Create meeting token: user\_name](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties-user-name)
  </Card>
</CardGroup>


# sipCallTransfer()
Source: https://docs.daily.co/reference/react-native/instance-methods/sip-call-transfer

Transfers a SIP or PSTN participant to another Daily room or external endpoint, keeping Daily in the call path.

`sipCallTransfer(options)`

SIP-to-SIP, PSTN-to-PSTN, SIP-to-PSTN, and PSTN-to-SIP transfers are all supported.

Requires the initiating participant to be [an owner or admin](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties-permissions).

Use [`sipRefer()`](/reference/react-native/instance-methods/sip-refer) instead when Daily should exit the media path entirely after the transfer.

<Warning>
  When transferring to an external SIP address or PSTN phone number, the call remains anchored on Daily. Both call connections stay active during the transfer period, and usage continues to be billed accordingly.
</Warning>

## Parameters

<ParamField type="string">
  The `session_id` of the SIP or PSTN participant to transfer.
</ParamField>

<ParamField type="string">
  The destination SIP address (e.g., `sip:someone@sip.abc.com`) or PSTN number (e.g., `+16586574500`) to transfer the call to.
</ParamField>

<ParamField type="string">
  Caller ID override. Only valid when transferring to a PSTN number.
</ParamField>

<ParamField type="string">
  Extension to dial after the destination connects. Only valid with a PSTN `toEndPoint`. Max 20 characters.
</ParamField>

<ParamField type="number">
  Seconds to wait after the destination connects before dialing the extension.
</ParamField>

## Return value

Returns a `Promise<void>`.

## Examples

```javascript theme={null}
// Transfer a SIP call to another Daily room
await call.sipCallTransfer({
  sessionId: 'ad96802d-c511-4d9a-a485-1a1af62732d0',
  toEndPoint: 'sip:room@sip.daily.co',
});

// Transfer a PSTN call with caller ID
await call.sipCallTransfer({
  sessionId: 'ad96802d-c511-4d9a-a485-1a1af62732d0',
  toEndPoint: '+16586574500',
  callerId: '99ae8efd-d32c-4786-9bb4-77735a4e7d22',
});
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [sipRefer()](/reference/react-native/instance-methods/sip-refer)
    * [startDialOut()](/reference/react-native/instance-methods/start-dial-out)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Dial-in / dial-out transfers](/docs/guides/features/dial-in-dial-out/transfers)
  </Card>
</CardGroup>


# sipRefer()
Source: https://docs.daily.co/reference/react-native/instance-methods/sip-refer

Hands off a SIP call to an external endpoint and removes Daily from the media path.

`sipRefer(options)`

Sends a SIP REFER to instruct the original SIP caller to establish a direct connection with a new destination. Once the REFER succeeds, Daily exits the media path entirely and stops billing for that leg.

Use this instead of [`sipCallTransfer()`](/reference/react-native/instance-methods/sip-call-transfer) when Daily should not remain in the call path after the transfer. If Daily should stay anchored in the call, use `sipCallTransfer()`.

Requires the initiating participant to be [an owner or admin](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties-permissions).

<Warning>
  Each call to `sipRefer()` is billed separately. A one-time SIP REFER fee may apply when this method is called. Contact support for pricing details.
</Warning>

## Parameters

<ParamField type="string">
  The `session_id` of the SIP participant to transfer.
</ParamField>

<ParamField type="string">
  The destination SIP URI (e.g., `sip:support@sip.example.com`) to refer the caller to.
</ParamField>

## Return value

Returns a `Promise<void>`.

When the REFER is triggered, [`participant-left`](/reference/react-native/events/participant-events#participant-left), [`dialin-stopped`](/reference/react-native/events/telephony-events#dialin-stopped), and [`dialout-stopped`](/reference/react-native/events/telephony-events#dialout-stopped) events fire in the originating room. `calltransfer` webhooks (`triggered`, `initiated`, `answered`, `complete`) are also emitted.

## Example

```javascript theme={null}
await call.sipRefer({
  sessionId: 'ad96802d-c511-4d9a-a485-1a1af62732d0',
  toEndPoint: 'sip:support@sip.example.com',
});
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [sipCallTransfer()](/reference/react-native/instance-methods/sip-call-transfer)
    * [startDialOut()](/reference/react-native/instance-methods/start-dial-out)
  </Card>

  <Card title="Events" icon="bolt">
    * [dialin-stopped](/reference/react-native/events/telephony-events#dialin-stopped)
    * [dialout-stopped](/reference/react-native/events/telephony-events#dialout-stopped)
    * [participant-left](/reference/react-native/events/participant-events#participant-left)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Dial-in / dial-out transfers](/docs/guides/features/dial-in-dial-out/transfers)
  </Card>

  <Card title="REST API" icon="server">
    * [calltransfer-triggered webhook](/reference/rest-api/webhooks/events/calltransfer-triggered)
    * [calltransfer-initiated webhook](/reference/rest-api/webhooks/events/calltransfer-initiated)
    * [calltransfer-answered webhook](/reference/rest-api/webhooks/events/calltransfer-answered)
    * [calltransfer-completed webhook](/reference/rest-api/webhooks/events/calltransfer-completed)
  </Card>
</CardGroup>


# startCamera()
Source: https://docs.daily.co/reference/react-native/instance-methods/start-camera

Acquires camera and microphone access before joining a call.

`startCamera(properties?)`

Acquires local camera and microphone access as part of the pre-join flow, without entering a call. Useful for building a "hair check" or lobby screen where participants can preview and configure their devices before joining.

Accepts the same [`DailyCallOptions`](/reference/react-native/types/daily-call-options) object as the factory methods. `url` is not required.

<Warning>
  Do not call `startCamera()` after `join()`. Use [`setLocalVideo()`](/reference/react-native/instance-methods/set-local-video) or [`setLocalAudio()`](/reference/react-native/instance-methods/set-local-audio) to control devices mid-call.
</Warning>

`join()` calls `startCamera()` internally — if you don't need pre-join device access, `join()` alone is sufficient.

## Parameters

<ParamField type="DailyCallOptions">
  Call configuration options. See [`DailyCallOptions`](/reference/react-native/types/daily-call-options) for the full list of available fields.
</ParamField>

## Return value

Returns a `Promise<DailyDeviceInfos>` with the active camera, mic, and speaker. See [`getInputDevices()`](/reference/react-native/instance-methods/get-input-devices) for the full shape.

## Example

```javascript theme={null}
const call = Daily.createCallObject();

// Preview devices before joining
await call.startCamera({ url: 'https://your-domain.daily.co/room-name' });

const { local } = call.participants();
const audioTrack = local.tracks.audio.track;
const videoTrack = local.tracks.video.track;

// Later, join the call when ready
await call.join();
```

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyCallOptions](/reference/react-native/types/daily-call-options)
  </Card>

  <Card title="Methods" icon="code">
    * [join()](/reference/react-native/instance-methods/join)
    * [setLocalAudio()](/reference/react-native/instance-methods/set-local-audio)
    * [setLocalVideo()](/reference/react-native/instance-methods/set-local-video)
  </Card>

  <Card title="Events" icon="bolt">
    * [started-camera](/reference/react-native/events/settings-events#started-camera)
    * [participant-updated](/reference/react-native/events/participant-events#participant-updated)
    * [track-started](/reference/react-native/events/media-events#track-started)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Audio and video](/docs/daily-js/guides/audio-video)
    * [Tracks and media](/docs/daily-js/concepts/tracks)
  </Card>
</CardGroup>


# startDialOut()
Source: https://docs.daily.co/reference/react-native/instance-methods/start-dial-out

Initiates an outbound SIP or PSTN call from a Daily room.

`startDialOut(options)`

The dialed participant joins the room as a regular participant. Requires the initiating participant to be [an owner or admin](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties-permissions).

## Parameters

`options: DailyStartDialoutSipOptions | DailyStartDialoutPhoneOptions`

Provide either `sipUri` (SIP) or `phoneNumber` (PSTN) — not both. Fields marked as SIP-only or PSTN-only are ignored when used with the wrong option type.

### `DailyStartDialoutSipOptions`

<ParamField type="string">
  The SIP URI to dial (e.g. `sip:bob@example.com`). Must conform to [RFC 3261](https://tools.ietf.org/html/rfc3261#section-25). Query parameters appended to the URI appear as `X-` SIP headers in the invite (e.g. `sip:bob@example.com?X-myHeader=value`).
</ParamField>

<ParamField type="string">
  Display name shown for the participant when they join. Defaults to the SIP username from the URI.
</ParamField>

<ParamField type="string">
  Custom identifier for the participant (max 36 characters). See [userId guidance](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties-user-id).
</ParamField>

<ParamField type="boolean">
  Enable/disable SIP video.
</ParamField>

<ParamField type="DailyDialOutCodecs">
  Preferred codecs. The first entry in each array is used; if the remote party doesn't support it, the stream is transcoded (transcoding charges may apply).

  * `codecs.audio`: `'PCMU' | 'OPUS' | 'G722' | 'PCMA'[]`. Default: `['OPUS']`.
  * `codecs.video`: `'H264' | 'VP8'[]`. Default: `['H264']`.
</ParamField>

<ParamField type="DailySipPstnParticipantPermissions">
  Controls which participants' media the dialed-in SIP participant can receive. Uses the same `canReceive` shape as [participant permissions](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties-permissions).
</ParamField>

### `DailyStartDialoutPhoneOptions`

<ParamField type="string">
  The E.164 phone number to call (e.g. `+12268077097`).
</ParamField>

<ParamField type="string">
  Display name shown for the participant when they join. Defaults to the phone number.
</ParamField>

<ParamField type="string">
  Custom identifier for the participant (max 36 characters). See [userId guidance](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties-user-id).
</ParamField>

<ParamField type="string">
  The outbound caller ID displayed on the called device. Defaults to the oldest [purchased number](/reference/rest-api/phone-numbers/list-purchased) on the domain.
</ParamField>

<ParamField type="string">
  Extension to dial after the call connects. Max 20 characters.
</ParamField>

<ParamField type="number">
  Seconds to wait after connecting before dialing the extension.
</ParamField>

<ParamField type="DailyDialOutCodecs">
  Preferred codecs. The first entry in each array is used; if the remote party doesn't support it, the stream is transcoded (transcoding charges may apply).

  * `codecs.audio`: `'PCMU' | 'OPUS' | 'G722' | 'PCMA'[]`. Default: `['PCMU', 'PCMA']`.
  * `codecs.video`: not applicable for PSTN.
</ParamField>

<ParamField type="DailySipPstnParticipantPermissions">
  Controls which participants' media the dialed-in PSTN participant can receive. Uses the same `canReceive` shape as [participant permissions](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties-permissions).
</ParamField>

## Return value

Returns a `Promise` that resolves to `{ session?: DailyDialOutSession }`, where `session.sessionId` is the UUID identifying the initiated SIP/PSTN session.

## Errors

* `NOT_ALLOWED` — SIP/PSTN is not enabled for the room.
* `DIALOUT_IN_PROGRESS` — A dial-out is already in progress.
* `TEMPORARILY_NOT_AVAILABLE` — No workers available; try again shortly.

## Examples

```javascript theme={null}
// SIP call
const { session } = await call.startDialOut({ sipUri: 'sip:bob@example.com' });

// SIP video call with custom display name
const { session } = await call.startDialOut({
  sipUri: 'sip:boardroom@example.com',
  video: true,
  displayName: 'Board Room',
  codecs: { video: ['H264'], audio: ['OPUS'] },
});

// PSTN call with extension
const { session } = await call.startDialOut({
  phoneNumber: '+12268077097',
  displayName: 'Support Line',
  extension: '1234',
  waitBeforeExtensionDialSec: 4,
});
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [stopDialOut()](/reference/react-native/instance-methods/stop-dial-out)
    * [sipCallTransfer()](/reference/react-native/instance-methods/sip-call-transfer)
    * [sipRefer()](/reference/react-native/instance-methods/sip-refer)
  </Card>

  <Card title="Events" icon="bolt">
    * [dialout-connected](/reference/react-native/events/telephony-events#dialout-connected)
    * [dialout-stopped](/reference/react-native/events/telephony-events#dialout-stopped)
    * [dialout-error](/reference/react-native/events/telephony-events#dialout-error)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Dial-in / dial-out](/docs/guides/features/dial-in-dial-out)
  </Card>

  <Card title="REST API" icon="server">
    * [Update room: enable\_dialout](/reference/rest-api/rooms/update-room#body-properties-enable-dialout)
    * [Start dial-out](/reference/rest-api/rooms/dial-out/start)
    * [dialout-answered webhook](/reference/rest-api/webhooks/events/dialout-answered)
  </Card>
</CardGroup>


# startLiveStreaming()
Source: https://docs.daily.co/reference/react-native/instance-methods/start-live-streaming

Starts an RTMP or HLS live stream from a Daily call.

<Badge>Paid plans only</Badge>

`startLiveStreaming(options)`

<CreditCallout />

Starts an RTMP or HLS live stream. Requires the initiating participant to be [an owner or streaming admin](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties-permissions) (a participant with `'streaming'` in their `canAdmin` permission). The number of concurrent streams is subject to your domain's `max_live_streams` limit. [Contact us](https://www.daily.co/contact/support) to configure [`max_streaming_instances_per_room`](/reference/rest-api/domain/get-domain-config#response-config-max-streaming-instances-per-room) for your domain.

## Parameters

`options: DailyLiveStreamingOptions`

Accepts all fields from [`DailyStreamingOptions`](/reference/react-native/types/daily-streaming-options) plus the following live-streaming-specific fields:

<ParamField type="string | string[]">
  One or more RTMP destination URLs. When multiple URLs are provided, each receives the same layout. Avoid using this field if your URL contains sensitive values (stream keys, etc.) — use `endpoints` instead.
</ParamField>

<ParamField type="DailyStreamingEndpoint[]">
  Array of endpoint objects (`{ endpoint: string }`). Supports both RTMP and HLS. Only one HLS endpoint can be provided. Preferred over `rtmpUrl`.
</ParamField>

<Note>
  Provide either `rtmpUrl` or `endpoints` — not both. HLS can only be started via `endpoints`.
</Note>

See [`DailyStreamingOptions`](/reference/react-native/types/daily-streaming-options) for all shared options: output quality (`width`, `height`, `fps`, `videoBitrate`, `audioBitrate`, `backgroundColor`), session lifetime (`instanceId`, `minIdleTimeOut`, `maxDuration`), output artifacts (`dataOutputs`), and `layout`.

## Return value

Returns `void`. Listen for [`live-streaming-started`](/reference/react-native/events/live-streaming-events#live-streaming-started) to confirm the stream is active.

## Example

```javascript theme={null}
await call.startLiveStreaming({
  endpoints: [{ endpoint: 'rtmps://live.example.com/stream/YOUR_STREAM_KEY' }],
  width: 1280,
  height: 720,
  fps: 25,
  videoBitrate: 2500,
  layout: {
    preset: 'default',
    max_cam_streams: 5,
  },
});
```

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyStreamingOptions](/reference/react-native/types/daily-streaming-options)
    * [DailyStreamingLayoutConfig](/reference/react-native/types/daily-streaming-layout-config)
  </Card>

  <Card title="Methods" icon="code">
    * [updateLiveStreaming()](/reference/react-native/instance-methods/update-live-streaming)
    * [stopLiveStreaming()](/reference/react-native/instance-methods/stop-live-streaming)
    * [addLiveStreamingEndpoints()](/reference/react-native/instance-methods/add-live-streaming-endpoints)
    * [removeLiveStreamingEndpoints()](/reference/react-native/instance-methods/remove-live-streaming-endpoints)
  </Card>

  <Card title="Events" icon="bolt">
    * [Live streaming events](/reference/react-native/events/live-streaming-events)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Live streaming](/docs/daily-js/features/live-streaming)
  </Card>

  <Card title="REST API" icon="server">
    * [Update room: streaming\_endpoints](/reference/rest-api/rooms/update-room#body-properties-streaming-endpoints)
    * [Start live streaming](/reference/rest-api/rooms/live-streaming/start)
    * [streaming-started webhook](/reference/rest-api/webhooks/events/streaming-started)
  </Card>
</CardGroup>


# startLocalAudioLevelObserver()
Source: https://docs.daily.co/reference/react-native/instance-methods/start-local-audio-level-observer

Starts polling the local microphone audio level at a specified interval.

`startLocalAudioLevelObserver(interval?)`

Once started, a [`local-audio-level`](/reference/react-native/events/media-events#local-audio-level) event is emitted at the specified interval. Use [`getLocalAudioLevel()`](/reference/react-native/instance-methods/get-local-audio-level) to read the current value synchronously.

## Parameters

<ParamField type="number">
  How often to emit `local-audio-level` events, in milliseconds. Minimum is 100ms. Defaults to 100ms if not specified.
</ParamField>

## Return value

Returns a `Promise<void>` that resolves when the observer is running.

## Example

```javascript theme={null}
// Emit audio level events every 500ms
await call.startLocalAudioLevelObserver(500);

call.on('local-audio-level', ({ audioLevel }) => {
  console.log('Local audio level:', audioLevel);
});

// Stop when done
call.stopLocalAudioLevelObserver();
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [stopLocalAudioLevelObserver()](/reference/react-native/instance-methods/stop-local-audio-level-observer)
    * [isLocalAudioLevelObserverRunning()](/reference/react-native/instance-methods/is-local-audio-level-observer-running)
    * [getLocalAudioLevel()](/reference/react-native/instance-methods/get-local-audio-level)
    * [startRemoteParticipantsAudioLevelObserver()](/reference/react-native/instance-methods/start-remote-participants-audio-level-observer)
  </Card>

  <Card title="Events" icon="bolt">
    * [local-audio-level](/reference/react-native/events/media-events#local-audio-level)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Audio and video](/docs/daily-js/guides/audio-video)
  </Card>
</CardGroup>


# startRecording()
Source: https://docs.daily.co/reference/react-native/instance-methods/start-recording

Starts a recording of a Daily call.

<Badge>Paid plans only</Badge>

`startRecording(options?)`

<CreditCallout />

If server-side recording (`cloud`) is enabled for the room, starts a recording of all meeting participants that have their cams and/or mics on. Devices that are off are not recorded. Requires recording to be enabled for the room.

Multiple recording sessions can run concurrently (up to [`max_streaming_instances_per_room`](/reference/rest-api/domain/get-domain-config#response-config-max-streaming-instances-per-room) on your domain) if each is started with a unique `instanceId`.

## Parameters

`options?: DailyStreamingOptions`

All fields are optional. See [`DailyStreamingOptions`](/reference/react-native/types/daily-streaming-options) for the full list of shared options: output quality (`width`, `height`, `fps`, `videoBitrate`, `audioBitrate`, `backgroundColor`), session lifetime (`instanceId`, `minIdleTimeOut`, `maxDuration`), output artifacts (`dataOutputs`), and `layout`.

The `type` field is recording-specific:

<ParamField type="'cloud' | 'cloud-audio-only' | 'raw-tracks'">
  Recording type:

  * `'cloud'` — cloud recording with video composition (default)
  * `'cloud-audio-only'` — cloud recording, audio only; no video composition charges
  * `'raw-tracks'` — individual uncomposed audio/video tracks per participant
</ParamField>

## Return value

Returns `void`. Listen for [`recording-started`](/reference/react-native/events/recording-events#recording-started) to confirm the recording is active.

## Examples

```javascript theme={null}
// Start a cloud recording at 720p
await call.startRecording({
  width: 1280,
  height: 720,
  fps: 25,
  layout: {
    preset: 'default',
    max_cam_streams: 5,
  },
});
```

### Audio-only recording

<Note>
  If you know ahead of time that video is not needed, use `cloud-audio-only` to avoid video composition charges. You can also set the recording type at the room level so that `startRecording()` requires no arguments.
</Note>

```javascript theme={null}
await call.startRecording({
  type: 'cloud-audio-only',
});
```

You can also use the `audio-only` layout preset with a standard cloud recording to select specific participants' audio:

```javascript theme={null}
await call.startRecording({
  layout: {
    preset: 'audio-only',
    participants: {
      audio: ['user-id-of-participant-1', 'user-id-of-participant-2'],
    },
  },
});
```

### Raw tracks (audio only)

```javascript theme={null}
await call.startRecording({
  layout: {
    preset: 'raw-tracks-audio-only',
  },
});
```

### Custom layout with VCS baseline composition

```javascript theme={null}
await call.startRecording({
  layout: {
    preset: 'custom',
    composition_id: 'daily:baseline',
    composition_params: {
      mode: 'dominant',
      'videoSettings.preferScreenshare': true,
    },
    session_assets: {
      'images/logo.png': 'https://example.com/logo.png',
    },
  },
});
```

See [`DailyStreamingLayoutConfig`](/reference/react-native/types/daily-streaming-layout-config) for all layout presets and the full VCS baseline composition parameter reference.

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyStreamingOptions](/reference/react-native/types/daily-streaming-options)
    * [DailyStreamingLayoutConfig](/reference/react-native/types/daily-streaming-layout-config)
  </Card>

  <Card title="Methods" icon="code">
    * [updateRecording()](/reference/react-native/instance-methods/update-recording)
    * [stopRecording()](/reference/react-native/instance-methods/stop-recording)
    * [startLiveStreaming()](/reference/react-native/instance-methods/start-live-streaming)
  </Card>

  <Card title="Events" icon="bolt">
    * [Recording events](/reference/react-native/events/recording-events)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Recording](/docs/guides/features/recording)
  </Card>

  <Card title="REST API" icon="server">
    * [Create room: enable\_recording](/reference/rest-api/rooms/create-room#body-properties-enable-recording)
    * [Start recording](/reference/rest-api/rooms/recordings/start)
    * [recording-started webhook](/reference/rest-api/webhooks/events/recording-started)
  </Card>
</CardGroup>


# startRemoteParticipantsAudioLevelObserver()
Source: https://docs.daily.co/reference/react-native/instance-methods/start-remote-participants-audio-level-observer

Starts polling the audio levels of all remote participants in the call.

`startRemoteParticipantsAudioLevelObserver(interval?)`

Once started, a [`remote-participants-audio-level`](/reference/react-native/events/media-events#remote-participants-audio-level) event is emitted at the specified interval containing a map of participant IDs to audio level values.

## Parameters

<ParamField type="number">
  Polling interval in milliseconds. Minimum is 100ms. Defaults to 100ms.
</ParamField>

## Return value

Returns `Promise<void>`.

## Example

```javascript theme={null}
// Emit remote-participants-audio-level every 500ms
call.startRemoteParticipantsAudioLevelObserver(500);

call.on('remote-participants-audio-level', ({ participantsAudioLevel }) => {
  for (const [participantId, level] of Object.entries(participantsAudioLevel)) {
    console.log(`${participantId}: ${level}`);
  }
});
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [stopRemoteParticipantsAudioLevelObserver()](/reference/react-native/instance-methods/stop-remote-participants-audio-level-observer)
    * [isRemoteParticipantsAudioLevelObserverRunning()](/reference/react-native/instance-methods/is-remote-participants-audio-level-observer-running)
    * [getRemoteParticipantsAudioLevel()](/reference/react-native/instance-methods/get-remote-participants-audio-level)
    * [startLocalAudioLevelObserver()](/reference/react-native/instance-methods/start-local-audio-level-observer)
  </Card>

  <Card title="Events" icon="bolt">
    * [remote-participants-audio-level](/reference/react-native/events/media-events#remote-participants-audio-level)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Audio and video](/docs/daily-js/guides/audio-video)
  </Card>
</CardGroup>


# startScreenShare()
Source: https://docs.daily.co/reference/react-native/instance-methods/start-screen-share

Starts a screen share from the local participant.

`startScreenShare(options?)`

Does nothing if there is no active meeting or `enable_screenshare` is disabled for the room or meeting token.

See the [react-native-daily-js README](https://github.com/daily-co/react-native-daily-js) for platform-specific setup instructions for [Android](https://github.com/daily-co/react-native-daily-js#android) and [iOS screen sharing](https://github.com/daily-co/react-native-daily-js#screen-sharing-on-ios).

Listen for [`local-screen-share-started`](/reference/react-native/events/media-events#local-screen-share-started) to confirm sharing is active, [`local-screen-share-stopped`](/reference/react-native/events/media-events#local-screen-share-stopped) when it ends, and [`local-screen-share-canceled`](/reference/react-native/events/media-events#local-screen-share-canceled) if the user dismisses the picker.

## Parameters

`options?: DailyStartScreenShare`

<ParamField type="DailyVideoSendSettings | DailyScreenVideoSendSettingsPreset">
  Send settings for the screen video track. Accepts the same values as [`updateSendSettings()`](/reference/react-native/instance-methods/update-send-settings).
</ParamField>

## Return value

Returns `void`.

## Example

```javascript theme={null}
// Default screen share
call.startScreenShare();

// With custom send settings
call.startScreenShare({
  screenVideoSendSettings: 'motion-and-detail-balanced',
});
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [stopScreenShare()](/reference/react-native/instance-methods/stop-screen-share)
    * [updateSendSettings()](/reference/react-native/instance-methods/update-send-settings)
  </Card>

  <Card title="Events" icon="bolt">
    * [local-screen-share-started](/reference/react-native/events/media-events#local-screen-share-started)
    * [local-screen-share-stopped](/reference/react-native/events/media-events#local-screen-share-stopped)
    * [local-screen-share-canceled](/reference/react-native/events/media-events#local-screen-share-canceled)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Screen sharing](/docs/daily-js/features/screen-sharing)
  </Card>

  <Card title="REST API" icon="server">
    * [Create room: enable\_screenshare](/reference/rest-api/rooms/create-room#body-properties-enable-screenshare)
    * [Meeting token: enable\_screenshare](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties-enable-screenshare)
  </Card>
</CardGroup>


# startTranscription()
Source: https://docs.daily.co/reference/react-native/instance-methods/start-transcription

Starts live transcription of a Daily call.

<Badge>Paid plans only</Badge>

`startTranscription(options?)`

Starts live transcription for all participants in the room, or a specific subset if `participants` is provided. Transcription is powered by [Deepgram](https://deepgram.com/).

Once started, transcription output is delivered via [`transcription-message`](/reference/react-native/events/transcription-events#transcription-message) events.

## Parameters

`options?: DailyTranscriptionDeepgramOptions`

All fields are optional.

<ParamField type="string">
  Language to use (e.g. `'en'`, `'fr-CA'`). See [Deepgram language docs](https://developers.deepgram.com/docs/language).
</ParamField>

<ParamField type="string">
  Deepgram model to use (e.g. `'nova-2'`, `'finance'`). See [Deepgram model docs](https://developers.deepgram.com/docs/model).
</ParamField>

<ParamField type="boolean">
  Whether to filter profanity from transcripts. See [Deepgram profanity filter docs](https://developers.deepgram.com/docs/profanity-filter).
</ParamField>

<ParamField type="boolean">
  Whether to add punctuation to transcripts. See [Deepgram punctuation docs](https://developers.deepgram.com/docs/punctuation).
</ParamField>

<ParamField type="number | boolean">
  Controls voice activity detection sensitivity. See [Deepgram endpointing docs](https://developers.deepgram.com/docs/endpointing).
</ParamField>

<ParamField type="boolean | string[]">
  Whether to redact sensitive information. See [Deepgram redaction docs](https://developers.deepgram.com/docs/redaction).
</ParamField>

<ParamField type="object">
  Additional Deepgram streaming parameters not covered by the fields above. See [Deepgram features overview](https://developers.deepgram.com/docs/features-overview).
</ParamField>

<ParamField type="boolean">
  When `true`, Deepgram's raw response object is included in each `transcription-message` event payload.
</ParamField>

<ParamField type="string">
  UUID for the transcription session. Defaults to `'a1f2f6b7-b1ac-4202-85e5-d446cb6c3d3f'`.
</ParamField>

<ParamField type="string[]">
  Array of participant session IDs to transcribe. When provided, only those participants are transcribed.
</ParamField>

<ParamField type="'global' | 'eu'">
  The geographic region where transcription is processed. Set to `'eu'` to ensure transcription data stays within the European Union.
</ParamField>

## Return value

Returns `void`. Listen for [`transcription-started`](/reference/react-native/events/transcription-events#transcription-started) to confirm transcription is active.

## Examples

```javascript theme={null}
// Start transcription with defaults
await call.startTranscription();

// French Canadian, finance model
await call.startTranscription({
  language: 'fr-CA',
  model: 'finance',
});

// Transcribe specific participants only
await call.startTranscription({
  participants: [
    'd8a14d03-58ef-4b7c-824a-181779ab535a',
    '435fa323-65a1-4654-b788-069936da87a0',
  ],
});
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [updateTranscription()](/reference/react-native/instance-methods/update-transcription)
    * [stopTranscription()](/reference/react-native/instance-methods/stop-transcription)
  </Card>

  <Card title="Events" icon="bolt">
    * [Transcription events](/reference/react-native/events/transcription-events)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Transcription Overview](/docs/guides/features/transcription)
    * [daily-js: Transcription](/docs/daily-js/features/transcription)
  </Card>

  <Card title="REST API" icon="server">
    * [Meeting token: auto\_start\_transcription](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties-auto-start-transcription)
    * [Start transcription](/reference/rest-api/rooms/transcription/start)
    * [transcript-started webhook](/reference/rest-api/webhooks/events/transcript-started)
  </Card>
</CardGroup>


# stopDialOut()
Source: https://docs.daily.co/reference/react-native/instance-methods/stop-dial-out

Stops an active SIP or PSTN dial-out session.

`stopDialOut(options)`

Has no effect if the session ID is not found.

## Parameters

<ParamField type="string">
  The UUID identifying the dial-out session to stop. This is the `session.sessionId` returned by [`startDialOut()`](/reference/react-native/instance-methods/start-dial-out).
</ParamField>

## Return value

Returns `Promise<void>`.

## Errors

* `NOT_ALLOWED` — SIP/PSTN is not enabled for the room.
* `NOT_FOUND` — No active dial-out session found with the given `sessionId`.

## Example

```javascript theme={null}
const { session } = await call.startDialOut({ phoneNumber: '+12268077097' });

// Later, stop it
await call.stopDialOut({ sessionId: session.sessionId });
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [startDialOut()](/reference/react-native/instance-methods/start-dial-out)
    * [sipCallTransfer()](/reference/react-native/instance-methods/sip-call-transfer)
    * [sipRefer()](/reference/react-native/instance-methods/sip-refer)
  </Card>

  <Card title="Events" icon="bolt">
    * [dialout-connected](/reference/react-native/events/telephony-events#dialout-connected)
    * [dialout-stopped](/reference/react-native/events/telephony-events#dialout-stopped)
    * [dialout-error](/reference/react-native/events/telephony-events#dialout-error)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Dial-in / dial-out](/docs/guides/features/dial-in-dial-out)
  </Card>

  <Card title="REST API" icon="server">
    * [Update room: enable\_dialout](/reference/rest-api/rooms/update-room#body-properties-enable-dialout)
    * [Stop dial-out](/reference/rest-api/rooms/dial-out/stop)
    * [dialout-stopped webhook](/reference/rest-api/webhooks/events/dialout-stopped)
  </Card>
</CardGroup>


# stopLiveStreaming()
Source: https://docs.daily.co/reference/react-native/instance-methods/stop-live-streaming

Stops an active live stream from a Daily call.

<Badge>Paid plans only</Badge>

`stopLiveStreaming(options?)`

Requires the initiating participant to be [an owner or streaming admin](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties-permissions) (a participant with `'streaming'` in their `canAdmin` permission).

If multiple RTMP endpoints are being live streamed, calling stopLiveStreaming() will stop all live streams. To remove specific endpoints without ending the stream, use [`removeLiveStreamingEndpoints()`](/reference/react-native/instance-methods/remove-live-streaming-endpoints).

If multiple instances are running, each must be stopped individually with its `instanceId`.

## Parameters

<ParamField type="string">
  The UUID of the streaming instance to stop. Omit to stop the default instance.
</ParamField>

## Return value

Returns `void`. Listen for [`live-streaming-stopped`](/reference/react-native/events/live-streaming-events#live-streaming-stopped) to confirm the stream has ended.

## Example

```javascript theme={null}
// Stop the default stream
call.stopLiveStreaming();

// Stop a specific instance
call.stopLiveStreaming({ instanceId: 'my-instance-id' });
```

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyStreamingOptions](/reference/react-native/types/daily-streaming-options)
    * [DailyStreamingLayoutConfig](/reference/react-native/types/daily-streaming-layout-config)
  </Card>

  <Card title="Methods" icon="code">
    * [startLiveStreaming()](/reference/react-native/instance-methods/start-live-streaming)
    * [updateLiveStreaming()](/reference/react-native/instance-methods/update-live-streaming)
    * [addLiveStreamingEndpoints()](/reference/react-native/instance-methods/add-live-streaming-endpoints)
    * [removeLiveStreamingEndpoints()](/reference/react-native/instance-methods/remove-live-streaming-endpoints)
  </Card>

  <Card title="Events" icon="bolt">
    * [Live streaming events](/reference/react-native/events/live-streaming-events)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Live streaming](/docs/daily-js/features/live-streaming)
  </Card>

  <Card title="REST API" icon="server">
    * [Update room: streaming\_endpoints](/reference/rest-api/rooms/update-room#body-properties-streaming-endpoints)
    * [Stop live streaming](/reference/rest-api/rooms/live-streaming/stop)
    * [streaming-ended webhook](/reference/rest-api/webhooks/events/streaming-ended)
  </Card>
</CardGroup>


# stopLocalAudioLevelObserver()
Source: https://docs.daily.co/reference/react-native/instance-methods/stop-local-audio-level-observer

Stops polling the local participant audio level.

`stopLocalAudioLevelObserver()`

Stops the local audio level observer started by [`startLocalAudioLevelObserver()`](/reference/react-native/instance-methods/start-local-audio-level-observer). No more [`local-audio-level`](/reference/react-native/events/media-events#local-audio-level) events will be emitted after this call.

## Return value

Returns `void`.

## Example

```javascript theme={null}
call.stopLocalAudioLevelObserver();
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [startLocalAudioLevelObserver()](/reference/react-native/instance-methods/start-local-audio-level-observer)
    * [isLocalAudioLevelObserverRunning()](/reference/react-native/instance-methods/is-local-audio-level-observer-running)
    * [getLocalAudioLevel()](/reference/react-native/instance-methods/get-local-audio-level)
    * [stopRemoteParticipantsAudioLevelObserver()](/reference/react-native/instance-methods/stop-remote-participants-audio-level-observer)
  </Card>

  <Card title="Events" icon="bolt">
    * [local-audio-level](/reference/react-native/events/media-events#local-audio-level)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Audio and video](/docs/daily-js/guides/audio-video)
  </Card>
</CardGroup>


# stopRecording()
Source: https://docs.daily.co/reference/react-native/instance-methods/stop-recording

Stops an active recording of a Daily call.

<Badge>Paid plans only</Badge>

`stopRecording(options?)`

Has no effect if no recording is currently running. If multiple recording instances are running, each must be stopped individually with its `instanceId`.

## Parameters

<ParamField type="string">
  The UUID of the recording instance to stop. Omit to stop the default instance.
</ParamField>

## Return value

Returns `void`. Listen for [`recording-stopped`](/reference/react-native/events/recording-events#recording-stopped) to confirm the recording has ended.

## Example

```javascript theme={null}
// Stop the default recording
call.stopRecording();

// Stop a specific instance
call.stopRecording({ instanceId: 'my-instance-id' });
```

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyStreamingOptions](/reference/react-native/types/daily-streaming-options)
    * [DailyStreamingLayoutConfig](/reference/react-native/types/daily-streaming-layout-config)
  </Card>

  <Card title="Methods" icon="code">
    * [startRecording()](/reference/react-native/instance-methods/start-recording)
    * [updateRecording()](/reference/react-native/instance-methods/update-recording)
    * [stopLiveStreaming()](/reference/react-native/instance-methods/stop-live-streaming)
  </Card>

  <Card title="Events" icon="bolt">
    * [Recording events](/reference/react-native/events/recording-events)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Recording](/docs/guides/features/recording)
  </Card>

  <Card title="REST API" icon="server">
    * [Create room: enable\_recording](/reference/rest-api/rooms/create-room#body-properties-enable-recording)
    * [Stop recording](/reference/rest-api/rooms/recordings/stop)
    * [recording-ready-to-download webhook](/reference/rest-api/webhooks/events/recording-ready-to-download)
  </Card>
</CardGroup>


# stopRemoteParticipantsAudioLevelObserver()
Source: https://docs.daily.co/reference/react-native/instance-methods/stop-remote-participants-audio-level-observer

Stops polling the audio levels of remote participants.

`stopRemoteParticipantsAudioLevelObserver()`

Stops the remote participants audio level observer started by [`startRemoteParticipantsAudioLevelObserver()`](/reference/react-native/instance-methods/start-remote-participants-audio-level-observer). No more [`remote-participants-audio-level`](/reference/react-native/events/media-events#remote-participants-audio-level) events will be emitted after this call.

## Return value

Returns `void`.

## Example

```javascript theme={null}
call.stopRemoteParticipantsAudioLevelObserver();
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [startRemoteParticipantsAudioLevelObserver()](/reference/react-native/instance-methods/start-remote-participants-audio-level-observer)
    * [isRemoteParticipantsAudioLevelObserverRunning()](/reference/react-native/instance-methods/is-remote-participants-audio-level-observer-running)
    * [getRemoteParticipantsAudioLevel()](/reference/react-native/instance-methods/get-remote-participants-audio-level)
    * [stopLocalAudioLevelObserver()](/reference/react-native/instance-methods/stop-local-audio-level-observer)
  </Card>

  <Card title="Events" icon="bolt">
    * [remote-participants-audio-level](/reference/react-native/events/media-events#remote-participants-audio-level)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Audio and video](/docs/daily-js/guides/audio-video)
  </Card>
</CardGroup>


# stopScreenShare()
Source: https://docs.daily.co/reference/react-native/instance-methods/stop-screen-share

Stops the local participant screen share.

`stopScreenShare()`

Stops the current screen share. Has no effect if no screen share is active.

If you provided a custom `mediaStream` when calling `startScreenShare()`, you are responsible for stopping the underlying tracks after calling this method.

## Return value

Returns `void`.

## Example

```javascript theme={null}
call.stopScreenShare();
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [startScreenShare()](/reference/react-native/instance-methods/start-screen-share)
  </Card>

  <Card title="Events" icon="bolt">
    * [local-screen-share-stopped](/reference/react-native/events/media-events#local-screen-share-stopped)
    * [local-screen-share-started](/reference/react-native/events/media-events#local-screen-share-started)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Screen sharing](/docs/daily-js/features/screen-sharing)
  </Card>
</CardGroup>


# stopTestPeerToPeerCallQuality()
Source: https://docs.daily.co/reference/react-native/instance-methods/stop-test-peer-to-peer-call-quality

Stops an in-progress testPeerToPeerCallQuality() test early.

`stopTestPeerToPeerCallQuality()`

Interrupts an in-progress [`testPeerToPeerCallQuality()`](/reference/react-native/instance-methods/test-peer-to-peer-call-quality) test. The original Promise resolves immediately with whatever data has been collected so far. Also emits [`test-completed`](/reference/react-native/events/network-events#test-completed).

If called before data gathering has started, the result is `'aborted'` with an empty `data` object. If data has been gathered, the result reflects the collected stats up to that point.

## Return value

Returns `void`.

## Example

```javascript theme={null}
await call.startCamera();
const videoTrack = call.participants().local.tracks.video.persistentTrack;

const testResultsPromise = call.testPeerToPeerCallQuality({
  videoTrack,
  duration: 250000,
});

// Stop early before joining
call.stopTestPeerToPeerCallQuality();
const results = await testResultsPromise;

if (results.result === 'bad') {
  console.warn('Poor network detected before joining.');
}
await call.join({ url: 'https://your-domain.daily.co/room' });
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [testPeerToPeerCallQuality()](/reference/react-native/instance-methods/test-peer-to-peer-call-quality)
  </Card>

  <Card title="Events" icon="bolt">
    * [test-completed](/reference/react-native/events/network-events#test-completed)
  </Card>
</CardGroup>


# stopTranscription()
Source: https://docs.daily.co/reference/react-native/instance-methods/stop-transcription

Stops an active transcription session in a Daily call.

<Badge>Paid plans only</Badge>

`stopTranscription(options?)`

Requires the caller to be a meeting owner or have `'transcription'` in their `canAdmin` permission. Has no effect if transcription is not active.

If transcript storage is enabled, the final transcript file is written when transcription stops.

## Parameters

`options?: DailyTranscriptionStopOptions`

<ParamField type="string">
  The UUID of the transcription instance to stop. Omit to stop the default instance.
</ParamField>

## Return value

Returns `void`. Listen for [`transcription-stopped`](/reference/react-native/events/transcription-events#transcription-stopped) to confirm the session has ended.

## Example

```javascript theme={null}
// Stop the default transcription instance
call.stopTranscription();

// Stop a specific instance
call.stopTranscription({ instanceId: 'my-instance-id' });
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [startTranscription()](/reference/react-native/instance-methods/start-transcription)
    * [updateTranscription()](/reference/react-native/instance-methods/update-transcription)
  </Card>

  <Card title="Events" icon="bolt">
    * [Transcription events](/reference/react-native/events/transcription-events)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Transcription Overview](/docs/guides/features/transcription)
    * [daily-js: Transcription](/docs/daily-js/features/transcription)
  </Card>

  <Card title="REST API" icon="server">
    * [Stop transcription](/reference/rest-api/rooms/transcription/stop)
    * [transcript-ready-to-download webhook](/reference/rest-api/webhooks/events/transcript-ready-to-download)
  </Card>
</CardGroup>


# testNetworkConnectivity()
Source: https://docs.daily.co/reference/react-native/instance-methods/test-network-connectivity

Tests whether a stable WebRTC connection can be established with Daily TURN servers.

`testNetworkConnectivity(videoTrack)`

Checks whether a stable connection can be established with Daily's TURN servers. Useful for precall checks before a room is joined. The test times out automatically after 30 seconds.

<Warning>
  A passing result does not indicate that the user is authorized to join a call — only that a TURN connection is possible. A failing result does not guarantee calls will fail: P2P calls may still work.
</Warning>

## Why pass a video track?

Chrome and Firefox can test network connectivity without a media track, but Safari requires one. To ensure the test works across all browsers, `videoTrack` is required.

## Parameters

<ParamField type="MediaStreamTrack">
  A video track used to establish the test connection. You can obtain one from `call.participants().local.tracks.video.persistentTrack` after calling `startCamera()`.
</ParamField>

## Return value

Returns `Promise<DailyNetworkConnectivityTestStats>`.

<ResponseField name="result" type="'passed' | 'failed' | 'aborted'">
  * `'passed'` — connection to Daily's TURN servers was successful
  * `'failed'` — connection could not be established; advise users to check their network or contact their administrator
  * `'aborted'` — test was stopped via [`abortTestNetworkConnectivity()`](/reference/react-native/instance-methods/abort-test-network-connectivity) before completion
</ResponseField>

## Example

```javascript theme={null}
await call.startCamera();
const videoTrack = call.participants().local.tracks.video.persistentTrack;

const { result } = await call.testNetworkConnectivity(videoTrack);

switch (result) {
  case 'failed':
    console.warn('Cannot connect to TURN servers. Try a different network.');
    break;
  case 'aborted':
    console.log('Test aborted.');
    break;
  case 'passed':
  default:
    console.log('Network connectivity confirmed.');
}
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [abortTestNetworkConnectivity()](/reference/react-native/instance-methods/abort-test-network-connectivity)
  </Card>

  <Card title="Events" icon="bolt">
    * [test-completed](/reference/react-native/events/network-events#test-completed)
  </Card>
</CardGroup>


# testPeerToPeerCallQuality()
Source: https://docs.daily.co/reference/react-native/instance-methods/test-peer-to-peer-call-quality

Assesses WebRTC connection quality using a local video track before joining a call.

`testPeerToPeerCallQuality(options)`

Connects to Daily's TURN servers and collects metrics over the test duration to indicate connection quality. Useful for precall checks before a room is joined.

The test runs for 15 seconds by default (up to 30 seconds). The longer it runs, the more accurate the results. For in-depth network stats *during* a call, use [`getNetworkStats()`](/reference/react-native/instance-methods/get-network-stats).

## Parameters

<ParamField type="MediaStreamTrack">
  A video track used to establish the test connection. You can obtain one from `call.participants().local.tracks.video.persistentTrack` after calling `startCamera()`.
</ParamField>

<ParamField type="number">
  How long to run the test in seconds. Maximum: `30`.
</ParamField>

## Return value

Returns `Promise<DailyP2PCallQualityTestResults>`.

<ResponseField name="result" type="'good' | 'warning' | 'bad' | 'aborted' | 'failed'">
  Overall connection quality verdict:

  * `'good'` — `avgRecvPacketLoss` \< 5%, `avgRoundTripTime` \< 300ms, `avgRecvBitsPerSecond` ≥ 1,100kbps
  * `'warning'` — `avgRecvPacketLoss` 5–10%, `avgRoundTripTime` 300–600ms, `avgRecvBitsPerSecond` 700kbps–1,100kbps
  * `'bad'` — `avgRecvPacketLoss` ≥ 10%, `avgRoundTripTime` ≥ 600ms, `avgRecvBitsPerSecond` \< 700kbps
  * `'failed'` — connection to TURN servers could not be made; `errorMsg` and `error` fields are populated
  * `'aborted'` — test stopped before data gathering started
</ResponseField>

<ResponseField name="secondsElapsed" type="number">
  Seconds over which data was collected.
</ResponseField>

<ResponseField name="data" type="DailyP2PCallQualityTestData">
  Stats used to determine the result. All averages use an exponential moving average biased toward the most recent data.

  * `maxRoundTripTime` (seconds) — maximum [`currentRoundTripTime`](https://developer.mozilla.org/en-US/docs/Web/API/RTCIceCandidatePairStats/currentRoundTripTime)
  * `avgRoundTripTime` (seconds) — average `currentRoundTripTime`
  * `avgRecvPacketLoss` (percentage) — average inbound packet loss
  * `avgAvailableOutgoingBitrate` (bps) — average [`availableOutgoingBitrate`](https://developer.mozilla.org/en-US/docs/Web/API/RTCIceCandidatePairStats/availableOutgoingBitrate) (not available on Firefox)
  * `avgSendBitsPerSecond` (bps) — average outbound bitrate
  * `avgRecvBitsPerSecond` (bps) — average inbound bitrate
</ResponseField>

<ResponseField name="errorMsg" type="string">
  Human-readable error message. Only present when `result === 'failed'`.
</ResponseField>

<ResponseField name="error" type="DailyFatalErrorObject">
  Structured error object. Only present when `result === 'failed'` and error details are available.
</ResponseField>

## Example

```javascript theme={null}
await call.startCamera();
const videoTrack = call.participants().local.tracks.video.persistentTrack;

const results = await call.testPeerToPeerCallQuality({ videoTrack, duration: 10 });

switch (results.result) {
  case 'aborted':
    console.log('Test aborted before data was gathered.');
    break;
  case 'failed':
    console.warn('Test failed:', results.errorMsg);
    break;
  case 'bad':
    console.warn('Poor connection. Try a different network.');
    break;
  case 'warning':
    console.warn('Connection may be unstable.');
    break;
  case 'good':
  default:
    console.log('Connection quality is good.');
}
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [stopTestPeerToPeerCallQuality()](/reference/react-native/instance-methods/stop-test-peer-to-peer-call-quality)
    * [testNetworkConnectivity()](/reference/react-native/instance-methods/test-network-connectivity)
    * [testWebsocketConnectivity()](/reference/react-native/instance-methods/test-websocket-connectivity)
    * [getNetworkStats()](/reference/react-native/instance-methods/get-network-stats)
  </Card>

  <Card title="Events" icon="bolt">
    * [test-completed](/reference/react-native/events/network-events#test-completed)
  </Card>
</CardGroup>


# testWebsocketConnectivity()
Source: https://docs.daily.co/reference/react-native/instance-methods/test-websocket-connectivity

Tests whether WebSocket connections can be established with Daily signaling servers across AWS regions.

`testWebsocketConnectivity()`

Tests whether WebSocket connections can be established with Daily's signaling servers across AWS regions. Useful for precall checks to detect firewall or VPN issues before a room is joined.

<Warning>
  A passing result does not indicate that the user is authorized to join a call — only that WebSocket connections are possible. A warning result does not guarantee calls will fail.
</Warning>

## Return value

Returns `Promise<DailyWebsocketConnectivityTestResults>`.

<ResponseField name="result" type="'passed' | 'warning' | 'failed' | 'aborted'">
  * `'passed'` — WebSocket connections succeeded in all regions
  * `'warning'` — at least one region failed; calls may still work but issues are possible
  * `'failed'` — no region could be connected to
  * `'aborted'` — test was stopped via [`abortTestWebsocketConnectivity()`](/reference/react-native/instance-methods/abort-test-websocket-connectivity) before all regions completed
</ResponseField>

<ResponseField name="passedRegions" type="string[]">
  AWS region identifiers where the WebSocket connection succeeded.
</ResponseField>

<ResponseField name="failedRegions" type="string[]">
  AWS region identifiers where the WebSocket connection failed.
</ResponseField>

<ResponseField name="abortedRegions" type="string[]">
  AWS region identifiers where the connection attempt was aborted.
</ResponseField>

## Example

```javascript theme={null}
const results = await call.testWebsocketConnectivity();

switch (results.result) {
  case 'failed':
    console.warn('Cannot connect via WebSockets. Contact your network admin.');
    break;
  case 'warning':
    console.warn('Some regions unreachable:', results.failedRegions);
    break;
  case 'aborted':
    console.log('Test aborted.');
    break;
  case 'passed':
  default:
    console.log('WebSocket connectivity confirmed in all regions.');
}
```

### Example response

```json theme={null}
{
  "result": "warning",
  "passedRegions": ["eu-west-2", "us-east-1", "us-west-2"],
  "failedRegions": ["eu-central-1"],
  "abortedRegions": []
}
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [abortTestWebsocketConnectivity()](/reference/react-native/instance-methods/abort-test-websocket-connectivity)
    * [testNetworkConnectivity()](/reference/react-native/instance-methods/test-network-connectivity)
  </Card>

  <Card title="Events" icon="bolt">
    * [test-completed](/reference/react-native/events/network-events#test-completed)
  </Card>
</CardGroup>


# updateInputSettings()
Source: https://docs.daily.co/reference/react-native/instance-methods/update-input-settings

Updates local camera and microphone settings, including background effects and noise cancellation.

`updateInputSettings(inputSettings)`

Updates settings applied to local media inputs during a call. Returns a `Promise` that resolves once settings are applied and triggers an [`input-settings-updated`](/reference/react-native/events/settings-events#input-settings-updated) event when settings change.

Only the keys you provide are updated — omitting `audio` leaves audio settings unchanged, and vice versa. However, within `settings` or `processor`, you must specify all values you want applied; they are not merged with existing values.

## Parameters

<ParamField type="object">
  Settings for the local microphone.

  <Expandable title="properties">
    <ParamField type="MediaTrackConstraints | { customTrack: MediaStreamTrack }">
      Constraints to apply to the audio track, or a custom track to use instead. See [Providing custom constraints](#providing-custom-constraints) and [Providing a custom track](#providing-a-custom-track) below.
    </ParamField>

    <ParamField type="object">
      Audio processor to apply.

      <Expandable title="properties">
        <ParamField type="'none' | 'noise-cancellation'">
          The processor type. Set to `'none'` to disable processing.
        </ParamField>
      </Expandable>
    </ParamField>
  </Expandable>
</ParamField>

<ParamField type="object">
  Settings for the local camera.

  <Expandable title="properties">
    <ParamField type="MediaTrackConstraints | { customTrack: MediaStreamTrack }">
      Constraints to apply to the video track, or a custom track to use instead. See [Providing custom constraints](#providing-custom-constraints) and [Providing a custom track](#providing-a-custom-track) below.
    </ParamField>

    <ParamField type="object">
      Video processor to apply. Only one processor type can be active at a time — setting a new type disables the previous one.

      <Expandable title="properties">
        <ParamField type="'none' | 'background-blur' | 'background-image' | 'face-detection'">
          The processor type. Set to `'none'` to disable processing.
        </ParamField>

        <ParamField type="object">
          Additional processor configuration. Only applies to `background-blur` and `background-image`.

          <Expandable title="properties">
            <ParamField type="string | ArrayBuffer">
              Image source for `background-image`. Accepts an HTTP/HTTPS URL or an `ArrayBuffer`. Supported formats: `.jpg`, `.jpeg`, `.png`.
            </ParamField>

            <ParamField type="number">
              Blur strength for `background-blur`. Float between 0 and 1 (exclusive/inclusive). Default: `1` (strongest blur).
            </ParamField>
          </Expandable>
        </ParamField>
      </Expandable>
    </ParamField>
  </Expandable>
</ParamField>

## Return value

Returns `Promise<{ inputSettings: DailyInputSettings }>` that resolves once settings are applied.

## Providing custom constraints

`settings` accepts a [`MediaTrackConstraints`](https://w3c.github.io/mediacapture-main/#media-track-constraints) object. Specify all constraints you want applied — they replace existing constraints entirely and are not merged.

```javascript theme={null}
call.updateInputSettings({
  video: {
    settings: {
      deviceId: 'a1b2c3d4...',
      aspectRatio: 1,
    },
  },
});
```

<Note>
  To change just the `deviceId` without affecting other constraints, use `setInputDevicesAsync()` — it merges the new `deviceId` with existing constraints.
</Note>

<Warning>
  Daily's default constraints handle cross-browser inconsistencies. Overriding them via `settings` bypasses these defaults. If you need custom constraints, refer to the [`MediaTrackConstraints`](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints) documentation and test across platforms carefully.
</Warning>

## Providing a custom track

Pass `{ customTrack: track }` as `settings` to use a `MediaStreamTrack` you manage directly. When a custom track is provided, any existing constraints are cleared.

<Warning>
  You are responsible for the lifecycle of the custom track — Daily will not stop it for you. To hand control back to Daily, call `updateInputSettings()` with empty settings.
</Warning>

```javascript theme={null}
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
call.updateInputSettings({
  video: { settings: { customTrack: stream.getVideoTracks()[0] } },
});

// To hand control back to Daily:
call.updateInputSettings({ video: { settings: {} } });
```

## Video processor

<Warning>
  Video processors are currently only supported on desktop browsers.
</Warning>

**`background-blur`** — obscures the participant's background. Optionally accepts `config.strength` (float 0–1, default `1`).

```javascript theme={null}
call.updateInputSettings({
  video: { processor: { type: 'background-blur', config: { strength: 0.5 } } },
});
```

**`background-image`** — replaces the background with an image. Accepts an HTTP URL or `ArrayBuffer` as `config.source`. Supported formats: `.jpg`, `.jpeg`, `.png`.

```javascript theme={null}
// Using a hosted image URL
call.updateInputSettings({
  video: {
    processor: {
      type: 'background-image',
      config: { source: 'https://example.com/bg.jpg' },
    },
  },
});
```

```javascript theme={null}
// Using an ArrayBuffer from a file input (via FileReader API)
document.getElementById('setImageBackground').addEventListener('click', function () {
  const file = document.getElementById('imageInput').files[0];
  if (!file) return;

  const reader = new FileReader();
  reader.onload = function () {
    call.updateInputSettings({
      video: {
        processor: {
          type: 'background-image',
          config: { source: reader.result },
        },
      },
    });
  };
  reader.readAsArrayBuffer(file);
});
```

**`face-detection`** — detects the number of faces visible and triggers [`face-counts-updated`](/reference/react-native/events/media-events#face-counts-updated) events. Does not alter the video.

```javascript theme={null}
call.updateInputSettings({
  video: { processor: { type: 'face-detection' } },
});
```

## Audio processor

<Warning>
  `'noise-cancellation'` is supported on:

  * Desktop: Chrome/Chromium, Firefox, Safari 17.4.1+
  * Mobile: iOS Safari 17.4.1+
</Warning>

**`noise-cancellation`** — reduces background noise on the microphone input.

```javascript theme={null}
call.updateInputSettings({
  audio: { processor: { type: 'noise-cancellation' } },
});
```

## Error handling

Invalid fields or wrong types throw immediately. Errors during application emit a `nonfatal-error` event of type [`input-settings-error`](/reference/react-native/events/error-events#input-settings-error). In addition:

* **Settings errors** — If the constraints provided result in a `getUserMedia()` error, a [`camera-error`](/reference/react-native/events/settings-events#camera-error) will also be emitted and the input will likely be muted (There are scenarios where if the device was already on and only a minor constraint was being applied, the device can remain on). When a constraints error occurs, the settings are reset to defaults so that they do not repeatedly cause issues. Note: If the device is off or has not been initialized at the time of the update, the issue will not be detected until the device is turned on and only the `camera-error` event will be emitted. The settings will still be cleared and an `input-settings-updated` event will be emitted with the cleared settings.

* **Processor errors** — If an error occurs after the settings have been applied and the processor has started, a nonfatal-error of type [`video-processor-error`](/reference/react-native/events/error-events#video-processor-error) or [`audio-processor-error`](/reference/react-native/events/error-events#audio-processor-error) will be emitted. The processor will be turned off and the processor settings will be cleared. An `input-settings-updated` event will also be emitted with the cleared settings. For video processor failures, the video will be turned off to ensure the user is not broadcasting unintended content.

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [cycleCamera()](/reference/react-native/instance-methods/cycle-camera)
  </Card>

  <Card title="Events" icon="bolt">
    * [input-settings-updated](/reference/react-native/events/settings-events#input-settings-updated)
    * [face-counts-updated](/reference/react-native/events/media-events#face-counts-updated)
    * [input-settings-error](/reference/react-native/events/error-events#input-settings-error)
    * [video-processor-error](/reference/react-native/events/error-events#video-processor-error)
    * [audio-processor-error](/reference/react-native/events/error-events#audio-processor-error)
    * [camera-error](/reference/react-native/events/settings-events#camera-error)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Audio and video processing](/docs/daily-js/guides/audio-video#audio-and-video-processing)
    * [Audio and video](/docs/daily-js/guides/audio-video)
  </Card>
</CardGroup>


# updateLiveStreaming()
Source: https://docs.daily.co/reference/react-native/instance-methods/update-live-streaming

Updates the layout of an active live stream.

<Badge>Paid plans only</Badge>

`updateLiveStreaming(options)`

Requires the caller to be [an owner or streaming admin](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties-permissions) (a participant with `'streaming'` in their `canAdmin` permission).

## Parameters

<ParamField type="DailyLiveStreamingLayoutConfig">
  The new layout configuration. See [`DailyStreamingLayoutConfig`](/reference/react-native/types/daily-streaming-layout-config) for all presets and options.
</ParamField>

<ParamField type="string">
  The UUID of the streaming instance to update. Omit to update the default instance.
</ParamField>

## Return value

Returns `void`. Listen for [`live-streaming-updated`](/reference/react-native/events/live-streaming-events#live-streaming-updated) to confirm the change.

## Example

```javascript theme={null}
// Switch to active-participant layout
call.updateLiveStreaming({
  layout: { preset: 'active-participant' },
});

// Update a specific instance with a custom VCS layout
call.updateLiveStreaming({
  instanceId: '00000000-0000-4000-8000-000000000000',
  layout: {
    preset: 'custom',
    composition_params: {
      mode: 'dominant',
      showTextOverlay: true,
      'text.content': 'Hello',
      'videoSettings.roundedCorners': true,
    },
  },
});
```

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyStreamingOptions](/reference/react-native/types/daily-streaming-options)
    * [DailyStreamingLayoutConfig](/reference/react-native/types/daily-streaming-layout-config)
  </Card>

  <Card title="Methods" icon="code">
    * [startLiveStreaming()](/reference/react-native/instance-methods/start-live-streaming)
    * [stopLiveStreaming()](/reference/react-native/instance-methods/stop-live-streaming)
    * [addLiveStreamingEndpoints()](/reference/react-native/instance-methods/add-live-streaming-endpoints)
    * [removeLiveStreamingEndpoints()](/reference/react-native/instance-methods/remove-live-streaming-endpoints)
  </Card>

  <Card title="Events" icon="bolt">
    * [Live streaming events](/reference/react-native/events/live-streaming-events)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Live streaming](/docs/daily-js/features/live-streaming)
  </Card>

  <Card title="REST API" icon="server">
    * [Update live streaming](/reference/rest-api/rooms/live-streaming/update)
    * [streaming-updated webhook](/reference/rest-api/webhooks/events/streaming-updated)
  </Card>
</CardGroup>


# updateParticipant()
Source: https://docs.daily.co/reference/react-native/instance-methods/update-participant

Modifies a participant in a Daily call — muting, ejecting, updating permissions, or controlling track subscriptions.

`updateParticipant(sessionId, updates)`

Modifies a participant, either by sending a message to change their state, or by changing how you see them locally. Returns `this` for chaining.

## Parameters

<ParamField type="string">
  The participant's `session_id`, or `'local'` for the local participant.
</ParamField>

<ParamField type="DailyParticipantUpdateOptions">
  An object describing what to update. All fields are optional.

  <Expandable title="properties">
    <ParamField type="boolean">
      Mute (`false`) or unmute (`true`) the participant's microphone. Requires the caller to be a **participant admin** (`'participants'` in `canAdmin`). Silently ignored if not possible or if there is no active meeting.

      <Note>
        For the local participant, prefer [`setLocalAudio()`](/reference/react-native/instance-methods/set-local-audio) — though both work. For remote participants, admins can mute (`false`) but only meeting owners can unmute (`true`), and doing so is strongly discouraged as a privacy concern.
      </Note>
    </ParamField>

    <ParamField type="boolean">
      Enable (`true`) or disable (`false`) the participant's camera. Requires participant admin permission. Silently ignored if not possible.

      <Note>
        For the local participant, prefer [`setLocalVideo()`](/reference/react-native/instance-methods/set-local-video) — though both work.
      </Note>

      <Warning>
        Remotely controlling another participant's camera or microphone is a potential privacy issue. Use deliberately. Browsers require the user to have explicitly allowed mic/camera access at least once.
      </Warning>
    </ParamField>

    <ParamField type="false">
      Stop the participant's active screen share. Only `false` is accepted. Requires participant admin permission. Has no effect when `sessionId` is `'local'`.
    </ParamField>

    <ParamField type="true">
      Remove the participant from the call. Only `true` is accepted. Requires participant admin permission.
    </ParamField>

    <ParamField type="DailyTrackSubscriptionOptions">
      Controls which tracks you receive from this participant. **SFU mode only** — not supported in Daily Prebuilt. Requires [`subscribeToTracksAutomatically`](/reference/react-native/types/daily-call-options#param-subscribe-to-tracks-automatically) to be `false`; throws an error if it is `true`.

      Accepts `true`, `false`, `'staged'`, `'avatar'`, or a per-track object:

      ```javascript theme={null}
      call.updateParticipant('session-id', {
        setSubscribedTracks: {
          audio: true,
          video: 'staged',
          screenVideo: false,
          screenAudio: false,
        },
      });
      ```

      * `true` — subscribe: set up a consumer connection and start transmitting data
      * `false` — unsubscribe: tear down the consumer connection
      * `'staged'` — set up the consumer connection but pause data transmission; no bandwidth cost, but going from `'staged'` → `true` is faster than subscribing from scratch
      * `'avatar'` — subscribe to audio only, receive a placeholder for video

      When supporting large calls, subscribe to tracks you're rendering, stage tracks on adjacent pages, and unsubscribe from everything else.
    </ParamField>

    <ParamField type="DailyParticipantPermissionsUpdate">
      Updates the participant's in-call permissions (`canSend`, `canReceive`, `hasPresence`, `canAdmin`). Requires the caller to be a participant admin. See [`DailyParticipantPermissions`](/reference/react-native/types/daily-participant-permissions) for the full shape and behavior of each field.

      ```javascript theme={null}
      call.updateParticipant('session-id', {
        updatePermissions: {
          canSend: new Set(['video', 'audio']),
          canReceive: { byUserId: { foo: false } },
          hasPresence: false,
          canAdmin: new Set(['participants', 'streaming']),
        },
      });
      ```
    </ParamField>
  </Expandable>
</ParamField>

## Return value

Returns `this` (the `DailyCall` instance) for chaining.

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyParticipantPermissions](/reference/react-native/types/daily-participant-permissions)
  </Card>

  <Card title="Methods" icon="code">
    * [updateParticipants()](/reference/react-native/instance-methods/update-participants)
    * [participants()](/reference/react-native/instance-methods/participants)
    * [participantCounts()](/reference/react-native/instance-methods/participant-counts)
    * [setLocalAudio()](/reference/react-native/instance-methods/set-local-audio)
    * [setLocalVideo()](/reference/react-native/instance-methods/set-local-video)
  </Card>

  <Card title="Events" icon="bolt">
    * [participant-updated](/reference/react-native/events/participant-events#participant-updated)
    * [participant-left](/reference/react-native/events/participant-events#participant-left)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Participants](/docs/daily-js/concepts/participants)
    * [Tracks and media](/docs/daily-js/concepts/tracks)
  </Card>

  <Card title="REST API" icon="server">
    * [Meeting token: permissions](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties-permissions)
  </Card>
</CardGroup>


# updateParticipants()
Source: https://docs.daily.co/reference/react-native/instance-methods/update-participants

Modifies multiple participants at once in a Daily call.

`updateParticipants(updates)`

Modifies multiple participants at once. Internally loops over the keys of `updates` and calls [`updateParticipant()`](/reference/react-native/instance-methods/update-participant) for each. Use this instead of calling `updateParticipant()` in a loop — changes are batched together, making updates faster.

## Parameters

<ParamField type="{ [sessionId: string]: DailyParticipantUpdateOptions }">
  An object whose keys are participant session IDs and whose values are the update options for each participant. See [`updateParticipant()`](/reference/react-native/instance-methods/update-participant) for all available actions.

  Use `'*'` as a key to apply the same update to all current participants at once.
</ParamField>

## Return value

Returns `this` (the `DailyCall` instance) for chaining.

## Examples

```javascript theme={null}
// Mute all participants using '*'
call.updateParticipants({ '*': { setAudio: false } });
```

```javascript theme={null}
// Apply different updates to specific participants
call.updateParticipants({
  'session-id-1': { setAudio: false },
  'session-id-2': { setVideo: false },
});
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [updateParticipant()](/reference/react-native/instance-methods/update-participant)
    * [participants()](/reference/react-native/instance-methods/participants)
  </Card>

  <Card title="Events" icon="bolt">
    * [participant-updated](/reference/react-native/events/participant-events#participant-updated)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Participants](/docs/daily-js/concepts/participants)
  </Card>
</CardGroup>


# updateReceiveSettings()
Source: https://docs.daily.co/reference/react-native/instance-methods/update-receive-settings

Updates which simulcast quality layer to receive for each remote participant's video tracks.

`updateReceiveSettings(receiveSettings)`

Updates how you receive video tracks from remote participants — specifically, the maximum simulcast layer to decode for each participant's `video` and `screenVideo` tracks. Higher layers correspond to higher quality.

Settings can be applied per-participant, to all current participants at once via `'*'`, or to `base` — a set of defaults inherited by all participants who don't have explicit settings applied.

<Note>
  Simulcast layer settings only apply in [SFU mode](/docs/guides/architecture-and-monitoring/intro-to-video-arch#the-architecture-of-a-room-p2p-vs-sfu-calls). Desktop clients support 3 layers (0–2); mobile clients support 2 layers (0–1). Requesting a higher layer than is available is allowed — you'll receive the highest available.
</Note>

## Parameters

<ParamField type="DailyReceiveSettingsUpdates">
  An object whose keys identify which participants to update, and whose values are the settings to apply.

  <Expandable title="Key options">
    <ParamField type="DailySingleParticipantReceiveSettingsUpdates | 'inherit'">
      Settings for a specific participant. Pass `'inherit'` to reset them to the `base` defaults.
    </ParamField>

    <ParamField type="DailySingleParticipantReceiveSettingsUpdates">
      Default settings inherited by all participants who don't have explicit settings. Applies to current and future participants. Set this at join time via the [`receiveSettings` call property](/reference/react-native/types/daily-call-options#param-receive-settings) to configure defaults before anyone joins.
    </ParamField>

    <ParamField type="DailySingleParticipantReceiveSettingsUpdates">
      Shorthand to apply the same settings to all participants currently connected to you. Unlike `base`, `'*'` has no effect before joining and does not apply to future participants.
    </ParamField>
  </Expandable>

  Each value (other than `'inherit'`) is a `DailySingleParticipantReceiveSettingsUpdates` object:

  <Expandable title="DailySingleParticipantReceiveSettingsUpdates fields">
    <ParamField type="{ layer?: number | 'inherit' } | 'inherit'">
      Receive settings for the participant's camera track. `layer` selects the simulcast layer (default: `2`). Pass `'inherit'` to reset to the `base` value.
    </ParamField>

    <ParamField type="{ layer?: number | 'inherit' } | 'inherit'">
      Receive settings for the participant's screen share track. Screen video has one layer by default; additional layers require configuration via [`updateSendSettings()`](/reference/react-native/instance-methods/update-send-settings).
    </ParamField>
  </Expandable>
</ParamField>

## Return value

Returns `Promise<DailyReceiveSettings>` that resolves with the full updated receive settings for all participants.

## Examples

```javascript theme={null}
// Set a low-quality default for all participants at join time
call.join({
  url,
  receiveSettings: {
    base: { video: { layer: 0 } },
  },
});
```

```javascript theme={null}
// After joining: lower quality for everyone, promote the active speaker
await call.updateReceiveSettings({
  '*': { video: { layer: 0 } },
  [activeSpeakerSessionId]: { video: { layer: 2 } },
});
```

```javascript theme={null}
// Reset a participant to inherit from base
await call.updateReceiveSettings({
  [sessionId]: 'inherit',
});
```

```javascript theme={null}
// Reset a single track for a participant while leaving others unchanged
await call.updateReceiveSettings({
  [sessionId]: { video: 'inherit' },
});
```

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyCallOptions: receiveSettings](/reference/react-native/types/daily-call-options#param-receive-settings)
  </Card>

  <Card title="Methods" icon="code">
    * [getReceiveSettings()](/reference/react-native/instance-methods/get-receive-settings)
    * [updateSendSettings()](/reference/react-native/instance-methods/update-send-settings)
  </Card>

  <Card title="Events" icon="bolt">
    * [receive-settings-updated](/reference/react-native/events/settings-events#receive-settings-updated)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Receive-side video quality](/docs/guides/scaling-calls/best-practices-to-scale-large-experiences#adjust-receive-side-video-quality)
  </Card>
</CardGroup>


# updateRecording()
Source: https://docs.daily.co/reference/react-native/instance-methods/update-recording

Updates the layout of an active cloud recording.

<Badge>Paid plans only</Badge>

`updateRecording(options)`

Only applies to recordings using the `"cloud"` [recording type](/docs/guides/features/recording). Requires the caller to be [an owner or recording admin](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties-permissions) (a participant with `'recording'` in their `canAdmin` permission).

## Parameters

<ParamField type="DailyStreamingLayoutConfig">
  The new layout configuration. See [`DailyStreamingLayoutConfig`](/reference/react-native/types/daily-streaming-layout-config) for all presets and options.
</ParamField>

<ParamField type="string">
  The UUID of the recording instance to update. Omit to update the default instance.
</ParamField>

## Return value

Returns `void`.

## Example

```javascript theme={null}
// Switch to single-participant layout
call.updateRecording({
  layout: {
    preset: 'single-participant',
    session_id: 'abcd123...',
  },
});

// Update a specific instance with a custom VCS layout
call.updateRecording({
  instanceId: '00000000-0000-4000-8000-000000000000',
  layout: {
    preset: 'custom',
    composition_params: {
      mode: 'dominant',
      showTextOverlay: true,
      'text.content': 'Hello',
      'videoSettings.roundedCorners': true,
    },
  },
});
```

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyStreamingOptions](/reference/react-native/types/daily-streaming-options)
    * [DailyStreamingLayoutConfig](/reference/react-native/types/daily-streaming-layout-config)
  </Card>

  <Card title="Methods" icon="code">
    * [startRecording()](/reference/react-native/instance-methods/start-recording)
    * [stopRecording()](/reference/react-native/instance-methods/stop-recording)
    * [updateLiveStreaming()](/reference/react-native/instance-methods/update-live-streaming)
  </Card>

  <Card title="Events" icon="bolt">
    * [Recording events](/reference/react-native/events/recording-events)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Recording](/docs/guides/features/recording)
  </Card>
</CardGroup>


# updateScreenShare()
Source: https://docs.daily.co/reference/react-native/instance-methods/update-screen-share

Enables or disables the screen share video or audio track without stopping the screen share.

`updateScreenShare(options)`

## Parameters

<ParamField type="DailyScreenShareUpdateOptions">
  <Expandable title="properties">
    <ParamField type="{ enabled: boolean }">
      Whether to enable or disable the screen video track.
    </ParamField>

    <ParamField type="{ enabled: boolean }">
      Whether to enable or disable the screen audio track.
    </ParamField>
  </Expandable>
</ParamField>

## Return value

Returns `void`.

## Example

```javascript theme={null}
// Disable screen audio while keeping video active
call.updateScreenShare({
  screenVideo: { enabled: true },
  screenAudio: { enabled: false },
});
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [startScreenShare()](/reference/react-native/instance-methods/start-screen-share)
    * [stopScreenShare()](/reference/react-native/instance-methods/stop-screen-share)
  </Card>

  <Card title="Events" icon="bolt">
    * [local-screen-share-started](/reference/react-native/events/media-events#local-screen-share-started)
    * [local-screen-share-stopped](/reference/react-native/events/media-events#local-screen-share-stopped)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Screen sharing](/docs/daily-js/features/screen-sharing)
  </Card>
</CardGroup>


# updateSendSettings()
Source: https://docs.daily.co/reference/react-native/instance-methods/update-send-settings

Updates how the local client publishes camera, custom video, and screen share tracks.

`updateSendSettings(settings)`

Controls simulcast layer configuration and which layers are sent. Useful for adapting to poor network conditions or high CPU load, or for ensuring high-quality video when conditions allow.

## Parameters

<ParamField type="DailySendSettings">
  An object configuring send settings per track type. All keys are optional. Each value accepts a preset string (see below) or a `DailyVideoSendSettings` object:

  * `video` — local camera track. Also supports `allowAdaptiveLayers` (see below).
  * `customVideoDefaults` — default settings for all custom video tracks. Uses [camera presets](#camera-and-custom-track-presets).
  * `screenVideo` — screen share track. Uses [screen share presets](#screen-share-presets).
  * `[customKey: string]` — settings for a specific named custom track, using the track's `trackName` as the key.

  <Expandable title="DailyVideoSendSettings fields">
    <ParamField type="object">
      Simulcast layer encoding parameters. Accepts up to three layers (`low`, `medium`, `high`), each specified as [RTCRtpEncodingParameters](https://developer.mozilla.org/en-US/docs/Web/API/RTCRtpEncodingParameters). Layers must be defined starting from `"low"` and progressing upward.
    </ParamField>

    <ParamField type="'low' | 'medium' | 'high'">
      The highest simulcast layer to publish. All layers at or below this level are sent. For example, `'medium'` publishes both `low` and `medium`.
    </ParamField>

    <ParamField type="boolean">
      Enables [Daily Adaptive Bitrate](/docs/guides/architecture-and-monitoring/adaptive-bitrate) for the `video` key. When `true`, Daily dynamically adjusts the highest layer based on network conditions.
    </ParamField>
  </Expandable>
</ParamField>

## Camera and custom track presets

| Preset                             | Description                                                                  |
| ---------------------------------- | ---------------------------------------------------------------------------- |
| `'quality-optimized'`              | Higher resolutions and bitrate; best for good networks                       |
| `'bandwidth-and-quality-balanced'` | High resolution with bandwidth savings; suitable for most networks (default) |
| `'bandwidth-optimized'`            | Lower bitrate; best for constrained networks (e.g., cellular)                |
| `'default-video'`                  | Resets to default (same as `'bandwidth-and-quality-balanced'`)               |

## Screen share presets

| Preset                         | Description                                                                 |
| ------------------------------ | --------------------------------------------------------------------------- |
| `'detail-optimized'`           | Low bitrate and frame rate (max 5 fps); best for static content like slides |
| `'motion-and-detail-balanced'` | Balanced; max 15 fps; good for whiteboards and document editing             |
| `'motion-optimized'`           | Full motion; max 30 fps; 2 Mbps cap to protect call quality (default)       |
| `'default-screen-video'`       | Resets to default (same as `'motion-optimized'`)                            |

<Note>
  Send only a single simulcast layer for screen video. Define only the `"low"` layer and set `maxQuality` to `"low"`. Multiple layers are supported but screen shares are bandwidth-intensive and additional layers can degrade performance.
</Note>

## Return value

Returns `Promise<DailySendSettings>` that resolves with the updated send settings. Also triggers a [`send-settings-updated`](/reference/react-native/events/settings-events#send-settings-updated) event.

## Examples

```javascript theme={null}
// Switch camera to bandwidth-optimized preset
await call.updateSendSettings({
  video: 'bandwidth-optimized',
});
```

```javascript theme={null}
// Custom screen share with a single simulcast layer
call.updateSendSettings({
  screenVideo: {
    encodings: {
      low: { maxBitrate: 1500000, maxFramerate: 25 },
    },
    maxQuality: 'low',
  },
});
```

```javascript theme={null}
// Custom encodings for all custom video tracks
call.updateSendSettings({
  customVideoDefaults: {
    encodings: {
      low: { maxBitrate: 100000, scaleResolutionDownBy: 4, maxFramerate: 10 },
      medium: { maxBitrate: 200000, scaleResolutionDownBy: 2, maxFramerate: 15 },
      high: { maxBitrate: 700000, scaleResolutionDownBy: 1, maxFramerate: 25 },
    },
  },
});
```

```javascript theme={null}
// Override settings for a specific named custom track
await call.updateSendSettings({
  myCustomVideo: {
    maxQuality: 'medium',
  },
});
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [getSendSettings()](/reference/react-native/instance-methods/get-send-settings)
  </Card>

  <Card title="Events" icon="bolt">
    * [send-settings-updated](/reference/react-native/events/settings-events#send-settings-updated)
    * [cpu-load-change](/reference/react-native/events/network-events#cpu-load-change)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Send-side video quality](/docs/guides/scaling-calls/best-practices-to-scale-large-experiences#change-send-side-video-quality)
    * [Adaptive bitrate](/docs/guides/architecture-and-monitoring/adaptive-bitrate)
  </Card>
</CardGroup>


# updateTranscription()
Source: https://docs.daily.co/reference/react-native/instance-methods/update-transcription

Updates the set of participants being transcribed for an active transcription.

<Badge>Paid plans only</Badge>

`updateTranscription(options)`

Updates which participants are transcribed for a given transcription instance. If participants are specified or the empty array is passed, any participants that join after this call will not be transcribed unless you call `updateTranscription()` again to include them.

## Parameters

<ParamField type="string">
  The UUID of the transcription instance to update. Omit to update the default instance.
</ParamField>

<ParamField type="string[]">
  Session IDs of the participants to transcribe. Pass an empty array to stop transcribing all participants without ending the transcription session. Pass `null` to transcribe all participants.
</ParamField>

## Return value

Returns `void`.

## Examples

```javascript theme={null}
// Transcribe only specific participants
await call.updateTranscription({
  instanceId: '00000000-0000-4000-8000-000000000000',
  participants: [
    'd8a14d03-58ef-4b7c-824a-181779ab535a',
    '435fa323-65a1-4654-b788-069936da87a0',
  ],
});

// Transcribe all participants
await call.updateTranscription({participants: null});
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [startTranscription()](/reference/react-native/instance-methods/start-transcription)
    * [stopTranscription()](/reference/react-native/instance-methods/stop-transcription)
  </Card>

  <Card title="Events" icon="bolt">
    * [Transcription events](/reference/react-native/events/transcription-events)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Transcription](/docs/guides/features/transcription)
    * [daily-js transcription guide](/docs/daily-js/features/transcription)
  </Card>

  <Card title="REST API" icon="server">
    * [Update transcription](/reference/rest-api/rooms/transcription/update)
  </Card>
</CardGroup>


# updateWaitingParticipant()
Source: https://docs.daily.co/reference/react-native/instance-methods/update-waiting-participant

Grants or denies access to a participant waiting to join the meeting.

`updateWaitingParticipant(id, updates)`

The `id` must correspond to a participant in [`waitingParticipants()`](/reference/react-native/instance-methods/waiting-participants) — passing an unknown ID results in an error.

Once access is granted, the participant is removed from [`waitingParticipants()`](/reference/react-native/instance-methods/waiting-participants) and a [`waiting-participant-removed`](/reference/react-native/events/participant-events#waiting-participant-removed) event fires.

## Parameters

<ParamField type="string">
  The session ID of the waiting participant.
</ParamField>

<ParamField type="DailyWaitingParticipantUpdateOptions">
  <Expandable title="properties">
    <ParamField type="boolean">
      Pass `true` to grant the participant access to join. Pass `false` to deny it.
    </ParamField>
  </Expandable>
</ParamField>

## Return value

Returns `Promise<{ id: string }>` — resolves with the ID of the updated participant.

## Example

```javascript theme={null}
// Grant access to a specific waiting participant
await call.updateWaitingParticipant('session-id', {
  grantRequestedAccess: true,
});

// Deny access
await call.updateWaitingParticipant('session-id', {
  grantRequestedAccess: false,
});
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [updateWaitingParticipants()](/reference/react-native/instance-methods/update-waiting-participants)
    * [waitingParticipants()](/reference/react-native/instance-methods/waiting-participants)
    * [requestAccess()](/reference/react-native/instance-methods/request-access)
  </Card>

  <Card title="Events" icon="bolt">
    * [waiting-participant-added](/reference/react-native/events/participant-events#waiting-participant-added)
    * [waiting-participant-updated](/reference/react-native/events/participant-events#waiting-participant-updated)
    * [waiting-participant-removed](/reference/react-native/events/participant-events#waiting-participant-removed)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Waiting room](/docs/daily-js/guides/waiting-room)
  </Card>
</CardGroup>


# updateWaitingParticipants()
Source: https://docs.daily.co/reference/react-native/instance-methods/update-waiting-participants

Grants or denies access to multiple waiting participants at once.

`updateWaitingParticipants(updates)`

Use this instead of looping over [`updateWaitingParticipant()`](/reference/react-native/instance-methods/update-waiting-participant).

## Parameters

<ParamField type="{ [id: string]: DailyWaitingParticipantUpdateOptions }">
  An object whose keys are waiting participant session IDs and whose values are update options. Accepts the special key `'*'` to apply updates to all waiting participants not otherwise explicitly specified.

  <Expandable title="DailyWaitingParticipantUpdateOptions fields">
    <ParamField type="boolean">
      Pass `true` to grant the participant their requested access level. Pass `false` to deny it.
    </ParamField>
  </Expandable>
</ParamField>

## Return value

Returns `Promise<{ ids: string[] }>` — resolves with an array of the updated participants' IDs.

## Examples

```javascript theme={null}
// Grant access to all waiting participants
await call.updateWaitingParticipants({
  '*': { grantRequestedAccess: true },
});
```

```javascript theme={null}
// Grant one participant, deny another
await call.updateWaitingParticipants({
  'session-id-1': { grantRequestedAccess: true },
  'session-id-2': { grantRequestedAccess: false },
});
```

```javascript theme={null}
// Deny all except one
await call.updateWaitingParticipants({
  '*': { grantRequestedAccess: false },
  'session-id-1': { grantRequestedAccess: true },
});
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [updateWaitingParticipant()](/reference/react-native/instance-methods/update-waiting-participant)
    * [waitingParticipants()](/reference/react-native/instance-methods/waiting-participants)
    * [requestAccess()](/reference/react-native/instance-methods/request-access)
  </Card>

  <Card title="Events" icon="bolt">
    * [waiting-participant-added](/reference/react-native/events/participant-events#waiting-participant-added)
    * [waiting-participant-updated](/reference/react-native/events/participant-events#waiting-participant-updated)
    * [waiting-participant-removed](/reference/react-native/events/participant-events#waiting-participant-removed)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Waiting room](/docs/daily-js/guides/waiting-room)
  </Card>
</CardGroup>


# waitingParticipants()
Source: https://docs.daily.co/reference/react-native/instance-methods/waiting-participants

Returns the set of participants currently waiting for access to the meeting.

`waitingParticipants()`

Returns the set of participants who have called [`requestAccess()`](/reference/react-native/instance-methods/request-access) and are waiting for elevated access to the meeting. Only available to meeting owners and participant admins. Admins should use [`updateWaitingParticipant()`](/reference/react-native/instance-methods/update-waiting-participant) or [`updateWaitingParticipants()`](/reference/react-native/instance-methods/update-waiting-participants) to grant or deny access to waiting participants.

## Return value

Returns `{ [id: string]: DailyWaitingParticipant }` — an object mapping participant IDs to their waiting participant info.

<ResponseField name="id" type="string">
  The participant's session ID.
</ResponseField>

<ResponseField name="name" type="string">
  The participant's display name.
</ResponseField>

<ResponseField name="awaitingAccess" type="SpecifiedDailyAccess">
  The access level the participant is requesting. Currently the only requestable level is `{ level: 'full' }`.
</ResponseField>

## Example

```javascript theme={null}
const waiting = call.waitingParticipants();

for (const [id, participant] of Object.entries(waiting)) {
  console.log(`${participant.name} is waiting for ${participant.awaitingAccess.level} access`);
}
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [updateWaitingParticipant()](/reference/react-native/instance-methods/update-waiting-participant)
    * [updateWaitingParticipants()](/reference/react-native/instance-methods/update-waiting-participants)
    * [requestAccess()](/reference/react-native/instance-methods/request-access)
  </Card>

  <Card title="Events" icon="bolt">
    * [waiting-participant-added](/reference/react-native/events/participant-events#waiting-participant-added)
    * [waiting-participant-updated](/reference/react-native/events/participant-events#waiting-participant-updated)
    * [waiting-participant-removed](/reference/react-native/events/participant-events#waiting-participant-removed)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Waiting room](/docs/daily-js/guides/waiting-room)
  </Card>
</CardGroup>


# Daily.getCallInstance()
Source: https://docs.daily.co/reference/react-native/static-methods/get-call-instance

Returns a valid DailyCall instance by call client ID, or the current instance if no ID is provided.

`Daily.getCallInstance(callClientId?)`

Returns a valid `daily-js` call instance. If `callClientId` is provided, returns the instance with that ID. If omitted, returns the first instance created. When running [multiple call instances](/docs/daily-js/guides/multi-instance) simultaneously, always pass a `callClientId` to avoid ambiguity. Returns `undefined` if no matching valid instance exists. An instance becomes invalid once [`destroy()`](/reference/react-native/instance-methods/destroy) has been called on it.

## Parameters

<ParamField type="string">
  Optional. The `callClientId` of the specific instance to retrieve. When running [multiple call instances](/docs/daily-js/guides/multi-instance) simultaneously, use this to look up a specific one.
</ParamField>

## Return value

Returns the matching [`DailyCall`](/reference/react-native/daily-call-client) instance, or `undefined` if no valid instance exists for the given ID (or no instance exists at all when called without an argument).

## Example

```javascript theme={null}
console.log(Daily.getCallInstance()); // undefined — no instance yet

const call = Daily.createCallObject();
console.log(Daily.getCallInstance() === call); // true

// With multiple instances, omitting the ID returns the first one created
const callA = Daily.createCallObject();
const callB = Daily.createCallObject();
console.log(Daily.getCallInstance() === callA); // true — callA was created first

// Pass a callClientId to retrieve a specific instance
console.log(Daily.getCallInstance(callB.callClientId()) === callB); // true

callA.destroy();
console.log(Daily.getCallInstance(callA.callClientId())); // undefined — destroyed
```

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [Daily.createCallObject()](/reference/react-native/daily-call-client/create-call-object)
    * [destroy()](/reference/react-native/instance-methods/destroy)
    * [isDestroyed()](/reference/react-native/instance-methods/is-destroyed)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Multiple call instances](/docs/daily-js/guides/multi-instance)
  </Card>
</CardGroup>


# Static methods
Source: https://docs.daily.co/reference/react-native/static-methods/index

Using our video API, static methods allow developers to get information about the environment surrounding a WebRTC call before constructing a Daily object.

Use Daily [static methods](https://developer.mozilla.org/en-US/docs/Glossary/Static_method) to gather information before constructing a Daily object.

Static methods include:

* [`getCallInstance()`](/reference/react-native/static-methods/get-call-instance)
* [`supportedBrowser()`](/reference/react-native/static-methods/supported-browser)


# supportedBrowser()
Source: https://docs.daily.co/reference/react-native/static-methods/supported-browser

Returns information about the current browser and its Daily feature support.

`Daily.supportedBrowser()`

Returns information about the current browser and which Daily features it supports. Call this before joining to detect unsupported environments and conditionally enable features.

## Example

```javascript theme={null}
const {
  supported,
  mobile,
  name,
  version,
  supportsScreenShare,
  supportsVideoProcessing,
  supportsAudioProcessing,
} = Daily.supportedBrowser();

if (!supported) {
  // Show an unsupported browser message
}
```

## Return value

Returns an object with the following fields:

<ResponseField name="supported" type="boolean">
  Whether the browser supports Daily video calls.
</ResponseField>

<ResponseField name="mobile" type="boolean">
  Whether the browser is running on a mobile device.
</ResponseField>

<ResponseField name="name" type="string">
  The browser name (e.g. `"Chrome"`, `"Firefox"`, `"Safari"`).
</ResponseField>

<ResponseField name="version" type="string">
  The browser version string.
</ResponseField>

<ResponseField name="supportsScreenShare" type="boolean">
  Whether the user can initiate a screen share. See [`supportsScreenShare`](#supportsscreenshare) below.
</ResponseField>

<ResponseField name="supportsFullscreen" type="boolean">
  Whether the browser supports fullscreen mode.
</ResponseField>

<ResponseField name="supportsSfu" type="boolean">
  Whether the browser supports SFU topology.
</ResponseField>

<ResponseField name="supportsVideoProcessing" type="boolean">
  Whether background blur and virtual backgrounds are available. See [`supportsVideoProcessing`](#supportsvideoprocessing) below.
</ResponseField>

<ResponseField name="supportsAudioProcessing" type="boolean">
  Whether noise cancellation is available. See [`supportsAudioProcessing`](#supportsaudioprocessing) below.
</ResponseField>

## Supported browsers

| Browser        | Minimum version | Notes                                                       |
| -------------- | --------------- | ----------------------------------------------------------- |
| Chrome         | 75              | Includes Chromium-based browsers and Edge 75+               |
| Firefox        | 91              |                                                             |
| Safari         | 13.1            |                                                             |
| iOS Safari     | iOS 14.3        | Also WKWebView-based browsers on iOS 14.3+                  |
| Android Chrome | Current         | Also Firefox, Samsung Internet, and Chromium-based browsers |
| Electron       | 6               |                                                             |

All other browsers (including legacy Edge, Internet Explorer, and Opera) are not supported. Chromium-based Edge reports a Chrome user agent and is treated identically to Chrome.

## `supportsScreenShare`

Screen share initiation requires desktop. Mobile users can **view** screen shares but cannot start one.

| Browser            | Can share screen  |
| ------------------ | ----------------- |
| Chrome (desktop)   | Yes               |
| Firefox (desktop)  | Yes               |
| Safari (desktop)   | Yes               |
| Any mobile browser | No — receive only |

## `supportsVideoProcessing`

Background blur and virtual backgrounds are powered by [Banuba](https://www.banuba.com/) and require WebGL2. Mobile browsers are not currently supported.

| Browser                | Supported |
| ---------------------- | --------- |
| Chrome 77+ (desktop)   | Yes       |
| Firefox 97+ (desktop)  | Yes       |
| Safari 15.4+ (desktop) | Yes       |
| Any mobile browser     | No        |
| React Native           | No        |

WebGL2 must be available — either hardware-accelerated or software-rendered. If only software WebGL2 is available, video effects will still work but may result in lower frame rates.

Safari requires version 15.4 or later. Earlier versions (pre-15 and 15.0–15.3) are excluded due to WebGL compatibility issues with Banuba.

## `supportsAudioProcessing`

Noise cancellation is powered by [Krisp](https://krisp.ai/) and requires `AudioWorkletNode`.

| Browser                | Supported |
| ---------------------- | --------- |
| Chrome (desktop)       | Yes       |
| Firefox (desktop)      | Yes       |
| Safari 17.4+ (desktop) | Yes       |
| Android Chrome/Firefox | No        |
| React Native           | No        |

Safari requires version 17.4 or later. Earlier versions lack `AudioWorkletNode` support.

## Known limitations

### Audio output device selection — Firefox 116–122

Audio output device selection is disabled on Firefox 116–122. These versions shipped `setSinkId()` with a bug that breaks echo cancellation when used. Fixed in Firefox 123.

### Local audio level observers — Safari older than 14.1

[`startLocalAudioLevelObserver()`](/reference/react-native/instance-methods/start-local-audio-level-observer) relies on `AudioWorkletNode`, which is not available in Safari older than 14.1.

## See also

<CardGroup>
  <Card title="Methods" icon="code">
    * [Daily.createCallObject()](/reference/react-native/daily-call-client/create-call-object)
    * [join()](/reference/react-native/instance-methods/join)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Introduction](/docs/daily-js/introduction)
  </Card>
</CardGroup>


# DailyCallOptions
Source: https://docs.daily.co/reference/react-native/types/daily-call-options

Configuration options accepted by Daily factory methods and join().

`DailyCallOptions` is the configuration object accepted by Daily's factory method ([`createCallObject()`](/reference/react-native/daily-call-client/create-call-object)) and by [`join()`](/reference/react-native/instance-methods/join) and [`load()`](/reference/react-native/instance-methods/load). Properties marked as `dailyConfig` must be nested inside a `dailyConfig` key.

```javascript theme={null}
const call = Daily.createCallObject({
  subscribeToTracksAutomatically: false,
  dailyConfig: {
    micAudioMode: 'music',
  },
});

await call.join({
  url: 'https://your-domain.daily.co/room-name',
  token: 'YOUR_TOKEN',
  startVideoOff: true,
});
```

## Properties

<ParamField type="string">
  Optional as a DailyCall property if a url is passed to the `join()` method. Otherwise, required.
</ParamField>

<ParamField type="string">
  Optional [meeting token](/reference/rest-api/meeting-tokens)

  (Used with the `join()` method).
</ParamField>

<ParamField type="boolean">
  Optional: set to `true` to disable the default behavior of automatically turning on your camera on the first call to either `join()` or `startCamera()`.

  Note: this means that if you turn on your camera as part of or after `startCamera()`, using `startVideoOff: true` in a subsequent `join()` will have no effect.

  You can also control what happens on a direct `join()` (i.e. without `startCamera()` first) using [token](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties-start-video-off) or [room](/reference/rest-api/rooms/get-room#response-config-start-video-off) properties.
</ParamField>

<ParamField type="boolean">
  Optional: set to `true` to disable the default behavior of automatically turning on your microphone on the first call to either `join()` or `startCamera()`.

  Note: this means that if you turn on your microphone as part of or after `startCamera()`, using `startAudioOff: true` in a subsequent `join()` will have no effect.

  You can also control what happens on a direct `join()` (i.e. without `startCamera()` first) using [token](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties-start-video-off) or [room](/reference/rest-api/rooms/get-room#response-config-start-video-off) properties.
</ParamField>

<ParamField type="string">
  Optional: Sets the participant's userName
</ParamField>

<ParamField type="unknown">
  Optional: Sets custom `userData` on the participant. See [`setUserData()`](/reference/react-native/instance-methods/set-user-data) for more details and requirements.
</ParamField>

<ParamField type="boolean">
  Optional: Receive all audio, video, and screen tracks from all call participants

  Default: true

  Applies only when building with the [Daily call object](/docs/daily-js/concepts/call-modes#call-object-mode) and while connected in [SFU mode](/docs/guides/architecture-and-monitoring/intro-to-video-arch#the-architecture-of-a-room-p2p-vs-sfu-calls).

  A value of `false` means no tracks will be received until they are explicitly subscribed to. Read more about manual track subscriptions in our [docs](/reference/react-native/instance-methods/update-participant#param-set-subscribed-tracks).
</ParamField>

<ParamField type="DailyReactNativeConfig">
  Optional: React Native-specific configuration options.

  <Expandable title="androidInCallNotification">
    <ResponseField name="title" type="string">
      Optional: title to display in the Android "ongoing call" notification.

      If you need a localized title, set this property to your localized string.

      Default: `"In a call"`
    </ResponseField>

    <ResponseField name="subtitle" type="string">
      Optional: subtitle to display in the Android "ongoing call" notification.

      If you need a localized subtitle, set this property to your localized string.

      Default: `"You're in a call. Tap to open it."`
    </ResponseField>

    <ResponseField name="iconName" type="string">
      Optional: name of Android drawable resource to display in the Android "ongoing call" notification.

      Default: `"ic_daily_videocam_24dp"` (a video camera icon)
    </ResponseField>

    <ResponseField name="disableForCustomOverride" type="boolean">
      Optional: whether to disable the Android "ongoing call" notification entirely.

      Default: `false`

      <Warning>Only set this property if you plan to provide your own Android foreground service, which is important to keeping the call alive and connected while your app is in the background. Changing this property is not recommended for most apps.</Warning>
    </ResponseField>
  </Expandable>

  <Expandable title="disableAutoDeviceManagement">
    <ResponseField name="audio" type="boolean">
      Optional: whether to disable automatic audio device management, which encompasses audio device selection and configuration (controlled by [`nativeInCallAudioMode()`](/reference/react-native/instance-methods/native-in-call-audio-mode)) as well as auto-muting the mic based on loss of audio focus.

      Default: `false`

      <Warning>Only set this property if you plan to manage native audio routing yourself. Changing this property is not recommended for most apps.</Warning>
    </ResponseField>

    <ResponseField name="video" type="boolean">
      Optional: whether to disable automatic video device management, which auto-mutes the camera when the app is backgrounded.

      Default: `false`

      <Warning>Auto-muting is especially important on iOS since your app can't capture video while in the background anyway, so it's better to let other participants know. Changing this property is not recommended for most apps.</Warning>
    </ResponseField>
  </Expandable>
</ParamField>

<ParamField type="boolean or MediaStreamTrack object">
  Optional: set the audio track, device, or initial state for the call.

  Default: true

  ⚠️This configuration property is not supported when using [Daily Prebuilt](https://www.daily.co/prebuilt).

  Pass false only if the participant's audio should remain muted the entire call.

  Pass a device ID string (like you get back from `enumerateDevices()` to specify what audio input device to use.

  Or pass a [MediaStreamTrack object](https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack) to use that audio/video track directly. If you pass a MediaStreamTrack, you're responsible for managing the lifecycle of that track. If you pass a Device ID string, the Daily API will manage the media track for that device.
</ParamField>

<ParamField type="boolean or MediaStreamTrack object">
  Optional: set the video track, device, or initial state for the call.

  Default: true

  ⚠️This configuration property is not supported when using [Daily Prebuilt](https://www.daily.co/prebuilt).

  Pass false only if the participant's video should remain muted the entire call.

  Pass a device ID string (like you get back from [`enumerateDevices()`](/reference/react-native/instance-methods/enumerate-devices)) to specify what video input device to use.

  Or pass a [MediaStreamTrack object](https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack) to use that audio/video track directly. If you pass a MediaStreamTrack, you're responsible for managing the lifecycle of that track. If you pass a Device ID string, the Daily API will manage the media track for that device.
</ParamField>

<ParamField type="object">
  Optional: Takes a media receive settings object (see [`updateReceiveSettings()`](/reference/react-native/instance-methods/update-receive-settings) for details). Specifies the receive settings to use right away upon joining the call.
</ParamField>

<ParamField type="object">
  Optional: Takes a media send settings object (see [`updateSendSettings()`](/reference/react-native/instance-methods/update-send-settings) for details). Specifies the send settings to use right away upon joining the call.
</ParamField>

<ParamField type="object">
  This property has been deprecated. Instead, use the [`sendSettings`](/reference/react-native/types/daily-call-options#param-send-settings) iframe property to specify custom simulcast encodings.

  Optional: Requests that a participant sends video spatial layers with specific simulcast encodings (`maxBitrate`, `maxFramerate`, and `scaleResolutionDownBy`) to the server. Must be passed as a property of a `dailyConfig` object.

  <Badge>Deprecated</Badge>
</ParamField>

<ParamField type="string or object">
  Optional (Advanced): Configures the sender's audio tracks (`audio` or `screenAudio`) to be either `music` or `speech`. When set to `music`, a 256kbps stereo audio track will be sent to other participants. When set to `speech`, browser defaults will be applied.

  Alternatively, an object can be provided in order to specify the audio bitrate and stereo mode. The bitrate is a number in bits per second and the stereo mode is a boolean, where `true` enables 2-channel stereo audio and `false` enables 1-channel mono audio.

  Must be passed as a property of a `dailyConfig` object.

  `micAudioMode` works in SFU mode only.

  Example object:

  ```javascript theme={null}
  \{
    micAudioMode: \{
      bitrate: 128000,
      stereo: false,
    \},
  \}
  ```

  Default: `null`
</ParamField>

<ParamField type="boolean">
  Must be passed as a property in a [`createCallObject()`](/reference/react-native/daily-call-client/create-call-object).

  Optional: Setting to true will override Daily's default behavior and allow multiple call instances to exist and work simultaneously. See [this guide](/docs/daily-js/guides/multi-instance) for more.

  Introduced in `daily-js 0.67.0`.

  Default: false
</ParamField>

<ParamField type="boolean">
  Must be passed as a property in a [`createCallObject()`](/reference/react-native/daily-call-client/create-call-object).

  Optional: Setting to false will override override Daily's default behavior and allow a call instance to be used after it has been destroyed. Use of this flag is discouraged.

  Default: true
</ParamField>

<ParamField type="object">
  Optional (Advanced): Allows for specifying custom TURN servers rather than only using Daily's default TURN servers.

  ⚠️ This configuration property is part of the Advanced Firewall Control add-on. Please contact [Sales](https://live.daily.co/talk-to-us) to enable this functionality.

  Must be passed as a property of a `dailyConfig` object.

  #### Properties:

  `iceServers`:

  * type: [`RTCIceServer[]`](https://w3c.github.io/webrtc-pc/#dom-rtciceserver)
  * description: Each object in the array has properties `urls`, `username` and `credential`. See [`RTCIceServer[]`](https://w3c.github.io/webrtc-pc/#dom-rtciceserver) for full description.
  * default: `[]`

  `placement`:

  * type: `'front'` | `'back'` | `'replace'`
  * description: Controls how the provided `iceServers` are included relative to the Daily-provided servers. `'front'` means the provided `iceServers` are included in the array first. `'back'` means the Daily-provided servers are included first. `'replace'` means that only the provided `iceServers` are used. Since all known WebRTC implementations will try all included `iceServers` and pick one based on the lowest RTT, we recommend omitting this property unless using `'replace'`.
  * default: `'front'`

  `iceTransportPolicy`:

  * type: `'all'` | `'relay'`
  * description: `'all'` will use all of the candidates. `'relay'` will only use relay candidates, such as those passing through a TURN server. See [`RTCIceTransportPolicy` Enum](https://w3c.github.io/webrtc-pc/#rtcicetransportpolicy-enum) for more information. Note: Forcing the use of relay candidates is useful for testing, but for most production use cases, the default value of `'all'` should be used.
  * default: `'all'`

  Example object:

  ```javascript theme={null}
  \{
    iceConfig: \{
      iceServers: [
        \{
          "urls": [
            "stun:stunserver.example.org:3478",
            "turn:turnserver.example.org:3478?transport=udp",
            "turn:turnserver.example.org:3478?transport=tcp",
            "turn:turnserver.example.org:443?transport=tcp",
            "turns:turnserver.example.org:443?transport=tcp"
          ],
          "username": "[USER_NAME]",
          "credential": "[CREDENTIAL]"
        \}
      ],
    \},
  \}
  ```

  After setting `iceConfig` as a frame property, it will be necessary to call [`setIceConfig()`](/reference/react-native/instance-methods/set-ice-config) periodically so that the `iceServer` credentials remain valid, in case they are needed for reconnections, or to connect to new peers in peer mode.

  It is recommended to use TURN server credentials that are valid for more than one hour, and call [`setIceConfig()`](/reference/react-native/instance-methods/set-ice-config) every hour to refresh the credentials, if possible.
</ParamField>

<ParamField type="string">
  Optional (Advanced): If defined, connections to Daily's HTTPS and WebSocket endpoints will be sent instead to the specified proxy server.

  ⚠️ This configuration property is part of the Advanced Firewall Control add-on. Please contact [Sales](https://live.daily.co/talk-to-us) to enable this functionality.

  Must be passed as a property of a `dailyConfig` object. Defaults to `null`.

  Example:

  ```javascript theme={null}
  // Pass configuration properties to createCallObject()
  call = Daily.createCallObject(\{
    dailyConfig: \{
      proxyUrl: 'https://my-proxy-server:8080',
    \},
  \});
  call.join(\{ url: 'DAILY_ROOM_URL' \});
  ```

  If needed, [`setProxyUrl()`](/reference/react-native/instance-methods/set-proxy-url) can be used to modify the property once set.

  #### Proxy requirements

  The proxy server must proxy HTTPS connections to:

  * [https://prod-ks.pluot.blue/](https://prod-ks.pluot.blue/)\*
  * [https://c.daily.co/](https://c.daily.co/)\*
  * [https://gs.daily.co/](https://gs.daily.co/)\*

  It must also proxy HTTPS connections converting to WebSockets on `*.wss.daily.co` and `*-wss.daily.co`. If possible, proxying on `*.daily.co` is best.

  Note: the URLs listed here are subject to change in subsequent releases of `daily-js`.
</ParamField>


# DailyParticipant
Source: https://docs.daily.co/reference/react-native/types/daily-participant

The object representing a participant in a Daily call, returned by participants() and emitted on participant events.

`DailyParticipant` represents a single participant in a Daily call. It is returned by [`participants()`](/reference/react-native/instance-methods/participants) and included in the payload of participant events. Daily keeps this object up to date as media states, permissions, and network conditions change.

```typescript theme={null}
interface DailyParticipant {
  session_id: string;
  user_id: string;
  user_name: string;
  userData?: unknown;
  local: boolean;
  owner: boolean;
  record: boolean;
  joined_at?: Date;
  will_eject_at: Date;
  participantType?: DailyParticipantTypeValues;
  networkQualityState?: 'good' | 'warning' | 'bad' | 'unknown';
  tracks: DailyParticipantTracks;
  permissions: DailyParticipantPermissions;
}
```

## Properties

<ResponseField name="session_id" type="string">
  A unique identifier for this specific join event. Randomly generated on every `join()` call. Used as the key in `participants()` and `updateParticipant()`, and in REST API endpoints. Not stable across reconnects — if a participant leaves and rejoins, they get a new `session_id`.
</ResponseField>

<ResponseField name="user_id" type="string">
  A stable identifier for the user, settable via a meeting token. Persists across reconnects within the same call session. Defaults to `session_id` if not set via token.
</ResponseField>

<ResponseField name="user_name" type="string">
  The participant's display name. Set via a meeting token, [`DailyCallOptions`](/reference/react-native/types/daily-call-options), or [`setUserName()`](/reference/react-native/instance-methods/set-user-name).
</ResponseField>

<ResponseField name="userData" type="unknown">
  Arbitrary JSON data associated with the participant. Set via [`DailyCallOptions`](/reference/react-native/types/daily-call-options) or [`setUserData()`](/reference/react-native/instance-methods/set-user-data).
</ResponseField>

<ResponseField name="local" type="boolean">
  `true` for the local participant. The local participant is always available at `participants().local`.
</ResponseField>

<ResponseField name="owner" type="boolean">
  `true` when the participant joined with an owner-level meeting token or was granted owner permissions.
</ResponseField>

<ResponseField name="record" type="boolean">
  `true` when the participant is a cloud recording bot.
</ResponseField>

<ResponseField name="joined_at" type="Date">
  Timestamp for when the participant joined the call. Not set until after the `joined-meeting` event. The timestamp reflects the server's clock, so it may differ slightly from the local client's clock.
</ResponseField>

<ResponseField name="will_eject_at" type="Date">
  If the token or room has an expiration with `eject_at_token_exp` or `eject_at_room_exp` set to `true`, this is the timestamp when the participant will be ejected. If no ejection is configured, this is `0` (Dec 31, 1969). Note: this timestamp matches the client clock, not the server clock.
</ResponseField>

<ResponseField name="participantType" type="string | undefined">
  Set for non-human participants. Not present for standard web participants.

  <Expandable title="participantType values">
    | Value                   | Description                                                              |
    | ----------------------- | ------------------------------------------------------------------------ |
    | `'remote-media-player'` | Participant is a remote media player                                     |
    | `'sip-dial-in'`         | Participant joined via a SIP device dialing into the Daily room          |
    | `'sip-dial-out'`        | Participant joined when a SIP endpoint was called using the dial-out API |
    | `'pstn-dial-in'`        | Participant joined via dialing a PIN-based phone number                  |
    | `'pstn-dial-out'`       | Participant joined when a phone number was called using the dial-out API |
    | `'unknown'`             | Participant is SIP/PSTN but Daily cannot determine the exact type        |
  </Expandable>
</ResponseField>

<ResponseField name="networkQualityState" type="'good' | 'warning' | 'bad' | 'unknown'">
  The participant's current network quality as assessed by Daily. Updated via [`network-quality-change`](/reference/react-native/events/network-events#network-quality-change) events.
</ResponseField>

<ResponseField name="tracks" type="DailyParticipantTracks">
  All media track states for this participant. Keys are `'audio'`, `'video'`, `'screenAudio'`, `'screenVideo'`, and any custom track names. Values are [`DailyTrackState`](/reference/react-native/types/daily-track-state) objects.

  ```typescript theme={null}
  interface DailyParticipantTracks {
    audio: DailyTrackState;
    video: DailyTrackState;
    screenAudio: DailyTrackState;
    screenVideo: DailyTrackState;
    [customTrackKey: string]: DailyTrackState | undefined;
  }
  ```

  See [`DailyTrackState`](/reference/react-native/types/daily-track-state) for the full field reference.
</ResponseField>

<ResponseField name="permissions" type="DailyParticipantPermissions">
  The participant's current send, receive, and admin permissions. See [`DailyParticipantPermissions`](/reference/react-native/types/daily-participant-permissions) for the full field reference.
</ResponseField>

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyTrackState](/reference/react-native/types/daily-track-state)
    * [DailyParticipantPermissions](/reference/react-native/types/daily-participant-permissions)
  </Card>

  <Card title="Methods" icon="code">
    * [participants()](/reference/react-native/instance-methods/participants)
    * [updateParticipant()](/reference/react-native/instance-methods/update-participant)
  </Card>

  <Card title="Events" icon="bolt">
    * [participant-joined](/reference/react-native/events/participant-events#participant-joined)
    * [participant-updated](/reference/react-native/events/participant-events#participant-updated)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Participants](/docs/daily-js/concepts/participants)
  </Card>
</CardGroup>


# DailyParticipantPermissions
Source: https://docs.daily.co/reference/react-native/types/daily-participant-permissions

The send, receive, and admin permissions for a participant in a Daily call.

`DailyParticipantPermissions` describes what a participant is allowed to do in a call. It is exposed as `DailyParticipant.permissions` and can be updated at runtime via [`updateParticipant()`](/reference/react-native/instance-methods/update-participant).

```typescript theme={null}
interface DailyParticipantPermissions {
  hasPresence: boolean;
  canSend: boolean | Set<'video' | 'audio' | 'screenVideo' | 'screenAudio' | 'customVideo' | 'customAudio'>;
  canReceive: DailyParticipantCanReceivePermission;
  canAdmin: boolean | Set<'participants' | 'streaming' | 'transcription'>;
}
```

## Properties

<ResponseField name="hasPresence" type="boolean">
  When `false`, the participant is hidden from all other participants. They do not appear in `participants()` for others, cannot be seen or heard, and their events are not broadcast. Useful for silent observers or bots.
</ResponseField>

<ResponseField name="canSend" type="boolean | Set<string>">
  Controls which media tracks the participant may publish. `true` allows all, `false` blocks all, or a `Set` of specific track types.

  <Expandable title="allowed values">
    <ResponseField name="&#x22;video&#x22;">Camera video track.</ResponseField>
    <ResponseField name="&#x22;audio&#x22;">Microphone audio track.</ResponseField>
    <ResponseField name="&#x22;screenVideo&#x22;">Screen share video.</ResponseField>
    <ResponseField name="&#x22;screenAudio&#x22;">Screen share audio.</ResponseField>
    <ResponseField name="&#x22;customVideo&#x22;">Any custom video track started with `startCustomTrack()`.</ResponseField>
    <ResponseField name="&#x22;customAudio&#x22;">Any custom audio track started with `startCustomTrack()`.</ResponseField>
  </Expandable>
</ResponseField>

<ResponseField name="canReceive" type="DailyParticipantCanReceivePermission">
  Controls which participants' media this participant may subscribe to. Overrides cascade from most general (`base`) to most specific (`byParticipantId`).

  <Expandable title="canReceive properties">
    <ResponseField name="base" type="boolean | object">
      Default receive permission that applies to all remote participants unless overridden. `true` allows all media, `false` blocks all. Or provide a granular object:

      ```typescript theme={null}
      {
        video: boolean;
        audio: boolean;
        screenVideo: boolean;
        screenAudio: boolean;
        customVideo: { '*': boolean; [trackName: string]: boolean };
        customAudio: { '*': boolean; [trackName: string]: boolean };
      }
      ```
    </ResponseField>

    <ResponseField name="byUserId" type="object">
      Per-`user_id` overrides. A mapping from `user_id` to `true`, `false`, or a partial per-media-type object. Overrides `base` for the matched participant.
    </ResponseField>

    <ResponseField name="byParticipantId" type="object">
      Per-`session_id` overrides. A mapping from `session_id` to `true`, `false`, or a partial per-media-type object. Overrides both `base` and `byUserId` for the matched participant.
    </ResponseField>
  </Expandable>
</ResponseField>

<ResponseField name="canAdmin" type="boolean | Set<string>">
  Controls which administrative capabilities the participant holds. `true` grants all, `false` grants none, or a `Set` of specific capabilities.

  <Expandable title="allowed values">
    <ResponseField name="&#x22;participants&#x22;">Can mute, eject, and update permissions of other participants. Can also admit waiting participants.</ResponseField>
    <ResponseField name="&#x22;streaming&#x22;">Can start and stop cloud recordings and live streams.</ResponseField>
    <ResponseField name="&#x22;transcription&#x22;">Can start and stop transcription.</ResponseField>
  </Expandable>
</ResponseField>

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyParticipant](/reference/react-native/types/daily-participant)
  </Card>

  <Card title="Methods" icon="code">
    * [updateParticipant()](/reference/react-native/instance-methods/update-participant)
  </Card>

  <Card title="Events" icon="bolt">
    * [participant-updated](/reference/react-native/events/participant-events#participant-updated)
  </Card>

  <Card title="REST API" icon="server">
    * [Create meeting token](/reference/rest-api/meeting-tokens/create-meeting-token)
    * [Update participant permissions](/reference/rest-api/rooms/session/update-permissions)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Permissions](/docs/daily-js/guides/permissions)
  </Card>
</CardGroup>


# DailyStreamingLayoutConfig
Source: https://docs.daily.co/reference/react-native/types/daily-streaming-layout-config

Layout configuration for cloud recordings and live streams. A discriminated union keyed on the preset field.

`DailyStreamingLayoutConfig` controls how participant video is composed when cloud recording or live streaming. It is a discriminated union — the `preset` field determines which layout is used and which additional fields are available.

```typescript theme={null}
type DailyStreamingLayoutConfig =
  | { preset: 'default';               /* ... */ }
  | { preset: 'single-participant';    /* ... */ }
  | { preset: 'active-participant';    /* ... */ }
  | { preset: 'portrait';              /* ... */ }
  | { preset: 'audio-only';            /* ... */ }
  | { preset: 'raw-tracks-audio-only'; /* ... */ }
  | { preset: 'custom';                /* ... */ }
```

Pass a layout config via the `layout` field of [`DailyStreamingOptions`](/reference/react-native/types/daily-streaming-options) when calling [`startRecording()`](/reference/react-native/instance-methods/start-recording), [`updateRecording()`](/reference/react-native/instance-methods/update-recording), [`startLiveStreaming()`](/reference/react-native/instance-methods/start-live-streaming), or [`updateLiveStreaming()`](/reference/react-native/instance-methods/update-live-streaming).

<Note>
  `DailyLiveStreamingLayoutConfig` is the same union with one difference: the `audio-only` preset is not available for live streaming.
</Note>

***

## participants

Several presets accept an optional `participants` config that controls which participants are included in the composition and in what order.

<ResponseField name="participants.video" type="string[]">
  Optional. An ordered list of participant `session_id` values to include in the video composition. Participants not in this list are excluded.
</ResponseField>

<ResponseField name="participants.audio" type="string[]">
  Optional. An ordered list of participant `session_id` values to include in the audio mix.
</ResponseField>

<ResponseField name="participants.sort" type="string">
  Optional. Sort method for participants. Currently only `'active'` is supported, which sorts by recent speaking activity.
</ResponseField>

***

## Presets

### default

Shows up to `max_cam_streams` participant camera tiles in a grid. This is the default if no layout is specified.

<ResponseField name="preset" type="string">
  Always `"default"`.
</ResponseField>

<ResponseField name="max_cam_streams" type="number">
  Optional. Maximum number of camera tiles to show. Defaults to 9.
</ResponseField>

<ResponseField name="participants" type="DailyStreamingParticipantsConfig">
  Optional. See [participants](#participants) above.
</ResponseField>

```json theme={null}
{ "preset": "default", "max_cam_streams": 6 }
```

***

### single-participant

Fills the frame with one participant's camera feed.

<ResponseField name="preset" type="string">
  Always `"single-participant"`.
</ResponseField>

<ResponseField name="session_id" type="string">
  The `session_id` of the participant to feature.
</ResponseField>

```json theme={null}
{ "preset": "single-participant", "session_id": "abc123" }
```

***

### active-participant

Fills the frame with the currently active speaker's camera feed.

<ResponseField name="preset" type="string">
  Always `"active-participant"`.
</ResponseField>

<ResponseField name="participants" type="DailyStreamingParticipantsConfig">
  Optional. See [participants](#participants) above.
</ResponseField>

```json theme={null}
{ "preset": "active-participant" }
```

***

### portrait

Stacks participant tiles vertically, optimized for portrait (mobile) aspect ratios.

<ResponseField name="preset" type="string">
  Always `"portrait"`.
</ResponseField>

<ResponseField name="variant" type="string">
  Optional. Layout variant: `'vertical'` (stacked column) or `'inset'` (active speaker fills the frame with a small inset tile). Defaults to `'vertical'`.
</ResponseField>

<ResponseField name="max_cam_streams" type="number">
  Optional. Maximum number of camera tiles to show.
</ResponseField>

<ResponseField name="participants" type="DailyStreamingParticipantsConfig">
  Optional. See [participants](#participants) above.
</ResponseField>

```json theme={null}
{ "preset": "portrait", "variant": "inset" }
```

***

### audio-only

Records audio without any video composition.

<Note>
  Available for cloud recordings only. Not supported for live streaming — use `DailyStreamingLayoutConfig` rather than `DailyLiveStreamingLayoutConfig` when passing this preset to `startRecording()`.
</Note>

<ResponseField name="preset" type="string">
  Always `"audio-only"`.
</ResponseField>

<ResponseField name="participants" type="DailyStreamingParticipantsConfig">
  Optional. See [participants](#participants) above.
</ResponseField>

```json theme={null}
{ "preset": "audio-only" }
```

***

### raw-tracks-audio-only

Records raw audio tracks without mixing. Each participant's audio is captured as a separate track.

<ResponseField name="preset" type="string">
  Always `"raw-tracks-audio-only"`.
</ResponseField>

```json theme={null}
{ "preset": "raw-tracks-audio-only" }
```

***

### custom

Renders a custom composition using Daily's compositor. Requires a `composition_id` when starting a stream or recording; `composition_id` cannot be changed mid-session via an update call.

<ResponseField name="preset" type="string">
  Always `"custom"`.
</ResponseField>

<ResponseField name="composition_id" type="string">
  The ID of the custom composition to use. Required when starting — cannot be changed on update calls.
</ResponseField>

<ResponseField name="composition_params" type="object">
  Optional. Key/value pairs passed to the composition as parameters. Values must be `boolean`, `number`, or `string`. Can be updated mid-session via `updateRecording()` or `updateLiveStreaming()`.
</ResponseField>

<ResponseField name="session_assets" type="object">
  Optional. Key/value pairs mapping asset names to URLs, made available to the composition. Only valid when starting — cannot be set on update calls.
</ResponseField>

<ResponseField name="participants" type="DailyStreamingParticipantsConfig">
  Optional. See [participants](#participants) above.
</ResponseField>

```json theme={null}
// Starting a custom composition
{
  "preset": "custom",
  "composition_id": "my-composition",
  "composition_params": {
    "showLowerThirds": true,
    "accentColor": "#ff0000"
  },
  "session_assets": {
    "logo": "https://example.com/logo.png"
  }
}
```

```json theme={null}
// Updating composition params mid-session
{
  "preset": "custom",
  "composition_params": {
    "showLowerThirds": false
  }
}
```

***

## VCS baseline composition

<Badge>Paid plan only</Badge>

When using `preset: 'custom'`, you can set `composition_id` to `'daily:baseline'` to use Daily's built-in VCS baseline compositor. The `composition_params` object then accepts the following properties to control layouts, overlays, and other visual elements.

<VCSInstanceMethodDesc />

### Baseline composition properties

<ParamField type="string">
  Sets the layout mode. Valid options:

  * **single**: Show a single full-screen video.
  * **split**: Show the first two participants side-by-side.
  * **grid**: Show up to 20 videos in a grid layout.
  * **dominant**: Show the active speaker in a large pane on the left, with additional video thumbnails on the right.
  * **pip**: Show the active speaker in a full-screen view, with the first participant inlaid in a corner.
</ParamField>

<ParamField type="boolean">
  Sets whether a text overlay is displayed. You can configure the contents of the overlay with the `text.*` properties.
</ParamField>

<ParamField type="boolean">
  Sets whether an image overlay is displayed. You can configure the display of the overlay with the `image.*` properties. The image used must be passed in the `session_id` layout option when the stream or recording is *started*.
</ParamField>

<ParamField type="boolean">
  Sets whether a banner overlay is displayed. The banner can be used for TV-style "lower third" graphics, or displayed in any corner. You can configure the content of the overlay with the `banner.*` properties.
</ParamField>

<ParamField type="boolean">
  Sets whether a WebFrame overlay is displayed. You can configure the display of this live web browser overlay with the `webFrame.*` properties. The URL and the browser viewport size can be changed while your stream or recording is running.
</ParamField>

<ParamField type="boolean">
  Sets whether a sidebar is displayed. You can configure the display of the sidebar with the `sidebar.*` properties.
</ParamField>

<ParamField type="boolean">
  Sets whether a title screen (a "slate") is displayed. You can configure the display of the slate with the `titleSlate.*` properties.
</ParamField>

<ParamField type="boolean">
  Sets whether a title screen (a "slate") is automatically shown at the start of the stream. You can configure the display of this automatic slate with the `openingSlate.` properties.
</ParamField>

<ParamField type="number">
  Limits the number of non-screenshare streams that are included in the output.
</ParamField>

<ParamField type="string">
  Lets you do render-time reordering of video inputs according to participant IDs within a Daily room. To enable this sorting, pass a comma-separated list of participant IDs as the value for this param; video inputs matching these IDs will be moved to the top of the list. If you pass an ID that is not present in the room, it's ignored. All other video inputs will remain in their original order. The default value is an empty string indicating no reordering. Also note that `videoSettings.preferScreenshare` takes precedence over the ordering passed here. For more information about how participants and videos are sorted, see the section on [selecting participants](#selecting-participants).
</ParamField>

<ParamField type="boolean">
  When enabled, screen share inputs will be sorted before camera inputs. This is useful when prioritizing screen shares in your layout, especially when all inputs are not included in the final stream. For more information about how participants and videos are sorted, see the section on [selecting participants](#selecting-participants).
</ParamField>

<ParamField type="boolean">
  When enabled, paused video inputs will not be included. By default this is off, and paused inputs are displayed with a placeholder graphic. ("Paused video" means that the video track for a participant is not available, either due to user action or network conditions.)
</ParamField>

<ParamField type="boolean">
  When enabled, audio-only inputs will not be included in rendering. By default this is off, and audio participants are displayed with a placeholder graphic.
</ParamField>

<ParamField type="boolean">
  When enabled, any screenshare video inputs beyond the first one will not be included in rendering. You can control the ordering of the inputs using the `layout.participants` property to explicitly select which participant should be first in the list of inputs.
</ParamField>

<ParamField type="boolean">
  Sets whether call participants' names are displayed on their video tiles.
</ParamField>

<ParamField type="boolean">
  Sets whether to display video tiles with squared or rounded corners. Note that some modes (`dominant` and `pip`) have additional params to control whether the main video has rounded corners or not.
</ParamField>

<ParamField type="number">
  Sets the corner radius applied to video layers when `videoSettings.roundedCorners` is enabled, in grid units.
</ParamField>

<ParamField type="string">
  Controls how source video is displayed inside a tile if they have different aspect ratios. Use `'fill'` to crop the video to fill the entire tile. Use `'fit'` to make sure the entire video fits inside the tile, adding letterboxes or pillarboxes as necessary.
</ParamField>

<ParamField type="string">
  Controls how a screenshare video is displayed inside a tile if they have different aspect ratios. Use `'fill'` to crop the video to fill the entire tile. Use `'fit'` to make sure the entire video fits inside the tile, adding letterboxes or pillarboxes as necessary.
</ParamField>

<ParamField type="string">
  Sets the background color for video placeholder tile. Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="string">
  Sets the highlight color. It's used as the border color to indicate the 'dominant' video input (typically the active speaker). Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="number">
  Sets the stroke width used to render a highlight border. See also `'videoSettings.highlight.color'`. Specified in grid units.
</ParamField>

<ParamField type="number">
  Sets the visual margin between the two video layers shown in `split` mode, in grid units.
</ParamField>

<ParamField type="string">
  Selects whether the `'split'` layout mode is rendered in a horizontal or vertical configuration. The default value `'auto-by-viewport'` means that the split direction will be automatically selected to be most appropriate for the current viewport size: if the viewport is landscape or square, the split axis is vertical; if portrait, the split axis is horizontal. Valid options: `'auto-by-viewport', 'vertical', 'horizontal'`
</ParamField>

<ParamField type="string">
  Overrides the scaleMode setting for the `split` layout mode. Both sides of the split can have separately defined scale modes. Pass a comma-separated list such as `fill, fit` (this would set the left-hand side video to `fill` and the right-hand side video to `fit`). See documentation for the `videoSettings.scaleMode` parameter for the valid options. Note that this setting also overrides `videoSettings.scaleModeForScreenshare`.
</ParamField>

<ParamField type="boolean">
  When enabled, the layout will automatically switch to `dominant` mode from `grid` if a screenshare video input is available. By using this automatic behavior, you avoid having to manually switch the mode via an API call.
</ParamField>

<ParamField type="number">
  Overrides the visual margin between items in `grid` mode, in grid units. The default value of -1 means that the layout algorithm selects a reasonable margin automatically depending on the number of videos.
</ParamField>

<ParamField type="number">
  Overrides the outer padding around items in `grid` mode, in grid units. The default value of -1 means that the layout algorithm selects a reasonable padding automatically depending on the number of videos.
</ParamField>

<ParamField type="boolean">
  By default, the `grid` mode will highlight the dominant video (typically the "active speaker") with a light outline. You can disable the highlight using this setting.
</ParamField>

<ParamField type="boolean">
  By default, the layout for the `grid` mode will try to preserve the aspect ratio of the input videos, i.e. avoid cropping the videos and instead add margins around the grid if needed. Setting this parameter to `false` will make the grid layout fill all available area, potentially cropping the videos.
</ParamField>

<ParamField type="number">
  When set to 0 or greater, the `grid` mode switches to a full-screen highlight of the participant at that zero-based index, hiding the other tiles. The default value of -1 turns this off and renders the normal grid. Use it to jump to a temporary full-screen view of one participant and back without changing the layout mode.
</ParamField>

<ParamField type="string">
  Controls where participant name labels are drawn in `grid` mode. The default `below` puts the label in a strip under each tile. Set it to `inside-at-bottom` to draw the label inside the tile, near the bottom edge.
</ParamField>

<ParamField type="string">
  Control where the dominant (or "active speaker") video is displayed in the `dominant` layout mode. Values are `left`, `right`, `top` or `bottom`.
</ParamField>

<ParamField type="number">
  Sets the position of the imaginary line separating the dominant video from the smaller tiles when using the `dominant` layout. Values are from 0 to 1. The default is 0.8, so if `videoSettings.dominant.position` is set to `left`, the dominant video will take 80% of the width of the screen on the left.
</ParamField>

<ParamField type="number">
  Controls how many "chiclets", or smaller video tiles, appear alongside the dominant video when using the `dominant` layout.
</ParamField>

<ParamField type="boolean">
  When in `dominant` mode, the large tile displays the active speaker by default. Turn off this `followDomFlag` to display the first participant instead of the active speaker.
</ParamField>

<ParamField type="number">
  Margin between the “chiclet” items, in grid units.
</ParamField>

<ParamField type="number">
  Padding around the row/column of “chiclet” items, in grid units.
</ParamField>

<ParamField type="number">
  Margin between the "dominant" video and the row/column of "chiclet" items, in grid units.
</ParamField>

<ParamField type="boolean">
  Sets whether the "dominant" video will be rendered with rounded corners when `videoSettings.roundedCorners` is enabled. Defaults to false because sharp corners are a more natural choice for the default configuration where the dominant video is tightly aligned to viewport edges.
</ParamField>

<ParamField type="string">
  Sets the position of the smaller video in the `pip` (picture-in-picture) layout. Valid options: `'top-left'`, `'top-right'`, `'bottom-left'`, `'bottom-right'`.
</ParamField>

<ParamField type="number">
  Sets the aspect ratio of the smaller video in the `pip` layout. The default is 1.0, which produces a square video.
</ParamField>

<ParamField type="number">
  Sets the height of the smaller video in the `pip` layout, measured in grid units.
</ParamField>

<ParamField type="number">
  Sets the margin between the smaller video and the edge of the frame in the `pip` layout, in grid units.
</ParamField>

<ParamField type="boolean">
  When in "pip" (or picture-in-picture) mode, the overlay tile displays the first participant in the participant array by default. Turn on this `followDomFlag` to display the active speaker instead.
</ParamField>

<ParamField type="boolean">
  Sets whether the main video in `pip` mode will be rendered with rounded corners when `videoSettings.roundedCorners` is enabled. Defaults to false because sharp corners are a more natural choice for the default configuration where the main video is full-screen (no margin to viewport edges).
</ParamField>

<ParamField type="string">
  Sets the participant label style option: font family. Valid options: `DMSans`, `Roboto`, `RobotoCondensed`, `Bitter`, `Exo`, `Magra`, `SuezOne`, `Teko`
</ParamField>

<ParamField type="string">
  Sets the participant label text font weight. Valid options: `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`.

  Note: Not all font weights are valid for every font family.
</ParamField>

<ParamField type="number">
  Sets the participant label text font size.
</ParamField>

<ParamField type="number">
  Sets the offset value for participant labels on the x-axis, measured in grid units.
</ParamField>

<ParamField type="number">
  Sets the offset value for participant labels on the y-axis, measured in grid units.
</ParamField>

<ParamField type="string">
  Sets the participant label font color. Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="string">
  Sets the label font stroke color (the line outlining the text letters). Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="number">
  Sets the left margin value applied to videos (in any layout mode), in grid units. You can use these `videoSettings.margin.*` params to shrink the video area, for example to make room for overlays.
</ParamField>

<ParamField type="number">
  Sets the right margin value applied to videos (in any layout mode), in grid units. You can use these `videoSettings.margin.*` params to shrink the video area, for example to make room for overlays.
</ParamField>

<ParamField type="number">
  Sets the top margin value applied to videos (in any layout mode), in grid units. You can use these `videoSettings.margin.*` params to shrink the video area, for example to make room for overlays.
</ParamField>

<ParamField type="number">
  Sets the bottom margin value applied to videos (in any layout mode), in grid units. You can use these `videoSettings.margin.*` params to shrink the video area, for example to make room for overlays.
</ParamField>

<ParamField type="string">
  Sets the string to be displayed if `showTextOverlay` is true.
</ParamField>

<ParamField type="string">
  Sets the data source used for the text displayed in the overlay. The default value 'param' means that the value of param `text.content` is used. Valid options: `param`, `highlightLines.items`, `chatMessages`, `transcript`
</ParamField>

<ParamField type="string">
  Sets the horizontal alignment of the text overlay within the video frame. Values are `left`, `right`, or `center`.
</ParamField>

<ParamField type="string">
  Sets the vertical alignment of the text overlay within the video frame. Values are `top`, `bottom`, or `center`.
</ParamField>

<ParamField type="number">
  Sets an x-offset (horizontal) to be applied to the text overlay's position based on the values of `text.align_horizontal` and `text.align_vertical`.
</ParamField>

<ParamField type="number">
  Sets a y-offset (vertical) to be applied to the text overlay's position based on the values of `text.align_horizontal` and `text.align_vertical`.
</ParamField>

<ParamField type="number">
  Applies a rotation to the text overlay. Units are degrees, and positive is a clockwise rotation.
</ParamField>

<ParamField type="string">
  Sets the font of the text overlay. Valid options: `DMSans`, `Roboto`, `RobotoCondensed`, `Anton`, `Bangers`, `Bitter`, `Exo`, `Magra`, `PermanentMarker`, `SuezOne`, `Teko`
</ParamField>

<ParamField type="string">
  Selects a weight variant from the selected font family. Valid options: `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`.

  Note: Not all font weights are valid for every font family.
</ParamField>

<ParamField type="string">
  Sets the font style for text. Valid options: 'normal','italic'.
</ParamField>

<ParamField type="number">
  Sets the text overlay font size using grid units (gu). By default, one grid unit is 1/36 of the smaller dimension of the viewport (e.g. 20px in a 1280\*720 stream).
</ParamField>

<ParamField type="string">
  Sets the color and transparency of the text overlay. Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="string">
  Sets the color of the stroke drawn around the characters in the text overlay. Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="number">
  Sets the width of the stroke drawn around the characters in the text overlay. Specified in grid units.
</ParamField>

<ParamField type="text">
  Sets the color and transparency of a highlighted item in the text overlay. To display a highlight, the value of param `text.source` must be set to `highlightLines.items`. Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="enum">
  Sets the font weight of a highlighted item in the text overlay. To display a highlight, the value of param `text.source` must be set to `highlightLines.items`.
</ParamField>

<ParamField type="string">
  Sets the overlay image. Icon asset must be included in `session_assets` object. `showImageOverlay` must be `true`.
</ParamField>

<ParamField type="text">
  Sets an emoji to be rendered instead of an image asset. If this string is non-empty, it will override the value of `image.assetName`. The string value must be an emoji.
</ParamField>

<ParamField type="string">
  Sets position of overlay image. Valid options: `'top-left'`, `'top-right'`, `'bottom-left'`, `'bottom-right'`
</ParamField>

<ParamField type="boolean">
  Sets overlay image to full screen.
</ParamField>

<ParamField type="number">
  Sets aspect ratio of overlay image.
</ParamField>

<ParamField type="number">
  Sets height of overlay image, in grid units.
</ParamField>

<ParamField type="number">
  Sets margin between the overlay image and the viewport edge, in grid units.
</ParamField>

<ParamField type="number">
  Sets opacity of overlay image, in range 0-1. Default value of 1 is full opacity.
</ParamField>

<ParamField type="boolean">
  Sets the overlay image to fade in or out when the `showImageOverlay` property is updated.
</ParamField>

<ParamField type="string">
  Sets the web page URL to be loaded into the WebFrame overlay's embedded browser.
</ParamField>

<ParamField type="number">
  Sets the width of the embedded browser window used to render the WebFrame overlay.
</ParamField>

<ParamField type="number">
  Sets the height of the embedded browser window used to render the WebFrame overlay.
</ParamField>

<ParamField type="string">
  Sets position of the WebFrame overlay. Valid options: `'top-left'`, `'top-right'`, `'bottom-left'`, `'bottom-right'`
</ParamField>

<ParamField type="boolean">
  Sets the WebFrame overlay to full screen.
</ParamField>

<ParamField type="number">
  Sets height of the WebFrame overlay, in grid units.
</ParamField>

<ParamField type="number">
  Sets margin between the WebFrame overlay and the viewport edge, in grid units.
</ParamField>

<ParamField type="number">
  Sets opacity of the WebFrame overlay, in range 0-1. Default value of `1` is full opacity.
</ParamField>

<ParamField type="boolean">
  Sets the WebFrame overlay to fade in or out when the `showWebFrameOverlay` property is updated.
</ParamField>

<ParamField type="string">
  Sets the keyboard key to be sent to the WebFrame browser in a simulated key press. Valid options:

  * Digits **0 - 9**
  * Letters **A - Z**
  * ASCII special characters, e.g. **!**, **@**, **+**, **>**, etc.
  * Function keys **F1 - F12**
  * **Enter**
  * **Escape**
  * **Backspace**
  * **Tab**
  * Arrow keys **ArrowUp, ArrowDown, ArrowLeft, ArrowRight**
  * **PageDown, PageUp**
</ParamField>

<ParamField type="string">
  Sets keyboard modifier keys to be sent to the WebFrame browser in a simulated key press. Valid options: `"Shift"`, `"Control"`, `"Alt"`, `"Meta"` (on a Mac keyboard, Alt is equal to Option and Meta is equal to Command).
</ParamField>

<ParamField type="number">
  Triggers a simulated key press to be sent to WebFrame. To send a key press, increment the value of `key`. (Note the difference between this and `keyName` which is the simulated key to be sent.)
</ParamField>

<ParamField type="text">
  Sets the title text displayed in the banner component.
</ParamField>

<ParamField type="text">
  Sets the subtitle text displayed in the banner component.
</ParamField>

<ParamField type="string">
  Sets the data source for the text displayed in the banner component. Valid options: `param`, `highlightLines.items`, `chatMessages`, `transcript`
</ParamField>

<ParamField type="string">
  Sets position of the banner component. Valid options: `'top-left'`, `'top-right'`, `'bottom-left'`, `'bottom-right'`
</ParamField>

<ParamField type="boolean">
  Sets the banner to fade in or out when the `showBannerOverlay` property is updated.
</ParamField>

<ParamField type="number">
  Horizontal margin, specified in grid units.
</ParamField>

<ParamField type="number">
  Vertical margin, specified in grid units.
</ParamField>

<ParamField type="number">
  Padding inside the component, specified in grid units.
</ParamField>

<ParamField type="boolean">
  Sets whether the banner component will always use its maximum width (specified using `banner.maxW_pct_default` and `banner.maxW_pct_portrait`). If false, the banner component will shrink horizontally to fit text inside it, if appropriate.
</ParamField>

<ParamField type="number">
  Sets the maximum width for the banner component, as a percentage of the viewport size.
</ParamField>

<ParamField type="number">
  Sets the maximum width for the banner component, as a percentage of the viewport size, applied only when the viewport aspect ratio is portrait (i.e. smaller than 1). This override is useful because on a narrow screen the banner display typically needs more horizontal space than on a landscape screen.
</ParamField>

<ParamField type="number">
  Applies a rotation to the banner component. Units are degrees, and positive is a clockwise rotation.
</ParamField>

<ParamField type="number">
  Sets the corner radius of the banner component outline. Specified in grid units.
</ParamField>

<ParamField type="boolean">
  Sets whether an icon is displayed in the banner component (`true` or `false`).
</ParamField>

<ParamField type="text">
  Sets image asset value for the banner icon. Icon asset must be included in `session_assets` object.
</ParamField>

<ParamField type="text">
  Sets an emoji to be rendered as the banner icon. If this string is non-empty, it will override `banner.icon.assetName`. The string value must be an emoji.
</ParamField>

<ParamField type="number">
  Sets the size of the banner icon, specified in grid units.
</ParamField>

<ParamField type="text">
  Sets the banner component's background color. Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="text">
  Sets the color of the outline drawn around the banner component. Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="number">
  Sets the width of the stroke drawn around the banner component. Specified in grid units.
</ParamField>

<ParamField type="text">
  Sets the banner component's text color. Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="text">
  Sets the color of the stroke drawn around the characters in the banner component. Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="number">
  Sets the width of the stroke drawn around the characters in the banner component. Specified in grid units.
</ParamField>

<ParamField type="string">
  Sets the font of text displayed in the banner component. Valid options: `DMSans`, `Roboto`, `RobotoCondensed`, `Anton`, `Bangers`, `Bitter`, `Exo`, `Magra`, `PermanentMarker`, `SuezOne`, `Teko`
</ParamField>

<ParamField type="number">
  Sets the banner title font size using grid units (gu). By default, one grid unit is 1/36 of the smaller dimension of the viewport (e.g. 20px in a 1280\*720 stream).
</ParamField>

<ParamField type="string">
  Sets the banner title font weight. Valid options: `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`.

  Note: Not all font weights are valid for every font family.
</ParamField>

<ParamField type="string">
  Sets the font style for the banner title. Valid options: 'normal','italic'.
</ParamField>

<ParamField type="number">
  Sets the banner subtitle font size using grid units (gu). By default, one grid unit is 1/36 of the smaller dimension of the viewport (e.g. 20px in a 1280\*720 stream).
</ParamField>

<ParamField type="string">
  Sets the banner subtitle font weight. Valid options: `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`.

  Note: Not all font weights are valid for every font family.
</ParamField>

<ParamField type="string">
  Sets the font style for the banner subtitle. Valid options: 'normal','italic'.
</ParamField>

<ParamField type="number">
  Triggers display of toast component. To send a toast, increment the value of `key`
</ParamField>

<ParamField type="string">
  Sets text displayed in toast component.
</ParamField>

<ParamField type="string">
  Sets the data source used for the text displayed in the toast component. The default value `param` means that the value of param `toast.content` is used. Valid options: `param`, `chatMessages`, `transcript`
</ParamField>

<ParamField type="number">
  Sets duration of time toast component is displayed (in seconds).
</ParamField>

<ParamField type="number">
  Sets the maximum width for the toast component, as a percentage of the viewport size.
</ParamField>

<ParamField type="number">
  Sets the maximum width for the toast component, as a percentage of the viewport size, applied only when the viewport aspect ratio is portrait (i.e. smaller than 1). This override is useful because on a narrow screen the toast display typically needs more horizontal space than on a landscape screen.
</ParamField>

<ParamField type="boolean">
  Sets whether icon is displayed in toast component (`true` or `false`).
</ParamField>

<ParamField type="string">
  Sets asset value for toast icon. Icon asset must be included in `session_assets` object.
</ParamField>

<ParamField type="text">
  Sets an emoji to be rendered as the toast icon. If this string is non-empty, it will override `toast.icon.assetName`. The string value must be an emoji.
</ParamField>

<ParamField type="number">
  Sets the size of the toast icon, in grid units.
</ParamField>

<ParamField type="string">
  Sets the toast component's background color. Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="string">
  Sets the color of the stroke drawn around the text characters in the toast component. Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="string">
  Sets the toast component's text color. Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="string">
  Sets the toast component's font family. Valid options: `DMSans`, `Roboto`, `RobotoCondensed`, `Bitter`, `Exo`, `Magra`, `SuezOne`, `Teko`
</ParamField>

<ParamField type="number">
  Sets the font weight for the toast component's text. Valid options: `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`.

  Note: Not all font weights are valid for every font family.
</ParamField>

<ParamField type="number">
  Sets the font size for the toast component's text.
</ParamField>

<ParamField type="number">
  Sets the number of seconds that the opening slate will be displayed when the stream starts. After this time, the slate goes away with a fade-out effect.
</ParamField>

<ParamField type="string">
  Sets text displayed in the main title of the opening slate.
</ParamField>

<ParamField type="string">
  Sets text displayed in the subtitle (second line) of the opening slate.
</ParamField>

<ParamField type="string">
  Sets an image to be used as the background for the slate. This image asset must be included in `session_assets` object when starting the stream/recording.
</ParamField>

<ParamField type="string">
  Sets the slate's background color. Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="string">
  Sets the text color of the titles in the slate. Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="string">
  Sets the font of the titles in the slate. Valid options: `DMSans`, `Roboto`, `RobotoCondensed`, `Anton`, `Bangers`, `Bitter`, `Exo`, `Magra`, `PermanentMarker`, `SuezOne`, `Teko`
</ParamField>

<ParamField type="string">
  Selects a weight variant from the selected font family. Valid options: `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`.

  Note: Not all font weights are valid for every font family.
</ParamField>

<ParamField type="string">
  Sets the font style for the titles in the slate. Valid options: 'normal','italic'.
</ParamField>

<ParamField type="number">
  Sets the main title font size using grid units (gu). By default, one grid unit is 1/36 of the smaller dimension of the viewport (e.g. 20px in a 1280\*720 stream).
</ParamField>

<ParamField type="number">
  Sets the subtitle font size as a percentage of the main title.
</ParamField>

<ParamField type="string">
  Selects a weight variant from the selected font family specifically for the subtitle. Valid options: `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`.

  Note: Not all font weights are valid for every font family.
</ParamField>

<ParamField type="boolean">
  Sets the slate to fade in or out when the `showTitleSlate` property is updated.'
</ParamField>

<ParamField type="string">
  Sets text displayed in the main title of the slate.
</ParamField>

<ParamField type="string">
  Sets text displayed in the subtitle (second line) of the slate.
</ParamField>

<ParamField type="string">
  Sets an image to be used as the background for the slate. This image asset must be included in `session_assets` object when starting the stream/recording.
</ParamField>

<ParamField type="string">
  Sets the slate's background color. Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="string">
  Sets the text color of the titles in the slate. Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="string">
  Sets the font of the titles in the slate. Valid options: `DMSans`, `Roboto`, `RobotoCondensed`, `Anton`, `Bangers`, `Bitter`, `Exo`, `Magra`, `PermanentMarker`, `SuezOne`, `Teko`
</ParamField>

<ParamField type="string">
  Selects a weight variant from the selected font family. Valid options: `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`.

  Note: Not all font weights are valid for every font family.
</ParamField>

<ParamField type="string">
  Sets the font style for the titles in the slate. Valid options: 'normal','italic'.
</ParamField>

<ParamField type="number">
  Sets the main title font size using grid units (gu). By default, one grid unit is 1/36 of the smaller dimension of the viewport (e.g. 20px in a 1280\*720 stream).
</ParamField>

<ParamField type="number">
  Sets the subtitle font size as a percentage of the main title.
</ParamField>

<ParamField type="string">
  Selects a weight variant from the selected font family specifically for the subtitle. Valid options: `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`.

  Note: Not all font weights are valid for every font family.
</ParamField>

<ParamField type="boolean">
  Sets whether the sidebar is displayed on top of video elements. If set to `true` , the video layout is shrunk horizontally to make room for the sidebar so they don't overlap.
</ParamField>

<ParamField type="string">
  Sets the data source for the text displayed in the sidebar. Valid options: `param`, `highlightLines.items`, `chatMessages`, `transcript`
</ParamField>

<ParamField type="number">
  Padding inside the sidebar, specified in grid units.
</ParamField>

<ParamField type="number">
  Sets the width of the sidebar, as a percentage of the viewport size, applied when the viewport is landscape (its aspect ratio is greater than 1).
</ParamField>

<ParamField type="number">
  Sets the width of the sidebar, as a percentage of the viewport size, applied when the viewport is portrait or square (its aspect ratio is less than or equal to 1).
</ParamField>

<ParamField type="text">
  Sets the sidebar's background color and opacity. Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="text">
  Sets the sidebar's text color and opacity. Valid options:

  * Hex color codes
  * RGB or RGBA syntax
  * Standard CSS color names (e.g. 'blue')
</ParamField>

<ParamField type="string">
  Sets the font of text displayed in the sidebar. Valid options: `DMSans`, `Roboto`, `RobotoCondensed`, `Anton`, `Bangers`, `Bitter`, `Exo`, `Magra`, `PermanentMarker`, `SuezOne`, `Teko`
</ParamField>

<ParamField type="string">
  Sets the sidebar text font weight. Valid options: `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`.

  Note: Not all font weights are valid for every font family.
</ParamField>

<ParamField type="string">
  Sets the font style for text in the sidebar. Valid options: 'normal','italic'.
</ParamField>

<ParamField type="number">
  Sets the sidebar text font size using grid units (gu). By default, one grid unit is 1/36 of the smaller dimension of the viewport (e.g. 20px in a 1280\*720 stream).
</ParamField>

<ParamField type="text">
  Sets the color used for the highlighted item in the sidebar.
</ParamField>

<ParamField type="string">
  Sets the font weight used for the highlighted item in the sidebar.
</ParamField>

<ParamField type="text">
  Sets a list of text items. Items must be separated by newline characters. This param is a data source that can be displayed in other components like TextOverlay, Banner and Sidebar using the various "source" params available in the settings for those components.
</ParamField>

<ParamField type="number">
  Sets the highlight index associated with the text items specified in `highlightLines.items`. The item at this index will be displayed using a special highlight style (which depends on the component used to display this data). If you don't want a highlight, set this value to -1.
</ParamField>

<ParamField type="string">
  Sets the data source used for emoji reactions. The default value `emojiReactions` means that this component will display emojis that are sent via the standard source API.

  The other valid option is `param`, which lets you send a reaction using param values instead of the standard source. The steps are as follows: set `emojiReactions.source` to `param`, set a single-emoji string for `emojiReactions.emoji`, and increment the value of `emojiReactions.key` to send one emoji for display.
</ParamField>

<ParamField type="number">
  If `emojiReactions.source` is set to `param`, increment this numeric key to send a new emoji for display.
</ParamField>

<ParamField type="text">
  If `emojiReactions.source` is set to `param`, set a single emoji as the string value for this param, and it will be the next emoji reaction rendered when `emojiReactions.key` is incremented.
</ParamField>

<ParamField type="number">
  Sets a horizontal offset applied to the emoji reactions animation rendering (each new emoji floats up from the bottom of the screen). Specified in grid units.
</ParamField>

<ParamField type="boolean">
  When set to true, a room state debugging display is visible. It prints various information about participant state.
</ParamField>

<ParamField type="number">
  Sets the opacity of the debugging display which can be toggled using `debug.showRoomState`.
</ParamField>

## Selecting participants

The baseline composition has several modes that display multiple participant videos. You may be wondering how to control which participants appear in specific places within those layouts.

Internally, VCS uses an ordered array of video inputs that it calls ["video input slots"](/docs/vcs/components/video). By default, that array will contain all participants in the order in which they joined the call. But there are two ways you can override this default behavior and choose which participants appear in your layout:

1. Participant selection on the **room level** using the `participants` property.
2. Input reordering on the **composition level** (a.k.a. switching) using the [`preferredParticipantIds`](#param-video-settings-preferred-participant-ids) and [`preferScreenshare`](#param-video-settings-prefer-screenshare) params available in the baseline composition.

These two are not mutually exclusive. What's the difference, and when should you use one or the other?

**Room-level participant selection** is a powerful generic tool. It lets you choose any participants within the room, and will trigger any necessary backend connections so that a participant's audio and video streams become available to the VCS rendering server. This means there may be a slight delay as connections are made.

In contrast, **composition-level input reordering** (a.k.a. switching) happens at the very last moment in the VCS engine just before a video frame is rendered. (The name "switching" refers to a video switcher, a hardware device used in traditional video production for this kind of input control.) It's applied together with any other composition param updates you're sending, so there is a guarantee of synchronization. You should use this method when you want to ensure that the reordering of inputs happens precisely at the same time as your update to some other composition param value(s). For example, if you're switching a layout mode and want the inputs to be sorted in a different way simultaneously.

You can use the two methods together. Room-level selection using the `participants` property lets you establish the participants whose streams will be available to the rendering. You can then do rapid switching within that selection using the [`preferredParticipantIds`](#param-video-settings-preferred-participant-ids) and [`preferScreenshare`](#param-video-settings-prefer-screenshare) params in the baseline composition.

Here's an example of selecting three specific participant video tracks, everyone's audio tracks, and sorting the video by most recent active speaker:

```javascript theme={null}
{
	layout: {
		preset: "custom",
		composition_params: {...},
		participants: {
			video: ["participant-guid-1", "participant-guid-2", "participant-guid-3"],
			audio: ["*"],
			sort: "active"
		}
	}
}
```

Here's another example where we're further sorting the same video tracks using the baseline composition params. The params update is switching to a different layout mode (`'split'`). This mode can only show two participants, so we use `videoSettings.preferredParticipantIds` to select the two participants in a clean frame-synchronized way, without having to modify the underlying connections made via the `participants` property:

```javascript theme={null}
{
	layout: {
		preset: "custom",
		composition_params: {
			mode: 'split',
			'videoSettings.preferredParticipantIds': 'participant-guid-2, participant-guid-1',
		},
		participants: {
			video: ["participant-guid-1", "participant-guid-2", "participant-guid-3"],
			audio: ["*"],
			sort: "active"
		}
	}
}
```

<Warning>
  **If you include the `participants` object in a `startLiveStreaming()`/`startRecording()` or `updateLiveStreaming()`/`updateRecording()` call, you need to include it in any subsequent `updateLiveStreaming()`/`updateRecording()` calls as well, even if you aren't changing it.**

  If you set the `participants` property for your recording or live stream and then make an `updateLiveStreaming()`/`updateRecording()` call to update the `composition_params`, you'll need to resend the same values you used before in the `participants` property. This is true even if you are not updating the `participants` property. If you don't, the participant configuration will reset to default, as if you hadn't set it in the first place —meaning VCS will receive all audio and video tracks from all participants, sorted by the order in which the participants joined the call.
</Warning>

### `participants` properties

<ParamField type="array">
  Required. An array of strings indicating which participant videos to make available to VCS. Possible values are:

  * `["participant-guid-1", "participant-guid-2", "participant-guid-3"]`: A list of specific participant IDs

  * `["*"]`: everyone

  * `["owners"]`: All call owners
</ParamField>

<ParamField type="array">
  An optional array of strings indicating which participant audio tracks to make available to VCS. Possible values are the same as the `video` property.
</ParamField>

<ParamField type="string">
  The only currently valid value for this property is `"active"`. This property controls the order in which VCS sees the participant video tracks. When set to `"active"`, each time the call's active speaker changes to a different participant, that participant will bubble up to the first position in the array. In other words, setting sort to `"active"` will cause an n-tile layout to always show the n most recent speakers in the call. If you leave the property unset, the list of participants will stay in a fixed order: either the order you specified in the `video` property, or in the order they joined the call if you use `"*"` or `"owners"`.
</ParamField>

## Session assets

Session assets — images or custom VCS components — that can be passed as assets and used during a live stream or cloud recording. To learn more, visit our [Session assets page](/docs/vcs/session-assets) in the VCS SDK reference docs.

**Note**: Session assets must be made available at the beginning of the recording or live stream even if they are not used until later in the call.

```javascript theme={null}
await call.startLiveStreaming({
  instanceId: '00000000-0000-4000-8000-000000000000', // optional: default value
  rtmpUrl: 'RTMP_URL',
  width: 1280,
  height: 720,
  layout: {
    preset: 'custom', // required
    composition_id: 'daily:baseline', // optional: default value
    composition_params: {
      // ... Add your composition params here
    },
    session_assets: {
      // the key is images/ followed by your file name, including the extension
      // the value must be an absolute URL to a hosted asset
      // image.assetName must match this key without the images/ prefix, e.g. logo.png
      'images/logo.png': 'https://example.com/logo.png',
    },
  },
});
```

## Default values

### Composition parameter defaults

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyStreamingOptions](/reference/react-native/types/daily-streaming-options)
  </Card>

  <Card title="Methods" icon="code">
    * [startRecording()](/reference/react-native/instance-methods/start-recording)
    * [updateRecording()](/reference/react-native/instance-methods/update-recording)
    * [startLiveStreaming()](/reference/react-native/instance-methods/start-live-streaming)
    * [updateLiveStreaming()](/reference/react-native/instance-methods/update-live-streaming)
  </Card>

  <Card title="Events" icon="bolt">
    * [Recording events](/reference/react-native/events/recording-events)
    * [Live streaming events](/reference/react-native/events/live-streaming-events)
  </Card>
</CardGroup>


# DailyStreamingOptions
Source: https://docs.daily.co/reference/react-native/types/daily-streaming-options

Output quality, lifetime, and layout options shared by cloud recording and live streaming.

`DailyStreamingOptions` defines the base configuration accepted by [`startRecording()`](/reference/react-native/instance-methods/start-recording), [`updateRecording()`](/reference/react-native/instance-methods/update-recording), [`startLiveStreaming()`](/reference/react-native/instance-methods/start-live-streaming), and [`updateLiveStreaming()`](/reference/react-native/instance-methods/update-live-streaming).

`DailyLiveStreamingOptions` extends `DailyStreamingOptions` with RTMP/HLS endpoint fields.

***

## DailyStreamingOptions

### Output quality

<ResponseField name="width" type="number">
  Output width in pixels. Must be even (a multiple of 2). Default: `1920`.
</ResponseField>

<ResponseField name="height" type="number">
  Output height in pixels. Must be even (a multiple of 2). Default: `1080`.
</ResponseField>

<ResponseField name="fps" type="number">
  Video frame rate. Default: `30`.
</ResponseField>

<ResponseField name="videoBitrate" type="number">
  Video bitrate in kbps (10–10000). Resolution-based defaults: 1080p → 5000, 720p → 3000, 480p → 2000, 360p → 1000.
</ResponseField>

<ResponseField name="audioBitrate" type="number">
  Audio bitrate in kbps (10–320).
</ResponseField>

<ResponseField name="backgroundColor" type="string">
  Background color behind video tiles, as `#rrggbb` or `#aarrggbb`.
</ResponseField>

### Session lifetime

<ResponseField name="instanceId" type="string">
  A UUID identifying this recording or streaming session. Multiple sessions can run concurrently (up to [`max_streaming_instances_per_room`](/reference/rest-api/domain/get-domain-config#response-config-max-streaming-instances-per-room) on your domain) if each has a unique `instanceId`.

  Recording and streaming sessions that share the same `instanceId` share the same underlying composition process — layout changes to one affect the other. HLS cannot share an `instanceId` with a recording or RTMP stream.
</ResponseField>

<ResponseField name="minIdleTimeOut" type="number">
  Seconds to wait before automatically ending the session when the room is idle (all users have muted video and audio). Default: `300`.
</ResponseField>

<ResponseField name="maxDuration" type="number">
  Maximum session duration in seconds after which recording/streaming is forcefully stopped. Default: `10800` (3 hours) for recordings, `86400` (24 hours) for live streams.
</ResponseField>

### Output artifacts

<ResponseField name="dataOutputs" type="string[]">
  Additional output artifacts to generate alongside the stream or recording. Supported values: `"event-json"`, `"transcript-webvtt"`, `"chat-webvtt"`.
</ResponseField>

<ResponseField name="type" type="'cloud' | 'cloud-audio-only' | 'raw-tracks' | 'local'">
  Specifies the recording type to start. **Recording only — not applicable to live streaming.** The type provided must also be enabled for the room or domain with the enable\_recording property; see [Update room](/reference/rest-api/rooms/update-room#body-properties-enable-recording-one-of-0).

  * `'cloud'` (default) — cloud recording with video composition
  * `'cloud-audio-only'` — cloud recording, audio only
  * `'raw-tracks'` — individual raw audio/video tracks, uncomposed
  * `'local'` — local browser recording
</ResponseField>

### Layout

<ResponseField name="layout" type="DailyStreamingLayoutConfig">
  Controls how participant video is composed. See [`DailyStreamingLayoutConfig`](/reference/react-native/types/daily-streaming-layout-config) for all presets and options.

  For live streaming, the `audio-only` preset is not available — use `DailyLiveStreamingLayoutConfig` (which excludes it).
</ResponseField>

## DailyLiveStreamingOptions

Extends `DailyStreamingOptions` with endpoint configuration. Provide either `rtmpUrl` or `endpoints` — not both. HLS can only be started with `endpoints`.

<ResponseField name="rtmpUrl" type="string | string[]">
  One or more RTMP destination URLs. When multiple URLs are provided, each receives the same layout. Avoid using this field if your URL contains sensitive values (stream keys, etc.) — use `endpoints` instead.
</ResponseField>

<ResponseField name="endpoints" type="DailyStreamingEndpoint[]">
  Array of endpoint objects, each with an `endpoint` string field containing the RTMP or HLS destination URL. Preferred over `rtmpUrl` as it keeps sensitive values out of method call arguments.
</ResponseField>

***

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyStreamingLayoutConfig](/reference/react-native/types/daily-streaming-layout-config)
  </Card>

  <Card title="Methods" icon="code">
    * [startRecording()](/reference/react-native/instance-methods/start-recording)
    * [updateRecording()](/reference/react-native/instance-methods/update-recording)
    * [startLiveStreaming()](/reference/react-native/instance-methods/start-live-streaming)
    * [updateLiveStreaming()](/reference/react-native/instance-methods/update-live-streaming)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Live streaming](/docs/daily-js/features/live-streaming)
  </Card>
</CardGroup>


# DailyTrackState
Source: https://docs.daily.co/reference/react-native/types/daily-track-state

The state of a single media track for a participant, including subscription status, playback state, and the underlying MediaStreamTrack.

`DailyTrackState` describes the current condition of one media track — camera, microphone, screen share, or custom — from the local participant's point of view. It appears as a value in `DailyParticipant.tracks`.

```typescript theme={null}
interface DailyTrackState {
  subscribed: boolean | 'staged';
  state: 'blocked' | 'off' | 'sendable' | 'loading' | 'interrupted' | 'playable';
  off?: {
    byUser?: boolean;
    byRemoteRequest?: boolean;
    byBandwidth?: boolean;
    byCanSendPermission?: boolean;
    byCanReceivePermission?: boolean;
    byServerLimit?: boolean;
  };
  blocked?: {
    byDeviceMissing?: boolean;
    byDeviceInUse?: boolean;
    byPermissions?: boolean;
  };
  track?: MediaStreamTrack;
  persistentTrack?: MediaStreamTrack;
}
```

## Properties

<ResponseField name="subscribed" type="true | false | 'staged'">
  Whether the local participant is subscribed to this track. Only meaningful for remote participants — local tracks are always implicitly subscribed.

  * `true` — subscribed and receiving
  * `false` — not subscribed
  * `'staged'` — SDP negotiated but no bytes are flowing; track can transition to `playable` faster when set to `true`

  Set via [`updateParticipant()`](/reference/react-native/instance-methods/update-participant) with `setSubscribedTracks`.
</ResponseField>

<ResponseField name="state" type="string">
  The complete, mutually exclusive state of the track from the local participant's point of view.

  | Value           | Meaning                                                                                                           |
  | --------------- | ----------------------------------------------------------------------------------------------------------------- |
  | `'blocked'`     | Track cannot be sent. Check `blocked` for the cause.                                                              |
  | `'off'`         | Track is intentionally not being sent. Check `off` for the cause.                                                 |
  | `'sendable'`    | Track is available to send but the local participant hasn't subscribed to it yet.                                 |
  | `'loading'`     | Track is subscribed and the stream is being established.                                                          |
  | `'playable'`    | Track is live and ready to render.                                                                                |
  | `'interrupted'` | Track was `playable` but has transiently stalled (network fluctuation, iOS background). May return to `playable`. |
</ResponseField>

<ResponseField name="off" type="object">
  Present when `state` is `'off'`. Indicates why the track is off. All sub-fields are optional booleans.

  <Expandable title="off properties">
    <ResponseField name="byUser" type="boolean">
      The sender muted their own track.
    </ResponseField>

    <ResponseField name="byRemoteRequest" type="boolean">
      An admin muted this participant's track remotely.
    </ResponseField>

    <ResponseField name="byBandwidth" type="boolean">
      Daily paused the track due to bandwidth constraints.
    </ResponseField>

    <ResponseField name="byCanSendPermission" type="boolean">
      The participant does not have permission to send this track type.
    </ResponseField>

    <ResponseField name="byCanReceivePermission" type="boolean">
      Remote participants only. The local participant does not have permission to receive this track.
    </ResponseField>

    <ResponseField name="byServerLimit" type="boolean">
      A server-side participant limit has been reached.
    </ResponseField>
  </Expandable>
</ResponseField>

<ResponseField name="blocked" type="object">
  Present when `state` is `'blocked'`. Indicates why the track cannot be sent. All sub-fields are optional booleans.

  <Expandable title="blocked properties">
    <ResponseField name="byDeviceMissing" type="boolean">
      No device of this type is available.
    </ResponseField>

    <ResponseField name="byDeviceInUse" type="boolean">
      The device is in use by another application.
    </ResponseField>

    <ResponseField name="byPermissions" type="boolean">
      The user has denied browser permissions for this device.
    </ResponseField>
  </Expandable>
</ResponseField>

<ResponseField name="track" type="MediaStreamTrack | undefined">
  The underlying [`MediaStreamTrack`](https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack). Only present when `state === 'playable'`. Only available in [call object mode](/docs/daily-js/concepts/call-modes#call-object-mode).

  Prefer `persistentTrack` for attaching to media elements.
</ResponseField>

<ResponseField name="persistentTrack" type="MediaStreamTrack | undefined">
  The underlying [`MediaStreamTrack`](https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack). Present whenever a track exists, regardless of `state`. Only available in [call object mode](/docs/daily-js/concepts/call-modes#call-object-mode).

  **Recommended over `track`** as a proactive defense against black frames during call disruptions and browser limitations. Use `track` only when you need a guarantee that media is currently flowing.
</ResponseField>

## See also

<CardGroup>
  <Card title="Types" icon="t">
    * [DailyParticipant](/reference/react-native/types/daily-participant)
  </Card>

  <Card title="Methods" icon="code">
    * [participants()](/reference/react-native/instance-methods/participants)
    * [setLocalVideo()](/reference/react-native/instance-methods/set-local-video)
    * [setLocalAudio()](/reference/react-native/instance-methods/set-local-audio)
    * [updateParticipant()](/reference/react-native/instance-methods/update-participant)
  </Card>

  <Card title="Events" icon="bolt">
    * [participant-updated](/reference/react-native/events/participant-events#participant-updated)
    * [track-started](/reference/react-native/events/media-events#track-started)
    * [track-stopped](/reference/react-native/events/media-events#track-stopped)
  </Card>

  <Card title="Guides" icon="book-open">
    * [Tracks and Media](/docs/daily-js/concepts/tracks)
  </Card>
</CardGroup>


# Types
Source: https://docs.daily.co/reference/react-native/types/index

TypeScript type definitions for the core objects used throughout the react-native-daily-js API.

This section documents the TypeScript types that appear throughout the react-native-daily-js API. Reference these pages when you need the precise shape of an object returned by a method, accepted as a parameter, or surfaced on an event.

| Type                                                                                         | Description                                                                           |
| -------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
| [`DailyCallOptions`](/reference/react-native/types/daily-call-options)                       | Configuration options accepted by factory methods and `join()`                        |
| [`DailyParticipant`](/reference/react-native/types/daily-participant)                        | The participant object returned by `participants()` and emitted on participant events |
| [`DailyTrackState`](/reference/react-native/types/daily-track-state)                         | The state of a single media track for a participant                                   |
| [`DailyParticipantPermissions`](/reference/react-native/types/daily-participant-permissions) | The send, receive, and admin permissions for a participant                            |
| [`DailyStreamingOptions`](/reference/react-native/types/daily-streaming-options)             | Configuration options for live streaming and recording                                |
| [`DailyStreamingLayoutConfig`](/reference/react-native/types/daily-streaming-layout-config)  | Layout configuration for live streaming and recording                                 |


# Batch Processor API
Source: https://docs.daily.co/reference/rest-api/batch-processor/index

Post-processing of your call media.

## Overview

The Batch Processor is an API that performs post-processing jobs on your call media.

It accepts a recording ID from a Daily meeting or a URL to a video/audio file (e.g. mp4, mp3) and can produce a transcript of the audio, or a summary of the transcript generated from the audio.

## Types of jobs

There are few predefined post-processing jobs that the batch processor can perform from the audio of a media file:

1. Generate a transcript
2. Generate a summary

### Post-call transcripts

The batch processor can generate transcripts from the audio of a media file.
The transcription is powered by Deepgram.

#### Example transcripts

Transcripts are formatted as `txt`, `srt`, `vtt`, and `json`.

Text:

```txt theme={null}
Speaker 0: Good afternoon. My name is Anass Ali. I'm one of the final year medical students. Before we start, can I check your name and age

Speaker 1: Yeah? It's, Zaines sand I'm fifty five years old.

Speaker 0: And how would you like me to address you today?

Speaker 1: Zaines is fine. It's

Speaker 0: a pleasure to meet you, Zaines. I've just been asked by one of the doctors just to have a conversation with you really, but was brought you into hospital. Anything we discussed remain confidential within the medical team as well. Are you happy to go ahead?
```

SRT:

```srt theme={null}
1
00:00:09,975 --> 00:00:34,350
Good afternoon. My name is Anass Ali. I'm one of the final year medical students. Before we start, can I check your name and age Yeah? It's, Zaines sand I'm fifty five years old. And how would you like me to address you today? Zaines is fine. It's a pleasure to meet you, Zaines. I've just been asked by one of the doctors just to have a conversation with you really, but was brought you into hospital. Anything we discussed remain confidential within the medical team as well. Are you happy to go ahead? Yeah. Absolutely. Okay. Great. So tell me a bit about what's been going on.

2
00:00:35,129 --> 00:00:38,270
Just this morning as I was leaving my house, but in the morning,

3
00:00:38,875 --> 00:00:41,054
I experienced some pretty bad chest pain.
```

VTT:

```vtt theme={null}
WEBVTT

NOTE
Transcription provided by Deepgram
Request Id: 5534e5b9-4779-43d0-9428-1bca5976ce79
Created: 2023-09-12T07:18:26.162Z
Duration: 579.5469
Channels: 1

1
00:00:09.975 --> 00:00:34.350
- Good afternoon. My name is Anass Ali. I'm one of the final year medical students. Before we start, can I check your name and age Yeah? It's, Zaines sand I'm fifty five years old. And how would you like me to address you today? Zaines is fine. It's a pleasure to meet you, Zaines. I've just been asked by one of the doctors just to have a conversation with you really, but was brought you into hospital. Anything we discussed remain confidential within the medical team as well. Are you happy to go ahead? Yeah. Absolutely. Okay. Great. So tell me a bit about what's been going on.

2
00:00:35.129 --> 00:00:38.270
- Just this morning as I was leaving my house, but in the morning,
```

JSON:

```json theme={null}
{
  "metadata": {
    "transaction_key": "deprecated",
    "request_id": "5534e5b9-4779-43d0-9428-1bca5976ce79",
    "sha256": "5192285fc612802e87d12e13e0898809d357d6a5d377e7d73bdaeca8e5653214",
    "created": "2023-09-12T07:18:26.162Z",
    "duration": 579.5469,
    "channels": 1,
    "models": ["aa274f3c-e8b3-456a-ac08-dfd797d45514"],
    "model_info": {
      "aa274f3c-e8b3-456a-ac08-dfd797d45514": {
        "name": "general-nova",
        "version": "2023-07-06.22746",
        "arch": "nova"
      }
    }
  },
  "results": {
    "channels": [
      {
        "alternatives": [
          {
            "transcript": "Good afternoon. My name is Anass Ali. I'm one of the final year medical students. Before we start, can I check your name and age Yeah? .............",
            "confidence": 0.9897461,
            "words": [
              {
                "word": "good",
                "start": 9.975,
                "end": 10.135,
                "confidence": 0.9238281,
                "speaker": 0,
                "speaker_confidence": 0.3798828,
                "punctuated_word": "Good"
              },
              {
                "word": "afternoon",
                "start": 10.135,
                "end": 10.635,
                "confidence": 0.98876953,
                "speaker": 0,
                "speaker_confidence": 0.3798828,
                "punctuated_word": "afternoon."
              }
            ]
          }
        ]
      }
    ]
  }
}
```

### Post-call summaries

The batch processor can generate summaries from the audio of a media file.

#### Example summary

The summary is written as a `text` file. An example file looks like this (this is fake data):

```TXT theme={null}
Medical student Anass Ali interviews a 55-year-old patient named Zaines who was admitted to the hospital after experiencing severe chest pain. Zaines describes the pain as sudden, lasting for 40 minutes, and felt like pressure on his chest. The pain also radiated down his arm and up his neck. He rates the pain as an 8 or 9 out of 10. Zaines is worried that he might be having a heart attack, as his father had a similar experience when he was 65. He also reveals that he has high blood pressure and high cholesterol, for which he takes Ramipril and a statin, respectively. Zaines has been a smoker for 25 years and drinks alcohol on the weekends. The medical team plans to discuss Zaines' symptoms and conduct further examinations and investigations.
```

## Feature configuration

These configuration options are optional [domain properties](/reference/rest-api/domain/set-domain-config). They affect every batch processing job on a Daily domain.

By default, batch processor outputs are stored with Daily's HIPAA-compliant storage.

| Property Name            | Type     | Description                                                                    | Default                         |
| ------------------------ | -------- | ------------------------------------------------------------------------------ | ------------------------------- |
| `batch_processor_bucket` | `object` | Defines a custom S3 bucket where the batch processor will write its output to. | `null` (output stored at Daily) |

This is the same style configuration as setting up your own [custom S3 storage](/docs/guides/features/recording/custom-s3-storage) for recordings. Please note: if `recordings_bucket` property was set on either the domain or room configuration when a recording was made, then when passing in the resulting recording id to a batch processor POST request, the *domain* configuration for `recordings_bucket` *must match* the recording configuration.

```json theme={null}
"batch_processor_bucket": {
  "bucket_name": "notes-bucket",
  "bucket_region": "me-central-1",
  "assume_role_arn": "arn:aws:iam::123456789000:role/DAILY_ROLE",
  "allow_api_access": true
}
```


# Delete job
Source: https://docs.daily.co/reference/rest-api/batch-processor/reference/delete-job

Delete a post-processing job from the batch processor and delete created objects

## DELETE /batch-processor/:id

This endpoint deletes a specific Batch Processor job. If the job has associated objects stored in Daily's S3 bucket, this call will also delete those objects.

Objects stored in a custom bucket are not deleted. The API response is the same as [Get job status](/reference/rest-api/batch-processor/reference/get-job). The `output` key in the response provides enough information to delete any object stored in the custom bucket.

### Response definitions

Top-level:

| Attribute Name | Type     | Description                                                              | Example                                |
| -------------- | -------- | ------------------------------------------------------------------------ | -------------------------------------- |
| `id`           | `string` | The ID of the job                                                        | "3ab8faa2-8ba2-4ee6-bd15-003a92c18245" |
| `preset`       | `string` | The preset given when submitting the job                                 | "recordingId"                          |
| `status`       | `string` | The status of the job: \["submitted", "processing", "finished", "error"] | "finished"                             |
| `input`        | `object` | The input configuration                                                  | `{...}`                                |
| `output`       | `object` | The output attributes                                                    | `{...}`                                |
| `error`        | `string` | Details of error                                                         | "Failed to delete transcriptions"      |

In the `input` object:

| Attribute Name | Type     | Description                                             | Example                                                            |
| -------------- | -------- | ------------------------------------------------------- | ------------------------------------------------------------------ |
| `sourceType`   | `string` | The `sourceType` given when submitting the job          | "recordingId"                                                      |
| `recordingId`  | `string` | The recording ID (when using this `sourceType`)         | "uuiasdfe-8ba2-4ee6-bd15-003a92c18245"                             |
| `uri`          | `string` | The video/audio link URL (when using this `sourceType`) | "[https://direct-url-to/file.mp4](https://direct-url-to/file.mp4)" |

In the `output` object:

| Attribute Name  | Type     | Description                  | Example |
| --------------- | -------- | ---------------------------- | ------- |
| `transcription` | `list`   | A list of transcript outputs | `[...]` |
| `summary`       | `object` | Output for the summary job   | `{...}` |

In the `output.transcription` list:

| Attribute Name    | Type     | Description                        | Example                                                                  |
| ----------------- | -------- | ---------------------------------- | ------------------------------------------------------------------------ |
| `format`          | `string` | The filetype of the transcript     | "txt"                                                                    |
| `s3Config.key`    | `string` | The S3 object location of the file | "bucket-name/uuiasdfe-8ba2-4ee6-bd15-003a92c18245/transcript/output.txt" |
| `s3Config.bucket` | `string` | The S3 bucket name                 | "bucket-name"                                                            |
| `s3Config.region` | `string` | The S3 region for the output       | "us-west-2"                                                              |

In the `output.summary` object:

| Attribute Name    | Type     | Description                        | Example                                                                        |
| ----------------- | -------- | ---------------------------------- | ------------------------------------------------------------------------------ |
| `format`          | `string` | The filetype of the summary        | "txt"                                                                          |
| `s3Config.key`    | `string` | The S3 object location of the file | "your-daily-domain/uuiasdfe-8ba2-4ee6-bd15-003a92c18245/transcript/output.txt" |
| `s3Config.bucket` | `string` | The S3 bucket name                 | "bucket-name"                                                                  |
| `s3Config.region` | `string` | The S3 region for the output       | "us-west-2"                                                                    |

### Examples

<Tabs>
  <Tab title="Request">
    ```curl theme={null}
    curl --request DELETE -H "Content-Type: application/json" \
         -H "Authorization: Bearer $TOKEN" \
         https://api.daily.co/v1/batch-processor/uuiasdfe-8ba2-4ee6-bd15-003a92c18245
    ```
  </Tab>

  <Tab title="200 OK (Job finished)">
    ```json theme={null}
    {
      "id": "uuiasdfe-8ba2-4ee6-bd15-003a92c18245",
      "preset": "summarize",
      "status": "deleted",
      "input": {
        "sourceType": "uri",
        "uri": "https://direct-url-to/file.mp4"
      },
      "output": {
        "transcription": [
          {
            "format": "txt",
            "s3Config": {
              "Key": "domain/3ab8faa2-8ba2-4ee6-bd15-003a92c18245/transcript/output.txt",
              "bucket": "batch-processing",
              "region": "us-west-2"
            }
          }
        ],
        "summarize": {
          "format": "txt",
          "s3Config": {
            "key": "domain/3ab8faa2-8ba2-4ee6-bd15-003a92c18245/soap/output",
            "bucket": "batch-processing",
            "region": "us-west-2"
          }
        }
      }
    }
    ```
  </Tab>

  <Tab title="200 OK (Job error)">
    ```json theme={null}
    {
      "id": "7b8d17cf-0f37-436f-94f8-3726c10de557",
      "preset": "summarize",
      "status": "error",
      "input": {
        "sourceType": "uri",
        "uri": "https://direct-url-to/file.mp4"
      },
      "output": {},
      "error": "Failed to delete transcriptions"
    }
    ```
  </Tab>
</Tabs>


# Get job
Source: https://docs.daily.co/reference/rest-api/batch-processor/reference/get-job

Get a post-processing job from the batch processor

## GET /batch-processor/:id

This endpoint retrieves information of a previously submitted job (by id).

### Response definitions

Top-level:

| Attribute Name | Type     | Description                                                              | Example                                                            |
| -------------- | -------- | ------------------------------------------------------------------------ | ------------------------------------------------------------------ |
| `id`           | `string` | The ID of the job                                                        | "3ab8faa2-8ba2-4ee6-bd15-003a92c18245"                             |
| `preset`       | `string` | The preset given when submitting the job                                 | "recordingId"                                                      |
| `status`       | `string` | The status of the job: \["submitted", "processing", "finished", "error"] | "finished"                                                         |
| `input`        | `object` | The input configuration                                                  | `{...}`                                                            |
| `output`       | `object` | The output attributes                                                    | `{...}`                                                            |
| `error`        | `string` | Details of error                                                         | "Error: Failed to transcribe. May be invalid audio or silent file" |

In the `input` object:

| Attribute Name | Type     | Description                                             | Example                                                            |
| -------------- | -------- | ------------------------------------------------------- | ------------------------------------------------------------------ |
| `sourceType`   | `string` | The `sourceType` given when submitting the job          | "recordingId"                                                      |
| `recordingId`  | `string` | The recording ID (when using this `sourceType`)         | "uuiasdfe-8ba2-4ee6-bd15-003a92c18245"                             |
| `uri`          | `string` | The video/audio link URL (when using this `sourceType`) | "[https://direct-url-to/file.mp4](https://direct-url-to/file.mp4)" |

In the `output` object:

| Attribute Name  | Type     | Description                  | Example |
| --------------- | -------- | ---------------------------- | ------- |
| `transcription` | `list`   | A list of transcript outputs | `[...]` |
| `summary`       | `object` | Output for the summary job   | `{...}` |

In the `output.transcription` list:

| Attribute Name    | Type     | Description                        | Example                                                                  |
| ----------------- | -------- | ---------------------------------- | ------------------------------------------------------------------------ |
| `format`          | `string` | The filetype of the transcript     | "txt"                                                                    |
| `s3Config.key`    | `string` | The S3 object location of the file | "bucket-name/uuiasdfe-8ba2-4ee6-bd15-003a92c18245/transcript/output.txt" |
| `s3Config.bucket` | `string` | The S3 bucket name                 | "bucket-name"                                                            |
| `s3Config.region` | `string` | The S3 region for the output       | "us-west-2"                                                              |

In the `output.summary` object:

| Attribute Name    | Type     | Description                        | Example                                                                        |
| ----------------- | -------- | ---------------------------------- | ------------------------------------------------------------------------------ |
| `format`          | `string` | The filetype of the summary        | "txt"                                                                          |
| `s3Config.key`    | `string` | The S3 object location of the file | "your-daily-domain/uuiasdfe-8ba2-4ee6-bd15-003a92c18245/transcript/output.txt" |
| `s3Config.bucket` | `string` | The S3 bucket name                 | "bucket-name"                                                                  |
| `s3Config.region` | `string` | The S3 region for the output       | "us-west-2"                                                                    |

### Examples

<Tabs>
  <Tab title="Request">
    ```curl theme={null}
    curl -H "Content-Type: application/json" \
         -H "Authorization: Bearer $TOKEN" \
         https://api.daily.co/v1/batch-processor/uuiasdfe-8ba2-4ee6-bd15-003a92c18245
    ```
  </Tab>

  <Tab title="200 OK (Job finished)">
    ```json theme={null}
    {
      "id": "uuiasdfe-8ba2-4ee6-bd15-003a92c18245",
      "preset": "summarize",
      "status": "finished",
      "input": {
        "sourceType": "uri",
        "uri": "https://direct-url-to/file.mp4"
      },
      "output": {
        "transcription": [
          {
            "format": "txt",
            "s3Config": {
              "Key": "domain/3ab8faa2-8ba2-4ee6-bd15-003a92c18245/transcript/output.txt",
              "bucket": "batch-processing",
              "region": "us-west-2"
            }
          }
        ],
        "summarize": {
          "format": "txt",
          "s3Config": {
            "key": "domain/3ab8faa2-8ba2-4ee6-bd15-003a92c18245/soap/output",
            "bucket": "batch-processing",
            "region": "us-west-2"
          }
        }
      }
    }
    ```
  </Tab>

  <Tab title="200 OK (Job error)">
    ```json theme={null}
    {
      "id": "7b8d17cf-0f37-436f-94f8-3726c10de557",
      "preset": "summarize",
      "status": "error",
      "input": {
        "sourceType": "uri",
        "uri": "https://direct-url-to/file.mp4"
      },
      "output": {},
      "error": "Error: Failed to transcribe. May be invalid audio or silent file"
    }
    ```
  </Tab>
</Tabs>


# Access-Link
Source: https://docs.daily.co/reference/rest-api/batch-processor/reference/get-job-access-link

Get access-link to download batch processing outputs

## GET /batch-processor/:id/access-link

This endpoint creates links where you can download your batch processing outputs for the given job ID. The API will return HTTP 404 if the job ID does not exist. It returns HTTP 400 if the job status is not `finished`.

### Response definitions

Top-level:

| Attribute Name  | Type     | Description                                                                      | Example                                |
| --------------- | -------- | -------------------------------------------------------------------------------- | -------------------------------------- |
| `id`            | `string` | The ID of the job                                                                | "3ab8faa2-8ba2-4ee6-bd15-003a92c18245" |
| `preset`        | `string` | The preset given when submitting the job                                         | "recordingId"                          |
| `status`        | `string` | The status of the job. One of: \["submitted", "processing", "finished", "error"] | "finished"                             |
| `transcription` | `list`   | List of transcript access-links                                                  | `[...]`                                |
| `summary`       | `object` | The summary outputs access-link from summarize job                               | `{...}`                                |

In the `transcription` list:

| Attribute Name | Type     | Description                        | Example                                                                        |
| -------------- | -------- | ---------------------------------- | ------------------------------------------------------------------------------ |
| `format`       | `string` | The filetype of the transcript     | "txt"                                                                          |
| `link`         | `string` | The access-link to the output file | "[https://access-link-url.tld/file.txt](https://access-link-url.tld/file.txt)" |

In the `summary` object:

| Attribute Name | Type     | Description                        | Example                                                                        |
| -------------- | -------- | ---------------------------------- | ------------------------------------------------------------------------------ |
| `format`       | `string` | The filetype of the summary        | "txt"                                                                          |
| `link`         | `string` | The access-link to the output file | "[https://access-link-url.tld/file.txt](https://access-link-url.tld/file.txt)" |

### Examples

<Tabs>
  <Tab title="Request">
    ```curl theme={null}
    curl -H "Content-Type: application/json" \
         -H "Authorization: Bearer $TOKEN" \
         https://api.daily.co/v1/batch-processor/uuiasdfe-8ba2-4ee6-bd15-003a92c18245/access-link
    ```
  </Tab>

  <Tab title="200 OK">
    ```json theme={null}
    {
      "id": "fd264433-2947-451a-bd4f-9405c4ed3d8c",
      "preset": "summarize",
      "status": "finished",
      "transcription": [
        {
          "format": "txt",
          "link": "https://access-link-url.tld/file.txt"
        },
        {
          "format": "json",
          "link": "https://access-link-url.tld/file.json"
        },
        {
          "format": "srt",
          "link": "https://access-link-url.tld/file.srt"
        },
        {
          "format": "vtt",
          "link": "https://access-link-url.tld/file.vtt"
        }
      ],
      "summary": {
        "format": "txt",
        "link": "https://access-link-url.tld/file.txt"
      }
    }
    ```
  </Tab>
</Tabs>


# List jobs
Source: https://docs.daily.co/reference/rest-api/batch-processor/reference/list-jobs

List all post-processing jobs

## GET /batch-processor

This endpoint retrieves a list of jobs that were submitted to the batch processor.

### Request parameters

This endpoint supports the same [pagination and filtering](/docs/rest-api/index#pagination) options as other endpoints. Additional parameters are listed in the following table:

| Query parameter | Description                    | Default | Example                              |
| --------------- | ------------------------------ | ------- | ------------------------------------ |
| `recordingId`   | Filters jobs by a recording id | `null`  | uuiasdfe-8ba2-4ee6-bd15-003a92c18245 |

### Response definitions

Top-level:

| Attribute Name | Type      | Description                  | Example |
| -------------- | --------- | ---------------------------- | ------- |
| `total_count`  | `integer` | The total count of the query | 10      |
| `data`         | `list`    | List of jobs                 | `[...]` |

In the `data` object:

| Attribute Name | Type     | Description                                                                      | Example                                |
| -------------- | -------- | -------------------------------------------------------------------------------- | -------------------------------------- |
| `id`           | `string` | The id of the job                                                                | "3ab8faa2-8ba2-4ee6-bd15-003a92c18245" |
| `preset`       | `string` | The preset given when submitting the job                                         | "recordingId"                          |
| `status`       | `string` | The status of the job. One of: \["submitted", "processing", "finished", "error"] | "finished"                             |

### Examples

<Tabs>
  <Tab title="Request">
    ```curl theme={null}
    curl -H "Content-Type: application/json" \
         -H "Authorization: Bearer $TOKEN" \
         https://api.daily.co/v1/batch-processor
    ```
  </Tab>

  <Tab title="200 OK">
    ```json theme={null}
    {
      "total_count": 1,
      "data": [
        {
          "id": "7b8d17cf-0f37-436f-94f8-3726c10de557",
          "preset": "summarize",
          "status": "submitted"
        }
      ]
    }
    ```
  </Tab>
</Tabs>


# Submit job
Source: https://docs.daily.co/reference/rest-api/batch-processor/reference/submit-job

Submit a post-processing job to the batch processor

## POST /batch-processor

<Badge>Paid plans only</Badge>

This endpoint is used to submit jobs to the batch processor.

A job request includes three components: a preset (`preset`), an input configuration (`inParams`), an output configuration (`outParams`).

The `preset` defines the type of job to run. This is a required attribute and available presets are: `transcript`, `summarize`.

The `inParams` defines where the inputs for the job are coming from. An existing `recordingId` or a URL to a video/audio file are the two possible configurations.

The `outParams` defines how the outputs for the job are configured like the filename of the output.

Depending on the preset type, an optional `transformParams` object may contain configuration that describes the transformation applied to the data. Currently only the `transcript` preset supports these transform configuration options.

### Request Template (`json`)

```json theme={null}
{
  "preset": "$PRESET",
  "inParams": {...},
  "outParams": {...}
}
```

### Top-level configuration

| Attribute Name    | Type     | Description              | Default | Example                  | Required? |
| ----------------- | -------- | ------------------------ | ------- | ------------------------ | --------- |
| `preset`          | `string` | The type of job to run   | `null`  | \[transcript, summarize] | Yes       |
| `inParams`        | `object` | The input configuration  | `null`  | `{...}`                  | Yes       |
| `outParams`       | `object` | The output configuration | `null`  | `{...}`                  | Yes       |
| `transformParams` | `object` | The output configuration | `null`  | `{...}`                  | No        |

### Input configuration (`inParams`)

| Attribute Name | Type     | Description                                                       | Default | Example                                                            | Required?                                |
| -------------- | -------- | ----------------------------------------------------------------- | ------- | ------------------------------------------------------------------ | ---------------------------------------- |
| `sourceType`   | `string` | The type of the input media: \[uri, recordingId]                  | `null`  | One of \[uri, recordingId]                                         | Yes                                      |
| `uri`          | `string` | The actual URL when using "uri" as sourceType                     | `null`  | "[https://direct-url-to/file.mp4](https://direct-url-to/file.mp4)" | When using `uri` as `sourceType`         |
| `recordingId`  | `string` | The recording ID when using `recordingId` as sourceType           | `null`  | "uuiasdfe-8ba2-4ee6-bd15-003a92c18245"                             | When using `recordingId` as `sourceType` |
| `language`     | `string` | The BCP-47 language-tag of spoken the audio for the transcription | `en`    | "fr"                                                               | No                                       |

*Note:* `language` in `inParams` is only supported for the `transcript` preset. Additional options are available for transcriptions, see below.

### Transform configuration (`transformParams`)

| Attribute Name | Type     | Description                             | Default | Example | Required? |
| -------------- | -------- | --------------------------------------- | ------- | ------- | --------- |
| `transcript`   | `object` | Configuration specific to transcription | `null`  | `{...}` | No        |

### Transcription configuration (`transformParams.transcript`)

The following parameters can be passed in the `transformParams.transcript` object.
None of the parameters are required. See the documentation for each parameter for more information on their default values.

Note that you can include more parameters using the `extra` object.

If you pass a value for `language` both using `inParams` and this configuration object, the value provided here will be used.

| Name               | Type                  | Description                                                                                                                                           |
| ------------------ | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| `language`         | `string`              | See Deepgram's documentation for [`language`](https://developers.deepgram.com/docs/language)                                                          |
| `model`            | `string`              | See Deepgram's documentation for [`model`](https://developers.deepgram.com/docs/model)                                                                |
| `tier`             | `string`              | This field is deprecated, use `model` instead                                                                                                         |
| `profanity_filter` | `boolean`             | See Deepgram's documentation for [`profanity_filter`](https://developers.deepgram.com/docs/profanity-filter)                                          |
| `punctuate`        | `boolean`             | See Deepgram's documentation for [`punctuate`](https://developers.deepgram.com/docs/punctuation)                                                      |
| `endpointing`      | `number` or `boolean` | See Deepgram's documentation for [`endpointing`](https://developers.deepgram.com/docs/endpointing)                                                    |
| `redact`           | `boolean` or `array`  | See Deepgram's documentation for [`redact`](https://developers.deepgram.com/docs/redaction)                                                           |
| `extra`            | `object`              | Specify additional parameters. See Deepgram's documentation for [available streaming options](https://developers.deepgram.com/docs/features-overview) |

### Language Support

The exact list of supported languages may depend on the `model` parameter in transcription configuration (see above).

In the default configuration, the supported languages using the `language` parameter are:

| Language              | BCP-47 tag |
| --------------------- | ---------- |
| Danish                | da         |
| Dutch                 | nl         |
| English               | en         |
| English Australia     | en-AU      |
| English UK            | en-GB      |
| English India         | en-IN      |
| English NewZealand    | en-NZ      |
| English USA           | en-US      |
| French                | fr         |
| French Canada         | fr-CA      |
| German (DE)           | de         |
| Hindi                 | hi         |
| Hindi Roman           | hi-Latn    |
| Indonesian            | id         |
| Italian               | it         |
| Japanese              | ja         |
| Korean                | ko         |
| Norwegian             | no         |
| Polish                | pl         |
| Portuguese            | pt         |
| Portuguese Brazil     | pt-BR      |
| Portuguese Portugal   | pt-PT      |
| Russian               | ru         |
| Spanish               | es         |
| Spanish Latin America | es-419     |
| Swedish               | sv         |
| Turkish               | tr         |
| Ukrainian             | uk         |

### Output configuration (`outParams`)

| Attribute Name            | Type      | Description                                          | Default | Example      | Required? |
| ------------------------- | --------- | ---------------------------------------------------- | ------- | ------------ | --------- |
| `s3config.s3KeyTemplate`  | `string`  | The filename of the output                           | `null`  | "my-summary" | Yes       |
| `s3config.useReplacement` | `boolean` | Whether to use template replacement in s3KeyTemplate | `null`  | true         | No        |

### s3KeyReplacement

The default output path for `transcript` and `summary` jobs are `domain_name/jobId/transcript/s3Config.s3KeyTemplate` and `domain_name/jobId/summary/s3Config.s3KeyTemplate` respectively.

`s3KeyReplacement` with `useReplacement` can be used to customize the S3 path of the generated output. Template replacements are made up of a replacement string with prefixes, suffixes, or both. The currently supported replacements are:

* `epoch_time` — the epoch time in seconds (optional)
* `domain_name` — your Daily domain (optional)
* `job_id` — the job ID assigned to the job (optional)

Restrictions:

* Maximum template size is 1024 characters
* Each replacement parameter should be placed within curly brackets (e.g., `{domain_name}`)
* Only alphanumeric characters (0-9, A-Z, a-z) and `.`, `/`, `-`, `*` are valid within the template

Example with domain `"myDomain"` and template `myprefix-{domain_name}-{epoch_time}`:

```
myprefix-myDomain-1675842936274.vtt
myprefix-myDomain-1675842936274.json
myprefix-myDomain-1675842936274.txt
```

### Transcript example requests

<Tabs>
  <Tab title="Transcript with media file">
    ```curl theme={null}
    curl -H "Content-Type: application/json" \
         -H "Authorization: Bearer $TOKEN" \
         -XPOST -d \
         '{
           "preset": "transcript",
           "inParams": {
             "sourceType": "uri",
             "uri": "https://direct-url-to/file.mp4"
           },
           "outParams": {
             "s3Config": {
               "s3KeyTemplate": "transcript"
             }
           }
         }'
         https://api.daily.co/v1/batch-processor
    ```
  </Tab>

  <Tab title="Transcript with recording id">
    ```curl theme={null}
    curl -H "Content-Type: application/json" \
         -H "Authorization: Bearer $TOKEN" \
         -XPOST -d \
         '{
           "preset": "transcript",
           "inParams": {
             "sourceType": "recordingId",
             "recordingId": "uuiasdfe-8ba2-4ee6-bd15-003a92c18245"
           },
           "outParams": {
             "s3Config": {
               "s3KeyTemplate": "transcript"
             }
           }
         }'
         https://api.daily.co/v1/batch-processor
    ```
  </Tab>

  <Tab title="Special Words in Transcript">
    ```curl theme={null}
    curl -H "Content-Type: application/json" \
         -H "Authorization: Bearer $TOKEN" \
         -XPOST -d \
         '{
          "preset": "transcript",
          "inParams": {
            "sourceType": "uri",
            "uri": "https://direct-url-to/file.mp4"
          },
          "transformParams": {
            "transcript": {
              "params": {
                "keywords": ["Mustang:5", "New York:5", "Snuffleupagus:10"]
              }
            }
          },
          "outParams": {
            "s3Config": {
              "s3KeyTemplate": "my-test-transcription"
            }
          }
        }'
         https://api.daily.co/v1/batch-processor
    ```
  </Tab>
</Tabs>

### Summary example requests

<Tabs>
  <Tab title="Summary with media file">
    ```curl theme={null}
    curl -H "Content-Type: application/json" \
         -H "Authorization: Bearer $TOKEN" \
         -XPOST -d \
         '{
           "preset": "summarize",
           "inParams": {
             "sourceType": "uri",
             "uri": "https://direct-url-to/file.mp4"
           },
           "outParams": {
             "s3Config": {
               "s3KeyTemplate": "summary"
             }
           }
         }'
         https://api.daily.co/v1/batch-processor
    ```
  </Tab>

  <Tab title="Summary with recording id">
    ```curl theme={null}
    curl -H "Content-Type: application/json" \
         -H "Authorization: Bearer $TOKEN" \
         -XPOST -d \
         '{
           "preset": "summarize",
           "inParams": {
             "sourceType": "recordingId",
             "recordingId": "uuiasdfe-8ba2-4ee6-bd15-003a92c18245"
           },
           "outParams": {
             "s3Config": {
               "s3KeyTemplate": "summary"
             }
           }
         }'
         https://api.daily.co/v1/batch-processor
    ```
  </Tab>

  <Tab title="Summary with transcript">
    ```curl theme={null}
    curl -H "Content-Type: application/json" \
         -H "Authorization: Bearer $TOKEN" \
         -XPOST -d \
         '{
           "preset": "summarize",
           "inParams": {
             "sourceType": "transcriptUri",
             "uri": "https://direct-url-to/file.txt"
           },
           "outParams": {
             "s3Config": {
               "s3KeyTemplate": "summary"
             }
           }
         }'
         https://api.daily.co/v1/batch-processor
    ```
  </Tab>
</Tabs>

### Example responses

<Tabs>
  <Tab title="200 OK">
    ```json theme={null}
    {
      "id": "02c2508e-8835-4f3e-bcf2-e319d00f0eec"
    }
    ```
  </Tab>

  <Tab title="400 Bad request">
    ```json theme={null}
    {
      "error": "invalid-request-error",
      "info": "\"inParams.sourceType\" must be one of [recordingId, uri] [Received sourceType=badtype]"
    }
    ```
  </Tab>
</Tabs>


# Batch Room Create
Source: https://docs.daily.co/reference/rest-api/batch/create-rooms

POST /batch/rooms
Create rooms in bulk



# Batch Room Delete
Source: https://docs.daily.co/reference/rest-api/batch/delete-rooms

DELETE /batch/rooms
Delete rooms in bulk



# Create Domain Dial Config Info
Source: https://docs.daily.co/reference/rest-api/dial-in/create-config

POST /domain-dialin-config
create a new pinless_dialin or pin_dialin config



# Delete Domain Dialin Config
Source: https://docs.daily.co/reference/rest-api/dial-in/delete-config

DELETE /domain-dialin-config/{id}
Delete a given pinless_dialin or pin_dialin config



# Get Domain Dialin Config Info
Source: https://docs.daily.co/reference/rest-api/dial-in/get-config

GET /domain-dialin-config/{id}
Get info about an existing pinless_dialin or pin_dialin config



# Dial-In
Source: https://docs.daily.co/reference/rest-api/dial-in/index

Using our REST API, the /rooms/:name/dialin endpoints lets a developer connect a SIP and PSTN dialin to a Daily Room.

When a SIP Interconnect call or a Pinless phone call arrives, it is placed on hold until the developer creates a room and the room is ready for the phone call to be patched in via the [pinlessCallUpdate](/reference/rest-api/dial-in/pinless-update).

Check out [Pipecat docs](https://docs.pipecat.ai/pipecat/telephony/daily-pstn) for a walkthrough of building a voice bot with this pattern.


# List Domain Dialin Configs
Source: https://docs.daily.co/reference/rest-api/dial-in/list-configs

GET /domain-dialin-config
List all the pinless_dialin and pin_dialin configs for the domain, with pagination



# Pinless Call Update
Source: https://docs.daily.co/reference/rest-api/dial-in/pinless-update

POST /dialin/pinlessCallUpdate
Direct a SIP or PSTN call on hold to a specified SIP URI associated to a Daily Room.



# Update Domain Dial Config Info
Source: https://docs.daily.co/reference/rest-api/dial-in/update-config

PUT /domain-dialin-config/{id}
update an existing pinless_dialin or pin_dialin config



# Get Domain Config
Source: https://docs.daily.co/reference/rest-api/domain/get-domain-config

GET /
Get top-level configuration of your domain



# Overview
Source: https://docs.daily.co/reference/rest-api/domain/index



## your-domain.daily.co

Your domain is your top-level object in the Daily API.

You create a Daily domain [when you sign up for a Daily account](https://dashboard.daily.co/signup). Once you have a domain, you can create Daily room URLs to host video calls. Your domain can be configured with settings that apply to all rooms created within it. For example, you can set a redirect URL for when a meeting ends, or set the default language for all rooms on your domain. Any room settings you set on individual rooms will override the domain settings for that room.

```json theme={null}
{
  "domain_name": "your-domain",
  "config": {
    "hide_daily_branding": false,
    "redirect_on_meeting_exit": "https://your-domain.co/vid-exit",
    "hipaa": false,
    "intercom_auto_record": false,
    "lang": "en"
  }
}
```

You can use the Daily REST API to [retrieve information about your domain](/reference/rest-api/domain/get-domain-config) and [set domain configuration options](/reference/rest-api/domain/set-domain-config), like the default language of the rooms on your domain.


# Set Domain Config
Source: https://docs.daily.co/reference/rest-api/domain/set-domain-config

POST /
Set top-level configuration options for your domain



# Pinless_dialin and pin_dialin - overview
Source: https://docs.daily.co/reference/rest-api/domainDialinConfig/index

Using our REST API, the /domain-dialin-config endpoints let a developer create, update, list, and delete the phoneNumber/sip_endpoint for pinless-dialin or pin_dialin.

The `domain-dialin-config` endpoint allows you to perform the following actions for domain with the Daily API. This impacts `pinless_dialin` or `pin_dialin`

* [list](/reference/rest-api/dial-in/list-configs),
* [create](/reference/rest-api/dial-in/create-config),
* [update](/reference/rest-api/dial-in/update-config), and
* [delete](/reference/rest-api/dial-in/delete-config)

## The "configuration" object

There are 2 type of configuration pinless\_dialin and pin\_dialin.

```json theme={null}
{
  "type": "pinless_dialin",
  "name_prefix": "my-pinless-config",
  "phone_number": "+12010101555",
  "hmac": "9jyatvPWQfBymCGDOYPYKF/TRZXR+08Gj4bvPF78pH0=",
  "room_creation_api": "https://my-api-endpoint/create-room",
  "hold_music_url": "https://my-domain/1-MB-MP3.mp3",
  "timeout_config": {
    "message": "Agents not available. pls try later"
  }
}
```

```json theme={null}
{
  "type": "pin_dialin",
  "name_prefix": "my-pinless-config",
  "phone_number": "+12010101444",
  "ivr_greeting": {
    "message": "Hello from robots"
  }
}
```

<Note>
  Head to our **[dialin pinless guide](/docs/guides/features/dial-in-dial-out/sip-interconnect-pinless)** for detailed information on how to the complete flow works.
</Note>


# Logs - overview
Source: https://docs.daily.co/reference/rest-api/logs/index

Using our REST API, the /logs endpoints let a developer get data about call quality and end user experience, or REST API logs.

You can access call logs and metrics for every call to help you better understand your calls and troubleshoot issues as they arise.

Call logs characterize what happens on a call from the point of view of each participant. These logs include information about resource bundle downloads, signaling connections, [peer-to-peer & SFU call connections](/docs/guides/architecture-and-monitoring/intro-to-video-arch) and events, and participants' environments, actions, and error states.

Call metrics help to assess the performance and stability of the connection by providing transport layer, candidate-pair, and track level statistics.

Data starts being collected by the browser client once a second participant joins a call. The first data sample is logged after 15 seconds. Subsequent samples are logged every 15 seconds.

### **Accessing information**

Call logs and metrics are made available through the Daily [Dashboard](https://dashboard.daily.co) and the [`/logs` endpoint](/reference/rest-api/logs/list-logs).

Additionally, we've built a sample app — [Daily Call Explorer](https://colab.research.google.com/drive/1pMcB1I3YOhG7jcdH5ZrJk2VLb6cVzevm) — as an example of how this information can be used.

<Callout>
  **More on logs and metrics**

  * [Introducing Dashboard Sessions, metrics, and logs](https://www.daily.co/blog/announcing-dashboard-sessions-metrics-and-logs/)
  * [Dive into call quality and beyond with the /logs endpoint](https://www.daily.co/blog/the-logs-endpoint-and-beyond/)
</Callout>


# List API Logs
Source: https://docs.daily.co/reference/rest-api/logs/list-api-logs

GET /logs/api



# List Logs
Source: https://docs.daily.co/reference/rest-api/logs/list-logs

GET /logs



# Create Meeting Token
Source: https://docs.daily.co/reference/rest-api/meeting-tokens/create-meeting-token

POST /meeting-tokens
Create a meeting token



# Meeting tokens - Overview
Source: https://docs.daily.co/reference/rest-api/meeting-tokens/index

Using our REST API, the /meeting-tokens endpoints let a developer manage access to Daily audio and video rooms.

"Meeting tokens" **control room access** and **session configuration** on a per-user basis.

A participant can join a non-public room with a valid meeting token. For private or public rooms, you can use meeting tokens to configure how a participant experiences the meeting (e.g. what call features are available).

You can [create](/reference/rest-api/meeting-tokens/create-meeting-token) and [validate](/reference/rest-api/meeting-tokens/validate-meeting-token) meeting tokens.

```json theme={null}
{
  // example meeting token object
  "exp": 1548633621,
  "room_name": "hello",
  "user_name": "A. User",
  "is_owner": true,
  "close_tab_on_exit": true,
  "enable_recording": "cloud",
  "start_video_off": true
}
```

Meeting token configuration properties set three things: room access, meeting time limits, and participant details, including their meeting permissions and available features.

## Room access

### `room_name`

<Warning>
  **Always set `room_name`**

  A meeting token without a `room_name` property allows access to *any* room in your domain. Always set the `room_name` property when you are using meeting tokens to control room access.

  See our guide to [controlling room access](/docs/guides/privacy-and-security/controlling-who-joins-a-meeting) for more details.
</Warning>

Your tokens are unique to your domain and rooms. Tokens from another Daily domain can never grant access to your rooms.

### Meeting time limits

Two properties control how long a user is allowed to stay in a meeting.

If `eject_at_token_exp` is set to `true`, the user is kicked out of the meeting when the token expires. If the room is not public, then the user will not be able to rejoin the room.

The `eject_after_elapsed` property is the maximum number of seconds the user can stay in the meeting. The user will be kicked out `eject_after_elapsed` seconds after joining the meeting. If the meeting token has expired (and the room is not public) the user will not be able to rejoin the room. If the meeting token hasn't expired, of course, the user could reuse the meeting link and token to rejoin the room.

The two token properties `eject_at_token_exp` and `eject_after_elapsed` override the two room properties `eject_at_room_exp` and `eject_after_elapsed`. If either of the token properties are set, the two room properties are completely ignored for the current meeting session.

<Note>
  **Meeting time limits tutorial**

  * [Add advanced security to video chats with the Daily API](/docs/guides/privacy-and-security/controlling-who-joins-a-meeting)
</Note>

## Participant details, meeting permissions, and available features

You can use tokens to configure when a participant can join a meeting, when their access expires, and the call features that are enabled for each participant in a meeting. For example, you could set up a virtual classroom so that only one participant in the meeting (the teacher) can broadcast audio and video (to the students).

* `nbf`
* `exp`
* `is_owner`
* `user_name`
* `user_id`
* `enable_screenshare`
* `start_video_off`
* `start_audio_off`
* `enable_recording`
* `start_cloud_recording` <Badge>Paid plans only</Badge>
* `close_tab_on_exit`
* `redirect_on_meeting_exit`
* `lang`

For a full descriptions of all properties, please see the [table below](/reference/rest-api/meeting-tokens/create-meeting-token#body-properties).

## Using meeting tokens

To use a meeting token, pass it as a [property](/reference/daily-js/types/daily-call-options) to the [factory method](/reference/daily-js/factory-methods) of your choice, or via the [`join()`](/reference/daily-js/instance-methods/join) method.

<Tip>
  Setting a meeting token for a call participant via a factory or `join()` method property is the **only** way Daily recommends using meeting tokens, for security reasons.
</Tip>

For example, to give a specific participant special access when they join a meeting (e.g. admin privileges), you'd write something like:

```javascript theme={null}
// example passing meeting token in join method
call.join({
  url: 'DAILY_ROOM_URL',
  token: 'DAILY_MEETING_TOKEN',
});
```

<Warning>
  **Heads up!**

  Don't forget to generate your meeting tokens server-side to keep production applications secure.

  *Read about how to set up an [instant Daily server with Node.js and Glitch.](https://www.daily.co/blog/deploy-a-daily-co-backend-node-js-server-instantly/)*
</Warning>

Under the covers, meeting tokens are [JSON Web Tokens](https://jwt.io/). They are signed, but not encrypted, so you can decode the raw token yourself, if you're interested. Note that this means you should never put information that you want to keep secure into a meeting token.

You don't ever need to delete a meeting token. Meeting tokens are just cryptographically signed chunks of information that are validated by our API endpoints; they don't exist as server-side resources.

<Note>
  **Learn more about meeting tokens**

  * [Controlling who joins a meeting](/docs/guides/privacy-and-security/controlling-who-joins-a-meeting)
  * [Intro to room access control](https://www.daily.co/blog/intro-to-room-access-control/)
  * [Add advanced security to video chats with the Daily API](https://www.daily.co/blog/add-advanced-security-features-to-video-chats-with-the-daily-api/)
</Note>


# Validate Meeting Token
Source: https://docs.daily.co/reference/rest-api/meeting-tokens/validate-meeting-token

GET /meeting-tokens/{meeting_token}
Validate meeting tokens



# Get Individual Meeting Info
Source: https://docs.daily.co/reference/rest-api/meetings/get-meeting

GET /meetings/{meeting}
retrieve info about a particular meeting



# Get Meeting Participants
Source: https://docs.daily.co/reference/rest-api/meetings/get-participants

GET /meetings/{meeting}/participants
retrieve info about the participants in a particular meeting



# Meetings
Source: https://docs.daily.co/reference/rest-api/meetings/index

Using our REST API, the /meetings endpoint lets a developer get a list of meeting sessions.

## The "meeting" object

```json theme={null}
{
  "id": "82b92a0b-52cf-4495-f1bf-4d58a98a99b7",
  "room": "room-3",
  "start_time": 1549391714,
  "duration": 1650,
  "ongoing": true,
  "max_participants": 2,
  "participants": [
    {
      "user_id": null,
      "user_name": null,
      "participant_id": "11111111-2222-3333-4444-555555555555",
      "join_time": 1549391690,
      "duration": 1626
    },
    {
      "user_id": null,
      "user_name": null,
      "participant_id": "66666666-7777-8888-9999-000000000000",
      "join_time": 1549391714,
      "duration": 1650
    }
  ]
}
```

A meeting session is a set of one or more people in a room together during a specific time window.

Meeting session objects contain information about who joined calls in your rooms, when, and for how long.

Each meeting session object has six fields:

* A unique, opaque meeting session `id`
* The name of the `room`
* A `start_time` (when the first user joined the session)
* A `duration`
* An `ongoing` boolean (true, if any participants are currently in the room)
* A `max_participants` value (number), for the maximum number of participants that were present in the meeting at one time
* A list of meeting session `participants`

The objects in the `participants` list five fields: `join_time`, `duration`, `participant_id`, `user_id`, and `user_name`. `join_time`, `duration`, and `participant_id` will always contain valid data. `user_id` and `user_name` fields will be `null` if that information is not available for the participant.

The `start_time` and `join_time` fields are unix timestamps (seconds since the epoch), and have approximately 15-second granularity. (We generally do not write a "meeting join" record until a user has stayed in a room for at least 10 seconds. ) The `duration` fields are elapsed times in seconds.

Because rooms are often reused, the definition of a meeting session needs to account for what happens when people join and leave rooms in arbitrary sequences. Here are the rules that determine the start and end bounds of a meeting session:
A new meeting session begins when:

* A single participant joins the room and has been alone for 30 seconds.
* A second participant joins the room prior to the 30 seconds.
* A participant remains in a room alone for 10 minutes after all others have left

A meeting session ends when:

* All users leave the room. (The participant count is zero)
* A participant remains in a room alone for 10 minutes after all others have left. (The participant count decrements to 1 for 10 minutes)

The intent of 10 minute reset is to try to match users expectations about what a "meeting" is. Some of our users leave rooms open for long periods of time, and stay in that room, and then are periodically joined by other people for "meetings." Thus, a user's unbroken time in a room might span multiple meeting sessions.

```bash theme={null}
# Example: get information about the 5 most recent meetings in classroom-104
curl -H "Content-Type: application/json" \
     -H "Authorization: Bearer DAILY_API_KEY" \
     https://api.daily.co/v1/meetings?room=classroom-104&limit=5
```


# Get Meeting Info
Source: https://docs.daily.co/reference/rest-api/meetings/list-meetings

GET /meetings
retrieve meeting analytics



# Buy Phone Number
Source: https://docs.daily.co/reference/rest-api/phone-numbers/buy-number

POST /buy-phone-number
This will buy a phone number. In the POST request you can either provide the phone number you want to buy, or leave it empty. If the specified `number` is still available, it will be bought or the API will return a failure. Alternatively, if you skipped the `number` field, a random phone number from California (CA) will be bought.



# phone-numbers
Source: https://docs.daily.co/reference/rest-api/phone-numbers/index

Using the phone-numbers endpoint, the developer can buy, delete, list their phone number

## Phone numbers endpoint (Paid plans only)

You can do the following:

* [Search](/reference/rest-api/phone-numbers/list-available) for available phone numbers to purchase
* [Purchase](/reference/rest-api/phone-numbers/buy-number) a phone number
* [Release](/reference/rest-api/phone-numbers/release-number) a purchased phone number
* [List all](/reference/rest-api/phone-numbers/list-purchased) the purchased phone numbers

There is no restriction on the number of phone numbers you can buy, however, a single phone number can send and receive hundreds of simultaneous calls.

Any purchased number can be used for PSTN dialout. However, a phone number can only be either used for [Pinless Dialin](/docs/guides/features/dial-in-dial-out/sip-interconnect-pinless) or [Pin Dialin](/docs/guides/features/dial-in-dial-out/pstn-pin-dialin).
Read more details about SIP and PSTN in our [guide](/docs/guides/features/dial-in-dial-out/index).

## CNAM Registration

To register your number with the United States CNAM registry, please fill out this [form](https://forms.gle/dLUMQ1KXc2EfTMLk6). Once registered, the Caller ID will display the appropriate name on the calling party's device.


# List Available Numbers
Source: https://docs.daily.co/reference/rest-api/phone-numbers/list-available

GET /list-available-numbers
Search for available phone numbers to purchase



# Purchased Phone Numbers
Source: https://docs.daily.co/reference/rest-api/phone-numbers/list-purchased

GET /purchased-phone-numbers
List the purchased phone numbers for this domain



# Release Phone Number
Source: https://docs.daily.co/reference/rest-api/phone-numbers/release-number

DELETE /release-phone-number/{id}
Release a purchased number. The number is referenced by its id. A number cannot be deleted within the 14 days of purchase. Calling this API before this period expires results in an error.



# Get Presence
Source: https://docs.daily.co/reference/rest-api/presence/get-presence

GET /presence



# Presence - overview
Source: https://docs.daily.co/reference/rest-api/presence/index

Using our REST API, the /presence endpoint lets a developer see real-time presence data for their Daily rooms.

This endpoint provides near-real-time participant presence data<sup>\[0]</sup>.

`/presence` accepts no options and quickly returns all active participants the requestor can see, grouped by room.

<Note>
  **`/presence` vs `/meetings` vs `/logs`**

  Please use this endpoint (not `/meetings`) if you need to know the current state of rooms and participants. If you need more in-depth analytics please see [Meeting Analytics](/reference/rest-api/meetings) or [Logs](/reference/rest-api/logs).
</Note>

## The "presence" object

```json theme={null}
{
  "cool-room": [
    {
      "room": "cool-room",
      "id": "4c8dee53-fd51-445c-92d4-917701401d14",
      "userId": "309cf686-64ba-4afa-9e6b-05fe13c56fbf",
      "userName": "sean",
      "mtgSessionId": "16e9701a-93e0-4933-83c9-223e7c40d552",
      "joinTime": "2020-11-01T23:46:38.000Z",
      "duration": 543
    },
    ... more participants ...
  ]
}
```

## Example request

```bash theme={null}
curl -H "Content-Type: application/json" \
     -H "Authorization: Bearer DAILY_API_KEY" \
     https://api.daily.co/v1/presence
```

**Note**: It should be sufficient to query this endpoint no more frequently than once every 15 seconds to get a complete picture of all of the participants on your domain.

<sup>\[0]</sup> delay of up to 15 seconds.


# Delete Recording
Source: https://docs.daily.co/reference/rest-api/recordings/delete-recording

DELETE /recordings/{recording_id}
Delete a recording



# Get Recording Info
Source: https://docs.daily.co/reference/rest-api/recordings/get-recording

GET /recordings/{recording_id}
Get info about a recording



# Get Recording Link
Source: https://docs.daily.co/reference/rest-api/recordings/get-recording-link

GET /recordings/{recording_id}/access-link
Generate an access link for a recording



# Recordings - overview
Source: https://docs.daily.co/reference/rest-api/recordings/index

Using our REST API, the /recordings endpoints let a developer manage, create, and download recordings of meetings in their Daily rooms.

You can [list](/reference/rest-api/recordings/list-recordings) and [delete](/reference/rest-api/recordings/delete-recording) with the Daily API.

We support `"local"` recording to a participant's own device in addition to three cloud-based recording types: `"cloud"`, `"cloud-audio-only"`, and `"raw-tracks"`.

If you will be recording your calls, you might be interested in monitoring the status of those recordings. Daily's recording events help you monitor that and respond accordingly.

## The "recording" object

A recording object represents a single saved recording. See [recording configuration](/reference/rest-api/recordings/get-recording) for a full list of possible properties.

```json theme={null}
{
  "id": "0cb313e1-211f-4be0-833d-8c7305b19902",
  "room_name": "test-recording-room",
  "start_ts": 1548789650,
  "status": "finished",
  "max_participants": 2,
  "duration": 277,
  "tracks": [],
  "share_token": "NcWgEiJuqD8v"
}
```

<Note>
  Head to our **[recordings guide](/docs/guides/features/recording)** for detailed information on when and how to use each recording type.
</Note>


# List Recordings
Source: https://docs.daily.co/reference/rest-api/recordings/list-recordings

GET /recordings
List recordings



# Room SIP Call Transfer
Source: https://docs.daily.co/reference/rest-api/rooms/call-transfer/sip-call-transfer

POST /rooms/{room_name}/sipCallTransfer
transfer sip/pstn call



# Room SIP Refer
Source: https://docs.daily.co/reference/rest-api/rooms/call-transfer/sip-refer

POST /rooms/{room_name}/sipRefer
refer a sip call to other sip endpoint



# Create Room
Source: https://docs.daily.co/reference/rest-api/rooms/create-room

POST /rooms
Create a room



# Delete Room
Source: https://docs.daily.co/reference/rest-api/rooms/delete-room

DELETE /rooms/{room_name}
Delete a room



# Room Dial Out Send DTMF
Source: https://docs.daily.co/reference/rest-api/rooms/dial-out/send-dtmf

POST /rooms/{room_name}/dialOut/sendDTMF
send DTMF digits on the dialout



# Room Dial Out Start
Source: https://docs.daily.co/reference/rest-api/rooms/dial-out/start

POST /rooms/{room_name}/dialOut/start
Start a dial-out in a room



# Room Dial Out Stop
Source: https://docs.daily.co/reference/rest-api/rooms/dial-out/stop

POST /rooms/{room_name}/dialOut/stop
Stop a dial out in a room



# Get Room Config
Source: https://docs.daily.co/reference/rest-api/rooms/get-room

GET /rooms/{room_name}
Get info about a room



# Get Room Presence
Source: https://docs.daily.co/reference/rest-api/rooms/get-room-presence

GET /rooms/{room_name}/presence
Get a presence snapshot for a room



# Rooms
Source: https://docs.daily.co/reference/rest-api/rooms/index

Using our REST API, the /rooms endpoints let a developer manage their Daily audio and video rooms.

A "room" represents a specific video call location and configuration. You can [list](/reference/rest-api/rooms/list-rooms), [create](/reference/rest-api/rooms/create-room), [configure](/reference/rest-api/rooms/update-room), and [delete](/reference/rest-api/rooms/delete-room) rooms with the Daily API.

```json theme={null}
{
  "id": "5e3cf703-5547-47d6-a371-37b1f0b4427f",
  "name": "hello",
  "api_created": false,
  "privacy": "public",
  "url": "https://api-demo.daily.co/hello",
  "created_at": "2019-01-25T23:49:42.000Z",
  "config": {
    "max_participants": 4,
    "nbf": 1548547221,
    "exp": 1548633621
    "start_video_off": true,
    "enable_recording": 'cloud',
  }
}
```

A room contains a `url` property. A participant joins a Daily video call via a room URL.

A room URL looks like this: `https://<your-domain>.daily.co/<room-name>/`.

A participant joins a Daily video call by opening the room URL directly in a browser tab (recommended for testing only), or by accessing the link from an embedded iframe ([Daily’s prebuilt UI](/docs/prebuilt)) or within a custom app [built on the Daily call object](/call-object).

<Warning>
  **Heads up!**

  Hard-coding Daily room URLs is fine for testing locally, but a security liability in production. You'll want to generate room URLs server side.

  *Tutorial: [Deploying a Daily backend server instantly](https://www.daily.co/blog/deploy-a-daily-co-backend-node-js-server-instantly/) with Glitch and Node.js*.
</Warning>

Rooms can be created either [manually in the Daily dashboard](/docs/guides/architecture-and-monitoring/experiment-in-the-dashboard#creating-a-room) or by a [POST to the /rooms API endpoint](/reference/rest-api/rooms/create-room).

You can specify [configuration properties](/reference/rest-api/rooms/get-room#response-config) when you create the room. All rooms come with a few default settings, unless you configure them otherwise.

By default, the `privacy` property is set to `"public"`. Anyone who knows the room's name can join the room, and anybody with access to the URL can enter. This is often what you want. It's easy to create rooms that have unique, unguessable, names. But, you can also change a room's privacy setting and [control who can join a room](/docs/guides/privacy-and-security/controlling-who-joins-a-meeting).

<Note>
  **More resources on room privacy**

  * [Intro to room access control](https://www.daily.co/blog/intro-to-room-access-control/)
  * [Add advanced security to video chats with the Daily API](https://www.daily.co/blog/add-advanced-security-features-to-video-chats-with-the-daily-api/).
</Note>

By default, rooms are permanent and always available. To limit that access, you can set two fields to control when participants can join a meeting in a room. `nbf` stands for "not before". If the `nbf` configuration field is set, participants can’t connect to the room before that time. `exp` is short for "expires." If the `exp` configuration flag is set, participants are not able to connect to the room after that time.

Note that `nbf` and `exp` only control whether users are allowed to *join* a meeting in a room. Users who are in a meeting when a room expires are not kicked out of the meeting, unless you set the `eject_at_room_exp` property.

Rooms that have an exp in the past are not returned by the [list rooms endpoint](/reference/rest-api/rooms/list-rooms); they are zombies of a sort. An existing meeting can continue in the room, but from the perspective of most of the API, the room does not exist!

If you ever need to kick everyone out of a room unexpectedly, you can delete the room. (You can always recreate a room with the same name, later.)


# List Rooms
Source: https://docs.daily.co/reference/rest-api/rooms/list-rooms

GET /rooms
List rooms



# Room Livestreaming Start
Source: https://docs.daily.co/reference/rest-api/rooms/live-streaming/start

POST /rooms/{room_name}/live-streaming/start
Start a live stream in a room



# Room Livestreaming Stop
Source: https://docs.daily.co/reference/rest-api/rooms/live-streaming/stop

POST /rooms/{room_name}/live-streaming/stop
Stop a live stream in a room



# Room Livestreaming Update
Source: https://docs.daily.co/reference/rest-api/rooms/live-streaming/update

POST /rooms/{room_name}/live-streaming/update
Update a live stream in a room



# Room Recordings Start
Source: https://docs.daily.co/reference/rest-api/rooms/recordings/start

POST /rooms/{room_name}/recordings/start
Start a recording in a room



# Room Recordings Stop
Source: https://docs.daily.co/reference/rest-api/rooms/recordings/stop

POST /rooms/{room_name}/recordings/stop
Stop a recording in a room



# Room Recordings Update
Source: https://docs.daily.co/reference/rest-api/rooms/recordings/update

POST /rooms/{room_name}/recordings/update
Update a recording in a room



# Eject
Source: https://docs.daily.co/reference/rest-api/rooms/session/eject

POST /rooms/{room_name}/eject
Ejects participants from a room



# Get Room Presence
Source: https://docs.daily.co/reference/rest-api/rooms/session/get-presence

GET /rooms/{room_name}/presence
Get a presence snapshot for a room



# Get Session Data
Source: https://docs.daily.co/reference/rest-api/rooms/session/get-session-data

GET /rooms/{room_name}/get-session-data
Gets meeting session data



# Send App Message
Source: https://docs.daily.co/reference/rest-api/rooms/session/send-app-message

POST /rooms/{room_name}/send-app-message
Send a message to participants in a room



# Set Session Data
Source: https://docs.daily.co/reference/rest-api/rooms/session/set-session-data

POST /rooms/{room_name}/set-session-data
Sets meeting session data



# Update Permissions
Source: https://docs.daily.co/reference/rest-api/rooms/session/update-permissions

POST /rooms/{room_name}/update-permissions
Modifies permissions for one or more participants in a room



# Room Transcription Start
Source: https://docs.daily.co/reference/rest-api/rooms/transcription/start

POST /rooms/{room_name}/transcription/start
Start a transcription in a room



# Room Transcription Stop
Source: https://docs.daily.co/reference/rest-api/rooms/transcription/stop

POST /rooms/{room_name}/transcription/stop
Stop a transcription in a room



# Room Transcription Update
Source: https://docs.daily.co/reference/rest-api/rooms/transcription/update

POST /rooms/{room_name}/transcription/update
Update the set of participants being transcribed



# Set Room Config
Source: https://docs.daily.co/reference/rest-api/rooms/update-room

POST /rooms/{room_name}
Set a room's privacy and config properties



# Delete Transcript
Source: https://docs.daily.co/reference/rest-api/transcripts/delete-transcript

DELETE /transcript/{transcriptId}
Delete a transcript



# Get Transcript Info
Source: https://docs.daily.co/reference/rest-api/transcripts/get-transcript

GET /transcript/{transcriptId}
Get info about a Transcript



# Get Transcript Link
Source: https://docs.daily.co/reference/rest-api/transcripts/get-transcript-link

GET /transcript/{transcriptId}/access-link
Generate an access link for a transcript



# Transcripts - overview
Source: https://docs.daily.co/reference/rest-api/transcripts/index

Using our REST API, the /transcript endpoints let you list, retrieve, download, and delete transcripts of meetings in your Daily rooms.

Transcription is started and stopped during a call via [`startTranscription()`](/reference/daily-js/instance-methods/start-transcription) and [`stopTranscription()`](/reference/daily-js/instance-methods/stop-transcription), or automatically via meeting token or room configuration. The `/transcript` endpoints let you manage the resulting transcript records after the fact.

<Note>
  Head to our **[transcription guide](/docs/guides/features/transcription)** for detailed information on how to transcribe a call, configure storage, and set up webhooks.
</Note>

## The "transcript" object

A transcript object represents a single transcription session.

```json theme={null}
{
  "transcriptId": "a759ae14-0327-4bf6-ac0d-192a0323f45b",
  "domainId": "04b89420-cf8b-4ea5-a428-02cc0a0e2a59",
  "roomId": "ad9e57d6-dcb8-4bb0-8100-247146b75713",
  "mtgSessionId": "586f7f8b-2a4f-4091-aa85-99a36094cb4e",
  "status": "t_finished",
  "duration": 14,
  "isVttAvailable": true,
  "outParams": {
    "key": "my-domain/my-room/1699441864907.vtt",
    "bucket": "my-transcript-bucket",
    "region": "us-west-2"
  },
  "created_at": "2024-01-15T10:30:00.000Z",
  "updated_at": "2024-01-15T10:35:00.000Z"
}
```

`status` is one of `t_in_progress`, `t_finished`, `t_error`, or `t_deleted`.


# List Transcript
Source: https://docs.daily.co/reference/rest-api/transcripts/list-transcripts

GET /transcript
List transcripts



# Create Webhook
Source: https://docs.daily.co/reference/rest-api/webhooks/create-webhook

POST /webhooks
Create a webhook



# Delete Webhook
Source: https://docs.daily.co/reference/rest-api/webhooks/delete-webhook

DELETE /webhooks/{id}
Delete a webhook



# Batch Processor Job Error
Source: https://docs.daily.co/reference/rest-api/webhooks/events/batch-processor-error

The batch processor job error webhook event

A batch processor error event is emitted when as batch processor job enters the `error` status. Read more about batch processor jobs [here](/reference/rest-api/batch-processor).

## Common fields

<ParamField type="string">
  Represents the version of the event. Uses semantic versioning to inform a consumer if the payload has introduced any breaking changes.
</ParamField>

<ParamField type="string">
  Represents the type of the event described in the payload.
</ParamField>

<ParamField type="string">
  An identifier representing this specific event.
</ParamField>

<ParamField type="object">
  An object representing the event, whose fields are described below.
</ParamField>

<ParamField type="number">
  Documenting when the webhook itself was sent. This timestamp is different than the time of the event the webhook describes.
</ParamField>

## Payload

<ParamField type="string">
  The batch processor job id.
</ParamField>

<ParamField type="string">
  The preset given when starting the job.
</ParamField>

<ParamField type="string">
  The status of the job.
</ParamField>

<ParamField type="object">
  These parameters define what the inputs were for this given batch processor job.
</ParamField>

<ParamField type="string">
  A description of the error that occurred.
</ParamField>

```json theme={null}
{
  "version": "1.0.0",
  "type": "batch-processor.error",
  "id": "bp-je-bcb9f15d-2b00-4d98-be5f-23888e2df2ca",
  "payload": {
    "id": "bcb9f15d-2b00-4d98-be5f-23888e2df2ca",
    "preset": "summarize",
    "status": "error",
    "input": {
      "sourceType": "uri",
      "uri": "{{uri}}"
    },
    "output": {},
    "error": "Summary generation job failed: BatchProcessorTranscriptError: transcript job failed: Error: Failed to download: 403 Forbidden"
  },
  "event_ts": 1711402402.539
}
```


# Batch Processor Job Finished
Source: https://docs.daily.co/reference/rest-api/webhooks/events/batch-processor-job-finished

The batch processor job finished webhook event

A batch processor job finished event is emitted when as batch processor job enters the `finished` status. Read more about batch processor jobs [here](/reference/rest-api/batch-processor).

## Common fields

<ParamField type="string">
  Represents the version of the event. Uses semantic versioning to inform a consumer if the payload has introduced any breaking changes.
</ParamField>

<ParamField type="string">
  Represents the type of the event described in the payload.
</ParamField>

<ParamField type="string">
  An identifier representing this specific event.
</ParamField>

<ParamField type="object">
  An object representing the event, whose fields are described below.
</ParamField>

<ParamField type="number">
  Documenting when the webhook itself was sent. This timestamp is different than the time of the event the webhook describes.
</ParamField>

## Payload

<ParamField type="string">
  The batch processor job id.
</ParamField>

<ParamField type="string">
  The preset given when starting the job.
</ParamField>

<ParamField type="string">
  The status of the job.
</ParamField>

<ParamField type="object">
  These parameters define what the inputs were for this given batch processor job.
</ParamField>

<ParamField type="object">
  These parameters define the output of the batch processor job.
</ParamField>

```json theme={null}
{
  "version": "1.0.0",
  "type": "batch-processor.job-finished",
  "id": "bp-jf-1dae15c5-6a85-4d65-ab00-4b19bb054b84",
  "payload": {
    "id": "1dae15c5-6a85-4d65-ab00-4b19bb054b84",
    "preset": "summarize",
    "status": "finished",
    "input": {
      "sourceType": "uri",
      "uri": "{{uri}}"
    },
    "output": {
      "transcription": [
        {
          "format": "json",
          "s3Config": {
            "key": "staging/1dae15c5-6a85-4d65-ab00-4b19bb054b84/transcript/soap.json",
            "bucket": "daily-co-batch-processor-qa-us-west-2",
            "region": "us-west-2"
          }
        },
        {
          "format": "srt",
          "s3Config": {
            "key": "staging/1dae15c5-6a85-4d65-ab00-4b19bb054b84/transcript/soap.srt",
            "bucket": "daily-co-batch-processor-qa-us-west-2",
            "region": "us-west-2"
          }
        },
        {
          "format": "txt",
          "s3Config": {
            "key": "staging/1dae15c5-6a85-4d65-ab00-4b19bb054b84/transcript/soap.txt",
            "bucket": "daily-co-batch-processor-qa-us-west-2",
            "region": "us-west-2"
          }
        },
        {
          "format": "vtt",
          "s3Config": {
            "key": "staging/1dae15c5-6a85-4d65-ab00-4b19bb054b84/transcript/soap.vtt",
            "bucket": "daily-co-batch-processor-qa-us-west-2",
            "region": "us-west-2"
          }
        }
      ],
      "summary": {
        "format": "txt",
        "s3Config": {
          "key": "staging/1dae15c5-6a85-4d65-ab00-4b19bb054b84/transcript/soap",
          "bucket": "daily-co-batch-processor-qa-us-west-2",
          "region": "us-west-2"
        }
      }
    }
  },
  "event_ts": 1711402301.747
}
```


# Calltransfer Answered
Source: https://docs.daily.co/reference/rest-api/webhooks/events/calltransfer-answered

The calltransfer-answered webhook

Emitted when remote endpoint answered the call.
This webhook is not triggered for sip-refer case.

## Webhook Events

There are five common fields all events share:

## Calltransfer requested without sip-refer

```json theme={null}
{
  "version": "1.0.0",
  "type": "calltransfer.answered",
  "id": "3602-call-transfer-ans-07efe77a-74e8-4e69-81b0-41ca454c06e01770005095",
  "payload": {
    "domain_id": "04b89420-cf8b-4ea5-a428-02c40b0e2a59",
    "room": "sip-test",
    "timestamp": "1770005095",
    "session_id": "07efe77a-74e8-4e69-81b0-41ca454c06e0",
    "mtg_session_id": "34888835-dadc-4874-a2a8-be38da1f8296",
    "to_endpoint": "sip:user-b@user-a.my-domain.com",
    "from_endpoint": "sip:user-a@user-a.my-domain.com"
  },
  "event_ts": 1770005095.25
}
```


# Calltransfer Completed
Source: https://docs.daily.co/reference/rest-api/webhooks/events/calltransfer-completed

The calltransfer-completed webhook

Emitted when "toEndpoint" ended the call.
This webhook is not triggered for sip-refer case.

## Webhook Events

There are five common fields all events share:

## Calltransfer requested without sip-refer

```json theme={null}
{
  "version": "1.0.0",
  "type": "calltransfer.completed",
  "id": "3602-call-transfer-completed-07efe77a-74e8-4e69-81b0-41ca454c06e01770005095",
  "payload": {
    "domain_id": "04b89420-cf8b-4ea5-a428-02c40b0e2a59",
    "room": "sip-test",
    "timestamp": "1770005095",
    "session_id": "07efe77a-74e8-4e69-81b0-41ca454c06e0",
    "mtg_session_id": "34888835-dadc-4874-a2a8-be38da1f8296",
    "to_endpoint": "sip:user-b@user-a.my-domain.com",
    "from_endpoint": "sip:user-a@user-a.my-domain.com"
  },
  "event_ts": 1770005095.25
}
```


# Calltransfer Initiated
Source: https://docs.daily.co/reference/rest-api/webhooks/events/calltransfer-initiated

The Calltransfer-initiated webhook

Emitted when a SIP request is sent to the `to_endpoint`, the SIP user is removed from the room, and the call is connected to `to_endpoint`.

## Webhook Events

There are five common fields all events share:

## Calltransfer requested without sip-refer

```json theme={null}
{
  "version": "1.0.0",
  "type": "calltransfer.initiated",
  "id": "3602-call-transfer-init-07efe77a-74e8-4e69-81b0-41ca454c06e01770005095",
  "payload": {
    "domain_id": "04b89420-cf8b-4ea5-a428-02c40b0e2a59",
    "room": "sip-test",
    "timestamp": "1770005095",
    "session_id": "07efe77a-74e8-4e69-81b0-41ca454c06e0",
    "mtg_session_id": "34888835-dadc-4874-a2a8-be38da1f8296",
    "to_endpoint": "sip:user-b@user-a.my-domain.com",
    "from_endpoint": "sip:user-a@user-a.my-domain.com",
    "is_sip_refer": false
  },
  "event_ts": 1770005095.25
}
```

## Calltransfer requested with sip-refer

```json theme={null}
{
  "version": "1.0.0",
  "type": "calltransfer.initiated",
  "id": "3602-call-transfer-init-07efe77a-74e8-4e69-81b0-41ca454c06e01770005095",
  "payload": {
    "domain_id": "04b89420-cf8b-4ea5-a428-02c40b0e2a59",
    "room": "sip-test",
    "timestamp": "1770005095",
    "session_id": "07efe77a-74e8-4e69-81b0-41ca454c06e0",
    "mtg_session_id": "34888835-dadc-4874-a2a8-be38da1f8296",
    "to_endpoint": "sip:user-b@user-a.my-domain.com",
    "from_endpoint": "sip:user-a@user-a.my-domain.com",
    "is_sip_refer": true
  },
  "event_ts": 1770005095.25
}
```


# Calltransfer Triggered
Source: https://docs.daily.co/reference/rest-api/webhooks/events/calltransfer-triggered

The Calltransfer Triggered webhook

Emitted when calltransfer API is called and accepted.

## Webhook Events

There are five common fields all events share:

## Calltransfer requested without sip-refer

```json theme={null}
{
  "version": "1.0.0",
  "type": "calltransfer.triggered",
  "id": "3602-call-transfer-trig-07efe77a-74e8-4e69-81b0-41ca454c06e01770005095",
  "payload": {
    "domain_id": "04b89420-cf8b-4ea5-a428-02c40b0e2a59",
    "room": "sip-test",
    "timestamp": "1770005095",
    "session_id": "07efe77a-74e8-4e69-81b0-41ca454c06e0",
    "mtg_session_id": "34888835-dadc-4874-a2a8-be38da1f8296",
    "to_endpoint": "sip:user-b@user-a.my-domain.com",
    "from_endpoint": "sip:user-a@user-a.my-domain.com",
    "is_sip_refer": false
  },
  "event_ts": 1770005095.25
}
```

## Calltransfer requested with sip-refer

```json theme={null}
{
  "version": "1.0.0",
  "type": "calltransfer.triggered",
  "id": "3602-call-transfer-trig-07efe77a-74e8-4e69-81b0-41ca454c06e01770005095",
  "payload": {
    "domain_id": "04b89420-cf8b-4ea5-a428-02c40b0e2a59",
    "room": "sip-test",
    "timestamp": "1770005095",
    "session_id": "07efe77a-74e8-4e69-81b0-41ca454c06e0",
    "mtg_session_id": "34888835-dadc-4874-a2a8-be38da1f8296",
    "to_endpoint": "sip:user-b@user-a.my-domain.com",
    "from_endpoint": "sip:user-a@user-a.my-domain.com",
    "is_sip_refer": true
  },
  "event_ts": 1770005095.25
}
```


# Dial-in Connected
Source: https://docs.daily.co/reference/rest-api/webhooks/events/dialin-connected

The dial-in connected webhook

Emitted when the session when the remote end calls (via SIP or PSTN) and the connection is established with Daily's Room. If a user is present in the Daily Room, the call will be directly connected and voice should flow between the PSTN phone number and the Daily Room.

## Common fields

<ParamField type="string">
  Represents the version of the event. Uses semantic versioning to inform a consumer if the payload has introduced any breaking changes.
</ParamField>

<ParamField type="string">
  Represents the type of the event described in the payload.
</ParamField>

<ParamField type="string">
  An identifier representing this specific event.
</ParamField>

<ParamField type="object">
  An object representing the event, whose fields are described below.
</ParamField>

<ParamField type="number">
  Documenting when the webhook itself was sent. This timestamp is different than the time of the event the webhook describes.
</ParamField>

## Payload

<ParamField type="integer">
  The Unix epoch time in seconds representing when this event occurred.
</ParamField>

<ParamField type="string">
  The sessionId of the dial-in session.
</ParamField>

<ParamField type="string">
  sip address of the incoming call.
</ParamField>

<ParamField type="string">
  ID of the domain corresponding to this dial-in event.
</ParamField>

<ParamField type="string">
  The name of the room where dial-in event occurred.
</ParamField>

<ParamField type="string">
  name displayed for the incoming user.
</ParamField>

<ParamField type="object">
  sip header and header values in the incoming sip invite.
</ParamField>

```json theme={null}
{
  "version": "1.0.0",
  "type": "dialin.connected",
  "id": "2868-dial-in-con-ff1e7130-7752-4304-9cf4-08d2583a41dc",
  "payload": {
    "domain_id": "04b89420-cf8b-4ea5-a428-02c40b0e2a59",
    "room": "my-dialin-room",
    "timestamp": "1728036610",
    "session_id": "ff1e7130-7752-4304-9cf4-08d2583a41dc",
    "sip_from": "sip:myuser@mysip.sip.twilio.com",
    "sip_headers": {
      "X-New-Hdr": "myhdr"
    },
    "display_name": "sip-user"
  },
  "event_ts": 1728036610.899
}
```


# Dial-in error
Source: https://docs.daily.co/reference/rest-api/webhooks/events/dialin-error

The dial-in has an error

Emitted when the dial-in session encounters an error.

## Common fields

<ParamField type="string">
  Represents the version of the event. Uses semantic versioning to inform a consumer if the payload has introduced any breaking changes.
</ParamField>

<ParamField type="string">
  Represents the type of the event described in the payload.
</ParamField>

<ParamField type="string">
  An identifier representing this specific event.
</ParamField>

<ParamField type="object">
  An object representing the event, whose fields are described below.
</ParamField>

<ParamField type="number">
  Documenting when the webhook itself was sent. This timestamp is different than the time of the event the webhook describes.
</ParamField>

## Payload

<ParamField type="integer">
  The Unix epoch time in seconds representing when this event occurred.
</ParamField>

<ParamField type="string">
  The sessionId of the dial-in session.
</ParamField>

<ParamField type="string">
  ID of the domain corresponding to this dial-in event.
</ParamField>

<ParamField type="string">
  The name of the room where dial-in error occurred.
</ParamField>

<ParamField type="string">
  string describing the error.
</ParamField>

```json theme={null}
{
  "version": "1.0.0",
  "type": "dialin.error",
  "id": "2868-dial-in-err-ff1e7130-7752-4304-9cf4-08d2583a41dc",
  "payload": {
    "domain_id": "04b89420-cf8b-4ea5-a428-02c40b0e2a59",
    "room": "my-dialin-room",
    "timestamp": "1728036639",
    "session_id": "ff1e7130-7752-4304-9cf4-08d2583a41dc",
    "error_msg": "Dialin failed with error: GStreamer process error, Channel closed)."
  },
  "event_ts": 1728036639.433
}
```


# Dial-in Ready
Source: https://docs.daily.co/reference/rest-api/webhooks/events/dialin-ready

The dial-in ready webhook

Emitted when a sip\_endpoint associated with the room is ready to receive an inbound call. The event is emitted for each configured sip\_endpoint.

## Common fields

<ParamField type="string">
  Represents the version of the event. Uses semantic versioning to inform a consumer if the payload has introduced any breaking changes.
</ParamField>

<ParamField type="string">
  Represents the type of the event described in the payload.
</ParamField>

<ParamField type="string">
  An identifier representing this specific event.
</ParamField>

<ParamField type="object">
  An object representing the event, whose fields are described below.
</ParamField>

<ParamField type="number">
  Documenting when the webhook itself was sent. This timestamp is different than the time of the event the webhook describes.
</ParamField>

## Payload

<ParamField type="integer">
  The Unix epoch time in seconds representing when this event occurred.
</ParamField>

<ParamField type="string">
  ID of the domain corresponding to this dial-in event.
</ParamField>

<ParamField type="string">
  The name of the room where the dial-in event occurred.
</ParamField>

<ParamField type="string">
  sip endpoint associated with the room, which is ready to receive call.
</ParamField>

```json theme={null}
{
  "version": "1.0.0",
  "type": "dialin.ready",
  "id": "3602-dial-in-ready-1744186319",
  "payload": {
    "domain_id": "04b89420-cf8b-4ea5-a428-02c40b0e2a59",
    "room": "my-sip-room",
    "timestamp": "1744186319",
    "sip_endpoint": "sip:my-sip-room.0@daily-23097230720-app.dapp.signalwire.com"
  },
  "event_ts": 1744186319.195
}
```


# Dial-in stopped
Source: https://docs.daily.co/reference/rest-api/webhooks/events/dialin-stopped

The dial-in stopped webhook

Emitted when the session when the SIP or PSTN session is stopped or ended.

## Common fields

<ParamField type="string">
  Represents the version of the event. Uses semantic versioning to inform a consumer if the payload has introduced any breaking changes.
</ParamField>

<ParamField type="string">
  Represents the type of the event described in the payload.
</ParamField>

<ParamField type="string">
  An identifier representing this specific event.
</ParamField>

<ParamField type="object">
  An object representing the event, whose fields are described below.
</ParamField>

<ParamField type="number">
  Documenting when the webhook itself was sent. This timestamp is different than the time of the event the webhook describes.
</ParamField>

## Payload

<ParamField type="integer">
  The Unix epoch time in seconds representing when this event occurred.
</ParamField>

<ParamField type="string">
  The sessionId of the dial-in session.
</ParamField>

<ParamField type="string">
  sip address of the incoming call.
</ParamField>

<ParamField type="string">
  ID of the domain corresponding to this dial-in event.
</ParamField>

<ParamField type="string">
  The name of the room where dial-in event occurred.
</ParamField>

<ParamField type="string">
  name displayed for the incoming user.
</ParamField>

<ParamField type="object">
  sip header and header values in the incoming sip invite.
</ParamField>

```json theme={null}
{
  "version": "1.0.0",
  "type": "dialin.stopped",
  "id": "2868-dial-in-stop-ff1e7130-7752-4304-9cf4-08d2583a41dc",
  "payload": {
    "domain_id": "04b89420-cf8b-4ea5-a428-02c40b0e2a59",
    "room": "my-dialin-room",
    "timestamp": "1728036616",
    "session_id": "ff1e7130-7752-4304-9cf4-08d2583a41dc",
    "sip_from": "sip:myuser@myuser.sip.twilio.com",
    "sip_headers": {
      "X-New-Hdr": "myhdr"
    },
    "display_name": "sip-user"
  },
  "event_ts": 1728036616.857
}
```


# Dial-in warning
Source: https://docs.daily.co/reference/rest-api/webhooks/events/dialin-warning

The dial-in has a warning

Emitted when the dial-in session encounters an warning.

## Common fields

<ParamField type="string">
  Represents the version of the event. Uses semantic versioning to inform a consumer if the payload has introduced any breaking changes.
</ParamField>

<ParamField type="string">
  Represents the type of the event described in the payload.
</ParamField>

<ParamField type="string">
  An identifier representing this specific event.
</ParamField>

<ParamField type="object">
  An object representing the event, whose fields are described below.
</ParamField>

<ParamField type="number">
  Documenting when the webhook itself was sent. This timestamp is different than the time of the event the webhook describes.
</ParamField>

## Payload

<ParamField type="integer">
  The Unix epoch time in seconds representing when this event occurred.
</ParamField>

<ParamField type="string">
  The sessionId of the dial-in session.
</ParamField>

<ParamField type="string">
  ID of the domain corresponding to this dial-in event.
</ParamField>

<ParamField type="string">
  The name of the room where dial-in event occurred.
</ParamField>

<ParamField type="string">
  string describing the warning.
</ParamField>

```json theme={null}
{
  "version": "1.0.0",
  "type": "dialin.warning",
  "id": "2868-dial-in-warn-ff1e7130-7752-4304-9cf4-08d2583a41dc",
  "payload": {
    "domain_id": "04b89420-cf8b-4ea5-a428-02c40b0e2a59",
    "room": "my-dialin-room",
    "timestamp": "1728036639",
    "session_id": "ff1e7130-7752-4304-9cf4-08d2583a41dc",
    "error_msg": "Dialin codec did not match, using fallback."
  },
  "event_ts": 1728036639.433
}
```


# Dial-out Answered
Source: https://docs.daily.co/reference/rest-api/webhooks/events/dialout-answered

The dial-out answered webhook

Emitted when the remote end answered the call.

## Webhook Events

There are five common fields all events share:

## PhoneNumber Dialout Payload

```json theme={null}
{
  "version": "1.0.0",
  "type": "dialout.answered",
  "id": "2868-dial-out-ans-7d208e2a-520b-4a8d-a2c9-3a36dfa0d342",
  "payload": {
    "domain_id": "04b89420-cf8b-4ea5-a428-02c40b0e2a59",
    "room": "my-dialout-room",
    "timestamp": "1728023426",
    "session_id": "7d208e2a-520b-4a8d-a2c9-3a36dfa0d342",
    "destination": "+12098888888",
    "origin": "+13977888822",
    "caller_id": "34b0eb2b-4f6d-41e2-8189-c836e830ffbb"
  },
  "event_ts": 1728023426.552
}
```

## SipUri Dialout Payload

```json theme={null}
{
  "version": "1.0.0",
  "type": "dialout.answered",
  "id": "2868-dial-out-ans-7d208e2a-520b-4a8d-a2c9-3a36dfa0d342",
  "payload": {
    "domain_id": "04b89420-cf8b-4ea5-a428-02c40b0e2a59",
    "room": "my-dialout-room",
    "timestamp": "1728023426",
    "session_id": "7d208e2a-520b-4a8d-a2c9-3a36dfa0d342",
    "destination": "sip:abc@efg.dummy.com",
    "origin": "sip:myroom.0@daily-2358023-app.dapp.signalwire.com",
    "caller_id": "34b0eb2b-4f6d-41e2-8189-c836e830ffbb"
  },
  "event_ts": 1728023426.552
}
```


# Dial-out Connected
Source: https://docs.daily.co/reference/rest-api/webhooks/events/dialout-connected

The dial-out connected webhook

Emitted when the session with the remote end is established, i.e., the initiator will hear the call ringing. These can be activated via [`startDialOut()`](/reference/daily-js/instance-methods/start-dial-out) or via the [REST API](/reference/rest-api/rooms/dial-out/start).

## Webhook Events

There are five common fields all events share:

## PhoneNumber Dialout Payload

```json theme={null}
{
  "version": "1.0.0",
  "type": "dialout.connected",
  "id": "2868-dial-out-con-7d208e2a-520b-4a8d-a2c9-3a36dfa0d342",
  "payload": {
    "domain_id": "04b89420-cf8b-4ea5-a428-02c40b0e2a59",
    "room": "my-dialout-room",
    "timestamp": "1728023426",
    "session_id": "7d208e2a-520b-4a8d-a2c9-3a36dfa0d342",
    "destination": "+12098888888",
    "origin": "+13977888822",
    "caller_id": "34b0eb2b-4f6d-41e2-8189-c836e830ffbb"
  },
  "event_ts": 1728023426.552
}
```

## SipUri Dialout Payload

```json theme={null}
{
  "version": "1.0.0",
  "type": "dialout.connected",
  "id": "2868-dial-out-ans-7d208e2a-520b-4a8d-a2c9-3a36dfa0d342",
  "payload": {
    "domain_id": "04b89420-cf8b-4ea5-a428-02c40b0e2a59",
    "room": "my-dialout-room",
    "timestamp": "1728023426",
    "session_id": "7d208e2a-520b-4a8d-a2c9-3a36dfa0d342",
    "destination": "sip:abc@efg.dummy.com",
    "origin": "sip:myroom.0@daily-2358023-app.dapp.signalwire.com",
    "caller_id": "34b0eb2b-4f6d-41e2-8189-c836e830ffbb"
  },
  "event_ts": 1728023426.552
}
```


# Dial-out error
Source: https://docs.daily.co/reference/rest-api/webhooks/events/dialout-error

The dial-out has an error

Emitted when the dial-out session encounters an error when connecting to a call.

## Common fields

<ParamField type="string">
  Represents the version of the event. Uses semantic versioning to inform a consumer if the payload has introduced any breaking changes.
</ParamField>

<ParamField type="string">
  Represents the type of the event described in the payload.
</ParamField>

<ParamField type="string">
  An identifier representing this specific event.
</ParamField>

<ParamField type="object">
  An object representing the event, whose fields are described below.
</ParamField>

<ParamField type="number">
  Documenting when the webhook itself was sent. This timestamp is different than the time of the event the webhook describes.
</ParamField>

## Payload

<ParamField type="integer">
  The Unix epoch time in seconds representing when this event occurred.
</ParamField>

<ParamField type="string">
  The sessionId of the dial-out session.
</ParamField>

<ParamField type="string">
  The userId of the dial-out session (if supplied during the API call).
</ParamField>

<ParamField type="string">
  ID of the domain for which dial-out has error.
</ParamField>

<ParamField type="string">
  The name of the room where dial-out has error.
</ParamField>

<ParamField type="string">
  message describing the error
</ParamField>

```json theme={null}
{
  "version": "1.0.0",
  "type": "dialout.error",
  "id": "2868-dial-out-err-22b32b65-cd65-42b2-9665-db05ef3e1255",
  "payload": {
    "domain_id": "04b89420-cf8b-4ea5-a428-02c40b0e2a59",
    "room": "my-dialout-room",
    "timestamp": "1728025068",
    "session_id": "22b32b65-cd65-42b2-9665-db05ef3e1255",
    "user_id": null,
    "error_msg": "DialOut failed with error: process error, Channel closed)."
  },
  "event_ts": 1728025068.748
}
```


# Dial-out stopped
Source: https://docs.daily.co/reference/rest-api/webhooks/events/dialout-stopped

The dial-out is stopped

Emitted when the session with the remote party is stopped, typically, by the initiator. These can be activated via [`stopDialOut()`](/reference/daily-js/instance-methods/stop-dial-out) or via the [REST API](/reference/rest-api/rooms/dial-out/stop).

## Webhook Events

There are five common fields all events share:

## PhoneNumber Dialout Payload

```json theme={null}
{
  "version": "1.0.0",
  "type": "dialout.stopped",
  "id": "2868-dial-out-stop-7d208e2a-520b-4a8d-a2c9-3a36dfa0d342",
  "payload": {
    "domain_id": "04b89420-cf8b-4ea5-a428-02c40b0e2a59",
    "room": "my-dialout-room",
    "timestamp": "1728023426",
    "session_id": "7d208e2a-520b-4a8d-a2c9-3a36dfa0d342",
    "destination": "+12098888888",
    "origin": "+13977888822",
    "caller_id": "34b0eb2b-4f6d-41e2-8189-c836e830ffbb"
  },
  "event_ts": 1728023426.552
}
```

## SipUri Dialout Payload

```json theme={null}
{
  "version": "1.0.0",
  "type": "dialout.stopped",
  "id": "2868-dial-out-ans-7d208e2a-520b-4a8d-a2c9-3a36dfa0d342",
  "payload": {
    "domain_id": "04b89420-cf8b-4ea5-a428-02c40b0e2a59",
    "room": "my-dialout-room",
    "timestamp": "1728023426",
    "session_id": "7d208e2a-520b-4a8d-a2c9-3a36dfa0d342",
    "destination": "sip:abc@efg.dummy.com",
    "origin": "sip:myroom.0@daily-2358023-app.dapp.signalwire.com",
    "caller_id": "34b0eb2b-4f6d-41e2-8189-c836e830ffbb"
  },
  "event_ts": 1728023426.552
}
```


# Dial-out warning
Source: https://docs.daily.co/reference/rest-api/webhooks/events/dialout-warning

The dial-out session has warning

Emitted when the dial-out session has warning.

## Common fields

<ParamField type="string">
  Represents the version of the event. Uses semantic versioning to inform a consumer if the payload has introduced any breaking changes.
</ParamField>

<ParamField type="string">
  Represents the type of the event described in the payload.
</ParamField>

<ParamField type="string">
  An identifier representing this specific event.
</ParamField>

<ParamField type="object">
  An object representing the event, whose fields are described below.
</ParamField>

<ParamField type="number">
  Documenting when the webhook itself was sent. This timestamp is different than the time of the event the webhook describes.
</ParamField>

## Payload

<ParamField type="integer">
  The Unix epoch time in seconds representing when this event occurred.
</ParamField>

<ParamField type="string">
  The sessionId of the dial-out session.
</ParamField>

<ParamField type="string">
  The userId of the dial-out session (if supplied during the API call).
</ParamField>

<ParamField type="string">
  ID of the domain for which dial-out event occurred.
</ParamField>

<ParamField type="string">
  The name of the room where dial-out event occurred.
</ParamField>

<ParamField type="string">
  phoneNumber (E.194 format) or the sipUri (begins with sip:) being called.
</ParamField>

<ParamField type="string">
  callerId used for the dial-out
</ParamField>

```json theme={null}
{
  "version": "1.0.0",
  "type": "dialout.warning",
  "id": "2868-dial-out-warn-7d208e2a-520b-4a8d-a2c9-3a36dfa0d342",
  "payload": {
    "domain_id": "04b89420-cf8b-4ea5-a428-02c40b0e2a59",
    "room": "my-dialout-room",
    "timestamp": "1728023426",
    "session_id": "7d208e2a-520b-4a8d-a2c9-3a36dfa0d342",
    "destination": "+12098888888",
    "caller_id": "34b0eb2b-4f6d-41e2-8189-c836e830ffbb"
  },
  "event_ts": 1728023426.552
}
```


# Webhook Events
Source: https://docs.daily.co/reference/rest-api/webhooks/events/index

Daily Webhooks allow you to subscribe to a set of events in an asynchronous way

<Badge>Paid plans only</Badge>

<Note>
  Head to our **[webhooks page](/reference/rest-api/webhooks)** for detailed information on using webhooks.
</Note>

We provide several webhook events that you can subscribe to.

* [`meeting.started`](/reference/rest-api/webhooks/events/meeting-started)
* [`meeting.ended`](/reference/rest-api/webhooks/events/meeting-ended)
* [`participant.joined`](/reference/rest-api/webhooks/events/participant-joined)
* [`participant.left`](/reference/rest-api/webhooks/events/participant-left)
* [`waiting-participant.joined`](/reference/rest-api/webhooks/events/waiting-participant-joined)
* [`waiting-participant.left`](/reference/rest-api/webhooks/events/waiting-participant-left)
* [`recording.started`](/reference/rest-api/webhooks/events/recording-started)
* [`recording.ready-to-download`](/reference/rest-api/webhooks/events/recording-ready-to-download)
* [`recording.error`](/reference/rest-api/webhooks/events/recording-error)
* [`transcript.started`](/reference/rest-api/webhooks/events/transcript-started)
* [`transcript.ready-to-download`](/reference/rest-api/webhooks/events/transcript-ready-to-download)
* [`transcript.error`](/reference/rest-api/webhooks/events/transcript-error)
* [`streaming.started`](/reference/rest-api/webhooks/events/streaming-started)
* [`streaming.updated`](/reference/rest-api/webhooks/events/streaming-updated)
* [`streaming.ended`](/reference/rest-api/webhooks/events/streaming-ended)
* [`streaming.error`](/reference/rest-api/webhooks/events/streaming-error)
* [`batch-processor.job-finished`](/reference/rest-api/webhooks/events/batch-processor-job-finished)
* [`batch-processor.error`](/reference/rest-api/webhooks/events/batch-processor-error)
* [`dialout.connected`](/reference/rest-api/webhooks/events/dialout-connected)
* [`dialout.answered`](/reference/rest-api/webhooks/events/dialout-answered)
* [`dialout.stopped`](/reference/rest-api/webhooks/events/dialout-stopped)
* [`dialout.warning`](/reference/rest-api/webhooks/events/dialout-warning)
* [`dialout.error`](/reference/rest-api/webhooks/events/dialout-error)
* [`dialin.ready`](/reference/rest-api/webhooks/events/dialin-ready)
* [`dialin.connected`](/reference/rest-api/webhooks/events/dialin-connected)
* [`dialin.stopped`](/reference/rest-api/webhooks/events/dialin-stopped)
* [`dialin.warning`](/reference/rest-api/webhooks/events/dialin-warning)
* [`dialin.error`](/reference/rest-api/webhooks/events/dialin-error)
* [`calltransfer.triggered`](/reference/rest-api/webhooks/events/calltransfer-triggered)
* [`calltransfer.initiated`](/reference/rest-api/webhooks/events/calltransfer-initiated)
* [`calltransfer.answered`](/reference/rest-api/webhooks/events/calltransfer-answered)
* [`calltransfer.completed`](/reference/rest-api/webhooks/events/calltransfer-completed)


# Meeting Ended
Source: https://docs.daily.co/reference/rest-api/webhooks/events/meeting-ended

The meeting ended webhook event

A meeting ended event is emitted when the last participant in a call leaves. There can be a delay up to 20 seconds to determine if the meeting has ended, permitting reconnections, before sending the event.

## Common fields

<ParamField type="string">
  Represents the version of the event. Uses semantic versioning to inform a consumer if the payload has introduced any breaking changes.
</ParamField>

<ParamField type="string">
  Represents the type of the event described in the payload.
</ParamField>

<ParamField type="string">
  An identifier representing this specific event.
</ParamField>

<ParamField type="object">
  An object representing the event, whose fields are described below.
</ParamField>

<ParamField type="number">
  Documenting when the webhook itself was sent. This timestamp is different than the time of the event the webhook describes.
</ParamField>

## Payload

<ParamField type="number">
  The Unix epoch time in seconds representing when the meeting started.
</ParamField>

<ParamField type="number">
  The Unix epoch time in seconds representing when the meeting ended.
</ParamField>

<ParamField type="string">
  The meeting ID.
</ParamField>

<ParamField type="string">
  The name of the room.
</ParamField>

```json theme={null}
{
  "version": "1.0.0",
  "type": "meeting.ended",
  "id": "met-end-f2aa1ade-ff80-464c-b46e-50ffa577d48d-1708526104",
  "payload": {
    "start_ts": 1708526032,
    "end_ts": 1708526104.671,
    "meeting_id": "f2aa1ade-ff80-464c-b46e-50ffa577d48d",
    "room": "TrPmUX1DzjSwDaAFDfNj"
  },
  "event_ts": 1708526125.197
}
```


# Meeting Started
Source: https://docs.daily.co/reference/rest-api/webhooks/events/meeting-started

The meeting started webhook event

A meeting started event emits when Daily begins a call. This occurs when a participant first joins a room.

## Common fields

<ParamField type="string">
  Represents the version of the event. Uses semantic versioning to inform a consumer if the payload has introduced any breaking changes.
</ParamField>

<ParamField type="string">
  Represents the type of the event described in the payload.
</ParamField>

<ParamField type="string">
  An identifier representing this specific event.
</ParamField>

<ParamField type="object">
  An object representing the event, whose fields are described below.
</ParamField>

<ParamField type="number">
  Documenting when the webhook itself was sent. This timestamp is different than the time of the event the webhook describes.
</ParamField>

## Payload

<ParamField type="number">
  The Unix epoch time in seconds representing when meeting started.
</ParamField>

<ParamField type="string">
  The meeting ID.
</ParamField>

<ParamField type="string">
  The name of the room.
</ParamField>

```json theme={null}
{
  "version": "1.0.0",
  "type": "meeting.started",
  "id": "met-sta-f2aa1ade-ff80-464c-b46e-50ffa577d48d-1708526032",
  "payload": {
    "start_ts": 1708526032.672,
    "meeting_id": "f2aa1ade-ff80-464c-b46e-50ffa577d48d",
    "room": "TrPmUX1DzjSwDaAFDfNj"
  },
  "event_ts": 1708526033.049
}
```


# Participant Joined
Source: https://docs.daily.co/reference/rest-api/webhooks/events/participant-joined

The participant joined webhook event

A participant joined event is sent when a participant joins a meeting.

## Common fields

<ParamField type="string">
  Represents the version of the event. Uses semantic versioning to inform a consumer if the payload has introduced any breaking changes.
</ParamField>

<ParamField type="string">
  Represents the type of the event described in the payload.
</ParamField>

<ParamField type="string">
  An identifier representing this specific event.
</ParamField>

<ParamField type="object">
  An object representing the event, whose fields are described below.
</ParamField>

<ParamField type="number">
  Documenting when the webhook itself was sent. This timestamp is different than the time of the event the webhook describes.
</ParamField>

## Payload

<ParamField type="number">
  The Unix epoch time in seconds representing when the participant joined.
</ParamField>

<ParamField type="string">
  The user session ID, or participant id.
</ParamField>

<ParamField type="string">
  The name of the room.
</ParamField>

<ParamField type="string">
  The ID of the user, set by the meeting token.
</ParamField>

<ParamField type="string">
  The name of the user, set by the meeting token.
</ParamField>

<ParamField type="boolean">
  A flag determining if this user is considered the owner.
</ParamField>

<ParamField type="string">
  The quality of the user's network.
</ParamField>

<ParamField type="number">
  The Unix epoch time in seconds representing when the participant will be ejected.
</ParamField>

<ParamField type="object">
  The permissions object, that describes what the participant is permitted to do during this call.
</ParamField>

```json theme={null}
{
  "version": "1.0.0",
  "type": "participant.joined",
  "id": "ptcpt-join-6497c79b-f326-4942-aef8-c36a29140ad1-1708972279961",
  "payload": {
    "room": "test",
    "user_id": "6497c79b-f326-4942-aef8-c36a29140ad1",
    "user_name": "testuser",
    "session_id": "0c0d2dda-f21d-4cf9-ab56-86bf3c407ffa",
    "joined_at": 1708972279.96,
    "will_eject_at": 1708972299.541,
    "owner": false,
    "permissions": {
      "hasPresence": true,
      "canSend": true,
      "canReceive": { "base": true },
      "canAdmin": false
    }
  },
  "event_ts": 1708972279.961
}
```


# Participant Left
Source: https://docs.daily.co/reference/rest-api/webhooks/events/participant-left

The participant left webhook event

A participant left event is sent when a participant leaves a meeting.

## Common fields

<ParamField type="string">
  Represents the version of the event. Uses semantic versioning to inform a consumer if the payload has introduced any breaking changes.
</ParamField>

<ParamField type="string">
  Represents the type of the event described in the payload.
</ParamField>

<ParamField type="string">
  An identifier representing this specific event.
</ParamField>

<ParamField type="object">
  An object representing the event, whose fields are described below.
</ParamField>

<ParamField type="number">
  Documenting when the webhook itself was sent. This timestamp is different than the time of the event the webhook describes.
</ParamField>

## Payload

<ParamField type="number">
  The Unix epoch time in seconds representing when the participant joined.
</ParamField>

<ParamField type="number">
  The time in seconds representing how long the participant was in the call.
</ParamField>

<ParamField type="string">
  The user session ID, or participant id.
</ParamField>

<ParamField type="string">
  The name of the room.
</ParamField>

<ParamField type="string">
  The ID of the user, set by the meeting token.
</ParamField>

<ParamField type="string">
  The name of the user, set by the meeting token.
</ParamField>

<ParamField type="boolean">
  A flag determining if this user is considered the owner.
</ParamField>

<ParamField type="string">
  The quality of the user's network.
</ParamField>

<ParamField type="number">
  The Unix epoch time in seconds representing when the participant will be ejected.
</ParamField>

<ParamField type="object">
  The permissions object, that describes what the participant is permitted to do during this call.
</ParamField>

```json theme={null}
{
  "version": "1.0.0",
  "type": "participant.left",
  "id": "ptcpt-left-16168c97-f973-4eae-9642-020fe3fda5db-1708972302986",
  "payload": {
    "room": "test",
    "user_id": "16168c97-f973-4eae-9642-020fe3fda5db",
    "user_name": "bipol",
    "session_id": "0c0d2dda-f21d-4cf9-ab56-86bf3c407ffa",
    "joined_at": 1708972291.567,
    "will_eject_at": null,
    "owner": false,
    "permissions": {
      "hasPresence": true,
      "canSend": true,
      "canReceive": { "base": true },
      "canAdmin": false
    },
    "duration": 11.419000148773193
  },
  "event_ts": 1708972302.986
}
```


# Recording Error
Source: https://docs.daily.co/reference/rest-api/webhooks/events/recording-error

The recording error event

If an error occurs during recording, or before a recording can be started, a `recording.error` event may be emitted. You may still receive a `recording.started` event, or ` recording.ready-to-download` event, depending on when the error was emitted during the recording lifecycle.

## Common fields

<ParamField type="string">
  Represents the version of the event. Uses semantic versioning to inform a consumer if the payload has introduced any breaking changes.
</ParamField>

<ParamField type="string">
  Represents the type of the event described in the payload.
</ParamField>

<ParamField type="string">
  An identifier representing this specific event.
</ParamField>

<ParamField type="object">
  An object representing the event, whose fields are described below.
</ParamField>

<ParamField type="number">
  Documenting when the webhook itself was sent. This timestamp is different than the time of the event the webhook describes.
</ParamField>

## Payload

<ParamField type="string">
  A string describing the event that was emitted.
</ParamField>

<ParamField type="string">
  The error message returned.
</ParamField>

<ParamField type="string">
  The recording instance ID that was passed into the start recording command.
</ParamField>

<ParamField type="string">
  The name of the room where the recording was made.
</ParamField>

<ParamField type="integer">
  The Unix epoch time in seconds representing when the error was emitted.
</ParamField>

```json theme={null}
{
  "version": "1.0.0",
  "type": "recording.error",
  "id": "rec-err-c3df927c-f738-4471-a2b7-066fa7e95a6b-1693402871",
  "payload": {
    "action": "cloud-recording-error",
    "error_msg": "cloud-recording-error: Error fetching STS credentials",
    "instance_id": "c3df927c-f738-4471-a2b7-066fa7e95a6b",
    "room_name": "iM5wNQvwtK4980eP049T",
    "timestamp": "1693402871"
  },
  "event_ts": 1693402871.203
}
```


# Recording Ready to Download
Source: https://docs.daily.co/reference/rest-api/webhooks/events/recording-ready-to-download

The recording ready to download webhook event

A recording ready to download event is sent when a recording enters a `finished` state with a non-zero duration. At this point, a recording will exist in an S3 bucket for download. If an error ocurred during recording, you will also receive a `recording.error` event.

## Common fields

<ParamField type="string">
  Represents the version of the event. Uses semantic versioning to inform a consumer if the payload has introduced any breaking changes.
</ParamField>

<ParamField type="string">
  Represents the type of the event described in the payload.
</ParamField>

<ParamField type="string">
  An identifier representing this specific event.
</ParamField>

<ParamField type="object">
  An object representing the event, whose fields are described below.
</ParamField>

<ParamField type="number">
  Documenting when the webhook itself was sent. This timestamp is different than the time of the event the webhook describes.
</ParamField>

## Payload

<ParamField type="string">
  The type of recording that was generated.
</ParamField>

<ParamField type="string">
  An ID identifying the recording that was generated.
</ParamField>

<ParamField type="string">
  The name of the room where the recording was made.
</ParamField>

<ParamField type="integer">
  The Unix epoch time in seconds representing when the recording started.
</ParamField>

<ParamField type="string">
  The status of the given recording.
</ParamField>

<ParamField type="integer">
  The number of participants on the call that were recorded.
</ParamField>

<ParamField type="integer">
  The duration in seconds of the call.
</ParamField>

<ParamField type="string">
  The location of the recording in the provided S3 bucket.
</ParamField>

<ParamField type="array">
  If the recording is a raw-tracks recording, a tracks field will be provided. If role permissions have been removed, the tracks field may be null.
</ParamField>

```json theme={null}
{
  "version": "1.0.0",
  "type": "recording.ready-to-download",
  "id": "rec-rtd-c3df927c-f738-4471-a2b7-066fa7e95a6b-1692124192",
  "payload": {
    "recording_id": "08fa0b24-9220-44c5-846c-3f116cf8e738",
    "room_name": "Xcm97xRZ08b2dePKb78g",
    "start_ts": 1692124183,
    "status": "finished",
    "max_participants": 1,
    "duration": 9,
    "share_token": "ntDCL5k98Ulq",
    "s3_key": "api-test-1j8fizhzd30c/Xcm97xRZ08b2dePKb78g/1692124183028"
  },
  "event_ts": 1692124192
}
```


# Recording Started
Source: https://docs.daily.co/reference/rest-api/webhooks/events/recording-started

The recording started webhook event

A recording started event emits when Daily begins to record a call. These can be activated via [`startRecording()`](/reference/daily-js/instance-methods/start-recording), via the [REST API](/reference/rest-api/rooms/recordings/start), or within [Prebuilt](/docs/prebuilt).

## Common fields

<ParamField type="string">
  Represents the version of the event. Uses semantic versioning to inform a consumer if the payload has introduced any breaking changes.
</ParamField>

<ParamField type="string">
  Represents the type of the event described in the payload.
</ParamField>

<ParamField type="string">
  An identifier representing this specific event.
</ParamField>

<ParamField type="object">
  An object representing the event, whose fields are described below.
</ParamField>

<ParamField type="number">
  Documenting when the webhook itself was sent. This timestamp is different than the time of the event the webhook describes.
</ParamField>

## Payload

<ParamField type="string">
  An ID identifying the recording that was generated.
</ParamField>

<ParamField type="string">
  A string describing the event that was emitted.
</ParamField>

<ParamField type="object">
  The layout used for the recording.
</ParamField>

<ParamField type="string">
  The participant ID of the user who started the recording.
</ParamField>

<ParamField type="string">
  The recording instance ID that was passed into the start recording command.
</ParamField>

<ParamField type="integer">
  The Unix epoch time in seconds representing when the recording started.
</ParamField>

```json theme={null}
{
  "version": "1.0.0",
  "type": "recording.started",
  "id": "rec-sta-c3df927c-f738-4471-a2b7-066fa7e95a6b-1692124183",
  "payload": {
    "action": "start-cloud-recording",
    "recording_id": "08fa0b24-9220-44c5-846c-3f116cf8e738",
    "layout": {
      "preset": "active-participant"
    },
    "started_by": "0a20567c-9e95-4fa7-aaa3-fb62f5be0449",
    "instance_id": "c3df927c-f738-4471-a2b7-066fa7e95a6b",
    "start_ts": 1692124183
  },
  "event_ts": 1692124183
}
```


# Streaming Ended
Source: https://docs.daily.co/reference/rest-api/webhooks/events/streaming-ended

The streaming ended webhook event

A streaming ended event emits when the call live stream has ended. These can be activated via [`stopLiveStreaming()`](/reference/daily-js/instance-methods/stop-live-streaming) or via the [REST API](/reference/rest-api/rooms/live-streaming/stop).

## Common fields

<ParamField type="string">
  Represents the version of the event. Uses semantic versioning to inform a consumer if the payload has introduced any breaking changes.
</ParamField>

<ParamField type="string">
  Represents the type of the event described in the payload.
</ParamField>

<ParamField type="string">
  An identifier representing this specific event.
</ParamField>

<ParamField type="object">
  An object representing the event, whose fields are described below.
</ParamField>

<ParamField type="number">
  Documenting when the webhook itself was sent. This timestamp is different than the time of the event the webhook describes.
</ParamField>

## Payload

<ParamField type="integer">
  The Unix epoch time in seconds representing when streaming was ended.
</ParamField>

<ParamField type="string">
  The streaming instance ID.
</ParamField>

<ParamField type="string">
  ID of the domain for which streaming was ended.
</ParamField>

```json theme={null}
{
  "version": "1.0.0",
  "type": "streaming.ended",
  "id": "str-end-c3df927c-f738-4471-a2b7-066fa7e95a6b-1692124183",
  "payload": {
    "timestamp": 1692124183,
    "instance_id": "c3df927c-f738-4471-a2b7-066fa7e95a6b",
    "domain_id": "96df0296-b344-4abb-8b78-82df35cc58f4"
  },
  "event_ts": 1692124183
}
```


# Streaming Error
Source: https://docs.daily.co/reference/rest-api/webhooks/events/streaming-error

The streaming error webhook event

A streaming error event emits when an error occurred when starting or during a live stream. You might still receive other streaming events, depending on when the error has occurred during the streaming lifecycle.

## Common fields

<ParamField type="string">
  Represents the version of the event. Uses semantic versioning to inform a consumer if the payload has introduced any breaking changes.
</ParamField>

<ParamField type="string">
  Represents the type of the event described in the payload.
</ParamField>

<ParamField type="string">
  An identifier representing this specific event.
</ParamField>

<ParamField type="object">
  An object representing the event, whose fields are described below.
</ParamField>

<ParamField type="number">
  Documenting when the webhook itself was sent. This timestamp is different than the time of the event the webhook describes.
</ParamField>

## Payload

<ParamField type="integer">
  The Unix epoch time in seconds representing when streaming error occurred.
</ParamField>

<ParamField type="string">
  The streaming instance ID.
</ParamField>

<ParamField type="string">
  The error message returned.
</ParamField>

<ParamField type="string">
  The name of the room where streaming error occurred.
</ParamField>

<ParamField type="string">
  ID of the domain for which streaming error occurred.
</ParamField>

```json theme={null}
{
  "version": "1.0.0",
  "type": "streaming.error",
  "id": "str-err-c3df927c-f738-4471-a2b7-066fa7e95a6b-1692124183",
  "payload": {
    "timestamp": 1692124183,
    "instance_id": "c3df927c-f738-4471-a2b7-066fa7e95a6b",
    "error_message": "rtmp-error: Failed to connect: 'publish' cmd failed: connection closed remotely",
    "room_name": "iM5wNQvwtK4980eP049T",
    "domain_id": "96df0296-b344-4abb-8b78-82df35cc58f4"
  },
  "event_ts": 1692124183
}
```


# Streaming Started
Source: https://docs.daily.co/reference/rest-api/webhooks/events/streaming-started

The streaming started webhook event

A streaming started event emits when Daily begins to stream a call. These can be activated via [`startLiveStreaming()`](/reference/daily-js/instance-methods/start-live-streaming) or via the [REST API](/reference/rest-api/rooms/live-streaming/start).

## Common fields

<ParamField type="string">
  Represents the version of the event. Uses semantic versioning to inform a consumer if the payload has introduced any breaking changes.
</ParamField>

<ParamField type="string">
  Represents the type of the event described in the payload.
</ParamField>

<ParamField type="string">
  An identifier representing this specific event.
</ParamField>

<ParamField type="object">
  An object representing the event, whose fields are described below.
</ParamField>

<ParamField type="number">
  Documenting when the webhook itself was sent. This timestamp is different than the time of the event the webhook describes.
</ParamField>

## Payload

<ParamField type="integer">
  The Unix epoch time in seconds representing when streaming was started.
</ParamField>

<ParamField type="string">
  The streaming instance ID.
</ParamField>

<ParamField type="string">
  ID of the domain for which streaming was started.
</ParamField>

<ParamField type="object">
  The layout used for streaming.
</ParamField>

```json theme={null}
{
  "version": "1.0.0",
  "type": "streaming.started",
  "id": "str-sta-c3df927c-f738-4471-a2b7-066fa7e95a6b-1692124183",
  "payload": {
    "timestamp": 1692124183,
    "instance_id": "c3df927c-f738-4471-a2b7-066fa7e95a6b",
    "domain_id": "96df0296-b344-4abb-8b78-82df35cc58f4",
    "layout": {
      "preset": "active-participant"
    }
  },
  "event_ts": 1692124183
}
```


# Streaming Updated
Source: https://docs.daily.co/reference/rest-api/webhooks/events/streaming-updated

The streaming updated webhook event

A streaming updated event emits when the call live stream was updated. These can be activated via [`updateLiveStreaming()`](/reference/daily-js/instance-methods/update-live-streaming) or via the [REST API](/reference/rest-api/rooms/live-streaming/update).

## Common fields

<ParamField type="string">
  Represents the version of the event. Uses semantic versioning to inform a consumer if the payload has introduced any breaking changes.
</ParamField>

<ParamField type="string">
  Represents the type of the event described in the payload.
</ParamField>

<ParamField type="string">
  An identifier representing this specific event.
</ParamField>

<ParamField type="object">
  An object representing the event, whose fields are described below.
</ParamField>

<ParamField type="number">
  Documenting when the webhook itself was sent. This timestamp is different than the time of the event the webhook describes.
</ParamField>

## Payload

<ParamField type="integer">
  The Unix epoch time in seconds representing when streaming was updated.
</ParamField>

<ParamField type="string">
  The streaming instance ID.
</ParamField>

<ParamField type="string">
  ID of the domain for which streaming was updated.
</ParamField>

<ParamField type="object">
  The layout used for streaming.
</ParamField>

```json theme={null}
{
  "version": "1.0.0",
  "type": "streaming.updated",
  "id": "str-upd-c3df927c-f738-4471-a2b7-066fa7e95a6b-1692124183",
  "payload": {
    "timestamp": 1692124183,
    "instance_id": "c3df927c-f738-4471-a2b7-066fa7e95a6b",
    "domain_id": "96df0296-b344-4abb-8b78-82df35cc58f4",
    "layout": {
      "preset": "active-participant"
    }
  },
  "event_ts": 1692124183
}
```


# Transcript Error
Source: https://docs.daily.co/reference/rest-api/webhooks/events/transcript-error

The transcript error event

If an error occurs during transcript, or before a transcript can be started, a `transcript.error` event may be emitted. You may still receive a `transcript.started` event, or ` transcript.ready-to-download` event, depending on when the error was emitted during the transcript lifecycle.

## Common fields

<ParamField type="string">
  Represents the version of the event. Uses semantic versioning to inform a consumer if the payload has introduced any breaking changes.
</ParamField>

<ParamField type="string">
  Represents the type of the event described in the payload.
</ParamField>

<ParamField type="string">
  An identifier representing this specific event.
</ParamField>

<ParamField type="object">
  An object representing the event, whose fields are described below.
</ParamField>

<ParamField type="number">
  Documenting when the webhook itself was sent. This timestamp is different than the time of the event the webhook describes.
</ParamField>

## Payload

<ParamField type="string">
  The unique identifier for the transcription event.
</ParamField>

<ParamField type="object">
  Additional information related to the transcription event.
</ParamField>

<ParamField type="string">
  The ID of the room where the event occurred.
</ParamField>

<ParamField type="string">
  The name of the room where the event occurred.
</ParamField>

<ParamField type="string">
  The meeting session ID related to the event.
</ParamField>

<ParamField type="integer">
  The maximum number of participants allowed in the transcription session.
</ParamField>

<ParamField type="number">
  The duration of the session in seconds.
</ParamField>

<ParamField type="number">
  The cumulative participant minutes for the transcription session.
</ParamField>

<ParamField type="string">
  The current status of the transcription event.
</ParamField>

<ParamField type="object">
  The output parameters of the transcription event.
</ParamField>

<ParamField type="string">
  The error message associated with the transcription event.
</ParamField>

```json theme={null}
{
  "version": "1.1.0",
  "type": "transcript.error",
  "id": "3431-tra-err-8d5c03f3-cff3-43c7-b112-0f78989f659f",
  "payload": {
    "id": "8d5c03f3-cff3-43c7-b112-0f78989f659f",
    "info": {
      "instanceId": "a1f2f6b7-b1ac-4202-85e5-d446cb6c3d3f",
      "startTs": 1733234933,
      "endTs": 1733234946
    },
    "room_id": "9e3c9e1b-bfbe-4753-b908-fd89cecfd4a7",
    "room_name": "my-room",
    "mtg_session_id": "927be4b9-7f3c-49c4-b53d-5a003e1edf2c",
    "max_participants": 1,
    "duration": 12.955,
    "participant_minutes": 0.1885,
    "status": "t_error",
    "out_params": {
      "s3": {
        "key": "domain/room/1733234933414.vtt",
        "bucket": "domain/example",
        "region": "us-west-2",
        "externalId": "domain",
        "assumeRoleArn": "arn:aws:iam::606325061522:role/BipolCustomRoleForS3"
      }
    },
    "error": "User: arn:aws:sts::---:assumed-role/---/webvtt-upload is not authorized to perform: s3:PutObject on resource: \"arn:aws:s3:::bucet-path/1733234933414.vtt\" because no identity-based policy allows the s3:PutObject action"
  },
  "event_ts": 1733234946.616
}
```


# Transcript Ready to Download
Source: https://docs.daily.co/reference/rest-api/webhooks/events/transcript-ready-to-download

The transcript ready to download webhook event

A transcript ready to download event is sent when a transcript enters a `finished` state with a non-zero duration. At this point, a transcript will exist in an S3 bucket for download. If an error ocurred during transcript, you will also receive a `transcript.error` event.

## Common fields

<ParamField type="string">
  Represents the version of the event. Uses semantic versioning to inform a consumer if the payload has introduced any breaking changes.
</ParamField>

<ParamField type="string">
  Represents the type of the event described in the payload.
</ParamField>

<ParamField type="string">
  An identifier representing this specific event.
</ParamField>

<ParamField type="object">
  An object representing the event, whose fields are described below.
</ParamField>

<ParamField type="number">
  Documenting when the webhook itself was sent. This timestamp is different than the time of the event the webhook describes.
</ParamField>

## Payload

<ParamField type="string">
  The unique identifier for the transcription event.
</ParamField>

<ParamField type="object">
  The output parameters of the transcription event.
</ParamField>

<ParamField type="string">
  The ID of the room where the event occurred.
</ParamField>

<ParamField type="string">
  The name of the room where the event occurred.
</ParamField>

<ParamField type="string">
  The meeting session ID related to the event.
</ParamField>

<ParamField type="number">
  The duration of the session in seconds.
</ParamField>

<ParamField type="number">
  The cumulative participant minutes for the transcription session.
</ParamField>

<ParamField type="string">
  The current status of the transcription event.
</ParamField>

<ParamField type="string">
  The ID of the domain corresponding to this transcription event.
</ParamField>

```json theme={null}
{
  "version": "1.1.0",
  "type": "transcript.ready-to-download",
  "id": "3431-tra-rtd-68f65d4c-a4dc-4179-bbb1-c12432afb924",
  "payload": {
    "id": "68f65d4c-a4dc-4179-bbb1-c12432afb924",
    "out_params": {
      "s3": {
        "key": "domain/room/1733234355482.vtt",
        "bucket": "daily-co-transcription-staging",
        "region": "us-west-2"
      }
    },
    "room_id": "9e3c9e1b-bfbe-4753-b908-fd89cecfd4a7",
    "room_id": "my-transcript-room",
    "mtg_session_id": "a2bc876d-2816-4732-9c87-01e0b8c0b01b",
    "duration": 124.405,
    "participant_minutes": 2.0732333333333335,
    "status": "t_finished",
    "domain_id": "3b5fe6bd-70a6-4d72-9daf-d80b284904f0"
  },
  "event_ts": 1733234480.097
}
```


# Transcript Started
Source: https://docs.daily.co/reference/rest-api/webhooks/events/transcript-started

The transcript started webhook event

A transcript started event emits when Daily begins to transcribe a call. These can be activated via [`startTranscription()`](/reference/daily-js/instance-methods/start-transcription), via the [REST API](/reference/rest-api/rooms/transcription/start), or from within your client.

## Common fields

<ParamField type="string">
  Represents the version of the event. Uses semantic versioning to inform a consumer if the payload has introduced any breaking changes.
</ParamField>

<ParamField type="string">
  Represents the type of the event described in the payload.
</ParamField>

<ParamField type="string">
  An identifier representing this specific event.
</ParamField>

<ParamField type="object">
  An object representing the event, whose fields are described below.
</ParamField>

<ParamField type="number">
  Documenting when the webhook itself was sent. This timestamp is different than the time of the event the webhook describes.
</ParamField>

## Payload

<ParamField type="string">
  The unique identifier for the transcription event.
</ParamField>

<ParamField type="object">
  Additional information related to the transcription event.
</ParamField>

<ParamField type="string">
  The ID of the room where the event occurred.
</ParamField>

<ParamField type="string">
  The name of the room where the event occurred.
</ParamField>

<ParamField type="string">
  The meeting session ID related to the event.
</ParamField>

<ParamField type="integer">
  The maximum number of participants allowed in the transcription session.
</ParamField>

<ParamField type="integer">
  The duration of the session in seconds.
</ParamField>

<ParamField type="integer">
  The cumulative participant minutes for the transcription session.
</ParamField>

<ParamField type="string">
  The current status of the transcription event.
</ParamField>

<ParamField type="object">
  The output parameters of the transcription event.
</ParamField>

```json theme={null}
{
  "version": "1.1.0",
  "type": "transcript.started",
  "id": "3431-tra-sta-68f65d4c-a4dc-4179-bbb1-c12432afb924",
  "payload": {
    "id": "68f65d4c-a4dc-4179-bbb1-c12432afb924",
    "info": {
      "instanceId": "a1f2f6b7-b1ac-4202-85e5-d446cb6c3d3f"
    },
    "room_id": "9e3c9e1b-bfbe-4753-b908-fd89cecfd4a7",
    "room_name": "my-transcript-room",
    "mtg_session_id": "a2bc876d-2816-4732-9c87-01e0b8c0b01b",
    "max_participants": 1,
    "duration": 0,
    "participant_minutes": 0,
    "status": "t_in_progress",
    "out_params": {
      "s3": {
        "key": "domain/room/1733234355482.vtt",
        "bucket": "daily-co-transcription-staging",
        "region": "us-west-2"
      }
    }
  },
  "event_ts": 1733234355.505
}
```


# Waiting Participant Joined
Source: https://docs.daily.co/reference/rest-api/webhooks/events/waiting-participant-joined

The waiting participant joined webhook event

A waiting participant joined event is sent when a knocker (see [blog post](https://www.daily.co/blog/manage-call-permissions-with-dailys-knocking-feature/)) begins to knock. Once a waiting participant is allowed to join the call, a [`participant.joined`](./participant-joined) event is sent. Otherwise, if a participant leaves the knocking state, a [`waiting-participant.left`](./waiting-participant-left) is sent.

## Common fields

<ParamField type="string">
  Represents the version of the event. Uses semantic versioning to inform a consumer if the payload has introduced any breaking changes.
</ParamField>

<ParamField type="string">
  Represents the type of the event described in the payload.
</ParamField>

<ParamField type="string">
  An identifier representing this specific event.
</ParamField>

<ParamField type="object">
  An object representing the event, whose fields are described below.
</ParamField>

<ParamField type="number">
  Documenting when the webhook itself was sent. This timestamp is different than the time of the event the webhook describes.
</ParamField>

## Payload

<ParamField type="number">
  The Unix epoch time in seconds representing when the waiting participant joined.
</ParamField>

<ParamField type="string">
  The user session ID, or participant id.
</ParamField>

<ParamField type="string">
  The name of the room.
</ParamField>

<ParamField type="string">
  The ID of the user, set by the meeting token.
</ParamField>

<ParamField type="string">
  The name of the user, set by the meeting token.
</ParamField>

<ParamField type="boolean">
  A flag determining if this user is considered the owner.
</ParamField>

<ParamField type="string">
  The quality of the user's network.
</ParamField>

<ParamField type="integer">
  The Unix epoch time in seconds representing when the participant will be ejected.
</ParamField>

<ParamField type="object">
  The permissions object, that describes what the participant is permitted to do during this call.
</ParamField>

```json theme={null}
{
  "version": "1.0.0",
  "type": "waiting-participant.joined",
  "id": "1-w-ptcpt-joined-ed25c43f-e763-4f4d-acbd-51c399a616f1",
  "payload": {
    "room": "knocking",
    "user_name": "bipol",
    "session_id": "ed25c43f-e763-4f4d-acbd-51c399a616f1",
    "joined_at": 1719586645.076,
    "will_eject_at": null,
    "owner": false,
    "permissions": {
      "hasPresence": true,
      "canSend": true,
      "canReceive": { "base": true },
      "canAdmin": false
    },
    "duration": 0
  },
  "event_ts": 1719586645.077
}
```


# Waiting Participant Left
Source: https://docs.daily.co/reference/rest-api/webhooks/events/waiting-participant-left

The waiting participant left webhook event

A waiting participant left event is sent when a knocking participant (see [blog post](https://www.daily.co/blog/manage-call-permissions-with-dailys-knocking-feature/)) leaves the knocking state. In other words, when a knocker begins to knock and leaves before being allowed into a room, a `waiting-participant.left` event is sent. If a knocker is allowed into a room and then leaves, a [`participant.left`](./participant-left) event is sent.

## Common fields

<ParamField type="string">
  Represents the version of the event. Uses semantic versioning to inform a consumer if the payload has introduced any breaking changes.
</ParamField>

<ParamField type="string">
  Represents the type of the event described in the payload.
</ParamField>

<ParamField type="string">
  An identifier representing this specific event.
</ParamField>

<ParamField type="object">
  An object representing the event, whose fields are described below.
</ParamField>

<ParamField type="number">
  Documenting when the webhook itself was sent. This timestamp is different than the time of the event the webhook describes.
</ParamField>

## Payload

<ParamField type="number">
  The Unix epoch time in seconds representing when the waiting participant joined.
</ParamField>

<ParamField type="number">
  The time in seconds representing how long the participant was in the call.
</ParamField>

<ParamField type="string">
  The user session ID, or participant id.
</ParamField>

<ParamField type="string">
  The name of the room.
</ParamField>

<ParamField type="string">
  The ID of the user, set by the meeting token.
</ParamField>

<ParamField type="string">
  The name of the user, set by the meeting token.
</ParamField>

<ParamField type="boolean">
  A flag determining if this user is considered the owner.
</ParamField>

<ParamField type="string">
  The quality of the user's network.
</ParamField>

<ParamField type="integer">
  The Unix epoch time in seconds representing when the participant will be ejected.
</ParamField>

<ParamField type="object">
  The permissions object, that describes what the participant is permitted to do during this call.
</ParamField>

```json theme={null}
{
  "version": "1.0.0",
  "type": "waiting-participant.left",
  "id": "1-w-ptcpt-left-c85f48f3-82ec-4648-b39c-edfce7acf062",
  "payload": {
    "room": "knocking",
    "user_name": "bipol",
    "session_id": "c85f48f3-82ec-4648-b39c-edfce7acf062",
    "joined_at": 1719586614.027,
    "will_eject_at": null,
    "owner": false,
    "permissions": {
      "hasPresence": true,
      "canSend": true,
      "canReceive": { "base": true },
      "canAdmin": false
    },
    "duration": 14.403000116348267
  },
  "event_ts": 1719586628.431
}
```


# Get Webhook Config
Source: https://docs.daily.co/reference/rest-api/webhooks/get-webhook

GET /webhooks/{id}
Get info about a webhook



# Webhooks
Source: https://docs.daily.co/reference/rest-api/webhooks/index

Using our REST API, the /webhooks endpoints lets a developer manage a webhook and events.

<Note>
  Add a credit card to your account to unlock access to webhooks.
</Note>

[Webhooks](https://webhooks.fyi/) are a helpful way to receive notifications about events that are occuring in Daily. In order to use webhooks, you'll need to create a web server with an endpoint that Daily can `POST` requests to as they occur. This allows you to track events in a more asynchronous and real-time fashion, instead of polling with API requests.

## Available webhook endpoints

* [Create a webhook](/reference/rest-api/webhooks/create-webhook)
* [Delete a webhook](/reference/rest-api/webhooks/delete-webhook)
* [Get webhooks](/reference/rest-api/webhooks/get-webhook)
* [Get webhook info](/reference/rest-api/webhooks/get-webhook)
* [Update a webhook](/reference/rest-api/webhooks/update-webhook)

## Configuring Webhooks

In order to configure a webhook, you'll need to create a HTTP server. You can use an online service like [webhook.site](https://www.webhook.site) for testing, or test locally using a a service like [ngrok](https://www.ngrok.com).

When an asynchronous event occurs, we'll send a `POST` request to an endpoint you provide containing a request body that details the event. Once you have a server set up with an accompanying endpoint, you can send that to the `POST /webhooks` endpoint to create a webhook. Webhook events are sent for all rooms on your domain.

```bash theme={null}
curl --location --request POST 'https://daily.co/api/v1/webhooks' \
--header 'Authorization: Bearer $TOKEN' \
--header 'Content-Type: text/plain' \
--data-raw '{
    "url": "$WEBHOOK_URL",
    "eventTypes": ["recording.started", "recording.ready-to-download"]
}'
```

Before creating your webhook, we perform a verification check to ensure your endpoint is active and capable of handling webhook events.

We'll send a `POST` request to your webhook endpoint with the following payload:

```json theme={null}
{
  "test": "test"
}
```

If your endpoint returns a 200 status code, we will proceed to create your webhook. The response to the initial creation request will include details of the newly created webhook, such as its ID and event subscriptions.

```json theme={null}
{
  "uuid": "0b4e4c7c-5eaf-46fe-990b-a3752f5684f5",
  "url": "$WEBHOOK_URL",
  "hmac": "NQrSA5z0FkJ44QPrFerW7uCc5kdNLv3l2FDEKDanL1U=",
  "eventTypes": ["recording.started", "recording.ready-to-download"],
  "state": "ACTIVE",
  "failedCount": 0,
  "domainId": "$DOMAIN_ID",
  "createdAt": "2023-08-15T18:28:30.317Z",
  "updatedAt": "2023-08-15T18:28:30.317Z"
}
```

<Warning>
  When creating a webhook via the `POST /webhooks` endpoint, Daily will send a request to the webhook server with a test request body.
  If we do not receive a `200` status code relatively quickly, we will consider the endpoint faulty and return a `400` error.
  It can be helpful to return a response immediately before handling the event to avoid webhook disruptions.
</Warning>

<Warning>
  The webhooks service will return an `hmac` secret that you can use to verify the signature of a webhook.
  You may also pass in an `hmac` during a `create` or `update` request, if you'd like to specify your own secret.
  This secret must be BASE-64 encoded.
</Warning>

At this point, you can use the `uuid` field and the `GET /webhooks/:uuid` endpoint to receive information about your webhook.

```bash theme={null}
curl --location --request GET 'https://daily.co/api/v1/webhooks/0b4e4c7c-5eaf-46fe-990b-a3752f5684f5' \
--header 'Authorization: Bearer $TOKEN'
```

```json theme={null}
{
  "uuid": "0b4e4c7c-5eaf-46fe-990b-a3752f5684f5",
  "url": "$WEBHOOK_URL",
  "hmac": "NQrSA5z0FkJ44QPrFerW7uCc5kdNLv3l2FDEKDanL1U=",
  "basicAuth": null,
  "eventTypes": ["recording.started", "recording.ready-to-download"],
  "state": "ACTIVE",
  "failedCount": 0,
  "lastMomentPushed": "2023-08-15T18:29:52.000Z",
  "domainId": "$DOMAIN_ID",
  "createdAt": "2023-08-15T18:28:30.000Z",
  "updatedAt": "2023-08-15T18:29:52.000Z"
}
```

## Webhook Deliveries

We attempt to deliver events to your webhook endpoints as quickly as we can after events occur. We deliver events roughly, but not strictly, in order. Additionally, in some situations you may receive duplicate event deliveries on your endpoints. You may use the `id` attribute in the body of events as an idempotency key to detect and ignore duplicate deliveries. In case of a duplicate event delivery, your system should return a `200` status code.

In rare cases, a duplicate delivery may carry a different `id` than the original event. For [`participant.joined`](/reference/rest-api/webhooks/events/participant-joined) and [`participant.left`](/reference/rest-api/webhooks/events/participant-left) events, we recommend deduplicating on the event `type` plus the payload's `session_id` instead. A `session_id` is unique to a single join (a participant who leaves and rejoins gets a new one), so a second `participant.joined` or `participant.left` event for the same `session_id` is always a duplicate and can be safely ignored.

## Webhook Structure

### `state`

Webhooks have a `state` field that may either be `"FAILED"` or `"ACTIVE"`.

Your webhook may enter the `FAILED` state if we fail to send an event to your webhook server 3 times. Succesful attempts will reset this counter. We require your webhook server to send a `200` status code relateively quickly, so be sure to respond to the request as soon as you receive it. See `retryType` for an alternative error handling behavior.

If your webhook has entered a failed state, we will no longer send events to that webhook. You can re-activate a webhook by sending a `POST` request to `/webhooks/:uuid`, where `uuid` is your webhook uuid. This will once again send a test message to the endpoint provided, and if a `200` is returned, we will re-activate the webhook.

You may also update the other webhook fields such as `eventTypes` if needed with this endpoint.

### `hmac`

<Warning>
  The `hmac` field contains a secret that is shared between Daily and you.
  Ensure that you do not share this secret publicly, otherwise you will not be
  able to verify that an event came from Daily.
</Warning>

Webhooks provide an `hmac`, which is a BASE-64 encoded HMAC-sha256 secret that allows you to verify that the event in question actually came from Daily. You may also provide your own secret when creating a webhook, as long as it is BASE-64 encoded. When `POST`ing to your webhook server, Daily will provide two headers: `X-Webhook-Signature` and `X-Webhook-Timestamp`.

In order to verify the signature yourself, you'll need to compute the signature in a manner provided in the snippet below:

```javascript theme={null}
// You'll need to save the hmac value the API returned when you created your webhook and insert it here
let hmacSecret = 'NQrSA5z0FkJ44QPrFerW7uCc5kdNLv3l2FDEKDanL1U=';
let signature = headers['X-Webhook-Timestamp'] + '.' + JSON.stringify(event);
const base64DecodedSecret = Buffer.from(hmacSecret, 'base64');
const hmac = crypto.createHmac('sha256', base64DecodedSecret);
let computed_signature = hmac.update(signature).digest('base64');
expect(computed_signature).toStrictEqual(headers['X-Webhook-Signature']);
```

`event` is the response body from the event that was `POST`ed to your webhook server. From there, you can sign the content with the `HMAC-sha256` string, and ensure that your signature matches the one in the `X-Webhook-Signature` header. As only Daily and you hold the `hmac`, this comparison ensures that the request came from Daily.

### `failedCount`

This is incremented every time Daily fails to send an event to the given webhook endpoint. This can happen if your server is not responding quickly enough or if it is returning a non-`200` status code. When this happens 3 times, the webhook will enter the `FAILED` state. If we have a succesful response at any time before this we will reset your `failedCount` to 0. Thus, intermittent failures should not cause the circuit breaker to flip.

### `basicAuth`

You may provide a `basicAuth` field when creating a webhook if you'd like Daily to send an `Authorization` header with a `Basic {secret}` value. This can be checked by your endpoint and used as an additional shared secret to ensure that you are only processing verified events from Daily.

### `retryType`

There are currently two retry type configurations available. `circuit-breaker` is the default. You can pass this field when creating a webhook, or updating a webhook.

#### `circuit-breaker`

This is the default retry type. Every message is treated equally, and is tried at least once. Each failure to your webhook server is counted, and if it ever reaches 3 failures or greater, a circuit breaker is flipped. At this point, Daily will stop attempting to send webhooks to the server. You can close the circuit breaker by sending a `POST` request to `/webhooks/:uuid`, which will attempt to send a request to your server again. If your server resolves correctly, Daily will begin sending events.

#### `exponential`

This retry is message based, instead of the global count that `circuit-breaker` uses. While `failedCount` is still incremented, Daily will never circuit break under this retry type. Each message will be retried at most 5 times, with an exponential backoff up to 15 minutes. If a message fails being sent 5 times, it will be deleted and no longer retried.

## Webhook Events

We provide several webhook events that you can subscribe to. See the [webhook events index](/reference/rest-api/webhooks/events) for more details.

* [`meeting.started`](/reference/rest-api/webhooks/events/meeting-started)
* [`meeting.ended`](/reference/rest-api/webhooks/events/meeting-ended)
* [`participant.joined`](/reference/rest-api/webhooks/events/participant-joined)
* [`participant.left`](/reference/rest-api/webhooks/events/participant-left)
* [`waiting-participant.joined`](/reference/rest-api/webhooks/events/waiting-participant-joined)
* [`waiting-participant.left`](/reference/rest-api/webhooks/events/waiting-participant-left)
* [`recording.started`](/reference/rest-api/webhooks/events/recording-started)
* [`recording.ready-to-download`](/reference/rest-api/webhooks/events/recording-ready-to-download)
* [`recording.error`](/reference/rest-api/webhooks/events/recording-error)
* [`transcript.started`](/reference/rest-api/webhooks/events/transcript-started)
* [`transcript.ready-to-download`](/reference/rest-api/webhooks/events/transcript-ready-to-download)
* [`transcript.error`](/reference/rest-api/webhooks/events/transcript-error)
* [`streaming.started`](/reference/rest-api/webhooks/events/streaming-started)
* [`streaming.updated`](/reference/rest-api/webhooks/events/streaming-updated)
* [`streaming.ended`](/reference/rest-api/webhooks/events/streaming-ended)
* [`streaming.error`](/reference/rest-api/webhooks/events/streaming-error)
* [`batch-processor.job-finished`](/reference/rest-api/webhooks/events/batch-processor-job-finished)
* [`batch-processor.error`](/reference/rest-api/webhooks/events/batch-processor-error)
* [`dialout.connected`](/reference/rest-api/webhooks/events/dialout-connected)
* [`dialout.answered`](/reference/rest-api/webhooks/events/dialout-answered)
* [`dialout.stopped`](/reference/rest-api/webhooks/events/dialout-stopped)
* [`dialout.warning`](/reference/rest-api/webhooks/events/dialout-warning)
* [`dialout.error`](/reference/rest-api/webhooks/events/dialout-error)
* [`dialin.ready`](/reference/rest-api/webhooks/events/dialin-ready)
* [`dialin.connected`](/reference/rest-api/webhooks/events/dialin-connected)
* [`dialin.stopped`](/reference/rest-api/webhooks/events/dialin-stopped)
* [`dialin.warning`](/reference/rest-api/webhooks/events/dialin-warning)
* [`dialin.error`](/reference/rest-api/webhooks/events/dialin-error)
* [`calltransfer.triggered`](/reference/rest-api/webhooks/events/calltransfer-triggered)
* [`calltransfer.initiated`](/reference/rest-api/webhooks/events/calltransfer-initiated)
* [`calltransfer.answered`](/reference/rest-api/webhooks/events/calltransfer-answered)
* [`calltransfer.completed`](/reference/rest-api/webhooks/events/calltransfer-completed)


# Get Webhooks
Source: https://docs.daily.co/reference/rest-api/webhooks/list-webhooks

GET /webhooks
Get Webhooks



# Update Webhook Config
Source: https://docs.daily.co/reference/rest-api/webhooks/update-webhook

POST /webhooks/{id}
Update webhook config