Camera Selection Example

Minimum version: 3.1

An example of implementing the multiple_cameras event to hardcode a known device ID. Useful if you are orchestrating multiple steps with a previous step that may scan a document, for example.

ℹ️ Four Firefox caveats worth knowing before you build on this:

• The built-in switch-camera button is never shown on Firefox, whatever enable_camera_selector is set to. The multiple_cameras event still fires and the slot still populates, so on Firefox desktop this selector is the only way a user can change camera — which is the main reason to build it.
• When multiple video devices are attached, Firefox on desktop requests camera permission on every button click.
• The SDK does not support tiny video feeds, and re-prompts the user for a different camera. In Firefox that presents the camera prompt again with no further guidance.
• On Firefox for Android inside a cross-origin iframe the claim runs in a separate tab via the Iframe Bridge, so camera selection happens in that tab rather than in your page.

Note that the slot is managed for you: at the point multiple_cameras is dispatched, the select input will have all available devices as options. If there is only one device available then the event will not be called, and the slot will not display.

The slot will be visible at the ready event, until a streaming or error event is dispatched.

See https://github.com/iProov/web#-events for more details.

<div id="multiple-cameras" slot="camera_selector">
  <select class="iproov-camera-selector hidden"></select>
</div>

const element = document.createElement("iproov-me");
element.setAttribute("token", "***YOUR_TOKEN_HERE***");
element.setAttribute("enable_camera_selector", true); // IMPORTANT!

function onMultipleCameras(event) {
  const { devices, device_selector, slot } = event.detail
  device_selector.value = 'my-custom-device-id'
  
}
element.addEventListener("multiple_cameras", onMultipleCameras);

document.getElementById("iproov-me").appendChild(element);