index.js

// Helper function prints events to the console
// Will be passed as callback to callFrame event handlers
function showEvent(e) {
  console.log('video call event -->', e);
}

async function createRoom() {
  // This endpoint is using the proxy as outlined in netlify.toml
  // If you prefer to use the Netlify function then update the path below accordingly
  const newRoomEndpoint = `${window.location.origin}/api/rooms`;

  try {
    let response = await fetch(newRoomEndpoint, {
        method: 'POST',
      }),
      room = await response.json();
    return room.url;
  } catch (e) {
    console.error(e);
  }

  // Comment out the above and uncomment the below, using your own URL
  // if you prefer to test with a hardcoded room
  // return { url: "https://your-domain.daily.co/hello" };
}

async function run() {
  // we're assuming an incoming url from the chrome extension
  // in the following format:
  // https://some-netlify-url.com/?room=https://mysubdomain.daily.co/roomname&screenshare=true
  const params = new URLSearchParams(window.location.search);
  const room = params.get('room') || (await createRoom());
  const shareScreenOnJoin = params.get('screenshare');

  // Create the DailyIframe, passing styling properties to make it fullscreen
  window.callFrame = window.DailyIframe.createFrame({
    iframeStyle: {
      position: 'fixed',
      border: 0,
      top: 0,
      left: 0,
      width: '100%',
      height: '100%',
    },
  });

  function doAfterJoin(e) {
    showEvent(e);

    //update query param so url is shareable
    const url = new URL(window.location);
    url.searchParams.set('room', room);
    window.history.pushState({}, '', url);

    if (shareScreenOnJoin) {
      callFrame.startScreenShare();
    }
  }

  // Install event handlers
  callFrame
    .on('loading', showEvent)
    .on('loaded', showEvent)
    .on('started-camera', showEvent)
    .on('camera-error', showEvent)
    .on('joining-meeting', showEvent)
    .on('joined-meeting', doAfterJoin)
    .on('participant-joined', showEvent)
    .on('participant-updated', showEvent)
    .on('participant-left', showEvent)
    .on('recording-started', showEvent)
    .on('recording-stopped', showEvent)
    .on('recording-stats', showEvent)
    .on('recording-error', showEvent)
    .on('recording-upload-completed', showEvent)
    .on('app-message', showEvent)
    .on('input-event', showEvent)
    .on('error', showEvent)
    // Add a leave handler to clean things up
    .on('left-meeting', leave);

  // Join the room
  await callFrame.join({
    url: room,
    showLeaveButton: true,
  });

  // Leave handler
  function leave(e) {
    showEvent(e);
    callFrame.destroy();
    document.getElementsByClassName('start-button')[0].style.display =
      'initial';
  }

  // Once a call starts running, hide the start button and prompts
  document.getElementsByClassName('start-button')[0].style.display = 'none';

  // Log information about the call to the console
  console.log(
    ' You are connected to',
    callFrame.properties.url,
    '\n',
    'Use the window.callFrame object to experiment with',
    '\n',
    'controlling this call. For example, in the console',
    '\n',
    'try',
    '\n',
    '    callFrame.participants()',
    '\n',
    '    callFrame.setLocalVideo(false)',
    '\n',
    '    callFrame.startScreenShare()'
  );
}