@privyid/persona 1.2.0 → 1.2.1-rc.0

package/dist/components/camera/adapter/capture.mjs

@@ -1,12 +0,0 @@
-import { fromBase64 } from "../../utils/base64.mjs";
-import { takePicture } from "../utils/take-picture.mjs";
-import { defineAdapter } from "./adapter.mjs";
-export default defineAdapter({
-  meta: { facingMode: "environment" },
-  run({ video, meta, modifier }) {
-    const isMirrored = !!(meta.value.mirror && meta.value.mirror !== "preview");
-    const preview = takePicture(video.value, isMirrored);
-    const result = modifier.value.base64 ? preview : fromBase64(preview);
-    return { preview, result };
-  }
-});

package/dist/components/camera/adapter/capture.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/camera/adapter/capture.spec.mjs

@@ -1,26 +0,0 @@
-import { vi } from "vitest";
-import { takePicture, sampleImage } from "../__mocks__/take-picture.mjs";
-import CaptureAdapter from "./capture.mjs";
-import { runAdapter, video } from "../__mocks__/run-adapter.mjs";
-vi.mock("../utils/take-picture.ts", () => {
-  return { takePicture };
-});
-afterEach(() => {
-  vi.restoreAllMocks();
-});
-it("should capture image from video", async () => {
-  const output = await runAdapter(CaptureAdapter);
-  expect(output.preview).toBe(sampleImage);
-  expect(output.result).toBeInstanceOf(File);
-  expect(takePicture).toBeCalledWith(video, false);
-});
-it("should capture image from video in mirror mode", async () => {
-  const output = await runAdapter(CaptureAdapter, { mirror: true });
-  expect(output.preview).toBe(sampleImage);
-  expect(takePicture).toBeCalledWith(video, true);
-});
-it("should return base64 as result", async () => {
-  const output = await runAdapter(CaptureAdapter, { base64: true });
-  expect(output.result).toBe(sampleImage);
-  expect(takePicture).toBeCalledWith(video, false);
-});

package/dist/components/camera/adapter/liveness.d.ts

@@ -1,5 +0,0 @@
-/**
- * Liveness adapter for camera, using Fast Motion Algorithm
- */
-declare const _default: import("./adapter").Adapter;
-export default _default;

package/dist/components/camera/adapter/liveness.mjs

@@ -1,46 +0,0 @@
-import { fromBase64 } from "../../utils/base64.mjs";
-import {
-  createTemplate,
-  motionDetection,
-  MOTION_AREA_SIZE,
-  MOTION_FPS,
-  MOTION_THRESHOLD,
-  takeSample
-} from "../utils/motion.mjs";
-import { takePicture } from "../utils/take-picture.mjs";
-import { defineAdapter } from "./adapter.mjs";
-export default defineAdapter({
-  meta: {
-    mask: "round",
-    mirror: true,
-    facingMode: "user"
-  },
-  async run({ video, toast, meta, modifier }) {
-    return await new Promise((resolve) => {
-      const isMirrored = !!(meta.value.mirror && meta.value.mirror !== "preview");
-      const photoA = takePicture(video.value, isMirrored);
-      const canvas = document.createElement("canvas");
-      canvas.width = MOTION_AREA_SIZE;
-      canvas.height = MOTION_AREA_SIZE;
-      let template;
-      const interval = setInterval(function processFrame() {
-        if (video.value) {
-          const imageData = takeSample(canvas, video.value);
-          if (!template)
-            template = createTemplate(imageData);
-          else if (motionDetection(imageData, template) > MOTION_THRESHOLD) {
-            const photoB = takePicture(video.value, isMirrored);
-            const result = modifier.value.base64 ? [photoB, photoA] : [fromBase64(photoB), fromBase64(photoA)];
-            clearInterval(interval);
-            toast("");
-            resolve({
-              preview: photoB,
-              result
-            });
-          }
-        }
-      }, 1e3 / MOTION_FPS);
-      toast("Move your head slowly. Your photo will be taken automatically");
-    });
-  }
-});

package/dist/components/camera/adapter/liveness.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/camera/adapter/liveness.spec.mjs

@@ -1,30 +0,0 @@
-import { vi } from "vitest";
-import { runAdapter } from "../__mocks__/run-adapter.mjs";
-import {
-  sampleImage,
-  sampleImage2,
-  takePicture
-} from "../__mocks__/take-picture.mjs";
-import * as motion from "../__mocks__/motion.mjs";
-import LivenessAdapter from "./liveness.mjs";
-vi.mock("../utils/take-picture.ts", () => {
-  return { takePicture };
-});
-vi.mock("../utils/motion.ts", () => motion);
-afterEach(() => {
-  vi.restoreAllMocks();
-});
-it("should capture image with motion", async () => {
-  const output = await runAdapter(LivenessAdapter);
-  expect(output.preview).toBe(sampleImage);
-  expect(output.result).toBeArray();
-  expect(output.result[0]).toBeInstanceOf(File);
-  expect(output.result[1]).toBeInstanceOf(File);
-});
-it("should return base64 as result", async () => {
-  takePicture.mockReturnValueOnce(sampleImage).mockReturnValueOnce(sampleImage2);
-  const output = await runAdapter(LivenessAdapter, { base64: true });
-  expect(output.preview).toBe(sampleImage2);
-  expect(output.result[0]).toBe(sampleImage2);
-  expect(output.result[1]).toBe(sampleImage);
-});

package/dist/components/camera/adapter/qr-code.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("./adapter").Adapter;
-export default _default;

package/dist/components/camera/adapter/qr-code.mjs

@@ -1,19 +0,0 @@
-import { defineAdapter } from "./adapter.mjs";
-import { takePicture } from "../utils/take-picture.mjs";
-export default defineAdapter({
-  meta: {
-    mask: "square",
-    facingMode: "environment",
-    autoStart: true
-  },
-  async run({ video, toast, meta }) {
-    const isMirrored = !!(meta.value.mirror && meta.value.mirror !== "preview");
-    const { BrowserQRCodeReader } = await import("@zxing/browser");
-    const reader = new BrowserQRCodeReader();
-    const result = await reader.decodeOnceFromVideoElement(video.value);
-    const image = takePicture(video.value, isMirrored);
-    const text = result.getText();
-    toast(text);
-    return { preview: image, result: text };
-  }
-});

package/dist/components/camera/adapter/qr-code.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/camera/adapter/qr-code.spec.mjs

@@ -1,21 +0,0 @@
-import { vi } from "vitest";
-import { BrowserQRCodeReader } from "@zxing/browser";
-import { sampleImage, takePicture } from "../__mocks__/take-picture.mjs";
-import { BarcodeFormat, Result } from "@zxing/library";
-import { runAdapter, video } from "../__mocks__/run-adapter.mjs";
-import QrCodeAdapter from "./qr-code.mjs";
-const decode = vi.spyOn(BrowserQRCodeReader.prototype, "decodeOnceFromVideoElement").mockResolvedValue(new Result("Hello World", new Uint8Array(), 8, [], BarcodeFormat.QR_CODE));
-vi.mock("../utils/take-picture.ts", () => {
-  return { takePicture };
-});
-it("should capture qr code", async () => {
-  const output = await runAdapter(QrCodeAdapter);
-  expect(output.preview).toBe(sampleImage);
-  expect(output.result).toBe("Hello World");
-  expect(decode).toBeCalledWith(video);
-});
-it("should capture image from video in mirror mode", async () => {
-  const output = await runAdapter(QrCodeAdapter, { mirror: true });
-  expect(output.preview).toBe(sampleImage);
-  expect(takePicture).toBeCalledWith(video, true);
-});

package/dist/components/camera/index.md

@@ -1,205 +0,0 @@
----
-title: Camera · Components
-description: Take picture from user's camera
----
-
-<script setup>
-  import pCamera from './Camera.vue'
-  import pBanner from '../banner/Banner.vue'
-  import LivenessAdapter from './adapter/liveness'
-  import QrCodeAdapter from './adapter/qr-code'
-  import { ref } from 'vue-demi'
-
-  const result    = ref()
-  const resultB64 = ref()
-</script>
-
-# Camera
-
-> Take picture from user's camera
-
-## Usage
-
-### Simple Usage
-
-<preview class="flex-col">
-  <p-camera />
-</preview>
-
-```vue
-<template>
-  <p-camera />
-</template>
-```
-
-## Mirror Mode
-
-Add prop `mirror` to enable mirror mode.
-
-<preview class="flex-col">
-  <p-camera mirror />
-</preview>
-
-```vue
-<template>
-  <p-camera mirror />
-</template>
-```
-
-### Preview-only mirror mode
-
-If you want to keep image result un-mirrored. set prop `mirror` to `preview`. It will revert back when you take the picture.
-
-<preview class="flex-col">
-  <p-camera mirror="preview" />
-</preview>
-
-```vue
-<template>
-  <p-camera mirror="preview" />
-</template>
-```
-
-## Masking
-
-Add mask overlay using prop `mask`. There are 3 available masks `square`, `round`, `card`.
-
-<preview class="flex-col space-y-2">
-  <p-camera mask="square" />
-  <p-camera mask="round" />
-  <p-camera mask="card" />
-</preview>
-
-```vue
-<template>
-  <p-camera mask="square" />
-  <p-camera mask="round" />
-  <p-camera mask="card" />
-</template>
-```
-
-## Silent
-
-Add prop `silent` to disabled shutter sound.
-
-<preview class="flex-col">
-  <p-camera silent />
-</preview>
-
-```vue
-<template>
-  <p-camera silent />
-</template>
-```
-
-## Liveness
-
-Change adapter to Liveness to perform liveness capture.
-
-<preview class="flex-col space-y-2">
-  <p-camera :adapter="LivenessAdapter" />
-</preview>
-
-```vue
-<template>
-  <p-camera :adapter="LivenessAdapter" />
-</template>
-
-<script setup>
-  import { LivenessAdapter } from '@privyid/persona/core'
-</script>
-
-```
-
-## QR Scanner
-
-This component has built-in adapter for QR Code Scanning, powered by [ZXing](https://github.com/zxing-js/library).
-
-<preview class="flex-col space-y-2">
-  <p-camera :adapter="QrCodeAdapter" />
-</preview>
-
-```vue
-<template>
-  <p-camera :adapter="QrCodeAdapter" />
-</template>
-
-<script setup>
-  import { QrCodeAdapter } from '@privyid/persona/core'
-</script>
-```
-
-## Binding v-model
-
-You can bind the result of image using `v-model`. The result is variant depend on adapter do you use.
-
-<preview class="flex-col">
-  <p-camera v-model="result" />
-</preview>
-
-```vue
-<template>
-  <p-camera v-model="result" />
-</template>
-```
-
-**result:**
-
-<pre class="truncate"><code>{{ result }}</code></pre>
-
-### Encode to base64
-
-You can add modifier `base64` to your `v-model`, it's enforce result to [base64-dataURI](https://en.wikipedia.org/wiki/Data_URI_scheme).
-
-<p-banner :dismissable="false">
-  <b>Note!</b> <code>v-model.base64</code> on QRCodeAdapter has no effect, the result will always original scanned text.
-</p-banner>
-
-<preview class="flex-col">
-  <p-camera v-model.base64="resultB64" />
-</preview>
-
-```vue
-<template>
-  <p-camera v-model.base64="resultB64" />
-</template>
-```
-
-**result:**
-
-<pre class="truncate"><code>{{ resultB64 }}</code></pre>
-
-## API
-
-### Props
-
-| Props        |        Type         |     Default      | Description                                                                        |
-|--------------|:-------------------:|:----------------:|------------------------------------------------------------------------------------|
-| `mirror`     | `Boolean`, `String` |       `-`        | Enable mirror mode, set to `preview` for [Preview Only](#preview-only-mirror-mode) |
-| `mask`       |      `String`       |       `-`        | Enable mask overlay, valid value is `square`, `round`, `card`, `none`              |
-| `silent`     |      `Boolean`      |     `false`      | Mute shutter sound                                                                 |
-| `adapter`    |      `Adapter`      | `CaptureAdapter` | Camera Adapter                                                                     |
-| `modelValue` |       `File`        |       `-`        | v-model value                                                                      |
-
-### Slots
-
-<table>
-  <thead>
-    <tr>
-      <th>Name</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td colspan="2" class="text-center">There no slots here</td>
-    </tr>
-  </tbody>
-</table>
-
-### Events
-
-| Name     | Arguments | Description                      |
-|----------|:---------:|----------------------------------|
-| `start`  |     -     | Event when camera started        |
-| `result` |     -     | Event when camera captured image |

package/dist/components/camera/utils/motion.d.ts

@@ -1,29 +0,0 @@
-export interface MotionTemplate {
-    centerX: number;
-    centerY: number;
-    width: number;
-    height: number;
-    xPos: number;
-    yPos: number;
-    buffer: Uint8ClampedArray;
-}
-export declare const MOTION_THRESHOLD = 40;
-export declare const MOTION_FPS = 15;
-export declare const MOTION_AREA_SIZE = 160;
-/**
- * Capture and create sample image from HTML Video Element
- * @param canvas Canvas 2d context
- * @param video Html Video element
- */
-export declare function takeSample(canvas: HTMLCanvasElement, video: HTMLVideoElement): ImageData;
-/**
- * create motion template
- * @param imageData sample imagedata
- */
-export declare function createTemplate(imageData: ImageData): MotionTemplate;
-/**
- * Compare image with Motion template and return the movement distance
- * @param imageData new sample's imagedata
- * @param template motion template to compare
- */
-export declare function motionDetection(imageData: ImageData, template: MotionTemplate): number;

package/dist/components/camera/utils/motion.mjs

@@ -1,88 +0,0 @@
-export const MOTION_THRESHOLD = 40;
-export const MOTION_FPS = 15;
-export const MOTION_AREA_SIZE = 160;
-export function takeSample(canvas, video) {
-  const context = canvas.getContext("2d", { willReadFrequently: true });
-  context.drawImage(
-    video,
-    video.videoWidth / 2 - MOTION_AREA_SIZE,
-    video.videoHeight / 2 - MOTION_AREA_SIZE,
-    MOTION_AREA_SIZE,
-    MOTION_AREA_SIZE,
-    0,
-    0,
-    MOTION_AREA_SIZE,
-    MOTION_AREA_SIZE
-  );
-  return context.getImageData(0, 0, canvas.width, canvas.height);
-}
-export function createTemplate(imageData) {
-  const centerX = imageData.width / 2;
-  const centerY = imageData.height / 2;
-  const width = imageData.width / 4;
-  const height = imageData.height / 4;
-  const xPos = centerX - width / 2;
-  const yPos = centerY - height / 2;
-  const buffer = new Uint8ClampedArray(width * height);
-  const template = {
-    centerX,
-    centerY,
-    width,
-    height,
-    xPos,
-    yPos,
-    buffer
-  };
-  const p = imageData.data;
-  let counter = 0;
-  for (let y = template.yPos; y < template.yPos + template.height; y++) {
-    let bufferIndex = y * imageData.width * 4 + template.xPos * 4 + 1;
-    for (let x = template.xPos; x < template.xPos + template.width; x++) {
-      template.buffer[counter++] = p[bufferIndex];
-      bufferIndex += 4;
-    }
-  }
-  return template;
-}
-export function motionDetection(imageData, template) {
-  let bestHitX = 0;
-  let bestHitY = 0;
-  let maxCorr = 0;
-  const searchWidth = imageData.width / 4;
-  const searchHeight = imageData.height / 4;
-  const p = imageData.data;
-  for (let y = template.centerY - searchHeight; y <= template.centerY + searchHeight - template.height; y++) {
-    for (let x = template.centerX - searchWidth; x <= template.centerX + searchWidth - template.width; x++) {
-      let nominator = 0;
-      let denominator = 0;
-      let templateIndex = 0;
-      for (let ty = 0; ty < template.height; ty++) {
-        let bufferIndex = x * 4 + 1 + (y + ty) * imageData.width * 4;
-        for (let tx = 0; tx < template.width; tx++) {
-          const imagepixel = p[bufferIndex];
-          nominator += template.buffer[templateIndex++] * imagepixel;
-          denominator += imagepixel * imagepixel;
-          bufferIndex += 4;
-        }
-      }
-      let ncc = 0;
-      if (denominator > 0)
-        ncc = nominator * nominator / denominator;
-      if (ncc > maxCorr) {
-        maxCorr = ncc;
-        bestHitX = x;
-        bestHitY = y;
-      }
-    }
-  }
-  const distX = bestHitX - template.xPos;
-  const distY = bestHitY - template.yPos;
-  const movementDiff = Math.hypot(distX, distY);
-  const maxDistX = searchWidth - template.width / 2;
-  const maxDistY = searchHeight - template.height / 2;
-  const maximumMovement = Math.hypot(maxDistX, maxDistY);
-  let movementPercentage = movementDiff / maximumMovement * 100;
-  if (movementPercentage > 100)
-    movementPercentage = 100;
-  return movementPercentage;
-}

package/dist/components/camera/utils/take-picture.d.ts

@@ -1 +0,0 @@
-export declare function takePicture(video: HTMLVideoElement, mirror?: boolean): string;

package/dist/components/camera/utils/take-picture.mjs

@@ -1,14 +0,0 @@
-export function takePicture(video, mirror = false) {
-  const canvas = document.createElement("canvas");
-  const context = canvas.getContext("2d");
-  canvas.width = video.videoWidth;
-  canvas.height = video.videoHeight;
-  if (mirror) {
-    context.save();
-    context.scale(-1, 1);
-    context.drawImage(video, 0, 0, canvas.width * -1, canvas.height);
-    context.restore();
-  } else
-    context.drawImage(video, 0, 0, canvas.width, canvas.height);
-  return canvas.toDataURL("image/jpeg");
-}

package/dist/components/caption/Caption.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/caption/Caption.spec.mjs

@@ -1,62 +0,0 @@
-import { render } from "@testing-library/vue";
-import Caption from "./Caption.vue";
-it("should rendered properly without any props", () => {
-  const screen = render({
-    components: { Caption },
-    template: `
-      <Caption>
-        Caption Text
-      </Caption>
-    `
-  });
-  const caption = screen.queryByTestId("caption");
-  const text = screen.queryByText("Caption Text");
-  expect(caption).toBeInTheDocument();
-  expect(caption).toHaveClass("caption");
-  expect(text).toBeInTheDocument();
-});
-it('should have style "bold" if props `weight` is set to bold', () => {
-  const screen = render({
-    components: { Caption },
-    template: `
-      <Caption weight="bold">
-        Caption Text
-      </Caption>
-    `
-  });
-  const caption = screen.queryByTestId("caption");
-  const text = screen.queryByText("Caption Text");
-  expect(caption).toBeInTheDocument();
-  expect(caption).toHaveClass("caption", "caption--bold");
-  expect(text).toBeInTheDocument();
-});
-it('should have style "uppercase" if props `transform` is set to uppercase', () => {
-  const screen = render({
-    components: { Caption },
-    template: `
-      <Caption transform="uppercase">
-        Caption Text
-      </Caption>
-    `
-  });
-  const caption = screen.queryByTestId("caption");
-  const text = screen.queryByText("Caption Text");
-  expect(caption).toBeInTheDocument();
-  expect(caption).toHaveClass("caption", "caption--uppercase");
-  expect(text).toBeInTheDocument();
-});
-it('should have style "tiny" if props `size` is set to tn', () => {
-  const screen = render({
-    components: { Caption },
-    template: `
-      <Caption size="tn">
-        Caption Text
-      </Caption>
-    `
-  });
-  const caption = screen.queryByTestId("caption");
-  const text = screen.queryByText("Caption Text");
-  expect(caption).toBeInTheDocument();
-  expect(caption).toHaveClass("caption", "caption--tn");
-  expect(text).toBeInTheDocument();
-});