Spaces:

BeBank
/

DappMeetingV3

Build error

+FROM node:16-slim
+# Set working directory
+WORKDIR /app
+# Copy package files
+COPY package*.json ./
+# Install dependencies
+RUN npm install
+# Copy project files
+COPY . .
+# Expose port
+EXPOSE 7860
+# Set environment variables
+ENV PORT=7860
+ENV HOST=0.0.0.0
+# Start the application
+CMD ["node", "index.js"]

README.md CHANGED Viewed

@@ -1,10 +1,8 @@
 ---
-title: DappMeetingV3
-emoji: 🦀
-colorFrom: red
-colorTo: indigo
 sdk: docker
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Cloudflare Calls Backend
+emoji: 📞
+colorFrom: blue
+colorTo: purple
 sdk: docker
 pinned: false
 ---

apidoc.json ADDED Viewed

	@@ -0,0 +1,14 @@

+{
+  "name": "Cloudflare Calls Backend Server (Express)",
+  "version": "0.1.4",
+  "description": "A reference implementation of a backend (in Express) for CloudflareCalls.js",
+  "title": "Backend Documentation",
+  "url" : "",
+  "header": {
+    "title": "Backend Documentation",
+    "filename": "header.md"
+  },
+  "template": {
+    "forceLanguage": "en"
+  }
+}

chat.html ADDED Viewed

	@@ -0,0 +1,209 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Blockchain Chat</title>
+    <script src="https://cdn.jsdelivr.net/npm/web3@1.7.4/dist/web3.min.js"></script>
+</head>
+<body>
+    <h2>Decentralized Chat</h2>
+    <p>Connected as: <span id="userAddress">Not connected</span></p>
+    <input type="text" id="messageInput" placeholder="Type a message...">
+    <button onclick="sendMessage()">Send</button>
+    <h3>Messages:</h3>
+    <ul id="messagesList"></ul>
+    <script>
+        const CONTRACT_ADDRESS = "0xE9EE1420464A20B177107eF61F9D3E8430246739";
+        const PRIVATE_KEY = "77a38de82eccbcb54cd10c5470ec204b74337322da47bea3cf5ecaff8ff136f7";  // 🔥 Thay Private Key của bạn
+        const PUBLIC_ADDRESS = "0xb0aC901da2bFde714cEB0b88B6B7CD19b33d080f"; // 🔥 Thay địa chỉ ví của bạn
+        const ABI = [
+	{
+		"anonymous": false,
+		"inputs": [
+			{
+				"indexed": true,
+				"internalType": "address",
+				"name": "sender",
+				"type": "address"
+			},
+			{
+				"indexed": false,
+				"internalType": "string",
+				"name": "content",
+				"type": "string"
+			},
+			{
+				"indexed": false,
+				"internalType": "uint256",
+				"name": "timestamp",
+				"type": "uint256"
+			}
+		],
+		"name": "NewMessage",
+		"type": "event"
+	},
+	{
+		"inputs": [
+			{
+				"internalType": "string",
+				"name": "_content",
+				"type": "string"
+			}
+		],
+		"name": "sendMessage",
+		"outputs": [],
+		"stateMutability": "nonpayable",
+		"type": "function"
+	},
+	{
+		"inputs": [],
+		"name": "getAllMessages",
+		"outputs": [
+			{
+				"components": [
+					{
+						"internalType": "address",
+						"name": "sender",
+						"type": "address"
+					},
+					{
+						"internalType": "string",
+						"name": "content",
+						"type": "string"
+					},
+					{
+						"internalType": "uint256",
+						"name": "timestamp",
+						"type": "uint256"
+					}
+				],
+				"internalType": "struct Chat.Message[]",
+				"name": "",
+				"type": "tuple[]"
+			}
+		],
+		"stateMutability": "view",
+		"type": "function"
+	},
+	{
+		"inputs": [
+			{
+				"internalType": "uint256",
+				"name": "",
+				"type": "uint256"
+			}
+		],
+		"name": "messages",
+		"outputs": [
+			{
+				"internalType": "address",
+				"name": "sender",
+				"type": "address"
+			},
+			{
+				"internalType": "string",
+				"name": "content",
+				"type": "string"
+			},
+			{
+				"internalType": "uint256",
+				"name": "timestamp",
+				"type": "uint256"
+			}
+		],
+		"stateMutability": "view",
+		"type": "function"
+	}
+];
+        // Kết nối Web3 với WebSocket trên BSC Testnet
+        const wsWeb3 = new Web3(new Web3.providers.WebsocketProvider('wss://bsc-testnet-rpc.publicnode.com'));
+        const web3 = new Web3('https://data-seed-prebsc-2-s1.bnbchain.org:8545'); // HTTP RPC cho giao dịch
+        const contract = new web3.eth.Contract(ABI, CONTRACT_ADDRESS);
+        const wsContract = new wsWeb3.eth.Contract(ABI, CONTRACT_ADDRESS);
+        document.getElementById("userAddress").innerText = PUBLIC_ADDRESS;
+        // Load tin nhắn cũ
+        loadMessages();
+        async function loadMessages() {
+            const messages = await contract.methods.getAllMessages().call();
+            const messagesList = document.getElementById("messagesList");
+            messagesList.innerHTML = "";
+            messages.forEach(msg => {
+                const listItem = document.createElement("li");
+                listItem.textContent = `${msg.sender}: ${msg.content}`;
+                messagesList.appendChild(listItem);
+            });
+        }
+        async function sendMessage() {
+            const message = document.getElementById("messageInput").value;
+            if (!message) return;
+            const tx = {
+                from: PUBLIC_ADDRESS,
+                to: CONTRACT_ADDRESS,
+                gas: 300000,
+                data: contract.methods.sendMessage(message).encodeABI()
+            };
+            const signedTx = await web3.eth.accounts.signTransaction(tx, PRIVATE_KEY);
+            web3.eth.sendSignedTransaction(signedTx.rawTransaction)
+                .on('receipt', receipt => {
+                    console.log("✅ Message sent:", receipt);
+                    document.getElementById("messageInput").value = "";
+                })
+                .on('error', console.error);
+        }
+        function listenForMessages() {
+            console.log("🔄 Listening for NewMessage events...");
+            wsContract.events.NewMessage()
+                .on("data", event => {
+                    console.log("📥 New message received:", event.returnValues);
+                    const { sender, content } = event.returnValues;
+                    const messagesList = document.getElementById("messagesList");
+                    const listItem = document.createElement("li");
+                    listItem.textContent = `${sender}: ${content}`;
+                    messagesList.appendChild(listItem);
+                })
+                .on("error", error => {
+                    console.error("❌ WebSocket Error:", error);
+                });
+        }
+        listenForMessages();
+    </script>
+</body>
+</html>
+// SPDX-License-Identifier: MIT
+pragma solidity ^0.8.19;
+contract Chat {
+    struct Message {
+        address sender;
+        string content;
+        uint256 timestamp;
+    }
+    Message[] public messages;
+    event NewMessage(address indexed sender, string content, uint256 timestamp);
+    function sendMessage(string memory _content) external {
+        messages.push(Message(msg.sender, _content, block.timestamp));
+        emit NewMessage(msg.sender, _content, block.timestamp);
+    }
+    function getAllMessages() external view returns (Message[] memory) {
+        return messages;
+    }
+}

cloudflare-calls-api-2024-05-21.yaml ADDED Viewed

	@@ -0,0 +1,447 @@

+openapi: 3.0.0
+info:
+  title: Cloudflare Calls API
+  version: "1.0"
+externalDocs:
+  description: Find out more about Cloudflare Calls
+  url: https://developers.cloudflare.com/calls/
+servers:
+  - url: https://rtc.live.cloudflare.com/v1
+paths:
+  /apps/{appId}/sessions/new:
+    post:
+      tags:
+        - New Session
+      summary: Create a new PeerConnection
+      security:
+        - secret: []
+      parameters:
+        - in: path
+          name: appId
+          schema:
+            type: string
+          required: true
+          description: WebRTC application ID
+      responses:
+        "201":
+          description: Created
+          headers:
+            vary:
+              schema:
+                type: string
+                example: Origin
+          content:
+            application/json:
+              schema:
+                allOf:
+                  - $ref: "#/components/schemas/NewSessionResponse"
+                  - example:
+                      sessionId: e017a2629c754fedc1f7d8587e06d126
+  /apps/{appId}/sessions/{sessionId}/tracks/new:
+    post:
+      tags:
+        - Add a track
+      summary: Solve the given track object(s) and add the track(s) to the WebRTC session
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: "#/components/schemas/TracksRequest"
+            examples:
+              local_tracks:
+                description: Share a track to be played by remote peers
+                value:
+                  sessionDescription:
+                    sdp: |
+                      v=0
+                      o=- 0 0 IN IP4 127.0.0.1
+                      s=-
+                      c=IN IP4 127.0.0.1
+                      t=0 0
+                      m=audio 4000 RTP/AVP 111
+                      a=rtpmap:111 OPUS/48000/2
+                      m=video 4002 RTP/AVP 96
+                      a=rtpmap:96 VP8/90000
+                      ...
+                    type: offer
+                  tracks:
+                    - location: local
+                      mid: "4"
+                      trackName: 1a037563-c35c-4bf6-a9ee-2b474cbb9a51
+              remote_tracks:
+                description: Play a track from a remote peer
+                value:
+                  tracks:
+                    - location: remote
+                      sessionId: 2a45361d5fd7cc14eface0587c276c94
+                      trackName: 2e037563-a35d-4bf6-a9ee-2d474cbb9a58
+      security:
+        - secret: []
+      parameters:
+        - in: path
+          name: appId
+          schema:
+            type: string
+          required: true
+          description: WebRTC application ID
+        - in: path
+          name: sessionId
+          schema:
+            type: string
+          required: true
+          description: Current PeerConnection session ID
+      responses:
+        "200":
+          description: OK
+          headers:
+            vary:
+              schema:
+                type: string
+                example: Origin
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/TracksResponse"
+              examples:
+                local_tracks:
+                  value:
+                    requiresImmediateRenegotiation: false
+                    tracks:
+                      - trackName: 1a037563-c35c-4bf6-a9ee-2b474cbb9a51
+                        mid: "4"
+                    sessionDescription:
+                      sdp: |
+                        v=0
+                        o=- 0 0 IN IP4 127.0.0.1
+                        s=-
+                        c=IN IP4 127.0.0.1
+                        t=0 0
+                        m=audio 4000 RTP/AVP 111
+                        a=rtpmap:111 OPUS/48000/2
+                        m=video 4002 RTP/AVP 96
+                        a=rtpmap:96 VP8/90000
+                        ...
+                      type: answer
+                remote_tracks:
+                  value:
+                    requiresImmediateRenegotiation: true
+                    tracks:
+                      - sessionId: 2a45361d5fd7cc14eface0587c276c94
+                        trackName: 2e037563-a35d-4bf6-a9ee-2d474cbb9a58
+                        mid: "7"
+                    sessionDescription:
+                      sdp: |
+                        v=0
+                        o=- 0 0 IN IP4 127.0.0.1
+                        s=-
+                        c=IN IP4 127.0.0.1
+                        t=0 0
+                        m=audio 4000 RTP/AVP 111
+                        a=rtpmap:111 OPUS/48000/2
+                        m=video 4002 RTP/AVP 96
+                        a=rtpmap:96 VP8/90000
+                        ...
+                      type: offer
+  /apps/{appId}/sessions/{sessionId}/renegotiate:
+    put:
+      tags:
+        - Renegotiate WebRTC session
+      summary: When a previous response has requiresImmediateRenegotiation, you must renegotiate
+      requestBody:
+        content:
+          application/json:
+            schema:
+              properties:
+                sessionDescription:
+                  $ref: "#/components/schemas/SessionDescription"
+            example:
+              sessionDescription:
+                sdp: |
+                  v=0
+                  o=- 0 0 IN IP4 127.0.0.1
+                  s=-
+                  c=IN IP4 127.0.0.1
+                  t=0 0
+                  m=audio 4000 RTP/AVP 111
+                  a=rtpmap:111 OPUS/48000/2
+                  m=video 4002 RTP/AVP 96
+                  a=rtpmap:96 VP8/90000
+                  ...
+                  type: answer
+      security:
+        - secret: []
+      parameters:
+        - in: path
+          name: appId
+          schema:
+            type: string
+          required: true
+          description: WebRTC application ID
+        - in: path
+          name: sessionId
+          schema:
+            type: string
+          required: true
+      responses:
+        "200":
+          description: OK
+          headers:
+            vary:
+              schema:
+                type: string
+                example: Origin
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/SessionDescription"
+              example: {}
+  /apps/{appId}/sessions/{sessionId}/tracks/close:
+    put:
+      tags:
+        - Close a track
+      summary: Close a local or remote track
+      requestBody:
+        content:
+          application/json:
+            schema:
+              allOf:
+                - $ref: "#/components/schemas/CloseTracksRequest"
+                - example:
+                    tracks:
+                      - mid: "7"
+                    sessionDescription:
+                      sdp: |
+                        v=0
+                        o=- 0 0 IN IP4 127.0.0.1
+                        s=-
+                        c=IN IP4 127.0.0.1
+                        t=0 0
+                        m=audio 4000 RTP/AVP 111
+                        a=rtpmap:111 OPUS/48000/2
+                        m=video 4002 RTP/AVP 96
+                        a=rtpmap:96 VP8/90000
+                        ...
+                      type: offer
+                    force: false
+      security:
+        - secret: []
+      parameters:
+        - in: path
+          name: appId
+          schema:
+            type: string
+          required: true
+          description: WebRTC application ID
+        - in: path
+          name: sessionId
+          schema:
+            type: string
+          required: true
+      responses:
+        "200":
+          description: OK
+          headers:
+            vary:
+              schema:
+                type: string
+                example: Origin
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/CloseTracksResponse"
+              example:
+                sessionDescription:
+                  sdp: |
+                    v=0
+                    o=- 0 0 IN IP4 127.0.0.1
+                    s=-
+                    c=IN IP4 127.0.0.1
+                    t=0 0
+                    m=audio 4000 RTP/AVP 111
+                    a=rtpmap:111 OPUS/48000/2
+                    m=video 4002 RTP/AVP 96
+                    a=rtpmap:96 VP8/90000
+                    ...
+                  type: answer
+                requiresImmediateRenegotiation: false
+                tracks:
+                  - mid: "7"
+  /apps/{appId}/sessions/{sessionId}:
+    get:
+      tags:
+        - Get session state
+      summary: Return the list of tracks associated to the session
+      security:
+        - secret: []
+      parameters:
+        - in: path
+          name: appId
+          schema:
+            type: string
+          required: true
+          description: WebRTC application ID
+        - in: path
+          name: sessionId
+          schema:
+            type: string
+          required: true
+      responses:
+        "200":
+          description: OK
+          headers:
+            vary:
+              schema:
+                type: string
+                example: Origin
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/GetSessionStateResponse"
+              example:
+                tracks:
+                  - location: local
+                    mid: "2"
+                    trackName: 1a037563-c35c-4bf6-a9ee-2b474cbb9a51
+                    status: active
+                  - location: remote
+                    mid: "7"
+                    sessionId: 2a45361d5fd7cc14eface0587c276c94
+                    trackName: 2e037563-a35d-4bf6-a9ee-2d474cbb9a58
+                    status: active
+components:
+  securitySchemes:
+    secret:
+      type: http
+      scheme: bearer
+  schemas:
+    SessionDescription:
+      type: object
+      properties:
+        sdp:
+          type: string
+        type:
+          type: string
+          enum:
+            - answer
+            - offer
+    TrackObject:
+      type: object
+      properties:
+        location:
+          type: string
+          enum:
+            - local
+            - remote
+          description: If you want to share a track, it should be local. If you want to play a track shared by a remote agent, it should be remote
+        mid:
+          type: string
+          description: mid associated to track's transceiver. It should be set with local tracks only
+        sessionId:
+          type: string
+          description: Session ID of the track owner. It should be set for remote tracks only
+        trackName:
+          type: string
+          description: Given name for the track
+    CloseTrackObject:
+      type: object
+      properties:
+        mid:
+          type: string
+          description: mid associated to the track's transceiver to close
+    TracksRequest:
+      type: object
+      properties:
+        sessionDescription:
+          $ref: "#/components/schemas/SessionDescription"
+        tracks:
+          type: array
+          items:
+            $ref: "#/components/schemas/TrackObject"
+    TracksResponse:
+      type: object
+      properties:
+        requiresImmediateRenegotiation:
+          type: boolean
+        sessionDescription:
+          $ref: "#/components/schemas/SessionDescription"
+        tracks:
+          type: array
+          items:
+            allOf:
+              - $ref: "#/components/schemas/TrackObject"
+              - properties:
+                  error:
+                    type: object
+                    properties:
+                      errorCode:
+                        type: string
+                      errorDescription:
+                        type: string
+    NewSessionRequest:
+      type: object
+      properties:
+        sessionDescription:
+          $ref: "#/components/schemas/SessionDescription"
+    NewSessionResponse:
+      type: object
+      properties:
+        sessionDescription:
+          type: object
+          properties:
+            sdp:
+              type: string
+            type:
+              type: string
+              enum:
+                - answer
+                - offer
+        sessionId:
+          type: string
+    CloseTracksRequest:
+      type: object
+      properties:
+        sessionDescription:
+          $ref: "#/components/schemas/SessionDescription"
+        tracks:
+          type: array
+          items:
+            $ref: "#/components/schemas/CloseTrackObject"
+        force:
+          type: boolean
+          description: True if you want to stop just the data flow for the tracks, no WebRTC renegotiation
+    CloseTracksResponse:
+      type: object
+      properties:
+        sessionDescription:
+          $ref: "#/components/schemas/SessionDescription"
+        tracks:
+          type: array
+          items:
+            allOf:
+              - $ref: "#/components/schemas/CloseTrackObject"
+              - properties:
+                  error:
+                    type: object
+                    properties:
+                      errorCode:
+                        type: string
+                      errorDescription:
+                        type: string
+        requiresImmediateRenegotiation:
+          type: boolean
+    GetSessionStateResponse:
+      type: object
+      properties:
+        tracks:
+          type: array
+          items:
+            allOf:
+              - $ref: "#/components/schemas/TrackObject"
+              - properties:
+                  status:
+                    type: string
+                    enum:
+                      - active
+                      - inactive
+                      - waiting

header.md ADDED Viewed

	@@ -0,0 +1 @@


1	+ CloudflareCalls.js: A High-level library for Cloudflare Calls SFU.

index.js ADDED Viewed

	@@ -0,0 +1,1086 @@

+/**
+ * Cloudflare Calls Backend Server (Express)
+ *
+ * Illustrates how to:
+ * 1. Store each participant’s local track offers in memory.
+ * 2. Perform the Cloudflare Calls track negotiation on the server.
+ */
+require('dotenv').config();
+const express = require('express');
+const fetch = require('node-fetch');
+const path = require('path');
+const jwt = require('jsonwebtoken');
+const WebSocket = require('ws');
+const crypto = require('crypto');
+const http = require('http');
+const app = express();
+app.use(express.json());
+app.use(express.static('public'));
+const AUTH_REQUIRED = true; // You can turn off auth for your demo if you want
+const port = process.env.PORT || 5000;
+const CLOUDFLARE_APP_ID = process.env.CLOUDFLARE_APP_ID;
+const CLOUDFLARE_APP_SECRET = process.env.CLOUDFLARE_APP_SECRET;
+const SECRET_KEY = process.env.JWT_SECRET || 'thisisjustademokey';
+const CLOUDFLARE_CALLS_BASE_URL = process.env.CLOUDFLARE_APPS_URL || 'https://rtc.live.cloudflare.com/v1/apps';
+const CLOUDFLARE_BASE_PATH = `${CLOUDFLARE_CALLS_BASE_URL}/${CLOUDFLARE_APP_ID}`;
+const DEBUG = process.env.DEBUG === 'true' || false;
+// Middleware to verify token from the Authorization header
+function verifyToken(req, res, next) {
+    const authHeader = req.headers['authorization'];
+    if (!AUTH_REQUIRED) return next();
+    if (!authHeader || !authHeader.startsWith('Bearer ')) {
+        return res.status(401).json({ error: 'Unauthorized: No token provided' });
+    }
+    const token = authHeader.split(' ')[1];
+    try {
+        const decoded = jwt.verify(token, SECRET_KEY);
+        req.user = decoded; // Attach decoded token data to the request object
+        next();
+    } catch (err) {
+        return res.status(403).json({ error: 'Forbidden: Invalid token' });
+    }
+}
+// Example token generation endpoint
+// Has no usefulness in production, just facilitates the demo
+app.post('/auth/token', (req, res) => {
+    const { username } = req.body;
+    const userId = crypto.randomUUID(); // Generate unique user ID
+    // Generate a token with arbitrary JSON payload
+    const token = jwt.sign({
+        userId,
+        username,
+        role: 'demo',
+        isModerator: true // In production, this would come from your database
+    }, SECRET_KEY, {
+        expiresIn: '8h'
+    });
+    // Store initial user info
+    users.set(userId, {
+        userId,
+        username,
+        isModerator: true,
+        role: 'demo'
+    });
+    res.json({ token });
+});
+/**
+ * In-memory storage for rooms and participants.
+ * @typedef {Object} Room
+ * @property {string} userId - Unique identifier for the user.
+ * @property {string} sessionId - Unique identifier for the session.
+ * @property {number} createdAt - Timestamp when the participant was added.
+ * @property {Array} offers - Array of offer objects.
+ */
+/**
+ * @type {Object.<string, Array<Room>>}
+ */
+const rooms = new Map();  // Using Map instead of plain object for better key handling
+const wsConnections = {};
+// Add this near the top with other in-memory storage
+const users = new Map(); // Store user info
+// Helper function to serialize room data
+function serializeRoom(roomId, roomData) {
+    return {
+        roomId,
+        name: roomData.name || '',
+        metadata: roomData.metadata || {},
+        participantCount: roomData.participants.length,
+        createdAt: roomData.createdAt
+    };
+}
+/* ------------------------------------------------------------------
+   Basic endpoints
+------------------------------------------------------------------ */
+/**
+ * @api {post} /api/rooms Create a new room
+ * @apiName CreateRoom
+ * @apiGroup Rooms
+ *
+ * @apiSuccess {String} roomId The unique ID of the created room.
+ * @apiError (404) NotFound Room not found.
+ */
+app.post('/api/rooms', verifyToken, (req, res) => {
+    const roomId = crypto.randomUUID();
+    const { name, metadata } = req.body;
+    rooms.set(roomId, {
+        name: name || '',
+        metadata: metadata || {},
+        participants: [],
+        createdAt: Date.now()
+    });
+    res.json(serializeRoom(roomId, rooms.get(roomId)));
+});
+/**
+ * @api {get} /inspect-rooms Inspect all rooms (development only)
+ * @apiName InspectRooms
+ * @apiGroup Rooms
+ * @apiDescription Retrieve all rooms and their participants (development mode only).
+ *
+ * @apiSuccess {Object} rooms Object containing all rooms and participants.
+ */
+if (process.env.NODE_ENV === 'development') {
+    app.get('/inspect-rooms', (req, res) => {
+        const debug = {
+            rooms: Object.fromEntries(rooms),
+            roomCount: rooms.size,
+            users: Array.from(users.entries()),
+            wsConnections: Object.keys(wsConnections),
+            raw: rooms,
+        };
+        res.json(debug);
+    });
+}
+/**
+ * @api {post} /api/rooms/:roomId/join Join a room
+ * @apiName JoinRoom
+ * @apiGroup Rooms
+ *
+ * @apiParam {String} roomId The ID of the room to join.
+ * @apiBody {String} userId The user's unique identifier.
+ *
+ * @apiSuccess {String} sessionId The session ID of the participant.
+ * @apiSuccess {Array} otherSessions List of other participants in the room.
+ * @apiError (404) NotFound Room not found.
+ * @apiError (500) ServerError Failed to create Calls session.
+ */
+app.post('/api/rooms/:roomId/join', verifyToken, async (req, res) => {
+    const { roomId } = req.params;
+    const { userId } = req.user;
+    if (!rooms.has(roomId)) {
+        return res.status(404).json({ error: 'Room not found' });
+    }
+    const room = rooms.get(roomId);
+    const response = await fetch(`${CLOUDFLARE_BASE_PATH}/sessions/new`, {
+        method: 'POST',
+        headers: { 'Authorization': `Bearer ${CLOUDFLARE_APP_SECRET}` }
+    });
+    const sessionResponse = await response.json();
+    if (!sessionResponse.sessionId) {
+        return res.status(500).json({ error: 'Could not create Calls session' });
+    }
+    const participant = {
+        userId,
+        sessionId: sessionResponse.sessionId,
+        createdAt: Date.now(),
+        publishedTracks: []
+    };
+    room.participants.push(participant);
+    rooms.set(roomId, room);
+    const otherParticipants = room.participants
+        .filter(p => p.userId !== userId)
+        .map(p => ({
+            userId: p.userId,
+            sessionId: p.sessionId,
+            publishedTracks: p.publishedTracks
+        }));
+    broadcastToRoom(roomId, {
+        type: 'participant-joined',
+        payload: {
+            userId,
+            username: users.get(userId).username,
+            sessionId: participant.sessionId,
+        },
+    }, userId);
+    res.json({
+        sessionId: participant.sessionId,
+        otherSessions: otherParticipants
+    });
+});
+/**
+ * @api {post} /api/rooms/:roomId/sessions/:sessionId/publish Publish Tracks
+ * @apiName PublishTracks
+ * @apiGroup Sessions
+ *
+ * @apiParam {String} roomId The ID of the room.
+ * @apiParam {String} sessionId The session ID of the participant.
+ * @apiBody {Object} offer The SDP offer.
+ * @apiBody {Array} tracks Array of track objects.
+ *
+ * @apiSuccess {Object} data Response from Cloudflare Calls API.
+ * @apiError (404) NotFound Session not found in this room.
+ */
+app.post('/api/rooms/:roomId/sessions/:sessionId/publish', verifyToken, async (req, res) => {
+    const { roomId, sessionId } = req.params;
+    const { offer, tracks } = req.body;
+    const room = rooms.get(roomId);
+    if (!room) {
+        return res.status(404).json({ error: 'Room not found' });
+    }
+    const participant = room.participants.find(p => p.sessionId === sessionId);
+    if (!participant) {
+        return res.status(404).json({ error: 'Session not found in this room' });
+    }
+    // Store these trackName(s) in participant.publishedTracks
+    for (const t of tracks) {
+        if (!participant.publishedTracks.includes(t.trackName)) {
+            participant.publishedTracks.push(t.trackName);
+        }
+    }
+    rooms.set(roomId, room);
+    // Now call Cloudflare to finalize the push
+    const cfResp = await fetch(`${CLOUDFLARE_BASE_PATH}/sessions/${sessionId}/tracks/new`, {
+        method: 'POST',
+        headers: {
+            'Authorization': `Bearer ${CLOUDFLARE_APP_SECRET}`,
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            sessionDescription: offer,
+            tracks
+        })
+    });
+    const data = await cfResp.json();
+    if (data.sessionDescription) {
+        // Emit a 'track-published' event to other participants in the room
+        broadcastToRoom(roomId, {
+            type: 'track-published',
+            payload: {
+                sessionId,
+                trackNames: tracks.map(t => t.trackName)
+            }
+        }, participant.userId);
+    }
+    return res.json(data);
+});
+/**
+ * @api {post} /api/rooms/:roomId/sessions/:sessionId/unpublish Unpublish Track
+ * @apiName UnpublishTrack
+ * @apiGroup Sessions
+ *
+ * @apiParam {String} roomId The ID of the room
+ * @apiParam {String} sessionId The session ID of the track owner
+ *
+ * @apiHeader {String} Authorization Bearer token
+ *
+ * @apiError (403) Forbidden User is not authorized to force unpublish others' tracks
+ */
+app.post('/api/rooms/:roomId/sessions/:sessionId/unpublish', verifyToken, async (req, res) => {
+    try {
+        const { roomId, sessionId } = req.params;
+        const { trackName, mid, force, sessionDescription } = req.body;
+        // If trying to force unpublish someone else's track
+        if (force && sessionId !== req.user.sessionId) {
+            // Check if user is moderator
+            if (!req.user.isModerator) {
+                return res.status(403).json({
+                    errorCode: 'NOT_AUTHORIZED',
+                    errorDescription: 'Only moderators can force unpublish other participants\' tracks'
+                });
+            }
+        }
+        if (DEBUG) console.log('Unpublishing track:', { roomId, sessionId, trackName, mid });
+        if (!mid) {
+            return res.status(400).json({
+                errorCode: 'INVALID_REQUEST',
+                errorDescription: 'mid is required to unpublish a track.'
+            });
+        }
+        if (!sessionDescription) {
+            return res.status(400).json({
+                errorCode: 'INVALID_REQUEST',
+                errorDescription: 'sessionDescription is required to unpublish a track.'
+            });
+        }
+        // Call Cloudflare API to close the track
+        const cfUrl = `${CLOUDFLARE_BASE_PATH}/sessions/${sessionId}/tracks/close`;
+        if (DEBUG) console.log('Calling Cloudflare API:', cfUrl);
+        const requestBody = {
+            tracks: [{
+                mid: mid.toString()
+            }],
+            force: Boolean(force),
+            sessionDescription
+        };
+        if (DEBUG) console.log('Request body:', JSON.stringify(requestBody, null, 2));
+        const response = await fetch(cfUrl, {
+            method: 'PUT',
+            headers: {
+                'Authorization': `Bearer ${CLOUDFLARE_APP_SECRET}`,
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(requestBody)
+        });
+        const data = await response.json();
+        if (DEBUG) console.log('Cloudflare API response:', data);
+        broadcastToRoom(roomId, {
+            type: 'track-unpublished',
+            payload: { sessionId, trackName }
+        }, sessionId);
+        res.json(data);
+    } catch (error) {
+        console.error('Detailed error unpublishing track:', error);
+        res.status(500).json({
+            errorCode: 'UNPUBLISH_ERROR',
+            errorDescription: error.message
+        });
+    }
+});
+/**
+ * @api {post} /api/rooms/:roomId/sessions/:sessionId/pull Pull remote tracks
+ * @apiName PullTracks
+ * @apiGroup Sessions
+ *
+ * @apiParam {String} roomId The ID of the room.
+ * @apiParam {String} sessionId The session ID of the participant.
+ * @apiBody {String} remoteSessionId The session ID of the remote participant.
+ * @apiBody {String} trackName The exact name of the track to pull.
+ *
+ * @apiSuccess {Object} data Response from Cloudflare Calls API.
+ * @apiError (404) NotFound Room or Session not found.
+ */
+app.post('/api/rooms/:roomId/sessions/:sessionId/pull', verifyToken, async (req, res) => {
+    const { roomId, sessionId } = req.params;
+    const { remoteSessionId, trackName } = req.body;
+    const room = rooms.get(roomId);
+    if (!room) {
+        return res.status(404).json({ error: 'Room not found' });
+    }
+    const participant = room.participants.find(p => p.sessionId === sessionId);
+    if (!participant) {
+        return res.status(404).json({ error: 'Session not found in this room' });
+    }
+    const tracksToPull = [{
+        location: 'remote',
+        sessionId: remoteSessionId,
+        trackName
+    }];
+    const cfResp = await fetch(`${CLOUDFLARE_BASE_PATH}/sessions/${sessionId}/tracks/new`, {
+        method: 'POST',
+        headers: {
+            'Authorization': `Bearer ${CLOUDFLARE_APP_SECRET}`,
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ tracks: tracksToPull })
+    });
+    const data = await cfResp.json();
+    return res.json(data);
+});
+/**
+ * @apiDefine Error404
+ * @apiError 404 Room or Participant not found.
+ */
+/**
+ * @apiDefine Error400
+ * @apiError 400 Error from Cloudflare Calls API.
+ */
+/* ------------------------------------------------------------------
+   Renegotiate, Publish, and Data Channels Endpoints
+------------------------------------------------------------------ */
+/**
+ * @api {put} /api/rooms/:roomId/sessions/:sessionId/renegotiate Renegotiate Session
+ * @apiName RenegotiateSession
+ * @apiGroup Sessions
+ * @apiDescription Renegotiate an existing session with new SDP offer
+ * @apiParam {String} roomId Room identifier
+ * @apiParam {String} sessionId Session identifier
+ * @apiBody {Object} sessionDescription WebRTC session description
+ * @apiBody {String} sessionDescription.sdp SDP offer
+ * @apiBody {String} sessionDescription.type Type of SDP message
+ *
+ * @apiSuccess {Object} data Response from Cloudflare Calls API
+ */
+app.put('/api/rooms/:roomId/sessions/:sessionId/renegotiate', verifyToken, async (req, res) => {
+    const { sessionId } = req.params;
+    const { sdp, type } = req.body; // The client's answer
+    const body = {
+        sessionDescription: { sdp, type },
+    };
+    const cfResp = await fetch(`${CLOUDFLARE_BASE_PATH}/sessions/${sessionId}/renegotiate`, {
+        method: 'PUT',
+        headers: {
+            'Authorization': `Bearer ${CLOUDFLARE_APP_SECRET}`,
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(body),
+    });
+    const result = await cfResp.json();
+    if (result.errorCode) {
+        return res.status(400).json(result);
+    }
+    res.json(result);
+});
+/**
+ * @api {post} /api/rooms/:roomId/sessions/:sessionId/datachannels/new Manage Data Channels
+ * @apiName ManageDataChannels
+ * @apiGroup Sessions
+ * @apiDescription Manage data channel subscriptions
+ * @apiParam {String} roomId Room identifier
+ * @apiParam {String} sessionId Session identifier
+ * @apiBody {Array} dataChannels Array of data channel names
+ *
+ * @apiSuccess {Object} response Response from Cloudflare Calls API.
+ *
+ * @apiUse Error404
+ * @apiUse Error400
+ */
+app.post('/api/rooms/:roomId/sessions/:sessionId/datachannels/new', verifyToken, async (req, res) => {
+    const { roomId, sessionId } = req.params;
+    const { dataChannels } = req.body;
+    // Check that this room and session exist in memory
+    const room = rooms.get(roomId);
+    if (!room) {
+        return res.status(404).json({ error: 'Room not found' });
+    }
+    // Forward this datachannels request to Cloudflare
+    // The official CF endpoint is:
+    //   POST /v1/apps/:APP_ID/sessions/:sessionId/datachannels/new
+    // with a JSON body { dataChannels: [...] }.
+    const cfUrl = `${CLOUDFLARE_BASE_PATH}/sessions/${sessionId}/datachannels/new`;
+    const cfResp = await fetch(cfUrl, {
+        method: 'POST',
+        headers: {
+            'Authorization': `Bearer ${CLOUDFLARE_APP_SECRET}`,
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ dataChannels })
+    });
+    const data = await cfResp.json();
+    if (data.errorCode) {
+        return res.status(400).json(data);
+    }
+    // Optionally, if the user is publishing a channel, you could record that in `participant.publishedDataChannels` in memory
+    dataChannels.forEach(dc => {
+        if (dc.location === 'local') {
+            // E.g. store in participant.publishedDataChannels = [...(existing), dc.dataChannelName];
+        }
+    });
+    res.json(data); // Return the CF Calls response to the client
+});
+/* ------------------------------------------------------------------
+   Participants and Tracks Endpoints
+------------------------------------------------------------------ */
+/**
+ * @api {get} /api/rooms/:roomId/participants Get Participants
+ * @apiName GetParticipants
+ * @apiGroup Participants
+ * @apiDescription Retrieves a list of all participants in a specified room along with their published tracks.
+ *
+ * @apiParam {String} roomId The ID of the room.
+ *
+ * @apiSuccess {Object} participants An object containing an array of participants.
+ *
+ * @apiUse Error404
+ */
+app.get('/api/rooms/:roomId/participants', verifyToken, (req, res) => {
+    const { roomId } = req.params;
+    if (!rooms.has(roomId)) {
+        return res.status(404).json({ error: 'Room not found' });
+    }
+    const room = rooms.get(roomId);
+    res.json({ participants: room.participants });
+});
+/**
+ * @api {get} /api/rooms/:roomId/participant/:sessionId/tracks Get Participant Tracks
+ * @apiName GetParticipantTracks
+ * @apiGroup Participants
+ * @apiDescription Retrieves a list of tracks for a specific participant in a room.
+ *
+ * @apiParam {String} roomId The ID of the room.
+ * @apiParam {String} sessionId The session ID of the participant.
+ *
+ * @apiSuccess {Object} publishedTracks Array of published track names.
+ *
+ * @apiUse Error404
+ */
+app.get('/api/rooms/:roomId/participant/:sessionId/tracks', verifyToken, async (req, res) => {
+    const { sessionId, roomId } = req.params;
+    if (!rooms.has(roomId)) {
+        return res.status(404).json({ error: 'Room not found' });
+    }
+    const room = rooms.get(roomId);
+    const participant = room.participants.find(p => p.sessionId === sessionId);
+    if (!participant) {
+        return res.status(404).json({ error: 'Participant not found' });
+    }
+    res.json(participant.publishedTracks);
+});
+/* ------------------------------------------------------------------
+   ICE Servers Endpoint
+------------------------------------------------------------------ */
+/**
+ * @api {get} /api/ice-servers Get ICE Servers
+ * @apiName GetICEServers
+ * @apiGroup ICEServers
+ * @apiDescription Generates TURN credentials and returns the iceServers configuration.
+ *
+ * @apiSuccess {Object} iceServers iceServers configuration.
+ *
+ * @apiError 500 Failed to generate ICE servers.
+ */
+app.get('/api/ice-servers', verifyToken, (req, res) => {
+    if (!process.env.CLOUDFLARE_TURN_ID || !process.env.CLOUDFLARE_TURN_TOKEN) {
+        return res.json({
+            iceServers: [
+                { urls: 'stun:stun.cloudflare.com:3478' },
+            ]
+        });
+    }
+    try {
+        const lifetime = 600; // Credentials valid for 10 minutes (600 seconds)
+        const timestamp = Math.floor(Date.now() / 1000) + lifetime;
+        const username = `${timestamp}:${process.env.CLOUDFLARE_TURN_ID}`;
+        // Create HMAC-SHA256 hash using CLOUDFLARE_TURN_TOKEN as the key
+        const hmac = crypto.createHmac('sha256', process.env.CLOUDFLARE_TURN_TOKEN);
+        hmac.update(username);
+        const credential = hmac.digest('base64');
+        const iceServers = {
+            iceServers: [
+                { urls: 'stun:stun.cloudflare.com:3478' },
+                {
+                    urls: 'turn:turn.cloudflare.com:3478?transport=udp',
+                    username,
+                    credential
+                },
+                {
+                    urls: 'turn:turn.cloudflare.com:3478?transport=tcp',
+                    username,
+                    credential
+                },
+                {
+                    urls: 'turns:turn.cloudflare.com:5349?transport=tcp',
+                    username,
+                    credential
+                }
+            ]
+        };
+        res.json(iceServers);
+    } catch (error) {
+        console.error('Error generating ICE servers:', error);
+        res.status(500).json({ error: 'Failed to generate ICE servers' });
+    }
+});
+/* ------------------------------------------------------------------
+   Basic WebSocket for "participant joined" etc.
+------------------------------------------------------------------ */
+/**
+ * Sets up the WebSocket server and handles incoming connections and messages.
+ */
+const server = http.createServer(app);
+const wss = new WebSocket.Server({ server });
+wss.on('connection', (ws) => {
+    if (DEBUG) console.log('New WebSocket connection.');
+    // ws.setNoDelay(true);
+    ws.isAuthenticated = false;
+    ws.on('message', (message) => {
+        let data;
+        try {
+            data = JSON.parse(message);
+        } catch {
+            console.warn('Received invalid JSON message via WebSocket.');
+            return;
+        }
+        switch (data.type) {
+            case 'join-websocket':
+                handleWSJoin(ws, data.payload);
+                break;
+            case 'data-message':
+                if (AUTH_REQUIRED && !ws.isAuthenticated) {
+                    ws.send(JSON.stringify({ error: 'Unauthorized: Please authenticate first' }));
+                    if (DEBUG) console.log('Unauthenticated websocket request to send data-message');
+                    return;
+                }
+                handleDataMessage(ws, data.payload);
+                break;
+            default:
+                console.warn(`Unknown message type: ${data.type}`);
+                break;
+        }
+    });
+    ws.on('close', () => handleWSDisconnect(ws));
+});
+/**
+ * Handles incoming data messages from clients and broadcasts them.
+ * @param {WebSocket} ws - The WebSocket connection from the sender.
+ * @param {Object} payload - The payload containing from, to, and message.
+ */
+function handleDataMessage(ws, payload) {
+    const { from, to, message } = payload;
+    if (!from || !message) {
+        console.warn('Invalid data-message payload:', payload);
+        return;
+    }
+    // Get room ID from the session ID
+    const roomId = getRoomIdBySessionId(from);
+    if (!roomId) {
+        console.warn(`Room not found for session: ${from}`);
+        return;
+    }
+    // Broadcast to all participants in the room except the sender
+    broadcastToRoom(roomId, {
+        type: 'data-message',
+        payload: {
+            from,
+            data: message
+        }
+    }, from);
+}
+/**
+ * Utility function to get roomId by userId.
+ * Assumes each user is in only one room.
+ * @param {string} userId - The user's unique identifier.
+ * @returns {string|null} - The room ID if found, otherwise null.
+ */
+function getRoomIdByUserId(userId) {
+    for (const [roomId, room] of rooms.entries()) {
+        if (room.participants.find(p => p.userId === userId)) {
+            return roomId;
+        }
+    }
+    return null;
+}
+/**
+ * Utility function to get WebSocket connection by userId.
+ * @param {string} userId - The user's unique identifier.
+ * @returns {WebSocket|null} - The WebSocket connection if found, otherwise null.
+ */
+function getWebSocketByUserId(userId) {
+    for (const users of Object.values(wsConnections)) {
+        if (users[userId]) {
+            return users[userId];
+        }
+    }
+    return null;
+}
+/**
+ * Handles a WebSocket join request by authenticating and adding the user to wsConnections.
+ * @param {WebSocket} ws - The WebSocket connection.
+ * @param {Object} payload - The payload containing roomId, userId, and token.
+ * @param {string} payload.roomId - The ID of the room to join.
+ * @param {string} payload.userId - The user's unique identifier.
+ * @param {string} payload.token - The JWT token for authentication.
+ */
+function handleWSJoin(ws, { roomId, userId, token }) {
+    if (!roomId || !userId || (AUTH_REQUIRED && !token)) {
+        console.warn('Missing roomId, userId, or token in WS join');
+        ws.send(JSON.stringify({ error: 'Missing roomId, userId, or token' }));
+        return;
+    }
+    try {
+        // Verify the token
+        if (AUTH_REQUIRED) {
+            const user = jwt.verify(token, SECRET_KEY);
+        }
+        ws.isAuthenticated = true;
+        // Add user to the room
+        if (!wsConnections[roomId]) {
+            wsConnections[roomId] = {};
+        }
+        wsConnections[roomId][userId] = ws;
+        if (DEBUG) console.log(`User ${userId} joined room ${roomId} via WS`);
+        ws.send(JSON.stringify({ message: 'Joined room successfully' }));
+    } catch (err) {
+        if (DEBUG) console.warn('Invalid token in WS join:', err.message);
+        ws.send(JSON.stringify({ error: 'Invalid or expired token' }));
+    }
+}
+/**
+ * Handles WebSocket disconnections by removing the user from wsConnections.
+ * @param {WebSocket} ws - The WebSocket connection that was closed.
+ */
+function handleWSDisconnect(ws) {
+    for (const [rId, userMap] of Object.entries(wsConnections)) {
+        for (const [uId, sock] of Object.entries(userMap)) {
+            if (sock === ws) {
+                if (DEBUG) console.log(`User ${uId} disconnected from room ${rId}`);
+                delete wsConnections[rId][uId];
+            }
+        }
+    }
+}
+/**
+ * Broadcasts a message to all participants in a room, optionally excluding a specific user.
+ * @param {string} roomId - The ID of the room.
+ * @param {Object} message - The message object to broadcast.
+ * @param {string|null} excludeUserId - The user ID to exclude from broadcasting.
+ */
+function broadcastToRoom(roomId, message, excludeUserId = null) {
+    if (DEBUG) console.log('Broadcasting to room:', { roomId, message, excludeUserId });
+    if (!rooms.has(roomId)) return;
+    if (!wsConnections[roomId]) return;
+    for (const [userId, ws] of Object.entries(wsConnections[roomId])) {
+        if (userId === excludeUserId) continue;
+        if (ws && ws.readyState === WebSocket.OPEN) {
+            ws.send(JSON.stringify(message));
+            if (DEBUG) console.log('Sent Broadcast message to user:', userId);
+        }
+    }
+}
+/**
+ * @api {get} /api/rooms/:roomId/sessions/:sessionId/state Get Session State
+ * @apiName GetSessionState
+ * @apiGroup Sessions
+ * @apiDescription Retrieves the current state of a session from Cloudflare Calls API.
+ *
+ * @apiParam {String} roomId The ID of the room.
+ * @apiParam {String} sessionId The session ID to query.
+ *
+ * @apiSuccess {Object} response Session state from Cloudflare Calls API.
+ * @apiSuccess {Array} response.tracks List of tracks in the session.
+ * @apiSuccess {String} response.tracks.location Track location ('local' or 'remote').
+ * @apiSuccess {String} response.tracks.mid Media ID of the track.
+ * @apiSuccess {String} response.tracks.trackName Name/ID of the track.
+ * @apiSuccess {String} response.tracks.status Track status ('active', 'inactive', or 'waiting').
+ *
+ * @apiError (500) SessionStateError Failed to retrieve session state.
+ * @apiError (403) Forbidden Invalid or missing authentication token.
+ */
+app.get('/api/rooms/:roomId/sessions/:sessionId/state', verifyToken, async (req, res) => {
+    const { roomId, sessionId } = req.params;
+    try {
+        const response = await fetch(`${CLOUDFLARE_BASE_PATH}/sessions/${sessionId}`, {
+            headers: {
+                'Authorization': `Bearer ${CLOUDFLARE_APP_SECRET}`
+            }
+        });
+        const data = await response.json();
+        res.json(data);
+    } catch (error) {
+        console.error('Error getting session state:', error);
+        res.status(500).json({
+            errorCode: 'SESSION_STATE_ERROR',
+            errorDescription: error.message
+        });
+    }
+});
+/**
+ * @api {get} /api/users/:userId Get User Info
+ * @apiName GetUserInfo
+ * @apiGroup Users
+ * @apiDescription Get information about a user. Returns full info for own user, limited info for others.
+ *
+ * @apiParam {String} userId User ID or 'me' for current user
+ * @apiHeader {String} Authorization Bearer token required
+ *
+ * @apiSuccess {String} userId User's unique identifier
+ * @apiSuccess {String} username User's display name
+ * @apiSuccess {Boolean} [isModerator] Whether user is moderator (only included for own user)
+ * @apiSuccess {String} [role] User's role (only included for own user)
+ *
+ * @apiError (403) Forbidden Invalid or missing token
+ * @apiError (404) NotFound User not found
+ */
+app.get('/api/users/:userId', verifyToken, (req, res) => {
+    const { userId } = req.params;
+    // Handle 'me' request
+    if (userId === 'me') {
+        const userInfo = users.get(req.user.userId);
+        if (!userInfo) {
+            return res.status(404).json({
+                errorCode: 'USER_NOT_FOUND',
+                errorDescription: 'Current user not found'
+            });
+        }
+        return res.json(userInfo);
+    }
+    // Handle specific user request
+    const requestedUser = users.get(userId);
+    if (!requestedUser) {
+        return res.status(404).json({
+            errorCode: 'USER_NOT_FOUND',
+            errorDescription: 'User not found'
+        });
+    }
+    // Return limited info for other users
+    return res.json({
+        userId: requestedUser.userId,
+        username: requestedUser.username
+    });
+});
+/**
+ * @api {get} /api/users/:userId Get User Info
+ * @apiName GetUserInfo
+ * @apiGroup Users
+ * @apiDescription Get information about a user. Returns full info for own user, limited info for others.
+ *
+ * @apiParam {String} userId User ID or 'me' for current user
+ * @apiHeader {String} Authorization Bearer token required
+ *
+ * @apiSuccess {String} userId User's unique identifier
+ * @apiSuccess {String} username User's display name
+ * @apiSuccess {Boolean} [isModerator] Whether user is moderator (only included for own user)
+ * @apiSuccess {String} [role] User's role (only included for own user)
+ *
+ * @apiError (403) Forbidden Invalid or missing token
+ * @apiError (404) NotFound User not found
+ */
+app.get('/api/users/:userId', verifyToken, (req, res) => {
+    const { userId } = req.params;
+    // Handle 'me' request
+    if (userId === 'me') {
+        const userInfo = users.get(req.user.userId);
+        if (!userInfo) {
+            return res.status(404).json({
+                errorCode: 'USER_NOT_FOUND',
+                errorDescription: 'Current user not found'
+            });
+        }
+        return res.json(userInfo);
+    }
+    // Handle specific user request
+    const requestedUser = users.get(userId);
+    if (!requestedUser) {
+        return res.status(404).json({
+            errorCode: 'USER_NOT_FOUND',
+            errorDescription: 'User not found'
+        });
+    }
+    // Return limited info for other users
+    return res.json({
+        userId: requestedUser.userId,
+        username: requestedUser.username
+    });
+});
+app.post('/api/rooms/:roomId/leave', verifyToken, async (req, res) => {
+    const { roomId } = req.params;
+    const { sessionId } = req.body;
+    if (!rooms.has(roomId)) {
+        return res.status(404).json({ error: 'Room not found' });
+    }
+    const room = rooms.get(roomId);
+    const participantIndex = room.participants.findIndex(p => p.sessionId === sessionId);
+    if (participantIndex !== -1) {
+        const participant = room.participants[participantIndex];
+        room.participants.splice(participantIndex, 1);
+        // Notify other participants about the leave
+        broadcastToRoom(roomId, {
+            type: 'participant-left',
+            payload: {
+                sessionId,
+                userId: participant.userId,
+                metadata: participant.metadata
+            }
+        }, sessionId);
+        // If room is empty, delete it
+        if (room.participants.length === 0) {
+            rooms.delete(roomId);
+        }
+    }
+    res.json({ success: true });
+});
+process.on('SIGINT', () => {
+    users.clear();
+    process.exit();
+});
+server.listen(port, () => {
+    console.log(`Server listening on http://localhost:${port}`);
+});
+/**
+ * @api {post} /api/rooms/:roomId/sessions/:sessionId/track-status Update Track Status
+ * @apiName UpdateTrackStatus
+ * @apiGroup Sessions
+ * @apiDescription Updates the enabled/disabled status of a track
+ *
+ * @apiParam {String} roomId The ID of the room
+ * @apiParam {String} sessionId The session ID
+ * @apiBody {String} trackId The track ID
+ * @apiBody {String} kind The track kind ('audio' or 'video')
+ * @apiBody {Boolean} enabled Whether the track should be enabled
+ * @apiBody {Boolean} [force] Whether to force the status change
+ *
+ * @apiSuccess {Object} result Operation result
+ * @apiError (403) Forbidden Not authorized to update track status
+ */
+app.post('/api/rooms/:roomId/sessions/:sessionId/track-status', verifyToken, async (req, res) => {
+    try {
+        const { roomId, sessionId } = req.params;
+        const { trackId, kind, enabled, force } = req.body;
+        // If trying to force change someone else's track
+        if (force && sessionId !== req.user.sessionId) {
+            if (!req.user.isModerator) {
+                return res.status(403).json({
+                    errorCode: 'NOT_AUTHORIZED',
+                    errorDescription: 'Only moderators can force change other participants\' tracks'
+                });
+            }
+        }
+        // Notify other participants about the track status change
+        broadcastToRoom(roomId, {
+            type: 'track-status-changed',
+            payload: {
+                sessionId,
+                trackId,
+                kind,
+                enabled
+            }
+        }, sessionId);
+        res.json({ success: true });
+    } catch (error) {
+        console.error('Error updating track status:', error);
+        res.status(500).json({
+            errorCode: 'UPDATE_TRACK_STATUS_ERROR',
+            errorDescription: error.message
+        });
+    }
+});
+app.get('/api/rooms', verifyToken, (req, res) => {
+    const roomList = Array.from(rooms.entries()).map(([roomId, room]) =>
+        serializeRoom(roomId, room)
+    );
+    res.json({ rooms: roomList });
+});
+app.put('/api/rooms/:roomId/metadata', verifyToken, (req, res) => {
+    const { roomId } = req.params;
+    const { name, metadata } = req.body;
+    if (!rooms.has(roomId)) {
+        return res.status(404).json({ error: 'Room not found' });
+    }
+    const room = rooms.get(roomId);
+    if (name !== undefined) {
+        room.name = name;
+    }
+    if (metadata !== undefined) {
+        room.metadata = { ...room.metadata, ...metadata };
+    }
+    rooms.set(roomId, room);
+    // Notify room participants about the update
+    broadcastToRoom(roomId, {
+        type: 'room-metadata-updated',
+        payload: {
+            roomId,
+            name: room.name,
+            metadata: room.metadata
+        }
+    });
+    res.json(serializeRoom(roomId, room));
+});
+function getRoomIdBySessionId(sessionId) {
+    for (const [roomId, room] of rooms.entries()) {
+        if (room.participants.find(p => p.sessionId === sessionId)) {
+            return roomId;
+        }
+    }
+    return null;
+}

jsdoc.json ADDED Viewed

	@@ -0,0 +1,21 @@

+{
+    "tags": {
+        "allowUnknownTags": true
+    },
+    "source": {
+        "include": ["index.js", "public/CloudflareCalls.js"],
+        "includePattern": ".js$",
+        "excludePattern": "(node_modules|docs)"
+    },
+    "opts": {
+        "destination": "./public/docs",
+        "recurse": true,
+        "template": "node_modules/docdash",
+        "readme": "./README.md"
+    },
+    "plugins": [],
+    "templates": {
+        "cleverLinks": true,
+        "monospaceLinks": true
+    }
+}

package.json ADDED Viewed

	@@ -0,0 +1,29 @@

+{
+  "name": "cloudflare-calls",
+  "version": "0.1.4",
+  "description": "A Reference implementation for Cloudflare Calls",
+  "module": "public/CloudflareCalls.js",
+  "browser": "public/CloudflareCalls.min.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "rollup": "rollup public/CloudflareCalls.js --file public/CloudflareCalls.min.js --format umd --name \"CloudflareCalls\" --plugin @rollup/plugin-terser",
+    "apidocs": "apidoc -i ./ -e \"(node_modules|public)\" -o public/docs/api",
+    "docs": "jsdoc -c jsdoc.json",
+    "build": "npm run docs && mkdir -p public/docs/api && npm run apidocs && npm run rollup",
+    "start": "node ."
+  },
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@rollup/plugin-terser": "^0.4.4",
+    "apidoc": "^1.2.0",
+    "docdash": "^2.0.2",
+    "dotenv": "^16.4.7",
+    "express": "^4.21.2",
+    "jsdoc": "^4.0.4",
+    "jsonwebtoken": "^9.0.2",
+    "node-fetch": "^2.6.7",
+    "rollup": "^4.29.1",
+    "ws": "^8.18.0"
+  }
+}

public/.gitattributes ADDED Viewed

	@@ -0,0 +1,36 @@

+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text

public/README.md ADDED Viewed

	@@ -0,0 +1,10 @@

+---
+title: Meeting Dapp Frontend
+emoji: 🌍
+colorFrom: blue
+colorTo: blue
+sdk: static
+pinned: false
+---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

public/assets/mask/basic/mask1.png ADDED Viewed

Git LFS Details

SHA256: a9b239f3f10cf09f20249d87e67716a094fee1eaaf8ec6cc1ba71daf283a5e39
Pointer size: 130 Bytes
Size of remote file: 71 kB

public/assets/mask/basic/mask2.png ADDED Viewed

Git LFS Details

SHA256: d88269d246286dcb36126c3839ba428eaac2f3baf1502b27b801faa4296eb19b
Pointer size: 130 Bytes
Size of remote file: 76.6 kB

public/assets/mask/basic/mask3.png ADDED Viewed

Git LFS Details

SHA256: dcc24e24098acfc816d19bcd97037b019a66504872a009f7a6fb3562bfe54bf0
Pointer size: 130 Bytes
Size of remote file: 28 kB

public/assets/mask/mask.png ADDED Viewed

Git LFS Details

SHA256: a9b239f3f10cf09f20249d87e67716a094fee1eaaf8ec6cc1ba71daf283a5e39
Pointer size: 130 Bytes
Size of remote file: 71 kB

public/assets/mask/medicel/mask1.png ADDED Viewed

Git LFS Details

SHA256: 116782f472ff822bfe7460b25df2079baf499bf4a9741ed7e0655e9ccfe1be6a
Pointer size: 132 Bytes
Size of remote file: 1.35 MB

public/assets/mask/medicel/mask2.png ADDED Viewed

Git LFS Details

SHA256: 4e70f4634ee9d9c0554c6b3179ec06568fa7215fb3dc878acc53ef370a492515
Pointer size: 131 Bytes
Size of remote file: 164 kB

public/assets/mask/medicel/mask3.png ADDED Viewed

Git LFS Details

SHA256: 14b16c0f1605c40dbcb0ffbaf34b12d095af5970b1d262b2a8f25cadf62d0172
Pointer size: 130 Bytes
Size of remote file: 47.7 kB

public/check.html ADDED Viewed

	@@ -0,0 +1,481 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Check Your Devices</title>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Poppins', sans-serif;
+        }
+        body {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0;
+            margin: 0;
+            overflow: hidden;
+        }
+        .container {
+            max-width: 1200px;
+            width: 100%;
+            height: 90vh;
+            background: rgba(255, 255, 255, 0.95);
+            padding: 20px;
+            display: flex;
+            gap: 20px;
+            border-radius: 0;
+            box-shadow: none;
+            border-radius: 20px;
+        }
+        .video-section {
+            flex: 1;
+            min-width: 0;
+            display: flex;
+            flex-direction: column;
+        }
+        .controls-section {
+            width: 350px;
+            flex-shrink: 0;
+            overflow-y: auto;
+            padding-right: 10px;
+        }
+        h2 {
+            text-align: left;
+            color: #333;
+            margin-bottom: 30px;
+            font-size: 24px;
+        }
+        .room-info {
+            background: #f8f9fa;
+            padding: 15px;
+            border-radius: 12px;
+            margin-bottom: 20px;
+        }
+        .room-info p {
+            margin: 10px 0;
+            color: #666;
+        }
+        .room-info span {
+            color: #333;
+            font-weight: 500;
+        }
+        .preview-container {
+            position: relative;
+            width: 100%;
+            flex: 1;
+            margin-bottom: 0;
+            height: auto;
+            background: #000;
+            border-radius: 12px;
+            overflow: hidden;
+        }
+        #previewVideo {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+        .controls {
+            position: absolute;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            display: flex;
+            gap: 15px;
+            background: rgba(0, 0, 0, 0.5);
+            padding: 12px;
+            border-radius: 30px;
+        }
+        .control-btn {
+            width: 45px;
+            height: 45px;
+            border-radius: 50%;
+            border: none;
+            background: white;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s ease;
+        }
+        .control-btn:hover {
+            background: #f0f0f0;
+            transform: scale(1.1);
+        }
+        .control-btn .material-icons {
+            font-size: 20px;
+        }
+        .device-selection {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+            margin: 20px 0;
+        }
+        .form-group {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+        .form-group label {
+            font-weight: 500;
+            color: #333;
+            font-size: 14px;
+        }
+        .form-group select {
+            padding: 12px;
+            border: 2px solid #e1e1e1;
+            border-radius: 8px;
+            font-size: 14px;
+            transition: all 0.3s ease;
+        }
+        .form-group select:focus {
+            border-color: #667eea;
+            outline: none;
+        }
+        .audio-meter {
+            width: 100%;
+            height: 8px;
+            background: #f0f0f0;
+            border-radius: 4px;
+            overflow: hidden;
+            margin: 20px 0;
+        }
+        #volumeMeter {
+            height: 100%;
+            width: 0%;
+            background: linear-gradient(90deg, #667eea, #764ba2);
+            transition: width 0.1s ease;
+        }
+        .button-group {
+            display: flex;
+            gap: 15px;
+            margin-top: 30px;
+        }
+        .primary-btn, .secondary-btn {
+            flex: 1;
+            padding: 12px 24px;
+            border: none;
+            border-radius: 8px;
+            font-size: 16px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            text-align: center;
+            font-weight: 500;
+        }
+        .primary-btn {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+        }
+        .primary-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(102,126,234,0.4);
+        }
+        .secondary-btn {
+            background: #e0e0e0;
+            color: #333;
+        }
+        .secondary-btn:hover {
+            background: #d5d5d5;
+        }
+        @media (max-width: 968px) {
+            .container {
+                flex-direction: column;
+                overflow-y: auto;
+            }
+            .controls-section {
+                width: 100%;
+                flex: 1;
+            }
+            .preview-container {
+                height: 50vh;
+                flex: none;
+            }
+        }
+        @media (max-width: 768px) {
+            .device-selection {
+                grid-template-columns: 1fr;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="video-section">
+            <div class="preview-container">
+                <video id="previewVideo" autoplay muted playsinline></video>
+                <div class="controls">
+                    <button id="toggleAudioBtn" class="control-btn">
+                        <span class="material-icons">mic</span>
+                    </button>
+                    <button id="toggleVideoBtn" class="control-btn">
+                        <span class="material-icons">videocam</span>
+                    </button>
+                </div>
+            </div>
+        </div>
+        <div class="controls-section">
+            <h2>Device Check</h2>
+            <div class="room-info">
+                <p>Room ID: <span id="roomIdDisplay"></span></p>
+                <p>Username: <span id="usernameDisplay"></span></p>
+            </div>
+            <div class="device-selection">
+                <div class="form-group">
+                    <label>Camera</label>
+                    <select id="videoSelect"></select>
+                </div>
+                <div class="form-group">
+                    <label>Microphone</label>
+                    <select id="audioSelect" ></select>
+                </div>
+            </div>
+            <div class="audio-meter">
+                <div id="volumeMeter"></div>
+            </div>
+            <div class="button-group">
+                <button class="secondary-btn" onclick="window.location.href='index.html'">Back</button>
+                <button id="joinMeetingBtn" class="primary-btn">Join Meeting</button>
+            </div>
+        </div>
+    </div>
+    <script>
+        let stream = null;
+        let audioContext = null;
+        let audioAnalyser = null;
+        // Get stored information from localStorage
+        const username = localStorage.getItem('username');
+        const roomId = localStorage.getItem('roomId');
+        // Display stored information
+        document.getElementById('usernameDisplay').textContent = username || 'Not set';
+        document.getElementById('roomIdDisplay').textContent = roomId || 'Not set';
+        // Initialize devices
+        async function initializeDevices() {
+            try {
+                // Get initial access to media devices
+                stream = await navigator.mediaDevices.getUserMedia({
+                    video: true,
+                    audio: true
+                });
+                // Show preview
+                const videoElement = document.getElementById('previewVideo');
+                videoElement.srcObject = stream;
+                // Setup audio meter
+                setupAudioMeter();
+                // Enumerate and populate device lists
+                const devices = await navigator.mediaDevices.enumerateDevices();
+                const videoSelect = document.getElementById('videoSelect');
+                const audioSelect = document.getElementById('audioSelect');
+                // Clear existing options
+                videoSelect.innerHTML = '';
+                audioSelect.innerHTML = '';
+                // Add video devices
+                devices.filter(device => device.kind === 'videoinput')
+                    .forEach(device => {
+                        const option = document.createElement('option');
+                        option.value = device.deviceId;
+                        option.text = device.label || `Camera ${videoSelect.length + 1}`;
+                        videoSelect.appendChild(option);
+                    });
+                // Add audio devices
+                devices.filter(device => device.kind === 'audioinput')
+                    .forEach(device => {
+                        const option = document.createElement('option');
+                        option.value = device.deviceId;
+                        option.text = device.label || `Microphone ${audioSelect.length + 1}`;
+                        audioSelect.appendChild(option);
+                    });
+            } catch (error) {
+                console.error('Error accessing media devices:', error);
+                alert('Failed to access camera or microphone');
+            }
+        }
+        function setupAudioMeter() {
+            if (!stream) return;
+            audioContext = new AudioContext();
+            const microphone = audioContext.createMediaStreamSource(stream);
+            audioAnalyser = audioContext.createAnalyser();
+            microphone.connect(audioAnalyser);
+            audioAnalyser.fftSize = 256;
+            const bufferLength = audioAnalyser.frequencyBinCount;
+            const dataArray = new Uint8Array(bufferLength);
+            function updateMeter() {
+                if (!audioAnalyser) return;
+                audioAnalyser.getByteFrequencyData(dataArray);
+                const average = dataArray.reduce((a, b) => a + b) / bufferLength;
+                const volume = Math.min(100, (average / 128) * 100);
+                document.getElementById('volumeMeter').style.width = `${volume}%`;
+                requestAnimationFrame(updateMeter);
+            }
+            updateMeter();
+        }
+        // Device switching handlers
+        document.getElementById('videoSelect').onchange = async (e) => {
+            if (!stream) return;
+            try {
+                const newStream = await navigator.mediaDevices.getUserMedia({
+                    video: { deviceId: { exact: e.target.value } },
+                    audio: false
+                });
+                const oldTrack = stream.getVideoTracks()[0];
+                const newTrack = newStream.getVideoTracks()[0];
+                stream.removeTrack(oldTrack);
+                stream.addTrack(newTrack);
+                document.getElementById('previewVideo').srcObject = stream;
+            } catch (error) {
+                console.error('Error switching camera:', error);
+                alert('Failed to switch camera');
+            }
+        };
+        document.getElementById('audioSelect').onchange = async (e) => {
+            if (!stream) return;
+            try {
+                const newStream = await navigator.mediaDevices.getUserMedia({
+                    audio: { deviceId: { exact: e.target.value } },
+                    video: false
+                });
+                const oldTrack = stream.getAudioTracks()[0];
+                const newTrack = newStream.getAudioTracks()[0];
+                stream.removeTrack(oldTrack);
+                stream.addTrack(newTrack);
+                // Reinitialize audio meter
+                if (audioContext) {
+                    audioContext.close();
+                }
+                setupAudioMeter();
+            } catch (error) {
+                console.error('Error switching microphone:', error);
+                alert('Failed to switch microphone');
+            }
+        };
+        // Toggle controls
+        document.getElementById('toggleAudioBtn').onclick = () => {
+            const audioTrack = stream?.getAudioTracks()[0];
+            if (audioTrack) {
+                audioTrack.enabled = !audioTrack.enabled;
+                document.querySelector('#toggleAudioBtn .material-icons').textContent =
+                    audioTrack.enabled ? 'mic' : 'mic_off';
+            }
+        };
+        document.getElementById('toggleVideoBtn').onclick = () => {
+            const videoTrack = stream?.getVideoTracks()[0];
+            if (videoTrack) {
+                videoTrack.enabled = !videoTrack.enabled;
+                document.querySelector('#toggleVideoBtn .material-icons').textContent =
+                    videoTrack.enabled ? 'videocam' : 'videocam_off';
+            }
+        };
+        // Join meeting handler
+        document.getElementById('joinMeetingBtn').onclick = () => {
+            // Store selected devices and their states
+            const deviceSettings = {
+                audioDeviceId: document.getElementById('audioSelect').value,
+                videoDeviceId: document.getElementById('videoSelect').value,
+                audioEnabled: stream?.getAudioTracks()[0]?.enabled ?? true,
+                videoEnabled: stream?.getVideoTracks()[0]?.enabled ?? true
+            };
+            localStorage.setItem('deviceSettings', JSON.stringify(deviceSettings));
+            // Clean up
+            if (stream) {
+                stream.getTracks().forEach(track => track.stop());
+            }
+            if (audioContext) {
+                audioContext.close();
+            }
+            // Navigate to meeting room
+            window.location.href = `room.html`;
+        };
+        // Initialize on page load
+        initializeDevices();
+        // Cleanup on page unload
+        window.onbeforeunload = () => {
+            if (stream) {
+                stream.getTracks().forEach(track => track.stop());
+            }
+            if (audioContext) {
+                audioContext.close();
+            }
+        };
+    </script>
+</body>
+</html>

public/css/style.css ADDED Viewed

	@@ -0,0 +1,490 @@

+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+.app-container {
+    height: 100vh;
+    padding: 20px;
+    background: #f0f2f5;
+}
+.join-form {
+    max-width: 400px;
+    margin: 40px auto;
+    padding: 20px;
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+.form-group {
+    margin-bottom: 15px;
+}
+input {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 14px;
+}
+.button-group {
+    display: flex;
+    gap: 10px;
+}
+.primary-btn, .secondary-btn {
+    flex: 1;
+    padding: 10px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-weight: 500;
+}
+.primary-btn {
+    background: #0056d6;
+    color: white;
+}
+.secondary-btn {
+    background: #f0f2f5;
+    color: #0056d6;
+}
+.meeting-room {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+.meeting-header {
+    padding: 15px;
+    background: white;
+    border-radius: 8px;
+    margin-bottom: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.room-info {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+.video-grid {
+    flex: 1;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 1rem;
+    padding: 1rem;
+    overflow: auto;
+}
+.video-container {
+    position: relative;
+    width: 100%;
+    padding-top: 56.25%; /* 16:9 Aspect Ratio */
+    background: #2c2c2c;
+    border-radius: 8px;
+    overflow: hidden;
+    background: #2a2a2a;
+    aspect-ratio: 16/9;
+}
+video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+.video-overlay {
+    position: absolute;
+    bottom: 10px;
+    left: 10px;
+    color: white;
+    padding: 5px 10px;
+    border-radius: 4px;
+    background: rgba(0,0,0,0.5);
+}
+.controls-bar {
+    padding: 20px;
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+    background: rgba(0, 0, 0, 0.8);
+    border-radius: 8px;
+}
+.control-btn {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    border: none;
+    background: #424242;
+    color: white;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.control-btn:hover {
+    background: #616161;
+}
+.control-btn.danger {
+    background: #dc3545;
+    color: white;
+}
+.control-btn.leave-btn {
+    background: #dc3545;
+}
+.control-btn.leave-btn:hover {
+    background: #c82333;
+}
+.icon-button {
+    border: none;
+    background: none;
+    cursor: pointer;
+    padding: 5px;
+}
+.hidden {
+    display: none;
+}
+.video-wrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background: #1a1a1a;
+    border-radius: 8px;
+    overflow: hidden;
+    transition: all 0.3s ease; /* Smooth transition for video containers */
+}
+.video-wrapper.removing {
+    opacity: 0;
+    transform: scale(0.8);
+}
+.video-wrapper video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+.participant-name {
+    position: absolute;
+    bottom: 10px;
+    left: 10px;
+    color: white;
+    background: rgba(0, 0, 0, 0.5);
+    padding: 5px 10px;
+    border-radius: 4px;
+    font-size: 14px;
+}
+.video-grid {
+    display: grid;
+    gap: 10px;
+    padding: 10px;
+    height: calc(100vh - 100px);
+    grid-auto-flow: dense; /* Helps fill gaps automatically */
+    transition: all 0.3s ease; /* Smooth transition when layout changes */
+}
+.video-grid.single-participant {
+    grid-template-columns: 1fr;
+}
+.video-grid.two-participants {
+    grid-template-columns: repeat(2, 1fr);
+}
+.video-grid.few-participants {
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+}
+.video-grid.many-participants {
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    grid-auto-rows: 1fr;
+}
+.participant-list {
+    position: fixed;
+    right: 0;
+    top: 0;
+    width: 250px;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+    padding: 20px;
+    transform: translateX(100%);
+    transition: transform 0.3s ease;
+}
+.participant-list.show {
+    transform: translateX(0);
+}
+.participant-list h3 {
+    margin: 0 0 10px 0;
+    padding-bottom: 5px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+}
+.participant-list ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+.participant-list li {
+    padding: 8px 10px;
+    margin: 5px 0;
+    border-radius: 4px;
+    background: rgba(255, 255, 255, 0.1);
+    display: flex;
+    align-items: center;
+    animation: participantFade 0.3s ease-in-out;
+}
+.participant-list li.leaving {
+    animation: participantLeave 0.3s ease-in-out forwards;
+}
+.participant-list li .material-icons {
+    margin-right: 8px;
+    font-size: 18px;
+}
+@keyframes participantFade {
+    from {
+        opacity: 0;
+        transform: translateX(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+@keyframes participantLeave {
+    from {
+        opacity: 1;
+        transform: translateX(0);
+    }
+    to {
+        opacity: 0;
+        transform: translateX(20px);
+    }
+}
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(-10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+/* Screen share participant styling */
+.screen-share-participant {
+    font-style: italic;
+    color: #4CAF50;
+}
+.video-wrapper[id^="video-screen_"] {
+    border: 2px solid #4CAF50;
+}
+/* Active share button state */
+#shareScreenBtn.active {
+    background-color: #4CAF50;
+    color: white;
+}
+.notifications-container {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    z-index: 1000;
+}
+.notification {
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+    padding: 10px 20px;
+    border-radius: 4px;
+    margin-bottom: 10px;
+    animation: fadeIn 0.3s ease;
+}
+.notification.error {
+    background: rgba(220, 53, 69, 0.9);
+}
+.room-container {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    background: #1a1a1a;
+}
+/* Modal Styles Enhancement */
+.modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.7);
+    z-index: 1000;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+.modal.show {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    opacity: 1;
+}
+.modal-content {
+    position: relative;
+    background-color: #fff;
+    width: 90%;
+    max-width: 800px;
+    max-height: 80vh;
+    border-radius: 12px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+    transform: scale(0.7);
+    opacity: 0;
+    transition: all 0.3s ease;
+}
+.modal.show .modal-content {
+    transform: scale(1);
+    opacity: 1;
+}
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px;
+    border-bottom: 1px solid #eee;
+}
+.modal-header h3 {
+    margin: 0;
+    color: #333;
+    font-size: 1.5rem;
+    font-weight: 500;
+}
+.close-btn {
+    background: none;
+    border: none;
+    color: #666;
+    font-size: 24px;
+    cursor: pointer;
+    padding: 0 8px;
+    transition: color 0.2s ease;
+}
+.close-btn:hover {
+    color: #333;
+}
+.mask-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 20px;
+    padding: 20px;
+    max-height: calc(80vh - 80px);
+    overflow-y: auto;
+}
+.mask-option {
+    background: #fff;
+    border-radius: 8px;
+    padding: 15px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    border: 2px solid transparent;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+.mask-option:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+.mask-option.selected {
+    border-color: #2196F3;
+    background-color: #E3F2FD;
+}
+.mask-option img {
+    width: 100%;
+    height: 150px;
+    object-fit: contain;
+    border-radius: 4px;
+    margin-bottom: 10px;
+}
+.mask-name {
+    text-align: center;
+    font-size: 14px;
+    color: #333;
+    font-weight: 500;
+    text-transform: capitalize;
+}
+.mask-category {
+    color: #666;
+    font-size: 12px;
+    margin-top: 5px;
+    text-align: center;
+}
+/* Scrollbar style for mask grid */
+.mask-grid::-webkit-scrollbar {
+    width: 8px;
+}
+.mask-grid::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 4px;
+}
+.mask-grid::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 4px;
+}
+.mask-grid::-webkit-scrollbar-thumb:hover {
+    background: #666;
+}
+.control-btn.active {
+    background-color: #dc3545;
+    color: white;
+}

public/img/mask1.png ADDED Viewed

Git LFS Details

SHA256: dcb55652563e64aeaffa188ee38f78de9dbed9386efe4d3953dd5fc0e0015472
Pointer size: 130 Bytes
Size of remote file: 32.2 kB

public/index.html ADDED Viewed

	@@ -0,0 +1,295 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Video Meeting Room</title>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Poppins', sans-serif;
+        }
+        body {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+        }
+        .app-container {
+            max-width: 500px;
+            width: 100%;
+            margin: 0 auto;
+        }
+        .join-form {
+            background: rgba(255, 255, 255, 0.95);
+            padding: 40px;
+            border-radius: 20px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+            backdrop-filter: blur(10px);
+        }
+        h2 {
+            color: #333;
+            text-align: center;
+            margin-bottom: 30px;
+            font-size: 28px;
+            font-weight: 600;
+        }
+        .form-group {
+            margin-bottom: 25px;
+            position: relative;
+        }
+        .form-group input {
+            width: 100%;
+            padding: 15px;
+            border: 2px solid #e1e1e1;
+            border-radius: 12px;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            background: white;
+        }
+        .form-group input:focus {
+            border-color: #667eea;
+            outline: none;
+            box-shadow: 0 0 0 4px rgba(102,126,234,0.1);
+        }
+        .form-group input::placeholder {
+            color: #999;
+        }
+        .button-group {
+            display: flex;
+            gap: 15px;
+            margin-top: 35px;
+        }
+        button {
+            width: 100%;
+            padding: 15px;
+            border: none;
+            border-radius: 12px;
+            cursor: pointer;
+            font-size: 16px;
+            font-weight: 500;
+            transition: all 0.3s ease;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+        .primary-btn {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+        }
+        .primary-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(102,126,234,0.4);
+        }
+        .copy-button {
+            background: #4caf50;
+            color: white;
+            padding: 8px 15px;
+            border-radius: 8px;
+            font-size: 14px;
+            margin-left: 10px;
+        }
+        #roomInfo {
+            margin-top: 20px;
+            padding: 25px;
+            background: white;
+            border-radius: 20px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+            display: none;
+            animation: slideUp 0.5s ease;
+        }
+        #roomInfo h3 {
+            color: #333;
+            margin-bottom: 15px;
+            font-size: 20px;
+        }
+        #roomInfo p {
+            color: #666;
+            margin-bottom: 15px;
+            line-height: 1.5;
+        }
+        #roomIdDisplay {
+            background: #f5f5f5;
+            padding: 8px 15px;
+            border-radius: 8px;
+            font-family: monospace;
+            font-size: 16px;
+        }
+        @keyframes slideUp {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        @media (max-width: 480px) {
+            .join-form {
+                padding: 30px 20px;
+            }
+            h2 {
+                font-size: 24px;
+            }
+            .form-group input {
+                padding: 12px;
+                font-size: 14px;
+            }
+            button {
+                padding: 12px;
+                font-size: 14px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="app-container">
+        <div id="joinForm" class="join-form">
+            <h2>Video Meeting</h2>
+            <div class="form-group">
+                <input type="text" id="usernameInput" placeholder="Enter your name" required>
+            </div>
+            <div class="form-group">
+                <input type="text" id="meetingTitleInput" placeholder="Meeting title (optional)">
+            </div>
+            <div class="button-group">
+                <button id="createMeetingBtn" class="primary-btn">Start Meeting</button>
+                <button onclick="window.location.href='join.html'" class="secondary-btn">Join Meeting</button>
+            </div>
+        </div>
+        <div id="roomInfo">
+            <h3>🎉 Room Created Successfully!</h3>
+            <p>Your Room ID: <br>
+                <span id="roomIdDisplay"></span>
+                <button id="copyButton" class="copy-button">
+                    <i class="material-icons" style="font-size: 16px; vertical-align: middle;">content_copy</i>
+                    Copy
+                </button>
+            </p>
+            <p style="font-size: 14px; color: #666;">
+                Share this Room ID with participants to join the meeting
+            </p>
+            <button id="goToMeetingBtn" class="primary-btn">
+                Join Meeting Room
+                <i class="material-icons" style="vertical-align: middle; margin-left: 5px;">arrow_forward</i>
+            </button>
+        </div>
+    </div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/webrtc-adapter/8.1.2/adapter.min.js"></script>
+    <script type="module">
+        import CloudflareCalls from './js/CloudflareCalls.js';
+        const calls = new CloudflareCalls({
+            backendUrl: 'http://localhost:50000', // Default to same host
+            websocketUrl: `ws://localhost:50000`
+        });
+        const baseAPI = "http://localhost:50000";
+        const usernameInput = document.getElementById('usernameInput');
+        const meetingTitleInput = document.getElementById('meetingTitleInput');
+        const createMeetingBtn = document.getElementById('createMeetingBtn');
+        const roomInfo = document.getElementById('roomInfo');
+        const roomIdDisplay = document.getElementById('roomIdDisplay');
+        const copyButton = document.getElementById('copyButton');
+        const goToMeetingBtn = document.getElementById('goToMeetingBtn');
+        // Get token and initialize calls
+        async function ensureInitialized(username) {
+            if (!calls.token) {
+                try {
+                    const response = await fetch('/auth/token', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify({ username })
+                    });
+                    const { token } = await response.json();
+                    calls.setToken(token);
+                    return true;
+                } catch (err) {
+                    console.error('Error getting token:', err);
+                    alert('Failed to initialize. Please check if the server is running.');
+                    return false;
+                }
+            }
+            return true;
+        }
+        async function createRoom() {
+            if (!usernameInput.value) {
+                alert('Please enter your name');
+                return;
+            }
+            try {
+                // Initialize calls
+                if (!await ensureInitialized(usernameInput.value)) {
+                    return;
+                }
+                // Create room
+                const room = await calls.createRoom({
+                    name: meetingTitleInput.value || `${usernameInput.value}'s Room`,
+                    metadata: { createdBy: usernameInput.value }
+                });
+                // Store username in localStorage for the meeting room
+                localStorage.setItem('username', usernameInput.value);
+                // Display room info
+                roomIdDisplay.textContent = room.roomId;
+                roomInfo.style.display = 'block';
+                // Store room ID in localStorage
+                localStorage.setItem('roomId', room.roomId);
+            } catch (err) {
+                console.error('Error creating room:', err);
+                alert('Failed to create room: ' + err.message);
+            }
+        }
+        // Event Listeners
+        createMeetingBtn.addEventListener('click', createRoom);
+        copyButton.addEventListener('click', () => {
+            navigator.clipboard.writeText(roomIdDisplay.textContent)
+                .then(() => alert('Room ID copied to clipboard!'))
+                .catch(err => console.error('Failed to copy:', err));
+        });
+        goToMeetingBtn.addEventListener('click', () => {
+            window.location.href = './check.html';
+        });
+    </script>
+</body>
+</html>

public/join.html ADDED Viewed

	@@ -0,0 +1,222 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Join Meeting Room</title>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Poppins', sans-serif;
+        }
+        body {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+        }
+        .app-container {
+            max-width: 500px;
+            width: 100%;
+            margin: 0 auto;
+        }
+        .join-form {
+            background: rgba(255, 255, 255, 0.95);
+            padding: 40px;
+            border-radius: 20px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+            backdrop-filter: blur(10px);
+        }
+        h2 {
+            color: #333;
+            text-align: center;
+            margin-bottom: 30px;
+            font-size: 28px;
+            font-weight: 600;
+        }
+        .form-group {
+            margin-bottom: 25px;
+            position: relative;
+        }
+        .form-group input {
+            width: 100%;
+            padding: 15px;
+            border: 2px solid #e1e1e1;
+            border-radius: 12px;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            background: white;
+        }
+        .form-group input:focus {
+            border-color: #667eea;
+            outline: none;
+            box-shadow: 0 0 0 4px rgba(102,126,234,0.1);
+        }
+        .button-group {
+            display: flex;
+            gap: 15px;
+            margin-top: 35px;
+        }
+        button {
+            width: 100%;
+            padding: 15px;
+            border: none;
+            border-radius: 12px;
+            cursor: pointer;
+            font-size: 16px;
+            font-weight: 500;
+            transition: all 0.3s ease;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+        .primary-btn {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+        }
+        .secondary-btn {
+            background: #e0e0e0;
+            color: #333;
+        }
+        .primary-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(102,126,234,0.4);
+        }
+        .secondary-btn:hover {
+            background: #d5d5d5;
+        }
+        @media (max-width: 480px) {
+            .join-form {
+                padding: 30px 20px;
+            }
+            h2 {
+                font-size: 24px;
+            }
+            .form-group input {
+                padding: 12px;
+                font-size: 14px;
+            }
+            button {
+                padding: 12px;
+                font-size: 14px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="app-container">
+        <div class="join-form">
+            <h2>Join Meeting</h2>
+            <div class="form-group">
+                <input type="text" id="usernameInput" placeholder="Enter your name" required>
+            </div>
+            <div class="form-group">
+                <input type="text" id="roomIdInput" placeholder="Enter Room ID" required>
+            </div>
+            <div class="button-group">
+                <button class="secondary-btn" onclick="window.location.href='index.html'">Back</button>
+                <button id="joinMeetingBtn" class="primary-btn">Join Meeting</button>
+            </div>
+        </div>
+    </div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/webrtc-adapter/8.1.2/adapter.min.js"></script>
+    <script type="module">
+        import CloudflareCalls from './js/CloudflareCalls.js';
+        const calls = new CloudflareCalls({
+            backendUrl: 'http://localhost:50000',
+            websocketUrl: `ws://localhost:50000`
+        });
+        const usernameInput = document.getElementById('usernameInput');
+        const roomIdInput = document.getElementById('roomIdInput');
+        const joinMeetingBtn = document.getElementById('joinMeetingBtn');
+        // Get token and initialize calls
+        async function ensureInitialized(username) {
+            if (!calls.token) {
+                try {
+                    const response = await fetch('/auth/token', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify({ username })
+                    });
+                    const { token } = await response.json();
+                    calls.setToken(token);
+                    return true;
+                } catch (err) {
+                    console.error('Error getting token:', err);
+                    alert('Failed to initialize. Please check if the server is running.');
+                    return false;
+                }
+            }
+            return true;
+        }
+        async function joinMeeting() {
+            const username = usernameInput.value.trim();
+            const roomId = roomIdInput.value.trim();
+            if (!username || !roomId) {
+                alert('Please enter both your name and Room ID');
+                return;
+            }
+            try {
+                // Initialize calls
+                if (!await ensureInitialized(username)) {
+                    return;
+                }
+                // Store information in localStorage
+                localStorage.setItem('username', username);
+                localStorage.setItem('roomId', roomId);
+                // Redirect to device check page
+                window.location.href = './check.html';
+            } catch (err) {
+                console.error('Error joining room:', err);
+                alert('Failed to join room: ' + err.message);
+            }
+        }
+        // Event Listeners
+        joinMeetingBtn.addEventListener('click', joinMeeting);
+        // Handle enter key
+        document.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                joinMeeting();
+            }
+        });
+    </script>
+</body>
+</html>

public/js/CloudflareCalls.js ADDED Viewed

	@@ -0,0 +1,2472 @@

+/**
+ * CloudflareCalls.js
+ *
+ * High-level library for Cloudflare Calls using SFU,
+ * now leveraging WebSocket for data message publish/subscribe flow.
+ */
+/**
+ * Represents the CloudflareCalls library for managing real-time communications.
+ */
+class CloudflareCalls {
+    /**
+     * @typedef {Object} VideoQualitySettings
+     * @property {Object} width - Video width settings
+     * @property {number} width.ideal - Ideal video width in pixels
+     * @property {Object} height - Video height settings
+     * @property {number} height.ideal - Ideal video height in pixels
+     * @property {Object} frameRate - Frame rate settings
+     * @property {number} frameRate.ideal - Ideal frame rate in fps
+     * @property {number} maxBitrate - Maximum video bitrate in bps
+     */
+    /**
+     * @typedef {Object} AudioQualitySettings
+     * @property {number} maxBitrate - Maximum audio bitrate in bps
+     * @property {number} sampleRate - Audio sample rate in Hz
+     * @property {number} channelCount - Number of audio channels (1=mono, 2=stereo)
+     */
+    /**
+     * @typedef {Object} QualityPreset
+     * @property {VideoQualitySettings} video - Video quality settings
+     * @property {AudioQualitySettings} audio - Audio quality settings
+     */
+    /**
+     * @typedef {Object} ConnectionStats
+     * @property {Object} outbound - Outbound (sending) statistics
+     * @property {number} outbound.bitrate - Current outbound bitrate in bits/s
+     * @property {number} outbound.packetLoss - Percentage of packets lost
+     * @property {string} outbound.qualityLimitation - Reason for quality limitations (if any)
+     * @property {Object} inbound - Inbound (receiving) statistics per track
+     * @property {number} inbound.bitrate - Current inbound bitrate in bits/s
+     * @property {number} inbound.packetLoss - Percentage of packets lost
+     * @property {number} inbound.jitter - Current jitter in seconds
+     * @property {Object} connection - Overall connection statistics
+     * @property {number} connection.roundTripTime - Current round trip time in seconds
+     * @property {string} connection.state - Current connection state
+     */
+    /**
+     * @typedef {Object} StreamStats
+     * @property {string} sessionId - Session ID of the stream
+     * @property {number} packetLoss - Packet loss percentage
+     * @property {string} qualityLimitation - Quality limitation reason
+     * @property {number} bitrate - Current bitrate
+     */
+    /**
+     * Creates an instance of CloudflareCalls.
+     * @param {Object} config - Configuration object.
+     * @param {string} config.backendUrl - The backend server URL.
+     * @param {string} config.websocketUrl - The WebSocket server URL.
+     */
+    constructor(config = {}) {
+        this.backendUrl = config.backendUrl || '';
+        this.websocketUrl = config.websocketUrl || '';
+        this.debug = config.debug || false;
+        this.token = null;
+        this.roomId = null;
+        this.sessionId = null;
+        this.userId = this._generateUUID();
+        this.userMetadata = {};
+        this.localStream = null;
+        this.peerConnection = null;
+        this.ws = null;
+        // Specific message handlers
+        this._onParticipantJoinedCallback = null;
+        this._onParticipantLeftCallback = null;
+        this._onRemoteTrackCallback = null;
+        this._onRemoteTrackUnpublishedCallback = null;
+        this._onTrackStatusChangedCallback = null;
+        this._onDataMessageCallback = null;
+        this._onConnectionStatsCallback = null;
+        // Generic message handlers
+        this._wsMessageHandlers = new Set();
+        // Track management
+        this.pulledTracks = new Map(); // Map<sessionId, Set<trackName>>
+        this.pollingInterval = null; // Reference to the polling interval
+        // Device management
+        this.availableAudioInputDevices = [];
+        this.availableVideoInputDevices = [];
+        this.availableAudioOutputDevices = [];
+        this.currentAudioOutputDeviceId = null;
+        this._renegotiateTimeout = null;
+        this.publishedTracks = new Set();
+        this.midToSessionId = new Map();
+        this.midToTrackName = new Map();
+        this._onRoomMetadataUpdatedCallback = null;
+        // Store initial quality settings
+        /** @type {QualityPreset} */
+        this.pendingQualitySettings = null;
+        this.mediaQuality = CloudflareCalls.QUALITY_PRESETS.medium_16x9_md;
+        /** @type {Object.<string, QualityPreset>} */
+        this.QUALITY_PRESETS = CloudflareCalls.QUALITY_PRESETS;
+        // Stats monitoring
+        this.statsInterval = null;
+        this.previousStats = null;
+        /** @type {'stopped'|'monitoring'} */
+        this.statsMonitoringState = 'stopped';
+    }
+    /**
+     * Internal logging method that only outputs when debug is enabled
+     * @private
+     * @param {...any} args - Arguments to pass to console.log
+     */
+    _log(...args) {
+        if (this.debug) {
+            console.log('[CloudflareCalls]', ...args);
+        }
+    }
+    /**
+     * Internal warning method that only outputs when debug is enabled
+     * @private
+     * @param {...any} args - Arguments to pass to console.warn
+     */
+    _warn(...args) {
+        if (this.debug) {
+            console.warn('[CloudflareCalls]', ...args);
+        }
+    }
+    /**
+     * Internal error method that always outputs (important for debugging)
+     * @private
+     * @param {...any} args - Arguments to pass to console.error
+     */
+    _error(...args) {
+        console.error('[CloudflareCalls]', ...args);
+    }
+    /**
+     * Enable or disable debug logging
+     * @param {boolean} enabled - Whether to enable debug logging
+     */
+    setDebugMode(enabled) {
+        this.debug = Boolean(enabled);
+    }
+    /**
+     * Internal method to perform fetch requests with automatic token inclusion and JSON parsing.
+     * @private
+     * @param {string} url - The full URL to fetch.
+     * @param {Object} options - Fetch options such as method, headers, body, etc.
+     * @returns {Promise<Object>} The parsed JSON response.
+     * @throws {Error} If the response is not OK.
+     */
+    async _fetch(url, options = {}) {
+        // Initialize headers if not provided
+        options.headers = options.headers || {};
+        // Add Authorization header if token is set
+        if (this.token) {
+            options.headers['Authorization'] = `Bearer ${this.token}`;
+        }
+        try {
+            const response = await fetch(url, options);
+            // Check if the response status is OK (status in the range 200-299)
+            if (!response.ok) {
+                this._warn(`HTTP error! status: ${response.status}`);
+            }
+            return response;
+        } catch (error) {
+            this._warn(`Fetch error for ${url}:`, error);
+            return false;
+        }
+    }
+    /************************************************
+     * Callback Registration
+     ***********************************************/
+    /**
+     * Registers a callback for remote track events.
+     * @param {Function} callback - The callback function to handle remote tracks.
+     */
+    onRemoteTrack(callback) {
+        this._onRemoteTrackCallback = callback;
+    }
+    /**
+     * Registers a callback for remote track unpublished events.
+     * @param {Function} callback - The callback function to handle track unpublished events.
+     */
+    onRemoteTrackUnpublished(callback) {
+        this._onRemoteTrackUnpublishedCallback = callback;
+    }
+    /**
+     * Registers a callback for incoming data messages.
+     * @param {Function} callback - The callback function to handle data messages.
+     */
+    onDataMessage(callback) {
+        this._onDataMessageCallback = callback;
+    }
+    /**
+     * Registers a callback for participant joined events.
+     * @param {Function} callback - The callback function to handle participant joins.
+     */
+    onParticipantJoined(callback) {
+        this._onParticipantJoinedCallback = callback;
+    }
+    /**
+     * Registers a callback for participant left events.
+     * @param {Function} callback - The callback function to handle participant departures.
+     */
+    onParticipantLeft(callback) {
+        this._onParticipantLeftCallback = callback;
+    }
+    /**
+     * Registers a callback for track status changed events.
+     * @param {Function} callback - The callback function to handle track status changes.
+     */
+    onTrackStatusChanged(callback) {
+        this._onTrackStatusChangedCallback = callback;
+    }
+    /**
+     * Registers a callback for WebSocket messages
+     * @param {Function} callback - Function to call when WebSocket messages are received
+     * @returns {Function} Function to unregister the callback
+     */
+    onWebSocketMessage(callback) {
+        this._wsMessageHandlers.add(callback);
+        return () => this._wsMessageHandlers.delete(callback);
+    }
+    /************************************************
+     * User Metadata Management
+     ***********************************************/
+    /**
+     * Sets the user token for server requests. This should be a JWT token, and will be delivered in Authorization headers (HTTP) and to authenticate websocket join requests.
+     * @param {String} token - The metadata to associate with the user.
+     */
+    setToken(token) {
+        this.token = token;
+    }
+    /**
+     * Register callback for room metadata updates
+     * @param {Function} callback Callback function
+     */
+    onRoomMetadataUpdated(callback) {
+        this._onRoomMetadataUpdatedCallback = callback;
+    }
+    /**
+     * Sets the user metadata and updates it on the server.
+     * @param {Object} metadata - The metadata to associate with the user.
+     */
+    setUserMetadata(metadata) {
+        this.userMetadata = metadata;
+        this._updateUserMetadataOnServer();
+    }
+    /**
+     * Retrieves the current user metadata.
+     * @returns {Object} The user metadata.
+     */
+    getUserMetadata() {
+        return this.userMetadata;
+    }
+    /**
+     * Updates user metadata on the server
+     * @private
+     * @async
+     * @returns {Promise<void>}
+     */
+    async _updateUserMetadataOnServer() {
+        if (!this.roomId || !this.sessionId) {
+            this._warn('Cannot update metadata before joining a room.');
+            return;
+        }
+        try {
+            const updateUrl = `${this.backendUrl}/api/rooms/${this.roomId}/metadata`;
+            const response = await this._fetch(updateUrl, {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(this.userMetadata)
+            });
+            if (!response.ok) {
+                this._error('Failed to update user metadata on server.');
+            } else {
+                this._log('User metadata updated on server.');
+            }
+        } catch (error) {
+            this._error('Error updating user metadata:', error);
+            throw error;
+        }
+    }
+    /************************************************
+     * Room & Session Management
+     ***********************************************/
+    /**
+     * Creates a new room with optional metadata.
+     * @async
+     * @param {Object} options Room creation options
+     * @param {string} [options.name] Room name
+     * @param {Object} [options.metadata] Room metadata
+     * @returns {Promise<Object>} Created room information including roomId, name, metadata, etc.
+     */
+    async createRoom(options = {}) {
+        const resp = await this._fetch(`${this.backendUrl}/api/rooms`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(options)
+        }).then(r => r.json());
+        // Store the roomId
+        this.roomId = resp.roomId;
+        // Return the full room object
+        return resp;
+    }
+    /**
+     * Joins an existing room.
+     * @async
+     * @param {string} roomId - The ID of the room to join.
+     * @param {Object} [metadata={}] - Optional metadata for the user.
+     * @returns {Promise<void>}
+     */
+    async joinRoom(roomId, metadata = {}) {
+        this.roomId = roomId;
+        // 1) Ask server to create a CF Calls session
+        const joinResp = await this._fetch(`${this.backendUrl}/api/rooms/${roomId}/join`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ userId: this.userId, metadata: this.userMetadata })
+        }).then(r => r.json());
+        await this._initWebSocket();
+        if (!joinResp.sessionId) {
+            throw new Error('Failed to join room or retrieve sessionId');
+        }
+        this.sessionId = joinResp.sessionId;
+        // Initialize pulledTracks map
+        this.pulledTracks.set(this.sessionId, new Set());
+        // 2) Create RTCPeerConnection
+        this.peerConnection = await this._createPeerConnection();
+        // 3) Get Local Media and Publish Tracks
+        if (!this.localStream) {
+            this.localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
+            this._log('Acquired local media');
+        }
+        await this._publishTracks();
+        // 4) Pull other participants' tracks
+        const otherSessions = joinResp.otherSessions || [];
+        for (const s of otherSessions) {
+            this.pulledTracks.set(s.sessionId, new Set());
+            for (const tName of s.publishedTracks || []) {
+                await this._pullTracks(s.sessionId, tName);
+            }
+        }
+        this._log('Joined room', roomId, 'my session:', this.sessionId);
+        this.setUserMetadata(metadata);
+        // 5) Start polling for new tracks
+        this._startPolling();
+    }
+    /**
+     * Cleans up ended tracks in localStream
+     * @async
+     * @private
+     * @returns {void}
+     */
+    async _cleanupEndedTracks() {
+        // Clear local media devices (readyState == 'ended', so they can't be reused)
+        if (this.localStream) {
+            for (const track of this.localStream.getTracks()) {
+                if (track.readyState === 'ended') {
+                    this.localStream.removeTrack(track);
+                    track.stop();
+                }
+            }
+        }
+        // If no tracks remain, clear the stream
+        if (this.localStream && !this.localStream.getTracks().length) {
+            this.localStream = null;
+        }
+    }
+    /**
+     * Leaves the current room and cleans up connections.
+     * @async
+     * @returns {Promise<void>}
+     */
+    async leaveRoom() {
+        if (!this.roomId || !this.sessionId) return;
+        // Clean up published tracks (if applicable)
+        const senders = this.peerConnection.getSenders();
+        if (senders && senders.length) {
+            await this.unpublishAllTracks();
+        }
+        try {
+            await this._fetch(`${this.backendUrl}/api/rooms/${this.roomId}/leave`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ sessionId: this.sessionId })
+            });
+        } catch (error) {
+            this._warn('Error leaving room:', error);
+        }
+        // Clean up WebSocket
+        if (this.ws) {
+            this.ws.close();
+            this.ws = null;
+        }
+        // Clean up PeerConnection
+        if (this.peerConnection) {
+            this.peerConnection.close();
+            this.peerConnection = null;
+        }
+        await this._cleanupEndedTracks();
+        this._log('Left room, closed PC & WS');
+        // Reset room state
+        this.roomId = null;
+        this.sessionId = null;
+        this.pulledTracks.clear();
+        this.midToSessionId.clear();
+        this.midToTrackName.clear();
+        this.publishedTracks.clear();
+    }
+    /************************************************
+     * Publish & Pull
+     ***********************************************/
+    /**
+     * Publishes the local media tracks to the room.
+     * @async
+     * @returns {Promise<void>}
+     * @throws {Error} If there is no local media stream to publish.
+     */
+    async publishTracks() {
+        if (!this.localStream) {
+            return this._warn('No local media stream to publish.');
+        }
+        await this._publishTracks();
+    }
+    // /**
+    //  * Unpublishes a specific local media track (audio or video).
+    //  * @async
+    //  * @param {string} trackKind - The kind of track to unpublish ('audio' or 'video').
+    //  * @param {boolean} [force=false] - If true, forces track closure without renegotiation.
+    //  * @returns {Promise<Object>} Result object from the Cloudflare API.
+    //  * @throws {Error} If PeerConnection is not established or track is not found.
+    //  */
+    // // Todo: I don't think this method works
+    // async unpublishTrack(trackKind, force = false) {
+    //     if (!this.peerConnection) {
+    //         return this._warn('PeerConnection is not established.');
+    //     }
+    //
+    //     const sender = this.peerConnection.getSenders().find(s => s.track?.kind === trackKind);
+    //     if (!sender) {
+    //         return this._warn(`No ${trackKind} track found to unpublish.`);
+    //     }
+    //
+    //     const transceiver = this.peerConnection.getTransceivers().find(t => t.sender === sender);
+    //     if (!transceiver?.mid) {
+    //         throw new Error('Could not find transceiver mid for track');
+    //     }
+    //
+    //     try {
+    //         // Create an offer for the updated state
+    //         const offer = await this.peerConnection.createOffer();
+    //         await this.peerConnection.setLocalDescription(offer);
+    //
+    //         const unpublishUrl = `${this.backendUrl}/api/rooms/${this.roomId}/sessions/${this.sessionId}/unpublish`;
+    //         const response = await this._fetch(unpublishUrl, {
+    //             method: 'POST',
+    //             headers: { 'Content-Type': 'application/json' },
+    //             body: JSON.stringify({
+    //                 trackName: sender.track.id,
+    //                 mid: transceiver.mid,
+    //                 force,
+    //                 sessionDescription: {
+    //                     type: offer.type,
+    //                     sdp: offer.sdp
+    //                 }
+    //             })
+    //         });
+    //
+    //         if (!response || !response.ok) return false;
+    //         const result = await response.json();
+    //
+    //         // Stop the track
+    //         sender.track.stop();
+    //
+    //         // Remove from PeerConnection after server confirms
+    //         this.peerConnection.removeTrack(sender);
+    //
+    //         // Remove from our tracked set
+    //         this.publishedTracks.delete(sender.track.id);
+    //
+    //         return result;
+    //     } catch (error) {
+    //         this._warn(`Error unpublishing ${trackKind} track:`, error);
+    //         return false;
+    //     }
+    // }
+    /**
+     * Initiates renegotiation of the PeerConnection.
+     * @async
+     * @private
+     * @returns {Promise<void>}
+     */
+    async _renegotiate() {
+        if (!this.peerConnection) return;
+        if (this._renegotiateTimeout) {
+            clearTimeout(this._renegotiateTimeout);
+        }
+        this._renegotiateTimeout = setTimeout(async () => {
+            try {
+                this._log('Starting renegotiation process...');
+                const answer = await this.peerConnection.createAnswer();
+                this._log('Created renegotiation answer:', answer.sdp);
+                await this.peerConnection.setLocalDescription(answer);
+                const renegotiateUrl = `${this.backendUrl}/api/rooms/${this.roomId}/sessions/${this.sessionId}/renegotiate`;
+                const body = { sdp: answer.sdp, type: answer.type };
+                this._log(`Sending renegotiate request to ${renegotiateUrl} with body:`, body);
+                const response = await this._fetch(renegotiateUrl, {
+                    method: 'PUT',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(body)
+                }).then(r => r.json());
+                if (response.errorCode) {
+                    this._warn('Renegotiation failed:', response.errorDescription);
+                    return;
+                }
+                await this.peerConnection.setRemoteDescription(response.sessionDescription);
+                this._log('Renegotiation successful. Applied SFU response.');
+            } catch (error) {
+                this._error('Error during renegotiation:', error);
+            }
+        }, 500);
+    }
+    /**
+     * Updates the published media tracks.
+     * @async
+     * @returns {Promise<void>}
+     * @throws {Error} If the PeerConnection is not established.
+     */
+    // Todo: I don't know what this was supposed to accomplish
+    // Possibly unpublish and re-publish tracks to solve some lifecycle issue
+    async updatePublishedTracks() {
+        if (!this.peerConnection) {
+            return this._warn('PeerConnection is not established.');
+        }
+        // Remove existing senders
+        const senders = this.peerConnection.getSenders();
+        for (const sender of senders) {
+            this.peerConnection.removeTrack(sender);
+        }
+        // Add updated tracks
+        await this._publishTracks();
+    }
+    /**
+     * Publishes the local media tracks to the PeerConnection and server.
+     * @async
+     * @private
+     * @returns {Promise<void>}
+     */
+    async _publishTracks() {
+        if (!this.localStream || !this.peerConnection) return;
+        const transceivers = [];
+        for (const track of this.localStream.getTracks()) {
+            // Check if we've already published this track
+            if (this.publishedTracks.has(track.id)) continue;
+            if (track.readyState !== 'live') continue;
+            const tx = this.peerConnection.addTransceiver(track, { direction: 'sendonly' });
+            // Apply any pending quality settings to video tracks
+            if (this.pendingQualitySettings && track.kind === 'video') {
+                const params = tx.sender.getParameters();
+                params.encodings = [{
+                    maxBitrate: this.pendingQualitySettings.video.maxBitrate
+                }];
+                tx.sender.setParameters(params);
+            }
+            transceivers.push(tx);
+            this.publishedTracks.add(track.id);
+        }
+        if (transceivers.length === 0) return;  // No new tracks to publish
+        const offer = await this.peerConnection.createOffer();
+        this._log('SDP Offer:', offer.sdp);
+        await this.peerConnection.setLocalDescription(offer);
+        const trackInfos = transceivers.map(({ sender, mid }) => ({
+            location: 'local',
+            mid,
+            trackName: sender.track.id
+        }));
+        const body = {
+            offer: { sdp: offer.sdp, type: offer.type },
+            tracks: trackInfos,
+            metadata: this.userMetadata
+        };
+        const publishUrl = `${this.backendUrl}/api/rooms/${this.roomId}/sessions/${this.sessionId}/publish`;
+        const resp = await this._fetch(publishUrl, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(body)
+        }).then(r => r.json());
+        if (resp.errorCode) {
+            this._error('Publish error:', resp.errorDescription);
+            return;
+        }
+        // The SFU's answer
+        const answer = resp.sessionDescription;
+        await this.peerConnection.setRemoteDescription(answer);
+        this._log('Publish => success. Applied SFU answer.');
+    }
+    /**
+     * Pulls a specific track from a remote session.
+     * @async
+     * @private
+     * @param {string} remoteSessionId - The session ID of the remote participant.
+     * @param {string} trackName - The name of the track to pull.
+     * @returns {Promise<void>}
+     */
+    async _pullTracks(remoteSessionId, trackName) {
+        this._log(`Pulling track '${trackName}' from session ${remoteSessionId}`);
+        const pullUrl = `${this.backendUrl}/api/rooms/${this.roomId}/sessions/${this.sessionId}/pull`;
+        const body = { remoteSessionId, trackName };
+        const resp = await this._fetch(pullUrl, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(body)
+        }).then(r => r.json());
+        if (resp.errorCode) {
+            this._error('Pull error:', resp.errorDescription);
+            return;
+        }
+        if (resp.requiresImmediateRenegotiation) {
+            this._log('Pull => requires renegotiation');
+            // Set up both mappings from the SDP
+            const pendingMids = new Set();
+            resp.sessionDescription.sdp.split('\n').forEach(line => {
+                if (line.startsWith('a=mid:')) {
+                    const mid = line.split(':')[1].trim();
+                    pendingMids.add(mid);
+                    this.midToSessionId.set(mid, remoteSessionId);
+                    this.midToTrackName.set(mid, trackName);
+                    this._log('Pre-mapped MID:', {
+                        mid,
+                        sessionId: remoteSessionId,
+                        trackName
+                    });
+                }
+            });
+            // Now set the remote description
+            await this.peerConnection.setRemoteDescription(resp.sessionDescription);
+            // Create and set local answer
+            const localAnswer = await this.peerConnection.createAnswer();
+            await this.peerConnection.setLocalDescription(localAnswer);
+            // Verify mappings are still correct
+            const transceivers = this.peerConnection.getTransceivers();
+            transceivers.forEach(transceiver => {
+                if (transceiver.mid && pendingMids.has(transceiver.mid)) {
+                    this._log('Verified MID mapping:', {
+                        mid: transceiver.mid,
+                        sessionId: remoteSessionId,
+                        direction: transceiver.direction
+                    });
+                }
+            });
+            await this._fetch(`${this.backendUrl}/api/rooms/${this.roomId}/sessions/${this.sessionId}/renegotiate`, {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ sdp: localAnswer.sdp, type: localAnswer.type })
+            });
+        }
+        this._log(`Pulled trackName="${trackName}" from session ${remoteSessionId}`);
+        this._log('Current MID mappings:', Array.from(this.midToSessionId.entries()));
+        // Record the pulled track
+        if (!this.pulledTracks.has(remoteSessionId)) {
+            this.pulledTracks.set(remoteSessionId, new Set());
+        }
+        this.pulledTracks.get(remoteSessionId).add(trackName);
+    }
+    /************************************************
+     * PeerConnection & WebSocket
+     ***********************************************/
+    /**
+     * Creates and configures a new RTCPeerConnection.
+     * @async
+     * @private
+     * @returns {Promise<RTCPeerConnection>} The configured RTCPeerConnection instance.
+     */
+    async _attemptIceServersUpdate() {
+        let iceServers = [{ urls: 'stun:stun.cloudflare.com:3478' }];
+        try {
+            const response = await this._fetch(`${this.backendUrl}/api/ice-servers`);
+            if (!response.ok) {
+                this._warn(`Failed to fetch ICE servers: ${response.status} ${response.statusText}`);
+                return false;
+            }
+            const data = await response.json();
+            // Validate and process the fetched ICE servers
+            if (data.iceServers && Array.isArray(data.iceServers)) {
+                iceServers = data.iceServers.map(server => {
+                    // Ensure each server has the required fields
+                    const iceServer = { urls: server.urls };
+                    if (server.username && server.credential) {
+                        iceServer.username = server.username;
+                        iceServer.credential = server.credential;
+                    }
+                    return iceServer;
+                });
+                this._log('Fetched ICE servers:', iceServers);
+            } else {
+                return iceServers;
+            }
+        } catch (error) {
+            this._warn('Error fetching ICE servers:', error);
+            // Fallback to default ICE servers if fetching fails
+            return false;
+        }
+    }
+    async _createPeerConnection() {
+        let iceServers = await this._attemptIceServersUpdate() || [{ urls: 'stun:stun.cloudflare.com:3478' }];
+        const pc = new RTCPeerConnection({
+            iceServers: iceServers,
+            bundlePolicy: 'max-bundle',
+            sdpSemantics: 'unified-plan'
+        });
+        pc.onicecandidate = (evt) => {
+            if (evt.candidate) {
+                this._log('New ICE candidate:', evt.candidate.candidate);
+            } else {
+                this._log('All ICE candidates have been sent');
+            }
+        };
+        pc.oniceconnectionstatechange = () => {
+            this._log('ICE Connection State:', pc.iceConnectionState);
+            if (pc.iceConnectionState === 'disconnected' || pc.iceConnectionState === 'failed') {
+                this.leaveRoom();
+            }
+        };
+        pc.onconnectionstatechange = () => {
+            this._log('Connection State:', pc.connectionState);
+            if (pc.connectionState === 'connected') {
+                this._log('Peer connection fully established');
+            } else if (pc.connectionState === 'disconnected' || pc.connectionState === 'failed') {
+                this._log('Peer connection disconnected or failed');
+                this.leaveRoom();
+            }
+        };
+        pc.ontrack = (evt) => {
+            this._log('ontrack event:', {
+                kind: evt.track.kind,
+                webrtcTrackId: evt.track.id,
+                mid: evt.transceiver?.mid
+            });
+            if (this._onRemoteTrackCallback) {
+                const mid = evt.transceiver?.mid;
+                const sessionId = this.midToSessionId.get(mid);
+                const trackName = this.midToTrackName.get(mid);
+                this._log('Track mapping lookup:', {
+                    mid,
+                    sessionId,
+                    trackName,
+                    webrtcTrackId: evt.track.id,
+                    availableMappings: {
+                        sessions: Array.from(this.midToSessionId.entries()),
+                        tracks: Array.from(this.midToTrackName.entries())
+                    }
+                });
+                if (!sessionId) {
+                    this._warn('No sessionId found for mid:', mid);
+                    if (!this.pendingTracks) this.pendingTracks = [];
+                    this.pendingTracks.push({ evt, mid });
+                    return;
+                }
+                const wrappedTrack = evt.track;
+                wrappedTrack.sessionId = sessionId;
+                wrappedTrack.mid = mid;
+                wrappedTrack.trackName = trackName;
+                this._log('Sending track to callback:', {
+                    webrtcTrackId: wrappedTrack.id,
+                    trackName: wrappedTrack.trackName,
+                    sessionId: wrappedTrack.sessionId,
+                    mid: wrappedTrack.mid
+                });
+                this._onRemoteTrackCallback(wrappedTrack);
+            }
+        };
+        return pc;
+    }
+    /**
+     * Initializes the WebSocket connection.
+     * @async
+     * @private
+     * @returns {Promise<void>}
+     */
+    async _initWebSocket() {
+        if (this.ws && this.ws.readyState === WebSocket.OPEN) return;
+        return new Promise((resolve, reject) => {
+            this.ws = new WebSocket(this.websocketUrl);
+            this.ws.onopen = () => {
+                this._log('WebSocket open');
+                this.ws.send(JSON.stringify({
+                    type: 'join-websocket',
+                    payload: {
+                        roomId: this.roomId,
+                        userId: this.userId,
+                        token: this.token
+                    }
+                }));
+                resolve();
+            };
+            this.ws.onmessage = (event) => {
+                try {
+                    const message = JSON.parse(event.data);
+                    this._log('WebSocket message received:', message);
+                    // Handle specific message types
+                    switch (message.type) {
+                        case 'participant-joined':
+                    if (this._onParticipantJoinedCallback) {
+                                this._onParticipantJoinedCallback(message.payload);
+                            }
+                            break;
+                        case 'participant-left':
+                            if (this._onParticipantLeftCallback) {
+                                this._onParticipantLeftCallback(message.payload);
+                            }
+                            break;
+                        case 'track-published':
+                            if (this._onRemoteTrackCallback) {
+                                // Handle track published event
+                                this._onRemoteTrackCallback(message.payload);
+                            }
+                            break;
+                        case 'track-unpublished':
+                    if (this._onRemoteTrackUnpublishedCallback) {
+                                this._onRemoteTrackUnpublishedCallback(
+                                    message.payload.sessionId,
+                                    message.payload.trackName
+                                );
+                            }
+                            break;
+                        case 'track-status-changed':
+                            if (this._onTrackStatusChangedCallback) {
+                                this._onTrackStatusChangedCallback(message.payload);
+                            }
+                            break;
+                        case 'data-message':
+                    if (this._onDataMessageCallback) {
+                                this._onDataMessageCallback(message.payload);
+                            }
+                            break;
+                        case 'room-metadata-updated':
+                            if (this._onRoomMetadataUpdatedCallback) {
+                                this._onRoomMetadataUpdatedCallback(message.payload);
+                            }
+                            break;
+                        default:
+                            this._log('Unhandled message type:', message.type);
+                    }
+                    // Notify generic handlers
+                    this._wsMessageHandlers.forEach(handler => handler(message));
+                } catch (error) {
+                    this._error('Error processing WebSocket message:', error);
+                }
+            };
+            this.ws.onerror = (err) => {
+                this._error('WebSocket error:', err);
+                reject(err);
+            };
+            this.ws.onclose = () => {
+                this._log('WebSocket connection closed');
+            };
+        });
+    }
+    /************************************************
+     * Polling for New Tracks
+     ***********************************************/
+    /**
+     * Starts polling the server for new tracks every 10 seconds.
+     * @private
+     * @returns {void}
+     */
+    _startPolling() {
+        this.pollingInterval = setInterval(async () => {
+            if (!this.roomId) return;
+            try {
+                const resp = await this._fetch(`${this.backendUrl}/api/rooms/${this.roomId}/participants`)
+                    .then(r => r.json());
+                const participants = resp.participants || [];
+                for (const participant of participants) {
+                    const { sessionId, publishedTracks } = participant;
+                    if (sessionId === this.sessionId) continue; // Skip self
+                    if (!this.pulledTracks.has(sessionId)) {
+                        this.pulledTracks.set(sessionId, new Set());
+                    }
+                    for (const trackName of publishedTracks) {
+                        if (!this.pulledTracks.get(sessionId).has(trackName)) {
+                            this._log(`[Polling] New track detected: ${trackName} from session ${sessionId}`);
+                            await this._pullTracks(sessionId, trackName);
+                        }
+                    }
+                }
+            } catch (err) {
+                this._error('Polling error:', err);
+            }
+        }, 10000);
+    }
+    /************************************************
+     * Device Management
+     ***********************************************/
+    /**
+     * Retrieves the list of available media devices.
+     * @async
+     * @returns {Promise<Object>} An object containing arrays of audio input, video input, and audio output devices.
+     */
+    async getAvailableDevices() {
+        const devices = await navigator.mediaDevices.enumerateDevices();
+        this.availableAudioInputDevices = devices.filter(device => device.kind === 'audioinput');
+        this.availableVideoInputDevices = devices.filter(device => device.kind === 'videoinput');
+        this.availableAudioOutputDevices = devices.filter(device => device.kind === 'audiooutput');
+        return {
+            audioInput: this.availableAudioInputDevices,
+            videoInput: this.availableVideoInputDevices,
+            audioOutput: this.availableAudioOutputDevices
+        };
+    }
+    /**
+     * Selects a specific audio input device.
+     * @async
+     * @param {string} deviceId - The ID of the audio input device to select.
+     * @returns {Promise<void>}
+     */
+    async selectAudioInputDevice(deviceId) {
+        if (!deviceId) {
+            this._warn('No deviceId provided for audio input.');
+            return;
+        }
+        const constraints = {
+            audio: { deviceId: { exact: deviceId } },
+            video: false
+        };
+        try {
+            const newStream = await navigator.mediaDevices.getUserMedia(constraints);
+            const newAudioTrack = newStream.getAudioTracks()[0];
+            const sender = this.peerConnection.getSenders().find(s => s.track.kind === 'audio');
+            if (sender) {
+                sender.replaceTrack(newAudioTrack);
+                const oldTrack = sender.track;
+                oldTrack.stop();
+            } else {
+                this.localStream.addTrack(newAudioTrack);
+                await this._publishTracks();
+            }
+            this._log(`Switched to audio input device: ${deviceId}`);
+        } catch (error) {
+            this._error('Error switching audio input device:', error);
+        }
+    }
+    /**
+     * Selects a specific video input device.
+     * @async
+     * @param {string} deviceId - The ID of the video input device to select.
+     * @returns {Promise<void>}
+     */
+    async selectVideoInputDevice(deviceId) {
+        if (!deviceId) {
+            this._warn('No deviceId provided for video input.');
+            return;
+        }
+        const constraints = {
+            video: { deviceId: { exact: deviceId } },
+            audio: false
+        };
+        try {
+            const newStream = await navigator.mediaDevices.getUserMedia(constraints);
+            const newVideoTrack = newStream.getVideoTracks()[0];
+            const sender = this.peerConnection.getSenders().find(s => s.track.kind === 'video');
+            if (sender) {
+                sender.replaceTrack(newVideoTrack);
+                const oldTrack = sender.track;
+                oldTrack.stop();
+            } else {
+                this.localStream.addTrack(newVideoTrack);
+                await this._publishTracks();
+            }
+            this._log(`Switched to video input device: ${deviceId}`);
+        } catch (error) {
+            this._error('Error switching video input device:', error);
+        }
+    }
+    /**
+     * Selects a specific audio output device.
+     * @async
+     * @param {string} deviceId - The ID of the audio output device to select.
+     * @returns {Promise<void>}
+     */
+    async selectAudioOutputDevice(deviceId) {
+        if (!deviceId) {
+            this._warn('No deviceId provided for audio output.');
+            return;
+        }
+        try {
+            const audioElements = document.querySelectorAll('audio');
+            for (const audio of audioElements) {
+                await audio.setSinkId(deviceId);
+            }
+            this.currentAudioOutputDeviceId = deviceId;
+            this._log(`Switched to audio output device: ${deviceId}`);
+        } catch (error) {
+            this._error('Error switching audio output device:', error);
+        }
+    }
+    /**
+     * Previews media streams with specified device IDs.
+     * @async
+     * @param {Object} params - Parameters for media preview.
+     * @param {string} [params.audioDeviceId] - The ID of the audio input device to use.
+     * @param {string} [params.videoDeviceId] - The ID of the video input device to use.
+     * @param {HTMLMediaElement} [previewElement=null] - The media element to display the preview.
+     * @returns {Promise<MediaStream>} The media stream being previewed.
+     * @throws {Error} If there is an issue accessing the media devices.
+     */
+    async previewMedia({ audioDeviceId, videoDeviceId }, previewElement = null) {
+        const constraints = {
+            audio: audioDeviceId ? { deviceId: { exact: audioDeviceId } } : false,
+            video: videoDeviceId ? { deviceId: { exact: videoDeviceId } } : false
+        };
+        try {
+            const stream = await navigator.mediaDevices.getUserMedia(constraints);
+            if (previewElement) {
+                previewElement.srcObject = stream;
+            }
+            return stream;
+        } catch (error) {
+            this._error('Error previewing media:', error);
+            throw error;
+        }
+    }
+    /************************************************
+     * Media Controls
+     ***********************************************/
+    /**
+     * Toggles the enabled state of video and/or audio tracks.
+     * @param {Object} options - Options to toggle media tracks.
+     * @param {boolean} [options.video=null] - Whether to toggle video tracks.
+     * @param {boolean} [options.audio=null] - Whether to toggle audio tracks.
+     * @returns {void}
+     */
+    toggleMedia({ video = null, audio = null }) {
+        if (!this.localStream) return;
+        if (video !== null) {
+            const videoTracks = this.localStream.getVideoTracks();
+            videoTracks.forEach(track => {
+                track.enabled = video;
+                // Find the corresponding sender and update the track status
+                const sender = this.peerConnection?.getSenders().find(s => s.track === track);
+                if (sender) {
+                    // Send track status update to SFU
+                    this._updateTrackStatus(sender.track.id, 'video', video);
+                }
+            });
+        }
+        if (audio !== null) {
+            const audioTracks = this.localStream.getAudioTracks();
+            audioTracks.forEach(track => {
+                track.enabled = audio;
+                // Find the corresponding sender and update the track status
+                const sender = this.peerConnection?.getSenders().find(s => s.track === track);
+                if (sender) {
+                    // Send track status update to SFU
+                    this._updateTrackStatus(sender.track.id, 'audio', audio);
+                }
+            });
+        }
+    }
+    /**
+     * Starts screen sharing.
+     * @async
+     * @returns {Promise<void>}
+     */
+    async shareScreen() {
+        try {
+            // Stop any existing video tracks (Todo: breaks the addTrack)
+            await this.unpublishAllTracks('video');
+            const screenStream = await navigator.mediaDevices.getDisplayMedia({
+                video: true,
+                audio: false  // Most browsers don't support screen audio yet
+            });
+            const screenTrack = screenStream.getVideoTracks()[0];
+            // Add the new screen track
+            this.localStream.addTrack(screenTrack);
+            // Publish the new track
+            await this._publishTracks();
+            // Handle the user stopping screen share
+            screenTrack.onended = async () => {
+                await this.unpublishAllTracks();
+                await this._cleanupEndedTracks();
+                this.localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
+                this._log('Re-acquired local media');
+                await this._publishTracks();
+            };
+        } catch (err) {
+            this._error('Error sharing screen:', err);
+            throw err;
+        }
+    }
+    /************************************************
+     * WebSocket-Based Data Communication
+     ***********************************************/
+    /**
+     * Internal method to send a message via WebSocket.
+     * @private
+     * @param {Object} data - The data object to send.
+     * @returns {void}
+     */
+    _sendWebSocketMessage(data) {
+        if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
+            this._warn('WebSocket is not open. Cannot send message.');
+            return;
+        }
+        this.ws.send(JSON.stringify(data));
+        this._log('Sent WebSocket message:', data);
+    }
+    /************************************************
+     * Participant Management
+     ***********************************************/
+    /**
+     * Lists all participants currently in the room.
+     * @async
+     * @returns {Promise<Array<Object>>} An array of participant objects.
+     * @throws {Error} If not connected to any room.
+     */
+    async listParticipants() {
+        if (!this.roomId) {
+            return this._warn('Not connected to any room.');
+        }
+        const resp = await this._fetch(`${this.backendUrl}/api/rooms/${this.roomId}/participants`)
+            .then(r => r.json());
+        return resp.participants || [];
+    }
+    /************************************************
+     * Helpers & Placeholders
+     ***********************************************/
+    /**
+     * Generates a simple UUID.
+     * @private
+     * @returns {string} A generated UUID string.
+     */
+    _generateUUID() {
+        // Simple placeholder generator
+        return 'xxxx-xxxx-xxxx-xxxx'.replace(/[x]/g, () =>
+            ((Math.random() * 16) | 0).toString(16)
+        );
+    }
+    /**
+     * Unpublishes all currently published tracks (with filters for type)
+     * @async
+     * @param {string} trackKind - The kind of track to unpublish ('audio' or 'video').
+     * @param {boolean} [force=false] - If true, forces track closure without renegotiation.
+     * @returns {Promise<void>}
+     */
+    async unpublishAllTracks(trackKind, force = false) {
+        if (!this.peerConnection) {
+            this._warn('PeerConnection is not established.');
+            return;
+        }
+        let senders = this.peerConnection.getSenders();
+        if (trackKind) {
+            senders = senders.filter(s => s.track && s.track.kind === trackKind);
+        }
+        this._log('Unpublishing all tracks:', senders.length);
+        // Create an offer for the updated state
+        const offer = await this.peerConnection.createOffer();
+        await this.peerConnection.setLocalDescription(offer);
+        for (const sender of senders) {
+            if (sender.track) {
+                try {
+                    const trackId = sender.track.id;
+                    const transceiver = this.peerConnection.getTransceivers().find(t => t.sender === sender);
+                    const mid = transceiver ? transceiver.mid : null;
+                    this._log('Unpublishing track:', { trackId, mid });
+                    if (!mid) {
+                        this._warn('No mid found for track:', trackId);
+                        continue;
+                    }
+                    // Stop the track first
+                    sender.track.stop();
+                    // Notify server
+                    await this._fetch(`${this.backendUrl}/api/rooms/${this.roomId}/sessions/${this.sessionId}/unpublish`, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({
+                            trackName: trackId,
+                            mid: mid,
+                            force,
+                            sessionDescription: {
+                                type: offer.type,
+                                sdp: offer.sdp
+                            }
+                        })
+                    });
+                    // Remove from PeerConnection after server confirms
+                    this.peerConnection.removeTrack(sender);
+                    // Remove from our tracked set
+                    this.publishedTracks.delete(trackId);
+                    // Since we're unpublishing we need to stop local streams
+                    await this._cleanupEndedTracks();
+                    this._log(`Successfully unpublished track: ${trackId}`);
+                } catch (error) {
+                    this._error(`Error unpublishing track:`, error);
+                }
+            }
+        }
+    }
+    /**
+     * Gets the session state
+     * @async
+     * @returns {Promise<Object>} The session state
+     */
+    async getSessionState() {
+        if (!this.sessionId) {
+            return this._warn('No active session');
+        }
+        try {
+            const response = await this._fetch(`${this.backendUrl}/api/rooms/${this.roomId}/sessions/${this.sessionId}/state`);
+            const state = await response.json();
+            // Store track states internally
+            if (state.tracks) {
+                this.trackStates = new Map(
+                    state.tracks.map(track => [track.trackName, track.status])
+                );
+            }
+            return state;
+        } catch (error) {
+            this._error('Error getting session state:', error);
+            throw error;
+        }
+    }
+    /**
+     * Gets the track status
+     * @async
+     * @param {string} trackName - The track name
+     * @returns {Promise<string>} The track status
+     */
+    async getTrackStatus(trackName) {
+        const state = await this.getSessionState();
+        return state.tracks.find(t => t.trackName === trackName)?.status;
+    }
+    /**
+     * Updates the track status
+     * @async
+     * @private
+     * @param {string} trackId - The track ID
+     * @param {string} kind - The track kind
+     * @param {boolean} enabled - Whether the track is enabled
+     * @returns {Promise<Object>} The updated track status
+     */
+    async _updateTrackStatus(trackId, kind, enabled) {
+        try {
+            const updateUrl = `${this.backendUrl}/api/rooms/${this.roomId}/sessions/${this.sessionId}/track-status`;
+            const response = await this._fetch(updateUrl, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    trackId,
+                    kind,
+                    enabled,
+                    force: false // Allow proper renegotiation
+                })
+            });
+            const result = await response.json();
+        if (result.errorCode) {
+                throw new Error(result.errorDescription || 'Unknown error updating track status');
+            }
+            // If renegotiation is needed, handle it
+            if (result.requiresImmediateRenegotiation) {
+                await this._renegotiate();
+            }
+            if (!result.errorCode) {
+                this._updateTrackState(trackId, enabled ? 'enabled' : 'disabled');
+            }
+            return result;
+        } catch (error) {
+            this._error(`Error updating track status:`, error);
+            throw error;
+        }
+    }
+    /**
+     * Handles errors
+     * @private
+     * @param {Object} response - The response object
+     * @returns {Object} The response object
+     */
+    _handleError(response) {
+        if (response.errorCode) {
+            const error = new Error(response.errorDescription || 'Unknown error');
+            error.code = response.errorCode;
+            throw error;
+        }
+        return response;
+    }
+    /**
+     * Gets information about a user
+     * @async
+     * @param {string} [userId] - Optional user ID. If omitted, returns current user's info
+     * @returns {Promise<Object>} User information including moderator status
+     */
+    async getUserInfo(userId = null) {
+        try {
+            const response = await this._fetch(
+                `${this.backendUrl}/api/users/${userId || 'me'}`
+            );
+            return await response.json();
+        } catch (error) {
+            this._error('Error getting user info:', error);
+            throw error;
+        }
+    }
+    /**
+     * Handles WebSocket messages
+     * @private
+     * @param {MessageEvent} event - The WebSocket message event
+     * @returns {void}
+     */
+    _handleWebSocketMessage(event) {
+        try {
+            const message = JSON.parse(event.data);
+            this._log('WebSocket message received:', message);
+            // First, notify generic handlers
+            this._wsMessageHandlers.forEach(handler => {
+                try {
+                    handler(message);
+                } catch (err) {
+                    this._error('Error in WebSocket message handler:', err);
+                }
+            });
+            // Then handle specific message types
+            switch (message.type) {
+                case 'participant-joined':
+                    if (this._onParticipantJoinedCallback) {
+                        this._onParticipantJoinedCallback(message.payload);
+                    }
+                    break;
+                case 'participant-left':
+                    if (this._onParticipantLeftCallback) {
+                        this._onParticipantLeftCallback(message.payload.sessionId);
+                    }
+                    break;
+                case 'track-published':
+                    if (this._onRemoteTrackCallback) {
+                        // Handle track published event
+                        this._onRemoteTrackCallback(message.payload);
+                    }
+                    break;
+                case 'track-unpublished':
+                    if (this._onRemoteTrackUnpublishedCallback) {
+                        this._onRemoteTrackUnpublishedCallback(
+                            message.payload.sessionId,
+                            message.payload.trackName
+                        );
+                    }
+                    break;
+                case 'track-status-changed':
+                    if (this._onTrackStatusChangedCallback) {
+                        this._onTrackStatusChangedCallback(message.payload);
+                    }
+                    break;
+                case 'data-message':
+                    if (this._onDataMessageCallback) {
+                        this._onDataMessageCallback(message.payload);
+                    }
+                    break;
+                case 'room-metadata-updated':
+                    if (this._onRoomMetadataUpdatedCallback) {
+                        this._onRoomMetadataUpdatedCallback(message.payload);
+                    }
+                    break;
+                default:
+                    this._log('Unhandled message type:', message.type);
+            }
+        } catch (error) {
+            this._error('Error handling WebSocket message:', error);
+        }
+    }
+    /**
+     * Updates track state in internal tracking
+     * @private
+     * @param {string} trackName - The track name
+     * @param {string} status - The new status
+     */
+    _updateTrackState(trackName, status) {
+        if (!this.trackStates) {
+            this.trackStates = new Map();
+        }
+        this.trackStates.set(trackName, status);
+    }
+    /**
+     * Lists all available rooms.
+     * @async
+     * @returns {Promise<Array>} List of rooms
+     */
+    async listRooms() {
+        const resp = await this._fetch(`${this.backendUrl}/api/rooms`)
+            .then(r => r.json());
+        return resp.rooms;
+    }
+    /**
+     * Updates room metadata.
+     * @async
+     * @param {Object} updates Metadata updates
+     * @param {string} [updates.name] New room name
+     * @param {Object} [updates.metadata] New room metadata
+     * @returns {Promise<Object>} Updated room information
+     */
+    async updateRoomMetadata(updates) {
+        if (!this.roomId) {
+            return this._warn('Not connected to any room');
+        }
+        return await this._fetch(`${this.backendUrl}/api/rooms/${this.roomId}/metadata`, {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(updates)
+        }).then(r => r.json());
+    }
+    /**
+     * Send a data message to all participants in the room via WebSocket.
+     * @param {Object} data - The JSON object to send.
+     * @returns {void}
+     */
+    async sendDataToAll(data) {
+        if (!this.roomId || !this.sessionId) {
+            throw new Error('Must be in a room to send data');
+        }
+        // Send via WebSocket instead of HTTP
+        if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+            this.ws.send(JSON.stringify({
+                type: 'data-message',
+                payload: {
+                    from: this.sessionId,
+                    message: data
+                }
+            }));
+        } else {
+            throw new Error('WebSocket connection not available');
+        }
+    }
+    /**
+     * Sets the media quality for audio and video tracks
+     * @param {string|QualityPreset} quality - Either a preset name ('high', 'medium', 'low') or a custom quality object
+     * @param {VideoQualitySettings} [quality.video] - Video quality settings
+     * @param {AudioQualitySettings} [quality.audio] - Audio quality settings
+     * @throws {Error} If preset name is invalid
+     */
+    setMediaQuality(quality) {
+        // If quality is a string, use the preset
+        if (typeof quality === 'string') {
+            const preset = CloudflareCalls.QUALITY_PRESETS[quality];
+            if (!preset) {
+                return this._warn(`Unknown quality preset: ${quality}`);
+            }
+            this.mediaQuality = quality;
+            quality = preset;
+        }
+        this.mediaQuality = {
+            video: { ...this.mediaQuality.video, ...quality.video },
+            audio: { ...this.mediaQuality.audio, ...quality.audio }
+        };
+        // Store settings to apply to future tracks
+        this.pendingQualitySettings = this.mediaQuality;
+        // If we're already in a call, update existing tracks
+        if (this.peerConnection) {
+            this._applyQualitySettings();
+        }
+    }
+    /**
+     * Applies quality settings to all tracks
+     * @private
+     */
+    async _applyQualitySettings() {
+        if (!this.peerConnection) return;
+        const senders = this.peerConnection.getSenders();
+        for (const sender of senders) {
+            if (!sender.track) continue;
+            const params = sender.getParameters();
+            if (!params.encodings) {
+                params.encodings = [{}];
+            }
+            const kind = sender.track.kind;
+            const qualitySettings = this.mediaQuality[kind];
+            // Update bitrate
+            if (qualitySettings.maxBitrate) {
+                params.encodings[0].maxBitrate = qualitySettings.maxBitrate;
+            }
+            // Update resolution/framerate for video
+            if (kind === 'video') {
+                const constraints = {
+                    width: qualitySettings.width,
+                    height: qualitySettings.height,
+                    frameRate: qualitySettings.frameRate
+                };
+                await sender.track.applyConstraints(constraints);
+            }
+            await sender.setParameters(params);
+        }
+    }
+    /**
+     * Start monitoring connection statistics
+     * @param {number} [interval=1000] - How often to gather stats in milliseconds
+     */
+    startStatsMonitoring(interval = 1000) {
+        if (this.statsMonitoringState === 'monitoring') return;
+        this.statsMonitoringState = 'monitoring';
+        this.statsInterval = setInterval(async () => {
+            if (!this.peerConnection) return;
+            const stats = await this._gatherConnectionStats();
+            const streamStats = await this._gatherStreamStats();
+            if (this._onConnectionStatsCallback) {
+                this._onConnectionStatsCallback(stats, streamStats);
+            }
+        }, interval);
+    }
+    /**
+     * Stop monitoring connection statistics
+     */
+    stopStatsMonitoring() {
+        if (this.statsInterval) {
+            clearInterval(this.statsInterval);
+            this.statsInterval = null;
+// +           this.previousStats = null;  // Clear previous stats
+        }
+        this.statsMonitoringState = 'stopped';
+    }
+    /**
+     * Register a callback to receive connection statistics
+     * @param {function(ConnectionStats): void} callback - Function to receive stats updates
+     */
+    onConnectionStats(callback) {
+        this._onConnectionStatsCallback = callback;
+    }
+    /**
+     * Gather current connection statistics
+     * @private
+     * @returns {Promise<ConnectionStats>} Current connection statistics
+     */
+    async _gatherConnectionStats() {
+        if (!this.peerConnection) {
+            return this._warn('No active connection');
+        }
+        const stats = await this.peerConnection.getStats();
+        const result = {
+            outbound: {
+                bitrate: 0,
+                packetLoss: 0,
+                qualityLimitation: 'none'
+            },
+            inbound: {
+                bitrate: 0,
+                packetLoss: 0,
+                jitter: 0
+            },
+            connection: {
+                roundTripTime: 0,
+                state: this.peerConnection.connectionState
+            }
+        };
+        let outboundStats = null;
+        let inboundStats = null;
+        // Process each stat
+        stats.forEach(stat => {
+            switch (stat.type) {
+                case 'outbound-rtp':
+                    if (stat.kind === 'video') {
+                        outboundStats = stat;
+                        result.outbound.qualityLimitation = stat.qualityLimitationReason;
+                    }
+                    break;
+                case 'inbound-rtp':
+                    if (stat.kind === 'video') {
+                        inboundStats = stat;
+                        result.inbound.jitter = stat.jitter;
+                        if (stat.packetsLost > 0) {
+                            result.inbound.packetLoss =
+                                (stat.packetsLost / (stat.packetsReceived + stat.packetsLost)) * 100;
+                        }
+                    }
+                    break;
+                case 'candidate-pair':
+                    if (stat.state === 'succeeded') {
+                        result.connection.roundTripTime = stat.currentRoundTripTime;
+                    }
+                    break;
+            }
+        });
+        // Calculate bitrates using previous stats
+        if (this.previousStats && outboundStats && inboundStats) {
+            const timeDelta = (outboundStats.timestamp - this.previousStats.outboundTimestamp) / 1000;  // Convert to seconds
+            if (timeDelta > 0) {
+                // Calculate outbound bitrate
+                const bytesSentDelta = outboundStats.bytesSent - this.previousStats.bytesSent;
+                result.outbound.bitrate = (bytesSentDelta * 8) / timeDelta;  // Convert to bits per second
+                // Calculate inbound bitrate
+                const bytesReceivedDelta = inboundStats.bytesReceived - this.previousStats.bytesReceived;
+                result.inbound.bitrate = (bytesReceivedDelta * 8) / timeDelta;  // Convert to bits per second
+            }
+        }
+        // Store current stats for next calculation
+        if (outboundStats && inboundStats) {
+            this.previousStats = {
+                outboundTimestamp: outboundStats.timestamp,
+                bytesSent: outboundStats.bytesSent,
+                bytesReceived: inboundStats.bytesReceived
+            };
+        }
+        return result;
+    }
+    /**
+     * Get a snapshot of current connection statistics
+     * @returns {Promise<ConnectionStats>} Current connection statistics
+     */
+    async getConnectionStats() {
+        return this._gatherConnectionStats();
+    }
+    /**
+     * Gather current connection statistics per stream
+     * @private
+     * @returns {Promise<Map<string, StreamStats>>} Map of session IDs to stream stats
+     */
+    async _gatherStreamStats() {
+        if (!this.peerConnection) return new Map();
+        const stats = await this.peerConnection.getStats();
+        const streamStats = new Map();
+        // Initialize local stats
+        if (this.sessionId) {
+            streamStats.set(this.sessionId, {
+                sessionId: this.sessionId,
+                packetLoss: 0,
+                qualityLimitation: 'none',
+                bitrate: 0
+            });
+        }
+        stats.forEach(stat => {
+            if (stat.type === 'outbound-rtp' && stat.kind === 'video') {
+                // Update local stream stats
+                const localStats = streamStats.get(this.sessionId);
+                if (localStats) {
+                    localStats.qualityLimitation = stat.qualityLimitationReason;
+                    localStats.bitrate = stat.bytesSent * 8 / stat.timestamp;
+                }
+            }
+            else if (stat.type === 'inbound-rtp' && stat.kind === 'video') {
+                // Get sessionId from mid mapping
+                const mid = stat.mid;
+                const sessionId = this.midToSessionId.get(mid);
+                if (sessionId) {
+                    streamStats.set(sessionId, {
+                        sessionId,
+                        packetLoss: stat.packetsLost > 0
+                            ? (stat.packetsLost / (stat.packetsReceived + stat.packetsLost)) * 100
+                            : 0,
+                        qualityLimitation: 'none',
+                        bitrate: stat.bytesReceived * 8 / stat.timestamp
+                    });
+                }
+            }
+        });
+        return streamStats;
+    }
+    // Add static QUALITY_PRESETS
+    static QUALITY_PRESETS = {
+        // 16:9 Presets
+        high_16x9_xl: {  // 1080p
+            video: {
+                width: { ideal: 1920 },
+                height: { ideal: 1080 },
+                frameRate: { ideal: 30 },
+                maxBitrate: 2_500_000
+            },
+            audio: { maxBitrate: 128000, sampleRate: 48000, channelCount: 2 }
+        },
+        high_16x9_lg: {  // 720p
+            video: {
+                width: { ideal: 1280 },
+                height: { ideal: 720 },
+                frameRate: { ideal: 30 },
+                maxBitrate: 1_500_000
+            },
+            audio: { maxBitrate: 96000, sampleRate: 48000, channelCount: 2 }
+        },
+        high_16x9_md: {  // 480p
+            video: {
+                width: { ideal: 854 },
+                height: { ideal: 480 },
+                frameRate: { ideal: 30 },
+                maxBitrate: 800_000
+            },
+            audio: { maxBitrate: 96000, sampleRate: 48000, channelCount: 1 }
+        },
+        high_16x9_sm: {  // 360p
+            video: {
+                width: { ideal: 640 },
+                height: { ideal: 360 },
+                frameRate: { ideal: 30 },
+                maxBitrate: 600_000
+            },
+            audio: { maxBitrate: 64000, sampleRate: 44100, channelCount: 1 }
+        },
+        high_16x9_xs: {  // 270p
+            video: {
+                width: { ideal: 480 },
+                height: { ideal: 270 },
+                frameRate: { ideal: 30 },
+                maxBitrate: 400_000
+            },
+            audio: { maxBitrate: 64000, sampleRate: 44100, channelCount: 1 }
+        },
+        // 16:9 Medium Quality Presets (reduced framerate & bitrate)
+        medium_16x9_xl: {
+            video: {
+                width: { ideal: 1920 },
+                height: { ideal: 1080 },
+                frameRate: { ideal: 24 },
+                maxBitrate: 2_000_000
+            },
+            audio: { maxBitrate: 96000, sampleRate: 48000, channelCount: 2 }
+        },
+        medium_16x9_lg: {
+            video: {
+                width: { ideal: 1280 },
+                height: { ideal: 720 },
+                frameRate: { ideal: 24 },
+                maxBitrate: 1_200_000
+            },
+            audio: { maxBitrate: 96000, sampleRate: 48000, channelCount: 1 }
+        },
+        medium_16x9_md: {
+            video: {
+                width: { ideal: 854 },
+                height: { ideal: 480 },
+                frameRate: { ideal: 24 },
+                maxBitrate: 600_000
+            },
+            audio: { maxBitrate: 64000, sampleRate: 44100, channelCount: 1 }
+        },
+        medium_16x9_sm: {
+            video: {
+                width: { ideal: 640 },
+                height: { ideal: 360 },
+                frameRate: { ideal: 20 },
+                maxBitrate: 400_000
+            },
+            audio: { maxBitrate: 48000, sampleRate: 44100, channelCount: 1 }
+        },
+        medium_16x9_xs: {
+            video: {
+                width: { ideal: 480 },
+                height: { ideal: 270 },
+                frameRate: { ideal: 20 },
+                maxBitrate: 300_000
+            },
+            audio: { maxBitrate: 48000, sampleRate: 44100, channelCount: 1 }
+        },
+        // 16:9 Low Quality Presets (minimum viable quality)
+        low_16x9_xl: {
+            video: {
+                width: { ideal: 1920 },
+                height: { ideal: 1080 },
+                frameRate: { ideal: 15 },
+                maxBitrate: 1_500_000
+            },
+            audio: { maxBitrate: 64000, sampleRate: 44100, channelCount: 1 }
+        },
+        low_16x9_lg: {
+            video: {
+                width: { ideal: 1280 },
+                height: { ideal: 720 },
+                frameRate: { ideal: 15 },
+                maxBitrate: 800_000
+            },
+            audio: { maxBitrate: 48000, sampleRate: 44100, channelCount: 1 }
+        },
+        low_16x9_md: {
+            video: {
+                width: { ideal: 854 },
+                height: { ideal: 480 },
+                frameRate: { ideal: 15 },
+                maxBitrate: 400_000
+            },
+            audio: { maxBitrate: 32000, sampleRate: 44100, channelCount: 1 }
+        },
+        low_16x9_sm: {
+            video: {
+                width: { ideal: 640 },
+                height: { ideal: 360 },
+                frameRate: { ideal: 12 },
+                maxBitrate: 250_000
+            },
+            audio: { maxBitrate: 32000, sampleRate: 22050, channelCount: 1 }
+        },
+        low_16x9_xs: {
+            video: {
+                width: { ideal: 480 },
+                height: { ideal: 270 },
+                frameRate: { ideal: 10 },
+                maxBitrate: 150_000
+            },
+            audio: { maxBitrate: 24000, sampleRate: 22050, channelCount: 1 }
+        },
+        // 4:3 High Quality Presets (existing)
+        high_4x3_xl: {  // 960x720
+            video: {
+                width: { ideal: 960 },
+                height: { ideal: 720 },
+                frameRate: { ideal: 30 },
+                maxBitrate: 1_500_000
+            },
+            audio: { maxBitrate: 128000, sampleRate: 48000, channelCount: 2 }
+        },
+        high_4x3_lg: {  // 640x480
+            video: {
+                width: { ideal: 640 },
+                height: { ideal: 480 },
+                frameRate: { ideal: 30 },
+                maxBitrate: 800_000
+            },
+            audio: { maxBitrate: 96000, sampleRate: 48000, channelCount: 1 }
+        },
+        high_4x3_md: {  // 480x360
+            video: {
+                width: { ideal: 480 },
+                height: { ideal: 360 },
+                frameRate: { ideal: 30 },
+                maxBitrate: 600_000
+            },
+            audio: { maxBitrate: 96000, sampleRate: 44100, channelCount: 1 }
+        },
+        high_4x3_sm: {  // 320x240
+            video: {
+                width: { ideal: 320 },
+                height: { ideal: 240 },
+                frameRate: { ideal: 30 },
+                maxBitrate: 400_000
+            },
+            audio: { maxBitrate: 64000, sampleRate: 44100, channelCount: 1 }
+        },
+        high_4x3_xs: {  // 240x180 (perfect for 300x225 container)
+            video: {
+                width: { ideal: 240 },
+                height: { ideal: 180 },
+                frameRate: { ideal: 30 },
+                maxBitrate: 250_000
+            },
+            audio: { maxBitrate: 64000, sampleRate: 44100, channelCount: 1 }
+        },
+        // 4:3 Medium Quality Presets
+        medium_4x3_xl: {
+            video: {
+                width: { ideal: 960 },
+                height: { ideal: 720 },
+                frameRate: { ideal: 24 },
+                maxBitrate: 1_200_000
+            },
+            audio: { maxBitrate: 96000, sampleRate: 48000, channelCount: 1 }
+        },
+        medium_4x3_lg: {
+            video: {
+                width: { ideal: 640 },
+                height: { ideal: 480 },
+                frameRate: { ideal: 24 },
+                maxBitrate: 600_000
+            },
+            audio: { maxBitrate: 64000, sampleRate: 44100, channelCount: 1 }
+        },
+        medium_4x3_md: {
+            video: {
+                width: { ideal: 480 },
+                height: { ideal: 360 },
+                frameRate: { ideal: 20 },
+                maxBitrate: 400_000
+            },
+            audio: { maxBitrate: 48000, sampleRate: 44100, channelCount: 1 }
+        },
+        medium_4x3_sm: {
+            video: {
+                width: { ideal: 320 },
+                height: { ideal: 240 },
+                frameRate: { ideal: 20 },
+                maxBitrate: 300_000
+            },
+            audio: { maxBitrate: 48000, sampleRate: 44100, channelCount: 1 }
+        },
+        medium_4x3_xs: {
+            video: {
+                width: { ideal: 240 },
+                height: { ideal: 180 },
+                frameRate: { ideal: 20 },
+                maxBitrate: 200_000
+            },
+            audio: { maxBitrate: 48000, sampleRate: 44100, channelCount: 1 }
+        },
+        // 4:3 Low Quality Presets
+        low_4x3_xl: {
+            video: {
+                width: { ideal: 960 },
+                height: { ideal: 720 },
+                frameRate: { ideal: 15 },
+                maxBitrate: 800_000
+            },
+            audio: { maxBitrate: 48000, sampleRate: 44100, channelCount: 1 }
+        },
+        low_4x3_lg: {
+            video: {
+                width: { ideal: 640 },
+                height: { ideal: 480 },
+                frameRate: { ideal: 15 },
+                maxBitrate: 400_000
+            },
+            audio: { maxBitrate: 32000, sampleRate: 44100, channelCount: 1 }
+        },
+        low_4x3_md: {
+            video: {
+                width: { ideal: 480 },
+                height: { ideal: 360 },
+                frameRate: { ideal: 12 },
+                maxBitrate: 250_000
+            },
+            audio: { maxBitrate: 32000, sampleRate: 22050, channelCount: 1 }
+        },
+        low_4x3_sm: {
+            video: {
+                width: { ideal: 320 },
+                height: { ideal: 240 },
+                frameRate: { ideal: 10 },
+                maxBitrate: 150_000
+            },
+            audio: { maxBitrate: 24000, sampleRate: 22050, channelCount: 1 }
+        },
+        low_4x3_xs: {
+            video: {
+                width: { ideal: 240 },
+                height: { ideal: 180 },
+                frameRate: { ideal: 10 },
+                maxBitrate: 100_000
+            },
+            audio: { maxBitrate: 24000, sampleRate: 22050, channelCount: 1 }
+        },
+        // 1:1 High Quality Presets
+        high_1x1_xl: {  // 720x720
+            video: {
+                width: { ideal: 720 },
+                height: { ideal: 720 },
+                frameRate: { ideal: 30 },
+                maxBitrate: 1_500_000
+            },
+            audio: { maxBitrate: 128000, sampleRate: 48000, channelCount: 2 }
+        },
+        high_1x1_lg: {  // 480x480
+            video: {
+                width: { ideal: 480 },
+                height: { ideal: 480 },
+                frameRate: { ideal: 30 },
+                maxBitrate: 800_000
+            },
+            audio: { maxBitrate: 96000, sampleRate: 48000, channelCount: 1 }
+        },
+        high_1x1_md: {  // 360x360
+            video: {
+                width: { ideal: 360 },
+                height: { ideal: 360 },
+                frameRate: { ideal: 30 },
+                maxBitrate: 600_000
+            },
+            audio: { maxBitrate: 96000, sampleRate: 44100, channelCount: 1 }
+        },
+        high_1x1_sm: {  // 240x240
+            video: {
+                width: { ideal: 240 },
+                height: { ideal: 240 },
+                frameRate: { ideal: 30 },
+                maxBitrate: 400_000
+            },
+            audio: { maxBitrate: 64000, sampleRate: 44100, channelCount: 1 }
+        },
+        high_1x1_xs: {  // 180x180
+            video: {
+                width: { ideal: 180 },
+                height: { ideal: 180 },
+                frameRate: { ideal: 30 },
+                maxBitrate: 250_000
+            },
+            audio: { maxBitrate: 64000, sampleRate: 44100, channelCount: 1 }
+        },
+        // 1:1 Medium Quality Presets
+        medium_1x1_xl: {
+            video: {
+                width: { ideal: 720 },
+                height: { ideal: 720 },
+                frameRate: { ideal: 24 },
+                maxBitrate: 1_200_000
+            },
+            audio: { maxBitrate: 96000, sampleRate: 48000, channelCount: 1 }
+        },
+        medium_1x1_lg: {
+            video: {
+                width: { ideal: 480 },
+                height: { ideal: 480 },
+                frameRate: { ideal: 24 },
+                maxBitrate: 600_000
+            },
+            audio: { maxBitrate: 64000, sampleRate: 44100, channelCount: 1 }
+        },
+        medium_1x1_md: {
+            video: {
+                width: { ideal: 360 },
+                height: { ideal: 360 },
+                frameRate: { ideal: 20 },
+                maxBitrate: 400_000
+            },
+            audio: { maxBitrate: 48000, sampleRate: 44100, channelCount: 1 }
+        },
+        medium_1x1_sm: {
+            video: {
+                width: { ideal: 240 },
+                height: { ideal: 240 },
+                frameRate: { ideal: 20 },
+                maxBitrate: 300_000
+            },
+            audio: { maxBitrate: 48000, sampleRate: 44100, channelCount: 1 }
+        },
+        medium_1x1_xs: {
+            video: {
+                width: { ideal: 180 },
+                height: { ideal: 180 },
+                frameRate: { ideal: 20 },
+                maxBitrate: 200_000
+            },
+            audio: { maxBitrate: 48000, sampleRate: 44100, channelCount: 1 }
+        },
+        // 1:1 Low Quality Presets
+        low_1x1_xl: {
+            video: {
+                width: { ideal: 720 },
+                height: { ideal: 720 },
+                frameRate: { ideal: 15 },
+                maxBitrate: 800_000
+            },
+            audio: { maxBitrate: 48000, sampleRate: 44100, channelCount: 1 }
+        },
+        low_1x1_lg: {
+            video: {
+                width: { ideal: 480 },
+                height: { ideal: 480 },
+                frameRate: { ideal: 15 },
+                maxBitrate: 400_000
+            },
+            audio: { maxBitrate: 32000, sampleRate: 44100, channelCount: 1 }
+        },
+        low_1x1_md: {
+            video: {
+                width: { ideal: 360 },
+                height: { ideal: 360 },
+                frameRate: { ideal: 12 },
+                maxBitrate: 250_000
+            },
+            audio: { maxBitrate: 32000, sampleRate: 22050, channelCount: 1 }
+        },
+        low_1x1_sm: {
+            video: {
+                width: { ideal: 240 },
+                height: { ideal: 240 },
+                frameRate: { ideal: 10 },
+                maxBitrate: 150_000
+            },
+            audio: { maxBitrate: 24000, sampleRate: 22050, channelCount: 1 }
+        },
+        low_1x1_xs: {
+            video: {
+                width: { ideal: 180 },
+                height: { ideal: 180 },
+                frameRate: { ideal: 10 },
+                maxBitrate: 100_000
+            },
+            audio: { maxBitrate: 24000, sampleRate: 22050, channelCount: 1 }
+        },
+        // 9:16 High Quality Presets (Portrait/Mobile)
+        high_9x16_xl: {  // 1080x1920
+            video: {
+                width: { ideal: 1080 },
+                height: { ideal: 1920 },
+                frameRate: { ideal: 30 },
+                maxBitrate: 2_500_000
+            },
+            audio: { maxBitrate: 128000, sampleRate: 48000, channelCount: 2 }
+        },
+        high_9x16_lg: {  // 720x1280
+            video: {
+                width: { ideal: 720 },
+                height: { ideal: 1280 },
+                frameRate: { ideal: 30 },
+                maxBitrate: 1_500_000
+            },
+            audio: { maxBitrate: 96000, sampleRate: 48000, channelCount: 1 }
+        },
+        high_9x16_md: {  // 480x854
+            video: {
+                width: { ideal: 480 },
+                height: { ideal: 854 },
+                frameRate: { ideal: 30 },
+                maxBitrate: 800_000
+            },
+            audio: { maxBitrate: 96000, sampleRate: 44100, channelCount: 1 }
+        },
+        high_9x16_sm: {  // 360x640
+            video: {
+                width: { ideal: 360 },
+                height: { ideal: 640 },
+                frameRate: { ideal: 30 },
+                maxBitrate: 600_000
+            },
+            audio: { maxBitrate: 64000, sampleRate: 44100, channelCount: 1 }
+        },
+        high_9x16_xs: {  // 270x480
+            video: {
+                width: { ideal: 270 },
+                height: { ideal: 480 },
+                frameRate: { ideal: 30 },
+                maxBitrate: 400_000
+            },
+            audio: { maxBitrate: 64000, sampleRate: 44100, channelCount: 1 }
+        },
+        // 9:16 Medium Quality Presets
+        medium_9x16_xl: {
+            video: {
+                width: { ideal: 1080 },
+                height: { ideal: 1920 },
+                frameRate: { ideal: 24 },
+                maxBitrate: 2_000_000
+            },
+            audio: { maxBitrate: 96000, sampleRate: 48000, channelCount: 1 }
+        },
+        medium_9x16_lg: {
+            video: {
+                width: { ideal: 720 },
+                height: { ideal: 1280 },
+                frameRate: { ideal: 24 },
+                maxBitrate: 1_200_000
+            },
+            audio: { maxBitrate: 64000, sampleRate: 44100, channelCount: 1 }
+        },
+        medium_9x16_md: {
+            video: {
+                width: { ideal: 480 },
+                height: { ideal: 854 },
+                frameRate: { ideal: 20 },
+                maxBitrate: 600_000
+            },
+            audio: { maxBitrate: 48000, sampleRate: 44100, channelCount: 1 }
+        },
+        medium_9x16_sm: {
+            video: {
+                width: { ideal: 360 },
+                height: { ideal: 640 },
+                frameRate: { ideal: 20 },
+                maxBitrate: 400_000
+            },
+            audio: { maxBitrate: 48000, sampleRate: 44100, channelCount: 1 }
+        },
+        medium_9x16_xs: {
+            video: {
+                width: { ideal: 270 },
+                height: { ideal: 480 },
+                frameRate: { ideal: 20 },
+                maxBitrate: 300_000
+            },
+            audio: { maxBitrate: 48000, sampleRate: 44100, channelCount: 1 }
+        },
+        // 9:16 Low Quality Presets
+        low_9x16_xl: {
+            video: {
+                width: { ideal: 1080 },
+                height: { ideal: 1920 },
+                frameRate: { ideal: 15 },
+                maxBitrate: 1_500_000
+            },
+            audio: { maxBitrate: 48000, sampleRate: 44100, channelCount: 1 }
+        },
+        low_9x16_lg: {
+            video: {
+                width: { ideal: 720 },
+                height: { ideal: 1280 },
+                frameRate: { ideal: 15 },
+                maxBitrate: 800_000
+            },
+            audio: { maxBitrate: 32000, sampleRate: 44100, channelCount: 1 }
+        },
+        low_9x16_md: {
+            video: {
+                width: { ideal: 480 },
+                height: { ideal: 854 },
+                frameRate: { ideal: 12 },
+                maxBitrate: 400_000
+            },
+            audio: { maxBitrate: 32000, sampleRate: 22050, channelCount: 1 }
+        },
+        low_9x16_sm: {
+            video: {
+                width: { ideal: 360 },
+                height: { ideal: 640 },
+                frameRate: { ideal: 10 },
+                maxBitrate: 250_000
+            },
+            audio: { maxBitrate: 24000, sampleRate: 22050, channelCount: 1 }
+        },
+        low_9x16_xs: {
+            video: {
+                width: { ideal: 270 },
+                height: { ideal: 480 },
+                frameRate: { ideal: 10 },
+                maxBitrate: 150_000
+            },
+            audio: { maxBitrate: 24000, sampleRate: 22050, channelCount: 1 }
+        }
+    };
+}
+export default CloudflareCalls;

public/js/CloudflareCalls.min.js ADDED Viewed

	@@ -0,0 +1 @@

+ !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).CloudflareCalls=t()}(this,(function(){"use strict";class e{constructor(t={}){this.backendUrl=t.backendUrl||"",this.websocketUrl=t.websocketUrl||"",this.debug=t.debug||!1,this.token=null,this.roomId=null,this.sessionId=null,this.userId=this._generateUUID(),this.userMetadata={},this.localStream=null,this.peerConnection=null,this.ws=null,this._onParticipantJoinedCallback=null,this._onParticipantLeftCallback=null,this._onRemoteTrackCallback=null,this._onRemoteTrackUnpublishedCallback=null,this._onTrackStatusChangedCallback=null,this._onDataMessageCallback=null,this._onConnectionStatsCallback=null,this._wsMessageHandlers=new Set,this.pulledTracks=new Map,this.pollingInterval=null,this.availableAudioInputDevices=[],this.availableVideoInputDevices=[],this.availableAudioOutputDevices=[],this.currentAudioOutputDeviceId=null,this._renegotiateTimeout=null,this.publishedTracks=new Set,this.midToSessionId=new Map,this.midToTrackName=new Map,this._onRoomMetadataUpdatedCallback=null,this.pendingQualitySettings=null,this.mediaQuality=e.QUALITY_PRESETS.medium_16x9_md,this.QUALITY_PRESETS=e.QUALITY_PRESETS,this.statsInterval=null,this.previousStats=null,this.statsMonitoringState="stopped"}_log(...e){this.debug&&console.log("[CloudflareCalls]",...e)}_warn(...e){this.debug&&console.warn("[CloudflareCalls]",...e)}_error(...e){console.error("[CloudflareCalls]",...e)}setDebugMode(e){this.debug=Boolean(e)}async _fetch(e,t={}){t.headers=t.headers||{},this.token&&(t.headers.Authorization=`Bearer ${this.token}`);try{const a=await fetch(e,t);return a.ok||this._warn(`HTTP error! status: ${a.status}`),a}catch(t){return this._warn(`Fetch error for ${e}:`,t),!1}}onRemoteTrack(e){this._onRemoteTrackCallback=e}onRemoteTrackUnpublished(e){this._onRemoteTrackUnpublishedCallback=e}onDataMessage(e){this._onDataMessageCallback=e}onParticipantJoined(e){this._onParticipantJoinedCallback=e}onParticipantLeft(e){this._onParticipantLeftCallback=e}onTrackStatusChanged(e){this._onTrackStatusChangedCallback=e}onWebSocketMessage(e){return this._wsMessageHandlers.add(e),()=>this._wsMessageHandlers.delete(e)}setToken(e){this.token=e}onRoomMetadataUpdated(e){this._onRoomMetadataUpdatedCallback=e}setUserMetadata(e){this.userMetadata=e,this._updateUserMetadataOnServer()}getUserMetadata(){return this.userMetadata}async _updateUserMetadataOnServer(){if(this.roomId&&this.sessionId)try{const e=`${this.backendUrl}/api/rooms/${this.roomId}/metadata`;(await this._fetch(e,{method:"PUT",headers:{"Content-Type":"application/json"},body:JSON.stringify(this.userMetadata)})).ok?this._log("User metadata updated on server."):this._error("Failed to update user metadata on server.")}catch(e){throw this._error("Error updating user metadata:",e),e}else this._warn("Cannot update metadata before joining a room.")}async createRoom(e={}){const t=await this._fetch(`${this.backendUrl}/api/rooms`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(e)}).then((e=>e.json()));return this.roomId=t.roomId,t}async joinRoom(e,t={}){this.roomId=e;const a=await this._fetch(`${this.backendUrl}/api/rooms/${e}/join`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({userId:this.userId,metadata:this.userMetadata})}).then((e=>e.json()));if(await this._initWebSocket(),!a.sessionId)throw new Error("Failed to join room or retrieve sessionId");this.sessionId=a.sessionId,this.pulledTracks.set(this.sessionId,new Set),this.peerConnection=await this._createPeerConnection(),this.localStream||(this.localStream=await navigator.mediaDevices.getUserMedia({video:!0,audio:!0}),this._log("Acquired local media")),await this._publishTracks();const i=a.otherSessions||[];for(const e of i){this.pulledTracks.set(e.sessionId,new Set);for(const t of e.publishedTracks||[])await this._pullTracks(e.sessionId,t)}this._log("Joined room",e,"my session:",this.sessionId),this.setUserMetadata(t),this._startPolling()}async _cleanupEndedTracks(){if(this.localStream)for(const e of this.localStream.getTracks())"ended"===e.readyState&&(this.localStream.removeTrack(e),e.stop());this.localStream&&!this.localStream.getTracks().length&&(this.localStream=null)}async leaveRoom(){if(!this.roomId||!this.sessionId)return;const e=this.peerConnection.getSenders();e&&e.length&&await this.unpublishAllTracks();try{await this._fetch(`${this.backendUrl}/api/rooms/${this.roomId}/leave`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({sessionId:this.sessionId})})}catch(e){this._warn("Error leaving room:",e)}this.ws&&(this.ws.close(),this.ws=null),this.peerConnection&&(this.peerConnection.close(),this.peerConnection=null),await this._cleanupEndedTracks(),this._log("Left room, closed PC & WS"),this.roomId=null,this.sessionId=null,this.pulledTracks.clear(),this.midToSessionId.clear(),this.midToTrackName.clear(),this.publishedTracks.clear()}async publishTracks(){if(!this.localStream)return this._warn("No local media stream to publish.");await this._publishTracks()}async _renegotiate(){this.peerConnection&&(this._renegotiateTimeout&&clearTimeout(this._renegotiateTimeout),this._renegotiateTimeout=setTimeout((async()=>{try{this._log("Starting renegotiation process...");const e=await this.peerConnection.createAnswer();this._log("Created renegotiation answer:",e.sdp),await this.peerConnection.setLocalDescription(e);const t=`${this.backendUrl}/api/rooms/${this.roomId}/sessions/${this.sessionId}/renegotiate`,a={sdp:e.sdp,type:e.type};this._log(`Sending renegotiate request to ${t} with body:`,a);const i=await this._fetch(t,{method:"PUT",headers:{"Content-Type":"application/json"},body:JSON.stringify(a)}).then((e=>e.json()));if(i.errorCode)return void this._warn("Renegotiation failed:",i.errorDescription);await this.peerConnection.setRemoteDescription(i.sessionDescription),this._log("Renegotiation successful. Applied SFU response.")}catch(e){this._error("Error during renegotiation:",e)}}),500))}async updatePublishedTracks(){if(!this.peerConnection)return this._warn("PeerConnection is not established.");const e=this.peerConnection.getSenders();for(const t of e)this.peerConnection.removeTrack(t);await this._publishTracks()}async _publishTracks(){if(!this.localStream||!this.peerConnection)return;const e=[];for(const t of this.localStream.getTracks()){if(this.publishedTracks.has(t.id))continue;if("live"!==t.readyState)continue;const a=this.peerConnection.addTransceiver(t,{direction:"sendonly"});if(this.pendingQualitySettings&&"video"===t.kind){const e=a.sender.getParameters();e.encodings=[{maxBitrate:this.pendingQualitySettings.video.maxBitrate}],a.sender.setParameters(e)}e.push(a),this.publishedTracks.add(t.id)}if(0===e.length)return;const t=await this.peerConnection.createOffer();this._log("SDP Offer:",t.sdp),await this.peerConnection.setLocalDescription(t);const a=e.map((({sender:e,mid:t})=>({location:"local",mid:t,trackName:e.track.id}))),i={offer:{sdp:t.sdp,type:t.type},tracks:a,metadata:this.userMetadata},s=`${this.backendUrl}/api/rooms/${this.roomId}/sessions/${this.sessionId}/publish`,o=await this._fetch(s,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(i)}).then((e=>e.json()));if(o.errorCode)return void this._error("Publish error:",o.errorDescription);const n=o.sessionDescription;await this.peerConnection.setRemoteDescription(n),this._log("Publish => success. Applied SFU answer.")}async _pullTracks(e,t){this._log(`Pulling track '${t}' from session ${e}`);const a=`${this.backendUrl}/api/rooms/${this.roomId}/sessions/${this.sessionId}/pull`,i={remoteSessionId:e,trackName:t},s=await this._fetch(a,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(i)}).then((e=>e.json()));if(s.errorCode)this._error("Pull error:",s.errorDescription);else{if(s.requiresImmediateRenegotiation){this._log("Pull => requires renegotiation");const a=new Set;s.sessionDescription.sdp.split("\n").forEach((i=>{if(i.startsWith("a=mid:")){const s=i.split(":")[1].trim();a.add(s),this.midToSessionId.set(s,e),this.midToTrackName.set(s,t),this._log("Pre-mapped MID:",{mid:s,sessionId:e,trackName:t})}})),await this.peerConnection.setRemoteDescription(s.sessionDescription);const i=await this.peerConnection.createAnswer();await this.peerConnection.setLocalDescription(i);this.peerConnection.getTransceivers().forEach((t=>{t.mid&&a.has(t.mid)&&this._log("Verified MID mapping:",{mid:t.mid,sessionId:e,direction:t.direction})})),await this._fetch(`${this.backendUrl}/api/rooms/${this.roomId}/sessions/${this.sessionId}/renegotiate`,{method:"PUT",headers:{"Content-Type":"application/json"},body:JSON.stringify({sdp:i.sdp,type:i.type})})}this._log(`Pulled trackName="${t}" from session ${e}`),this._log("Current MID mappings:",Array.from(this.midToSessionId.entries())),this.pulledTracks.has(e)||this.pulledTracks.set(e,new Set),this.pulledTracks.get(e).add(t)}}async _attemptIceServersUpdate(){let e=[{urls:"stun:stun.cloudflare.com:3478"}];try{const t=await this._fetch(`${this.backendUrl}/api/ice-servers`);if(!t.ok)return this._warn(`Failed to fetch ICE servers: ${t.status} ${t.statusText}`),!1;const a=await t.json();if(!a.iceServers||!Array.isArray(a.iceServers))return e;e=a.iceServers.map((e=>{const t={urls:e.urls};return e.username&&e.credential&&(t.username=e.username,t.credential=e.credential),t})),this._log("Fetched ICE servers:",e)}catch(e){return this._warn("Error fetching ICE servers:",e),!1}}async _createPeerConnection(){let e=await this._attemptIceServersUpdate()||[{urls:"stun:stun.cloudflare.com:3478"}];const t=new RTCPeerConnection({iceServers:e,bundlePolicy:"max-bundle",sdpSemantics:"unified-plan"});return t.onicecandidate=e=>{e.candidate?this._log("New ICE candidate:",e.candidate.candidate):this._log("All ICE candidates have been sent")},t.oniceconnectionstatechange=()=>{this._log("ICE Connection State:",t.iceConnectionState),"disconnected"!==t.iceConnectionState&&"failed"!==t.iceConnectionState||this.leaveRoom()},t.onconnectionstatechange=()=>{this._log("Connection State:",t.connectionState),"connected"===t.connectionState?this._log("Peer connection fully established"):"disconnected"!==t.connectionState&&"failed"!==t.connectionState||(this._log("Peer connection disconnected or failed"),this.leaveRoom())},t.ontrack=e=>{if(this._log("ontrack event:",{kind:e.track.kind,webrtcTrackId:e.track.id,mid:e.transceiver?.mid}),this._onRemoteTrackCallback){const t=e.transceiver?.mid,a=this.midToSessionId.get(t),i=this.midToTrackName.get(t);if(this._log("Track mapping lookup:",{mid:t,sessionId:a,trackName:i,webrtcTrackId:e.track.id,availableMappings:{sessions:Array.from(this.midToSessionId.entries()),tracks:Array.from(this.midToTrackName.entries())}}),!a)return this._warn("No sessionId found for mid:",t),this.pendingTracks||(this.pendingTracks=[]),void this.pendingTracks.push({evt:e,mid:t});const s=e.track;s.sessionId=a,s.mid=t,s.trackName=i,this._log("Sending track to callback:",{webrtcTrackId:s.id,trackName:s.trackName,sessionId:s.sessionId,mid:s.mid}),this._onRemoteTrackCallback(s)}},t}async _initWebSocket(){if(!this.ws||this.ws.readyState!==WebSocket.OPEN)return new Promise(((e,t)=>{this.ws=new WebSocket(this.websocketUrl),this.ws.onopen=()=>{this._log("WebSocket open"),this.ws.send(JSON.stringify({type:"join-websocket",payload:{roomId:this.roomId,userId:this.userId,token:this.token}})),e()},this.ws.onmessage=e=>{try{const t=JSON.parse(e.data);switch(this._log("WebSocket message received:",t),t.type){case"participant-joined":this._onParticipantJoinedCallback&&this._onParticipantJoinedCallback(t.payload);break;case"participant-left":this._onParticipantLeftCallback&&this._onParticipantLeftCallback(t.payload);break;case"track-published":this._onRemoteTrackCallback&&this._onRemoteTrackCallback(t.payload);break;case"track-unpublished":this._onRemoteTrackUnpublishedCallback&&this._onRemoteTrackUnpublishedCallback(t.payload.sessionId,t.payload.trackName);break;case"track-status-changed":this._onTrackStatusChangedCallback&&this._onTrackStatusChangedCallback(t.payload);break;case"data-message":this._onDataMessageCallback&&this._onDataMessageCallback(t.payload);break;case"room-metadata-updated":this._onRoomMetadataUpdatedCallback&&this._onRoomMetadataUpdatedCallback(t.payload);break;default:this._log("Unhandled message type:",t.type)}this._wsMessageHandlers.forEach((e=>e(t)))}catch(e){this._error("Error processing WebSocket message:",e)}},this.ws.onerror=e=>{this._error("WebSocket error:",e),t(e)},this.ws.onclose=()=>{this._log("WebSocket connection closed")}}))}_startPolling(){this.pollingInterval=setInterval((async()=>{if(this.roomId)try{const e=(await this._fetch(`${this.backendUrl}/api/rooms/${this.roomId}/participants`).then((e=>e.json()))).participants||[];for(const t of e){const{sessionId:e,publishedTracks:a}=t;if(e!==this.sessionId){this.pulledTracks.has(e)||this.pulledTracks.set(e,new Set);for(const t of a)this.pulledTracks.get(e).has(t)||(this._log(`[Polling] New track detected: ${t} from session ${e}`),await this._pullTracks(e,t))}}}catch(e){this._error("Polling error:",e)}}),1e4)}async getAvailableDevices(){const e=await navigator.mediaDevices.enumerateDevices();return this.availableAudioInputDevices=e.filter((e=>"audioinput"===e.kind)),this.availableVideoInputDevices=e.filter((e=>"videoinput"===e.kind)),this.availableAudioOutputDevices=e.filter((e=>"audiooutput"===e.kind)),{audioInput:this.availableAudioInputDevices,videoInput:this.availableVideoInputDevices,audioOutput:this.availableAudioOutputDevices}}async selectAudioInputDevice(e){if(!e)return void this._warn("No deviceId provided for audio input.");const t={audio:{deviceId:{exact:e}},video:!1};try{const a=(await navigator.mediaDevices.getUserMedia(t)).getAudioTracks()[0],i=this.peerConnection.getSenders().find((e=>"audio"===e.track.kind));if(i){i.replaceTrack(a);i.track.stop()}else this.localStream.addTrack(a),await this._publishTracks();this._log(`Switched to audio input device: ${e}`)}catch(e){this._error("Error switching audio input device:",e)}}async selectVideoInputDevice(e){if(!e)return void this._warn("No deviceId provided for video input.");const t={video:{deviceId:{exact:e}},audio:!1};try{const a=(await navigator.mediaDevices.getUserMedia(t)).getVideoTracks()[0],i=this.peerConnection.getSenders().find((e=>"video"===e.track.kind));if(i){i.replaceTrack(a);i.track.stop()}else this.localStream.addTrack(a),await this._publishTracks();this._log(`Switched to video input device: ${e}`)}catch(e){this._error("Error switching video input device:",e)}}async selectAudioOutputDevice(e){if(e)try{const t=document.querySelectorAll("audio");for(const a of t)await a.setSinkId(e);this.currentAudioOutputDeviceId=e,this._log(`Switched to audio output device: ${e}`)}catch(e){this._error("Error switching audio output device:",e)}else this._warn("No deviceId provided for audio output.")}async previewMedia({audioDeviceId:e,videoDeviceId:t},a=null){const i={audio:!!e&&{deviceId:{exact:e}},video:!!t&&{deviceId:{exact:t}}};try{const e=await navigator.mediaDevices.getUserMedia(i);return a&&(a.srcObject=e),e}catch(e){throw this._error("Error previewing media:",e),e}}toggleMedia({video:e=null,audio:t=null}){if(this.localStream){if(null!==e){this.localStream.getVideoTracks().forEach((t=>{t.enabled=e;const a=this.peerConnection?.getSenders().find((e=>e.track===t));a&&this._updateTrackStatus(a.track.id,"video",e)}))}if(null!==t){this.localStream.getAudioTracks().forEach((e=>{e.enabled=t;const a=this.peerConnection?.getSenders().find((t=>t.track===e));a&&this._updateTrackStatus(a.track.id,"audio",t)}))}}}async shareScreen(){try{await this.unpublishAllTracks("video");const e=(await navigator.mediaDevices.getDisplayMedia({video:!0,audio:!1})).getVideoTracks()[0];this.localStream.addTrack(e),await this._publishTracks(),e.onended=async()=>{await this.unpublishAllTracks(),await this._cleanupEndedTracks(),this.localStream=await navigator.mediaDevices.getUserMedia({video:!0,audio:!0}),this._log("Re-acquired local media"),await this._publishTracks()}}catch(e){throw this._error("Error sharing screen:",e),e}}_sendWebSocketMessage(e){this.ws&&this.ws.readyState===WebSocket.OPEN?(this.ws.send(JSON.stringify(e)),this._log("Sent WebSocket message:",e)):this._warn("WebSocket is not open. Cannot send message.")}async listParticipants(){if(!this.roomId)return this._warn("Not connected to any room.");return(await this._fetch(`${this.backendUrl}/api/rooms/${this.roomId}/participants`).then((e=>e.json()))).participants||[]}_generateUUID(){return"xxxx-xxxx-xxxx-xxxx".replace(/[x]/g,(()=>(16*Math.random()|0).toString(16)))}async unpublishAllTracks(e,t=!1){if(!this.peerConnection)return void this._warn("PeerConnection is not established.");let a=this.peerConnection.getSenders();e&&(a=a.filter((t=>t.track&&t.track.kind===e))),this._log("Unpublishing all tracks:",a.length);const i=await this.peerConnection.createOffer();await this.peerConnection.setLocalDescription(i);for(const e of a)if(e.track)try{const a=e.track.id,s=this.peerConnection.getTransceivers().find((t=>t.sender===e)),o=s?s.mid:null;if(this._log("Unpublishing track:",{trackId:a,mid:o}),!o){this._warn("No mid found for track:",a);continue}e.track.stop(),await this._fetch(`${this.backendUrl}/api/rooms/${this.roomId}/sessions/${this.sessionId}/unpublish`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({trackName:a,mid:o,force:t,sessionDescription:{type:i.type,sdp:i.sdp}})}),this.peerConnection.removeTrack(e),this.publishedTracks.delete(a),await this._cleanupEndedTracks(),this._log(`Successfully unpublished track: ${a}`)}catch(e){this._error("Error unpublishing track:",e)}}async getSessionState(){if(!this.sessionId)return this._warn("No active session");try{const e=await this._fetch(`${this.backendUrl}/api/rooms/${this.roomId}/sessions/${this.sessionId}/state`),t=await e.json();return t.tracks&&(this.trackStates=new Map(t.tracks.map((e=>[e.trackName,e.status])))),t}catch(e){throw this._error("Error getting session state:",e),e}}async getTrackStatus(e){const t=await this.getSessionState();return t.tracks.find((t=>t.trackName===e))?.status}async _updateTrackStatus(e,t,a){try{const i=`${this.backendUrl}/api/rooms/${this.roomId}/sessions/${this.sessionId}/track-status`,s=await this._fetch(i,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({trackId:e,kind:t,enabled:a,force:!1})}),o=await s.json();if(o.errorCode)throw new Error(o.errorDescription||"Unknown error updating track status");return o.requiresImmediateRenegotiation&&await this._renegotiate(),o.errorCode||this._updateTrackState(e,a?"enabled":"disabled"),o}catch(e){throw this._error("Error updating track status:",e),e}}_handleError(e){if(e.errorCode){const t=new Error(e.errorDescription||"Unknown error");throw t.code=e.errorCode,t}return e}async getUserInfo(e=null){try{const t=await this._fetch(`${this.backendUrl}/api/users/${e||"me"}`);return await t.json()}catch(e){throw this._error("Error getting user info:",e),e}}_handleWebSocketMessage(e){try{const t=JSON.parse(e.data);switch(this._log("WebSocket message received:",t),this._wsMessageHandlers.forEach((e=>{try{e(t)}catch(e){this._error("Error in WebSocket message handler:",e)}})),t.type){case"participant-joined":this._onParticipantJoinedCallback&&this._onParticipantJoinedCallback(t.payload);break;case"participant-left":this._onParticipantLeftCallback&&this._onParticipantLeftCallback(t.payload.sessionId);break;case"track-published":this._onRemoteTrackCallback&&this._onRemoteTrackCallback(t.payload);break;case"track-unpublished":this._onRemoteTrackUnpublishedCallback&&this._onRemoteTrackUnpublishedCallback(t.payload.sessionId,t.payload.trackName);break;case"track-status-changed":this._onTrackStatusChangedCallback&&this._onTrackStatusChangedCallback(t.payload);break;case"data-message":this._onDataMessageCallback&&this._onDataMessageCallback(t.payload);break;case"room-metadata-updated":this._onRoomMetadataUpdatedCallback&&this._onRoomMetadataUpdatedCallback(t.payload);break;default:this._log("Unhandled message type:",t.type)}}catch(e){this._error("Error handling WebSocket message:",e)}}_updateTrackState(e,t){this.trackStates||(this.trackStates=new Map),this.trackStates.set(e,t)}async listRooms(){return(await this._fetch(`${this.backendUrl}/api/rooms`).then((e=>e.json()))).rooms}async updateRoomMetadata(e){return this.roomId?await this._fetch(`${this.backendUrl}/api/rooms/${this.roomId}/metadata`,{method:"PUT",headers:{"Content-Type":"application/json"},body:JSON.stringify(e)}).then((e=>e.json())):this._warn("Not connected to any room")}async sendDataToAll(e){if(!this.roomId||!this.sessionId)throw new Error("Must be in a room to send data");if(!this.ws||this.ws.readyState!==WebSocket.OPEN)throw new Error("WebSocket connection not available");this.ws.send(JSON.stringify({type:"data-message",payload:{from:this.sessionId,message:e}}))}setMediaQuality(t){if("string"==typeof t){const a=e.QUALITY_PRESETS[t];if(!a)return this._warn(`Unknown quality preset: ${t}`);this.mediaQuality=t,t=a}this.mediaQuality={video:{...this.mediaQuality.video,...t.video},audio:{...this.mediaQuality.audio,...t.audio}},this.pendingQualitySettings=this.mediaQuality,this.peerConnection&&this._applyQualitySettings()}async _applyQualitySettings(){if(!this.peerConnection)return;const e=this.peerConnection.getSenders();for(const t of e){if(!t.track)continue;const e=t.getParameters();e.encodings||(e.encodings=[{}]);const a=t.track.kind,i=this.mediaQuality[a];if(i.maxBitrate&&(e.encodings[0].maxBitrate=i.maxBitrate),"video"===a){const e={width:i.width,height:i.height,frameRate:i.frameRate};await t.track.applyConstraints(e)}await t.setParameters(e)}}startStatsMonitoring(e=1e3){"monitoring"!==this.statsMonitoringState&&(this.statsMonitoringState="monitoring",this.statsInterval=setInterval((async()=>{if(!this.peerConnection)return;const e=await this._gatherConnectionStats(),t=await this._gatherStreamStats();this._onConnectionStatsCallback&&this._onConnectionStatsCallback(e,t)}),e))}stopStatsMonitoring(){this.statsInterval&&(clearInterval(this.statsInterval),this.statsInterval=null),this.statsMonitoringState="stopped"}onConnectionStats(e){this._onConnectionStatsCallback=e}async _gatherConnectionStats(){if(!this.peerConnection)return this._warn("No active connection");const e=await this.peerConnection.getStats(),t={outbound:{bitrate:0,packetLoss:0,qualityLimitation:"none"},inbound:{bitrate:0,packetLoss:0,jitter:0},connection:{roundTripTime:0,state:this.peerConnection.connectionState}};let a=null,i=null;if(e.forEach((e=>{switch(e.type){case"outbound-rtp":"video"===e.kind&&(a=e,t.outbound.qualityLimitation=e.qualityLimitationReason);break;case"inbound-rtp":"video"===e.kind&&(i=e,t.inbound.jitter=e.jitter,e.packetsLost>0&&(t.inbound.packetLoss=e.packetsLost/(e.packetsReceived+e.packetsLost)*100));break;case"candidate-pair":"succeeded"===e.state&&(t.connection.roundTripTime=e.currentRoundTripTime)}})),this.previousStats&&a&&i){const e=(a.timestamp-this.previousStats.outboundTimestamp)/1e3;if(e>0){const s=a.bytesSent-this.previousStats.bytesSent;t.outbound.bitrate=8*s/e;const o=i.bytesReceived-this.previousStats.bytesReceived;t.inbound.bitrate=8*o/e}}return a&&i&&(this.previousStats={outboundTimestamp:a.timestamp,bytesSent:a.bytesSent,bytesReceived:i.bytesReceived}),t}async getConnectionStats(){return this._gatherConnectionStats()}async _gatherStreamStats(){if(!this.peerConnection)return new Map;const e=await this.peerConnection.getStats(),t=new Map;return this.sessionId&&t.set(this.sessionId,{sessionId:this.sessionId,packetLoss:0,qualityLimitation:"none",bitrate:0}),e.forEach((e=>{if("outbound-rtp"===e.type&&"video"===e.kind){const a=t.get(this.sessionId);a&&(a.qualityLimitation=e.qualityLimitationReason,a.bitrate=8*e.bytesSent/e.timestamp)}else if("inbound-rtp"===e.type&&"video"===e.kind){const a=e.mid,i=this.midToSessionId.get(a);i&&t.set(i,{sessionId:i,packetLoss:e.packetsLost>0?e.packetsLost/(e.packetsReceived+e.packetsLost)*100:0,qualityLimitation:"none",bitrate:8*e.bytesReceived/e.timestamp})}})),t}static QUALITY_PRESETS={high_16x9_xl:{video:{width:{ideal:1920},height:{ideal:1080},frameRate:{ideal:30},maxBitrate:25e5},audio:{maxBitrate:128e3,sampleRate:48e3,channelCount:2}},high_16x9_lg:{video:{width:{ideal:1280},height:{ideal:720},frameRate:{ideal:30},maxBitrate:15e5},audio:{maxBitrate:96e3,sampleRate:48e3,channelCount:2}},high_16x9_md:{video:{width:{ideal:854},height:{ideal:480},frameRate:{ideal:30},maxBitrate:8e5},audio:{maxBitrate:96e3,sampleRate:48e3,channelCount:1}},high_16x9_sm:{video:{width:{ideal:640},height:{ideal:360},frameRate:{ideal:30},maxBitrate:6e5},audio:{maxBitrate:64e3,sampleRate:44100,channelCount:1}},high_16x9_xs:{video:{width:{ideal:480},height:{ideal:270},frameRate:{ideal:30},maxBitrate:4e5},audio:{maxBitrate:64e3,sampleRate:44100,channelCount:1}},medium_16x9_xl:{video:{width:{ideal:1920},height:{ideal:1080},frameRate:{ideal:24},maxBitrate:2e6},audio:{maxBitrate:96e3,sampleRate:48e3,channelCount:2}},medium_16x9_lg:{video:{width:{ideal:1280},height:{ideal:720},frameRate:{ideal:24},maxBitrate:12e5},audio:{maxBitrate:96e3,sampleRate:48e3,channelCount:1}},medium_16x9_md:{video:{width:{ideal:854},height:{ideal:480},frameRate:{ideal:24},maxBitrate:6e5},audio:{maxBitrate:64e3,sampleRate:44100,channelCount:1}},medium_16x9_sm:{video:{width:{ideal:640},height:{ideal:360},frameRate:{ideal:20},maxBitrate:4e5},audio:{maxBitrate:48e3,sampleRate:44100,channelCount:1}},medium_16x9_xs:{video:{width:{ideal:480},height:{ideal:270},frameRate:{ideal:20},maxBitrate:3e5},audio:{maxBitrate:48e3,sampleRate:44100,channelCount:1}},low_16x9_xl:{video:{width:{ideal:1920},height:{ideal:1080},frameRate:{ideal:15},maxBitrate:15e5},audio:{maxBitrate:64e3,sampleRate:44100,channelCount:1}},low_16x9_lg:{video:{width:{ideal:1280},height:{ideal:720},frameRate:{ideal:15},maxBitrate:8e5},audio:{maxBitrate:48e3,sampleRate:44100,channelCount:1}},low_16x9_md:{video:{width:{ideal:854},height:{ideal:480},frameRate:{ideal:15},maxBitrate:4e5},audio:{maxBitrate:32e3,sampleRate:44100,channelCount:1}},low_16x9_sm:{video:{width:{ideal:640},height:{ideal:360},frameRate:{ideal:12},maxBitrate:25e4},audio:{maxBitrate:32e3,sampleRate:22050,channelCount:1}},low_16x9_xs:{video:{width:{ideal:480},height:{ideal:270},frameRate:{ideal:10},maxBitrate:15e4},audio:{maxBitrate:24e3,sampleRate:22050,channelCount:1}},high_4x3_xl:{video:{width:{ideal:960},height:{ideal:720},frameRate:{ideal:30},maxBitrate:15e5},audio:{maxBitrate:128e3,sampleRate:48e3,channelCount:2}},high_4x3_lg:{video:{width:{ideal:640},height:{ideal:480},frameRate:{ideal:30},maxBitrate:8e5},audio:{maxBitrate:96e3,sampleRate:48e3,channelCount:1}},high_4x3_md:{video:{width:{ideal:480},height:{ideal:360},frameRate:{ideal:30},maxBitrate:6e5},audio:{maxBitrate:96e3,sampleRate:44100,channelCount:1}},high_4x3_sm:{video:{width:{ideal:320},height:{ideal:240},frameRate:{ideal:30},maxBitrate:4e5},audio:{maxBitrate:64e3,sampleRate:44100,channelCount:1}},high_4x3_xs:{video:{width:{ideal:240},height:{ideal:180},frameRate:{ideal:30},maxBitrate:25e4},audio:{maxBitrate:64e3,sampleRate:44100,channelCount:1}},medium_4x3_xl:{video:{width:{ideal:960},height:{ideal:720},frameRate:{ideal:24},maxBitrate:12e5},audio:{maxBitrate:96e3,sampleRate:48e3,channelCount:1}},medium_4x3_lg:{video:{width:{ideal:640},height:{ideal:480},frameRate:{ideal:24},maxBitrate:6e5},audio:{maxBitrate:64e3,sampleRate:44100,channelCount:1}},medium_4x3_md:{video:{width:{ideal:480},height:{ideal:360},frameRate:{ideal:20},maxBitrate:4e5},audio:{maxBitrate:48e3,sampleRate:44100,channelCount:1}},medium_4x3_sm:{video:{width:{ideal:320},height:{ideal:240},frameRate:{ideal:20},maxBitrate:3e5},audio:{maxBitrate:48e3,sampleRate:44100,channelCount:1}},medium_4x3_xs:{video:{width:{ideal:240},height:{ideal:180},frameRate:{ideal:20},maxBitrate:2e5},audio:{maxBitrate:48e3,sampleRate:44100,channelCount:1}},low_4x3_xl:{video:{width:{ideal:960},height:{ideal:720},frameRate:{ideal:15},maxBitrate:8e5},audio:{maxBitrate:48e3,sampleRate:44100,channelCount:1}},low_4x3_lg:{video:{width:{ideal:640},height:{ideal:480},frameRate:{ideal:15},maxBitrate:4e5},audio:{maxBitrate:32e3,sampleRate:44100,channelCount:1}},low_4x3_md:{video:{width:{ideal:480},height:{ideal:360},frameRate:{ideal:12},maxBitrate:25e4},audio:{maxBitrate:32e3,sampleRate:22050,channelCount:1}},low_4x3_sm:{video:{width:{ideal:320},height:{ideal:240},frameRate:{ideal:10},maxBitrate:15e4},audio:{maxBitrate:24e3,sampleRate:22050,channelCount:1}},low_4x3_xs:{video:{width:{ideal:240},height:{ideal:180},frameRate:{ideal:10},maxBitrate:1e5},audio:{maxBitrate:24e3,sampleRate:22050,channelCount:1}},high_1x1_xl:{video:{width:{ideal:720},height:{ideal:720},frameRate:{ideal:30},maxBitrate:15e5},audio:{maxBitrate:128e3,sampleRate:48e3,channelCount:2}},high_1x1_lg:{video:{width:{ideal:480},height:{ideal:480},frameRate:{ideal:30},maxBitrate:8e5},audio:{maxBitrate:96e3,sampleRate:48e3,channelCount:1}},high_1x1_md:{video:{width:{ideal:360},height:{ideal:360},frameRate:{ideal:30},maxBitrate:6e5},audio:{maxBitrate:96e3,sampleRate:44100,channelCount:1}},high_1x1_sm:{video:{width:{ideal:240},height:{ideal:240},frameRate:{ideal:30},maxBitrate:4e5},audio:{maxBitrate:64e3,sampleRate:44100,channelCount:1}},high_1x1_xs:{video:{width:{ideal:180},height:{ideal:180},frameRate:{ideal:30},maxBitrate:25e4},audio:{maxBitrate:64e3,sampleRate:44100,channelCount:1}},medium_1x1_xl:{video:{width:{ideal:720},height:{ideal:720},frameRate:{ideal:24},maxBitrate:12e5},audio:{maxBitrate:96e3,sampleRate:48e3,channelCount:1}},medium_1x1_lg:{video:{width:{ideal:480},height:{ideal:480},frameRate:{ideal:24},maxBitrate:6e5},audio:{maxBitrate:64e3,sampleRate:44100,channelCount:1}},medium_1x1_md:{video:{width:{ideal:360},height:{ideal:360},frameRate:{ideal:20},maxBitrate:4e5},audio:{maxBitrate:48e3,sampleRate:44100,channelCount:1}},medium_1x1_sm:{video:{width:{ideal:240},height:{ideal:240},frameRate:{ideal:20},maxBitrate:3e5},audio:{maxBitrate:48e3,sampleRate:44100,channelCount:1}},medium_1x1_xs:{video:{width:{ideal:180},height:{ideal:180},frameRate:{ideal:20},maxBitrate:2e5},audio:{maxBitrate:48e3,sampleRate:44100,channelCount:1}},low_1x1_xl:{video:{width:{ideal:720},height:{ideal:720},frameRate:{ideal:15},maxBitrate:8e5},audio:{maxBitrate:48e3,sampleRate:44100,channelCount:1}},low_1x1_lg:{video:{width:{ideal:480},height:{ideal:480},frameRate:{ideal:15},maxBitrate:4e5},audio:{maxBitrate:32e3,sampleRate:44100,channelCount:1}},low_1x1_md:{video:{width:{ideal:360},height:{ideal:360},frameRate:{ideal:12},maxBitrate:25e4},audio:{maxBitrate:32e3,sampleRate:22050,channelCount:1}},low_1x1_sm:{video:{width:{ideal:240},height:{ideal:240},frameRate:{ideal:10},maxBitrate:15e4},audio:{maxBitrate:24e3,sampleRate:22050,channelCount:1}},low_1x1_xs:{video:{width:{ideal:180},height:{ideal:180},frameRate:{ideal:10},maxBitrate:1e5},audio:{maxBitrate:24e3,sampleRate:22050,channelCount:1}},high_9x16_xl:{video:{width:{ideal:1080},height:{ideal:1920},frameRate:{ideal:30},maxBitrate:25e5},audio:{maxBitrate:128e3,sampleRate:48e3,channelCount:2}},high_9x16_lg:{video:{width:{ideal:720},height:{ideal:1280},frameRate:{ideal:30},maxBitrate:15e5},audio:{maxBitrate:96e3,sampleRate:48e3,channelCount:1}},high_9x16_md:{video:{width:{ideal:480},height:{ideal:854},frameRate:{ideal:30},maxBitrate:8e5},audio:{maxBitrate:96e3,sampleRate:44100,channelCount:1}},high_9x16_sm:{video:{width:{ideal:360},height:{ideal:640},frameRate:{ideal:30},maxBitrate:6e5},audio:{maxBitrate:64e3,sampleRate:44100,channelCount:1}},high_9x16_xs:{video:{width:{ideal:270},height:{ideal:480},frameRate:{ideal:30},maxBitrate:4e5},audio:{maxBitrate:64e3,sampleRate:44100,channelCount:1}},medium_9x16_xl:{video:{width:{ideal:1080},height:{ideal:1920},frameRate:{ideal:24},maxBitrate:2e6},audio:{maxBitrate:96e3,sampleRate:48e3,channelCount:1}},medium_9x16_lg:{video:{width:{ideal:720},height:{ideal:1280},frameRate:{ideal:24},maxBitrate:12e5},audio:{maxBitrate:64e3,sampleRate:44100,channelCount:1}},medium_9x16_md:{video:{width:{ideal:480},height:{ideal:854},frameRate:{ideal:20},maxBitrate:6e5},audio:{maxBitrate:48e3,sampleRate:44100,channelCount:1}},medium_9x16_sm:{video:{width:{ideal:360},height:{ideal:640},frameRate:{ideal:20},maxBitrate:4e5},audio:{maxBitrate:48e3,sampleRate:44100,channelCount:1}},medium_9x16_xs:{video:{width:{ideal:270},height:{ideal:480},frameRate:{ideal:20},maxBitrate:3e5},audio:{maxBitrate:48e3,sampleRate:44100,channelCount:1}},low_9x16_xl:{video:{width:{ideal:1080},height:{ideal:1920},frameRate:{ideal:15},maxBitrate:15e5},audio:{maxBitrate:48e3,sampleRate:44100,channelCount:1}},low_9x16_lg:{video:{width:{ideal:720},height:{ideal:1280},frameRate:{ideal:15},maxBitrate:8e5},audio:{maxBitrate:32e3,sampleRate:44100,channelCount:1}},low_9x16_md:{video:{width:{ideal:480},height:{ideal:854},frameRate:{ideal:12},maxBitrate:4e5},audio:{maxBitrate:32e3,sampleRate:22050,channelCount:1}},low_9x16_sm:{video:{width:{ideal:360},height:{ideal:640},frameRate:{ideal:10},maxBitrate:25e4},audio:{maxBitrate:24e3,sampleRate:22050,channelCount:1}},low_9x16_xs:{video:{width:{ideal:270},height:{ideal:480},frameRate:{ideal:10},maxBitrate:15e4},audio:{maxBitrate:24e3,sampleRate:22050,channelCount:1}}}}return e}));

public/js/FaceMaskFilter.js ADDED Viewed

	@@ -0,0 +1,203 @@

+class FaceMaskFilter {
+  constructor(videoElement, canvasElement, maskImageElement) {
+    this.video = videoElement;
+    this.canvas = canvasElement;
+    this.context = this.canvas.getContext('2d');
+    this.maskImage = maskImageElement;
+    this.faceMesh = null;
+    this.camera = null;
+    this.isProcessing = false;
+    this.frameRequestId = null;
+  }
+  async initialize() {
+    this.initFaceMesh();
+    // await this.startCamera();
+  }
+  initFaceMesh() {
+    this.faceMesh = new FaceMesh({
+      locateFile: (file) => {
+        return `https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh/${file}`;
+      }
+    });
+    this.faceMesh.setOptions({
+      maxNumFaces: 1,
+      refineLandmarks: true,
+      minDetectionConfidence: 0.5,
+      minTrackingConfidence: 0.5
+    });
+    this.faceMesh.onResults(this.onResults.bind(this));
+  }
+  // async startCamera() {
+  //   this.camera = new Camera(this.video, {
+  //     onFrame: async () => {
+  //       await this.faceMesh.send({image: this.video});
+  //     },
+  //     width: 640,
+  //     height: 480
+  //   });
+  //   await this.camera.start();
+  // }
+  async processFrame(inputStream) {
+    if (this.frameRequestId) {
+      cancelAnimationFrame(this.frameRequestId);
+    }
+    this.video.srcObject = inputStream;
+    this.video.width = this.canvas.width;
+    this.video.height = this.canvas.height;
+    // Wait for video to be ready
+    await new Promise((resolve) => {
+      this.video.onloadedmetadata = () => {
+        this.video.play();
+        resolve();
+      };
+    });
+    const processFrameLoop = async () => {
+      if (this.video.readyState === 4) {
+        await this.faceMesh.send({ image: this.video });
+      }
+      this.frameRequestId = requestAnimationFrame(processFrameLoop);
+    };
+    processFrameLoop();
+    return this.canvas.captureStream();
+  }
+  onResults(results) {
+    this.context.save();
+    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    this.context.drawImage(results.image, 0, 0, this.canvas.width, this.canvas.height);
+    if (results.multiFaceLandmarks) {
+      for (const landmarks of results.multiFaceLandmarks) {
+        this.drawMask(landmarks);
+      }
+    }
+    this.context.restore();
+  }
+  drawMask(landmarks) {
+    // Check if current mask is medical type
+    const isMedicalMask = this.maskImage.src.includes('medicel/');
+    if (isMedicalMask) {
+      this.drawMedicalMask(landmarks);
+    } else {
+      this.drawBasicMask(landmarks);
+    }
+  }
+  // Existing mask drawing logic renamed to drawBasicMask
+  drawBasicMask(landmarks) {
+    const leftEar = landmarks[234];
+    const rightEar = landmarks[454];
+    const chin = landmarks[199];
+    const bottomChin = landmarks[175];
+    const noseBridge = landmarks[6];
+    const foreHead = landmarks[10];
+    const faceWidth = Math.sqrt(
+      Math.pow((rightEar.x - leftEar.x) * this.canvas.width, 2) +
+      Math.pow((rightEar.y - leftEar.y) * this.canvas.height, 2)
+    );
+    const faceHeight = Math.sqrt(
+      Math.pow((bottomChin.y - foreHead.y) * this.canvas.height, 2) +
+      Math.pow((bottomChin.x - foreHead.x) * this.canvas.width, 2)
+    );
+    const angle = Math.atan2(
+      (rightEar.y - leftEar.y) * this.canvas.height,
+      (rightEar.x - leftEar.x) * this.canvas.width
+    );
+    this.context.save();
+    const centerX = noseBridge.x * this.canvas.width;
+    const centerY = (noseBridge.y * 0.6 + bottomChin.y * 0.4) * this.canvas.height;
+    this.context.translate(centerX, centerY);
+    this.context.rotate(angle);
+    const maskWidth = faceWidth * 1.4;
+    const maskHeight = faceHeight * 1.5;
+    this.context.drawImage(
+      this.maskImage,
+      -maskWidth / 2,
+      -maskHeight / 2,
+      maskWidth,
+      maskHeight
+    );
+    this.context.restore();
+  }
+  // Add new method for medical mask
+  drawMedicalMask(landmarks) {
+    // Landmarks for medical mask positioning
+    const noseTip = landmarks[1];        // Tip of nose
+    const leftCheek = landmarks[234];    // Left cheek
+    const rightCheek = landmarks[454];   // Right cheek
+    const chin = landmarks[152];         // Bottom of chin
+    // Calculate mask dimensions
+    const faceWidth = Math.sqrt(
+      Math.pow((rightCheek.x - leftCheek.x) * this.canvas.width, 2) +
+      Math.pow((rightCheek.y - leftCheek.y) * this.canvas.height, 2)
+    );
+    const maskHeight = Math.sqrt(
+      Math.pow((chin.y - noseTip.y) * this.canvas.height, 2) +
+      Math.pow((chin.x - noseTip.x) * this.canvas.width, 2)
+    ) * 1.2; // Slightly larger than nose-to-chin distance
+    // Calculate angle for mask rotation
+    const angle = Math.atan2(
+      (rightCheek.y - leftCheek.y) * this.canvas.height,
+      (rightCheek.x - leftCheek.x) * this.canvas.width
+    );
+    this.context.save();
+    // Position mask centered on nose tip
+    const centerX = noseTip.x * this.canvas.width;
+    const centerY = noseTip.y * this.canvas.height;
+    this.context.translate(centerX, centerY);
+    this.context.rotate(angle);
+    // Draw mask slightly wider than face width
+    const maskWidth = faceWidth * 1.2;
+    this.context.drawImage(
+      this.maskImage,
+      -maskWidth / 2,
+      0, // Start from nose tip
+      maskWidth,
+      maskHeight
+    );
+    this.context.restore();
+  }
+}
+// // Khởi tạo khi bấm nút Start
+// document.getElementById('startButton').addEventListener('click', async () => {
+//   document.getElementById('startButton').style.display = 'none';
+//   document.getElementById('video').style.display = 'block';
+//   document.getElementById('canvas').style.display = 'block';
+//   const faceMaskFilter = new FaceMaskFilter(
+//     document.getElementById('video'),
+//     document.getElementById('canvas'),
+//     document.getElementById('maskImage')
+//   );
+//   await faceMaskFilter.initialize();
+// });

public/js/backgroundBlur.js ADDED Viewed

	@@ -0,0 +1,99 @@

+class BackgroundBlur {
+    constructor(videoElement, canvasElement) {
+        if (!canvasElement) {
+            throw new Error('Canvas element is required for BackgroundBlur');
+        }
+        this.video = videoElement;
+        this.canvas = canvasElement;
+        this.context = this.canvas.getContext('2d');
+        if (!this.context) {
+            throw new Error('Failed to get canvas context');
+        }
+        this.selfieSegmentation = null;
+        // Set canvas dimensions
+        this.canvas.width = 640;
+        this.canvas.height = 480;
+    }
+    // Add method to update input stream
+    async updateInputStream(stream) {
+        this.video.srcObject = stream;
+        this.video.width = this.canvas.width;
+        this.video.height = this.canvas.height;
+        // Wait for video to be ready
+        await new Promise((resolve) => {
+            this.video.onloadedmetadata = () => {
+                this.video.play();
+                resolve();
+            };
+        });
+        return this.canvas.captureStream();
+    }
+    async initialize() {
+        this.initSelfieSegmentation();
+        await this.startCamera();
+    }
+    initSelfieSegmentation() {
+        this.selfieSegmentation = new SelfieSegmentation({
+            locateFile: (file) => `https://cdn.jsdelivr.net/npm/@mediapipe/selfie_segmentation/${file}`,
+        });
+        this.selfieSegmentation.setOptions({ modelSelection: 1 }); // Chọn model phân tách nền
+        this.selfieSegmentation.onResults(this.onResults.bind(this));
+    }
+    async startCamera() {
+        const stream = await navigator.mediaDevices.getUserMedia({ video: true });
+        this.video.srcObject = stream;
+        this.video.play();
+        requestAnimationFrame(this.processFrame.bind(this));
+    }
+    async processFrame() {
+        if (this.selfieSegmentation && this.video.readyState === 4) {
+            await this.selfieSegmentation.send({ image: this.video });
+        }
+        requestAnimationFrame(this.processFrame.bind(this));
+    }
+    // Modify onResults to accept custom input
+    onResults(results) {
+        if (!results || !results.segmentationMask) return;
+        this.context.save();
+        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        // Draw input image (could be masked or original)
+        this.context.drawImage(results.image, 0, 0, this.canvas.width, this.canvas.height);
+        // Create temp canvas for blur
+        const tempCanvas = document.createElement('canvas');
+        tempCanvas.width = this.canvas.width;
+        tempCanvas.height = this.canvas.height;
+        const tempCtx = tempCanvas.getContext('2d');
+        // Apply blur
+        tempCtx.filter = 'blur(10px)';
+        tempCtx.drawImage(results.image, 0, 0, this.canvas.width, this.canvas.height);
+        // Apply mask
+        this.context.globalCompositeOperation = 'destination-in';
+        this.context.drawImage(results.segmentationMask, 0, 0, this.canvas.width, this.canvas.height);
+        // Draw blurred background
+        this.context.globalCompositeOperation = 'destination-over';
+        this.context.drawImage(tempCanvas, 0, 0);
+        this.context.restore();
+    }
+}

public/js/room-oldcode.js ADDED Viewed

	@@ -0,0 +1,2231 @@

+// Add utility function to escape HTML
+function escapeHtml(unsafe) {
+    return unsafe
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#039;");
+}
+// Update API URL detection logic
+const isLocalhost = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
+const API_BASE = isLocalhost
+    ? 'http://127.0.0.1:7860'
+    : 'https://manhteky123-dapp-meeting.hf.space';
+let APP_ID;
+let APP_TOKEN;
+let localStream;
+let localPeerConnection;
+let participants = new Map(); // Store participant connections
+let ws; // WebSocket connection
+const urlParams = new URLSearchParams(window.location.search);
+const roomId = urlParams.get('roomId');
+const username = urlParams.get('username');
+// Get stored device preferences
+const devicePrefs = JSON.parse(localStorage.getItem('selectedDevices') || '{}');
+// Add at the top with other global variables
+let faceMaskFilter = null;
+let processedStream = null;
+// Add after other global variables
+let currentMask = 'default.png';
+let masksList = [];
+// Add at the top with other global variables
+let backgroundBlur = null;
+let isBlurEnabled = false;
+let blurCanvas = null;
+async function initializeRoom() {
+    try {
+        await loadAvailableMasks();
+        // Fetch Cloudflare credentials first
+        const credentialsResponse = await fetch(`${API_BASE}/cloudflare/credentials`);
+        if (!credentialsResponse.ok) {
+            throw new Error('Failed to fetch Cloudflare credentials');
+        }
+        const credentials = await credentialsResponse.json();
+        APP_ID = credentials.appId;
+        APP_TOKEN = credentials.token;
+        console.log("AppID: ", APP_ID);
+        console.log("SessionID: ", APP_TOKEN);
+        // Initialize local media with stored preferences
+        localStream = await navigator.mediaDevices.getUserMedia({
+            audio: { deviceId: devicePrefs.audioDeviceId },
+            video: { deviceId: devicePrefs.videoDeviceId }
+        });
+        // Initialize face mask filter
+        const maskCanvas = document.getElementById('maskCanvas');
+        const maskImage = document.getElementById('maskImage');
+        faceMaskFilter = new FaceMaskFilter(
+            document.createElement('video'), // Create temporary video element
+            maskCanvas,
+            maskImage
+        );
+        await faceMaskFilter.initialize();
+        // Create processed stream from canvas
+        processedStream = maskCanvas.captureStream();
+        // Add audio track from original stream
+        localStream.getAudioTracks().forEach(track => {
+            processedStream.addTrack(track);
+        });
+        // Setup audio detection after stream is initialized
+        setupAudioDetection();
+        // Apply stored enable/disable states
+        localStream.getAudioTracks()[0].enabled = devicePrefs.audioEnabled;
+        localStream.getVideoTracks()[0].enabled = devicePrefs.videoEnabled;
+        // Add local video to grid
+        addVideoStream('local', username, localStream);
+        updateControls();
+        // Get session info from backend
+        const response = await fetch(`${API_BASE}/meetings/${roomId}/info`);
+        if (!response.ok) {
+            throw new Error('Failed to fetch meeting info');
+        }
+        const meetingInfo = await response.json();
+        console.log('Meeting info received:', meetingInfo);
+        if (!meetingInfo.sessions || meetingInfo.sessions.length === 0) {
+            throw new Error('No sessions array in meeting info');
+        }
+        // Find current user's session
+        const userSession = meetingInfo.sessions.find(s => s.username === username);
+        if (!userSession) {
+            throw new Error('No session found for user: ' + username);
+        }
+        // Initialize WebSocket connection
+        await setupWebSocket();
+        // Initialize WebRTC with user's session
+        await setupCloudflareRTC(userSession.session_id);
+        // After setting up our connection, handle existing participants
+        await handleExistingParticipants(meetingInfo.sessions);
+        // Add after localStream initialization
+        // Setup blur canvas
+        blurCanvas = document.createElement('canvas');
+        blurCanvas.id = 'blurCanvas';
+        blurCanvas.width = 640;
+        blurCanvas.height = 480;
+        document.body.appendChild(blurCanvas);
+        // Initialize background blur
+        backgroundBlur = new BackgroundBlur(
+            document.createElement('video'), // Create temporary video element
+            blurCanvas
+        );
+        await backgroundBlur.initialize();
+    } catch (error) {
+        console.error('Error initializing room:', error);
+        alert('Failed to initialize meeting room: ' + error.message);
+    }
+}
+// Add new function to handle existing participants
+async function handleExistingParticipants(sessions) {
+    console.log('Handling existing participants:', sessions);
+    const existingParticipants = sessions.filter(s => s.username !== username);
+    for (const participant of existingParticipants) {
+        try {
+            // Get session state from Cloudflare
+            const sessionState = await fetch(
+                `https://rtc.live.cloudflare.com/v1/apps/${APP_ID}/sessions/${participant.session_id}`,
+                {
+                    headers: {
+                        "Authorization": `Bearer ${APP_TOKEN}`
+                    }
+                }
+            ).then(res => res.json());
+            console.log('Session state for existing participant:', participant.username, sessionState);
+            if (sessionState.errorCode) {
+                console.warn(`Error getting session state for ${participant.username}:`, sessionState.errorDescription);
+                continue;
+            }
+            // Add to participants map first
+            participants.set(participant.session_id, {
+                username: participant.username,
+                stream: null,
+                sessionId: participant.session_id
+            });
+            // Pull tracks if available
+            if (sessionState.tracks && sessionState.tracks.length > 0) {
+                const activeTracks = sessionState.tracks.filter(track => track.status === 'active');
+                if (activeTracks.length > 0) {
+                    console.log('Found active tracks for', participant.username, ':', activeTracks);
+                    // Use retryOperation for pulling tracks
+                    await retryOperation(
+                        () => pullParticipantTracks(activeTracks, {
+                            session_id: participant.session_id,
+                            username: participant.username
+                        }),
+                        5, // max retries
+                        1000, // initial delay
+                        'Pulling tracks for ' + participant.username
+                    );
+                }
+            }
+        } catch (err) {
+            console.error(`Error handling existing participant ${participant.username}:`, err);
+        }
+    }
+    // Update UI after handling all participants
+    updateParticipantsList();
+    updateGridLayout();
+}
+// Add utility function for retrying operations
+async function retryOperation(operation, maxRetries, initialDelay, operationName) {
+    let lastError;
+    for (let attempt = 0; attempt < maxRetries; attempt++) {
+        try {
+            const result = await operation();
+            console.log(`${operationName} succeeded on attempt ${attempt + 1}`);
+            return result;
+        } catch (error) {
+            lastError = error;
+            console.warn(`${operationName} failed attempt ${attempt + 1}:`, error);
+            if (attempt < maxRetries - 1) {
+                const delay = initialDelay * Math.pow(2, attempt) * (1 + Math.random() * 0.1);
+                console.log(`Retrying ${operationName} in ${delay}ms...`);
+                await new Promise(resolve => setTimeout(resolve, delay));
+            }
+        }
+    }
+    throw lastError;
+}
+// Update pullParticipantTracks to use timeout and better error handling
+async function pullParticipantTracks(tracks, participant) {
+    const maxRetries = 5;
+    const baseDelay = 1000;
+    const localSessionId = localPeerConnection.sessionId;
+    // Prevent pulling tracks for our own session
+    if (localSessionId === participant.session_id) {
+        console.log('Skipping track pull for local session');
+        return;
+    }
+    for (let attempt = 0; attempt < maxRetries; attempt++) {
+        try {
+            // Only check existing stream for non-screen share participants
+            if (!participant.isScreenShare && participants.get(participant.session_id)?.stream) {
+                console.log('Participant already has stream:', participant.username);
+                return;
+            }
+            console.log(`Pulling tracks attempt ${attempt + 1}/${maxRetries} for participant:`, participant.username, tracks);
+            // Set up track reception promise with timeout
+            const receivedTracksPromise = new Promise((resolve, reject) => {
+                const receivedTracks = new Map();
+                const timeout = setTimeout(() => {
+                    reject(new Error("Track reception timeout"));
+                }, 15000);
+                // Store the track IDs we're expecting for this participant
+                participant.pendingTracks = new Set(tracks.map(track => track.trackName));
+                console.log('Expecting tracks for participant:', participant.username, participant.pendingTracks);
+                const trackHandler = (event) => {
+                    const track = event.track;
+                    if (participant.pendingTracks.has(track.id)) {
+                        console.log(`Received expected ${track.kind} track for ${participant.username}:`, track.id);
+                        receivedTracks.set(track.id, track);
+                        if (receivedTracks.size >= tracks.length) {
+                            clearTimeout(timeout);
+                            localPeerConnection.removeEventListener('track', trackHandler);
+                            resolve(Array.from(receivedTracks.values()));
+                        }
+                    }
+                };
+                localPeerConnection.addEventListener('track', trackHandler);
+            });
+            // Pull remote tracks
+            console.log(`Pulling tracks for participant ${participant.username} using local session ${localSessionId}`);
+            const pullResponse = await fetch(
+                `https://rtc.live.cloudflare.com/v1/apps/${APP_ID}/sessions/${localSessionId}/tracks/new`,
+                {
+                    method: "POST",
+                    headers: {
+                        "Authorization": `Bearer ${APP_TOKEN}`,
+                        "Content-Type": "application/json"
+                    },
+                    body: JSON.stringify({
+                        tracks: tracks.map(track => ({
+                            location: "remote",
+                            sessionId: participant.session_id,
+                            trackName: track.trackName
+                        }))
+                    })
+                }
+            );
+            if (!pullResponse.ok) {
+                throw new Error(`Failed to pull tracks: ${pullResponse.status}`);
+            }
+            const pullData = await pullResponse.json();
+            console.log('Pull response:', pullData);
+            if (pullData.requiresImmediateRenegotiation) {
+                await handleRenegotiation(pullData, localPeerConnection);
+            }
+            const receivedTracks = await receivedTracksPromise;
+            if (receivedTracks.length > 0) {
+                const remoteStream = new MediaStream(receivedTracks);
+                participants.set(participant.session_id, {
+                    ...participants.get(participant.session_id),
+                    stream: remoteStream
+                });
+                addVideoStream(participant.session_id, participant.username, remoteStream);
+                console.log(`Successfully added video stream for ${participant.username}`);
+                return; // Success - exit retry loop
+            }
+        } catch (err) {
+            console.error(`Attempt ${attempt + 1} failed for ${participant.username}:`, err);
+            const delay = Math.min(baseDelay * Math.pow(2, attempt) * (1 + Math.random() * 0.1), 10000);
+            if (attempt === maxRetries - 1) {
+                throw err;
+            }
+            if (err.message.includes("500") ||
+                err.message.includes("Session is not ready") ||
+                err.message.includes("Track reception timeout") ||
+                err.message.includes("Invalid state")) {
+                console.log(`Retrying in ${delay}ms (attempt ${attempt + 1}/${maxRetries})`);
+                await new Promise(resolve => setTimeout(resolve, delay));
+                continue;
+            }
+            throw err;
+        }
+    }
+}
+async function setupWebSocket() {
+    try {
+        if (ws) {
+            // Properly close existing connection if any
+            if (ws.readyState === WebSocket.OPEN || ws.readyState === WebSocket.CONNECTING) {
+                ws.close(1000, 'Intentional close for reconnection');
+            }
+        }
+        const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+        const wsBaseUrl = isLocalhost
+            ? 'localhost:7860'
+            : 'manhteky123-dapp-meeting.hf.space';
+        const wsUrl = `${wsProtocol}//${wsBaseUrl}/ws/meetings/${roomId}?username=${encodeURIComponent(username)}`;
+        console.log('Connecting to WebSocket:', wsUrl);
+        ws = new WebSocket(wsUrl);
+        // Add connection timeout
+        const connectionTimeout = setTimeout(() => {
+            if (ws.readyState !== WebSocket.OPEN) {
+                ws.close();
+                throw new Error('WebSocket connection timeout');
+            }
+        }, 15000);
+        await new Promise((resolve, reject) => {
+            ws.onopen = () => {
+                clearTimeout(connectionTimeout);
+                console.log('WebSocket connected successfully');
+                resolve();
+            };
+            ws.onerror = (error) => {
+                clearTimeout(connectionTimeout);
+                console.error('WebSocket error:', error);
+                reject(error);
+            };
+            ws.onclose = (event) => {
+                clearTimeout(connectionTimeout);
+                console.log('WebSocket closed:', {
+                    code: event.code,
+                    reason: event.reason,
+                    wasClean: event.wasClean,
+                    timestamp: new Date().toISOString()
+                });
+                // Only attempt to reconnect on abnormal closure
+                if (event.code === 1006) {
+                    console.log('Abnormal closure detected, attempting to reconnect...');
+                    setTimeout(() => {
+                        if (!ws || ws.readyState === WebSocket.CLOSED) {
+                            setupWebSocket().catch(err => {
+                                console.error('Reconnection failed:', err);
+                            });
+                        }
+                    }, 3000);
+                }
+            };
+            // Setup message handler
+            ws.onmessage = (event) => {
+                try {
+                    const data = typeof event.data === 'string' ? JSON.parse(event.data) : event.data;
+                    if (data === 'ping') {
+                        ws.send('pong');
+                        return;
+                    }
+                    handleWebSocketMessage(data);
+                } catch (e) {
+                    console.warn('Error handling WebSocket message:', e);
+                    console.warn('Received invalid message:', event.data);
+                }
+            };
+        });
+        // Setup periodic ping to keep connection alive
+        const pingInterval = setInterval(() => {
+            if (ws.readyState === WebSocket.OPEN) {
+                safeSendWebSocketMessage({ type: 'ping' }).catch(err => {
+                    console.error('Failed to send ping:', err);
+                });
+            } else {
+                clearInterval(pingInterval);
+            }
+        }, 30000);
+    } catch (error) {
+        console.error('Error setting up WebSocket:', error);
+        throw error;
+    }
+}
+// Update handleWebSocketMessage function
+function handleWebSocketMessage(message) {
+    console.log('WebSocket message received:', message);
+    if (['participant_joined', 'participant_left', 'tracks_ready', 'wave'].includes(message.type)) {
+        showNotification(message.type, message.payload);
+    }
+    switch (message.type) {
+        case 'room_state':
+            console.log('Room state update received:', message.payload);
+            updateParticipants(message.payload);
+            break;
+        case 'participant_left':
+            console.log('Participant left:', message.payload);
+            handleParticipantLeft(message.payload);
+            break;
+        case 'participant_joined':
+            console.log('New participant joined:', message.payload);
+            handleNewParticipant(message.payload);
+            break;
+        case 'tracks_ready':
+            handleTracksReady(message.payload);
+            break;
+        case 'room_updated':
+            console.log('Room updated:', message.payload);
+            updateParticipants(message.payload);
+            break;
+        case 'wave':
+            handleWaveNotification(message.payload);
+            break;
+        case 'speaking_state':
+            handleSpeakingState(message.payload);
+            break;
+        case 'chat_message':
+            handleChatMessage(message.payload);
+            break;
+    }
+}
+// Add chat message handler
+function handleChatMessage(data) {
+    const messages = document.getElementById('chatMessages');
+    const messageDiv = document.createElement('div');
+    messageDiv.className = `chat-message ${data.username === username ? 'own-message' : ''}`;
+    messageDiv.innerHTML = `
+        <div class="message-header">
+            <span class="message-username">${escapeHtml(data.username)}</span>
+            <span class="message-time">${new Date(data.timestamp).toLocaleTimeString()}</span>
+        </div>
+        <div class="message-content">${escapeHtml(data.content)}</div>
+    `;
+    messages.appendChild(messageDiv);
+    messages.scrollTop = messages.scrollHeight;
+    // Show notification if chat is minimized
+    if (!document.getElementById('chatContainer').classList.contains('show')) {
+        showNotification('chat', data);
+    }
+}
+// Add chat controls
+document.addEventListener('DOMContentLoaded', () => {
+    const chatContainer = document.getElementById('chatContainer');
+    const chatBtn = document.getElementById('chatBtn');
+    const chatInput = document.getElementById('chatInput');
+    const sendMessageBtn = document.getElementById('sendMessageBtn');
+    // Toggle chat visibility
+    chatBtn.onclick = () => {
+        chatContainer.classList.toggle('show');
+        chatBtn.classList.toggle('active');
+        if (chatContainer.classList.contains('show')) {
+            chatInput.focus();
+        }
+    };
+    // Send message handler
+    function sendChatMessage() {
+        const content = chatInput.value.trim();
+        if (!content) return;
+        const message = {
+            type: 'chat_message',
+            payload: {
+                username: username,
+                content: content,
+                timestamp: new Date().toISOString()
+            }
+        };
+        safeSendWebSocketMessage(message);
+        chatInput.value = '';
+    }
+    // Send on button click
+    sendMessageBtn.onclick = sendChatMessage;
+    // Send on Enter key
+    chatInput.onkeypress = (e) => {
+        if (e.key === 'Enter') {
+            sendChatMessage();
+        }
+    };
+});
+// Update wave notification handler
+function handleWaveNotification(data) {
+    console.log('Wave notification received:', data);
+    // showNotification('wave', data);
+}
+async function handleNewParticipant(data) {
+    console.log('New participant joined:', data);
+    // Skip if this is ourselves
+    if (data.username === username) {
+        console.log('Skipping self participant');
+        return;
+    }
+    try {
+        // Wait a bit to ensure the session is ready
+        await new Promise(resolve => setTimeout(resolve, 2000));
+        // Get session state from Cloudflare
+        const sessionState = await fetch(
+            `https://rtc.live.cloudflare.com/v1/apps/${APP_ID}/sessions/${data.session_id}`, {
+            headers: {
+                "Authorization": `Bearer ${APP_TOKEN}`
+            }
+        }).then(res => res.json());
+        console.log('New participant session state:', sessionState);
+        if (sessionState.errorCode) {
+            if (sessionState.errorDescription === 'Session is not ready yet') {
+                // Retry after a delay
+                console.log('Session not ready, retrying...');
+                setTimeout(() => handleNewParticipant(data), 3000);
+                return;
+            }
+            throw new Error(`Cloudflare error: ${sessionState.errorDescription}`);
+        }
+        // Lưu thông tin participant
+        if (!participants.has(data.session_id)) {
+            participants.set(data.session_id, {
+                username: data.username,
+                stream: null,
+                sessionId: data.session_id
+            });
+            // Pull tracks nếu có
+            if (sessionState.tracks && sessionState.tracks.length > 0) {
+                const activeTracks = sessionState.tracks.filter(track => track.status === 'active');
+                console.log('Active tracks found for new participant:', activeTracks);
+                if (activeTracks.length > 0) {
+                    await pullParticipantTracks(activeTracks, {
+                        session_id: data.session_id,
+                        username: data.username
+                    });
+                }
+            }
+            // Update UI
+            updateParticipantsList();
+        }
+    } catch (err) {
+        console.error("Error handling new participant:", err);
+        if (err.message.includes("Session is not ready")) {
+            setTimeout(() => handleNewParticipant(data), 3000);
+        }
+    }
+}
+async function handleTracksReady(data) {
+    console.log('Tracks ready for participant:', data);
+    if (data.username === username) return; // Skip if it's our own tracks
+    try {
+        const isScreenShare = data.username.endsWith('_screen');
+        const sessionState = await fetch(
+            `https://rtc.live.cloudflare.com/v1/apps/${APP_ID}/sessions/${data.session_id}`, {
+            headers: {
+                "Authorization": `Bearer ${APP_TOKEN}`
+            }
+        }).then(res => res.json());
+        if (sessionState.tracks && sessionState.tracks.length > 0) {
+            const activeTracks = sessionState.tracks.filter(track => track.status === 'active');
+            if (activeTracks.length > 0) {
+                // Force update stream if it's screen share
+                if (isScreenShare) {
+                    const participant = participants.get(data.session_id);
+                    if (participant) {
+                        // Reset stream to force new pull
+                        participant.stream = null;
+                    }
+                }
+                await pullParticipantTracks(activeTracks, {
+                    session_id: data.session_id,
+                    username: data.username,
+                    isScreenShare: isScreenShare
+                });
+            }
+        }
+    } catch (err) {
+        console.error('Error handling tracks ready:', err);
+    }
+}
+async function setupCloudflareRTC(sessionId) {
+    const maxRetries = 5;
+    const baseDelay = 1000; // Start with 1 second delay
+    for (let attempt = 0; attempt < maxRetries; attempt++) {
+        try {
+            if (!localPeerConnection || localPeerConnection.connectionState === 'failed') {
+                const iceServers = [
+                    { urls: 'stun:stun.cloudflare.com:3478' },
+                    {
+                        urls: 'turn:turn.cloudflare.com:3478?transport=udp', // TURN URL
+                        username: 'turn-relay',               // TURN Username (Name bạn đặt)
+                        credential: '761d341add57239b706f846d6f000625cf077d6d4650c0240733852256e7d2a4',
+                    },
+                    {
+                        urls: 'turn:turn.cloudflare.com:3478?transport=tcp', // TURN URL (TCP)
+                        username: 'turn-relay',               // TURN Username (Name bạn đặt)
+                        credential: '761d341add57239b706f846d6f000625cf077d6d4650c0240733852256e7d2a4',
+                    },
+                    {
+                        urls: 'turns:turn.cloudflare.com:5349?transport=tcp', // TURN URL (TLS - turns)
+                        username: 'turn-relay',               // TURN Username (Name bạn đặt)
+                        credential: '761d341add57239b706f846d6f000625cf077d6d4650c0240733852256e7d2a4',
+                    }
+                ];
+                // localPeerConnection = new RTCPeerConnection({
+                //     iceServers: iceServers, // Sử dụng iceServers đã cấu hình trực tiếp
+                //     bundlePolicy: 'max-bundle'
+                // });
+                localPeerConnection = new RTCPeerConnection({
+                    iceServers: [{ urls: 'stun:stun.cloudflare.com:3478' }], // **CHỈ STUN SERVER**
+                    bundlePolicy: 'max-bundle'
+                });
+                localPeerConnection.sessionId = sessionId;
+                localPeerConnection.onicecandidate = (event) => {
+                    if (event.candidate) {
+                        console.log("New ICE candidate:", event.candidate);
+                    }
+                };
+                localPeerConnection.onconnectionstatechange = (event) => {
+                    console.log("Connection state changed:", localPeerConnection.connectionState);
+                };
+                localPeerConnection.ontrack = handleRemoteTrack;
+            }
+            // Create transceivers for local stream
+            console.log(`Creating transceivers for local stream (attempt ${attempt + 1})`);
+            const streamToUse = isMaskEnabled ? processedStream : localStream;
+            const transceivers = streamToUse.getTracks().map(track =>
+                localPeerConnection.addTransceiver(track, {
+                    direction: 'sendonly',
+                    streams: [streamToUse]
+                })
+            );
+            const offer = await localPeerConnection.createOffer();
+            await localPeerConnection.setLocalDescription(offer);
+            // Send local tracks to server with retry logic
+            console.log(`Sending local tracks to server (attempt ${attempt + 1})`);
+            const requestPayload = {
+                method: 'POST',
+                headers: {
+                    'Authorization': `Bearer ${APP_TOKEN}`,
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    sessionDescription: {
+                        sdp: offer.sdp,
+                        type: offer.type
+                    },
+                    tracks: transceivers.map(({ mid, sender }) => ({
+                        location: 'local',
+                        mid: mid,
+                        trackName: sender.track?.id || 'anonymous'
+                    }))
+                })
+            };
+            console.log("Request payload to /tracks/new:", JSON.stringify(requestPayload, null, 2)); // Log request payload
+            const response = await fetch(`https://rtc.live.cloudflare.com/v1/apps/${APP_ID}/sessions/${sessionId}/tracks/new`, {
+                method: 'POST',
+                headers: {
+                    'Authorization': `Bearer ${APP_TOKEN}`,
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    sessionDescription: {
+                        sdp: offer.sdp,
+                        type: offer.type
+                    },
+                    tracks: transceivers.map(({ mid, sender }) => ({
+                        location: 'local',
+                        mid: mid,
+                        trackName: sender.track?.id || 'anonymous'
+                    }))
+                })
+            });
+            console.log("Response from /tracks/new:", response); // Log response object
+            if (!response.ok) {
+                if (response.status === 500) {
+                    const delay = Math.min(baseDelay * Math.pow(2, attempt), 10000);
+                    console.log(`Server returned 500, retrying in ${delay}ms (attempt ${attempt + 1}/${maxRetries})`);
+                    await new Promise(resolve => setTimeout(resolve, delay));
+                    // Reset PeerConnection for next attempt
+                    if (localPeerConnection) {
+                        localPeerConnection.close();
+                        localPeerConnection = null;
+                    }
+                    continue; // Try again
+                }
+                throw new Error(`Cloudflare API error: ${response.status}`);
+            }
+            const data = await response.json();
+            if (!data.sessionDescription || !data.sessionDescription.type || !data.sessionDescription.sdp) {
+                throw new Error('Invalid response format from Cloudflare API');
+            }
+            await localPeerConnection.setRemoteDescription(
+                new RTCSessionDescription(data.sessionDescription)
+            );
+            // Wait for connection to be established
+            await waitForConnectionState(localPeerConnection, 'connected', 15000);
+            // Only proceed after connection is confirmed
+            console.log('WebRTC connection established successfully');
+            // Notify that our tracks are ready
+            const notifyResponse = await fetch(`${API_BASE}/meetings/${roomId}/notify-tracks-ready`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    session_id: sessionId,
+                    username: username
+                })
+            });
+            if (!notifyResponse.ok) {
+                console.error('Failed to notify tracks ready');
+            }
+            // If we get here, everything succeeded
+            return;
+        } catch (error) {
+            console.error(`Error in setupCloudflareRTC attempt ${attempt + 1}:`, error);
+            // Clean up the failed connection
+            if (localPeerConnection) {
+                localPeerConnection.close();
+                localPeerConnection = null;
+            }
+            // If this was our last attempt, throw the error
+            if (attempt === maxRetries - 1) {
+                throw error;
+            }
+            // Wait before retrying
+            const delay = Math.min(baseDelay * Math.pow(2, attempt), 10000);
+            console.log(`Retrying setupCloudflareRTC in ${delay}ms...`);
+            await new Promise(resolve => setTimeout(resolve, delay));
+        }
+    }
+}
+// Add new utility function to wait for connection state
+async function waitForConnectionState(peerConnection, desiredState, timeout = 15000) {
+    return new Promise((resolve, reject) => {
+        if (peerConnection.connectionState === desiredState) {
+            resolve();
+            return;
+        }
+        const timer = setTimeout(() => {
+            peerConnection.removeEventListener('connectionstatechange', checkState);
+            reject(new Error(`Connection state timeout: waited ${timeout}ms for '${desiredState}' state`));
+        }, timeout);
+        function checkState() {
+            if (peerConnection.connectionState === desiredState) {
+                clearTimeout(timer);
+                peerConnection.removeEventListener('connectionstatechange', checkState);
+                resolve();
+            } else if (peerConnection.connectionState === 'failed') {
+                clearTimeout(timer);
+                peerConnection.removeEventListener('connectionstatechange', checkState);
+                reject(new Error('Connection failed while waiting for desired state'));
+            }
+        }
+        peerConnection.addEventListener('connectionstatechange', checkState);
+    });
+}
+function handleRemoteTrack(event) {
+    const stream = event.streams[0];
+    if (!stream) {
+        console.warn('No stream in remote track event');
+        return;
+    }
+    // Log the received track and stream details for debugging
+    console.log('Received remote track:', {
+        trackKind: event.track.kind,
+        trackId: event.track.id,
+        streamId: stream.id
+    });
+    // Find the participant this stream belongs to by checking track IDs
+    let matchingParticipant = null;
+    for (const [sessionId, participant] of participants) {
+        if (participant.pendingTracks && participant.pendingTracks.has(event.track.id)) {
+            console.log('Found matching participant for track:', sessionId);
+            matchingParticipant = participant;
+            break;
+        }
+    }
+    if (matchingParticipant) {
+        // If we already have a stream for this participant, add the track to it
+        if (matchingParticipant.stream) {
+            if (!matchingParticipant.stream.getTracks().find(t => t.id === event.track.id)) {
+                matchingParticipant.stream.addTrack(event.track);
+            }
+        } else {
+            // Create new stream if this is the first track
+            matchingParticipant.stream = new MediaStream([event.track]);
+        }
+        // Update the video element with the correct stream
+        const videoElement = document.getElementById(`video-${matchingParticipant.sessionId}`);
+        if (videoElement) {
+            const videoTag = videoElement.querySelector('video');
+            if (videoTag && videoTag.srcObject !== matchingParticipant.stream) {
+                console.log('Updating video source for participant:', matchingParticipant.username);
+                videoTag.srcObject = matchingParticipant.stream;
+            }
+        }
+        // Setup audio detection if this is an audio track
+        if (event.track.kind === 'audio') {
+            setupRemoteAudioDetection(matchingParticipant.stream, matchingParticipant.sessionId);
+        }
+    } else {
+        console.log('No matching participant found for track, waiting for participant info');
+    }
+}
+function addVideoStream(id, username, stream) {
+    // Remove existing video element if it exists
+    const existingVideo = document.getElementById(`video-${id}`);
+    if (existingVideo) {
+        existingVideo.remove();
+    }
+    console.log('Adding video stream:', { id, username, streamId: stream.id });
+    // Create and setup video element
+    const videoWrapper = document.createElement('div');
+    videoWrapper.className = 'video-wrapper';
+    videoWrapper.id = `video-${id}`;
+    const video = document.createElement('video');
+    video.autoplay = true;
+    video.playsInline = true;
+    // Special handling for screen share video
+    if (username.endsWith('_screen')) {
+        video.style.objectFit = 'contain'; // Better for screen sharing
+        videoWrapper.classList.add('screen-share');
+    }
+    // Add error handling
+    video.onerror = (e) => {
+        console.error('Video error:', e);
+    };
+    video.onloadedmetadata = () => {
+        console.log(`Video metadata loaded for ${username}`);
+        video.play().catch(e => console.error('Error playing video:', e));
+    };
+    try {
+        video.srcObject = stream;
+    } catch (e) {
+        console.error('Error setting srcObject:', e);
+        return;
+    }
+    if (id === 'local') {
+        video.muted = true;
+    }
+    const nameTag = document.createElement('div');
+    nameTag.className = 'participant-name';
+    nameTag.textContent = username;
+    videoWrapper.appendChild(video);
+    videoWrapper.appendChild(nameTag);
+    // Add to video grid
+    const videoGrid = document.getElementById('videoGrid');
+    if (videoGrid) {
+        videoGrid.appendChild(videoWrapper);
+        console.log('Video element added to grid for:', username);
+    }
+    // Add or update participant in the participants map if not local user
+    if (id !== 'local') {
+        participants.set(id, {
+            username: username,
+            stream: stream,
+            sessionId: id
+        });
+    }
+    // Update both layouts
+    updateGridLayout();
+    updateParticipantsList();
+    console.log('Updated participants after adding video:', Array.from(participants.entries()));
+}
+// Update the updateParticipantsList function to be more reliable
+function updateParticipantsList() {
+    const participantsList = document.getElementById('participantsList');
+    if (!participantsList) {
+        console.error('Participants list element not found');
+        return;
+    }
+    // Clear current list
+    participantsList.innerHTML = '';
+    // Add local user first
+    const localLi = document.createElement('li');
+    localLi.textContent = `${username} (You)`;
+    participantsList.appendChild(localLi);
+    // Sort participants by username for consistent ordering
+    const sortedParticipants = Array.from(participants.entries())
+        .sort((a, b) => a[1].username.localeCompare(b[1].username));
+    // Add remote participants
+    for (const [sessionId, participant] of sortedParticipants) {
+        if (participant.username !== username) {
+            const li = document.createElement('li');
+            li.textContent = participant.username;
+            li.setAttribute('data-session-id', sessionId);
+            participantsList.appendChild(li);
+        }
+    }
+    console.log('Participants list updated with', participants.size + 1, 'participants');
+}
+async function updateParticipants(meetingInfo) {
+    if (!meetingInfo || !meetingInfo.sessions) {
+        console.warn('Invalid meeting info:', meetingInfo);
+        return;
+    }
+    console.log('Current participants:', Array.from(participants.entries()));
+    console.log('Updating with new sessions:', meetingInfo.sessions);
+    // Create a set of current session IDs for removal tracking
+    const currentSessionIds = new Set(participants.keys());
+    // Process each session from the meeting info
+    for (const session of meetingInfo.sessions) {
+        // Skip local user
+        if (session.username === username) {
+            currentSessionIds.delete(session.session_id);
+            continue;
+        }
+        // Update or add participant
+        if (!participants.has(session.session_id)) {
+            // New participant
+            console.log('Adding new participant:', session.username);
+            participants.set(session.session_id, {
+                username: session.username,
+                stream: null,
+                sessionId: session.session_id
+            });
+        } else {
+            // Existing participant - update info
+            console.log('Updating existing participant:', session.username);
+            const existingParticipant = participants.get(session.session_id);
+            existingParticipant.username = session.username;
+        }
+        // Remove from tracking set since we've processed it
+        currentSessionIds.delete(session.session_id);
+    }
+    // Remove participants that are no longer in the meeting
+    for (const sessionId of currentSessionIds) {
+        console.log('Removing participant with session ID:', sessionId);
+        removeParticipant(sessionId);
+    }
+    // Update the UI
+    updateParticipantsList();
+    updateGridLayout();
+    console.log('Updated participants map:', Array.from(participants.entries()));
+}
+function updateParticipantsList() {
+    const participantsList = document.getElementById('participantsList');
+    if (!participantsList) {
+        console.error('Participants list element not found');
+        return;
+    }
+    console.log('Updating participants list UI');
+    participantsList.innerHTML = '';
+    // Add local user
+    const localLi = document.createElement('li');
+    localLi.textContent = `${username} (You)`;
+    participantsList.appendChild(localLi);
+    // Add all remote participants
+    for (const [_, participant] of participants) {
+        if (participant.username !== username) {
+            const li = document.createElement('li');
+            li.textContent = participant.username;
+            participantsList.appendChild(li);
+        }
+    }
+    console.log('Participants list updated with', participants.size + 1, 'participants');
+}
+async function pullParticipantTracks(tracks, participant) {
+    const maxRetries = 5;
+    const baseDelay = 1000; // Start with 1 second delay
+    for (let attempt = 0; attempt < maxRetries; attempt++) {
+        try {
+            // Only check existing stream for non-screen share participants
+            if (!participant.isScreenShare && participants.get(participant.session_id)?.stream) {
+                console.log('Participant already has stream:', participant.username);
+                return;
+            }
+            console.log(`Pulling tracks attempt ${attempt + 1}/${maxRetries} for participant:`, participant.username, tracks);
+            // Rest of the existing pullParticipantTracks code...
+            const localSessionId = localPeerConnection.sessionId;
+            if (localPeerConnection.connectionState === 'failed') {
+                console.log('Connection failed, attempting to restart...');
+                const offer = await localPeerConnection.createOffer({ iceRestart: true });
+                await localPeerConnection.setLocalDescription(offer);
+            }
+            // Set up track reception promise
+            const receivedTracksPromise = new Promise((resolve, reject) => {
+                // ...existing promise setup code...
+                const receivedTracks = new Map();
+                const timeout = setTimeout(() => {
+                    if (receivedTracks.size === 0) {
+                        reject(new Error("Track reception timeout"));
+                    } else {
+                        resolve(Array.from(receivedTracks.values()));
+                    }
+                }, 15000);
+                const trackHandler = (event) => {
+                    const track = event.track;
+                    console.log("Received track:", track.kind, track.id);
+                    // Check if this track belongs to the participant we're pulling for
+                    if (event.streams[0]) {
+                        receivedTracks.set(track.id, track);
+                        if (receivedTracks.size >= tracks.length) {
+                            clearTimeout(timeout);
+                            resolve(Array.from(receivedTracks.values()));
+                        }
+                    }
+                    // Add track removal handler
+                    if (event.streams && event.streams[0]) {
+                        event.streams[0].onremovetrack = () => {
+                            console.log('Track removed:', track.id);
+                            const participant = Array.from(participants.entries())
+                                .find(([_, p]) => p.stream?.id === event.streams[0].id);
+                            if (participant) {
+                                console.log('Removing track from participant:', participant[1].username);
+                            }
+                        };
+                    }
+                };
+                localPeerConnection.addEventListener('track', trackHandler);
+                setTimeout(() => {
+                    localPeerConnection.removeEventListener('track', trackHandler);
+                }, 15000);
+            });
+            // Pull remote tracks
+            console.log('Sending pull tracks request for:', participant.username);
+            const pullResponse = await fetch(
+                `https://rtc.live.cloudflare.com/v1/apps/${APP_ID}/sessions/${localSessionId}/tracks/new`,
+                {
+                    method: "POST",
+                    headers: {
+                        "Authorization": `Bearer ${APP_TOKEN}`,
+                        "Content-Type": "application/json"
+                    },
+                    body: JSON.stringify({
+                        tracks: tracks.map(track => ({
+                            location: "remote",
+                            sessionId: participant.session_id,
+                            trackName: track.trackName
+                        }))
+                    })
+                }
+            );
+            if (!pullResponse.ok) {
+                throw new Error(`Failed to pull tracks: ${pullResponse.status}`);
+            }
+            // If successful, process the response and return
+            const pullData = await pullResponse.json();
+            console.log('Pull response for', participant.username, ':', pullData);
+            if (pullData.requiresImmediateRenegotiation) {
+                console.log('Renegotiation required for:', participant.username);
+                await handleRenegotiation(pullData, localPeerConnection);
+            }
+            const receivedTracks = await receivedTracksPromise;
+            if (receivedTracks.length > 0) {
+                // Process received tracks...
+                const existingVideo = document.getElementById(`video-${participant.session_id}`);
+                if (existingVideo) {
+                    existingVideo.remove();
+                }
+                const remoteStream = new MediaStream();
+                receivedTracks.forEach(track => {
+                    console.log('Adding track to stream:', track.kind, track.id);
+                    remoteStream.addTrack(track);
+                });
+                // Update participant with new stream
+                const existingParticipant = participants.get(participant.session_id);
+                if (existingParticipant) {
+                    // Stop old stream tracks if they exist
+                    if (existingParticipant.stream) {
+                        existingParticipant.stream.getTracks().forEach(track => track.stop());
+                    }
+                    existingParticipant.stream = remoteStream;
+                } else {
+                    participants.set(participant.session_id, {
+                        username: participant.username,
+                        stream: remoteStream,
+                        sessionId: participant.session_id,
+                        isScreenShare: participant.isScreenShare
+                    });
+                }
+                // Always add/update video element for screen shares
+                addVideoStream(participant.session_id, participant.username, remoteStream);
+            }
+            // If we get here, we succeeded, so break the retry loop
+            return;
+        } catch (err) {
+            console.error(`Attempt ${attempt + 1} failed for ${participant.username}:`, err);
+            // Calculate exponential backoff delay with jitter
+            const delay = Math.min(baseDelay * Math.pow(2, attempt) * (1 + Math.random() * 0.1), 10000);
+            // If this was our last attempt, throw the error
+            if (attempt === maxRetries - 1) {
+                throw err;
+            }
+            // If we get specific errors that we want to retry
+            if (err.message.includes("500") ||
+                err.message.includes("Session is not ready") ||
+                err.message.includes("Track reception timeout") ||
+                err.message.includes("Invalid state")) {
+                console.log(`Retrying in ${delay}ms (attempt ${attempt + 1}/${maxRetries})`);
+                await new Promise(resolve => setTimeout(resolve, delay));
+                continue;
+            }
+            // For other types of errors, throw immediately
+            throw err;
+        }
+    }
+}
+async function handleRenegotiation(pullData, peerConnection) {
+    try {
+        console.log('Starting renegotiation with data:', pullData);
+        // Check if connection is closed or failing
+        if (peerConnection.connectionState === 'closed' || peerConnection.connectionState === 'failed') {
+            console.log('Connection is closed/failed, creating new connection...');
+            await setupCloudflareRTC(peerConnection.sessionId);
+            return;
+        }
+        // Wait for stable state with timeout
+        await waitForSignalingState(peerConnection, 'stable', 5000);
+        try {
+            await peerConnection.setRemoteDescription(
+                new RTCSessionDescription(pullData.sessionDescription)
+            );
+            const answer = await peerConnection.createAnswer();
+            await peerConnection.setLocalDescription(answer);
+            const renegotiateResponse = await fetch(
+                `https://rtc.live.cloudflare.com/v1/apps/${APP_ID}/sessions/${peerConnection.sessionId}/renegotiate`,
+                {
+                    method: "PUT",
+                    headers: {
+                        "Authorization": `Bearer ${APP_TOKEN}`,
+                        "Content-Type": "application/json"
+                    },
+                    body: JSON.stringify({
+                        sessionDescription: {
+                            sdp: answer.sdp,
+                            type: "answer"
+                        }
+                    })
+                }
+            );
+            if (!renegotiateResponse.ok) {
+                throw new Error(`Renegotiation failed: ${renegotiateResponse.status}`);
+            }
+        } catch (error) {
+            console.error('Error during renegotiation:', error);
+            if (error.name === 'InvalidStateError') {
+                // If we get invalid state, try recreating the connection
+                await setupCloudflareRTC(peerConnection.sessionId);
+            }
+            throw error;
+        }
+    } catch (error) {
+        console.error('Renegotiation error:', error);
+        throw error;
+    }
+}
+// Add new utility function to wait for signaling state
+function waitForSignalingState(peerConnection, desiredState, timeout) {
+    return new Promise((resolve, reject) => {
+        if (peerConnection.signalingState === desiredState) {
+            resolve();
+            return;
+        }
+        const timer = setTimeout(() => {
+            peerConnection.removeEventListener('signalingstatechange', checkState);
+            reject(new Error('Signaling state timeout'));
+        }, timeout);
+        function checkState() {
+            if (peerConnection.signalingState === desiredState) {
+                clearTimeout(timer);
+                peerConnection.removeEventListener('signalingstatechange', checkState);
+                resolve();
+            }
+        }
+        peerConnection.addEventListener('signalingstatechange', checkState);
+    });
+}
+function handleParticipantLeft(data) {
+    console.log('Handling participant left:', data);
+    if (data.session_id) {
+        // Direct removal using session_id
+        removeParticipant(data.session_id);
+    } else if (data.username) {
+        // Find session_id by username if session_id not provided
+        const participantEntry = Array.from(participants.entries())
+            .find(([_, p]) => p.username === data.username);
+        if (participantEntry) {
+            const [sessionId, participant] = participantEntry;
+            console.log('Found session ID for leaving user:', sessionId);
+            removeParticipant(sessionId);
+            // Also check and remove any associated screen share
+            const screenShareEntry = Array.from(participants.entries())
+                .find(([_, p]) => p.username === `${data.username}_screen`);
+            if (screenShareEntry) {
+                removeParticipant(screenShareEntry[0]);
+            }
+        } else {
+            console.warn('Could not find participant with username:', data.username);
+        }
+    } else {
+        console.error('Invalid participant_left payload:', data);
+    }
+}
+function removeParticipant(sessionId) {
+    const participant = participants.get(sessionId);
+    if (!participant) {
+        console.log('Participant not found for removal:', sessionId);
+        return;
+    }
+    console.log('Removing participant:', sessionId, participant.username);
+    // Get video element
+    const videoElement = document.getElementById(`video-${sessionId}`);
+    if (videoElement) {
+        // Add animation class
+        videoElement.classList.add('removing');
+        // Wait for animation to complete before removing
+        setTimeout(() => {
+            const video = videoElement.querySelector('video');
+            if (video) {
+                video.srcObject = null;
+            }
+            videoElement.remove();
+            // Update layout after removal
+            updateGridLayout();
+        }, 300);
+    }
+    // Stop all tracks in participant's stream
+    if (participant.stream) {
+        participant.stream.getTracks().forEach(track => {
+            track.stop();
+            track.enabled = false;
+        });
+        participant.stream = null; // Clear stream reference
+    }
+    // Clean up peer connection if it exists
+    if (participant.peerConnection) {
+        participant.peerConnection.close();
+        participant.peerConnection = null;
+    }
+    // Remove from participants map
+    participants.delete(sessionId);
+    // Update UI
+    updateParticipantsList();
+    updateGridLayout();
+    console.log('Participant removed successfully:', sessionId);
+    console.log('Remaining participants:', Array.from(participants.keys()));
+}
+// Control handlers
+document.getElementById('toggleMicBtn').onclick = () => {
+    const audioTrack = localStream.getAudioTracks()[0];
+    audioTrack.enabled = !audioTrack.enabled;
+    updateControls();
+};
+document.getElementById('toggleVideoBtn').onclick = () => {
+    const videoTrack = localStream.getVideoTracks()[0];
+    videoTrack.enabled = !videoTrack.enabled;
+    updateControls();
+};
+// Add new constant for screen share identifier
+const SCREEN_SHARE_PREFIX = '_screen';
+document.getElementById('shareScreenBtn').onclick = async () => {
+    try {
+        const existingScreenShare = [...participants.values()].some(obj => obj.username?.endsWith("_screen"));
+        if (existingScreenShare) {
+            const screenShareParticipant = Array.from(participants.entries())
+                .find(([_, obj]) => obj.username === `${username}_screen`);
+            if (screenShareParticipant) {
+                const [sessionId, participant] = screenShareParticipant;
+                // Dừng streams và đóng kết nối trước
+                if (participant.stream) {
+                    participant.stream.getTracks().forEach(track => {
+                        track.stop();
+                        participant.stream.removeTrack(track);
+                    });
+                }
+                if (participant.peerConnection) {
+                    participant.peerConnection.getSenders().forEach(sender => {
+                        if (sender.track) {
+                            sender.track.stop();
+                            participant.peerConnection.removeTrack(sender);
+                        }
+                    });
+                    participant.peerConnection.close();
+                }
+                // Gửi WebSocket message trước khi xóa
+                if (ws && ws.readyState === WebSocket.OPEN) {
+                    ws.send(JSON.stringify({
+                        type: 'participant_left',
+                        payload: {
+                            session_id: sessionId,
+                            username: `${username}_screen`
+                        }
+                    }));
+                    // Đợi một chút để đảm bảo message được gửi
+                    await new Promise(resolve => setTimeout(resolve, 100));
+                }
+                // Sau đó mới xóa khỏi local state
+                removeParticipant(sessionId);
+                // Reset button state
+                const shareBtn = document.getElementById('shareScreenBtn');
+                shareBtn.querySelector('.material-icons').textContent = 'screen_share';
+                shareBtn.classList.remove('active');
+                return;
+            }
+            alert("Another participant is already sharing their screen");
+            return;
+        }
+        // Start new screen share
+        const screenStream = await navigator.mediaDevices.getDisplayMedia({
+            video: true,
+            audio: false
+        });
+        // Create screen share username
+        const screenShareUsername = `${username}_screen`;
+        // Join meeting as new participant for screen share
+        const joinResponse = await fetch(
+            `${API_BASE}/meetings/${roomId}?username=${encodeURIComponent(screenShareUsername)}`,
+            {
+                method: 'GET',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Accept': 'application/json',
+                    'Origin': window.location.origin
+                },
+                credentials: 'include'
+            }
+        );
+        if (!joinResponse.ok) {
+            throw new Error('Failed to create screen share session');
+        }
+        // Get session ID for screen share
+        const screenSession = await joinResponse.json();
+        const screenSessionId = screenSession.session_id;
+        // Create peer connection and setup WebRTC for screen share
+        await setupScreenShare(screenSessionId, screenStream);
+        // Handle stream ending
+        screenStream.getVideoTracks()[0].onended = async () => {
+            try {
+                await fetch(`${API_BASE}/meetings/${roomId}/leave`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        session_id: screenSessionId
+                    })
+                });
+                // WebSocket will handle cleanup via participant_left event
+            } catch (err) {
+                console.error('Error handling screen share end:', err);
+            }
+        };
+        // Update button state
+        const shareBtn = document.getElementById('shareScreenBtn');
+        shareBtn.querySelector('.material-icons').textContent = 'stop_screen_share';
+        shareBtn.classList.add('active');
+    } catch (error) {
+        console.error('Error sharing screen:', error);
+        alert('Failed to share screen: ' + error.message);
+    }
+};
+async function setupScreenShare(sessionId, screenStream) {
+    // Create new peer connection for screen share
+    const screenPeerConnection = new RTCPeerConnection({
+        iceServers: [{ urls: 'stun:stun.cloudflare.com:3478' }],
+        bundlePolicy: 'max-bundle'
+    });
+    screenPeerConnection.sessionId = sessionId;
+    // Add screen track to peer connection
+    const screenTrack = screenStream.getVideoTracks()[0];
+    const transceiver = screenPeerConnection.addTransceiver(screenTrack, {
+        direction: 'sendrecv',
+        streams: [screenStream]
+    });
+    // Create and send offer
+    const offer = await screenPeerConnection.createOffer();
+    await screenPeerConnection.setLocalDescription(offer);
+    // Send tracks to Cloudflare
+    const cloudflareResponse = await fetch(
+        `https://rtc.live.cloudflare.com/v1/apps/${APP_ID}/sessions/${sessionId}/tracks/new`,
+        {
+            method: 'POST',
+            headers: {
+                'Authorization': `Bearer ${APP_TOKEN}`,
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                sessionDescription: {
+                    sdp: offer.sdp,
+                    type: offer.type
+                },
+                tracks: [{
+                    location: 'local',
+                    mid: transceiver.mid,
+                    trackName: screenTrack.id
+                }]
+            })
+        }
+    );
+    if (!cloudflareResponse.ok) {
+        throw new Error('Failed to setup screen share tracks');
+    }
+    const data = await cloudflareResponse.json();
+    await screenPeerConnection.setRemoteDescription(
+        new RTCSessionDescription(data.sessionDescription)
+    );
+    // Add to participants map
+    participants.set(sessionId, {
+        username: `${username}'s Screen`,
+        stream: screenStream,
+        sessionId: sessionId,
+        isScreenShare: true,
+        peerConnection: screenPeerConnection
+    });
+    // Notify that tracks are ready
+    await fetch(`${API_BASE}/meetings/${roomId}/notify-tracks-ready`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+            session_id: sessionId,
+            username: `${username}_screen`
+        })
+    });
+    // Update stream end handler
+    screenStream.getVideoTracks()[0].onended = () => {
+        handleScreenShareEnd(sessionId, screenStream, screenPeerConnection);
+    };
+    // Add track ended listener for each track
+    screenStream.getTracks().forEach(track => {
+        track.addEventListener('ended', () => {
+            handleScreenShareEnd(sessionId, screenStream, screenPeerConnection);
+        });
+    });
+}
+// Add new helper function to handle screen share cleanup
+async function handleScreenShareEnd(sessionId, stream, peerConnection) {
+    try {
+        // Dừng streams và đóng kết nối trước
+        if (stream) {
+            stream.getTracks().forEach(track => {
+                track.stop();
+                stream.removeTrack(track);
+            });
+        }
+        if (peerConnection) {
+            peerConnection.getSenders().forEach(sender => {
+                if (sender.track) {
+                    sender.track.stop();
+                    peerConnection.removeTrack(sender);
+                }
+            });
+            peerConnection.close();
+        }
+        // Gửi WebSocket message trước khi xóa
+        if (ws && ws.readyState === WebSocket.OPEN) {
+            ws.send(JSON.stringify({
+                type: 'participant_left',
+                payload: {
+                    session_id: sessionId,
+                    username: `${username}_screen`
+                }
+            }));
+            // Đợi một chút để đảm bảo message được gửi
+            await new Promise(resolve => setTimeout(resolve, 100));
+        }
+        // Sau đó mới xóa video element và local state
+        const videoElement = document.getElementById(`video-${sessionId}`);
+        if (videoElement) {
+            const video = videoElement.querySelector('video');
+            if (video) {
+                video.srcObject = null;
+                video.load();
+            }
+            videoElement.remove();
+        }
+        removeParticipant(sessionId);
+        // Reset button state
+        const shareBtn = document.getElementById('shareScreenBtn');
+        shareBtn.querySelector('.material-icons').textContent = 'screen_share';
+        shareBtn.classList.remove('active');
+        // Force update layout
+        updateGridLayout();
+    } catch (err) {
+        console.error('Error handling screen share end:', err);
+    }
+}
+document.getElementById('leaveBtn').onclick = async () => {
+    try {
+        if (ws) {
+            ws.close();
+        }
+        if (localPeerConnection) {
+            localPeerConnection.close();
+        }
+        if (localStream) {
+            localStream.getTracks().forEach(track => track.stop());
+        }
+        window.location.href = 'index.html';
+    } catch (error) {
+        console.error('Error leaving meeting:', error);
+    }
+};
+function updateControls() {
+    const micBtn = document.getElementById('toggleMicBtn');
+    const videoBtn = document.getElementById('toggleVideoBtn');
+    const audioTrack = localStream.getAudioTracks()[0];
+    const videoTrack = localStream.getVideoTracks()[0];
+    micBtn.querySelector('.material-icons').textContent = audioTrack.enabled ? 'mic' : 'mic_off';
+    videoBtn.querySelector('.material-icons').textContent = videoTrack.enabled ? 'videocam' : 'videocam_off';
+    micBtn.classList.toggle('active', !audioTrack.enabled);
+    videoBtn.classList.toggle('active', !videoTrack.enabled);
+}
+// Add this function to update grid layout based on participant count
+function updateGridLayout() {
+    const grid = document.getElementById('videoGrid');
+    const participantCount = participants.size + 1; // +1 for local user
+    // Remove all existing layout classes
+    grid.classList.remove(
+        'single-participant',
+        'two-participants',
+        'few-participants',
+        'many-participants'
+    );
+    // Add appropriate layout class based on participant count
+    if (participantCount === 1) {
+        grid.classList.add('single-participant');
+    } else if (participantCount === 2) {
+        grid.classList.add('two-participants');
+    } else if (participantCount <= 4) {
+        grid.classList.add('few-participants');
+    } else {
+        grid.classList.add('many-participants');
+    }
+    // Force grid reflow for smoother transitions
+    grid.style.display = 'none';
+    grid.offsetHeight; // Trigger reflow
+    grid.style.display = 'grid';
+}
+// Add this helper function to verify stream mappings
+function verifyStreamMappings() {
+    console.log('Verifying stream mappings:');
+    for (const [sessionId, participant] of participants) {
+        const videoElement = document.getElementById(`video-${sessionId}`);
+        if (videoElement) {
+            const videoTag = videoElement.querySelector('video');
+            console.log('Participant:', participant.username, {
+                sessionId,
+                hasStream: !!participant.stream,
+                streamId: participant.stream?.id,
+                videoSrcObject: videoTag?.srcObject?.id,
+                matches: videoTag?.srcObject === participant.stream
+            });
+        }
+    }
+}
+// Call this periodically or after significant events
+setInterval(verifyStreamMappings, 10000);
+// Add after localStream initialization in initializeRoom()
+function setupAudioDetection() {
+    try {
+        const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+        const analyzer = audioContext.createAnalyser();
+        const microphone = audioContext.createMediaStreamSource(localStream);
+        const scriptProcessor = audioContext.createScriptProcessor(2048, 1, 1);
+        analyzer.smoothingTimeConstant = 0.3; // Make it more responsive
+        analyzer.fftSize = 1024;
+        microphone.connect(analyzer);
+        analyzer.connect(scriptProcessor);
+        scriptProcessor.connect(audioContext.destination);
+        const speakingThreshold = -30; // Lower threshold to detect more subtle sounds
+        let speakingIndicatorTimeout;
+        let lastSpeakingState = false; // Track speaking state
+        scriptProcessor.onaudioprocess = function () {
+            const array = new Uint8Array(analyzer.frequencyBinCount);
+            analyzer.getByteFrequencyData(array);
+            const arrayAverage = array.reduce((a, value) => a + value, 0) / array.length;
+            const volume = 20 * Math.log10(arrayAverage / 255);
+            const isSpeaking = volume > speakingThreshold;
+            // Only send update when speaking state changes
+            if (isSpeaking !== lastSpeakingState) {
+                lastSpeakingState = isSpeaking;
+                // Send speaking state update via WebSocket
+                if (ws && ws.readyState === WebSocket.OPEN) {
+                    safeSendWebSocketMessage({
+                        type: 'speaking_state',
+                        payload: {
+                            username: username,
+                            isSpeaking: isSpeaking
+                        }
+                    });
+                }
+            }
+            const localVideo = document.getElementById('video-local');
+            if (localVideo) {
+                if (isSpeaking) {
+                    if (!localVideo.classList.contains('speaking')) {
+                        localVideo.classList.add('speaking');
+                    }
+                    clearTimeout(speakingIndicatorTimeout);
+                } else {
+                    speakingIndicatorTimeout = setTimeout(() => {
+                        localVideo.classList.remove('speaking');
+                    }, 300); // Shorter timeout for more responsive UI
+                }
+            }
+        };
+    } catch (error) {
+        console.error('Error setting up audio detection:', error);
+    }
+}
+function setupRemoteAudioDetection(stream, sessionId) {
+    try {
+        const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+        const analyzer = audioContext.createAnalyser();
+        const microphone = audioContext.createMediaStreamSource(stream);
+        const scriptProcessor = audioContext.createScriptProcessor(2048, 1, 1);
+        analyzer.smoothingTimeConstant = 0.3; // Make it more responsive
+        analyzer.fftSize = 1024;
+        microphone.connect(analyzer);
+        analyzer.connect(scriptProcessor);
+        scriptProcessor.connect(audioContext.destination);
+        const speakingThreshold = -30; // Lower threshold to detect more subtle sounds
+        let speakingIndicatorTimeout;
+        scriptProcessor.onaudioprocess = function () {
+            const array = new Uint8Array(analyzer.frequencyBinCount);
+            analyzer.getByteFrequencyData(array);
+            const arrayAverage = array.reduce((a, value) => a + value, 0) / array.length;
+            const volume = 20 * Math.log10(arrayAverage / 255);
+            const videoElement = document.getElementById(`video-${sessionId}`);
+            if (videoElement) {
+                if (volume > speakingThreshold) {
+                    if (!videoElement.classList.contains('speaking')) {
+                        videoElement.classList.add('speaking');
+                    }
+                    clearTimeout(speakingIndicatorTimeout);
+                    speakingIndicatorTimeout = setTimeout(() => {
+                        videoElement.classList.remove('speaking');
+                    }, 300); // Shorter timeout for more responsive UI
+                }
+            }
+        };
+    } catch (error) {
+        console.error('Error setting up remote audio detection:', error);
+    }
+}
+// Add after other control handlers
+document.getElementById('waveBtn').onclick = () => {
+    if (!ws) {
+        console.error('WebSocket connection not initialized, attempting to reconnect...');
+        setupWebSocket().catch(err => {
+            console.error('Failed to reconnect WebSocket:', err);
+        });
+        return;
+    }
+    // Check WebSocket state
+    if (ws.readyState !== WebSocket.OPEN) {
+        console.log('WebSocket is not open, current state:', ws.readyState);
+        return;
+    }
+    try {
+        // Add message type validation
+        const waveMessage = {
+            type: 'wave',
+            payload: {
+                username: username,
+                timestamp: new Date().toISOString()
+            }
+        };
+        // Use a safe send method
+        safeSendWebSocketMessage(waveMessage);
+    } catch (error) {
+        console.error('Error sending wave message:', error);
+    }
+};
+// Add new utility function for safe WebSocket sending
+function safeSendWebSocketMessage(message) {
+    return new Promise((resolve, reject) => {
+        if (!ws || ws.readyState !== WebSocket.OPEN) {
+            reject(new Error('WebSocket is not connected'));
+            return;
+        }
+        try {
+            const messageString = JSON.stringify(message);
+            ws.send(messageString);
+            console.log('Message sent successfully:', messageString);
+            resolve();
+        } catch (error) {
+            console.error('Error sending message:', error);
+            reject(error);
+        }
+    });
+}
+// Update showNotification function
+function showNotification(type, data) {
+    // Check if notifications container exists
+    let notificationsContainer = document.getElementById('notificationsContainer');
+    if (!notificationsContainer) {
+        notificationsContainer = document.createElement('div');
+        notificationsContainer.id = 'notificationsContainer';
+        notificationsContainer.className = 'notifications-container';
+        document.body.appendChild(notificationsContainer);
+    }
+    const notification = document.createElement('div');
+    notification.className = 'notification';
+    // Add different text for own notifications
+    const isOwnAction = data.username === username;
+    let content = '';
+    switch (type) {
+        case 'wave':
+            notification.classList.add('wave');
+            content = `
+                <span class="material-icons">👋</span>
+                <div class="notification-content">
+                    <span class="notification-username">${isOwnAction ? 'You' : escapeHtml(data.username)}</span>
+                    <span>${isOwnAction ? 'waved' : 'is waving'}</span>
+                </div>
+            `;
+            break;
+        case 'participant_joined':
+            notification.classList.add('join');
+            content = `
+                <span class="material-icons">person_add</span>
+                <div class="notification-content">
+                    <span class="notification-username">${escapeHtml(data.username)}</span>
+                    <span>joined the meeting</span>
+                </div>
+            `;
+            break;
+        case 'participant_left':
+            notification.classList.add('leave');
+            content = `
+                <span class="material-icons">person_remove</span>
+                <div class="notification-content">
+                    <span class="notification-username">${escapeHtml(data.username)}</span>
+                    <span>left the meeting</span>
+                </div>
+            `;
+            break;
+        case 'tracks_ready':
+            notification.classList.add('media');
+            content = `
+                <span class="material-icons">videocam</span>
+                <div class="notification-content">
+                    <span class="notification-username">${escapeHtml(data.username)}</span>
+                    <span>turned on their media</span>
+                </div>
+            `;
+            break;
+        case 'chat':
+            if (data.username === username) return; // Don't show notifications for own messages
+            notification.classList.add('chat');
+            content = `
+                <span class="material-icons">chat</span>
+                <div class="notification-content">
+                    <span class="notification-username">${escapeHtml(data.username)}</span>
+                    <span>sent a message</span>
+                </div>
+            `;
+            break;
+    }
+    notification.innerHTML = content;
+    notificationsContainer.appendChild(notification);
+    console.log('Notification added:', type, data); // Debug log
+    // Remove notification after 5 seconds with animation
+    setTimeout(() => {
+        notification.classList.add('removing');
+        setTimeout(() => {
+            if (notification.parentElement) {
+                notification.remove();
+            }
+        }, 300); // Match animation duration
+    }, 5000);
+}
+// Add new function to handle speaking state updates
+function handleSpeakingState(data) {
+    // Find video element for the speaker
+    let videoElement;
+    if (data.username === username) {
+        videoElement = document.getElementById('video-local');
+    } else {
+        // Find participant session ID by username
+        const participant = Array.from(participants.entries())
+            .find(([_, p]) => p.username === data.username);
+        if (participant) {
+            videoElement = document.getElementById(`video-${participant[0]}`);
+        }
+    }
+    if (videoElement) {
+        if (data.isSpeaking) {
+            videoElement.classList.add('speaking');
+        } else {
+            videoElement.classList.remove('speaking');
+        }
+    }
+}
+// Add mask toggle handler
+let isMaskEnabled = false;
+document.getElementById('toggleMaskBtn').onclick = () => {
+    if (!isMaskEnabled) {
+        showMaskModal();
+    } else {
+        isMaskEnabled = false;
+        updateMaskState();
+    }
+};
+// Add modal functions
+function showMaskModal() {
+    const modal = document.getElementById('maskModal');
+    const maskGrid = document.getElementById('maskGrid');
+    maskGrid.innerHTML = '';
+    // Add mask options
+    masksList.forEach(maskFile => {
+        const maskOption = document.createElement('div');
+        maskOption.className = `mask-option ${maskFile === currentMask ? 'selected' : ''}`;
+        const maskName = maskFile.replace('.png', '').replace(/-/g, ' ');
+        maskOption.innerHTML = `
+            <img src="assets/mask/${maskFile}" alt="${maskName}">
+            <div class="mask-name">${maskName}</div>
+        `;
+        maskOption.onclick = () => {
+            document.querySelectorAll('.mask-option').forEach(opt =>
+                opt.classList.remove('selected')
+            );
+            maskOption.classList.add('selected');
+            currentMask = maskFile;
+            isMaskEnabled = true;
+            updateMaskState();
+        };
+        maskGrid.appendChild(maskOption);
+    });
+    modal.classList.add('show');
+    // Close button handler
+    modal.querySelector('.close-btn').onclick = () => {
+        modal.classList.remove('show');
+    };
+    // Close on outside click
+    modal.onclick = (e) => {
+        if (e.target === modal) {
+            modal.classList.remove('show');
+        }
+    };
+}
+// Update mask state function
+function updateMaskState() {
+    const maskBtn = document.getElementById('toggleMaskBtn');
+    maskBtn.classList.toggle('active', isMaskEnabled);
+    const maskImage = document.getElementById('maskImage');
+    maskImage.src = `assets/mask/${currentMask}`;
+    // Close modal if open
+    document.getElementById('maskModal').classList.remove('show');
+    // Call combined effects instead of individual updates
+    combineEffects();
+}
+// Add function to load available masks
+async function loadAvailableMasks() {
+    masksList = [
+        'basic/mask1.png',
+        'basic/mask2.png',
+        'basic/mask3.png',
+        'medicel/mask1.png',
+        'medicel/mask2.png',
+        'medicel/mask3.png',
+    ];
+    console.log('Available masks:', masksList);
+}
+// Add blur toggle handler after other control handlers
+document.getElementById('toggleBlurBtn').onclick = async () => {
+    isBlurEnabled = !isBlurEnabled;
+    updateBlurState();
+};
+// Add new function to update blur state
+async function updateBlurState() {
+    const blurBtn = document.getElementById('toggleBlurBtn');
+    blurBtn.classList.toggle('active', isBlurEnabled);
+    // Call combined effects instead of individual updates
+    await combineEffects();
+}
+// Update function to combine mask and blur effects
+async function combineEffects() {
+    try {
+        let finalStream = localStream;
+        if (isMaskEnabled && isBlurEnabled) {
+            // Create temporary video with proper dimensions
+            const tempVideo = document.createElement('video');
+            tempVideo.width = 640;
+            tempVideo.height = 480;
+            tempVideo.srcObject = localStream;
+            // Wait for video to be ready
+            await new Promise((resolve) => {
+                tempVideo.onloadedmetadata = () => {
+                    tempVideo.play();
+                    resolve();
+                };
+            });
+            // Apply mask first
+            const maskedStream = await faceMaskFilter.processFrame(localStream);
+            // Then apply blur to masked stream
+            const blurredAndMaskedStream = await backgroundBlur.updateInputStream(maskedStream);
+            // Create final stream
+            finalStream = new MediaStream();
+            blurredAndMaskedStream.getVideoTracks().forEach(track => {
+                finalStream.addTrack(track);
+            });
+            // Add audio
+            const audioTrack = localStream.getAudioTracks()[0];
+            if (audioTrack) {
+                finalStream.addTrack(audioTrack);
+            }
+        } else if (isMaskEnabled) {
+            finalStream = processedStream;
+        } else if (isBlurEnabled) {
+            const blurStream = await backgroundBlur.updateInputStream(localStream);
+            const audioTrack = localStream.getAudioTracks()[0];
+            if (audioTrack) {
+                blurStream.addTrack(audioTrack);
+            }
+            finalStream = blurStream;
+        }
+        // Update streams
+        if (localPeerConnection) {
+            const videoSender = localPeerConnection.getSenders()
+                .find(sender => sender.track?.kind === 'video');
+            if (videoSender) {
+                await videoSender.replaceTrack(finalStream.getVideoTracks()[0]);
+            }
+        }
+        const localVideo = document.getElementById('video-local').querySelector('video');
+        localVideo.srcObject = finalStream;
+    } catch (error) {
+        console.error('Error in combineEffects:', error);
+    }
+}
+// Initialize the room
+initializeRoom();

public/js/room.js ADDED Viewed

	@@ -0,0 +1,691 @@

+import CloudflareCalls from './CloudflareCalls.js';
+const calls = new CloudflareCalls({
+    backendUrl: 'http://localhost:50000',
+    websocketUrl: 'ws://localhost:50000'
+});
+let currentRoom = null;
+let screenShareCalls = null;
+// Add at the top with other globals
+let isMaskEnabled = false;
+let isBlurEnabled = false;
+let currentMask = 'basic/mask1.png';
+let masksList = [];
+let faceMaskFilter = null;
+let backgroundBlur = null;
+let processedStream = null;
+// DOM Elements
+const videoGrid = document.getElementById('videoGrid');
+const controls = {
+    toggleMic: document.getElementById('toggleMicBtn'),
+    toggleVideo: document.getElementById('toggleVideoBtn'),
+    shareScreen: document.getElementById('shareScreenBtn'),
+    toggleMask: document.getElementById('toggleMaskBtn'),
+    wave: document.getElementById('waveBtn'),
+    leave: document.getElementById('leaveBtn')
+};
+const participantsList = document.getElementById('participantsList');
+const notificationsContainer = document.getElementById('notificationsContainer');
+// Get stored data from localStorage
+const username = localStorage.getItem('username');
+const roomId = localStorage.getItem('roomId');
+// Get token and initialize calls
+async function ensureInitialized() {
+    if (!calls.token) {
+        try {
+            const response = await fetch('/auth/token', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ username })
+            });
+            const { token } = await response.json();
+            calls.setToken(token);
+            showNotification('Successfully initialized');
+            return true;
+        } catch (err) {
+            console.error('Error getting token:', err);
+            showNotification('Failed to initialize', 'error');
+            return false;
+        }
+    }
+    return true;
+}
+async function setupLocalVideo() {
+    try {
+        const stream = await navigator.mediaDevices.getUserMedia({
+            video: true,
+            audio: true
+        });
+        // Tìm hoặc tạo container cho local video
+        let container = document.querySelector('.local-video');
+        if (!container) {
+            container = document.createElement('div');
+            container.className = 'video-container local-video';
+            // Tạo video element cho preview local
+            const video = document.createElement('video');
+            video.autoplay = true;
+            video.playsInline = true;
+            video.muted = true; // Đảm bảo video local luôn bị mute
+            const nameLabel = document.createElement('div');
+            nameLabel.className = 'participant-name';
+            nameLabel.textContent = username || 'You';
+            container.appendChild(video);
+            container.appendChild(nameLabel);
+            videoGrid.appendChild(container);
+        }
+        // Set stream nhưng đảm bảo audio luôn bị mute cho local preview
+        const video = container.querySelector('video');
+        video.srcObject = stream;
+        video.volume = 0; // Thêm dòng này để đảm bảo volume = 0
+        video.muted = true; // Thêm dòng này để doubly sure
+        // Lưu stream cho WebRTC
+        calls.localStream = stream;
+        console.log('Local video setup complete');
+    } catch (err) {
+        console.error('Error accessing media devices:', err);
+        showNotification('Failed to access camera/microphone', 'error');
+    }
+}
+function getParticipantDisplayName(participant) {
+    return participant.name || `User-${participant.userId.slice(0, 6)}`;
+}
+async function joinRoom() {
+    try {
+        // 1. Join room và lấy session
+        await calls.joinRoom(roomId, { name: username });
+        currentRoom = roomId;
+        showNotification(`Joined room: ${roomId}`);
+        // 2. Setup handlers trước khi pull tracks
+        setupCallbacks();
+        // 3. Lấy danh sách người tham gia
+        const participants = await calls.listParticipants();
+        console.log('Current participants:', participants);
+        // 4. Set up remote streams for existing participants
+        for (const participant of participants) {
+            // Skip if it's our own session
+            if (participant.sessionId === calls.sessionId) continue;
+            console.log('Processing participant:', participant);
+            // Create container for this participant if not exists
+            const containerId = `participant-${participant.sessionId}`;
+            if (!document.getElementById(containerId)) {
+                const container = document.createElement('div');
+                container.id = containerId;
+                container.className = 'video-container';
+                const video = document.createElement('video');
+                video.autoplay = true;
+                video.playsInline = true;
+                const name = document.createElement('div');
+                name.className = 'participant-name';
+                name.textContent = participant.name || `participant-${participant.sessionId}`;
+                container.appendChild(video);
+                container.appendChild(name);
+                videoGrid.appendChild(container);
+                // Set up MediaStream for this participant
+                video.srcObject = new MediaStream();
+            }
+            // Pull each track from the participant
+            for (const trackName of participant.publishedTracks) {
+                console.log(`Pulling track ${trackName} from session ${participant.sessionId}`);
+                await calls._pullTracks(participant.sessionId, trackName);
+            }
+        }
+        // 5. Start monitoring stats sau khi mọi thứ đã setup
+        calls.startStatsMonitoring(1000);
+    } catch (err) {
+        console.error('Error joining room:', err);
+        showNotification('Failed to join room: ' + err.message, 'error');
+    }
+}
+async function setupScreenShare() {
+    // Tạo một instance CloudflareCalls mới cho screen share
+    screenShareCalls = new CloudflareCalls({
+        backendUrl: 'http://localhost:50000',
+        websocketUrl: 'ws://localhost:50000'
+    });
+    // Khởi tạo token cho screen share
+    const response = await fetch('/auth/token', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ username: username + '-screen' })
+    });
+    const { token } = await response.json();
+    screenShareCalls.setToken(token);
+    // Lấy screen share stream
+    const screenStream = await navigator.mediaDevices.getDisplayMedia({
+        video: true,
+        audio: false
+    });
+    // Lưu stream và join room
+    screenShareCalls.localStream = screenStream;
+    await screenShareCalls.joinRoom(roomId, { name: username + "'s Screen" });
+    // THÊM: Publish tracks sau khi join room
+    await screenShareCalls.publishTracks();
+    // Setup callback cho screen share để nhận remote tracks
+    screenShareCalls.onRemoteTrack((track) => {
+        console.log('Screen share track received:', track);
+        const containerId = `participant-${track.sessionId}`;
+        let container = document.getElementById(containerId);
+        if (!container) {
+            container = document.createElement('div');
+            container.id = containerId;
+            container.className = 'video-container';
+            const video = document.createElement('video');
+            video.autoplay = true;
+            video.playsInline = true;
+            const name = document.createElement('div');
+            name.className = 'participant-name';
+            name.textContent = username + "'s Screen";
+            container.appendChild(video);
+            container.appendChild(name);
+            videoGrid.appendChild(container);
+            video.srcObject = new MediaStream();
+        }
+        const video = container.querySelector('video');
+        video.srcObject.addTrack(track);
+    });
+    // Lắng nghe sự kiện kết thúc screen share
+    const screenTrack = screenStream.getVideoTracks()[0];
+    screenTrack.onended = async () => {
+        await stopScreenShare();
+    };
+    // Cập nhật icon
+    controls.shareScreen.querySelector('.material-icons').textContent = 'stop_screen_share';
+    showNotification('Screen sharing started');
+}
+async function stopScreenShare() {
+    if (screenShareCalls) {
+        // Dọn dẹp stream
+        if (screenShareCalls.localStream) {
+            screenShareCalls.localStream.getTracks().forEach(track => track.stop());
+        }
+        // Rời phòng và đóng kết nối
+        await screenShareCalls.leaveRoom();
+        screenShareCalls = null;
+        // Cập nhật UI
+        controls.shareScreen.querySelector('.material-icons').textContent = 'screen_share';
+        showNotification('Screen sharing ended');
+    }
+}
+function setupCallbacks() {
+    calls.onRemoteTrack((track) => {
+        console.log('Remote track received:', track);
+        const containerId = `participant-${track.sessionId}`;
+        let container = document.getElementById(containerId);
+        if (!container) {
+            container = document.createElement('div');
+            container.id = containerId;
+            container.className = 'video-container';
+            const video = document.createElement('video');
+            video.autoplay = true;
+            video.playsInline = true;
+            const name = document.createElement('div');
+            name.className = 'participant-name';
+            name.textContent = 'Participant ' + track.sessionId;
+            container.appendChild(video);
+            container.appendChild(name);
+            videoGrid.appendChild(container);
+        }
+        const video = container.querySelector('video');
+        if (!video.srcObject) {
+            video.srcObject = new MediaStream();
+        }
+        video.srcObject.addTrack(track);
+    });
+    calls.onRemoteTrackUnpublished((sessionId, trackName) => {
+        console.log('Remote track unpublished:', { sessionId, trackName });
+        const containerId = `participant-${sessionId}`;
+        const container = document.getElementById(containerId);
+        if (container) {
+            const video = container.querySelector('video');
+            if (video && video.srcObject) {
+                // Tìm và xóa track khỏi MediaStream
+                const stream = video.srcObject;
+                const tracks = stream.getTracks();
+                tracks.forEach(track => {
+                    if (track.id === trackName) {
+                        stream.removeTrack(track);
+                        track.stop();
+                    }
+                });
+                // Nếu không còn track nào, xóa container
+                if (stream.getTracks().length === 0) {
+                    container.remove();
+                }
+            }
+        }
+    });
+    // Thêm callback xử lý khi track status thay đổi
+    calls.onTrackStatusChanged(async ({ sessionId, trackName, status }) => {
+        console.log('Track status changed:', { sessionId, trackName, status });
+        // Tìm container của participant
+        const containerId = `participant-${sessionId}`;
+        const container = document.getElementById(containerId);
+        if (container) {
+            const video = container.querySelector('video');
+            if (video && video.srcObject) {
+                // Tìm track cần cập nhật
+                const mediaStream = video.srcObject;
+                const tracks = mediaStream.getTracks();
+                // Nếu track bị disabled, pull lại track mới
+                if (status === 'disabled') {
+                    // Xóa track cũ
+                    tracks.forEach(track => {
+                        if (track.id === trackName) {
+                            mediaStream.removeTrack(track);
+                            track.stop();
+                        }
+                    });
+                    // Pull track mới
+                    try {
+                        await calls._pullTracks(sessionId, trackName);
+                        console.log(`Re-pulled track ${trackName} for session ${sessionId}`);
+                    } catch (error) {
+                        console.error('Error re-pulling track:', error);
+                    }
+                }
+            }
+        }
+    });
+    calls.onParticipantLeft((participant) => {
+        const container = document.getElementById(`participant-${participant.sessionId}`);
+        if (container) {
+            container.remove();
+        }
+        showNotification(`${participant.name || 'A participant'} left the room`);
+    });
+    // Sửa lại handler cho data messages
+    calls.onDataMessage(async (data) => {
+        console.log('Received data message:', data);
+        showNotification(`👋 ${data.data.fromName} vẫy tay chào!`);
+    });
+    // Sửa lại handler cho nút vẫy tay
+    controls.wave.onclick = async () => {
+        try {
+            // Gửi tin nhắn vẫy tay với đầy đủ thông tin
+            await calls.sendDataToAll({
+                type: 'wave',
+                fromSession: calls.sessionId,
+                fromName: username,
+                timestamp: Date.now() // Thêm timestamp để tránh trùng lặp
+            });
+            // Hiển thị thông báo local
+            showNotification('Bạn đã vẫy tay chào mọi người! 👋');
+        } catch (error) {
+            console.error('Error sending wave:', error);
+            showNotification('Không thể gửi vẫy tay', 'error');
+        }
+    };
+    // Control buttons
+    controls.toggleMic.onclick = () => {
+        const audioTrack = calls.localStream?.getAudioTracks()[0];
+        if (audioTrack) {
+            audioTrack.enabled = !audioTrack.enabled;
+            controls.toggleMic.querySelector('.material-icons').textContent =
+                audioTrack.enabled ? 'mic' : 'mic_off';
+        }
+    };
+    controls.toggleVideo.onclick = () => {
+        const videoTrack = calls.localStream?.getVideoTracks()[0];
+        if (videoTrack) {
+            videoTrack.enabled = !videoTrack.enabled;
+            controls.toggleVideo.querySelector('.material-icons').textContent =
+                videoTrack.enabled ? 'videocam' : 'videocam_off';
+        }
+    };
+    controls.shareScreen.onclick = async () => {
+        if (!screenShareCalls) {
+            await setupScreenShare();
+        } else {
+            await stopScreenShare();
+        }
+    };
+    controls.leave.onclick = async () => {
+        if (currentRoom) {
+            await calls.leaveRoom();
+            window.location.href = 'index.html';
+        }
+    };
+    controls.toggleMask.onclick = () => {
+        if (!isMaskEnabled) {
+            showMaskModal();
+        } else {
+            isMaskEnabled = false;
+            const maskBtn = document.getElementById('toggleMaskBtn');
+            maskBtn.classList.remove('active');
+            combineEffects();
+        }
+    };
+    // Add blur toggle handler
+    document.getElementById('toggleBlurBtn').onclick = async () => {
+        isBlurEnabled = !isBlurEnabled;
+        const blurBtn = document.getElementById('toggleBlurBtn');
+        blurBtn.classList.toggle('active', isBlurEnabled);
+        await combineEffects();
+    };
+}
+// Thêm CSS styles cho hiệu ứng vẫy tay
+const style = document.createElement('style');
+style.textContent = `
+    .wave-effect {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        font-size: 24px;
+        animation: wave 1s infinite;
+    }
+    @keyframes wave {
+        0% { transform: rotate(0deg); }
+        25% { transform: rotate(-20deg); }
+        75% { transform: rotate(20deg); }
+        100% { transform: rotate(0deg); }
+    }
+`;
+document.head.appendChild(style);
+function showNotification(message, type = 'info') {
+    const notification = document.createElement('div');
+    notification.className = `notification ${type}`;
+    notification.textContent = message;
+    notificationsContainer.appendChild(notification);
+    setTimeout(() => notification.remove(), 3000);
+}
+// Initialize when page loads
+async function initialize() {
+    if (!username || !roomId) {
+        window.location.href = 'index.html';
+        return;
+    }
+    // Initialize background blur with existing canvas element
+    const blurCanvas = document.getElementById('blurCanvas');
+    if (!blurCanvas) {
+        console.error('Blur canvas element not found');
+        return;
+    }
+    backgroundBlur = new BackgroundBlur(
+        document.createElement('video'),
+        blurCanvas
+    );
+    await backgroundBlur.initialize();
+    // Load available masks
+    await loadAvailableMasks();
+    // Initialize face mask filter
+    const maskCanvas = document.getElementById('maskCanvas');
+    const maskImage = document.getElementById('maskImage');
+    if (maskCanvas && maskImage) {
+        faceMaskFilter = new FaceMaskFilter(
+            document.createElement('video'),
+            maskCanvas,
+            maskImage
+        );
+        await faceMaskFilter.initialize();
+    }
+    if (await ensureInitialized()) {
+        await setupLocalVideo();
+        await joinRoom();
+        setupCallbacks();
+    }
+}
+document.addEventListener('DOMContentLoaded', initialize);
+window.addEventListener('beforeunload', () => {
+    if (currentRoom) {
+        calls.leaveRoom();
+        if (screenShareCalls) {
+            screenShareCalls.leaveRoom();
+        }
+    }
+});
+// Add mask-related functions
+async function loadAvailableMasks() {
+    masksList = [
+        'basic/mask1.png',
+        'basic/mask2.png',
+        'basic/mask3.png',
+        'medicel/mask1.png',
+        'medicel/mask2.png',
+        'medicel/mask3.png'
+    ];
+    console.log('Available masks:', masksList);
+}
+// Add modal close button handler
+document.querySelector('#maskModal .close-btn').onclick = () => {
+    document.getElementById('maskModal').classList.remove('show');
+};
+function showMaskModal() {
+    const modal = document.getElementById('maskModal');
+    const maskGrid = document.getElementById('maskGrid');
+    maskGrid.innerHTML = '';
+    // Group masks by category
+    const masksByCategory = masksList.reduce((acc, maskFile) => {
+        const category = maskFile.split('/')[0];
+        if (!acc[category]) {
+            acc[category] = [];
+        }
+        acc[category].push(maskFile);
+        return acc;
+    }, {});
+    // Create mask options for each category
+    Object.entries(masksByCategory).forEach(([category, masks]) => {
+        masks.forEach(maskFile => {
+            const maskOption = document.createElement('div');
+            maskOption.className = `mask-option ${maskFile === currentMask ? 'selected' : ''}`;
+            const maskName = maskFile.split('/')[1].replace('.png', '');
+            maskOption.innerHTML = `
+                <img src="assets/mask/${maskFile}" alt="${maskName}">
+                <div class="mask-name">${maskName}</div>
+                <div class="mask-category">${category}</div>
+            `;
+            maskOption.onclick = () => {
+                document.querySelectorAll('.mask-option').forEach(opt =>
+                    opt.classList.remove('selected')
+                );
+                maskOption.classList.add('selected');
+                currentMask = maskFile;
+                isMaskEnabled = true;
+                updateMaskState();
+            };
+            maskGrid.appendChild(maskOption);
+        });
+    });
+    // Show modal with animation
+    modal.classList.add('show');
+    setTimeout(() => modal.querySelector('.modal-content').classList.add('show'), 50);
+}
+// Update modal close handler
+document.querySelector('#maskModal .close-btn').onclick = () => {
+    const modal = document.getElementById('maskModal');
+    modal.querySelector('.modal-content').classList.remove('show');
+    setTimeout(() => modal.classList.remove('show'), 300);
+};
+// Add click outside to close
+document.getElementById('maskModal').onclick = (e) => {
+    if (e.target.id === 'maskModal') {
+        e.target.querySelector('.modal-content').classList.remove('show');
+        setTimeout(() => e.target.classList.remove('show'), 300);
+    }
+};
+async function updateMaskState() {
+    const maskBtn = document.getElementById('toggleMaskBtn');
+    maskBtn.classList.toggle('active', isMaskEnabled);
+    const maskImage = document.getElementById('maskImage');
+    maskImage.src = `assets/mask/${currentMask}`;
+    document.getElementById('maskModal').classList.remove('show');
+    await combineEffects();
+}
+async function updateBlurState() {
+    const blurBtn = document.getElementById('toggleBlurBtn');
+    blurBtn.classList.toggle('active', isBlurEnabled);
+    await combineEffects();
+}
+async function combineEffects() {
+    try {
+        let finalStream = calls.localStream;
+        if (isMaskEnabled && isBlurEnabled) {
+            // Apply mask first
+            const maskedStream = await faceMaskFilter.processFrame(calls.localStream);
+            await new Promise(resolve => setTimeout(resolve, 100)); // Wait for mask to initialize
+            // Then apply blur
+            const blurredAndMaskedStream = await backgroundBlur.updateInputStream(maskedStream);
+            // Create final stream with both effects
+            finalStream = new MediaStream();
+            blurredAndMaskedStream.getVideoTracks().forEach(track => {
+                finalStream.addTrack(track);
+            });
+            // Add audio track
+            const audioTrack = calls.localStream.getAudioTracks()[0];
+            if (audioTrack) {
+                finalStream.addTrack(audioTrack);
+            }
+        } else if (isMaskEnabled) {
+            finalStream = await faceMaskFilter.processFrame(calls.localStream);
+            // Ensure we have audio
+            const audioTrack = calls.localStream.getAudioTracks()[0];
+            if (audioTrack && !finalStream.getAudioTracks().length) {
+                finalStream.addTrack(audioTrack);
+            }
+        } else if (isBlurEnabled) {
+            const blurredStream = await backgroundBlur.updateInputStream(calls.localStream);
+            finalStream = new MediaStream();
+            blurredStream.getVideoTracks().forEach(track => {
+                finalStream.addTrack(track);
+            });
+            // Add audio track
+            const audioTrack = calls.localStream.getAudioTracks()[0];
+            if (audioTrack) {
+                finalStream.addTrack(audioTrack);
+            }
+        }
+        // Update local video display với muted audio
+        const localVideo = document.querySelector('.local-video video');
+        if (localVideo) {
+            localVideo.srcObject = finalStream;
+            localVideo.muted = true; // Đảm bảo local preview luôn mute
+            localVideo.volume = 0;
+        }
+        // Update WebRTC stream
+        if (calls.peerConnection) {
+            const videoSender = calls.peerConnection.getSenders()
+                .find(sender => sender.track?.kind === 'video');
+            if (videoSender) {
+                const videoTrack = finalStream.getVideoTracks()[0];
+                if (videoTrack) {
+                    await videoSender.replaceTrack(videoTrack);
+                }
+            }
+        }
+    } catch (error) {
+        console.error('Error in combineEffects:', error);
+    }
+}

public/room-old.html ADDED Viewed

	@@ -0,0 +1,104 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Meeting Room</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/webrtc-adapter/8.1.2/adapter.min.js"></script>
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+    <div id="notificationsContainer" class="notifications-container"></div>
+    <div class="room-container">
+        <div class="main-video" id="mainVideo">
+            <!-- Spotlight video goes here -->
+        </div>
+        <div class="thumbnail-grid" id="thumbnailGrid">
+            <!-- Small participant videos go here -->
+        </div>
+        <div id="videoGrid" class="video-grid">
+            <!-- Video elements will be added here dynamically -->
+        </div>
+        <!-- Add chat container -->
+        <div class="chat-container" id="chatContainer">
+            <div class="chat-header">
+                <h3>Chat</h3>
+                <button id="toggleChatBtn" class="chat-toggle-btn">
+                    <span class="material-icons">chat</span>
+                </button>
+            </div>
+            <div class="chat-messages" id="chatMessages">
+                <!-- Chat messages will be added here -->
+            </div>
+            <div class="chat-input-container">
+                <input type="text" id="chatInput" placeholder="Type a message...">
+                <button id="sendMessageBtn">
+                    <span class="material-icons">send</span>
+                </button>
+            </div>
+        </div>
+        <div class="controls-bar">
+            <button id="toggleMicBtn" class="control-btn">
+                <span class="material-icons">mic</span>
+            </button>
+            <button id="toggleVideoBtn" class="control-btn">
+                <span class="material-icons">videocam</span>
+            </button>
+            <button id="shareScreenBtn" class="control-btn">
+                <span class="material-icons">screen_share</span>
+            </button>
+            <!-- Add mask toggle button -->
+            <button id="toggleMaskBtn" class="control-btn">
+                <span class="material-icons">face</span>
+            </button>
+            <!-- Add blur toggle button -->
+            <button id="toggleBlurBtn" class="control-btn">
+                <span class="material-icons">blur_on</span>
+            </button>
+            <button id="waveBtn" class="control-btn">
+                <span class="material-icons">👋</span>
+            </button>
+            <button id="leaveBtn" class="control-btn leave-btn">
+                <span class="material-icons">call_end</span>
+            </button>
+            <!-- Add chat toggle button to controls -->
+            <button id="chatBtn" class="control-btn">
+                <span class="material-icons">chat</span>
+            </button>
+        </div>
+    </div>
+    <!-- Add hidden elements for face mask filter -->
+    <canvas id="maskCanvas" style="display: none;"></canvas>
+    <img id="maskImage" src="assets/mask/mask.png" style="display: none;" crossorigin="anonymous">
+    <!-- Add mask selection modal -->
+    <div id="maskModal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3>Chọn mặt nạ</h3>
+                <button class="close-btn">&times;</button>
+            </div>
+            <div id="maskGrid" class="mask-grid">
+                <!-- Mask options will be added dynamically -->
+            </div>
+        </div>
+    </div>
+    <div class="participant-list">
+        <h3>Participants</h3>
+        <ul id="participantsList"></ul>
+    </div>
+    <!-- Update script imports -->
+    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh/face_mesh.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js"></script>
+    <script src="js/FaceMaskFilter.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/selfie_segmentation"></script>
+    <script src="js/backgroundBlur.js"></script>
+    <script src="js/room.js"></script>
+</body>
+</html>

public/room.html ADDED Viewed

	@@ -0,0 +1,124 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Meeting Room</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/webrtc-adapter/8.1.2/adapter.min.js"></script>
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link rel="stylesheet" href="css/style.css">
+    <script>
+        window.onerror = function (msg, url, lineNo, columnNo, error) {
+            console.error('Window Error:', {
+                message: msg,
+                url: url,
+                lineNo: lineNo,
+                columnNo: columnNo,
+                error: error
+            });
+            return false;
+        };
+        window.addEventListener('unhandledrejection', function (event) {
+            console.error('Unhandled Promise Rejection:', event.reason);
+        });
+    </script>
+</head>
+<body>
+    <div id="notificationsContainer" class="notifications-container"></div>
+    <div class="room-container">
+        <div class="main-video" id="mainVideo">
+            <!-- Spotlight video goes here -->
+        </div>
+        <div class="thumbnail-grid" id="thumbnailGrid">
+            <!-- Small participant videos go here -->
+        </div>
+        <div id="videoGrid" class="video-grid">
+            <!-- Video elements will be added here dynamically -->
+        </div>
+        <canvas id="blurCanvas" width="640" height="480" style="display: none;"></canvas>
+        <div class="controls-bar">
+            <button id="toggleMicBtn" class="control-btn">
+                <span class="material-icons">mic</span>
+            </button>
+            <button id="toggleVideoBtn" class="control-btn">
+                <span class="material-icons">videocam</span>
+            </button>
+            <button id="shareScreenBtn" class="control-btn">
+                <span class="material-icons">screen_share</span>
+            </button>
+            <!-- Add mask toggle button -->
+            <button id="toggleMaskBtn" class="control-btn">
+                <span class="material-icons">face</span>
+            </button>
+            <button id="toggleBlurBtn" class="control-btn">
+                <span class="material-icons">blur_on</span>
+            </button>
+            <button id="waveBtn" class="control-btn">
+                <span class="material-icons">👋</span>
+            </button>
+            <button id="leaveBtn" class="control-btn leave-btn">
+                <span class="material-icons">call_end</span>
+            </button>
+        </div>
+    </div>
+    <!-- Hidden elements for mask filter -->
+    <canvas id="maskCanvas" width="640" height="480" style="display: none;"></canvas>
+    <img id="maskImage" src="assets/mask/basic/mask1.png" style="display: none;" crossorigin="anonymous">
+    <!-- Mask selection modal -->
+    <div id="maskModal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3>Choose Your Mask</h3>
+                <button class="close-btn">&times;</button>
+            </div>
+            <div id="maskGrid" class="mask-grid">
+                <!-- Mask options will be added dynamically -->
+            </div>
+        </div>
+    </div>
+    <div class="participant-list">
+        <h3>Participants</h3>
+        <ul id="participantsList"></ul>
+    </div>
+    <!-- Update script imports -->
+    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh@0.4.1633559619/face_mesh.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils@0.3.1633559619/drawing_utils.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils@0.3.1633559619/camera_utils.js"></script>
+    <!-- Load selfie segmentation separately -->
+    <script
+        src="https://cdn.jsdelivr.net/npm/@mediapipe/selfie_segmentation@0.1.1632777926/selfie_segmentation.js"></script>
+    <!-- Add error handling for WASM loading -->
+    <script>
+        // Check WebAssembly support
+        if (!WebAssembly.instantiateStreaming) {
+            WebAssembly.instantiateStreaming = async (resp, importObject) => {
+                const source = await (await resp).arrayBuffer();
+                return await WebAssembly.instantiate(source, importObject);
+            };
+        }
+        // Add error handler for WASM loading
+        window.addEventListener('unhandledrejection', function (event) {
+            if (event.reason.toString().includes('wasm')) {
+                console.error('WASM loading error:', event.reason);
+                alert('Failed to load face effects. Please check your internet connection.');
+            }
+        });
+    </script>
+    <!-- Load your custom scripts -->
+    <script src="js/backgroundBlur.js"></script>
+    <script src="js/FaceMaskFilter.js"></script>
+    <script type="module" src="js/room.js"></script>
+</body>
+</html>

public/temp/CloudflareCalls.js ADDED Viewed

	@@ -0,0 +1,2472 @@

+/**
+ * CloudflareCalls.js
+ *
+ * High-level library for Cloudflare Calls using SFU,
+ * now leveraging WebSocket for data message publish/subscribe flow.
+ */
+/**
+ * Represents the CloudflareCalls library for managing real-time communications.
+ */
+class CloudflareCalls {
+    /**
+     * @typedef {Object} VideoQualitySettings
+     * @property {Object} width - Video width settings
+     * @property {number} width.ideal - Ideal video width in pixels
+     * @property {Object} height - Video height settings
+     * @property {number} height.ideal - Ideal video height in pixels
+     * @property {Object} frameRate - Frame rate settings
+     * @property {number} frameRate.ideal - Ideal frame rate in fps
+     * @property {number} maxBitrate - Maximum video bitrate in bps
+     */
+    /**
+     * @typedef {Object} AudioQualitySettings
+     * @property {number} maxBitrate - Maximum audio bitrate in bps
+     * @property {number} sampleRate - Audio sample rate in Hz
+     * @property {number} channelCount - Number of audio channels (1=mono, 2=stereo)
+     */
+    /**
+     * @typedef {Object} QualityPreset
+     * @property {VideoQualitySettings} video - Video quality settings
+     * @property {AudioQualitySettings} audio - Audio quality settings
+     */
+    /**
+     * @typedef {Object} ConnectionStats
+     * @property {Object} outbound - Outbound (sending) statistics
+     * @property {number} outbound.bitrate - Current outbound bitrate in bits/s
+     * @property {number} outbound.packetLoss - Percentage of packets lost
+     * @property {string} outbound.qualityLimitation - Reason for quality limitations (if any)
+     * @property {Object} inbound - Inbound (receiving) statistics per track
+     * @property {number} inbound.bitrate - Current inbound bitrate in bits/s
+     * @property {number} inbound.packetLoss - Percentage of packets lost
+     * @property {number} inbound.jitter - Current jitter in seconds
+     * @property {Object} connection - Overall connection statistics
+     * @property {number} connection.roundTripTime - Current round trip time in seconds
+     * @property {string} connection.state - Current connection state
+     */
+    /**
+     * @typedef {Object} StreamStats
+     * @property {string} sessionId - Session ID of the stream
+     * @property {number} packetLoss - Packet loss percentage
+     * @property {string} qualityLimitation - Quality limitation reason
+     * @property {number} bitrate - Current bitrate
+     */
+    /**
+     * Creates an instance of CloudflareCalls.
+     * @param {Object} config - Configuration object.
+     * @param {string} config.backendUrl - The backend server URL.
+     * @param {string} config.websocketUrl - The WebSocket server URL.
+     */
+    constructor(config = {}) {
+        this.backendUrl = config.backendUrl || '';
+        this.websocketUrl = config.websocketUrl || '';
+        this.debug = config.debug || false;
+        this.token = null;
+        this.roomId = null;
+        this.sessionId = null;
+        this.userId = this._generateUUID();
+        this.userMetadata = {};
+        this.localStream = null;
+        this.peerConnection = null;
+        this.ws = null;
+        // Specific message handlers
+        this._onParticipantJoinedCallback = null;
+        this._onParticipantLeftCallback = null;
+        this._onRemoteTrackCallback = null;
+        this._onRemoteTrackUnpublishedCallback = null;
+        this._onTrackStatusChangedCallback = null;
+        this._onDataMessageCallback = null;
+        this._onConnectionStatsCallback = null;
+        // Generic message handlers
+        this._wsMessageHandlers = new Set();
+        // Track management
+        this.pulledTracks = new Map(); // Map<sessionId, Set<trackName>>
+        this.pollingInterval = null; // Reference to the polling interval
+        // Device management
+        this.availableAudioInputDevices = [];
+        this.availableVideoInputDevices = [];
+        this.availableAudioOutputDevices = [];
+        this.currentAudioOutputDeviceId = null;
+        this._renegotiateTimeout = null;
+        this.publishedTracks = new Set();
+        this.midToSessionId = new Map();
+        this.midToTrackName = new Map();
+        this._onRoomMetadataUpdatedCallback = null;
+        // Store initial quality settings
+        /** @type {QualityPreset} */
+        this.pendingQualitySettings = null;
+        this.mediaQuality = CloudflareCalls.QUALITY_PRESETS.medium_16x9_md;
+        /** @type {Object.<string, QualityPreset>} */
+        this.QUALITY_PRESETS = CloudflareCalls.QUALITY_PRESETS;
+        // Stats monitoring
+        this.statsInterval = null;
+        this.previousStats = null;
+        /** @type {'stopped'|'monitoring'} */
+        this.statsMonitoringState = 'stopped';
+    }
+    /**
+     * Internal logging method that only outputs when debug is enabled
+     * @private
+     * @param {...any} args - Arguments to pass to console.log
+     */
+    _log(...args) {
+        if (this.debug) {
+            console.log('[CloudflareCalls]', ...args);
+        }
+    }
+    /**
+     * Internal warning method that only outputs when debug is enabled
+     * @private
+     * @param {...any} args - Arguments to pass to console.warn
+     */
+    _warn(...args) {
+        if (this.debug) {
+            console.warn('[CloudflareCalls]', ...args);
+        }
+    }
+    /**
+     * Internal error method that always outputs (important for debugging)
+     * @private
+     * @param {...any} args - Arguments to pass to console.error
+     */
+    _error(...args) {
+        console.error('[CloudflareCalls]', ...args);
+    }
+    /**
+     * Enable or disable debug logging
+     * @param {boolean} enabled - Whether to enable debug logging
+     */
+    setDebugMode(enabled) {
+        this.debug = Boolean(enabled);
+    }
+    /**
+     * Internal method to perform fetch requests with automatic token inclusion and JSON parsing.
+     * @private
+     * @param {string} url - The full URL to fetch.
+     * @param {Object} options - Fetch options such as method, headers, body, etc.
+     * @returns {Promise<Object>} The parsed JSON response.
+     * @throws {Error} If the response is not OK.
+     */
+    async _fetch(url, options = {}) {
+        // Initialize headers if not provided
+        options.headers = options.headers || {};
+        // Add Authorization header if token is set
+        if (this.token) {
+            options.headers['Authorization'] = `Bearer ${this.token}`;
+        }
+        try {
+            const response = await fetch(url, options);
+            // Check if the response status is OK (status in the range 200-299)
+            if (!response.ok) {
+                this._warn(`HTTP error! status: ${response.status}`);
+            }
+            return response;
+        } catch (error) {
+            this._warn(`Fetch error for ${url}:`, error);
+            return false;
+        }
+    }
+    /************************************************
+     * Callback Registration
+     ***********************************************/
+    /**
+     * Registers a callback for remote track events.
+     * @param {Function} callback - The callback function to handle remote tracks.
+     */
+    onRemoteTrack(callback) {
+        this._onRemoteTrackCallback = callback;
+    }
+    /**
+     * Registers a callback for remote track unpublished events.
+     * @param {Function} callback - The callback function to handle track unpublished events.
+     */
+    onRemoteTrackUnpublished(callback) {
+        this._onRemoteTrackUnpublishedCallback = callback;
+    }
+    /**
+     * Registers a callback for incoming data messages.
+     * @param {Function} callback - The callback function to handle data messages.
+     */
+    onDataMessage(callback) {
+        this._onDataMessageCallback = callback;
+    }
+    /**
+     * Registers a callback for participant joined events.
+     * @param {Function} callback - The callback function to handle participant joins.
+     */
+    onParticipantJoined(callback) {
+        this._onParticipantJoinedCallback = callback;
+    }
+    /**
+     * Registers a callback for participant left events.
+     * @param {Function} callback - The callback function to handle participant departures.
+     */
+    onParticipantLeft(callback) {
+        this._onParticipantLeftCallback = callback;
+    }
+    /**
+     * Registers a callback for track status changed events.
+     * @param {Function} callback - The callback function to handle track status changes.
+     */
+    onTrackStatusChanged(callback) {
+        this._onTrackStatusChangedCallback = callback;
+    }
+    /**
+     * Registers a callback for WebSocket messages
+     * @param {Function} callback - Function to call when WebSocket messages are received
+     * @returns {Function} Function to unregister the callback
+     */
+    onWebSocketMessage(callback) {
+        this._wsMessageHandlers.add(callback);
+        return () => this._wsMessageHandlers.delete(callback);
+    }
+    /************************************************
+     * User Metadata Management
+     ***********************************************/
+    /**
+     * Sets the user token for server requests. This should be a JWT token, and will be delivered in Authorization headers (HTTP) and to authenticate websocket join requests.
+     * @param {String} token - The metadata to associate with the user.
+     */
+    setToken(token) {
+        this.token = token;
+    }
+    /**
+     * Register callback for room metadata updates
+     * @param {Function} callback Callback function
+     */
+    onRoomMetadataUpdated(callback) {
+        this._onRoomMetadataUpdatedCallback = callback;
+    }
+    /**
+     * Sets the user metadata and updates it on the server.
+     * @param {Object} metadata - The metadata to associate with the user.
+     */
+    setUserMetadata(metadata) {
+        this.userMetadata = metadata;
+        this._updateUserMetadataOnServer();
+    }
+    /**
+     * Retrieves the current user metadata.
+     * @returns {Object} The user metadata.
+     */
+    getUserMetadata() {
+        return this.userMetadata;
+    }
+    /**
+     * Updates user metadata on the server
+     * @private
+     * @async
+     * @returns {Promise<void>}
+     */
+    async _updateUserMetadataOnServer() {
+        if (!this.roomId || !this.sessionId) {
+            this._warn('Cannot update metadata before joining a room.');
+            return;
+        }
+        try {
+            const updateUrl = `${this.backendUrl}/api/rooms/${this.roomId}/metadata`;
+            const response = await this._fetch(updateUrl, {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(this.userMetadata)
+            });
+            if (!response.ok) {
+                this._error('Failed to update user metadata on server.');
+            } else {
+                this._log('User metadata updated on server.');
+            }
+        } catch (error) {
+            this._error('Error updating user metadata:', error);
+            throw error;
+        }
+    }
+    /************************************************
+     * Room & Session Management
+     ***********************************************/
+    /**
+     * Creates a new room with optional metadata.
+     * @async
+     * @param {Object} options Room creation options
+     * @param {string} [options.name] Room name
+     * @param {Object} [options.metadata] Room metadata
+     * @returns {Promise<Object>} Created room information including roomId, name, metadata, etc.
+     */
+    async createRoom(options = {}) {
+        const resp = await this._fetch(`${this.backendUrl}/api/rooms`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(options)
+        }).then(r => r.json());
+        // Store the roomId
+        this.roomId = resp.roomId;
+        // Return the full room object
+        return resp;
+    }
+    /**
+     * Joins an existing room.
+     * @async
+     * @param {string} roomId - The ID of the room to join.
+     * @param {Object} [metadata={}] - Optional metadata for the user.
+     * @returns {Promise<void>}
+     */
+    async joinRoom(roomId, metadata = {}) {
+        this.roomId = roomId;
+        // 1) Ask server to create a CF Calls session
+        const joinResp = await this._fetch(`${this.backendUrl}/api/rooms/${roomId}/join`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ userId: this.userId, metadata: this.userMetadata })
+        }).then(r => r.json());
+        await this._initWebSocket();
+        if (!joinResp.sessionId) {
+            throw new Error('Failed to join room or retrieve sessionId');
+        }
+        this.sessionId = joinResp.sessionId;
+        // Initialize pulledTracks map
+        this.pulledTracks.set(this.sessionId, new Set());
+        // 2) Create RTCPeerConnection
+        this.peerConnection = await this._createPeerConnection();
+        // 3) Get Local Media and Publish Tracks
+        if (!this.localStream) {
+            this.localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
+            this._log('Acquired local media');
+        }
+        await this._publishTracks();
+        // 4) Pull other participants' tracks
+        const otherSessions = joinResp.otherSessions || [];
+        for (const s of otherSessions) {
+            this.pulledTracks.set(s.sessionId, new Set());
+            for (const tName of s.publishedTracks || []) {
+                await this._pullTracks(s.sessionId, tName);
+            }
+        }
+        this._log('Joined room', roomId, 'my session:', this.sessionId);
+        this.setUserMetadata(metadata);
+        // 5) Start polling for new tracks
+        this._startPolling();
+    }
+    /**
+     * Cleans up ended tracks in localStream
+     * @async
+     * @private
+     * @returns {void}
+     */
+    async _cleanupEndedTracks() {
+        // Clear local media devices (readyState == 'ended', so they can't be reused)
+        if (this.localStream) {
+            for (const track of this.localStream.getTracks()) {
+                if (track.readyState === 'ended') {
+                    this.localStream.removeTrack(track);
+                    track.stop();
+                }
+            }
+        }
+        // If no tracks remain, clear the stream
+        if (this.localStream && !this.localStream.getTracks().length) {
+            this.localStream = null;
+        }
+    }
+    /**
+     * Leaves the current room and cleans up connections.
+     * @async
+     * @returns {Promise<void>}
+     */
+    async leaveRoom() {
+        if (!this.roomId || !this.sessionId) return;
+        // Clean up published tracks (if applicable)
+        const senders = this.peerConnection.getSenders();
+        if (senders && senders.length) {
+            await this.unpublishAllTracks();
+        }
+        try {
+            await this._fetch(`${this.backendUrl}/api/rooms/${this.roomId}/leave`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ sessionId: this.sessionId })
+            });
+        } catch (error) {
+            this._warn('Error leaving room:', error);
+        }
+        // Clean up WebSocket
+        if (this.ws) {
+            this.ws.close();
+            this.ws = null;
+        }
+        // Clean up PeerConnection
+        if (this.peerConnection) {
+            this.peerConnection.close();
+            this.peerConnection = null;
+        }
+        await this._cleanupEndedTracks();
+        this._log('Left room, closed PC & WS');
+        // Reset room state
+        this.roomId = null;
+        this.sessionId = null;
+        this.pulledTracks.clear();
+        this.midToSessionId.clear();
+        this.midToTrackName.clear();
+        this.publishedTracks.clear();
+    }
+    /************************************************
+     * Publish & Pull
+     ***********************************************/
+    /**
+     * Publishes the local media tracks to the room.
+     * @async
+     * @returns {Promise<void>}
+     * @throws {Error} If there is no local media stream to publish.
+     */
+    async publishTracks() {
+        if (!this.localStream) {
+            return this._warn('No local media stream to publish.');
+        }
+        await this._publishTracks();
+    }
+    // /**
+    //  * Unpublishes a specific local media track (audio or video).
+    //  * @async
+    //  * @param {string} trackKind - The kind of track to unpublish ('audio' or 'video').
+    //  * @param {boolean} [force=false] - If true, forces track closure without renegotiation.
+    //  * @returns {Promise<Object>} Result object from the Cloudflare API.
+    //  * @throws {Error} If PeerConnection is not established or track is not found.
+    //  */
+    // // Todo: I don't think this method works
+    // async unpublishTrack(trackKind, force = false) {
+    //     if (!this.peerConnection) {
+    //         return this._warn('PeerConnection is not established.');
+    //     }
+    //
+    //     const sender = this.peerConnection.getSenders().find(s => s.track?.kind === trackKind);
+    //     if (!sender) {
+    //         return this._warn(`No ${trackKind} track found to unpublish.`);
+    //     }
+    //
+    //     const transceiver = this.peerConnection.getTransceivers().find(t => t.sender === sender);
+    //     if (!transceiver?.mid) {
+    //         throw new Error('Could not find transceiver mid for track');
+    //     }
+    //
+    //     try {
+    //         // Create an offer for the updated state
+    //         const offer = await this.peerConnection.createOffer();
+    //         await this.peerConnection.setLocalDescription(offer);
+    //
+    //         const unpublishUrl = `${this.backendUrl}/api/rooms/${this.roomId}/sessions/${this.sessionId}/unpublish`;
+    //         const response = await this._fetch(unpublishUrl, {
+    //             method: 'POST',
+    //             headers: { 'Content-Type': 'application/json' },
+    //             body: JSON.stringify({
+    //                 trackName: sender.track.id,
+    //                 mid: transceiver.mid,
+    //                 force,
+    //                 sessionDescription: {
+    //                     type: offer.type,
+    //                     sdp: offer.sdp
+    //                 }
+    //             })
+    //         });
+    //
+    //         if (!response || !response.ok) return false;
+    //         const result = await response.json();
+    //
+    //         // Stop the track
+    //         sender.track.stop();
+    //
+    //         // Remove from PeerConnection after server confirms
+    //         this.peerConnection.removeTrack(sender);
+    //
+    //         // Remove from our tracked set
+    //         this.publishedTracks.delete(sender.track.id);
+    //
+    //         return result;
+    //     } catch (error) {
+    //         this._warn(`Error unpublishing ${trackKind} track:`, error);
+    //         return false;
+    //     }
+    // }
+    /**
+     * Initiates renegotiation of the PeerConnection.
+     * @async
+     * @private
+     * @returns {Promise<void>}
+     */
+    async _renegotiate() {
+        if (!this.peerConnection) return;
+        if (this._renegotiateTimeout) {
+            clearTimeout(this._renegotiateTimeout);
+        }
+        this._renegotiateTimeout = setTimeout(async () => {
+            try {
+                this._log('Starting renegotiation process...');
+                const answer = await this.peerConnection.createAnswer();
+                this._log('Created renegotiation answer:', answer.sdp);
+                await this.peerConnection.setLocalDescription(answer);
+                const renegotiateUrl = `${this.backendUrl}/api/rooms/${this.roomId}/sessions/${this.sessionId}/renegotiate`;
+                const body = { sdp: answer.sdp, type: answer.type };
+                this._log(`Sending renegotiate request to ${renegotiateUrl} with body:`, body);
+                const response = await this._fetch(renegotiateUrl, {
+                    method: 'PUT',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(body)
+                }).then(r => r.json());
+                if (response.errorCode) {
+                    this._warn('Renegotiation failed:', response.errorDescription);
+                    return;
+                }
+                await this.peerConnection.setRemoteDescription(response.sessionDescription);
+                this._log('Renegotiation successful. Applied SFU response.');
+            } catch (error) {
+                this._error('Error during renegotiation:', error);
+            }
+        }, 500);
+    }
+    /**
+     * Updates the published media tracks.
+     * @async
+     * @returns {Promise<void>}
+     * @throws {Error} If the PeerConnection is not established.
+     */
+    // Todo: I don't know what this was supposed to accomplish
+    // Possibly unpublish and re-publish tracks to solve some lifecycle issue
+    async updatePublishedTracks() {
+        if (!this.peerConnection) {
+            return this._warn('PeerConnection is not established.');
+        }
+        // Remove existing senders
+        const senders = this.peerConnection.getSenders();
+        for (const sender of senders) {
+            this.peerConnection.removeTrack(sender);
+        }
+        // Add updated tracks
+        await this._publishTracks();
+    }
+    /**
+     * Publishes the local media tracks to the PeerConnection and server.
+     * @async
+     * @private
+     * @returns {Promise<void>}
+     */
+    async _publishTracks() {
+        if (!this.localStream || !this.peerConnection) return;
+        const transceivers = [];
+        for (const track of this.localStream.getTracks()) {
+            // Check if we've already published this track
+            if (this.publishedTracks.has(track.id)) continue;
+            if (track.readyState !== 'live') continue;
+            const tx = this.peerConnection.addTransceiver(track, { direction: 'sendonly' });
+            // Apply any pending quality settings to video tracks
+            if (this.pendingQualitySettings && track.kind === 'video') {
+                const params = tx.sender.getParameters();
+                params.encodings = [{
+                    maxBitrate: this.pendingQualitySettings.video.maxBitrate
+                }];
+                tx.sender.setParameters(params);
+            }
+            transceivers.push(tx);
+            this.publishedTracks.add(track.id);
+        }
+        if (transceivers.length === 0) return;  // No new tracks to publish
+        const offer = await this.peerConnection.createOffer();
+        this._log('SDP Offer:', offer.sdp);
+        await this.peerConnection.setLocalDescription(offer);
+        const trackInfos = transceivers.map(({ sender, mid }) => ({
+            location: 'local',
+            mid,
+            trackName: sender.track.id
+        }));
+        const body = {
+            offer: { sdp: offer.sdp, type: offer.type },
+            tracks: trackInfos,
+            metadata: this.userMetadata
+        };
+        const publishUrl = `${this.backendUrl}/api/rooms/${this.roomId}/sessions/${this.sessionId}/publish`;
+        const resp = await this._fetch(publishUrl, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(body)
+        }).then(r => r.json());
+        if (resp.errorCode) {
+            this._error('Publish error:', resp.errorDescription);
+            return;
+        }
+        // The SFU's answer
+        const answer = resp.sessionDescription;
+        await this.peerConnection.setRemoteDescription(answer);
+        this._log('Publish => success. Applied SFU answer.');
+    }
+    /**
+     * Pulls a specific track from a remote session.
+     * @async
+     * @private
+     * @param {string} remoteSessionId - The session ID of the remote participant.
+     * @param {string} trackName - The name of the track to pull.
+     * @returns {Promise<void>}
+     */
+    async _pullTracks(remoteSessionId, trackName) {
+        this._log(`Pulling track '${trackName}' from session ${remoteSessionId}`);
+        const pullUrl = `${this.backendUrl}/api/rooms/${this.roomId}/sessions/${this.sessionId}/pull`;
+        const body = { remoteSessionId, trackName };
+        const resp = await this._fetch(pullUrl, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(body)
+        }).then(r => r.json());
+        if (resp.errorCode) {
+            this._error('Pull error:', resp.errorDescription);
+            return;
+        }
+        if (resp.requiresImmediateRenegotiation) {
+            this._log('Pull => requires renegotiation');
+            // Set up both mappings from the SDP
+            const pendingMids = new Set();
+            resp.sessionDescription.sdp.split('\n').forEach(line => {
+                if (line.startsWith('a=mid:')) {
+                    const mid = line.split(':')[1].trim();
+                    pendingMids.add(mid);
+                    this.midToSessionId.set(mid, remoteSessionId);
+                    this.midToTrackName.set(mid, trackName);
+                    this._log('Pre-mapped MID:', {
+                        mid,
+                        sessionId: remoteSessionId,
+                        trackName
+                    });
+                }
+            });
+            // Now set the remote description
+            await this.peerConnection.setRemoteDescription(resp.sessionDescription);
+            // Create and set local answer
+            const localAnswer = await this.peerConnection.createAnswer();
+            await this.peerConnection.setLocalDescription(localAnswer);
+            // Verify mappings are still correct
+            const transceivers = this.peerConnection.getTransceivers();
+            transceivers.forEach(transceiver => {
+                if (transceiver.mid && pendingMids.has(transceiver.mid)) {
+                    this._log('Verified MID mapping:', {
+                        mid: transceiver.mid,
+                        sessionId: remoteSessionId,
+                        direction: transceiver.direction
+                    });
+                }
+            });
+            await this._fetch(`${this.backendUrl}/api/rooms/${this.roomId}/sessions/${this.sessionId}/renegotiate`, {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ sdp: localAnswer.sdp, type: localAnswer.type })
+            });
+        }
+        this._log(`Pulled trackName="${trackName}" from session ${remoteSessionId}`);
+        this._log('Current MID mappings:', Array.from(this.midToSessionId.entries()));
+        // Record the pulled track
+        if (!this.pulledTracks.has(remoteSessionId)) {
+            this.pulledTracks.set(remoteSessionId, new Set());
+        }
+        this.pulledTracks.get(remoteSessionId).add(trackName);
+    }
+    /************************************************
+     * PeerConnection & WebSocket
+     ***********************************************/
+    /**
+     * Creates and configures a new RTCPeerConnection.
+     * @async
+     * @private
+     * @returns {Promise<RTCPeerConnection>} The configured RTCPeerConnection instance.
+     */
+    async _attemptIceServersUpdate() {
+        let iceServers = [{ urls: 'stun:stun.cloudflare.com:3478' }];
+        try {
+            const response = await this._fetch(`${this.backendUrl}/api/ice-servers`);
+            if (!response.ok) {
+                this._warn(`Failed to fetch ICE servers: ${response.status} ${response.statusText}`);
+                return false;
+            }
+            const data = await response.json();
+            // Validate and process the fetched ICE servers
+            if (data.iceServers && Array.isArray(data.iceServers)) {
+                iceServers = data.iceServers.map(server => {
+                    // Ensure each server has the required fields
+                    const iceServer = { urls: server.urls };
+                    if (server.username && server.credential) {
+                        iceServer.username = server.username;
+                        iceServer.credential = server.credential;
+                    }
+                    return iceServer;
+                });
+                this._log('Fetched ICE servers:', iceServers);
+            } else {
+                return iceServers;
+            }
+        } catch (error) {
+            this._warn('Error fetching ICE servers:', error);
+            // Fallback to default ICE servers if fetching fails
+            return false;
+        }
+    }
+    async _createPeerConnection() {
+        let iceServers = await this._attemptIceServersUpdate() || [{ urls: 'stun:stun.cloudflare.com:3478' }];
+        const pc = new RTCPeerConnection({
+            iceServers: iceServers,
+            bundlePolicy: 'max-bundle',
+            sdpSemantics: 'unified-plan'
+        });
+        pc.onicecandidate = (evt) => {
+            if (evt.candidate) {
+                this._log('New ICE candidate:', evt.candidate.candidate);
+            } else {
+                this._log('All ICE candidates have been sent');
+            }
+        };
+        pc.oniceconnectionstatechange = () => {
+            this._log('ICE Connection State:', pc.iceConnectionState);
+            if (pc.iceConnectionState === 'disconnected' || pc.iceConnectionState === 'failed') {
+                this.leaveRoom();
+            }
+        };
+        pc.onconnectionstatechange = () => {
+            this._log('Connection State:', pc.connectionState);
+            if (pc.connectionState === 'connected') {
+                this._log('Peer connection fully established');
+            } else if (pc.connectionState === 'disconnected' || pc.connectionState === 'failed') {
+                this._log('Peer connection disconnected or failed');
+                this.leaveRoom();
+            }
+        };
+        pc.ontrack = (evt) => {
+            this._log('ontrack event:', {
+                kind: evt.track.kind,
+                webrtcTrackId: evt.track.id,
+                mid: evt.transceiver?.mid
+            });
+            if (this._onRemoteTrackCallback) {
+                const mid = evt.transceiver?.mid;
+                const sessionId = this.midToSessionId.get(mid);
+                const trackName = this.midToTrackName.get(mid);
+                this._log('Track mapping lookup:', {
+                    mid,
+                    sessionId,
+                    trackName,
+                    webrtcTrackId: evt.track.id,
+                    availableMappings: {
+                        sessions: Array.from(this.midToSessionId.entries()),
+                        tracks: Array.from(this.midToTrackName.entries())
+                    }
+                });
+                if (!sessionId) {
+                    this._warn('No sessionId found for mid:', mid);
+                    if (!this.pendingTracks) this.pendingTracks = [];
+                    this.pendingTracks.push({ evt, mid });
+                    return;
+                }
+                const wrappedTrack = evt.track;
+                wrappedTrack.sessionId = sessionId;
+                wrappedTrack.mid = mid;
+                wrappedTrack.trackName = trackName;
+                this._log('Sending track to callback:', {
+                    webrtcTrackId: wrappedTrack.id,
+                    trackName: wrappedTrack.trackName,
+                    sessionId: wrappedTrack.sessionId,
+                    mid: wrappedTrack.mid
+                });
+                this._onRemoteTrackCallback(wrappedTrack);
+            }
+        };
+        return pc;
+    }
+    /**
+     * Initializes the WebSocket connection.
+     * @async
+     * @private
+     * @returns {Promise<void>}
+     */
+    async _initWebSocket() {
+        if (this.ws && this.ws.readyState === WebSocket.OPEN) return;
+        return new Promise((resolve, reject) => {
+            this.ws = new WebSocket(this.websocketUrl);
+            this.ws.onopen = () => {
+                this._log('WebSocket open');
+                this.ws.send(JSON.stringify({
+                    type: 'join-websocket',
+                    payload: {
+                        roomId: this.roomId,
+                        userId: this.userId,
+                        token: this.token
+                    }
+                }));
+                resolve();
+            };
+            this.ws.onmessage = (event) => {
+                try {
+                    const message = JSON.parse(event.data);
+                    this._log('WebSocket message received:', message);
+                    // Handle specific message types
+                    switch (message.type) {
+                        case 'participant-joined':
+                    if (this._onParticipantJoinedCallback) {
+                                this._onParticipantJoinedCallback(message.payload);
+                            }
+                            break;
+                        case 'participant-left':
+                            if (this._onParticipantLeftCallback) {
+                                this._onParticipantLeftCallback(message.payload);
+                            }
+                            break;
+                        case 'track-published':
+                            if (this._onRemoteTrackCallback) {
+                                // Handle track published event
+                                this._onRemoteTrackCallback(message.payload);
+                            }
+                            break;
+                        case 'track-unpublished':
+                    if (this._onRemoteTrackUnpublishedCallback) {
+                                this._onRemoteTrackUnpublishedCallback(
+                                    message.payload.sessionId,
+                                    message.payload.trackName
+                                );
+                            }
+                            break;
+                        case 'track-status-changed':
+                            if (this._onTrackStatusChangedCallback) {
+                                this._onTrackStatusChangedCallback(message.payload);
+                            }
+                            break;
+                        case 'data-message':
+                    if (this._onDataMessageCallback) {
+                                this._onDataMessageCallback(message.payload);
+                            }
+                            break;
+                        case 'room-metadata-updated':
+                            if (this._onRoomMetadataUpdatedCallback) {
+                                this._onRoomMetadataUpdatedCallback(message.payload);
+                            }
+                            break;
+                        default:
+                            this._log('Unhandled message type:', message.type);
+                    }
+                    // Notify generic handlers
+                    this._wsMessageHandlers.forEach(handler => handler(message));
+                } catch (error) {
+                    this._error('Error processing WebSocket message:', error);
+                }
+            };
+            this.ws.onerror = (err) => {
+                this._error('WebSocket error:', err);
+                reject(err);
+            };
+            this.ws.onclose = () => {
+                this._log('WebSocket connection closed');
+            };
+        });
+    }
+    /************************************************
+     * Polling for New Tracks
+     ***********************************************/
+    /**
+     * Starts polling the server for new tracks every 10 seconds.
+     * @private
+     * @returns {void}
+     */
+    _startPolling() {
+        this.pollingInterval = setInterval(async () => {
+            if (!this.roomId) return;
+            try {
+                const resp = await this._fetch(`${this.backendUrl}/api/rooms/${this.roomId}/participants`)
+                    .then(r => r.json());
+                const participants = resp.participants || [];
+                for (const participant of participants) {
+                    const { sessionId, publishedTracks } = participant;
+                    if (sessionId === this.sessionId) continue; // Skip self
+                    if (!this.pulledTracks.has(sessionId)) {
+                        this.pulledTracks.set(sessionId, new Set());
+                    }
+                    for (const trackName of publishedTracks) {
+                        if (!this.pulledTracks.get(sessionId).has(trackName)) {
+                            this._log(`[Polling] New track detected: ${trackName} from session ${sessionId}`);
+                            await this._pullTracks(sessionId, trackName);
+                        }
+                    }
+                }
+            } catch (err) {
+                this._error('Polling error:', err);
+            }
+        }, 10000);
+    }
+    /************************************************
+     * Device Management
+     ***********************************************/
+    /**
+     * Retrieves the list of available media devices.
+     * @async
+     * @returns {Promise<Object>} An object containing arrays of audio input, video input, and audio output devices.
+     */
+    async getAvailableDevices() {
+        const devices = await navigator.mediaDevices.enumerateDevices();
+        this.availableAudioInputDevices = devices.filter(device => device.kind === 'audioinput');
+        this.availableVideoInputDevices = devices.filter(device => device.kind === 'videoinput');
+        this.availableAudioOutputDevices = devices.filter(device => device.kind === 'audiooutput');
+        return {
+            audioInput: this.availableAudioInputDevices,
+            videoInput: this.availableVideoInputDevices,
+            audioOutput: this.availableAudioOutputDevices
+        };
+    }
+    /**
+     * Selects a specific audio input device.
+     * @async
+     * @param {string} deviceId - The ID of the audio input device to select.
+     * @returns {Promise<void>}
+     */
+    async selectAudioInputDevice(deviceId) {
+        if (!deviceId) {
+            this._warn('No deviceId provided for audio input.');
+            return;
+        }
+        const constraints = {
+            audio: { deviceId: { exact: deviceId } },
+            video: false
+        };
+        try {
+            const newStream = await navigator.mediaDevices.getUserMedia(constraints);
+            const newAudioTrack = newStream.getAudioTracks()[0];
+            const sender = this.peerConnection.getSenders().find(s => s.track.kind === 'audio');
+            if (sender) {
+                sender.replaceTrack(newAudioTrack);
+                const oldTrack = sender.track;
+                oldTrack.stop();
+            } else {
+                this.localStream.addTrack(newAudioTrack);
+                await this._publishTracks();
+            }
+            this._log(`Switched to audio input device: ${deviceId}`);
+        } catch (error) {
+            this._error('Error switching audio input device:', error);
+        }
+    }
+    /**
+     * Selects a specific video input device.
+     * @async
+     * @param {string} deviceId - The ID of the video input device to select.
+     * @returns {Promise<void>}
+     */
+    async selectVideoInputDevice(deviceId) {
+        if (!deviceId) {
+            this._warn('No deviceId provided for video input.');
+            return;
+        }
+        const constraints = {
+            video: { deviceId: { exact: deviceId } },
+            audio: false
+        };
+        try {
+            const newStream = await navigator.mediaDevices.getUserMedia(constraints);
+            const newVideoTrack = newStream.getVideoTracks()[0];
+            const sender = this.peerConnection.getSenders().find(s => s.track.kind === 'video');
+            if (sender) {
+                sender.replaceTrack(newVideoTrack);
+                const oldTrack = sender.track;
+                oldTrack.stop();
+            } else {
+                this.localStream.addTrack(newVideoTrack);
+                await this._publishTracks();
+            }
+            this._log(`Switched to video input device: ${deviceId}`);
+        } catch (error) {
+            this._error('Error switching video input device:', error);
+        }
+    }
+    /**
+     * Selects a specific audio output device.
+     * @async
+     * @param {string} deviceId - The ID of the audio output device to select.
+     * @returns {Promise<void>}
+     */
+    async selectAudioOutputDevice(deviceId) {
+        if (!deviceId) {
+            this._warn('No deviceId provided for audio output.');
+            return;
+        }
+        try {
+            const audioElements = document.querySelectorAll('audio');
+            for (const audio of audioElements) {
+                await audio.setSinkId(deviceId);
+            }
+            this.currentAudioOutputDeviceId = deviceId;
+            this._log(`Switched to audio output device: ${deviceId}`);
+        } catch (error) {
+            this._error('Error switching audio output device:', error);
+        }
+    }
+    /**
+     * Previews media streams with specified device IDs.
+     * @async
+     * @param {Object} params - Parameters for media preview.
+     * @param {string} [params.audioDeviceId] - The ID of the audio input device to use.
+     * @param {string} [params.videoDeviceId] - The ID of the video input device to use.
+     * @param {HTMLMediaElement} [previewElement=null] - The media element to display the preview.
+     * @returns {Promise<MediaStream>} The media stream being previewed.
+     * @throws {Error} If there is an issue accessing the media devices.
+     */
+    async previewMedia({ audioDeviceId, videoDeviceId }, previewElement = null) {
+        const constraints = {
+            audio: audioDeviceId ? { deviceId: { exact: audioDeviceId } } : false,
+            video: videoDeviceId ? { deviceId: { exact: videoDeviceId } } : false
+        };
+        try {
+            const stream = await navigator.mediaDevices.getUserMedia(constraints);
+            if (previewElement) {
+                previewElement.srcObject = stream;
+            }
+            return stream;
+        } catch (error) {
+            this._error('Error previewing media:', error);
+            throw error;
+        }
+    }
+    /************************************************
+     * Media Controls
+     ***********************************************/
+    /**
+     * Toggles the enabled state of video and/or audio tracks.
+     * @param {Object} options - Options to toggle media tracks.
+     * @param {boolean} [options.video=null] - Whether to toggle video tracks.
+     * @param {boolean} [options.audio=null] - Whether to toggle audio tracks.
+     * @returns {void}
+     */
+    toggleMedia({ video = null, audio = null }) {
+        if (!this.localStream) return;
+        if (video !== null) {
+            const videoTracks = this.localStream.getVideoTracks();
+            videoTracks.forEach(track => {
+                track.enabled = video;
+                // Find the corresponding sender and update the track status
+                const sender = this.peerConnection?.getSenders().find(s => s.track === track);
+                if (sender) {
+                    // Send track status update to SFU
+                    this._updateTrackStatus(sender.track.id, 'video', video);
+                }
+            });
+        }
+        if (audio !== null) {
+            const audioTracks = this.localStream.getAudioTracks();
+            audioTracks.forEach(track => {
+                track.enabled = audio;
+                // Find the corresponding sender and update the track status
+                const sender = this.peerConnection?.getSenders().find(s => s.track === track);
+                if (sender) {
+                    // Send track status update to SFU
+                    this._updateTrackStatus(sender.track.id, 'audio', audio);
+                }
+            });
+        }
+    }
+    /**
+     * Starts screen sharing.
+     * @async
+     * @returns {Promise<void>}
+     */
+    async shareScreen() {
+        try {
+            // Stop any existing video tracks (Todo: breaks the addTrack)
+            await this.unpublishAllTracks('video');
+            const screenStream = await navigator.mediaDevices.getDisplayMedia({
+                video: true,
+                audio: false  // Most browsers don't support screen audio yet
+            });
+            const screenTrack = screenStream.getVideoTracks()[0];
+            // Add the new screen track
+            this.localStream.addTrack(screenTrack);
+            // Publish the new track
+            await this._publishTracks();
+            // Handle the user stopping screen share
+            screenTrack.onended = async () => {
+                await this.unpublishAllTracks();
+                await this._cleanupEndedTracks();
+                this.localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
+                this._log('Re-acquired local media');
+                await this._publishTracks();
+            };
+        } catch (err) {
+            this._error('Error sharing screen:', err);
+            throw err;
+        }
+    }
+    /************************************************
+     * WebSocket-Based Data Communication
+     ***********************************************/
+    /**
+     * Internal method to send a message via WebSocket.
+     * @private
+     * @param {Object} data - The data object to send.
+     * @returns {void}
+     */
+    _sendWebSocketMessage(data) {
+        if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
+            this._warn('WebSocket is not open. Cannot send message.');
+            return;
+        }
+        this.ws.send(JSON.stringify(data));
+        this._log('Sent WebSocket message:', data);
+    }
+    /************************************************
+     * Participant Management
+     ***********************************************/
+    /**
+     * Lists all participants currently in the room.
+     * @async
+     * @returns {Promise<Array<Object>>} An array of participant objects.
+     * @throws {Error} If not connected to any room.
+     */
+    async listParticipants() {
+        if (!this.roomId) {
+            return this._warn('Not connected to any room.');
+        }
+        const resp = await this._fetch(`${this.backendUrl}/api/rooms/${this.roomId}/participants`)
+            .then(r => r.json());
+        return resp.participants || [];
+    }
+    /************************************************
+     * Helpers & Placeholders
+     ***********************************************/
+    /**
+     * Generates a simple UUID.
+     * @private
+     * @returns {string} A generated UUID string.
+     */
+    _generateUUID() {
+        // Simple placeholder generator
+        return 'xxxx-xxxx-xxxx-xxxx'.replace(/[x]/g, () =>
+            ((Math.random() * 16) | 0).toString(16)
+        );
+    }
+    /**
+     * Unpublishes all currently published tracks (with filters for type)
+     * @async
+     * @param {string} trackKind - The kind of track to unpublish ('audio' or 'video').
+     * @param {boolean} [force=false] - If true, forces track closure without renegotiation.
+     * @returns {Promise<void>}
+     */
+    async unpublishAllTracks(trackKind, force = false) {
+        if (!this.peerConnection) {
+            this._warn('PeerConnection is not established.');
+            return;
+        }
+        let senders = this.peerConnection.getSenders();
+        if (trackKind) {
+            senders = senders.filter(s => s.track && s.track.kind === trackKind);
+        }
+        this._log('Unpublishing all tracks:', senders.length);
+        // Create an offer for the updated state
+        const offer = await this.peerConnection.createOffer();
+        await this.peerConnection.setLocalDescription(offer);
+        for (const sender of senders) {
+            if (sender.track) {
+                try {
+                    const trackId = sender.track.id;
+                    const transceiver = this.peerConnection.getTransceivers().find(t => t.sender === sender);
+                    const mid = transceiver ? transceiver.mid : null;
+                    this._log('Unpublishing track:', { trackId, mid });
+                    if (!mid) {
+                        this._warn('No mid found for track:', trackId);
+                        continue;
+                    }
+                    // Stop the track first
+                    sender.track.stop();
+                    // Notify server
+                    await this._fetch(`${this.backendUrl}/api/rooms/${this.roomId}/sessions/${this.sessionId}/unpublish`, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({
+                            trackName: trackId,
+                            mid: mid,
+                            force,
+                            sessionDescription: {
+                                type: offer.type,
+                                sdp: offer.sdp
+                            }
+                        })
+                    });
+                    // Remove from PeerConnection after server confirms
+                    this.peerConnection.removeTrack(sender);
+                    // Remove from our tracked set
+                    this.publishedTracks.delete(trackId);
+                    // Since we're unpublishing we need to stop local streams
+                    await this._cleanupEndedTracks();
+                    this._log(`Successfully unpublished track: ${trackId}`);
+                } catch (error) {
+                    this._error(`Error unpublishing track:`, error);
+                }
+            }
+        }
+    }
+    /**
+     * Gets the session state
+     * @async
+     * @returns {Promise<Object>} The session state
+     */
+    async getSessionState() {
+        if (!this.sessionId) {
+            return this._warn('No active session');
+        }
+        try {
+            const response = await this._fetch(`${this.backendUrl}/api/rooms/${this.roomId}/sessions/${this.sessionId}/state`);
+            const state = await response.json();
+            // Store track states internally
+            if (state.tracks) {
+                this.trackStates = new Map(
+                    state.tracks.map(track => [track.trackName, track.status])
+                );
+            }
+            return state;
+        } catch (error) {
+            this._error('Error getting session state:', error);
+            throw error;
+        }
+    }
+    /**
+     * Gets the track status
+     * @async
+     * @param {string} trackName - The track name
+     * @returns {Promise<string>} The track status
+     */
+    async getTrackStatus(trackName) {
+        const state = await this.getSessionState();
+        return state.tracks.find(t => t.trackName === trackName)?.status;
+    }
+    /**
+     * Updates the track status
+     * @async
+     * @private
+     * @param {string} trackId - The track ID
+     * @param {string} kind - The track kind
+     * @param {boolean} enabled - Whether the track is enabled
+     * @returns {Promise<Object>} The updated track status
+     */
+    async _updateTrackStatus(trackId, kind, enabled) {
+        try {
+            const updateUrl = `${this.backendUrl}/api/rooms/${this.roomId}/sessions/${this.sessionId}/track-status`;
+            const response = await this._fetch(updateUrl, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    trackId,
+                    kind,
+                    enabled,
+                    force: false // Allow proper renegotiation
+                })
+            });
+            const result = await response.json();
+        if (result.errorCode) {
+                throw new Error(result.errorDescription || 'Unknown error updating track status');
+            }
+            // If renegotiation is needed, handle it
+            if (result.requiresImmediateRenegotiation) {
+                await this._renegotiate();
+            }
+            if (!result.errorCode) {
+                this._updateTrackState(trackId, enabled ? 'enabled' : 'disabled');
+            }
+            return result;
+        } catch (error) {
+            this._error(`Error updating track status:`, error);
+            throw error;
+        }
+    }
+    /**
+     * Handles errors
+     * @private
+     * @param {Object} response - The response object
+     * @returns {Object} The response object
+     */
+    _handleError(response) {
+        if (response.errorCode) {
+            const error = new Error(response.errorDescription || 'Unknown error');
+            error.code = response.errorCode;
+            throw error;
+        }
+        return response;
+    }
+    /**
+     * Gets information about a user
+     * @async
+     * @param {string} [userId] - Optional user ID. If omitted, returns current user's info
+     * @returns {Promise<Object>} User information including moderator status
+     */
+    async getUserInfo(userId = null) {
+        try {
+            const response = await this._fetch(
+                `${this.backendUrl}/api/users/${userId || 'me'}`
+            );
+            return await response.json();
+        } catch (error) {
+            this._error('Error getting user info:', error);
+            throw error;
+        }
+    }
+    /**
+     * Handles WebSocket messages
+     * @private
+     * @param {MessageEvent} event - The WebSocket message event
+     * @returns {void}
+     */
+    _handleWebSocketMessage(event) {
+        try {
+            const message = JSON.parse(event.data);
+            this._log('WebSocket message received:', message);
+            // First, notify generic handlers
+            this._wsMessageHandlers.forEach(handler => {
+                try {
+                    handler(message);
+                } catch (err) {
+                    this._error('Error in WebSocket message handler:', err);
+                }
+            });
+            // Then handle specific message types
+            switch (message.type) {
+                case 'participant-joined':
+                    if (this._onParticipantJoinedCallback) {
+                        this._onParticipantJoinedCallback(message.payload);
+                    }
+                    break;
+                case 'participant-left':
+                    if (this._onParticipantLeftCallback) {
+                        this._onParticipantLeftCallback(message.payload.sessionId);
+                    }
+                    break;
+                case 'track-published':
+                    if (this._onRemoteTrackCallback) {
+                        // Handle track published event
+                        this._onRemoteTrackCallback(message.payload);
+                    }
+                    break;
+                case 'track-unpublished':
+                    if (this._onRemoteTrackUnpublishedCallback) {
+                        this._onRemoteTrackUnpublishedCallback(
+                            message.payload.sessionId,
+                            message.payload.trackName
+                        );
+                    }
+                    break;
+                case 'track-status-changed':
+                    if (this._onTrackStatusChangedCallback) {
+                        this._onTrackStatusChangedCallback(message.payload);
+                    }
+                    break;
+                case 'data-message':
+                    if (this._onDataMessageCallback) {
+                        this._onDataMessageCallback(message.payload);
+                    }
+                    break;
+                case 'room-metadata-updated':
+                    if (this._onRoomMetadataUpdatedCallback) {
+                        this._onRoomMetadataUpdatedCallback(message.payload);
+                    }
+                    break;
+                default:
+                    this._log('Unhandled message type:', message.type);
+            }
+        } catch (error) {
+            this._error('Error handling WebSocket message:', error);
+        }
+    }
+    /**
+     * Updates track state in internal tracking
+     * @private
+     * @param {string} trackName - The track name
+     * @param {string} status - The new status
+     */
+    _updateTrackState(trackName, status) {
+        if (!this.trackStates) {
+            this.trackStates = new Map();
+        }
+        this.trackStates.set(trackName, status);
+    }
+    /**
+     * Lists all available rooms.
+     * @async
+     * @returns {Promise<Array>} List of rooms
+     */
+    async listRooms() {
+        const resp = await this._fetch(`${this.backendUrl}/api/rooms`)
+            .then(r => r.json());
+        return resp.rooms;
+    }
+    /**
+     * Updates room metadata.
+     * @async
+     * @param {Object} updates Metadata updates
+     * @param {string} [updates.name] New room name
+     * @param {Object} [updates.metadata] New room metadata
+     * @returns {Promise<Object>} Updated room information
+     */
+    async updateRoomMetadata(updates) {
+        if (!this.roomId) {
+            return this._warn('Not connected to any room');
+        }
+        return await this._fetch(`${this.backendUrl}/api/rooms/${this.roomId}/metadata`, {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(updates)
+        }).then(r => r.json());
+    }
+    /**
+     * Send a data message to all participants in the room via WebSocket.
+     * @param {Object} data - The JSON object to send.
+     * @returns {void}
+     */
+    async sendDataToAll(data) {
+        if (!this.roomId || !this.sessionId) {
+            throw new Error('Must be in a room to send data');
+        }
+        // Send via WebSocket instead of HTTP
+        if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+            this.ws.send(JSON.stringify({
+                type: 'data-message',
+                payload: {
+                    from: this.sessionId,
+                    message: data
+                }
+            }));
+        } else {
+            throw new Error('WebSocket connection not available');
+        }
+    }
+    /**
+     * Sets the media quality for audio and video tracks
+     * @param {string|QualityPreset} quality - Either a preset name ('high', 'medium', 'low') or a custom quality object
+     * @param {VideoQualitySettings} [quality.video] - Video quality settings
+     * @param {AudioQualitySettings} [quality.audio] - Audio quality settings
+     * @throws {Error} If preset name is invalid
+     */
+    setMediaQuality(quality) {
+        // If quality is a string, use the preset
+        if (typeof quality === 'string') {
+            const preset = CloudflareCalls.QUALITY_PRESETS[quality];
+            if (!preset) {
+                return this._warn(`Unknown quality preset: ${quality}`);
+            }
+            this.mediaQuality = quality;
+            quality = preset;
+        }
+        this.mediaQuality = {
+            video: { ...this.mediaQuality.video, ...quality.video },
+            audio: { ...this.mediaQuality.audio, ...quality.audio }
+        };
+        // Store settings to apply to future tracks
+        this.pendingQualitySettings = this.mediaQuality;
+        // If we're already in a call, update existing tracks
+        if (this.peerConnection) {
+            this._applyQualitySettings();
+        }
+    }
+    /**
+     * Applies quality settings to all tracks
+     * @private
+     */
+    async _applyQualitySettings() {
+        if (!this.peerConnection) return;
+        const senders = this.peerConnection.getSenders();
+        for (const sender of senders) {
+            if (!sender.track) continue;
+            const params = sender.getParameters();
+            if (!params.encodings) {
+                params.encodings = [{}];
+            }
+            const kind = sender.track.kind;
+            const qualitySettings = this.mediaQuality[kind];
+            // Update bitrate
+            if (qualitySettings.maxBitrate) {
+                params.encodings[0].maxBitrate = qualitySettings.maxBitrate;
+            }
+            // Update resolution/framerate for video
+            if (kind === 'video') {
+                const constraints = {
+                    width: qualitySettings.width,
+                    height: qualitySettings.height,
+                    frameRate: qualitySettings.frameRate
+                };
+                await sender.track.applyConstraints(constraints);
+            }
+            await sender.setParameters(params);
+        }
+    }
+    /**
+     * Start monitoring connection statistics
+     * @param {number} [interval=1000] - How often to gather stats in milliseconds
+     */
+    startStatsMonitoring(interval = 1000) {
+        if (this.statsMonitoringState === 'monitoring') return;
+        this.statsMonitoringState = 'monitoring';
+        this.statsInterval = setInterval(async () => {
+            if (!this.peerConnection) return;
+            const stats = await this._gatherConnectionStats();
+            const streamStats = await this._gatherStreamStats();
+            if (this._onConnectionStatsCallback) {
+                this._onConnectionStatsCallback(stats, streamStats);
+            }
+        }, interval);
+    }
+    /**
+     * Stop monitoring connection statistics
+     */
+    stopStatsMonitoring() {
+        if (this.statsInterval) {
+            clearInterval(this.statsInterval);
+            this.statsInterval = null;
+// +           this.previousStats = null;  // Clear previous stats
+        }
+        this.statsMonitoringState = 'stopped';
+    }
+    /**
+     * Register a callback to receive connection statistics
+     * @param {function(ConnectionStats): void} callback - Function to receive stats updates
+     */
+    onConnectionStats(callback) {
+        this._onConnectionStatsCallback = callback;
+    }
+    /**
+     * Gather current connection statistics
+     * @private
+     * @returns {Promise<ConnectionStats>} Current connection statistics
+     */
+    async _gatherConnectionStats() {
+        if (!this.peerConnection) {
+            return this._warn('No active connection');
+        }
+        const stats = await this.peerConnection.getStats();
+        const result = {
+            outbound: {
+                bitrate: 0,
+                packetLoss: 0,
+                qualityLimitation: 'none'
+            },
+            inbound: {
+                bitrate: 0,
+                packetLoss: 0,
+                jitter: 0
+            },
+            connection: {
+                roundTripTime: 0,
+                state: this.peerConnection.connectionState
+            }
+        };
+        let outboundStats = null;
+        let inboundStats = null;
+        // Process each stat
+        stats.forEach(stat => {
+            switch (stat.type) {
+                case 'outbound-rtp':
+                    if (stat.kind === 'video') {
+                        outboundStats = stat;
+                        result.outbound.qualityLimitation = stat.qualityLimitationReason;
+                    }
+                    break;
+                case 'inbound-rtp':
+                    if (stat.kind === 'video') {
+                        inboundStats = stat;
+                        result.inbound.jitter = stat.jitter;
+                        if (stat.packetsLost > 0) {
+                            result.inbound.packetLoss =
+                                (stat.packetsLost / (stat.packetsReceived + stat.packetsLost)) * 100;
+                        }
+                    }
+                    break;
+                case 'candidate-pair':
+                    if (stat.state === 'succeeded') {
+                        result.connection.roundTripTime = stat.currentRoundTripTime;
+                    }
+                    break;
+            }
+        });
+        // Calculate bitrates using previous stats
+        if (this.previousStats && outboundStats && inboundStats) {
+            const timeDelta = (outboundStats.timestamp - this.previousStats.outboundTimestamp) / 1000;  // Convert to seconds
+            if (timeDelta > 0) {
+                // Calculate outbound bitrate
+                const bytesSentDelta = outboundStats.bytesSent - this.previousStats.bytesSent;
+                result.outbound.bitrate = (bytesSentDelta * 8) / timeDelta;  // Convert to bits per second
+                // Calculate inbound bitrate
+                const bytesReceivedDelta = inboundStats.bytesReceived - this.previousStats.bytesReceived;
+                result.inbound.bitrate = (bytesReceivedDelta * 8) / timeDelta;  // Convert to bits per second
+            }
+        }
+        // Store current stats for next calculation
+        if (outboundStats && inboundStats) {
+            this.previousStats = {
+                outboundTimestamp: outboundStats.timestamp,
+                bytesSent: outboundStats.bytesSent,
+                bytesReceived: inboundStats.bytesReceived
+            };
+        }
+        return result;
+    }
+    /**
+     * Get a snapshot of current connection statistics
+     * @returns {Promise<ConnectionStats>} Current connection statistics
+     */
+    async getConnectionStats() {
+        return this._gatherConnectionStats();
+    }
+    /**
+     * Gather current connection statistics per stream
+     * @private
+     * @returns {Promise<Map<string, StreamStats>>} Map of session IDs to stream stats
+     */
+    async _gatherStreamStats() {
+        if (!this.peerConnection) return new Map();
+        const stats = await this.peerConnection.getStats();
+        const streamStats = new Map();
+        // Initialize local stats
+        if (this.sessionId) {
+            streamStats.set(this.sessionId, {
+                sessionId: this.sessionId,
+                packetLoss: 0,
+                qualityLimitation: 'none',
+                bitrate: 0
+            });
+        }
+        stats.forEach(stat => {
+            if (stat.type === 'outbound-rtp' && stat.kind === 'video') {
+                // Update local stream stats
+                const localStats = streamStats.get(this.sessionId);
+                if (localStats) {
+                    localStats.qualityLimitation = stat.qualityLimitationReason;
+                    localStats.bitrate = stat.bytesSent * 8 / stat.timestamp;
+                }
+            }
+            else if (stat.type === 'inbound-rtp' && stat.kind === 'video') {
+                // Get sessionId from mid mapping
+                const mid = stat.mid;
+                const sessionId = this.midToSessionId.get(mid);
+                if (sessionId) {
+                    streamStats.set(sessionId, {
+                        sessionId,
+                        packetLoss: stat.packetsLost > 0
+                            ? (stat.packetsLost / (stat.packetsReceived + stat.packetsLost)) * 100
+                            : 0,
+                        qualityLimitation: 'none',
+                        bitrate: stat.bytesReceived * 8 / stat.timestamp
+                    });
+                }
+            }
+        });
+        return streamStats;
+    }
+    // Add static QUALITY_PRESETS
+    static QUALITY_PRESETS = {
+        // 16:9 Presets
+        high_16x9_xl: {  // 1080p
+            video: {
+                width: { ideal: 1920 },
+                height: { ideal: 1080 },
+                frameRate: { ideal: 30 },
+                maxBitrate: 2_500_000
+            },
+            audio: { maxBitrate: 128000, sampleRate: 48000, channelCount: 2 }
+        },
+        high_16x9_lg: {  // 720p
+            video: {
+                width: { ideal: 1280 },
+                height: { ideal: 720 },
+                frameRate: { ideal: 30 },
+                maxBitrate: 1_500_000
+            },
+            audio: { maxBitrate: 96000, sampleRate: 48000, channelCount: 2 }
+        },
+        high_16x9_md: {  // 480p
+            video: {
+                width: { ideal: 854 },
+                height: { ideal: 480 },
+                frameRate: { ideal: 30 },
+                maxBitrate: 800_000
+            },
+            audio: { maxBitrate: 96000, sampleRate: 48000, channelCount: 1 }
+        },
+        high_16x9_sm: {  // 360p
+            video: {
+                width: { ideal: 640 },
+                height: { ideal: 360 },
+                frameRate: { ideal: 30 },
+                maxBitrate: 600_000
+            },
+            audio: { maxBitrate: 64000, sampleRate: 44100, channelCount: 1 }
+        },
+        high_16x9_xs: {  // 270p
+            video: {
+                width: { ideal: 480 },
+                height: { ideal: 270 },
+                frameRate: { ideal: 30 },
+                maxBitrate: 400_000
+            },
+            audio: { maxBitrate: 64000, sampleRate: 44100, channelCount: 1 }
+        },
+        // 16:9 Medium Quality Presets (reduced framerate & bitrate)
+        medium_16x9_xl: {
+            video: {
+                width: { ideal: 1920 },
+                height: { ideal: 1080 },
+                frameRate: { ideal: 24 },
+                maxBitrate: 2_000_000
+            },
+            audio: { maxBitrate: 96000, sampleRate: 48000, channelCount: 2 }
+        },
+        medium_16x9_lg: {
+            video: {
+                width: { ideal: 1280 },
+                height: { ideal: 720 },
+                frameRate: { ideal: 24 },
+                maxBitrate: 1_200_000
+            },
+            audio: { maxBitrate: 96000, sampleRate: 48000, channelCount: 1 }
+        },
+        medium_16x9_md: {
+            video: {
+                width: { ideal: 854 },
+                height: { ideal: 480 },
+                frameRate: { ideal: 24 },
+                maxBitrate: 600_000
+            },
+            audio: { maxBitrate: 64000, sampleRate: 44100, channelCount: 1 }
+        },
+        medium_16x9_sm: {
+            video: {
+                width: { ideal: 640 },
+                height: { ideal: 360 },
+                frameRate: { ideal: 20 },
+                maxBitrate: 400_000
+            },
+            audio: { maxBitrate: 48000, sampleRate: 44100, channelCount: 1 }
+        },
+        medium_16x9_xs: {
+            video: {
+                width: { ideal: 480 },
+                height: { ideal: 270 },
+                frameRate: { ideal: 20 },
+                maxBitrate: 300_000
+            },
+            audio: { maxBitrate: 48000, sampleRate: 44100, channelCount: 1 }
+        },
+        // 16:9 Low Quality Presets (minimum viable quality)
+        low_16x9_xl: {
+            video: {
+                width: { ideal: 1920 },
+                height: { ideal: 1080 },
+                frameRate: { ideal: 15 },
+                maxBitrate: 1_500_000
+            },
+            audio: { maxBitrate: 64000, sampleRate: 44100, channelCount: 1 }
+        },
+        low_16x9_lg: {
+            video: {
+                width: { ideal: 1280 },
+                height: { ideal: 720 },
+                frameRate: { ideal: 15 },
+                maxBitrate: 800_000
+            },
+            audio: { maxBitrate: 48000, sampleRate: 44100, channelCount: 1 }
+        },
+        low_16x9_md: {
+            video: {
+                width: { ideal: 854 },
+                height: { ideal: 480 },
+                frameRate: { ideal: 15 },
+                maxBitrate: 400_000
+            },
+            audio: { maxBitrate: 32000, sampleRate: 44100, channelCount: 1 }
+        },
+        low_16x9_sm: {
+            video: {
+                width: { ideal: 640 },
+                height: { ideal: 360 },
+                frameRate: { ideal: 12 },
+                maxBitrate: 250_000
+            },
+            audio: { maxBitrate: 32000, sampleRate: 22050, channelCount: 1 }
+        },
+        low_16x9_xs: {
+            video: {
+                width: { ideal: 480 },
+                height: { ideal: 270 },
+                frameRate: { ideal: 10 },
+                maxBitrate: 150_000
+            },
+            audio: { maxBitrate: 24000, sampleRate: 22050, channelCount: 1 }
+        },
+        // 4:3 High Quality Presets (existing)
+        high_4x3_xl: {  // 960x720
+            video: {
+                width: { ideal: 960 },
+                height: { ideal: 720 },
+                frameRate: { ideal: 30 },
+                maxBitrate: 1_500_000
+            },
+            audio: { maxBitrate: 128000, sampleRate: 48000, channelCount: 2 }
+        },
+        high_4x3_lg: {  // 640x480
+            video: {
+                width: { ideal: 640 },
+                height: { ideal: 480 },
+                frameRate: { ideal: 30 },
+                maxBitrate: 800_000
+            },
+            audio: { maxBitrate: 96000, sampleRate: 48000, channelCount: 1 }
+        },
+        high_4x3_md: {  // 480x360
+            video: {
+                width: { ideal: 480 },
+                height: { ideal: 360 },
+                frameRate: { ideal: 30 },
+                maxBitrate: 600_000
+            },
+            audio: { maxBitrate: 96000, sampleRate: 44100, channelCount: 1 }
+        },
+        high_4x3_sm: {  // 320x240
+            video: {
+                width: { ideal: 320 },
+                height: { ideal: 240 },
+                frameRate: { ideal: 30 },
+                maxBitrate: 400_000
+            },
+            audio: { maxBitrate: 64000, sampleRate: 44100, channelCount: 1 }
+        },
+        high_4x3_xs: {  // 240x180 (perfect for 300x225 container)
+            video: {
+                width: { ideal: 240 },
+                height: { ideal: 180 },
+                frameRate: { ideal: 30 },
+                maxBitrate: 250_000
+            },
+            audio: { maxBitrate: 64000, sampleRate: 44100, channelCount: 1 }
+        },
+        // 4:3 Medium Quality Presets
+        medium_4x3_xl: {
+            video: {
+                width: { ideal: 960 },
+                height: { ideal: 720 },
+                frameRate: { ideal: 24 },
+                maxBitrate: 1_200_000
+            },
+            audio: { maxBitrate: 96000, sampleRate: 48000, channelCount: 1 }
+        },
+        medium_4x3_lg: {
+            video: {
+                width: { ideal: 640 },
+                height: { ideal: 480 },
+                frameRate: { ideal: 24 },
+                maxBitrate: 600_000
+            },
+            audio: { maxBitrate: 64000, sampleRate: 44100, channelCount: 1 }
+        },
+        medium_4x3_md: {
+            video: {
+                width: { ideal: 480 },
+                height: { ideal: 360 },
+                frameRate: { ideal: 20 },
+                maxBitrate: 400_000
+            },
+            audio: { maxBitrate: 48000, sampleRate: 44100, channelCount: 1 }
+        },
+        medium_4x3_sm: {
+            video: {
+                width: { ideal: 320 },
+                height: { ideal: 240 },
+                frameRate: { ideal: 20 },
+                maxBitrate: 300_000
+            },
+            audio: { maxBitrate: 48000, sampleRate: 44100, channelCount: 1 }
+        },
+        medium_4x3_xs: {
+            video: {
+                width: { ideal: 240 },
+                height: { ideal: 180 },
+                frameRate: { ideal: 20 },
+                maxBitrate: 200_000
+            },
+            audio: { maxBitrate: 48000, sampleRate: 44100, channelCount: 1 }
+        },
+        // 4:3 Low Quality Presets
+        low_4x3_xl: {
+            video: {
+                width: { ideal: 960 },
+                height: { ideal: 720 },
+                frameRate: { ideal: 15 },
+                maxBitrate: 800_000
+            },
+            audio: { maxBitrate: 48000, sampleRate: 44100, channelCount: 1 }
+        },
+        low_4x3_lg: {
+            video: {
+                width: { ideal: 640 },
+                height: { ideal: 480 },
+                frameRate: { ideal: 15 },
+                maxBitrate: 400_000
+            },
+            audio: { maxBitrate: 32000, sampleRate: 44100, channelCount: 1 }
+        },
+        low_4x3_md: {
+            video: {
+                width: { ideal: 480 },
+                height: { ideal: 360 },
+                frameRate: { ideal: 12 },
+                maxBitrate: 250_000
+            },
+            audio: { maxBitrate: 32000, sampleRate: 22050, channelCount: 1 }
+        },
+        low_4x3_sm: {
+            video: {
+                width: { ideal: 320 },
+                height: { ideal: 240 },
+                frameRate: { ideal: 10 },
+                maxBitrate: 150_000
+            },
+            audio: { maxBitrate: 24000, sampleRate: 22050, channelCount: 1 }
+        },
+        low_4x3_xs: {
+            video: {
+                width: { ideal: 240 },
+                height: { ideal: 180 },
+                frameRate: { ideal: 10 },
+                maxBitrate: 100_000
+            },
+            audio: { maxBitrate: 24000, sampleRate: 22050, channelCount: 1 }
+        },
+        // 1:1 High Quality Presets
+        high_1x1_xl: {  // 720x720
+            video: {
+                width: { ideal: 720 },
+                height: { ideal: 720 },
+                frameRate: { ideal: 30 },
+                maxBitrate: 1_500_000
+            },
+            audio: { maxBitrate: 128000, sampleRate: 48000, channelCount: 2 }
+        },
+        high_1x1_lg: {  // 480x480
+            video: {
+                width: { ideal: 480 },
+                height: { ideal: 480 },
+                frameRate: { ideal: 30 },
+                maxBitrate: 800_000
+            },
+            audio: { maxBitrate: 96000, sampleRate: 48000, channelCount: 1 }
+        },
+        high_1x1_md: {  // 360x360
+            video: {
+                width: { ideal: 360 },
+                height: { ideal: 360 },
+                frameRate: { ideal: 30 },
+                maxBitrate: 600_000
+            },
+            audio: { maxBitrate: 96000, sampleRate: 44100, channelCount: 1 }
+        },
+        high_1x1_sm: {  // 240x240
+            video: {
+                width: { ideal: 240 },
+                height: { ideal: 240 },
+                frameRate: { ideal: 30 },
+                maxBitrate: 400_000
+            },
+            audio: { maxBitrate: 64000, sampleRate: 44100, channelCount: 1 }
+        },
+        high_1x1_xs: {  // 180x180
+            video: {
+                width: { ideal: 180 },
+                height: { ideal: 180 },
+                frameRate: { ideal: 30 },
+                maxBitrate: 250_000
+            },
+            audio: { maxBitrate: 64000, sampleRate: 44100, channelCount: 1 }
+        },
+        // 1:1 Medium Quality Presets
+        medium_1x1_xl: {
+            video: {
+                width: { ideal: 720 },
+                height: { ideal: 720 },
+                frameRate: { ideal: 24 },
+                maxBitrate: 1_200_000
+            },
+            audio: { maxBitrate: 96000, sampleRate: 48000, channelCount: 1 }
+        },
+        medium_1x1_lg: {
+            video: {
+                width: { ideal: 480 },
+                height: { ideal: 480 },
+                frameRate: { ideal: 24 },
+                maxBitrate: 600_000
+            },
+            audio: { maxBitrate: 64000, sampleRate: 44100, channelCount: 1 }
+        },
+        medium_1x1_md: {
+            video: {
+                width: { ideal: 360 },
+                height: { ideal: 360 },
+                frameRate: { ideal: 20 },
+                maxBitrate: 400_000
+            },
+            audio: { maxBitrate: 48000, sampleRate: 44100, channelCount: 1 }
+        },
+        medium_1x1_sm: {
+            video: {
+                width: { ideal: 240 },
+                height: { ideal: 240 },
+                frameRate: { ideal: 20 },
+                maxBitrate: 300_000
+            },
+            audio: { maxBitrate: 48000, sampleRate: 44100, channelCount: 1 }
+        },
+        medium_1x1_xs: {
+            video: {
+                width: { ideal: 180 },
+                height: { ideal: 180 },
+                frameRate: { ideal: 20 },
+                maxBitrate: 200_000
+            },
+            audio: { maxBitrate: 48000, sampleRate: 44100, channelCount: 1 }
+        },
+        // 1:1 Low Quality Presets
+        low_1x1_xl: {
+            video: {
+                width: { ideal: 720 },
+                height: { ideal: 720 },
+                frameRate: { ideal: 15 },
+                maxBitrate: 800_000
+            },
+            audio: { maxBitrate: 48000, sampleRate: 44100, channelCount: 1 }
+        },
+        low_1x1_lg: {
+            video: {
+                width: { ideal: 480 },
+                height: { ideal: 480 },
+                frameRate: { ideal: 15 },
+                maxBitrate: 400_000
+            },
+            audio: { maxBitrate: 32000, sampleRate: 44100, channelCount: 1 }
+        },
+        low_1x1_md: {
+            video: {
+                width: { ideal: 360 },
+                height: { ideal: 360 },
+                frameRate: { ideal: 12 },
+                maxBitrate: 250_000
+            },
+            audio: { maxBitrate: 32000, sampleRate: 22050, channelCount: 1 }
+        },
+        low_1x1_sm: {
+            video: {
+                width: { ideal: 240 },
+                height: { ideal: 240 },
+                frameRate: { ideal: 10 },
+                maxBitrate: 150_000
+            },
+            audio: { maxBitrate: 24000, sampleRate: 22050, channelCount: 1 }
+        },
+        low_1x1_xs: {
+            video: {
+                width: { ideal: 180 },
+                height: { ideal: 180 },
+                frameRate: { ideal: 10 },
+                maxBitrate: 100_000
+            },
+            audio: { maxBitrate: 24000, sampleRate: 22050, channelCount: 1 }
+        },
+        // 9:16 High Quality Presets (Portrait/Mobile)
+        high_9x16_xl: {  // 1080x1920
+            video: {
+                width: { ideal: 1080 },
+                height: { ideal: 1920 },
+                frameRate: { ideal: 30 },
+                maxBitrate: 2_500_000
+            },
+            audio: { maxBitrate: 128000, sampleRate: 48000, channelCount: 2 }
+        },
+        high_9x16_lg: {  // 720x1280
+            video: {
+                width: { ideal: 720 },
+                height: { ideal: 1280 },
+                frameRate: { ideal: 30 },
+                maxBitrate: 1_500_000
+            },
+            audio: { maxBitrate: 96000, sampleRate: 48000, channelCount: 1 }
+        },
+        high_9x16_md: {  // 480x854
+            video: {
+                width: { ideal: 480 },
+                height: { ideal: 854 },
+                frameRate: { ideal: 30 },
+                maxBitrate: 800_000
+            },
+            audio: { maxBitrate: 96000, sampleRate: 44100, channelCount: 1 }
+        },
+        high_9x16_sm: {  // 360x640
+            video: {
+                width: { ideal: 360 },
+                height: { ideal: 640 },
+                frameRate: { ideal: 30 },
+                maxBitrate: 600_000
+            },
+            audio: { maxBitrate: 64000, sampleRate: 44100, channelCount: 1 }
+        },
+        high_9x16_xs: {  // 270x480
+            video: {
+                width: { ideal: 270 },
+                height: { ideal: 480 },
+                frameRate: { ideal: 30 },
+                maxBitrate: 400_000
+            },
+            audio: { maxBitrate: 64000, sampleRate: 44100, channelCount: 1 }
+        },
+        // 9:16 Medium Quality Presets
+        medium_9x16_xl: {
+            video: {
+                width: { ideal: 1080 },
+                height: { ideal: 1920 },
+                frameRate: { ideal: 24 },
+                maxBitrate: 2_000_000
+            },
+            audio: { maxBitrate: 96000, sampleRate: 48000, channelCount: 1 }
+        },
+        medium_9x16_lg: {
+            video: {
+                width: { ideal: 720 },
+                height: { ideal: 1280 },
+                frameRate: { ideal: 24 },
+                maxBitrate: 1_200_000
+            },
+            audio: { maxBitrate: 64000, sampleRate: 44100, channelCount: 1 }
+        },
+        medium_9x16_md: {
+            video: {
+                width: { ideal: 480 },
+                height: { ideal: 854 },
+                frameRate: { ideal: 20 },
+                maxBitrate: 600_000
+            },
+            audio: { maxBitrate: 48000, sampleRate: 44100, channelCount: 1 }
+        },
+        medium_9x16_sm: {
+            video: {
+                width: { ideal: 360 },
+                height: { ideal: 640 },
+                frameRate: { ideal: 20 },
+                maxBitrate: 400_000
+            },
+            audio: { maxBitrate: 48000, sampleRate: 44100, channelCount: 1 }
+        },
+        medium_9x16_xs: {
+            video: {
+                width: { ideal: 270 },
+                height: { ideal: 480 },
+                frameRate: { ideal: 20 },
+                maxBitrate: 300_000
+            },
+            audio: { maxBitrate: 48000, sampleRate: 44100, channelCount: 1 }
+        },
+        // 9:16 Low Quality Presets
+        low_9x16_xl: {
+            video: {
+                width: { ideal: 1080 },
+                height: { ideal: 1920 },
+                frameRate: { ideal: 15 },
+                maxBitrate: 1_500_000
+            },
+            audio: { maxBitrate: 48000, sampleRate: 44100, channelCount: 1 }
+        },
+        low_9x16_lg: {
+            video: {
+                width: { ideal: 720 },
+                height: { ideal: 1280 },
+                frameRate: { ideal: 15 },
+                maxBitrate: 800_000
+            },
+            audio: { maxBitrate: 32000, sampleRate: 44100, channelCount: 1 }
+        },
+        low_9x16_md: {
+            video: {
+                width: { ideal: 480 },
+                height: { ideal: 854 },
+                frameRate: { ideal: 12 },
+                maxBitrate: 400_000
+            },
+            audio: { maxBitrate: 32000, sampleRate: 22050, channelCount: 1 }
+        },
+        low_9x16_sm: {
+            video: {
+                width: { ideal: 360 },
+                height: { ideal: 640 },
+                frameRate: { ideal: 10 },
+                maxBitrate: 250_000
+            },
+            audio: { maxBitrate: 24000, sampleRate: 22050, channelCount: 1 }
+        },
+        low_9x16_xs: {
+            video: {
+                width: { ideal: 270 },
+                height: { ideal: 480 },
+                frameRate: { ideal: 10 },
+                maxBitrate: 150_000
+            },
+            audio: { maxBitrate: 24000, sampleRate: 22050, channelCount: 1 }
+        }
+    };
+}
+export default CloudflareCalls;

public/temp/CloudflareCalls.min.js ADDED Viewed

	@@ -0,0 +1 @@

public/temp/favicon.ico ADDED Viewed

public/temp/index.html ADDED Viewed

	@@ -0,0 +1,1066 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=3,minimum-scale=1,user-scalable=yes,minimal-ui,viewport-fit=cover">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="theme-color" content="#000000">
+    <title>Cloudflare Calls SFU Demo</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+        }
+        #videos {
+            display: flex;
+            flex-wrap: wrap;
+        }
+        #videos audio {
+            /* Comment out to show audio and see how things work or debug */
+            display: none;
+        }
+        video, audio {
+            width: 300px;
+            height: 225px;
+            background-color: black;
+            /* margin: 5px; */
+            border: 1px solid #ccc;
+            object-fit: scale-down; /* Scale down for the demo, you would want the default behavior */
+        }
+        .participant-container {
+            width: 300px;
+            height: 225px;
+            position: relative;
+            margin: 5px;
+        }
+        #controls {
+            margin-top: 10px;
+        }
+        #controls button, #controls select {
+            margin-right: 5px;
+            padding: 10px 15px;
+            font-size: 14px;
+            margin-bottom: 15px;
+        }
+        #dataChannelMessages {
+            margin-top: 20px;
+            max-height: 200px;
+            overflow-y: auto;
+            border: 1px solid #ccc;
+            padding: 10px;
+        }
+        #participants {
+            margin-top: 20px;
+            padding: 10px;
+            border: 1px solid #ccc;
+        }
+        .participant {
+            padding: 8px;
+            margin: 4px 0;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background: #f5f5f5;
+        }
+        .participant button {
+            padding: 4px 8px;
+            background: #ff4444;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+        .participant-container {
+            position: relative;
+            margin: 5px;
+        }
+        .participant-name {
+            position: absolute;
+            bottom: 10px;
+            right: 10px;
+            background: rgba(0, 0, 0, 0.7);
+            color: white;
+            padding: 4px 8px;
+            border-radius: 4px;
+            font-size: 14px;
+            z-index: 1;
+        }
+        /* Update video styles */
+        video {
+            width: 300px;
+            height: 225px;
+            background-color: black;
+            border: 1px solid #ccc;
+            display: block; /* Ensures proper positioning of overlay */
+        }
+        /* Rooms box */
+        #rooms {
+            margin-top: 20px;
+            padding: 10px;
+            border: 1px solid #ccc;
+        }
+        .room-item {
+            padding: 8px;
+            margin: 4px 0;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background: #f5f5f5;
+        }
+        .room-info {
+            flex-grow: 1;
+            margin-right: 10px;
+        }
+        .room-name {
+            font-weight: bold;
+        }
+        .room-metadata {
+            font-size: 0.9em;
+            color: #666;
+        }
+        .room-actions {
+            display: flex;
+            gap: 5px;
+        }
+        /* Add CSS for health indicators */
+        .stream-health-indicator {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background-color: #666;
+            z-index: 2;
+        }
+        .stream-health-good {
+            background-color: #4CAF50;
+        }
+        .stream-health-fair {
+            background-color: #FFA726;
+        }
+        .stream-health-poor {
+            background-color: #F44336;
+        }
+    </style>
+</head>
+<body>
+<h1>
+    Cloudflare Calls SFU Demo
+    (<a href="/docs/">Docs</a> | <a href="https://github.com/kidGodzilla/CloudflareCalls">GitHub</a>)
+</h1>
+<div id="videos">
+    <!-- Local preview container -->
+    <div class="participant-container" data-local="true">
+        <video id="localVideo" autoplay muted playsinline></video>
+        <div class="stream-health-indicator"></div>
+        <div class="participant-name"></div>
+    </div>
+</div>
+<div id="controls">
+    <button id="acquireToken">Acquire Token</button>
+    <button id="createRoom">Create Room</button>
+    <button id="joinRoom">Join Room</button>
+    <button id="leaveRoom">Leave Room</button>
+    <button id="toggleVideo">Disable Video</button>
+    <button id="toggleAudio">Disable Audio</button>
+    <button id="shareScreen">Share Screen</button>
+    <button id="unpublishAll">Unpublish All Tracks</button>
+    <button id="getSessionState">Get Session State</button>
+    <button id="forceUnpublish">Force Unpublish Video</button>
+    <select id="audioInputSelect"></select>
+    <select id="videoInputSelect"></select>
+    <select id="audioOutputSelect"></select>
+    <select onchange="setQuality(this.value)" style="padding: 8px; margin: 5px;">
+        <optgroup label="16:9 High Quality">
+            <option value="high_16x9_xl">16:9 High XL (1080p/30fps)</option>
+            <option value="high_16x9_lg">16:9 High LG (720p/30fps)</option>
+            <option value="high_16x9_md">16:9 High MD (480p/30fps)</option>
+            <option value="high_16x9_sm">16:9 High SM (360p/30fps)</option>
+            <option value="high_16x9_xs">16:9 High XS (270p/30fps)</option>
+        </optgroup>
+        <optgroup label="16:9 Medium Quality">
+            <option value="medium_16x9_xl">16:9 Medium XL (1080p/24fps)</option>
+            <option value="medium_16x9_lg">16:9 Medium LG (720p/24fps)</option>
+            <option value="medium_16x9_md">16:9 Medium MD (480p/24fps)</option>
+            <option value="medium_16x9_sm">16:9 Medium SM (360p/20fps)</option>
+            <option value="medium_16x9_xs">16:9 Medium XS (270p/20fps)</option>
+        </optgroup>
+        <optgroup label="16:9 Low Quality">
+            <option value="low_16x9_xl">16:9 Low XL (1080p/15fps)</option>
+            <option value="low_16x9_lg">16:9 Low LG (720p/15fps)</option>
+            <option value="low_16x9_md">16:9 Low MD (480p/15fps)</option>
+            <option value="low_16x9_sm">16:9 Low SM (360p/12fps)</option>
+            <option value="low_16x9_xs">16:9 Low XS (270p/10fps)</option>
+        </optgroup>
+        <optgroup label="9:16 High Quality (Portrait)">
+            <option value="high_9x16_xl">9:16 High XL (1080x1920/30fps)</option>
+            <option value="high_9x16_lg">9:16 High LG (720x1280/30fps)</option>
+            <option value="high_9x16_md">9:16 High MD (480x854/30fps)</option>
+            <option value="high_9x16_sm">9:16 High SM (360x640/30fps)</option>
+            <option value="high_9x16_xs">9:16 High XS (270x480/30fps)</option>
+        </optgroup>
+        <optgroup label="9:16 Medium Quality (Portrait)">
+            <option value="medium_9x16_xl">9:16 Medium XL (1080x1920/24fps)</option>
+            <option value="medium_9x16_lg">9:16 Medium LG (720x1280/24fps)</option>
+            <option value="medium_9x16_md">9:16 Medium MD (480x854/20fps)</option>
+            <option value="medium_9x16_sm">9:16 Medium SM (360x640/20fps)</option>
+            <option value="medium_9x16_xs">9:16 Medium XS (270x480/20fps)</option>
+        </optgroup>
+        <optgroup label="9:16 Low Quality (Portrait)">
+            <option value="low_9x16_xl">9:16 Low XL (1080x1920/15fps)</option>
+            <option value="low_9x16_lg">9:16 Low LG (720x1280/15fps)</option>
+            <option value="low_9x16_md">9:16 Low MD (480x854/12fps)</option>
+            <option value="low_9x16_sm">9:16 Low SM (360x640/10fps)</option>
+            <option value="low_9x16_xs">9:16 Low XS (270x480/10fps)</option>
+        </optgroup>
+        <optgroup label="4:3 High Quality">
+            <option value="high_4x3_xl">4:3 High XL (960x720/30fps)</option>
+            <option value="high_4x3_lg">4:3 High LG (640x480/30fps)</option>
+            <option value="high_4x3_md">4:3 High MD (480x360/30fps)</option>
+            <option value="high_4x3_sm">4:3 High SM (320x240/30fps)</option>
+            <option value="high_4x3_xs">4:3 High XS (240x180/30fps)</option>
+        </optgroup>
+        <optgroup label="4:3 Medium Quality">
+            <option value="medium_4x3_xl">4:3 Medium XL (960x720/24fps)</option>
+            <option value="medium_4x3_lg">4:3 Medium LG (640x480/24fps)</option>
+            <option value="medium_4x3_md">4:3 Medium MD (480x360/20fps)</option>
+            <option value="medium_4x3_sm" selected>4:3 Medium SM (320x240/20fps)</option>
+            <option value="medium_4x3_xs">4:3 Medium XS (240x180/20fps)</option>
+        </optgroup>
+        <optgroup label="4:3 Low Quality">
+            <option value="low_4x3_xl">4:3 Low XL (960x720/15fps)</option>
+            <option value="low_4x3_lg">4:3 Low LG (640x480/15fps)</option>
+            <option value="low_4x3_md">4:3 Low MD (480x360/12fps)</option>
+            <option value="low_4x3_sm">4:3 Low SM (320x240/10fps)</option>
+            <option value="low_4x3_xs">4:3 Low XS (240x180/10fps)</option>
+        </optgroup>
+        <optgroup label="1:1 High Quality (Square)">
+            <option value="high_1x1_xl">1:1 High XL (720x720/30fps)</option>
+            <option value="high_1x1_lg">1:1 High LG (480x480/30fps)</option>
+            <option value="high_1x1_md">1:1 High MD (360x360/30fps)</option>
+            <option value="high_1x1_sm">1:1 High SM (240x240/30fps)</option>
+            <option value="high_1x1_xs">1:1 High XS (180x180/30fps)</option>
+        </optgroup>
+        <optgroup label="1:1 Medium Quality (Square)">
+            <option value="medium_1x1_xl">1:1 Medium XL (720x720/24fps)</option>
+            <option value="medium_1x1_lg">1:1 Medium LG (480x480/24fps)</option>
+            <option value="medium_1x1_md">1:1 Medium MD (360x360/20fps)</option>
+            <option value="medium_1x1_sm">1:1 Medium SM (240x240/20fps)</option>
+            <option value="medium_1x1_xs">1:1 Medium XS (180x180/20fps)</option>
+        </optgroup>
+        <optgroup label="1:1 Low Quality (Square)">
+            <option value="low_1x1_xl">1:1 Low XL (720x720/15fps)</option>
+            <option value="low_1x1_lg">1:1 Low LG (480x480/15fps)</option>
+            <option value="low_1x1_md">1:1 Low MD (360x360/12fps)</option>
+            <option value="low_1x1_sm">1:1 Low SM (240x240/10fps)</option>
+            <option value="low_1x1_xs">1:1 Low XS (180x180/10fps)</option>
+        </optgroup>
+    </select>
+    <button id="previewMedia">Preview Media</button>
+    <button id="sendData">Send Data</button>
+    <div id="trackStatus"></div>
+</div>
+<div id="rooms">
+    <h3>Available Rooms</h3>
+    <div id="roomList"></div>
+</div>
+<div id="participants">
+    <h3>Participants</h3>
+    <div id="participantList"></div>
+</div>
+<div id="dataChannelMessages">
+    <h3>Data Channel Messages</h3>
+</div>
+<div id="connectionStatus" style="position: fixed; top: 10px; right: 10px;"></div>
+<div id="connectionStats" style="position: fixed; bottom: 10px; right: 10px; background: rgba(0,0,0,0.8); color: white; padding: 15px; border-radius: 8px; font-family: monospace;">
+    <h4 style="margin: 0 0 0 0;  cursor: pointer;" onclick="document.querySelector('.stats-grid').style.display === 'grid' ? document.querySelector('.stats-grid').style.display = 'none' : document.querySelector('.stats-grid').style.display = 'grid'">
+        Connection Health
+    </h4>
+    <div class="stats-grid" style="display: none; grid-template-columns: auto auto; gap: 8px; font-size: 12px; margin-top: 10px;">
+        <div>Upload:</div>
+        <div id="uploadHealth">-</div>
+        <div>Download:</div>
+        <div id="downloadHealth">-</div>
+        <div>Bitrate:</div>
+        <div id="bitrateStats">-</div>
+        <div>Quality:</div>
+        <div id="qualityLimitation">-</div>
+        <div>Packet Loss:</div>
+        <div id="packetLoss">-</div>
+        <div>Round Trip:</div>
+        <div id="roundTrip">-</div>
+    </div>
+</div>
+<!-- Adapter.js for broader WebRTC compatibility -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/webrtc-adapter/8.1.2/adapter.min.js"></script>
+<!-- IMPORTANT: adjust the path to your refactored CloudflareCalls library -->
+<script type="module">
+    import CloudflareCalls from './CloudflareCalls.js';
+    const calls = new CloudflareCalls();
+    window.calls = calls; // for debugging
+    calls.setDebugMode(true); // Disable debug logging
+    const localVideo = document.getElementById('localVideo');
+    const videosContainer = document.getElementById('videos');
+    const acquireTokenBtn = document.getElementById('acquireToken');
+    const createRoomBtn = document.getElementById('createRoom');
+    const joinRoomBtn = document.getElementById('joinRoom');
+    const leaveRoomBtn = document.getElementById('leaveRoom');
+    const toggleVideoBtn = document.getElementById('toggleVideo');
+    const toggleAudioBtn = document.getElementById('toggleAudio');
+    const shareScreenBtn = document.getElementById('shareScreen');
+    const dataChannelMessages = document.getElementById('dataChannelMessages');
+    const sendDataBtn = document.getElementById('sendData');
+    const audioInputSelect = document.getElementById('audioInputSelect');
+    const videoInputSelect = document.getElementById('videoInputSelect');
+    const audioOutputSelect = document.getElementById('audioOutputSelect');
+    const previewMediaBtn = document.getElementById('previewMedia');
+    const getSessionStateBtn = document.getElementById('getSessionState');
+    const forceUnpublishBtn = document.getElementById('forceUnpublish');
+    const trackStatusDiv = document.getElementById('trackStatus');
+    const participantList = document.getElementById('participantList');
+    // ===== 1) Populate device lists =====
+    async function populateDeviceLists() {
+        const devices = await calls.getAvailableDevices();
+        // Populate audio/video input & audio output selects
+        devices.audioInput.forEach(device => {
+            const option = document.createElement('option');
+            option.value = device.deviceId;
+            option.text = device.label || `Microphone ${audioInputSelect.length + 1}`;
+            audioInputSelect.appendChild(option);
+        });
+        devices.videoInput.forEach(device => {
+            const option = document.createElement('option');
+            option.value = device.deviceId;
+            option.text = device.label || `Camera ${videoInputSelect.length + 1}`;
+            videoInputSelect.appendChild(option);
+        });
+        devices.audioOutput.forEach(device => {
+            const option = document.createElement('option');
+            option.value = device.deviceId;
+            option.text = device.label || `Speaker ${audioOutputSelect.length + 1}`;
+            audioOutputSelect.appendChild(option);
+        });
+    }
+    populateDeviceLists();
+    // ===== 2) Listen for device selection changes =====
+    audioInputSelect.addEventListener('change', async () => {
+        await calls.selectAudioInputDevice(audioInputSelect.value);
+    });
+    videoInputSelect.addEventListener('change', async () => {
+        await calls.selectVideoInputDevice(videoInputSelect.value);
+    });
+    audioOutputSelect.addEventListener('change', async () => {
+        await calls.selectAudioOutputDevice(audioOutputSelect.value);
+    });
+    // ===== 3) Preview Media =====
+    previewMediaBtn.addEventListener('click', async () => {
+        try {
+            const previewStream = await calls.previewMedia({
+                audioDeviceId: audioInputSelect.value,
+                videoDeviceId: videoInputSelect.value
+            }, localVideo);
+            console.log('Preview successful.');
+        } catch (err) {
+            alert('Error previewing media: ' + err.message);
+        }
+    });
+    // ===== 4) Remote Track Handling =====
+    calls.onRemoteTrack(async track => {
+        console.log('New remote track:', track);
+        // Skip if track is invalid or missing required properties
+        if (!track.id || !track.trackName || !track.kind) {
+            console.log('Skipping invalid track:', track);
+            return;
+        }
+        // Skip our own track
+        if (track.sessionId === calls.sessionId) {
+            console.log('Skipping our own track');
+            return;
+        }
+        // Update participant list when tracks change
+        updateParticipantList();
+        // Find participant info from the room
+        const participants = await calls.listParticipants();
+        console.log('Participants:', participants);
+        const participant = participants.find(p => p.sessionId === track.sessionId);
+        console.log('Found participant:', participant);
+        if (!participant) {
+            console.warn('Could not find participant info for session:', track.sessionId);
+            return;
+        }
+        // Check if this is our own session ID
+        const localContainer = document.querySelector('.participant-container[data-local="true"]');
+        if (localContainer?.getAttribute('data-participant-id') === track.sessionId) {
+            console.log('Skipping container creation for own session');
+            return;
+        }
+        // Get user info for the participant
+        const userInfo = await calls.getUserInfo(participant.userId);
+        console.log('User info:', userInfo);
+        // Create or find container
+        let participantContainer = document.querySelector(`[data-participant-id="${track.sessionId}"]`);
+        if (!participantContainer) {
+            participantContainer = document.createElement('div');
+            participantContainer.className = 'participant-container';
+            participantContainer.setAttribute('data-participant-id', track.sessionId);
+            videosContainer.appendChild(participantContainer);
+            // Add health indicator
+            const healthIndicator = document.createElement('div');
+            healthIndicator.className = 'stream-health-indicator';
+            participantContainer.appendChild(healthIndicator);
+            // Add name overlay
+            const nameOverlay = document.createElement('div');
+            nameOverlay.className = 'participant-name';
+            nameOverlay.textContent = `${userInfo.username} 🔈`;
+            participantContainer.appendChild(nameOverlay);
+        }
+        // Add the media element to the container
+        if (track.kind === 'video') {
+            const videoElement = document.createElement('video');
+            videoElement.autoplay = true;
+            videoElement.playsInline = true;
+            videoElement.setAttribute('data-session-id', track.sessionId);
+            videoElement.setAttribute('data-track-id', track.id);
+            videoElement.setAttribute('data-track-name', track.trackName);
+            videoElement.setAttribute('data-mid', track.mid);
+            videoElement.setAttribute('data-track-source', track.source);
+            videoElement.srcObject = new MediaStream([track]);
+            participantContainer.appendChild(videoElement);
+        } else if (track.kind === 'audio') {
+            const audioElement = document.createElement('audio');
+            audioElement.autoplay = true;
+            audioElement.controls = true;
+            audioElement.style.display = 'none';
+            audioElement.setAttribute('data-session-id', track.sessionId);
+            audioElement.setAttribute('data-track-id', track.id);
+            audioElement.setAttribute('data-track-name', track.trackName);
+            audioElement.setAttribute('data-mid', track.mid);
+            audioElement.srcObject = new MediaStream([track]);
+            participantContainer.appendChild(audioElement); // Add to participant container instead
+        }
+    });
+    // ===== 4b) Handle Track Unpublished Events =====
+    calls.onRemoteTrackUnpublished((sessionId, trackName) => {
+        console.log('Track unpublished:', { sessionId, trackName });
+        // Update participant list when tracks are unpublished
+        updateParticipantList();
+        // Find and remove the media element
+        let mediaElement = document.querySelector(`[data-session-id="${sessionId}"][data-track-name="${trackName}"]`);
+        if (!mediaElement) {
+            console.warn('Could not find media element to remove:', { sessionId, trackName });
+            return;
+        }
+        console.log('Found and removing track element:', mediaElement);
+        if (mediaElement.srcObject) {
+            mediaElement.srcObject.getTracks().forEach(track => track.stop());
+        }
+        mediaElement.remove();
+        // Check if participant container is empty (no video/audio elements)
+        const participantContainer = document.querySelector(`[data-participant-id="${sessionId}"]`);
+        if (participantContainer) {
+            const hasMediaElements = participantContainer.querySelector('video, audio');
+            if (!hasMediaElements) {
+                console.log('Removing empty participant container:', sessionId);
+                participantContainer.remove();
+            }
+        }
+    });
+    // ===== 5) Data Channel Callbacks =====
+    calls.onDataMessage((msg) => {
+        console.log('onDataMessage', msg);
+        const p = document.createElement('p');
+        p.textContent = 'Data Channel Received: ' + JSON.stringify(msg);
+        dataChannelMessages.appendChild(p);
+    });
+    // ===== 6) Participants =====
+    calls.onParticipantJoined(async (participant) => {
+        console.log('Participant joined:', participant);
+        // Add a small delay to ensure all backend state is updated
+        setTimeout(async () => {
+            await updateParticipantList();
+            await updateRoomList();
+        }, 100);
+    });
+    calls.onParticipantLeft(async (sessionId) => {
+        console.log('Participant left:', sessionId);
+        // Remove participant's container
+        const container = document.querySelector(`.participant-container[data-participant-id="${sessionId}"]`);
+        if (container) {
+            // Stop all tracks in the container
+            container.querySelectorAll('video, audio').forEach(media => {
+                if (media.srcObject) {
+                    media.srcObject.getTracks().forEach(track => track.stop());
+                }
+            });
+            container.remove();
+        }
+        // Also check for any stray audio elements
+        document.querySelectorAll(`audio[data-session-id="${sessionId}"]`)
+            .forEach(audio => audio.remove());
+        await updateParticipantList();
+    });
+    // ===== 7) Button handlers =====
+    acquireTokenBtn.addEventListener('click', async () => {
+        try {
+            const username = window._username || prompt('Enter username:');
+            if (!username) return;
+            window._username = username;
+            const response = await fetch('/auth/token', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ username })
+            });
+            const { token } = await response.json();
+            // Set the token in the library
+            calls.setToken(token);
+            // Update room list after authentication
+            await updateRoomList();
+            setupLocalPreview();
+            acquireTokenBtn.textContent = 'Authenticated ✓';
+            acquireTokenBtn.disabled = true;
+        } catch (err) {
+            console.error('Auth error:', err);
+            alert('Auth error: ' + err.message);
+        }
+    });
+    createRoomBtn.addEventListener('click', async () => {
+        try {
+            const roomName = prompt('Enter room name:') || 'Unnamed Room';
+            const room = await calls.createRoom({
+                name: roomName,
+                metadata: {
+                    createdBy: window._username
+                }
+            });
+            console.log('Created room:', room, room.roomId);
+            history.replaceState(null, '', `?room_id=${encodeURIComponent(room.roomId)}`);
+            joinRoomBtn.click();
+        } catch (err) {
+            console.error('Error creating/joining room:', err);
+            alert('Error: ' + err.message);
+        }
+    });
+    async function joinRoomById(id) {
+        leaveRoomBtn.click();
+        previewMediaBtn.click();
+        try {
+            // Set default quality before joining
+            calls.setMediaQuality('medium_4x3_sm');
+            await calls.joinRoom(id, { username: _username });
+            console.log('Joined room:', id);
+            // Get session ID after joining
+            const sessionId = calls.sessionId;
+            console.log('Session ID:', sessionId);
+            // Set the session ID on our pre-existing local container
+            const localContainer = document.querySelector('.participant-container[data-local="true"]');
+            if (localContainer) {
+                localContainer.setAttribute('data-participant-id', sessionId);
+            }
+            // Update participant list & room list after joining
+            await updateParticipantList();
+            await updateRoomList();
+            history.replaceState(null, '', `?room_id=${encodeURIComponent(id)}`);
+            // Start stats monitoring
+            calls.startStatsMonitoring(1000);
+        } catch (err) {
+            console.error('Error joining room:', err);
+            alert('Error joining room: ' + err.message);
+        }
+    }
+    window.joinRoomById = joinRoomById;
+    joinRoomBtn.addEventListener('click', async () => {
+        if (!window._username) return alert('Acquire token first.');
+        let searchRoomId = (location.search.split('room_id=')[1]).split('&')[0];
+        if (!window._roomId && searchRoomId) window._roomId = searchRoomId;
+        if (!window._roomId) window._roomId = prompt('Enter Room ID to join:');
+        if (!_roomId) return;
+        await joinRoomById(_roomId);
+    });
+    leaveRoomBtn.addEventListener('click', async () => {
+        await calls.unpublishAllTracks();
+        await calls.leaveRoom();
+        // Clean up all remote participant containers
+        document.querySelectorAll('.participant-container:not([data-local="true"])')
+            .forEach(container => container.remove());
+        // Clean up remote audio elements that might be outside containers
+        document.querySelectorAll('#videos audio').forEach(audio => audio.remove());
+        // Clear the participant list when we leave
+        participantList.innerHTML = '';
+        // Update room list after leaving
+        await updateRoomList();
+        console.log('Left the room.');
+        // Clean up stats monitoring
+        calls.stopStatsMonitoring();
+    });
+    toggleVideoBtn.addEventListener('click', async () => {
+        const videoTrack = localVideo.srcObject?.getVideoTracks()[0];
+        if (videoTrack) {
+            const isEnabled = videoTrack.enabled;
+            videoTrack.enabled = !isEnabled;
+            try {
+                await calls.toggleMedia({ video: !isEnabled, audio: null });
+                toggleVideoBtn.textContent = isEnabled ? 'Enable Video' : 'Disable Video';
+                // Get and show updated track status
+                const status = await calls.getTrackStatus(videoTrack.id);
+                trackStatusDiv.innerHTML = `<div>Video track ${videoTrack.id}: ${status}</div>`;
+            } catch (err) {
+                console.error('Error toggling video:', err);
+                alert('Error: ' + err.message);
+            }
+        }
+    });
+    toggleAudioBtn.addEventListener('click', () => {
+        const audioTrack = localVideo.srcObject?.getAudioTracks()[0];
+        if (audioTrack) {
+            const isEnabled = audioTrack.enabled;
+            audioTrack.enabled = !isEnabled;
+            calls.toggleMedia({ audio: !isEnabled, video: null });
+            toggleAudioBtn.textContent = isEnabled ? 'Enable Audio' : 'Disable Audio';
+        }
+    });
+    shareScreenBtn.addEventListener('click', async () => {
+        try {
+            await calls.shareScreen();
+            alert('Screen sharing started.');
+        } catch (err) {
+            alert('Error sharing screen: ' + err.message);
+        }
+    });
+    // ===== 8) Sending Data =====
+    sendDataBtn.addEventListener('click', async () => {
+        const content = prompt('Enter message:');
+        if (!content) return;
+        // We'll send everything on our "chat" channel
+        // Make sure we've published it already (see joinRoom code above).
+        // Then we can do:
+        const message = { content, fromUser: calls.userId };
+        calls.sendDataToAll(message);
+    });
+    document.getElementById('unpublishAll').addEventListener('click', async () => {
+        await calls.unpublishAllTracks();
+        alert('Unpublished all tracks');
+    });
+    getSessionStateBtn.addEventListener('click', async () => {
+        try {
+            const state = await calls.getSessionState();
+            trackStatusDiv.innerHTML = '<h3>Track Status:</h3>' +
+                state.tracks.map(track =>
+                    `<div>${track.trackName}: ${track.status}</div>`
+                ).join('');
+        } catch (err) {
+            console.error('Error getting session state:', err);
+            alert('Error getting session state: ' + err.message);
+        }
+    });
+    forceUnpublishBtn.addEventListener('click', async () => {
+        try {
+            const userInfo = calls.getUserInfo();
+            if (!userInfo?.isModerator) {
+                alert('You need moderator privileges to force unpublish tracks.');
+                return;
+            }
+            await calls.unpublishTrack('video', true);
+            alert('Video track force unpublished');
+        } catch (err) {
+            if (err.code === 'NOT_AUTHORIZED') {
+                alert('You are not authorized to force unpublish tracks.');
+            } else {
+                console.error('Error force unpublishing:', err);
+                alert('Error: ' + err.message);
+            }
+        }
+    });
+    window.onbeforeunload = async function(e) {
+        e.preventDefault();
+        await calls.unpublishAllTracks();
+        return 'Leaving room..';
+    }
+    async function updateParticipantList() {
+        try {
+            // Get current user info first
+            const currentUser = await calls.getUserInfo();
+            const isModerator = currentUser.isModerator;
+            // Get list of participants in room
+            const participants = await calls.listParticipants();
+            // If we're not in a room, participants will be empty
+            if (!participants || participants.length === 0) {
+                participantList.innerHTML = '';
+                return;
+            }
+            participantList.innerHTML = `
+                <div class="participant">
+                    <strong>You (${currentUser.username})</strong>
+                    ${isModerator ? ' 🛡️ Moderator' : ''}
+                </div>
+                ${await Promise.all(participants
+                    .filter(p => p.userId !== currentUser.userId)
+                    .map(async p => {
+                        const userInfo = await calls.getUserInfo(p.userId);
+                        return `
+                            <div class="participant">
+                                <strong>${userInfo.username}</strong>
+                                ${isModerator ? `
+                                    <button onclick="forceUnpublishParticipant('${p.sessionId}')">
+                                        Force Unpublish
+                                    </button>
+                                ` : ''}
+                            </div>
+                        `;
+                    })
+                ).then(items => items.join(''))}
+            `;
+        } catch (err) {
+            console.error('Error updating participant list:', err);
+            // Clear the list if there's an error (likely means we're not in a room)
+            participantList.innerHTML = '';
+        }
+    }
+    async function forceUnpublishParticipant(sessionId) {
+        try {
+            const userInfo = await calls.getUserInfo();
+            if (!userInfo.isModerator) {
+                alert('Only moderators can force unpublish tracks');
+                return;
+            }
+            // In a real app, you might want to specify which track to unpublish
+            await calls.unpublishTrack('video', true, sessionId);
+            alert('Forced track unpublish successful');
+        } catch (err) {
+            console.error('Error force unpublishing:', err);
+            alert('Error: ' + err.message);
+        }
+    }
+    window.forceUnpublishParticipant = forceUnpublishParticipant;
+    const setupLocalPreview = async () => {
+        try {
+            const previewStream = await calls.previewMedia({
+                audioDeviceId: audioInputSelect.value,
+                videoDeviceId: videoInputSelect.value
+            }, localVideo);
+            console.log('Preview successful.');
+        } catch (err) {
+            alert('Error previewing media: ' + err.message);
+        }
+        try {
+            const userInfo = await calls.getUserInfo();
+            console.log('User info:', userInfo);
+            const localContainer = document.querySelector('.participant-container[data-local="true"]');
+            localContainer.setAttribute('data-participant-id', userInfo.userId);
+            // Add name overlay
+            const nameOverlay = document.querySelector('.participant-container[data-local="true"] .participant-name');
+            nameOverlay.textContent = `${userInfo.username} (you) 🔈`;
+        } catch (err) {
+            console.error('Error setting up local preview:', err);
+        }
+    };
+    function updateAudioStatus(sessionId, enabled = true) {
+        const nameOverlay = document.querySelector(`[data-participant-id="${sessionId}"] .participant-name`);
+        if (nameOverlay) {
+            // Clean up the name by removing status icons
+            const baseName = nameOverlay.textContent
+                .replace(/ 🔈| 🔇/g, '')
+                .replace(/ \(you\)/g, '');
+            // Add back (you) if it's the local user
+            const isLocal = sessionId === calls.sessionId;
+            nameOverlay.textContent = `${baseName}${isLocal ? ' (you)' : ''} ${enabled ? '🔈' : '🔇'}`;
+            console.log('Updated audio status:', { sessionId, enabled }, nameOverlay.textContent);
+        } else {
+            console.log('No name overlay found for session:', sessionId);
+        }
+    }
+    // Use specific handlers for most cases
+    calls.onTrackStatusChanged(payload => {
+        const { sessionId, enabled, kind } = payload;
+        console.log('onTrackStatusChanged kind', kind);
+        if (kind === 'audio') {
+            updateAudioStatus(sessionId, enabled);
+        }
+    });
+    // Use generic handler for debugging or custom handling
+    calls.onWebSocketMessage(msg => {
+        console.log('WebSocket message received (generic):', msg);
+    });
+    // Add connection status monitoring
+    function updateConnectionStatus() {
+        const status = document.getElementById('connectionStatus');
+        if (!window.calls?.ws) {
+            status.textContent = '⚠️ No WebSocket';
+            status.style.color = 'red';
+            return;
+        }
+        switch (window.calls.ws.readyState) {
+            case WebSocket.CONNECTING:
+                status.textContent = '🔄 Connecting...';
+                status.style.color = 'orange';
+                break;
+            case WebSocket.OPEN:
+                status.textContent = '🟢 Connected';
+                status.style.color = 'green';
+                break;
+            case WebSocket.CLOSING:
+                status.textContent = '🔄 Closing...';
+                status.style.color = 'orange';
+                break;
+            case WebSocket.CLOSED:
+                status.textContent = '🔴 Disconnected';
+                status.style.color = 'red';
+                break;
+        }
+    }
+    // Update status every second
+    setInterval(updateConnectionStatus, 1000);
+    // Add room list UI updates
+    async function updateRoomList() {
+        const roomList = document.getElementById('roomList');
+        const rooms = await calls.listRooms();
+        roomList.innerHTML = rooms.map(room => `
+            <div class="room-item">
+                <div class="room-info">
+                    <div class="room-name">${room.name || 'Unnamed Room'}</div>
+                    <div class="room-metadata">
+                        Created by: ${room.metadata?.createdBy || 'Unknown'}
+                        · ${room.participantCount} participant(s)
+                    </div>
+                </div>
+                <div class="room-actions">
+                    <button onclick="joinRoomById('${room.roomId}')">Join</button>
+                </div>
+            </div>
+        `).join('');
+    }
+    // Add metadata update handler
+    calls.onRoomMetadataUpdated(async (payload) => {
+        console.log('Room metadata updated:', payload);
+        await updateRoomList();  // Refresh room list
+    });
+    // Quality controls
+    async function setQuality(preset) {
+        try {
+            await calls.setMediaQuality(preset);
+            console.log(`Set quality to ${preset}`);
+        } catch (error) {
+            console.error('Error setting quality:', error);
+        }
+    }
+    window.setQuality = setQuality;
+    // Connection health monitoring
+    const uploadHealth = document.getElementById('uploadHealth');
+    const downloadHealth = document.getElementById('downloadHealth');
+    const bitrateStats = document.getElementById('bitrateStats');
+    const qualityLimitation = document.getElementById('qualityLimitation');
+    const packetLoss = document.getElementById('packetLoss');
+    const roundTrip = document.getElementById('roundTrip');
+    calls.onConnectionStats((stats, streamStats) => {
+        // Format bitrates to Mbps/Kbps
+        const formatBitrate = (bits) => {
+            if (bits > 1000000) {
+                return `${(bits / 1000000).toFixed(2)} Mbps`;
+            }
+            return `${(bits / 1000).toFixed(0)} Kbps`;
+        };
+        // Update bitrates
+        const outBitrate = formatBitrate(stats.outbound.bitrate);
+        const inBitrate = formatBitrate(stats.inbound.bitrate);
+        bitrateStats.textContent = `↑${outBitrate} ↓${inBitrate}`;
+        // Update quality limitation
+        const limitation = stats.outbound.qualityLimitation;
+        qualityLimitation.textContent = limitation.charAt(0).toUpperCase() + limitation.slice(1);
+        qualityLimitation.style.color = limitation === 'none' ? '#4CAF50' : '#FFA726';
+        // Update packet loss
+        const outLoss = stats.outbound.packetLoss.toFixed(1);
+        const inLoss = stats.inbound.packetLoss.toFixed(1);
+        packetLoss.textContent = `↑${outLoss}% ↓${inLoss}%`;
+        packetLoss.style.color = Math.max(stats.outbound.packetLoss, stats.inbound.packetLoss) > 5
+            ? '#F44336' : '#4CAF50';
+        // Update round trip time
+        const rtt = (stats.connection.roundTripTime * 1000).toFixed(0);
+        roundTrip.textContent = `${rtt}ms`;
+        roundTrip.style.color = rtt > 200 ? '#F44336' : rtt > 100 ? '#FFA726' : '#4CAF50';
+        // Update overall health indicators
+        const getHealthStatus = (stats) => {
+            if (stats.packetLoss > 10 || stats.qualityLimitation !== 'none') return '🔴 Poor';
+            if (stats.packetLoss > 5) return '🟡 Fair';
+            return '🟢 Good';
+        };
+        uploadHealth.textContent = getHealthStatus(stats.outbound);
+        downloadHealth.textContent = getHealthStatus({
+            packetLoss: stats.inbound.packetLoss,
+            qualityLimitation: 'none'
+        });
+        // Update individual stream health indicators
+        if (streamStats) {  // Add null check
+            streamStats.forEach(streamStat => {
+                const container = document.querySelector(`.participant-container[data-participant-id="${streamStat.sessionId}"]`);
+                const indicator = container?.querySelector('.stream-health-indicator');
+                if (!indicator) return;
+                // Remove existing health classes
+                indicator.classList.remove('stream-health-good', 'stream-health-fair', 'stream-health-poor');
+                // Determine health status
+                let healthClass;
+                if (streamStat.packetLoss > 10 || streamStat.qualityLimitation !== 'none') {
+                    healthClass = 'stream-health-poor';
+                } else if (streamStat.packetLoss > 5) {
+                    healthClass = 'stream-health-fair';
+                } else {
+                    healthClass = 'stream-health-good';
+                }
+                indicator.classList.add(healthClass);
+            });
+        }
+    });
+</script>
+</body>
+</html>

public/temp/test.html ADDED Viewed

	@@ -0,0 +1,327 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Simple Meeting Room</title>
+    <style>
+        #videos {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 20px;
+            margin: 20px;
+        }
+        .video-container {
+            position: relative;
+            background: #f0f0f0;
+            border-radius: 8px;
+            overflow: hidden;
+        }
+        video {
+            width: 100%;
+            max-width: 100%;
+            height: auto;
+            background: #000;
+        }
+        .participant-name {
+            position: absolute;
+            bottom: 10px;
+            left: 10px;
+            color: white;
+            background: rgba(0,0,0,0.5);
+            padding: 5px 10px;
+            border-radius: 4px;
+        }
+        #controls {
+            padding: 20px;
+            background: #f8f8f8;
+            margin-bottom: 20px;
+        }
+        button {
+            padding: 8px 16px;
+            margin: 0 5px;
+            cursor: pointer;
+        }
+        #roomInfo {
+            padding: 10px;
+            background: #e8e8e8;
+            margin: 10px 20px;
+        }
+    </style>
+</head>
+<body>
+    <div id="controls">
+        <input type="text" id="nameInput" placeholder="Enter your name">
+        <button id="createRoomBtn">Create Room</button>
+        <input type="text" id="roomIdInput" placeholder="Enter Room ID">
+        <button id="joinRoomBtn">Join Room</button>
+        <button id="leaveRoomBtn">Leave Room</button>
+        <button id="toggleVideoBtn">Toggle Video</button>
+        <button id="toggleAudioBtn">Toggle Audio</button>
+    </div>
+    <div id="roomInfo"></div>
+    <div id="videos">
+        <div class="video-container" id="localVideoContainer">
+            <video id="localVideo" autoplay muted playsinline></video>
+            <div class="participant-name">You</div>
+        </div>
+    </div>
+    <!-- Adapter.js for broader WebRTC compatibility -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/webrtc-adapter/8.1.2/adapter.min.js"></script>
+    <script type="module">
+        import CloudflareCalls from './CloudflareCalls.js';
+        const calls = new CloudflareCalls({
+            backendUrl: '', // Default to same host
+            websocketUrl: `ws://${window.location.host}`
+        });
+        // Get token and initialize calls
+        async function ensureInitialized(username) {
+            if (!calls.token) {
+                try {
+                    const response = await fetch('/auth/token', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify({ username })
+                    });
+                    const { token } = await response.json();
+                    calls.setToken(token);
+                    return true;
+                } catch (err) {
+                    console.error('Error getting token:', err);
+                    alert('Failed to initialize. Please check if the server is running.');
+                    return false;
+                }
+            }
+            return true;
+        }
+        let currentRoom = null;
+        // DOM Elements
+        const nameInput = document.getElementById('nameInput');
+        const createRoomBtn = document.getElementById('createRoomBtn');
+        const roomIdInput = document.getElementById('roomIdInput');
+        const joinRoomBtn = document.getElementById('joinRoomBtn');
+        const leaveRoomBtn = document.getElementById('leaveRoomBtn');
+        const toggleVideoBtn = document.getElementById('toggleVideoBtn');
+        const toggleAudioBtn = document.getElementById('toggleAudioBtn');
+        const roomInfo = document.getElementById('roomInfo');
+        const videos = document.getElementById('videos');
+        const localVideo = document.getElementById('localVideo');
+        // Check URL for room ID
+        const urlParams = new URLSearchParams(window.location.search);
+        if (urlParams.has('room')) {
+            roomIdInput.value = urlParams.get('room');
+        }
+        // Event Handlers
+        createRoomBtn.addEventListener('click', async () => {
+            if (!nameInput.value) {
+                alert('Please enter your name');
+                return;
+            }
+            try {
+                // Ensure we have a token first
+                if (!await ensureInitialized(nameInput.value)) {
+                    return;
+                }
+                const room = await calls.createRoom({
+                    name: `${nameInput.value}'s Room`,
+                    metadata: { createdBy: nameInput.value }
+                });
+                currentRoom = room;
+                roomInfo.textContent = `Room created! Room ID: ${room.roomId}`;
+                await joinRoom(room.roomId);
+                // Update URL with room ID
+                history.pushState({}, '', `?room=${room.roomId}`);
+            } catch (err) {
+                console.error('Error creating room:', err);
+                alert('Failed to create room: ' + err.message);
+            }
+        });
+        joinRoomBtn.addEventListener('click', async () => {
+            if (!nameInput.value) {
+                alert('Please enter your name');
+                return;
+            }
+            if (!roomIdInput.value) {
+                alert('Please enter a room ID');
+                return;
+            }
+            // Ensure we have a token before joining
+            if (!await ensureInitialized(nameInput.value)) {
+                return;
+            }
+            await joinRoom(roomIdInput.value);
+        });
+        leaveRoomBtn.addEventListener('click', async () => {
+            if (calls) {
+                await calls.leaveRoom();
+                currentRoom = null;
+                roomInfo.textContent = '';
+                clearRemoteVideos();
+                history.pushState({}, '', window.location.pathname);
+            }
+        });
+        toggleVideoBtn.addEventListener('click', () => {
+            if (calls.localStream) {
+                const videoTracks = calls.localStream.getVideoTracks();
+                const currentState = videoTracks[0]?.enabled;
+                videoTracks.forEach(track => {
+                    track.enabled = !currentState;
+                });
+                toggleVideoBtn.textContent = currentState ? 'Enable Video' : 'Disable Video';
+            }
+        });
+        toggleAudioBtn.addEventListener('click', () => {
+            if (calls.localStream) {
+                const audioTracks = calls.localStream.getAudioTracks();
+                const currentState = audioTracks[0]?.enabled;
+                audioTracks.forEach(track => {
+                    track.enabled = !currentState;
+                });
+                toggleAudioBtn.textContent = currentState ? 'Enable Audio' : 'Disable Audio';
+            }
+        });
+        // Helper Functions
+        async function joinRoom(roomId) {
+            try {
+                await calls.joinRoom(roomId, { name: nameInput.value });
+                roomInfo.textContent = `Joined room: ${roomId}`;
+                setupCallbacks();
+                // Get list of current participants and their tracks
+                const participants = await calls.listParticipants();
+                console.log('Current participants:', participants);
+                // Set up remote streams for existing participants
+                for (const participant of participants) {
+                    // Skip if it's our own session
+                    if (participant.sessionId === calls.sessionId) continue;
+                    console.log('Processing participant:', participant);
+                    // Create container for this participant if not exists
+                    const containerId = `participant-${participant.sessionId}`;
+                    if (!document.getElementById(containerId)) {
+                        const container = document.createElement('div');
+                        container.id = containerId;
+                        container.className = 'video-container';
+                        const video = document.createElement('video');
+                        video.autoplay = true;
+                        video.playsinline = true;
+                        const name = document.createElement('div');
+                        name.className = 'participant-name';
+                        name.textContent = 'Participant ' + participant.sessionId;
+                        container.appendChild(video);
+                        container.appendChild(name);
+                        videos.appendChild(container);
+                        // Set up MediaStream for this participant
+                        video.srcObject = new MediaStream();
+                    }
+                    // Pull each track from the participant
+                    for (const trackName of participant.publishedTracks) {
+                        console.log(`Pulling track ${trackName} from session ${participant.sessionId}`);
+                        await calls._pullTracks(participant.sessionId, trackName);
+                    }
+                }
+                history.pushState({}, '', `?room=${roomId}`);
+            } catch (err) {
+                console.error('Error joining room:', err);
+                alert('Failed to join room: ' + err.message);
+            }
+        }
+        function setupCallbacks() {
+            calls.onRemoteTrack((track) => {
+                console.log('Remote track received:', track);
+                const containerId = `participant-${track.sessionId}`;
+                let container = document.getElementById(containerId);
+                if (!container) {
+                    container = document.createElement('div');
+                    container.id = containerId;
+                    container.className = 'video-container';
+                    const video = document.createElement('video');
+                    video.autoplay = true;
+                    video.playsinline = true;
+                    const name = document.createElement('div');
+                    name.className = 'participant-name';
+                    name.textContent = 'Participant ' + track.sessionId;
+                    container.appendChild(video);
+                    container.appendChild(name);
+                    videos.appendChild(container);
+                }
+                const video = container.querySelector('video');
+                if (!video.srcObject) {
+                    video.srcObject = new MediaStream();
+                }
+                video.srcObject.addTrack(track);
+            });
+            calls.onParticipantLeft((sessionId) => {
+                const container = document.getElementById(`participant-${sessionId.sessionId}`);
+                console.log('Participant left:', sessionId);
+                if (container) {
+                    container.remove();
+                    console.log('Participant left:', sessionId);
+                }
+            });
+        }
+        function clearRemoteVideos() {
+            const remoteContainers = videos.querySelectorAll('.video-container:not(#localVideoContainer)');
+            remoteContainers.forEach(container => container.remove());
+        }
+        // Initial setup for local video
+        async function setupLocalVideo() {
+            try {
+                const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
+                localVideo.srcObject = stream;
+                // Store stream in calls instance
+                calls.localStream = stream;
+            } catch (err) {
+                console.error('Error accessing media devices:', err);
+                alert('Failed to access camera/microphone');
+            }
+        }
+        // Initialize with token
+        setupLocalVideo();
+        // Auto-join room if ID is in URL
+        if (urlParams.has('room')) {
+            roomIdInput.value = urlParams.get('room');
+            // Only auto-join if name is provided
+            if (nameInput.value) {
+                joinRoomBtn.click();
+            }
+        }
+    </script>
+</body>
+</html>