Camera Selection Example

Target version: 3.1

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");
  // clear previous
  target.innerHTML = "";
  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);