From ea3b730be7076ea268314527b5d85e15a6fc82cd Mon Sep 17 00:00:00 2001 From: Will Morgan Date: Tue, 3 Nov 2020 16:55:40 +0000 Subject: [PATCH] 3.1.0-beta.0 --- CHANGELOG.md | 74 ++++++++++++++++++++++++++++++++-------------------- README.md | 57 +++++++++++++++++++++------------------- 2 files changed, 76 insertions(+), 55 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e7a1e81..52e5014 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,46 +5,64 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). -## XX.10.2020 3.1.0 +## XX.11.2020 3.1.0 ## Added +- Desktop device support for Liveness. We no longer require a mobile device for Liveness transactions. - `iProovSupport` is a separate export to facilitate a smaller critical bundle size for integrators. - - Using a module bundler you can run `import { iProovSupport } from "@iproov/web/iProovSupport"` - - Script tag integrations can still access `window.IProov.IProovSupport` for the time being. + - Using a module bundler you can run `import { iProovSupport } from "@iproov/web/iProovSupport"` + - Script tag integrations can still access `window.IProov.IProovSupport` for the time being. - `version` property on the `iProovMe` component. - - This is also accessible on `window.IProov.version`. + - This is also accessible on `window.IProov.version`. - External dependencies are now loaded with `` for non-blocking parallel loading. -- `sideEffects` and `type` props have been added to the distribution's `package.json`. - - This adds a hint to bundlers like Webpack and Rollup to make tree shaking easier, resulting in smaller bundle sizes. - - In the long term, once Webpack 5 is released, we intend to provide an ESM build for maximum tree shaking! +- Our feature detector now runs the latest Tensorflow release which supports WebAssembly threads and SIMD. + +## Fixed + +- Further performance improvements targeted at lower end machines which have a net-positive effect across the board. ## Changed - Bundling and modularisation upgrades. - - Dependencies are once again modular, and will be loaded as needed. - - This reduces the bundle size from 4MB (plus dependencies) to around 1.3MB gzipped (including dependencies). - - With the iProovSupport change, the pre-gzip impact to an integration's critical bundle is 16KB raw (was 4MB). - - With that, `assets_url`'s meaning is changing again, we're afraid... - - Customers now have a choice to either serve Web SDK assets "on premises", use our CDN, or reverse proxy. - - This affects CDN and reverse proxy configurations; we do hope this is the last change to asset loading for a long time. - - Please see the upgrade guide for steps needed. + - Dependencies are once again modular, and will be loaded as needed. + - This reduces the bundle size from 4MB (plus dependencies) to around 1.3MB gzipped (including dependencies). + - With the iProovSupport change, the pre-gzip impact to an integration's critical bundle is 16KB raw (was 4MB). + - With that, `assets_url`'s meaning is changing again, we're afraid... + - Customers now have a choice to either serve Web SDK assets "on premises", use our CDN, or reverse proxy. + - This affects CDN and reverse proxy configurations; we do hope this is the last change to asset loading for a long time. + - Please see the upgrade guide for steps needed. - The main entry file for the npm package is now `iProovMe.js`. - Improved our encoder for better speed and the latest bugfixes. ## Removed - Automatic transpilation for the following outdated browsers: - - Blackberry < 10 - - Edge < 84 - - Firefox < 80 - - IE < 11 - - IE Mobile (all) - - iOS Safari < 13.4 - - Opera < 70 - - Safari < 13.1 - - Please see `.browserslistrc` for the current targeted browsers. - - If your app must support older browsers, simply transpile the standalone `iProovSupport.js` checker as needed. + - Blackberry < 10 + - Edge < 84 + - Firefox < 80 + - IE < 11 + - IE Mobile (all) + - iOS Safari < 13.4 + - Opera < 70 + - Safari < 13.1 + - Please see `.browserslistrc` for the current targeted browsers. + - If your app must support older browsers, simply transpile the standalone `iProovSupport.js` checker as needed. + +## 23.10.2020 3.0.3 + +## Fixed + +- Liveness: UX issues with Android devices +- Interrupted event: occasional issues when retrying when the interrupted event was fired have been resolved. +- Kiosk mode: Missing overlay during scanning has been restored. + +## Changed + +- Kiosk mode: face position smoothing is slightly faster. +- Alignment experience: rendering is no longer limited to 30 FPS across all browsers. +- Imagery quality: Safari now sends 720p if available, falling back to VGA. +- Dependencies: we no longer list dependencies in our distributed package.json, as they are already bundled and optimized as part of the build. ## 01.10.2020 3.0.2 @@ -84,10 +102,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Liveness transaction support for mobile devices. - Language strings for Liveness transactions: - - `progress_assessing_liveness` - - `prompt_liveness_align_face` - - `prompt_liveness_no_face` - - `prompt_liveness_scan_completed` + - `progress_assessing_liveness` + - `prompt_liveness_align_face` + - `prompt_liveness_no_face` + - `prompt_liveness_scan_completed` - The "interrupted" event and slot have been added, which allow users to retry should a fast exit from fullscreen occur. This rarely happens but can be caused by software launched automatically as a result of webcam usage. - Two new language strings, `prompt_kiosk_align_face` and `prompt_kiosk_keep_still` have been added. See iproov-en.json for English translations. diff --git a/README.md b/README.md index f126efe..5d93cc3 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# iProov Biometrics Web SDK v3.1.0-alpha.0 +# iProov Biometrics Web SDK v3.1.0-beta.0 ## 📖 Table of contents @@ -114,7 +114,7 @@ The simplest way to pass the token to iProov is to include it as an attribute to The `` element can also be injected into the page with the token: ```javascript -window.addEventListener("WebComponentsReady", function(event) { +window.addEventListener("WebComponentsReady", function (event) { const iProovMe = document.createElement("iproov-me") iProovMe.setAttribute("token", "***YOUR_TOKEN_HERE***") document.getElementById("your-container-id").appendChild(iProovMe) @@ -126,7 +126,7 @@ window.addEventListener("WebComponentsReady", function(event) { The HTML can also be injected directly onto the page as in this jQuery example: ```javascript -window.addEventListener("WebComponentsReady", function(event) { +window.addEventListener("WebComponentsReady", function (event) { $("#your-container-id").append($('')) }) ``` @@ -213,10 +213,10 @@ The example below changes the default grey no face to `#4293f5` (blue), giving f #### Allow Landscape -Mobile devices are by default prevented from iProoving while in landscape. This feature can be disabled by passing `allow_landscape` `true` with your component as shown below. +Handheld devices except Android Tablets are prevented from iProoving while in landscape orientation by displaying the `rotate_portrait` slot. All other devices by default are allowed in landscape orientation. This logic can be altered by passing `allow_landscape` as `false` with your component. See [slots](#-slots) for details on how to override the `rotate_portrait` slot. The example below would prevent all devices from being able to iProov while in landscape orientation. ```html - + ``` #### Show Countdown @@ -267,7 +267,7 @@ The simplest way to add a slot is to include it within the `` HTML ta You can also build up the slots with JavaScript before injecting the Web Component: ```javascript -window.addEventListener("WebComponentsReady", function(event) { +window.addEventListener("WebComponentsReady", function (event) { const iProovMe = document.createElement("iproov-me") iProovMe.setAttribute("token", "***YOUR_TOKEN_HERE***") const ready = document.createElement("div") @@ -287,7 +287,7 @@ window.addEventListener("WebComponentsReady", function(event) { With [jQuery](https://jquery.com), the entire Web Component can be injected with slots using HTML syntax, for example: ```javascript -window.addEventListener("WebComponentsReady", function(event) { +window.addEventListener("WebComponentsReady", function (event) { const iProovMe = $('') iProovMe.append('

Register your face

') @@ -312,21 +312,24 @@ To allow language keys to be dynamically applied to slots, special class names m The following is the complete list of slots can be used with the `` web component and have associated [events](#-events): -| Slot | Description | -| --------------------- | --------------------------------------------------------------------------------------------- | -| **button** | Element that a user taps or clicks on to launch into fullscreen and start iProov | -| **ready** | State displayed to the user when the component is ready to start the main iProov user journey | -| **cancelled** | State displayed to the user when they exit fullscreen before iProoving | -| **interrupted** | State displayed to the user when fullscreen quickly exits after launch, maybe due to software | -| **progress** | State displayed to the user when streaming has completed and iProov is processing the result | -| **passed** | State displayed to the user when the user passed iProov | -| **failed** | State displayed to the user when the user failed iProov | -| **error** | State displayed to the user in the event of an error | -| **unsupported** | State displayed to the user when their browser is not supported | -| **permission_denied** | State displayed to the user when camera permission has been blocked | -| **grant_permission** | State displayed to the user when camera permission is unknown and not blocked | -| **grant_button** | Element that user taps or clicks to grant camera permission | -| **no_camera** | State displayed to the user when there is no camera | +| Slot | Description | +| --------------------- | --------------------------------------------------------------------------------------------------------------------------- | +| **button** | Element that a user taps or clicks on to launch into fullscreen and start iProov | +| **cancelled** | State displayed to the user when they exit fullscreen before iProoving | +| **error** | State displayed to the user in the event of an error | +| **failed** | State displayed to the user when the user failed iProov | +| **grant_button** | Element that user taps or clicks to grant camera permission | +| **grant_permission** | State displayed to the user when camera permission is unknown and not blocked | +| **interrupted** | State displayed to the user when fullscreen quickly exits after launch, maybe due to software | +| **no_camera** | State displayed to the user when there is no camera | +| **passed** | State displayed to the user when the user passed iProov | +| **permission_denied** | State displayed to the user when camera permission has been blocked | +| **progress** | State displayed to the user when streaming has completed and iProov is processing the result | +| **ready** | State displayed to the user when the component is ready to start the main iProov user journey | +| **rotate_portrait** * | State displayed to the user when a handheld device is not in portrait orientation | +| **unsupported** | State displayed to the user when their browser is not supported | + +> \* See [allow landscape](#-allow-landscape) option which controls the behaviour of the `rotate_portrait` slot and details on how to override. Slots can be embedded as HTML or injected with JavaScript. @@ -407,10 +410,10 @@ In the case of the **cancelled**, **interrupted**, **failed**, **error** and **u We recommend the integrator listens for at least the **ready** and **unsupported** events because one of them will always be called, so you can determine if iProov is supported or not: ```javascript -document.querySelector("iproov-me").addEventListener("ready", function(event) { +document.querySelector("iproov-me").addEventListener("ready", function (event) { console.log("iProov is ready") }) -document.querySelector("iproov-me").addEventListener("unsupported", function(event) { +document.querySelector("iproov-me").addEventListener("unsupported", function (event) { console.warn("iProov is not supported: " + event.detail.reason) }) ``` @@ -465,14 +468,14 @@ $("iproov-me").on("ready started cancelled interrupted streamed progress passed The Web SDK ships with English strings only. If you wish to customise the strings in the app or localize them into a different language, you can do this by supplying language overrides as JSON configurations. All language files have the same keys and only the values of those keys will be shown. -- [View the default language file with all keys and langauge striengs](https://github.com/iProov/web/blob/master/iproov-en.json) +- [View the default language file with all keys and language strings](https://github.com/iProov/web/blob/master/iproov-en.json) You can customise the language by supplying the `language` key as an attribute to your iProov component. The keys value must be valid JSON and passed as a string. This is then converted and merged with the default language overriding any given keys. See below for some examples. ### Override language strings ```javascript -window.addEventListener("WebComponentsReady", event => { +window.addEventListener("WebComponentsReady", (event) => { const iProovMe = document.createElement("iproov-me") iProovMe.setAttribute("token", "***YOUR_TOKEN_HERE***") @@ -490,7 +493,7 @@ window.addEventListener("WebComponentsReady", event => { #### Load language file ```javascript -window.addEventListener("WebComponentsReady", async event => { +window.addEventListener("WebComponentsReady", async (event) => { async function getLanguage(path) { const response = await fetch(path) const language = await response.text()