Skip to content

User Gestures

Josselin Guillozet edited this page Sep 27, 2023 · 1 revision

Web SDK User Gesture Restrictions

SDK Compatibility

Web SDK v5.0.0 and onwards - Permissions required: Motion (GPA and Liveness), Fullscreen

Prior to Web SDK v5.0.0 - Permissions required: Motion (Liveness), Fullscreen

Note: 📷 Camera permission prompt request can be initiated without a user gesture. See MDN docs for a more detailed description of media device permissions.

What are they?

A user gesture is an action performed by the end user i.e. clicking a button. Browsers enforce restrictions on fullscreen and motion data by only allowing access if there has been a user gesture in a given time that can vary across browsers.

What does this mean for integrators using the Web SDK?

The Web SDK has the following flow for obtaining motion permissions and going into full screen:

Show grant_button and fire permission event if we don’t know or have camera permission. Not bound by a user gesture.

Wherever available, motion permission is requested, this requires a user gesture which is taken from the start button click. Bound by a user gesture only in iOS and iPadOS.

Using the same user gesture, a full screen request is made except for on iOS devices due to the permission prompt being behind the fullscreened element. Bound by a user gesture.

What are the consequences of circumventing user gestures?

  • Fullscreen failure: the SDK will still run but maximum exposure to light is an important biometric requirement and not being in fullscreen has a detrimental effect.
  • Unexpected behavior: the SDK is tested in a multitude of browsers, devices, setups and scenarios. By circumventing our design, you may experience unexpected side effects and issues leading to lower pass rates and user experience issues.
  • Motion data permission: in some browsers is required and by avoiding a user gesture access would be denied resulting in an error which would end the claim.

Code Example

// your standard integration
document.querySelector("#my-container").insertAdjacentElement(iProovMe)

iProovMe.addEventListener("ready", (event) {
    // NOT RECOMMENDED 👎
    // Will lead to potential motion data permission
    // errors and cause opening in full screen to fail
    myCustomButton.click()
})