if i disconnect my camera device while that camera is selected i want to switch to a different camera, how can i do that? Currently my video is off and when i try to switch it just shows a blank black screen

Thanks for reaching out, Dev. I'm an AI assistant and I'm here to help. Give me a moment while I research this topic.

I'm getting OverconstrainedError when switching camera after it has been disconnected This is my code

async change_camera(cam_id: string) {
		if (!this.participant) {
			return;
		}
		if (!this.cam_on) {
			this.cam_id = cam_id;
			return;
		}
		this.cam_id = cam_id;
		try {
			
			await this.participant.setCameraEnabled(false);
			await this.participant.setCameraEnabled(true, {
				deviceId: { exact: this.cam_id }
			});
			if (this.room.getActiveDevice('videoinput') !== this.cam_id) {
				await this.room.switchActiveDevice('videoinput', this.cam_id);
			}
			this.participant.videoTrackPublications.forEach(e=>e.videoTrack?.restartTrack({
				deviceId: { exact: this.cam_id }
			}));
		} catch (error) {
			console.error('Error changing camera:', error);
		}

		
	}

Thanks — I see you’re hitting an OverconstrainedError when switching cameras after the current camera was disconnected. I reviewed your code and the likely causes; below I’ll explain why this happens and give a safer, working pattern you can adopt. I’ll also ask a couple quick questions so I can tailor the fix if needed. Why the OverconstrainedError happens • OverconstrainedError occurs when getUserMedia() is asked for a device constraint that the browser cannot satisfy — e.g., the requested

deviceId

no longer exists because the camera was unplugged or the device list changed. • In your code you: disable and immediately re-enable the camera, then call switchActiveDevice and restartTrack. Multiple concurrent requests and using a stale

deviceId

can produce conflicting requests and cause OverconstrainedError. • Restarting tracks manually while also calling

setCameraEnabled(true)

duplicates work and may produce race conditions. Recommended approach (what to change) • Verify the requested camera

deviceId

exists before trying to use it. • Wait for the camera to fully stop before trying to reacquire a device. • Use one single flow to re-acquire the camera (either use

setCameraEnabled(true, { deviceId })

or manually create a new LocalVideoTrack and call

replaceTrack()

), don’t do both at once. • Provide a graceful fallback when the exact device isn’t available (e.g., pick any available camera). Safer implementation you can try (TypeScript / LiveKit) 1. Check available devices with

room.getMediaDevices('videoinput')

(or

navigator.mediaDevices.enumerateDevices()

). 2. If the requested

cam_id

exists, proceed; otherwise pick a fallback. 3. Disable camera, wait for that to complete, then enable with the device constraint OR create a new track and replace. Example pattern (adapt to your app):

async change_camera(cam_id: string) {
  if (!this.participant) return;

  // If camera is off, just set the id for later
  if (!this.cam_on) {
    this.cam_id = cam_id;
    return;
  }

  // Ensure device is currently available
  const videoDevices = await this.room.getMediaDevices('videoinput');
  const device = videoDevices.find(d => d.deviceId === cam_id);

  // If requested device is gone, pick any available camera as fallback
  const targetDeviceId = device ? cam_id : (videoDevices[0]?.deviceId ?? null);
  if (!targetDeviceId) {
    console.error('No camera available to switch to.');
    return;
  }

  this.cam_id = targetDeviceId;

  try {
    // Stop current camera and wait
    await this.participant.setCameraEnabled(false);

    // Option A: Let LiveKit re-acquire using setCameraEnabled (recommended for simple flows)
    await this.participant.setCameraEnabled(true, {
      deviceId: { exact: targetDeviceId }
    });

    // Optionally: ensure room.active device is updated
    if (this.room.getActiveDevice('videoinput') !== targetDeviceId) {
      await this.room.switchActiveDevice('videoinput', targetDeviceId);
    }

    // Do NOT also call restartTrack() here — setCameraEnabled handles it.
  } catch (error: any) {
    console.error('Error changing camera:', error);

    // Handle OverconstrainedError with fallback
    if (error?.name === 'OverconstrainedError' || error?.message?.includes('Overconstrained')) {
      console.warn('Requested camera unavailable; falling back to any available camera.');
      try {
        // Fallback: enable camera without exact deviceId to pick default
        await this.participant.setCameraEnabled(true);
      } catch (err) {
        console.error('Fallback camera enable failed:', err);
      }
    }
  }
}

If you prefer manually creating and replacing the track (Option B) • Create a new LocalVideoTrack with

LocalVideoTrack.createCameraTrack({ deviceId: { exact: targetDeviceId } })

• Call

room.localParticipant.replaceTrack(oldLocalTrack, newLocalTrack)

• This gives you finer control and avoids some built-in re-acquire logic; again, don’t call both. Extra tips • Listen for device changes proactively with

navigator.mediaDevices.ondevicechange

(or the SDK device change hooks) and update available device list accordingly. • If the camera was physically unplugged, device IDs may change—always validate against

enumerateDevices()

before requesting by

deviceId

. • Avoid simultaneous calls that ask the browser for media devices with conflicting constraints. Quick questions to help me refine this for you • Which LiveKit JS client version are you using? • Which browser(s) are you testing on? • Do you create your initial camera track with LiveKit APIs (e.g.,

setCameraEnabled

or

LocalVideoTrack.createCameraTrack

)? Give me those details and I’ll adapt the sample to match your SDK version and browser quirks. Sources: Configuring the LiveKit Client SDK for Optimal Video Quality | LiveKit | An introduction to WebRTC Simulcast | Optimizing Video Calls for Low-Powered Devices | LiveKit | client-sdk-js | livekit/livekit_composite | DeepWiki | client-sdk-android | livekit/livekit_composite | DeepWiki