/vue-web-cam

Webcam component for VueJs.

Primary LanguageVueMIT LicenseMIT

vue-web-cam

npm npm Contributions welcome License

Webcam component for VueJs. See this for browser compatibility.

Installation

npm install vue-web-cam --save
// or
yarn add vue-web-cam

Usage

import Vue from 'vue'
import WebCam from "../../src";
Vue.use(WebCam);


<vue-web-cam ... />

// or
import { WebCam } from "vue-web-cam";

components: {
    WebCam
}

<web-cam ... />

components: {
    'vue-web-cam': WebCam
}

<vue-web-cam ... />

Nuxt.js

Add vue-web-cam/nuxt to modules section of nuxt.config.js

{
  modules: ['vue-web-cam/nuxt']
}

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
selectFirstDevice boolean false select first device when avaialble
deviceId string null currently selected camera
playsinline boolean true playsinline of video element
resolution object null object with width and height for camera resolution

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 a base64 encoded dataUri
changeCamera deviceId change the currently selected camera. Must pass in the device ID
start void Programmatically Start the camera after stopping it (relies on deviceId prop passed to the component)
stop void Programmatically stop the camera
pause void Programmatically pause the camera
resume void Programmatically resume the camera after it was paused

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