vue-vision-camera
v1.2.0
Published
Camera component for Vue 3. We can use this component for computer vision tasks like barcode scanning, text recognition, etc.
Downloads
27
Maintainers
Readme
Camera component for Vue 3. We can use this component for computer vision tasks like barcode scanning, text recognition, etc.
Usage
<VisionCamera
:isActive="isActive"
:desiredResolution="{width:1280,height:720}"
desiredCamera="back"
facingMode="environment"
@devicesLoaded="devicesLoaded"
@closed="closed"
@opened="opened"
>
const opened = (cam) => {
console.log("camera opened");
//get the inner video element in the opened event
}
const closed = () => {
console.log("camera closed");
}
const devicesLoaded = (devices) => {
console.log(devices); // get the list of existing camera devices
}
Installation
npm install vue-vision-camera
Then import the component to use it.
import { VisionCamera } from 'vue-vision-camera'
export default {
name: 'App',
components: {
VisionCamera
}
}
Demos
Barcode Scanner using Dynamsoft Barcode Reader
FAQ
How to specify which camera to use?
- Use the
desiredCamera
prop. If one of the camera's name contains it, then it will be used. You can get the devices list in thedevicesLoaded
event. - Use the
facingMode
prop. Set it toenvironment
to use the back camera. Set it touser
to use the front camera. Please note that this is not supported on Desktop.
You can use the two props together.