The call has been paused. The fan has {{ ChimeCallSettings.callSettings.graceSeconds }} seconds to complete a top-up in order to proceed. If the top-up is not completed in time, the call will be automatically terminated.

Background icon

Background and effects

Background icon

Report

Background icon

Help

{{ scheduledGroupWaitingInitials }}
Creator not joined yet

Waiting for {{ scheduledGroupWaitingHandle }}

The group event will start when the creator joins.

Auto-cancel and refund check at {{ scheduledGroupNoShowDeadlineLabel }}
{{ scheduledOneOnOneWaitingInitials }}
{{ scheduledOneOnOneWaitingChipText }}

Waiting for {{ scheduledOneOnOneWaitingHandle }}

Your private session will start when they join.

Video Effects

Virtual Background

Harwinder integrate this into the call settings

Settings
Camera: {{ ChimeCallSettings.callCamStatus ? 'On' : 'Off' }}
Microphone: {{ ChimeCallSettings.callMicStatus ? 'On' : 'Off' }}
Chat: {{ ChimeCallSettings.callChatStatus ? 'On' : 'Off' }}
Callee Image URL: {{ ChimeCallSettings.userAvatarUrl || 'No image set' }}

call Controls

Initiate Call
Respond to Call
Media Controls Video On Video Off Audio On Audio Off
Video Effects
Data Actions React Send Gift Send Chat Send Promo Tip

debug Controls

Call Type
Role
User IDs
Socket
Callback/Rejoin
ðŸ"‹ Mock User Data
⏳ Grace Period Status: FALSE
📊 Current Call State
Call Type: -
Media Type: -
Your Role: -
Your Side: -
Grace Period: FALSE

Your Details:
-

Other User Details:
-
ðŸ"‘ Token Updates (Rehan)
callSettings
State: - (-)
callCamStatus: -
callMicStatus: -
Cam/Mic Global Settings
Camera: OFF
Microphone: OFF
Chime Call State
Status: Idle…
UI State
current â†' state: (none) / substate: (none)
Vue State Shifter
State history
Camera Status prompt
Microphone Status prompt
Camera Permission Needed
Microphone Permission Needed
Cam/Mic Actions
Meeting Actions Join Meeting Start End
ChimeDebugLog
🧪 Test Chat







Parent Dispatch Events
ðŸ"" Push Notifications



Status: Checking...
ðŸ"ž Current Call ID None
ðŸ"± Active Call Handler Tab FALSE

Host Controls

Bulk Actions
Assign Host
Manage Collaborators
Meeting Info Meeting: - • Type: - • Participants: 0/-

CamMic Permissions Test

CamMic Actions Documentation

Title Action Description Checklist How to Wire Up
Initialize How: Dispatches initialization event that sets up the CamMicPermissionsHandler system, caches UI elements, and registers event listeners.

Why: Required first step to initialize the handler and prepare the system for permission requests. Must be called before any other actions.

Expected: Handler initializes, UI elements are cached, event listeners are registered. System is ready for permission operations.
  • ☐ Event dispatched successfully
  • ☐ Handler initialized
  • ☐ UI elements cached
  • ☐ Event listeners registered
  • ☐ System ready for operations
 // Direct dispatch
window.dispatchEvent(new CustomEvent('CamMic:Init'));

// Or from button click
button.onclick = () => {
  window.dispatchEvent(new CustomEvent('CamMic:Init'));
};
Check Permissions How: Queries current permission states for camera and microphone without requesting permissions.

Why: Allows checking permission status before making requests. Useful for determining if permissions are already granted or need to be requested.

Expected: Permission states are checked and logged. Returns current state: "granted", "denied", or "prompt". No user prompt is shown.
  • ☐ Event dispatched successfully
  • ☐ Permission states queried
  • ☐ Camera permission state returned
  • ☐ Microphone permission state returned
  • ☐ No permission prompt shown
 // Direct dispatch
window.dispatchEvent(new CustomEvent('CamMic:Permissions:Check'));

// Or from button click
button.onclick = () => {
  window.dispatchEvent(new CustomEvent('CamMic:Permissions:Check'));
};
Watch Permissions How: Starts monitoring permission state changes. Sets up listeners to detect when permissions are granted or denied.

Why: Allows real-time detection of permission changes. Useful for updating UI when user grants/denies permissions in browser settings.

Expected: Permission watching starts. System will detect and log permission changes. Events are fired when permissions change.
  • ☐ Event dispatched successfully
  • ☐ Permission watching started
  • ☐ Listeners registered for changes
  • ☐ Changes will be detected
  • ☐ Watching state is active
 // Direct dispatch
window.dispatchEvent(new CustomEvent('CamMic:Permissions:WatchStart'));

// Or from button click
button.onclick = () => {
  window.dispatchEvent(new CustomEvent('CamMic:Permissions:WatchStart'));
};
Stop Watching How: Stops monitoring permission state changes. Removes listeners and cleans up watching functionality.

Why: Stops permission watching when no longer needed. Helps conserve resources and clean up event listeners.

Expected: Permission watching stops. Listeners are removed. System no longer detects permission changes.
  • ☐ Event dispatched successfully
  • ☐ Permission watching stopped
  • ☐ Listeners removed
  • ☐ Watching state is inactive
  • ☐ Resources cleaned up
 // Direct dispatch
window.dispatchEvent(new CustomEvent('CamMic:Permissions:WatchStop'));

// Or from button click
button.onclick = () => {
  window.dispatchEvent(new CustomEvent('CamMic:Permissions:WatchStop'));
};
Request Camera How: Requests camera permission from the user. Shows browser permission prompt if not already granted.

Why: Directly requests camera access without orchestrating full device setup. Useful for simple permission requests.

Expected: Browser permission prompt appears for camera. User grants/denies. Permission state is updated. No device selection or preview is started.
  • ☐ Event dispatched successfully
  • ☐ Permission prompt shown
  • ☐ User responds to prompt
  • ☐ Permission state updated
  • ☐ Camera permission granted or denied
 // Direct dispatch
window.dispatchEvent(new CustomEvent('CamMic:Request:Camera'));

// Or from button click
button.onclick = () => {
  window.dispatchEvent(new CustomEvent('CamMic:Request:Camera'));
};
Request Microphone How: Requests microphone permission from the user. Shows browser permission prompt if not already granted.

Why: Directly requests microphone access without orchestrating full device setup. Useful for simple permission requests.

Expected: Browser permission prompt appears for microphone. User grants/denies. Permission state is updated. No device selection or streams are started.
  • ☐ Event dispatched successfully
  • ☐ Permission prompt shown
  • ☐ User responds to prompt
  • ☐ Permission state updated
  • ☐ Microphone permission granted or denied
 // Direct dispatch
window.dispatchEvent(new CustomEvent('CamMic:Request:Microphone'));

// Or from button click
button.onclick = () => {
  window.dispatchEvent(new CustomEvent('CamMic:Request:Microphone'));
};
Request Both How: Requests both camera and microphone permissions from the user. Shows browser permission prompts if not already granted.

Why: Directly requests both permissions without orchestrating full device setup. Useful for simple permission requests for both devices.

Expected: Browser permission prompts appear for camera and microphone. User grants/denies. Permission states are updated. No device selection or streams are started.
  • ☐ Event dispatched successfully
  • ☐ Permission prompts shown
  • ☐ User responds to prompts
  • ☐ Permission states updated
  • ☐ Both camera and microphone permissions granted or denied
 // Direct dispatch
window.dispatchEvent(new CustomEvent('CamMic:Request:Both'));

// Or from button click
button.onclick = () => {
  window.dispatchEvent(new CustomEvent('CamMic:Request:Both'));
};
List Devices How: Queries and lists all available camera and microphone devices connected to the system.

Why: Allows discovery of available devices. Useful for device selection UI or debugging device availability.

Expected: Available devices are queried and logged. List includes device IDs, labels, and device information. Devices are available for selection.
  • ☐ Event dispatched successfully
  • ☐ Devices queried from system
  • ☐ Camera devices listed
  • ☐ Microphone devices listed
  • ☐ Device information logged
 // Direct dispatch
window.dispatchEvent(new CustomEvent('CamMic:Devices:List'));

// Or from button click
button.onclick = () => {
  window.dispatchEvent(new CustomEvent('CamMic:Devices:List'));
};
Stop Streams
⚠️ Note: This action will only stop streams if there are active streams running. If no streams are active, this action will have no effect.
How: Stops all active camera and microphone media streams. Releases device access and cleans up resources.

Why: Properly releases device access when streams are no longer needed. Important for resource management and user privacy.

Expected: All active streams are stopped. Device tracks are stopped. Streams are released. Resources are cleaned up.
  • ☐ Event dispatched successfully
  • ☐ All active streams stopped
  • ☐ Camera tracks stopped
  • ☐ Microphone tracks stopped
  • ☐ Resources cleaned up
 // Direct dispatch
window.dispatchEvent(new CustomEvent('CamMic:Streams:Stop'));

// Or from button click
button.onclick = () => {
  window.dispatchEvent(new CustomEvent('CamMic:Streams:Stop'));
};
Start Video Preview
⚠️ Note: This action requires camera permissions to be granted first. If permissions are not granted, this action will fail. Use "Request Camera" or "Orchestrate Camera Only" first to obtain permissions.
How: Starts video preview by accessing camera and displaying feed in the video preview element.

Why: Allows starting video preview independently of orchestration. Useful for manual preview control or when permissions are already granted.

Expected: Video preview starts. Camera stream is accessed. Video element displays live camera feed. Preview is visible.
  • ☐ Event dispatched successfully
  • ☐ Camera stream accessed
  • ☐ Video element updated
  • ☐ Preview feed displayed
  • ☐ Preview is active
 // Direct dispatch
window.dispatchEvent(new CustomEvent('CamMic:Preview:Start'));

// Or from button click
button.onclick = () => {
  window.dispatchEvent(new CustomEvent('CamMic:Preview:Start'));
};
Orchestrate Both How: Full orchestration flow: requests permissions, selects devices, starts streams, and enables video preview for both camera and microphone.

Why: Complete automated setup for video calls. Handles the entire workflow from permissions to active streams with preview.

Expected: Permissions requested, devices selected, streams started, video preview enabled. Completion event fired when done.
  • ☐ Event dispatched successfully
  • ☐ Permissions requested
  • ☐ Devices selected
  • ☐ Streams started
  • ☐ Video preview enabled
  • ☐ Completion event fired
 // Direct dispatch
window.dispatchEvent(new CustomEvent('CamMic:Orchestrate:Both'));

// Or from button click
button.onclick = () => {
  window.dispatchEvent(new CustomEvent('CamMic:Orchestrate:Both'));
};
Orchestrate Both (No Preview) How: Full orchestration flow without video preview: requests permissions, selects devices, starts streams, but does not enable video preview.

Why: Complete setup for audio-only calls or when preview should be manually controlled. Useful when video preview isn't needed immediately.

Expected: Permissions requested, devices selected, streams started, but video preview NOT enabled. Completion event fired when done.
  • ☐ Event dispatched successfully
  • ☐ Permissions requested
  • ☐ Devices selected
  • ☐ Streams started
  • ☐ Video preview NOT enabled
  • ☐ Completion event fired
 // Direct dispatch
window.dispatchEvent(new CustomEvent('CamMic:Orchestrate:Both:NoPreview'));

// Or from button click
button.onclick = () => {
  window.dispatchEvent(new CustomEvent('CamMic:Orchestrate:Both:NoPreview'));
};
Orchestrate Mic Only How: Full orchestration flow for microphone only: requests microphone permission, selects microphone device, starts audio stream.

Why: Complete automated setup for audio-only calls. Handles the entire workflow from permissions to active microphone stream.

Expected: Microphone permission requested, device selected, audio stream started. Completion event fired when done. No camera access.
  • ☐ Event dispatched successfully
  • ☐ Microphone permission requested
  • ☐ Microphone device selected
  • ☐ Audio stream started
  • ☐ No camera access
  • ☐ Completion event fired
 // Direct dispatch
window.dispatchEvent(new CustomEvent('CamMic:Orchestrate:Microphone'));

// Or from button click
button.onclick = () => {
  window.dispatchEvent(new CustomEvent('CamMic:Orchestrate:Microphone'));
};
Orchestrate Camera Only How: Full orchestration flow for camera only: requests camera permission, selects camera device, starts video stream, enables preview.

Why: Complete automated setup for video-only scenarios. Handles the entire workflow from permissions to active camera stream with preview.

Expected: Camera permission requested, device selected, video stream started, preview enabled. Completion event fired when done. No microphone access.
  • ☐ Event dispatched successfully
  • ☐ Camera permission requested
  • ☐ Camera device selected
  • ☐ Video stream started
  • ☐ Video preview enabled
  • ☐ No microphone access
  • ☐ Completion event fired
 // Direct dispatch
window.dispatchEvent(new CustomEvent('CamMic:Orchestrate:Camera'));

// Or from button click
button.onclick = () => {
  window.dispatchEvent(new CustomEvent('CamMic:Orchestrate:Camera'));
};
Orchestrate Camera Only (No Preview) How: Full orchestration flow for camera only without preview: requests camera permission, selects device, starts stream, but does not enable preview.

Why: Complete setup for camera access without automatic preview. Useful for photo capture or when preview should be manually controlled.

Expected: Camera permission requested, device selected, video stream started, but preview NOT enabled. Completion event fired when done.
  • ☐ Event dispatched successfully
  • ☐ Camera permission requested
  • ☐ Camera device selected
  • ☐ Video stream started
  • ☐ Video preview NOT enabled
  • ☐ Completion event fired
 // Direct dispatch
window.dispatchEvent(new CustomEvent('CamMic:Orchestrate:Camera:NoPreview'));

// Or from button click
button.onclick = () => {
  window.dispatchEvent(new CustomEvent('CamMic:Orchestrate:Camera:NoPreview'));
};
Get Device List How: Retrieves and displays the current list of available camera and microphone devices with their current selections.

Why: Shows current device state including which devices are available and which are currently selected. Useful for debugging and UI updates.

Expected: Device list is retrieved and logged. Shows available devices, selected devices, and device information. UI may be updated with device selections.
  • ☐ Event dispatched successfully
  • ☐ Device list retrieved
  • ☐ Available devices listed
  • ☐ Selected devices shown
  • ☐ Device information logged
 // Direct dispatch
window.dispatchEvent(new CustomEvent('CamMic:DeviceList:Check'));

// Or from button click
button.onclick = () => {
  window.dispatchEvent(new CustomEvent('CamMic:DeviceList:Check'));
};

Test Wait Flows Documentation

Title Action Description Checklist How to Wire Up
Both (Cam + Mic) How: Listens for test trigger, registers completion listener, dispatches orchestration event, waits for completion.

Why: Verifies async orchestration pattern works correctly with multiple event dispatches. Ensures completion is captured before proceeding.

Expected: Console logs show Start → Dispatch → Complete → SUCCESS (if permissions granted) or FAILED (if denied). Completion event contains mode: "both", success: boolean, permissions object.
  • ☐ Completion listener registered before dispatch
  • ☐ Orchestration event dispatched correctly
  • ☐ Completion event received with detail.success
  • ☐ Mode matches "both"
  • ☐ Permissions object contains camera and microphone states
  • ☐ Listener cleaned up after completion
 window.addEventListener('CamMic:Test:WaitFlow:Both', function() {
  const onComplete = (ev) => {
    window.removeEventListener('CamMic:Orchestrate:Complete', onComplete);
    const detail = ev.detail || {};
    // Handle success/failure
  };
  window.addEventListener('CamMic:Orchestrate:Complete', onComplete);
  window.dispatchEvent(new CustomEvent('CamMic:Orchestrate:Both'));
});

// Trigger: window.dispatchEvent(new CustomEvent('CamMic:Test:WaitFlow:Both'));
Microphone Only How: Same pattern as Both, but for microphone-only requests. Registers listener, dispatches microphone orchestration, waits for completion.

Why: Verifies microphone-only flows work independently. Tests that single-permission requests complete correctly without camera involvement.

Expected: Console logs show Start → Dispatch → Complete → SUCCESS (if mic granted) or FAILED. Completion event contains mode: "microphone", success: boolean, permissions object with microphone state.
  • ☐ Completion listener registered before dispatch
  • ☐ Microphone orchestration event dispatched
  • ☐ Completion event received with detail.success
  • ☐ Mode matches "microphone"
  • ☐ Only microphone permission checked (not camera)
  • ☐ Listener cleaned up after completion
 window.addEventListener('CamMic:Test:WaitFlow:Microphone', function() {
  const onComplete = (ev) => {
    window.removeEventListener('CamMic:Orchestrate:Complete', onComplete);
    const detail = ev.detail || {};
    // Handle success/failure
  };
  window.addEventListener('CamMic:Orchestrate:Complete', onComplete);
  window.dispatchEvent(new CustomEvent('CamMic:Orchestrate:Microphone'));
});

// Trigger: window.dispatchEvent(new CustomEvent('CamMic:Test:WaitFlow:Microphone'));
Camera Only How: Same pattern, but for camera-only requests with video preview enabled. Registers listener, dispatches camera orchestration, waits for completion.

Why: Verifies camera-only flows work independently with preview enabled. Tests permission requests and video preview activation together.

Expected: Console logs show Start → Dispatch → Complete → SUCCESS (if camera granted) or FAILED. Completion event contains mode: "camera", success: boolean, previewEnabled: true, permissions object.
  • ☐ Completion listener registered before dispatch
  • ☐ Camera orchestration event dispatched
  • ☐ Completion event received with detail.success
  • ☐ Mode matches "camera"
  • ☐ Video preview enabled (previewEnabled: true)
  • ☐ Only camera permission checked (not microphone)
  • ☐ Listener cleaned up after completion
 window.addEventListener('CamMic:Test:WaitFlow:Camera', function() {
  const onComplete = (ev) => {
    window.removeEventListener('CamMic:Orchestrate:Complete', onComplete);
    const detail = ev.detail || {};
    // Handle success/failure
  };
  window.addEventListener('CamMic:Orchestrate:Complete', onComplete);
  window.dispatchEvent(new CustomEvent('CamMic:Orchestrate:Camera'));
});

// Trigger: window.dispatchEvent(new CustomEvent('CamMic:Test:WaitFlow:Camera'));
Both (No Preview) How: Same pattern as Both, but with no preview flag. Requests both permissions without starting video preview automatically.

Why: Verifies permissions can be requested without automatic video preview. Useful for audio-only calls or when preview should be manually controlled.

Expected: Console logs show Start → Dispatch → Complete → SUCCESS (if permissions granted) or FAILED. Completion event contains mode: "both", success: boolean, previewEnabled: false, permissions object.
  • ☐ Completion listener registered before dispatch
  • ☐ Both orchestration event dispatched with NoPreview flag
  • ☐ Completion event received with detail.success
  • ☐ Mode matches "both"
  • ☐ Preview disabled (previewEnabled: false)
  • ☐ Both camera and microphone permissions checked
  • ☐ Video preview not started automatically
  • ☐ Listener cleaned up after completion
 window.addEventListener('CamMic:Test:WaitFlow:Both:NoPreview', function() {
  const onComplete = (ev) => {
    window.removeEventListener('CamMic:Orchestrate:Complete', onComplete);
    const detail = ev.detail || {};
    if (detail.success && detail.previewEnabled === false) {
      // Handle success without preview
    }
  };
  window.addEventListener('CamMic:Orchestrate:Complete', onComplete);
  window.dispatchEvent(new CustomEvent('CamMic:Orchestrate:Both:NoPreview'));
});

// Trigger: window.dispatchEvent(new CustomEvent('CamMic:Test:WaitFlow:Both:NoPreview'));
Camera Only (No Preview) How: Same pattern as Camera Only, but with no preview flag. Requests camera permission without starting video preview automatically.

Why: Verifies camera permissions can be requested without automatic preview. Useful when preview should be manually controlled or for photo capture scenarios without live preview.

Expected: Console logs show Start → Dispatch → Complete → SUCCESS (if camera granted) or FAILED. Completion event contains mode: "camera", success: boolean, previewEnabled: false, permissions object.
  • ☐ Completion listener registered before dispatch
  • ☐ Camera orchestration event dispatched with NoPreview flag
  • ☐ Completion event received with detail.success
  • ☐ Mode matches "camera"
  • ☐ Preview disabled (previewEnabled: false)
  • ☐ Only camera permission checked (not microphone)
  • ☐ Video preview not started automatically
  • ☐ Listener cleaned up after completion
 window.addEventListener('CamMic:Test:WaitFlow:Camera:NoPreview', function() {
  const onComplete = (ev) => {
    window.removeEventListener('CamMic:Orchestrate:Complete', onComplete);
    const detail = ev.detail || {};
    if (detail.success && detail.previewEnabled === false) {
      // Handle success without preview
    }
  };
  window.addEventListener('CamMic:Orchestrate:Complete', onComplete);
  window.dispatchEvent(new CustomEvent('CamMic:Orchestrate:Camera:NoPreview'));
});

// Trigger: window.dispatchEvent(new CustomEvent('CamMic:Test:WaitFlow:Camera:NoPreview'));

Status & Controls

Second Device Selection (Multiple Selects Demo)

This demonstrates that multiple select elements can be wired up and stay synchronized automatically.



Multiple Video Previews Demo

This demonstrates that multiple video preview elements with data-cam-preview attribute will sync with the master video automatically.

Preview 1

Preview 2

Preview 3

Camera:
Microphone: