Camera

Take picture from user's camera

Usage

Simple Usage

Camera is off

preview

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

Mirror Mode

Add prop mirror to enable mirror mode.

Camera is off

preview

<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

<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

<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

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

Liveness

Change adapter to Liveness to perform liveness capture.

Camera is off

preview

<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

<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

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

Note! v-model.base64 on QRCodeAdapter has no effect, the result will always original scanned text.

Camera is off

preview

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

result:

API

Props

Props	Type	Default	Description
mirror	Boolean, String	-	Enable mirror mode, set to preview for Preview Only
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

Name	Description
There no slots here

Events

Name	Arguments	Description
start	-	Event when camera started
result	-	Event when camera captured image