vue-camera-lib

Simple yet powerful camera library for Vue 3. The main purpose of this library is to display camera output and take a picture on user demand.

Features

• Taking pictures within your webpage
• Default UI which looks like mobile a camera app, but you can always make a custom UI
• Rotates a photo if the user uses a device in landscape mode (if the device has a gyroscope)

Demo

Demo is available here, source code of that demo is available here

Installation

npm i vue-camera-lib
# or
yarn add vue-camera-lib

Usage

To use it in your Vue3 app, the best way is to edit src/main.js file by adding two lines:

import VueCameraLib from 'vue-camera-lib'
app.use(VueCameraLib)

So after edit the file should look like this:

import { createApp } from 'vue'
// ... more imports

// add this:
import VueCameraLib from 'vue-camera-lib'

const app = createApp(App)

// here can be router setup, other plugins

// add this:
app.use(VueCameraLib)

app.mount('#app')

The second way how to do it, if you need a camera just in a few places, is to import it directly into your components

<template>
    <WebCamUI :fullscreenState="false"  @photoTaken="photoTaken" />
</template>

<script>
import { WebCamUI } from 'vue-camera-lib'

export default {
  components: {
    WebCamUI,
  },
  methods: {
    photoTaken(data) {
      console.log('image blob: ', data.blob)
      console.log('image data url', data.image_data_url)
    },
  }
},

That was about importing the library to your project, let's look closely at two components, the WebCamUI and the WebCam.

WebCamUI

This component has already a user interface, so it is very easy to use it, the main event you want to listen to is photoTaken as is seen above.

All events that are emitted:

• clear - clear video tracks, called from stop
• stop - stop if its started
• start
• pause
• resume
• error (message) - errors occurred
• unsupported (message) - browser is not supported
• init - first run
• photoTaken ({blob, image_data_url}) - Photo was successfully taken, the argument is an object with blob and image_data_url attributes
• fullscreen (currentState) - Fullscreen state changed

Used props

const props: {
    reloadCamerasButton: {
        type: Object,
        default: {
            display: false,
            text: 'Reload cameras',
            css: 'inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-500 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500'
        }
    },
    takePhotoButton: {
        type: Object,
        default: {
            display: true,
            text: 'Take a photo',
            css: 'inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-indigo-500 border border-transparent rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500'
        }
    },
    fullscreenButton: {
        type: Object,
        default: {
            display: true,
            text: 'Fullscreen',
            css: 'inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-indigo-500 border border-transparent rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500'
        }
    },
    selectCameraLabel: {
        type: String,
        default: 'Select camera...'
    },
    // there is a watcher than will change the state of fullscreen on change
    fullscreenState: {
        type: Boolean,
        default: false,
    }
}

WebCam

This component has barely any UI and should be used within its own UI.

All events that are emitted:

• clear - clear video tracks, called from stop
• stop - stop if its started
• start
• pause
• resume
• error (message) - errors occurred
• unsupported (message) - browser is not supported
• init - first run
• photoTaken ({blob, image_data_url}) - Photo was successfully taken, the argument is an object with blob and image_data_url attributes

Used props

const props: {
    // if should remember last camera
    rememberDevice: {
        type: Boolean,
        default: true,
    },
    // try to use these device instead of first one, if the camera label has any keyword from this list
    preferCamerasWithLabel: {
        type: Array,
        default: ['back', 'usb'],
    },
    // class list of video element
    classList: {
        type: String,
        default: 'w-full h-auto'
    },
    // constraints that will be passed to getUserMedia, you can specify preferred resolution, facing direction etc.
    constraints: {
        type: Object,
        default: { video: { width: {ideal: 2560}, height: {ideal: 1440} }, facingMode: 'environment' }
    },
    // if device has gyroscope and the device is rotated (for example in landscape mode), this will try to rotate the image
    tryToRotateImage: {
        type: Boolean,
        default: true
    },
    // output image
    imageType: {
        type: String,
        default: 'image/jpeg'
    },
    // will store the last used device in the local storage if rememberDevice is enabled
    rememberDeviceTokenName: {
        type: String,
        default: '_vwl_device_id'
    },
    // if should automatically start and select the best device depending to preferCamerasWithLabel and constraints, or selects first device 
    autoStart: {
        type: Boolean,
        default: true
    },
    // play audio on photo taken
    audio: {
        type: Boolean,
        default: true
    },
    // shutter effect on photo taken
    shutterEffect: {
        type: Boolean,
        default: true
    }
}

Methods

| Name | Parameters | Description | | --- | --- | --- | | loadCameras | | Try to load all available cameras and if auto start is enabled, then it tries to start video stream | | changeCamera | deviceId | Change the camera. The deviceId in cameras data, which is array of MediaDeviceInfo. If passed undefined, then it stops the current camera without starting any other. | | start | | Start the camera after stopping it (will be used last deviceId, if you need to use another, use changeCamera method) | | stop | | Stop the camera's video steam | | pause | | Pause the camera | | resume | | Resume the camera after it was paused |

How to call methods

You need to have a ref attribute on Webcam element and then use this.$refs.webcam., example:

<template>
    <div>
        <!-- the ref attribute is very important -->
        <Webcam ref="webcam" @photoTaken="photoTakenEvent" @init="webcamInit" />
        <select @change="setCamera" v-model="deviceId">
            <option value="">-</option>
            <option v-for="camera in cameras" :value="camera.deviceId">{{camera.label}}</option>
        </select>
        <button @click="takePhoto">Take a photo</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            cameras: [],
            deviceId: '',
        }
    },
    methods: {
        async takePhoto() {
            try {
                await this.$refs.webcam.takePhoto();
            } catch (err) {
                console.log(err)
            }
        },
        loadCameras() {
            this.$refs.webcam.loadCameras()
            this.cameras = this.$refs.webcam.cameras;
        },
        webcamInit(deviceId) {
            this.deviceId = deviceId
            this.$emit('init', this.deviceId)
        },
        setCamera() {
            this.$refs.webcam.changeCamera(this.deviceId === '' ? null : this.deviceId)
        },

        photoTakenEvent({ blob, image_data_url }) {
            this.$emit('photoTaken', { blob, image_data_url })
        },
    },
    // load cameras
    mounted () {
        this.cameras = this.$refs.webcam.cameras;
        if (this.cameras.length === 0) {
            // if no camera found, we will try to refresh cameras list each second until there is some camera
            let reloadCamInterval = setInterval(() => {
                this.loadCameras()
                if (this.cameras.length > 0) {
                    clearInterval(reloadCamInterval)
                }
            }, 1000);
        }
    },
}
</script>

Contributing

Pull requests are welcomed because currently, I do not plan to make any changes.

With ❤️ by Alex Kratky

Contact webpage

This package was inspired by vue-web-cam