@privyid/persona 0.3.0 → 0.4.0

package/dist/components/camera/Camera.vue

@@ -0,0 +1,366 @@
+<template>
+  <div
+    class="camera"
+    data-testid="camera"
+    :data-deviceid="deviceId"
+    :class="classNames">
+    <video
+      v-if="stream"
+      ref="video"
+      data-testid="camera-video"
+      :srcObject.prop="stream"
+      class="camera__video"
+      muted
+      autoplay
+      playsinline
+      @play="onStart" />
+
+    <!-- Result -->
+    <img
+      v-if="isTaken && !stream"
+      data-testid="camera-result"
+      class="camera__result"
+      :src="preview"
+      alt="camera-result">
+
+    <!-- Camera off -->
+    <span
+      v-if="!isActive && !isTaken"
+      data-testid="camera-off"
+      class="camera__off-info">
+      Camera is off
+    </span>
+
+    <!-- Mask -->
+    <div class="camera__mask-container">
+      <div
+        v-if="!isTaken"
+        data-testid="camera-mask"
+        class="camera__mask" />
+    </div>
+
+    <!-- Toast -->
+    <transition name="slide-up">
+      <div
+        v-if="message"
+        :key="message"
+        class="camera__toast">
+        <div
+          data-testid="camera-toast"
+          class="camera__toast-text">
+          {{ message }}
+        </div>
+      </div>
+    </transition>
+
+    <!-- Control Button -->
+    <div class="camera__controls">
+      <p-button
+        v-if="cameras.length > 1 && !isTaken"
+        data-testid="camera-toggle"
+        color="secondary"
+        size="sm"
+        icon
+        pill
+        @click="toggle">
+        <icon-rotate />
+      </p-button>
+
+      <!-- Main Button -->
+      <p-button
+        v-if="!isActive && !isTaken"
+        data-testid="camera-turn-on"
+        class="camera__main-control"
+        icon
+        pill
+        @click="turnOn()">
+        <icon-camera />
+      </p-button>
+      <p-button
+        v-else-if="isActive && !isTaken"
+        data-testid="camera-take"
+        class="camera__main-control"
+        icon
+        pill
+        :disabled="isProcessing"
+        @click="take()">
+        <icon-camera />
+      </p-button>
+      <p-button
+        v-else
+        data-testid="camera-retake"
+        class="camera__main-control"
+        icon
+        pill
+        @click="retake()">
+        <icon-retake />
+      </p-button>
+      <!-- End Main Button -->
+    </div>
+
+    <slot
+      :cameras="cameras"
+      :preview="preview"
+      :stream="stream"
+      :video="video"
+      :toast="toast" />
+  </div>
+</template>
+
+<script>
+import {
+  computed,
+  defineComponent,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  toRef
+} from "vue-demi";
+import pButton from "../button/Button.vue";
+import IconRotate from "@carbon/icons-vue/lib/renew/16";
+import IconCamera from "@carbon/icons-vue/lib/camera/24";
+import IconRetake from "@carbon/icons-vue/lib/reset/24";
+import shutterWav from "./assets/shutter.wav";
+import { useSound } from "@vueuse/sound";
+import { useVModel } from "../input/use-input";
+import CaptureAdapter from "./adapter/capture";
+import {
+  usePermission,
+  useDevicesList,
+  useUserMedia,
+  until
+} from "@vueuse/core";
+import * as dialog from "../dialog/use-dialog";
+import defu from "defu";
+export default defineComponent({
+  components: {
+    pButton,
+    IconCamera,
+    IconRetake,
+    IconRotate
+  },
+  props: {
+    modelValue: {
+      type: [
+        globalThis.File,
+        String,
+        Array
+      ],
+      default: ""
+    },
+    modelModifiers: {
+      type: Object,
+      default: () => ({})
+    },
+    mirror: {
+      type: [Boolean, String],
+      default: void 0
+    },
+    mask: {
+      type: String,
+      default: void 0
+    },
+    adapter: {
+      type: Object,
+      default: CaptureAdapter
+    },
+    facingMode: {
+      type: String,
+      default: void 0
+    },
+    silent: {
+      type: Boolean,
+      default: false
+    }
+  },
+  models: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  },
+  emits: [
+    "start",
+    "change",
+    "result",
+    "update:modelValue"
+  ],
+  setup(props, { emit }) {
+    const model = useVModel(props);
+    const modifier = toRef(props, "modelModifiers");
+    const isProcessing = ref(false);
+    const isTaken = ref(false);
+    const preview = ref("");
+    const message = ref("");
+    const shutter = useSound(shutterWav);
+    const video = ref();
+    const permission = usePermission("camera", { controls: true });
+    const camera = ref(0);
+    const meta = computed(() => {
+      return defu({
+        mirror: props.mirror,
+        mask: props.mask,
+        facingMode: props.facingMode
+      }, props.adapter.meta, { autoStart: false });
+    });
+    const { videoInputs: cameras } = useDevicesList({ constraints: { video: { facingMode: meta.value.facingMode } } });
+    const deviceId = computed(() => {
+      return cameras.value?.at(camera.value)?.deviceId;
+    });
+    const { stream, start, stop, enabled: isActive } = useUserMedia({
+      videoDeviceId: deviceId,
+      audioDeviceId: false
+    });
+    const classNames = computed(() => {
+      const result = [];
+      if (meta.value.mirror)
+        result.push("camera--mirror");
+      if (meta.value.mask)
+        result.push(`camera__mask--${meta.value.mask}`);
+      else
+        result.push("camera__mask--none");
+      return result;
+    });
+    async function turnOn() {
+      if (permission.state.value === "denied") {
+        await dialog.alert({
+          title: "Camera Access Blocked",
+          text: "Privy need to access your internal camera to process this journey",
+          confirm: { text: "Ok" },
+          footerAlign: "end"
+        });
+      }
+      if (permission.state.value === "prompt") {
+        await dialog.alert({
+          title: "Camera Access Required",
+          text: "Privy need to access your internal camera to process this journey",
+          confirm: { text: "Ok" },
+          footerAlign: "end"
+        });
+      }
+      await start();
+    }
+    function toggle() {
+      camera.value = (camera.value + 1) % cameras.value.length;
+    }
+    function toast(text) {
+      message.value = text;
+    }
+    async function take() {
+      isProcessing.value = true;
+      const output = await props.adapter.run({
+        video,
+        toast,
+        stream,
+        meta,
+        modifier
+      });
+      preview.value = output.preview;
+      model.value = output.result;
+      isTaken.value = true;
+      isProcessing.value = false;
+      isActive.value = false;
+      emit("result", output.result);
+      emit("change", output.result);
+      if (!props.silent)
+        shutter.play();
+    }
+    async function retake() {
+      isActive.value = true;
+      isTaken.value = false;
+      preview.value = "";
+      message.value = "";
+    }
+    function onStart() {
+      emit("start", stream.value);
+      if (meta.value.autoStart)
+        take();
+    }
+    onMounted(async () => {
+      if (permission.isSupported) {
+        await until(permission.state).not.toBeUndefined();
+        await turnOn();
+      }
+    });
+    onBeforeUnmount(() => {
+      stop();
+    });
+    return {
+      classNames,
+      cameras,
+      video,
+      stream,
+      toggle,
+      isActive,
+      isTaken,
+      isProcessing,
+      message,
+      take,
+      retake,
+      preview,
+      turnOn,
+      onStart,
+      toast,
+      deviceId
+    };
+  }
+});
+</script>
+
+<style lang="postcss">
+.camera {
+  @apply bg-black w-full flex flex-col aspect-video select-none relative;
+
+  &__video {
+    @apply flex-grow min-h-full max-w-full h-auto;
+  }
+
+  &--mirror {
+    .camera__video {
+      @apply -scale-x-100;
+    }
+  }
+
+  &__mask-container {
+    @apply absolute top-0 left-0 right-0 bottom-0 w-full h-full overflow-hidden pointer-events-none;
+  }
+
+  &__mask {
+    @apply absolute top-1/2 left-1/2 shadow-mask -translate-x-1/2 -translate-y-1/2;
+
+    &--none &-container {
+      @apply hidden;
+    }
+
+    &--square & {
+      @apply aspect-square w-2/3 md:w-1/2;
+    }
+
+    &--round & {
+      @apply aspect-square rounded-full w-1/2;
+    }
+
+    &--card & {
+      @apply aspect-[85.60/53.98] w-2/3 rounded-md;
+    }
+  }
+
+  &__result {
+    @apply max-w-full h-auto;
+  }
+
+  &__off-info {
+    @apply absolute bottom-20 text-white left-0 right-0 text-center text-sm;
+  }
+
+  &__controls {
+    @apply py-3 flex w-full flex-shrink-0 justify-center items-center absolute bottom-0 gap-3;
+  }
+
+  &__toast {
+    @apply absolute bottom-20 left-0 right-0 text-center text-white px-4;
+
+    &-text {
+      @apply bg-black bg-opacity-80 px-4 py-1 text-sm rounded shadow-md inline-block max-w-full truncate;
+    }
+  }
+}
+</style>

package/dist/components/camera/Camera.vue.d.ts

@@ -0,0 +1,92 @@
+import { ComputedRef, PropType } from 'vue-demi';
+import { Adapter, MaskVariant, ModelModifier } from './adapter/adapter';
+declare const _default: import("vue-demi").DefineComponent<{
+    modelValue: {
+        type: PropType<string | string[] | File | File[]>;
+        default: string;
+    };
+    modelModifiers: {
+        type: PropType<ModelModifier>;
+        default: () => ModelModifier;
+    };
+    mirror: {
+        type: PropType<boolean | "all" | "preview">;
+        default: any;
+    };
+    mask: {
+        type: PropType<MaskVariant>;
+        default: any;
+    };
+    adapter: {
+        type: PropType<Adapter>;
+        default: Adapter;
+    };
+    facingMode: {
+        type: PropType<ConstrainDOMString>;
+        default: any;
+    };
+    silent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    classNames: ComputedRef<string[]>;
+    cameras: ComputedRef<MediaDeviceInfo[]>;
+    video: import("vue-demi").Ref<HTMLVideoElement>;
+    stream: import("vue-demi").Ref<MediaStream>;
+    toggle: () => void;
+    isActive: import("vue-demi").Ref<boolean>;
+    isTaken: import("vue-demi").Ref<boolean>;
+    isProcessing: import("vue-demi").Ref<boolean>;
+    message: import("vue-demi").Ref<string>;
+    take: () => Promise<void>;
+    retake: () => Promise<void>;
+    preview: import("vue-demi").Ref<string>;
+    turnOn: () => Promise<void>;
+    onStart: () => void;
+    toast: (text: string) => void;
+    deviceId: ComputedRef<string>;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("change" | "update:modelValue" | "start" | "result")[], "change" | "start" | "update:modelValue" | "result", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    modelValue: {
+        type: PropType<string | string[] | File | File[]>;
+        default: string;
+    };
+    modelModifiers: {
+        type: PropType<ModelModifier>;
+        default: () => ModelModifier;
+    };
+    mirror: {
+        type: PropType<boolean | "all" | "preview">;
+        default: any;
+    };
+    mask: {
+        type: PropType<MaskVariant>;
+        default: any;
+    };
+    adapter: {
+        type: PropType<Adapter>;
+        default: Adapter;
+    };
+    facingMode: {
+        type: PropType<ConstrainDOMString>;
+        default: any;
+    };
+    silent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    onChange?: (...args: any[]) => any;
+    "onUpdate:modelValue"?: (...args: any[]) => any;
+    onStart?: (...args: any[]) => any;
+    onResult?: (...args: any[]) => any;
+}, {
+    modelValue: string | string[] | File | File[];
+    mask: MaskVariant;
+    mirror: boolean | "all" | "preview";
+    facingMode: any;
+    modelModifiers: ModelModifier;
+    adapter: Adapter;
+    silent: boolean;
+}>;
+export default _default;

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

@@ -0,0 +1,41 @@
+import { ComputedRef, Ref } from 'vue-demi';
+export declare type MaskVariant = 'square' | 'round' | 'card' | 'none';
+export declare type MirrorMode = boolean | 'preview' | 'all';
+export interface ModelModifier {
+    base64: boolean;
+}
+export interface AdapterMeta {
+    /**
+     * Auto take an image,
+     * It will start processing when camera started.
+     */
+    autoStart: boolean;
+    /**
+     * Default value for props `facingMode`
+     */
+    mask: MaskVariant;
+    /**
+     * Default value for props `mirror`
+     */
+    mirror: MirrorMode;
+    /**
+     * Default value for props `facingMode`
+     */
+    facingMode: ConstrainDOMString;
+}
+export interface CameraContext {
+    video: Ref<HTMLVideoElement>;
+    stream: Ref<MediaStream>;
+    modifier: Ref<ModelModifier>;
+    meta: ComputedRef<AdapterMeta>;
+    toast: (message: string) => void;
+}
+export interface CameraResult {
+    preview: string;
+    result: string | string[] | globalThis.File | globalThis.File[];
+}
+export interface Adapter {
+    meta?: Partial<AdapterMeta>;
+    run: (context: CameraContext) => CameraResult | Promise<CameraResult>;
+}
+export declare function defineAdapter(adapter: Adapter): Adapter;

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

@@ -0,0 +1,3 @@
+export function defineAdapter(adapter) {
+  return adapter;
+}

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

@@ -0,0 +1,5 @@
+/**
+ * Basic adapter for capture image from camera
+ */
+declare const _default: import("./adapter").Adapter;
+export default _default;

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

@@ -0,0 +1,12 @@
+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/liveness.d.ts

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

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

@@ -0,0 +1,46 @@
+import { fromBase64 } from "../../utils/base64.mjs";
+import {
+  createTemplate,
+  motionDetection,
+  MOTION_AREA_SIZE,
+  MOTION_FPS,
+  MOTION_THRESHOLD,
+  takeSample
+} from "../utils/motion";
+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/qr-code.d.ts

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

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

@@ -0,0 +1,19 @@
+import { defineAdapter } from "./adapter.mjs";
+import { BrowserQRCodeReader } from "@zxing/browser";
+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 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/utils/motion.d.ts

@@ -0,0 +1,29 @@
+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;