@smileid/web-components 1.0.0-beta → 1.0.1-beta

package/README.md

@@ -0,0 +1,15 @@
+# Instructions
+
+These components can be used to capture id document or liveness images
+
+1. [`smart-camera-web`](./components/smart-camera-web/src/)
+2. [`document-capture-screens`](./components/document/src/README.md)
+3. [`selfie-capture-screens`](./components/selfie/README.md)
+
+## Orchestration
+
+To build your own flow, we have several components that can be used together
+
+### document-capture-instructions
+
+This is the screen used to instruct the user how to capture document using both the camera and/or upload.

package/components/README.md

@@ -2,7 +2,7 @@
 
 These components can be used to capture id document or liveness images
 
-1. [`document-capture-screens`](./document/README.md)
+1. [`document-capture-screens`](./document/src/README.md)
 2. [`selfie-capture-screens`](./selfie/README.md)
 
 ## Orchestration

package/components/document/src/DocumentCaptureScreens.js

@@ -107,7 +107,7 @@ class DocumentCaptureScreens extends HTMLElement {
     this.documentInstruction.addEventListener(
       'document-capture-instructions.upload',
       async (event) => {
-        this.idReview.setAttribute('data-image', event.detail.image);
+        this.idReview.setAttribute('data-image', event.detail.previewImage);
         this._data.images.push({
           image: event.detail.image.split(',')[1],
           image_type_id: IMAGE_TYPE.ID_CARD_IMAGE_BASE64,
@@ -117,7 +117,7 @@ class DocumentCaptureScreens extends HTMLElement {
     );
 
     this.idCapture.addEventListener('document-capture.publish', (event) => {
-      this.idReview.setAttribute('data-image', event.detail.image);
+      this.idReview.setAttribute('data-image', event.detail.previewImage);
       this._data.images.push({
         image: event.detail.image.split(',')[1],
         image_type_id: IMAGE_TYPE.ID_CARD_IMAGE_BASE64,
@@ -305,6 +305,30 @@ class DocumentCaptureScreens extends HTMLElement {
     screen.removeAttribute('hidden');
     this.activeScreen = screen;
   }
+
+  static get observedAttributes() {
+    return [
+      'document-capture-modes',
+      'document-type',
+      'hide-back-to-host',
+      'show-navigation',
+      'hide-back-of-id',
+    ];
+  }
+
+  attributeChangedCallback(name) {
+    switch (name) {
+      case 'document-capture-modes':
+      case 'document-type':
+      case 'hide-back-of-id':
+      case 'hide-back-to-host':
+      case 'show-navigation':
+        this.connectedCallback();
+        break;
+      default:
+        break;
+    }
+  }
 }
 
 if (

package/components/document/src/README.md

@@ -2,11 +2,12 @@
 
 ## Overview
 
-The `DocumentCapture` is a bespoke web component designed for capturing document images using a camera. It leverages the `SmartCamera` module for camera interaction and permission management.
+The `DocumentCaptureScreens` is a bespoke web component designed for capturing document images using a camera. It leverages the `SmartCamera` module for camera interaction and permission management.
+This component contains the flow for capturing both front and the back of id documents.
 
 ### Importing the Component
 
-To utilize the DocumentCapture component within your project, import it into your JavaScript file as follows:
+To utilize the `DocumentCaptureScreens` component within your project, import it into your JavaScript file as follows:
 
 ```js
 import '@smileid/components/document-capture';
@@ -17,7 +18,7 @@ import '@smileid/components/document-capture';
 The DocumentCapture component can be embedded in your HTML similarly to any standard HTML element:
 
 ```html
-<document-capture></document-capture>
+<document-capture-screens></document-capture-screens>
 ```
 
 ### Attributes
@@ -29,7 +30,7 @@ Customize the component's behavior with the following attributes:
 Omits the capture instructions. This attribute is boolean and does not require a value.
 
 ```html
-<document-capture hide-instructions></document-capture>
+<document-capture-screens hide-instructions></document-capture-screens>
 ```
 
 #### `hide-back-of-id`
@@ -37,7 +38,7 @@ Omits the capture instructions. This attribute is boolean and does not require a
 Excludes the option to capture the ID's back side. This attribute is boolean.
 
 ```html
-<document-capture hide-back-of-id></document-capture>
+<document-capture-screens hide-back-of-id></document-capture-screens>
 ```
 
 #### `show-navigation`
@@ -45,7 +46,7 @@ Excludes the option to capture the ID's back side. This attribute is boolean.
 Displays navigation controls for the capture process. This attribute is boolean.
 
 ```html
-<document-capture show-navigation></document-capture>
+<document-capture-screens show-navigation></document-capture-screens>
 ```
 
 #### `document-capture-modes`
@@ -53,7 +54,9 @@ Displays navigation controls for the capture process. This attribute is boolean.
 Specifies the capture modes, accepting `camera`, `upload`, or both. Value required.
 
 ```html
-<document-capture document-capture-modes="camera,upload"></document-capture>
+<document-capture-screens
+  document-capture-modes="camera,upload"
+></document-capture-screens>
 ```
 
 ### Permissions
@@ -85,7 +88,7 @@ To handle this event:
 
 ```js
 document
-  .querySelector('document-capture')
+  .querySelector('document-capture-screens')
   .addEventListener('document-capture-screens.publish', function (event) {
     console.log(event.detail);
   });

package/components/document/src/document-capture/DocumentCapture.js

@@ -290,26 +290,13 @@ class DocumentCapture extends HTMLElement {
       );
 
       const image = croppedCanvas.toDataURL('image/jpeg');
-      console.warn('this.idCardRegion', this.idCardRegion);
-
-      const videoContainer = this.shadowRoot.querySelector(
-        '.id-video-container',
-      );
-      const oldCroppedImage = videoContainer.querySelector(
-        'image#preview-cropped-image',
-      );
-      if (oldCroppedImage) {
-        videoContainer.removeChild(oldCroppedImage);
-      }
-      const croppedImage = document.createElement('img');
-      croppedImage.id = 'preview-cropped-image';
-      croppedImage.src = image;
-      videoContainer.appendChild(croppedImage);
+      const previewImage = image;
 
       return {
-        image: croppedCanvas.toDataURL('image/jpeg'),
+        image,
         originalHeight: canvas.height,
         originalWidth: canvas.width,
+        previewImage,
         ...this.idCardRegion,
       };
     }
@@ -362,6 +349,7 @@ class DocumentCapture extends HTMLElement {
         image,
         originalHeight: canvas.height,
         originalWidth: canvas.width,
+        previewImage: image,
         ...this.idCardRegion,
       };
     }
@@ -369,11 +357,13 @@ class DocumentCapture extends HTMLElement {
     const height = canvas.width / (video.videoWidth / video.videoHeight);
     canvas.height = height;
     context.drawImage(video, 0, 0, canvas.width, canvas.height);
+    const image = canvas.toDataURL('image/jpeg');
 
     return {
-      image: canvas.toDataURL('image/jpeg'),
+      image,
       originalHeight: canvas.height,
       originalWidth: canvas.width,
+      previewImage: image,
       ...this.idCardRegion,
     };
   }

package/components/document/src/document-capture/README.md

@@ -61,7 +61,8 @@ To receive the images after they have been captured, you can listen to the custo
 ```json
 {
   "detail": {
-    "image": "base64 image"
+    "image": "base64 image",
+    "previewImage": "base64 image"
   }
 }
 ```
@@ -78,11 +79,11 @@ document
 
 ### Dependencies
 
-The `IdCapture` component depends on the following module:
+The `DocumentCapture` component depends on the following module:
 
-- SmartCamera
+- [SmartCamera](../../../../domain/camera/src/README.md)
 
-This module is imported when you use the `IdCapture` component in your projects.
+This module is imported when you use the `DocumentCapture` component in your projects.
 
 ### Compatibility
 

package/components/document/src/document-capture-review/README.md

@@ -1,10 +1,10 @@
-# IdReview Web Component
+# DocumentCaptureReview Web Component
 
-The `IdReview` component is designed to facilitate user interaction by allowing them to review and verify the accuracy of captured images. Users have the option to accept the captured image or initiate a recapture if necessary.
+The `DocumentCaptureReview` component is designed to facilitate user interaction by allowing them to review and verify the accuracy of captured images. Users have the option to accept the captured image or initiate a recapture if necessary.
 
 ## Usage
 
-To integrate the `IdReview` component into your web application, insert the custom HTML tag as follows, specifying attributes for the captured image data and optional features like navigation controls:
+To integrate the `DocumentCaptureReview` component into your web application, insert the custom HTML tag as follows, specifying attributes for the captured image data and optional features like navigation controls:
 
 ```html
 <document-capture-review

package/components/selfie/README.md

@@ -84,12 +84,36 @@ document
 The `SelfieCaptureScreens` component depends on the following modules:
 
 - [selfie-capture](#selfiecapture-web-component)
-- [selfie-capture-review](#selfie-capture-review-web-component)
-- Selfie-instructions
-- SmartCamera
+- [selfie-capture-review](#selfiecapturereview-web-component)
+- [Selfie-instructions](#selfiecaptureinstructions-web-component)
+- [SmartCamera](../../domain/camera/src/README.md)
 
 These modules are imported when you use the `SelfieCaptureScreens` component in your projects.
 
+### SelfieCaptureInstructions Web Component
+
+#### Overview
+
+The `SelfieCaptureInstructions` is a custom web component designed to show an instruction on how to capture a clear selfie image.
+
+#### Importing the SelfieCaptureInstructions Component
+
+To use the SelfieCaptureInstructions component, you need to import it into your JavaScript file:
+
+```js
+import '@smileid/web-components/selfie-capture-instructions';
+```
+
+#### show-navigation
+
+This attribute, when present, shows the navigation controls for the document capture process. It does not require a value.
+
+Usage:
+
+```html
+<selfie-capture-instructions show-navigation></selfie-capture-instructions>
+```
+
 ### SelfieCapture Web Component
 
 #### Overview
@@ -104,7 +128,7 @@ To use the SelfieCapture component, you need to import it into your JavaScript f
 import '@smileid/web-components/selfie-capture';
 ```
 
-### Using the Component
+### Using the SelfieCapture Component
 
 You can use the SelfieCapture component in your HTML like any other HTML element:
 

package/components/selfie/src/selfie-capture/SelfieCapture.js

@@ -635,6 +635,7 @@ class SelfieCaptureScreen extends HTMLElement {
 
       const totalNoOfFrames = this._rawImages.length;
       this._data.referenceImage = this._referenceImage;
+      this._data.previewImage = this._referenceImage;
 
       const livenessFramesIndices = getLivenessFramesIndices(totalNoOfFrames);
 

package/components/selfie/src/selfie-capture-instructions/SelfieCaptureInstructions.stories.js

@@ -10,7 +10,6 @@ export const SelfieInstruction = {
   render: () => `
         <selfie-capture-instructions
             show-navigation
-            selfie-capture-modes="camera,upload"
         >
         </selfie-capture-instructions>
     `,

package/components/signature-pad/package.json

@@ -21,9 +21,9 @@
     "eslint": "^8.57.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-cypress": "^2.15.1",
+    "eslint-plugin-cypress": "^3.0.2",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jest": "^28.2.0",
+    "eslint-plugin-jest": "^28.5.0",
     "eslint-plugin-prettier": "^5.1.3",
     "prettier": "^3.2.2"
   }

package/components/smart-camera-web/src/README.md

@@ -0,0 +1,207 @@
+# SmartCameraWeb
+
+`SmartCameraWeb` is a [Web Component](https://developer.mozilla.org/en-US/docs/Web/Web_Components) designed to capture images including selfies, liveness images, and ID Document images for use with SmileIdentity. It interfaces with the [Server to Server](https://docs.usesmileid.com/server-to-server) libraries, serving as a user interface client.
+
+Explore an [example full stack integration](https://glitch.com/edit/#!/smart-camera-web-demo-node) using our [NodeJS](https://docs.usesmileid.com/server-to-server/javascript) library.
+
+## Getting Started
+
+To integrate `SmartCameraWeb`, follow these steps:
+
+- [SmartCameraWeb](#smartcameraweb)
+  - [Getting Started](#getting-started)
+    - [Choose a Server to Server Library](#choose-a-server-to-server-library)
+    - [Installation](#installation)
+      - [Install Via NPM](#install-via-npm)
+    - [Usage](#usage)
+  - [Compatibility](#compatibility)
+  - [Support](#support)
+  - [Development](#development)
+
+### Choose a Server to Server Library
+
+Supported [Server to Server Libraries](https://docs.usesmileid.com/server-to-server) include:
+
+- [Java](https://docs.usesmileid.com/server-to-server/java)
+- [NodeJS](https://docs.usesmileid.com/server-to-server/javascript)
+- [PHP](https://docs.usesmileid.com/server-to-server/php)
+- [Python](https://docs.usesmileid.com/server-to-server/python)
+- [Ruby](https://docs.usesmileid.com/server-to-server/ruby)
+
+> **Note**: Code samples in this documentation utilize the NodeJS Server to Server library.
+
+### Installation
+
+You can install via NPM or directly include it from our CDN.
+
+#### Install Via NPM
+
+```shell
+npm install @smileid/web-components@<version>
+```
+
+Then, in your VueJS, AngularJS, or React component:
+
+```js
+import '@smileid/web-components/smart-camera-web';
+```
+
+### Usage
+
+After installation and necessary imports:
+
+1. Add the desired markup to your page/component:
+
+   - **For Selfie Capture / Liveness Images**:
+
+     ```html
+     <smart-camera-web></smart-camera-web>
+     ```
+
+   - **For Selfie Capture / Liveness and ID Images**:
+
+     ```html
+     <smart-camera-web capture-id></smart-camera-web>
+     ```
+
+     Initially, you'll see this image:
+     ![Selfie Capture Instruction](https://cdn.smileidentity.com/images/smart-camera-web/selfie-capture-instruction.png)
+
+     After granting access, the capture screen appears:
+     ![Selfie Camera](https://cdn.smileidentity.com/images/smart-camera-web/selfie-capture.png)
+
+     Upon capturing a selfie, you'll reach the review screen:
+     ![Selfie Review](https://cdn.smileidentity.com/images/smart-camera-web/selfie-capture-review.png)
+
+   ![Document Capture Instruction](https://cdn.smileidentity.com/images/smart-camera-web/document-capture-instruction.png)
+
+   If the `capture-id` attribute is used, additional screens include:
+
+   ![ID Camera](https://cdn.smileidentity.com/images/smart-camera-web/document-capture.png)
+
+   ![ID Review](https://cdn.smileidentity.com/images/smart-camera-web/document-review-new.png)
+
+2. Handle the `smart-camera-web.publish` event:
+
+   When the user approves the captured image, an `smart-camera-web.publish` event is dispatched. The event returns a [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent) payload in `e.detail`.
+
+   Here's a script example to handle the event and send data to a backend endpoint:
+
+   ```html
+   <script>
+     const app = document.querySelector('smart-camera-web');
+
+     const postContent = async (data) => {
+       const options = {
+         method: 'POST',
+         headers: {
+           'Content-Type': 'application/json',
+         },
+         body: JSON.stringify(data),
+       };
+
+       try {
+         const response = await fetch('/', options);
+         const json = await response.json();
+
+         return json;
+       } catch (e) {
+         throw e;
+       }
+     };
+
+     app.addEventListener('smart-camera-web.publish', async (e) => {
+       try {
+         const response = await postContent(e.detail);
+
+         console.log(response);
+       } catch (e) {
+         console.error(e);
+       }
+     });
+   </script>
+   ```
+
+   The provided backend endpoint uses the NodeJS Server to Server library and ExpressJS:
+
+   ```js
+   const express = require('express');
+   const { v4: UUID } = require('uuid');
+
+   if (process.env.NODE_ENV === 'development') {
+     const dotenv = require('dotenv');
+
+     dotenv.config();
+   }
+
+   const SIDCore = require('smile-identity-core');
+   const SIDSignature = SIDCore.Signature;
+   const SIDWebAPI = SIDCore.WebApi;
+
+   const app = express();
+
+   app.use(express.json({ limit: '500kb' }));
+   app.use(express.static('public'));
+
+   app.post('/', async (req, res, next) => {
+     try {
+       const { PARTNER_ID, API_KEY, SID_SERVER } = process.env;
+       const connection = new SIDWebAPI(
+         PARTNER_ID,
+         '/callback',
+         API_KEY,
+         SID_SERVER,
+       );
+
+       const partner_params_from_server = {
+         user_id: `user-${UUID()}`,
+         job_id: `job-${UUID()}`,
+         job_type: 4, // job_type is the simplest job we have which enrolls a user using their selfie
+       };
+
+       const {
+         images,
+         partner_params: { libraryVersion },
+       } = req.body;
+
+       const options = {
+         return_job_status: true,
+       };
+
+       const partner_params = Object.assign({}, partner_params_from_server, {
+         libraryVersion,
+       });
+
+       const result = await connection.submit_job(
+         partner_params,
+         images,
+         {},
+         options,
+       );
+
+       res.json(result);
+     } catch (e) {
+       console.error(e);
+     }
+   });
+
+   // NOTE: This can be used to process responses. don't forget to add it as a callback option in the `connection` config on L22
+   // https://docs.usesmileid.com/further-reading/faqs/how-do-i-setup-a-callback
+   app.post('/callback', (req, res, next) => {});
+
+   app.listen(process.env.PORT || 4000);
+   ```
+
+   This approach can also be achieved using other Server to Server libraries.
+
+## Compatibility
+
+`SmartCameraWeb` is compatible with most JavaScript frameworks and libraries. For integration with [ReactJS](https://reactjs.org), refer to this [tutorial](https://www.robinwieruch.de/react-web-components) due to React-WebComponents compatibility issues.
+
+## Support
+
+Tested on the latest versions of Chrome, Edge, Firefox, and Safari. If compatibility issues arise on certain browsers, please notify us.
+
+## Development
+
+Note: `smart-camera-web.js` is generated from `src/` using [esbuild](https://esbuild.github.io/). To make changes, edit the source files and run `npm run build` to generate the new `smart-camera-web.js` file.

package/components/smart-camera-web/src/SmartCameraWeb.js

@@ -15,7 +15,8 @@ function scwTemplateString() {
     <selfie-capture-screens ${this.title} ${this.showNavigation} ${this.disableImageTests} ${this.hideAttribution} ${this.hideInstructions} hidden
       ${this.hideBackToHost}
     ></selfie-capture-screens>
-    <document-capture-screens document-type=${this.documentType} ${this.title} ${this.documentCaptureModes} ${this.showNavigation}  ${this.hideAttribution} hidden></document-capture-screens>
+    <document-capture-screens document-type=${this.documentType} ${this.title} ${this.documentCaptureModes} ${this.showNavigation}  ${this.hideAttribution}
+     ${this.hideBackOfId} hidden></document-capture-screens>
   </div>
 `;
 }
@@ -64,6 +65,7 @@ class SmartCameraWeb extends HTMLElement {
       'document-type',
       'hide-back-to-host',
       'show-navigation',
+      'hide-back-of-id',
     ];
   }
 
@@ -71,8 +73,10 @@ class SmartCameraWeb extends HTMLElement {
     switch (name) {
       case 'document-capture-modes':
       case 'document-type':
+      case 'hide-back-of-id':
       case 'hide-back-to-host':
       case 'show-navigation':
+        this.disconnectedCallback();
         this.shadowRoot.innerHTML = this.render();
         this.setUpEventListeners();
         break;
@@ -195,7 +199,7 @@ class SmartCameraWeb extends HTMLElement {
   }
 
   get hideBackOfId() {
-    return this.hasAttribute('hide-back-of-id');
+    return this.hasAttribute('hide-back-of-id') ? 'hide-back-of-id' : '';
   }
 
   get showNavigation() {

package/components/smart-camera-web/src/SmartCameraWeb.stories.js

@@ -33,3 +33,10 @@ export const SmartCameraWebWithOutBackToHost = {
         </smart-camera-web>
     `,
 };
+
+export const SmartCameraWebWithOutBackId = {
+  render: () => `
+        <smart-camera-web show-navigation hide-back-of-id>
+        </smart-camera-web>
+    `,
+};

package/cypress/pages/smart-camera-web.html

@@ -30,7 +30,7 @@
     <script src="./js/components/smart-camera-web/src/SmartCameraWeb.js"></script>
     <script>
       const app = document.querySelector('smart-camera-web');
-      app.addEventListener('imagesComputed', async (e) => {
+      app.addEventListener('smart-camera-web.published', async (e) => {
         console.log(e.detail);
       });
     </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smileid/web-components",
-  "version": "1.0.0-beta",
+  "version": "1.0.1-beta",
   "exports": {
     ".": "./index.js",
     "./combobox": "./components/combobox/src/index.js",
@@ -32,14 +32,14 @@
     "validate.js": "^0.13.1"
   },
   "devDependencies": {
-    "cypress": "^13.6.6",
-    "esbuild": "^0.20.2",
+    "cypress": "^13.10.0",
+    "esbuild": "^0.21.4",
     "eslint": "^8.57.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-cypress": "^2.15.1",
+    "eslint-plugin-cypress": "^3.0.2",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jest": "^28.2.0",
+    "eslint-plugin-jest": "^28.5.0",
     "eslint-plugin-prettier": "^5.1.3",
     "prettier": "^3.2.2"
   }