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

1npm i vue-camera-lib
2# or
3yarn 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:

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

So after edit the file should look like this:

1import { createApp } from 'vue'
2// ... more imports
3
4// add this:
5import VueCameraLib from 'vue-camera-lib'
6
7const app = createApp(App)
8
9// here can be router setup, other plugins
10
11// add this:
12app.use(VueCameraLib)
13
14app.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

1<template>
2    <WebCamUI :fullscreenState="false"  @photoTaken="photoTaken" />
3</template>
4
5<script>
6import { WebCamUI } from 'vue-camera-lib'
7
8export default {
9  components: {
10    WebCamUI,
11  },
12  methods: {
13    photoTaken(data) {
14      console.log('image blob: ', data.blob)
15      console.log('image data url', data.image_data_url)
16    },
17  }
18}
19</script>

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

1const props: {
2    reloadCamerasButton: {
3        type: Object,
4        default: {
5            display: false,
6            text: 'Reload cameras',
7            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'
8        }
9    },
10    takePhotoButton: {
11        type: Object,
12        default: {
13            display: true,
14            text: 'Take a photo',
15            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'
16        }
17    },
18    fullscreenButton: {
19        type: Object,
20        default: {
21            display: true,
22            text: 'Fullscreen',
23            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'
24        }
25    },
26    selectCameraLabel: {
27        type: String,
28        default: 'Select camera...'
29    },
30    // there is a watcher than will change the state of fullscreen on change
31    fullscreenState: {
32        type: Boolean,
33        default: false,
34    }
35}

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

1const props: {
2    // if should remember last camera
3    rememberDevice: {
4        type: Boolean,
5        default: true,
6    },
7    // try to use these device instead of first one, if the camera label has any keyword from this list
8    preferCamerasWithLabel: {
9        type: Array,
10        default: ['back', 'usb'],
11    },
12    // class list of video element
13    classList: {
14        type: String,
15        default: 'w-full h-auto'
16    },
17    // constraints that will be passed to getUserMedia, you can specify preferred resolution, facing direction etc.
18    constraints: {
19        type: Object,
20        default: { video: { width: {ideal: 2560}, height: {ideal: 1440} }, facingMode: 'environment' }
21    },
22    // if device has gyroscope and the device is rotated (for example in landscape mode), this will try to rotate the image
23    tryToRotateImage: {
24        type: Boolean,
25        default: true
26    },
27    // output image
28    imageType: {
29        type: String,
30        default: 'image/jpeg'
31    },
32    // will store the last used device in the local storage if rememberDevice is enabled
33    rememberDeviceTokenName: {
34        type: String,
35        default: '_vwl_device_id'
36    },
37    // if should automatically start and select the best device depending to preferCamerasWithLabel and constraints, or selects first device 
38    autoStart: {
39        type: Boolean,
40        default: true
41    },
42    // play audio on photo taken
43    audio: {
44        type: Boolean,
45        default: true
46    },
47    // shutter effect on photo taken
48    shutterEffect: {
49        type: Boolean,
50        default: true
51    }
52}

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:

1<template>
2    <div>
3        <!-- the ref attribute is very important -->
4        <Webcam ref="webcam" @photoTaken="photoTakenEvent" @init="webcamInit" />
5        <select @change="setCamera" v-model="deviceId">
6            <option value="">-</option>
7            <option v-for="camera in cameras" :value="camera.deviceId">{{camera.label}}</option>
8        </select>
9        <button @click="takePhoto">Take a photo</button>
10    </div>
11</template>
12
13<script>
14export default {
15    data() {
16        return {
17            cameras: [],
18            deviceId: '',
19        }
20    },
21    methods: {
22        async takePhoto() {
23            try {
24                await this.$refs.webcam.takePhoto();
25            } catch (err) {
26                console.log(err)
27            }
28        },
29        loadCameras() {
30            this.$refs.webcam.loadCameras()
31            this.cameras = this.$refs.webcam.cameras;
32        },
33        webcamInit(deviceId) {
34            this.deviceId = deviceId
35            this.$emit('init', this.deviceId)
36        },
37        setCamera() {
38            this.$refs.webcam.changeCamera(this.deviceId === '' ? null : this.deviceId)
39        },
40
41        photoTakenEvent({ blob, image_data_url }) {
42            this.$emit('photoTaken', { blob, image_data_url })
43        },
44    },
45    // load cameras
46    mounted () {
47        this.cameras = this.$refs.webcam.cameras;
48        if (this.cameras.length === 0) {
49            // if no camera found, we will try to refresh cameras list each second until there is some camera
50            let reloadCamInterval = setInterval(() => {
51                this.loadCameras()
52                if (this.cameras.length > 0) {
53                    clearInterval(reloadCamInterval)
54                }
55            }, 1000);
56        }
57    },
58}
59</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