https://github.com/xulihang/vue-vision-camera
Vue Camera Component for Computer Vision
https://github.com/xulihang/vue-vision-camera
Last synced: 6 days ago
JSON representation
Vue Camera Component for Computer Vision
- Host: GitHub
- URL: https://github.com/xulihang/vue-vision-camera
- Owner: xulihang
- Created: 2022-07-05T09:22:04.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-07-11T07:17:20.000Z (over 3 years ago)
- Last Synced: 2024-04-25T06:22:41.445Z (almost 2 years ago)
- Language: Vue
- Size: 453 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-vue - vue-vision-camera - Camera component for Vue 3. We can use this component for computer vision tasks like barcode/QR code scanning, text recognition, etc. (Components & Libraries / UI Components)
README
Camera component for Vue 3. We can use this component for computer vision tasks like barcode scanning, text recognition, etc.
[Online demo](https://lovely-squirrel-9abb74.netlify.app/)
## Usage
```vue
```
```js
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.
```js
import { VisionCamera } from 'vue-vision-camera'
export default {
name: 'App',
components: {
VisionCamera
}
}
```
## Demos
[Barcode Scanner](https://github.com/xulihang/vue-vision-camera/tree/main/example) using [Dynamsoft Barcode Reader](https://www.dynamsoft.com/barcode-reader/overview/)
## FAQ
How to specify which camera to use?
1. 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 the `devicesLoaded` event.
2. Use the `facingMode` prop. Set it to `environment` to use the back camera. Set it to `user` to use the front camera. Please note that this is not supported on Desktop.
You can use the two props together.