Skip to content

kelvin2go/vue-cam-vision

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

50 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vue-cam-vision

Webcam component for VueJs. Enable webcam + google AI vision at the same component. See this for browser compatibility.

Online :

Installation

npm install vue-cam-vision --save

yarn add vue-cam-vision

Usage

// 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 @smronju vue-webcam and react-webcam