Vue Photo Capture

A Vue 2 Composition API library for capturing photos using a webcam or camera device. This library simplifies the process of setting up video streams, capturing photos, and managing resources, making it easy to integrate photo capture functionality into your Vue.js applications.

Features

Easy Video Stream Setup: Quickly initialize video streams with custom options.
Photo Capture: Capture photos from the video stream and export them as Blob objects.

Installation

npm install vue-photo-capture

Usage

<template>
  <div>
    <video playsinline autoplay :srcObject="videoStream"></video>
    <img :src="imgUrl" alt="photo">
    <button @click="capturePhoto()">Capture Photo</button>
  </div>
</template>

<template>
  <div>
    <video width="1280" height="720" ref="videoElement" playsinline autoplay :srcObject="videoStream"></video>
    <img :src="imgUrl" alt="photo">
    <button @click="capturePhoto(videoElement)">Capture Photo</button>
  </div>
</template>

<script setup>
import { onMounted, computed } from 'vue';
import { usePhotoCapture } from 'vue-photo-capture';

const {   
  screenshotVideoBlob, 
  videoStream,
  setUpVideoForScreenshot,
  capturePhoto
} = usePhotoCapture();
const imgUrl = computed(() => screenshotVideoBlob.value ? URL.createObjectURL(screenshotVideoBlob.value) : '')

onMounted(async () => {
  await setUpVideoForScreenshot();
});
</script>

API

The usePhotoCapture function provides a set of reactive properties and methods to handle photo capture.

Properties:

videoForScreenShot: A reactive reference to the HTML <video> element used for capturing photos.
screenshotVideoBlob: A reactive reference to the captured photo as a Blob object.
videoStream: A reactive reference to the MediaStream object representing the video stream.

Methods:

setUpVideoForScreenshot(videoOptions?: Object): Promise: Sets up the video stream with the given options and binds it to the videoForScreenShot element. Default options:

{
  width: {max: 1280, ideal: 1280},
  height: {min: 400, ideal: 1080},
  facingMode: {exact: 'user'},
  frameRate: {min: 15, ideal: 24, max: 30},
  aspectRatio: {ideal: 1.7777777778},
}

capturePhoto(videoElement: HTMLVideoElement): void: Captures a photo from the provided video element and stores it as a Blob in screenshotVideoBlob.

Example with Custom Options

<script setup>
import { onMounted } from 'vue';
import { usePhotoCapture } from 'vue-photo-capture';

const { setUpVideoForScreenshot, capturePhoto } = usePhotoCapture();

onMounted(async () => {
  const customOptions = {
    width: { ideal: 1920 },
    height: { ideal: 1080 },
    facingMode: { exact: 'environment' }, // Use the rear camera if available
  };
  await setUpVideoForScreenshot(customOptions);
});
</script>

Cleanup

usePhotoCapture automatically cleans up resources when the component is unmounted, resetting all reactive references to null.

Contributing

Contributions are welcome! Please open an issue or submit a pull request on GitHub.

License

This project is licensed under the MIT License.

JuliettKhar/vue-photo-capture