vue-web-cam

Webcam component for VueJs. See this for browser compatibility.

Installation

npm install @carloscgo/vue-web-cam --save

yarn add  @carloscgo/vue-web-cam

Usage

import Vue from 'vue'
import WebCam from 'vue-web-cam'

Vue.use(WebCam)
// or
import {WebCam} from 'vue-web-cam'
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 |

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 | | video-live | stream | emitted when video is started |

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 |

Contributing

If you'd like to help make this project better you can help with the following tasks:

• Tests - This project needs a way to test the functionality using a javascript testing solution (Jest as an example)
• Examples - Additional Examples of usage might be helpful to others.
• Project Website - Perhaps launch a project website (on Github Pages) that'll showcase the plugin, Demo, Usage instructions, configuration etc..

License

MIT

Credits

This is based off @smronju vue-webcam and react-webcam