npm - @smileid/web-components - Versions diffs - 11.3.0 → 11.4.1 - Mend

@smileid/web-components 11.3.0 → 11.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (101) hide show

package/dist/components/document/src/document-capture-review/README.md DELETED Viewed

@@ -1,79 +0,0 @@
-# DocumentCaptureReview Web Component
-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 `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
-  data-image="base64image"
-  show-navigation
-  hide-back-to-host
-></document-capture-review>
-```
-### Attributes
-- `data-image`: A base64 encoded string of the captured image to be reviewed.
-- `show-navigation`: (Optional) Shows navigation controls for the review process. This attribute is boolean and does not require a value.
-- `hide-back-to-host`: (Optional) Hides the option to return to the host application or page. This attribute is boolean and does not require a value.
-## Event Handling
-### Image Acceptance
-When a user confirms the captured image as acceptable, the `document-capture-review.accepted` event is emitted. Implement an event listener to handle this action:
-```js
-document
-  .querySelector('document-capture-review')
-  .addEventListener('document-capture-review.accepted', function (event) {
-    // Handle the image acceptance action here
-  });
-```
-### Recapture Request
-If the user decides to recapture the image, the `document-capture-review.rejected` event is triggered. Set up an event listener to manage this scenario:
-```js
-document
-  .querySelector('document-capture-review')
-  .addEventListener('document-capture-review.rejected', function (event) {
-    // Handle the recapture request here
-  });
-```
-## Example
-Below is a sample implementation showcasing how to use the `IdReview` component with an event listener for both accepting an image and requesting a recapture:
-```html
-<document-capture-review
-  data-image="base64image"
-  show-navigation
-  hide-back-to-host
-></document-capture-review>
-<script>
-  const idReviewElement = document.querySelector('document-capture-review');
-  idReviewElement.addEventListener(
-    'document-capture-review.accepted',
-    function (event) {
-      console.log('Image accepted by the user.');
-      // Additional logic for accepted image
-    },
-  );
-  idReviewElement.addEventListener(
-    'document-capture-review.rejected',
-    function (event) {
-      console.log('User requested to recapture the image.');
-      // Additional logic for image recapture
-    },
-  );
-</script>
-```

package/dist/components/selfie/README.md DELETED Viewed

@@ -1,225 +0,0 @@
-# SelfieCaptureScreens Web Component
-## Overview
-The `SelfieCaptureScreens` is a custom web component designed to capture selfies and liveness images using a camera. It uses the `SmartCamera` module to interact with the device's camera and handle permissions.
-### Importing the Component
-To use the SelfieCaptureScreens component, you need to import it into your JavaScript file:
-```js
-import '@smileid/web-components/selfie-capture-screens';
-```
-### Using the Component
-You can use the SelfieCaptureScreens component in your HTML like any other HTML element:
-```html
-<selfie-capture-screens></selfie-capture-screens>
-```
-### SelfieCaptureScreens Web Component Attributes
-You can use a mixture of the following attributes to configure the behavior of the component.
-#### hide-instructions
-This attribute, when present, hides the instructions for the liveness capture process. It does not require a value.
-Usage:
-```html
-<selfie-capture-screens hide-instructions></selfie-capture-screens>
-```
-#### show-navigation
-This attribute, when present, shows the navigation controls for the liveness capture process. It does not require a value.
-Usage:
-```html
-<selfie-capture-screens show-navigation></selfie-capture-screens>
-```
-### Permissions
-The `SelfieCaptureScreens` component requires camera permissions to function. It will automatically request these permissions when used. If the permissions are granted, it will remove the `data-camera-error` attribute from the capture screen and set the `data-camera-ready` attribute to true. If the permissions are denied, it will remove the `data-camera-ready` attribute and set the `data-camera-error` attribute with the error message.
-If you handle the permissions yourself, make sure to set `data-camera-ready` and `data-camera-error` appropriately.
-### Error Handling
-If there is an error while requesting permissions or capturing the images, the `SelfieCaptureScreens` component will handle it and set the `data-camera-error` attribute with the error message.
-### Event Handlers
-To receive the images after they have been captured, you can listen to the custom event `selfie-capture-screens.publish`. The data posted to this event has the structure:
-```json
-{
-  "detail": {
-    "images": [{ "image": "base64 image", "image_type_id": "" }],
-    "meta": {
-      "version": "version of the library in use"
-    }
-  }
-}
-```
-Usage:
-```js
-document
-  .querySelector('selfie-capture-screens')
-  .addEventListener('selfie-capture-screens.publish', function (event) {
-    console.log(event.detail);
-  });
-```
-### Dependencies
-The `SelfieCaptureScreens` component depends on the following modules:
-- [selfie-capture](#selfiecapture-web-component)
-- [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
-The `SelfieCapture` is a custom web component designed to capture selfies and liveness images using a camera. It uses the `SmartCamera` module to interact with the device's camera and handle permissions.
-#### Importing the SelfieCapture Component
-To use the SelfieCapture component, you need to import it into your JavaScript file:
-```js
-import '@smileid/web-components/selfie-capture';
-```
-### Using the SelfieCapture Component
-You can use the SelfieCapture component in your HTML like any other HTML element:
-```html
-<selfie-capture></selfie-capture>
-```
-### SelfieCapture Web Component Attributes
-You can use a mixture of the following attributes to configure the behavior of the component.
-#### 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 show-navigation></selfie-capture>
-```
-### Permissions
-The `SelfieCapture` component requires camera permissions to function. It will automatically request these permissions when used. If the permissions are granted, it will remove the `data-camera-error` attribute from the capture screen and set the `data-camera-ready` attribute to true. If the permissions are denied, it will remove the `data-camera-ready` attribute and set the `data-camera-error` attribute with the error message.
-If you handle the permissions yourself, make sure to set `data-camera-ready` and `data-camera-error` appropriately.
-### Error Handling
-If there is an error while requesting permissions or capturing the images, the `SelfieCapture` component will handle it and set the `data-camera-error` attribute with the error message.
-### Event Handlers
-To receive the images after they have been captured, you can listen to the custom event `selfie-capture.publish`. The data posted to this event has the structure:
-```json
-{
- "detail": {
-  "images": [
-   {"image": "
-base64 image", "image_type_id": ""}
-  ],
-  "meta": {
-   "version": "version of the library in use"
-  }
- }
-}
-```
-Usage:
-```js
-document
-  .querySelector('selfie-capture')
-  .addEventListener('selfie-capture.publish', function (event) {
-    console.log(event.detail);
-  });
-```
-### SelfieCaptureReview Web Component
-This component is used to allow the user to verify the accuracy of the capture.
-The user can choose to use the captured image or recapture a new selfie.
-Usage:
-```html
-<selfie-capture-review
-  data-image="base64 image"
-  show-navigation
-  hide-back-to-host
-></selfie-capture-review>
-```
-When a user accepts an image, an event is triggered as shown below:
-```js
-document
-  .querySelector('selfie-capture-review')
-  .addEventListener('selfie-capture-review.accepted', function (event) {});
-```
-When a user wants to recapture a selfie, an event is triggered as shown below:
-```js
-document
-  .querySelector('selfie-capture-review')
-  .addEventListener('selfie-capture-review.rejected', function (event) {});
-```
-### Compatibility
-The SelfieCaptureScreens component is designed to work on all modern browsers that support custom web components. However, it includes a special case for multi-camera Samsung devices to mitigate blurry images at the edges. Please report any issues found on other devices to our support team.

package/dist/components/smart-camera-web/src/README.md DELETED Viewed

@@ -1,206 +0,0 @@
-# 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/dist/domain/camera/src/README.md DELETED Viewed

@@ -1,38 +0,0 @@
-# SmartCamera.js
-SmartCamera.js is a JavaScript class that provides an interface for interacting with the user's camera device. It has special handling for multi-camera Samsung devices to mitigate issues with blurry images at the edges.
-## Usage
-### Getting Media Stream
-To get the media stream from the user's camera, call the `getMedia` method with the desired constraints. This method returns a Promise that resolves to a MediaStream object.
-```javascript
-const constraints = {
-  video: true,
-  audio: false,
-};
-const stream = await SmartCamera.getMedia(constraints);
-```
-`StartCamera` is a singleton so the `stream` can be accessed anytime via `SmartCamera.stream`.
-```javascript
-let video = document.createElement('video');
-video.autoplay = true;
-video.playsInline = true;
-video.muted = true;
-if ('srcObject' in video) {
-  video.srcObject = stream;
-} else {
-  video.src = window.URL.createObjectURL(stream);
-}
-video.play();
-```
-### Stopping Media Stream
-To stop the media stream, call the stopMedia method. This will stop all tracks in the stream and set the stream to null.

package/dist/domain/file-upload/README.md DELETED Viewed

@@ -1,35 +0,0 @@
-# SmartFileUpload.js
-This exports a class for dealing with file-uploads in SmileID's web components
-## Usage
-Suppose you have an file input field
-```html
-<input
-  type="file"
-  id="upload-photo"
-  name="document"
-  accept="image/png, image/jpeg"
-/>
-```
-```javascript
-// get the element
-const uploadDocumentPhotoButton = document.getElementById('upload-photo');
-// add a change event listener
-uploadDocumentPhotoButton.addEventListener('change', async (event) => {
-  try {
-    const { files } = event.target;
-    // validate file, and convert file to data url
-    // returns the data url for the first file
-    const fileData = await SmartFileUpload.retrieve(files);
-    // use the data url
-  } catch (error) {
-    // handle error
-  }
-});
-```