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.

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);