Skip to content
On this page

Camera

Take picture from user's camera

Usage

Simple Usage

Camera is off
preview
vue
<template>
  <p-camera />
</template>

Mirror Mode

Add prop mirror to enable mirror mode.

Camera is off
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.

Camera is off
preview
vue
<template>
  <p-camera mirror="preview" />
</template>

Masking

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

Camera is off
Camera is off
Camera is off
preview
vue
<template>
  <p-camera mask="square" />
  <p-camera mask="round" />
  <p-camera mask="card" />
</template>

Silent

Add prop silent to disabled shutter sound.

Camera is off
preview
vue
<template>
  <p-camera silent />
</template>

Liveness

Change adapter to Liveness to perform liveness capture.

Camera is off
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.

Camera is off
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.

Camera is off
preview
vue
<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.

Camera is off
preview
vue
<template>
  <p-camera v-model.base64="resultB64" />
</template>

result:

API

Props

PropsTypeDefaultDescription
mirrorBoolean, String-Enable mirror mode, set to preview for Preview Only
maskString-Enable mask overlay, valid value is square, round, card, none
silentBooleanfalseMute shutter sound
adapterAdapterCaptureAdapterCamera Adapter
modelValueFile-v-model value

Slots

NameDescription
There no slots here

Events

NameArgumentsDescription
start-Event when camera started
result-Event when camera captured image

Released under the MIT License.