Quickstart

You need a Daily account and a room URL to complete this guide. Create a free account at daily.co and create a room from the dashboard to get a URL in the format https://your-domain.daily.co/room-name.

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.

Iframe mode (Prebuilt UI)
Call object mode (Custom UI)

Install the package

Add @daily-co/daily-js to your project:

npm install @daily-co/daily-js

yarn add @daily-co/daily-js

pnpm add @daily-co/daily-js

Create a call frame

Import DailyIframe and call createFrame(). This creates an <iframe> element and appends it to document.body by default.

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:

const container = document.getElementById('call-container');
const callFrame = Daily.createFrame(container);

You can also pass style options:

const callFrame = Daily.createFrame({
  iframeStyle: {
    position: 'fixed',
    width: '100%',
    height: '100%',
    top: 0,
    left: 0,
    border: 0,
  },
});

Join a room

Call join() with your room URL. This returns a promise that resolves once you have entered the meeting.

await callFrame.join({ url: 'https://your-domain.daily.co/room-name' });

Listen for events

Subscribe to call events using .on(). The joined-meeting event fires once you are connected and includes the current participants.

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);
  });

Leave the call

Call leave() to disconnect. Optionally call destroy() afterward to remove the iframe from the DOM and clean up all event listeners.

await callFrame.leave();

// Optionally remove the iframe entirely:
await callFrame.destroy();

Install the package

Add @daily-co/daily-js to your project:

npm install @daily-co/daily-js

yarn add @daily-co/daily-js

pnpm add @daily-co/daily-js

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.

import Daily from '@daily-co/daily-js';

const call = Daily.createCallObject();

You can pass options at construction time:

const call = Daily.createCallObject({
  startVideoOff: true,
  startAudioOff: false,
});

Join a room

Call join() with your room URL:

await call.join({ url: 'https://your-domain.daily.co/room-name' });

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.

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);
  });

Leave the call

await call.leave();

// Optionally destroy the instance when you're fully done with it:
await call.destroy();

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.

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();
});

<!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>

#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;
}

Next steps

Installation

All install methods: npm, yarn, pnpm, and CDN script tag

Call modes

Deep-dive into iframe vs. call object mode trade-offs

Events reference

Full list of events and their payloads

API reference

Complete method and property reference

Getting Started

Core Concepts

Guides

Features

Choose your integration mode

Complete example

Next steps

Installation

Call modes

Events reference

API reference

​Choose your integration mode

​Complete example

​Next steps

Installation

Call modes

Events reference

API reference

Choose your integration mode

Complete example

Next steps