# vue-2-cam

> VueJS 2 Webcam component (fork from https://github.com/shaya72/vue-cam-vision) with get user media / google imagecapture / google vision api

Latest version **1.4.6** (published 2021-09-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-2-cam
pnpm add vue-2-cam
yarn add vue-2-cam
bun add vue-2-cam
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.4.6 |
| Published | 2021-09-24 |
| First published | 2021-09-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 8.10.0 |
| Dependencies | 2 |
| Unpacked size | 1.7 MB |
| Known vulnerabilities | 0 (+24 in 2 direct dependencies) |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Kelvin Ho |
| Maintainers | thaintp |
| Keywords | vuejs, web, cam, google, vision, api |

## Links

- npm: https://www.npmjs.com/package/vue-2-cam
- Repository: https://github.com/thaintp/vue-2-cam
- Homepage: https://github.com/thaintp/vue-2-cam#readme
- Issues: https://github.com/thaintp/vue-2-cam/issues
- npm.io page: https://npm.io/package/vue-2-cam

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.5.17
- [axios](https://npm.io/package/axios.md) ^0.21.4

## Alternatives

- [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads
- [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads
- [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads
- [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads
- [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads

## Recent versions

- 1.4.6 (latest) — 2021-09-24
- 1.4.5 — 2021-09-24
- 1.4.4 — 2021-09-01
- 1.4.3 — 2021-09-01
- 1.4.2 — 2021-09-01
- 1.4.1 — 2021-09-01

## README

# vue-cam-vision

<!-- [![npm](https://img.shields.io/npm/v/vue-web-cam.svg)](https://www.npmjs.com/package/vue-web-cam)
[![npm](https://img.shields.io/npm/dm/vue-web-cam.svg)](https://www.npmjs.com/package/vue-web-cam)
![Contributions welcome](https://img.shields.io/badge/contributions-welcome-orange.svg)
[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT) -->

Webcam component for VueJs. Enable webcam + google AI vision at the same component.  See [this](http://caniuse.com/#feat=stream)
for browser compatibility.

Online : 
-   [demo](https://kelvinho.js.org/vue/vue-cam-vision/) 
-   [Project Google vision Demo](https://kelvinho.js.org/playground/#/vision) (idea from https://experiments.withgoogle.com/thing-translator)
-   [OCR Demo](https://ocr.dogdogbnb.hk/)


<p align="center">
    <img src="assets/demo.png">
</p>




## Installation

```
npm install vue-cam-vision --save

yarn add vue-cam-vision
```

## Usage

```javascript
// vue page
<template>
    <WebCam
        ref="webcam"
        :deviceId="deviceId"
        width="auto"
        height="100%"
        @cameras="onCameras"
        @camera-change="onCameraChange"
        :isFrontCam="frontCam"
        :googleKey="googleKey"
        >
    </WebCam>
</template>
import { WebCam } from 'vue-cam-vision'

export default {
  data () {
    return {
      captures: [],
      imgReport: [],
      frontCam: false,
      webcam: null,
      img: null,
      camera: null,
      deviceId: null,
      devices: [],
      googleKey: config.googleVisionKey
    }
  },
  components: {
    WebCam
  }
}

// or
import {WebCam} from 'vue-cam-vision'
Vue.component(WebCam.name, WebCam)
```

## Testing & Dev

```
npm run dev
```

### Props

| prop             | type    | default      | notes                     |
| ---------------- | ------- | ------------ | ------------------------- |
| height           | number  | 500          | height of video element   |
| width            | number  | 500          | width of video element    |
| autoplay         | boolean | true         | autoplay attribute        |
| screenshotFormat | string  | 'image/jpeg' | format of screenshot      |
| deviceId         | string  | null         | currently selected camera |
| googleKey        | string  | null         | GOOGLE VISION API KEY     |

### Events

| name           | param    | notes                                                         |
| -------------- | -------- | ------------------------------------------------------------- |
| started        | stream   | emitted once the stream has started                           |
| stopped        | stream   | emitted once the stream has stopped                           |
| error          | error    | emitted if the stream failed to start with the error returned |
| notsupported   | error    | emitted when the browser does not support this feature        |
| cameras        | cameras  | emitted when a list of all cameras available is loaded        |
| camera-change  | deviceId | emitted when camera change occurs                             |

### Methods

| name           | param    | notes                                                                   |
| -------------- | -------- | ----------------------------------------------------------------------- |
| capture        | void     | Capture the current image through the webcam as base64 encoded string   |
| changeCamera   | deviceId | change the currently selected camera. Must pass in the device ID        |
| start          | void     | Programatically Start the camera after stopping it (relies on deviceId prop passed to the component)                     |
| stop           | void     | Programatically stop the camera      |

## License

MIT

## Credits

This is based off [VinceG vue-web-cam](https://github.com/VinceG/vue-web-cam)
[@smronju vue-webcam](https://github.com/smronju/vue-webcam) and [react-webcam](https://github.com/mozmorris/react-webcam)

---
_Source: https://npm.io/package/vue-2-cam · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._