Vue3 Camera Jebreet

Compabilities

  - vue 3
  - nuxt 3

Instalation

  npm i vue-camera-jebreet

Usage

<script setup lang="ts">
import CameraJebreet from 'vue3-camera-jebreet'
</script>

<template>
  <CameraJebreet
    ref="camera"
    facingModeCamera="user"
    :preview="true"
  >
  </CameraJebreet>
</template>

<style scoped></style>

Frame (Update version 2)

The latest update is available using frames. for frames must use a white background and you need a frame slot. for example as below

<CameraJebreet
  ref="camera"
  facingModeCamera="user"
  :preview="true"
  :size="100"
  frame
>
</CameraJebreet>

for custom frame using slot frame but need props frame too and need to use white background.

<CameraJebreet
  ref="camera"
  facingModeCamera="user"
  :preview="true"
  frame
>
  <template #frame>
    <div
      style="
        height: 300px;
        width: 300px;
        border-radius: 50%;
        background: white;
      "
    ></div>
  </template>
</CameraJebreet>

example

Ref

GET Result

<script setup lang="ts">
import { ref, watch } from 'vue'
import CameraJebreet from '../lib/camera-jebreet.vue'
const camera = ref()

watch(
  () => camera.value?.result,
  (newValue) => {
    console.log(newValue)
  }
)
</script>

<template>
  <CameraJebreet ref="camera" facingModeCamera="user" :preview="true">
  </CameraJebreet>
</template>

| Parameter Ref | Description | type | | :------------ | :------------ | :--------- | | capture | Capture Photo | function | | stop | stop camera | function | | start | start camera | function | | result | result camera | base64/png |

Slot

| Parameter | props | Description | Required | | :----------- | :----- | :--------------------------------------------------------------------------- | :------- | | facingMode | action | This slot is used to create a button facing user or environment mode | No | | capture | action | This slot is used to create a button capture photo | No |

 <CameraJebreet custom>
    <template #capture="{ action }">
      <button
        @click="handleCapture(action)"
        style="position: absolute; left: 0; bottom: 20px"
      >
        Photo
      </button>
    </template>
     <template #facingMode="{ action }">
      <button
        @click="handleChangeCamera(action)"
        style="position: absolute; left: 30px; bottom: 20px"
      >
        Photo
      </button>
    </template>
  </CameraJebreet>

Props

| Parameter | value | default | Required | | :----------------- | :------------------------------ | :---------- | :------- | | facingModeCamera | user or environment | environment | No | | size | size camera (vh) | 100 | No | | custom | custom is used to change button | false | No | | preview | view result photo | false | No |

 <CameraJebreet
    ref="camera"
    facingModeCamera="user"
    :preview="true"
    :size="90"
    custom
  >
    <template #capture="{ action }">
      <button
        @click="handleCapture(action)"
        style="position: absolute; left: 0; bottom: 20px"
      >
        Photo
      </button>
    </template>
  </CameraJebreet>

License

MIT License