Camera Selection Example

An example of implementing the multiple_cameras event. See https://github.com/iProov/web#-events for more details.

<div id="multiple-cameras" style="display: none;">
  <input type="hidden" class="iproov-device-id" />
  <h2>Select a Device</h2>
  <ul></ul>
</div>
<div id="iproov-container"></div>

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

const multipleCameras = (event) => {
  // only show the iproov container when we have a device id
  const iProov = document.getElementById("iproov-container")
  iProov.style.display = "none"

  // make a list from the devices for selection
  const container = document.querySelector("#multiple-cameras")
  const target = container.querySelector("ul")
  const { devices } = event.detail
  devices.forEach(device => {
    const listItem = document.createElement("li")
    listItem.dataset.deviceId = device.deviceId
    listItem.textContent = device.label
    // hidden input which contains the selected deviceId read by the iproov component and is required
    const iProovDeviceID = document.querySelector(".iproov-device-id")
    listItem.addEventListener("click", event => {
      const el = event.target
      const { deviceId } = el.dataset
      iProovDeviceID.value = deviceId
      iProov.style.display = "block"
    })
    target.insertAdjacentElement("afterbegin", listItem)
  });

  // show the camera selection when ready
  container.style.display = "block"
}
element.addEventListener("multiple_cameras", multipleCameras)

document.getElementById("iproov-container").appendChild(element)