JSFiddle - React, Tailwind, and code Playground

by ShukantPal

HTML

<html lang="en">
  <head>
    <title>Hello React!</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="https://glitch.com/favicon.ico" />
    <script src="https://unpkg.com/@daily-co/[email protected]"></script>
  </head>
  <body>
    <div id="root"></div>
	</body>
 </html>

JavaScript

const MeetingState = {
  Loading: 'loading',
  Loaded: 'loaded',
  LoadAttemptFailed: 'load-attempt-failed',
  StartedCamera: 'started-camera',
  CameraError: 'camera-error',
  JoiningMeeting: 'joining-meeting',
  JoinedMeeting: 'joined-meeting',
  LeftMeeting: 'left-meeting',
  Error: 'error',
}
const ParticipantState = {
  ParticipantJoined: 'participant-joined',
  ParticipantUpdated: 'participant-updated',
  ParticipantLeft: 'participant-left',
  TrackStarted: 'track-started',
  TrackStopped: 'track-stopped',
  LocalScreenShareStarted: 'local-screen-share-started',
  LocalScreenShareStopped: 'local-screen-share-stopped',
  Error: 'error',
}
const ROOM_NAME = "";
// -- Constants
const API_KEY = "e998d81a21e47394d5a8b4c85b8e28dabcb8cbdf111022111bbae900942af8d1";
const ROOM_ALREADY_CREATED = false;

const createRoom = async () => {
  if (ROOM_ALREADY_CREATED) {
    return {
      name: ROOM_NAME,
      url: 'https://huddle.daily.co/' + ROOM_NAME
    }
  }

  const dailyRes = await fetch("https://api.daily.co/v1/rooms", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${API_KEY}`
    },
    body: JSON.stringify({
      name: ROOM_NAME,
      privacy: "public",
      properties: {
        sfu_switchover: 1,
        signaling_impl: 'ws',
      }
    })
  });
  const { name, url, error } = await dailyRes.json();

  return { roomName: name, url, error };
};

const fetchMeetingToken = async () => {
  const options = {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${API_KEY}`
    },
    body: JSON.stringify({
      properties: {
        room_name: ROOM_NAME,
        user_name: 'userOrgId',
        user_id: 'userOrgId',
        is_owner: true,
        start_audio_off: false,
        start_video_off: false,
      }
    })
  };

  const dailyRes = await fetch(
    "https://api.daily.co/v1/meeting-tokens",
    options
  );

  const { token } = await...