Switch Camera

When you have multiple camera devices, you can choose to use one of them.

Note: The SDK only manages the initial device list. If you need to handle dynamic device changes (e.g., when a user plugs in a new camera), you must implement the device change detection and UI update logic in your application layer.

Get Available Camera Devices

Get the list of available camera devices and populate the select menu:

// Create a function to update the camera device list
const updateCameraList = async () => {
  const cameraSelect = await arctosSdkInstance.$meetingRoom.getCameraDevices();
  const selectElement = document.querySelector('#switch-camera-select');
  
  // Clear existing options
  selectElement.innerHTML = '';
  
  // Rebuild the options
  cameraSelect.forEach(element => {
    var option = document.createElement("option");
    option.text = element.label;
    option.value = element.deviceId;
    selectElement.appendChild(option);
  });
};

// Initialize camera list
await updateCameraList();

Detect Device Changes (Application Layer Implementation)

To automatically update the device list when cameras are added or removed, implement device change detection:

// Listen for device changes
navigator.mediaDevices.ondevicechange = async () => {
  console.log('Device changed, updating camera list');
  await updateCameraList();
};

This ensures that when users plug in or unplug camera devices, the select menu automatically reflects the current available devices.

Switch Camera Device

Click the select menu to switch between available camera devices:

// Select camera to use
SwitchCamera = async function (e) {
  let num = document.querySelector('#switch-camera-select').value;
  arctosSdkInstance.$meetingRoom.setCameraDevice(num);
};

Toggle Camera On/Off

Toggle the user's camera in the room on or off:

// Toggle the camera on or off
toggleCameraClick = async function () {
  arctosSdkInstance.$meetingRoom.toggleCamera();
};

Change Camera Resolution

Change the camera resolution. Supported resolutions are:

  • 480-fixed / 480-dynamic (640x480)
  • 720-fixed / 720-dynamic (1280x720)
  • 1080-fixed / 1080-dynamic (1920x1080)
// Change the camera resolution
arctosSdkInstance.$meetingRoom.setCameraResolution('720-fixed');
arctosSdkInstance.$meetingRoom.setCameraResolution('720-dynamic');
arctosSdkInstance.$meetingRoom.setCameraResolution('1080-fixed');
arctosSdkInstance.$meetingRoom.setCameraResolution('1080-dynamic');
arctosSdkInstance.$meetingRoom.setCameraResolution('480-fixed');
arctosSdkInstance.$meetingRoom.setCameraResolution('480-dynamic');

Complete Sample Code

The following sample demonstrates:

  • Getting initial camera devices
  • Implementing device change detection
  • Automatically updating the device list when cameras are added/removed
  • Switching between cameras
  • Changing camera resolution

Sample Code