Camera ​

Take picture from user's camera

Usage ​

Simple Usage ​

<template>
  <p-camera />
</template>

Mirror Mode ​

Add prop mirror to enable mirror mode.

<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.

<template>
  <p-camera mirror="preview" />
</template>

Masking ​

Add mask overlay using prop mask. There are 3 available masks square, round, card.

<template>
  <p-camera mask="square" />
  <p-camera mask="round" />
  <p-camera mask="card" />
</template>

Silent ​

Add prop silent to disabled shutter sound.

<template>
  <p-camera silent />
</template>

Liveness ​

Change adapter to Liveness to perform liveness capture.

<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.

<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.

<template>
  <p-camera v-model="result" />
</template>

result:

Encode to base64 ​

You can add modifier base64 to your v-model, it's enforce result to base64-dataURI.

<template>
  <p-camera v-model.base64="resultB64" />
</template>

result:

API ​

Props ​

Slots ​

Events ​