vue-web-cam
vue-web-cam
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 base64 encoded string |
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
Dependencies
Dependencies
@babel/cli: ^7.2.3@babel/core: ^7.2.2@babel/plugin-proposal-class-properties: ^7.0.0@babel/plugin-proposal-decorators: ^7.0.0@babel/plugin-proposal-export-namespace-from: ^7.0.0@babel/plugin-proposal-function-sent: ^7.0.0@babel/plugin-proposal-json-strings: ^7.0.0@babel/plugin-proposal-numeric-separator: ^7.0.0@babel/plugin-proposal-object-rest-spread: ^7.2.0@babel/plugin-proposal-throw-expressions: ^7.0.0@babel/plugin-syntax-dynamic-import: ^7.0.0@babel/plugin-syntax-import-meta: ^7.0.0@babel/plugin-transform-object-assign: ^7.2.0@babel/plugin-transform-runtime: ^7.2.0@babel/polyfill: ^7.2.5@babel/preset-env: ^7.2.3@babel/runtime: ^7.2.0babel-eslint: ^10.0.1babel-loader: ^8.0.5cross-env: ^5.1css-loader: ^0.25.0eslint: ^5.8.0eslint-plugin-import: ^2.14.0eslint-plugin-prettier: ^3.0.0eslint-plugin-vue: ^4.7.1extract-text-webpack-plugin: ^3.0file-loader: ^0.9.0function-bind: ^1.0.2html-webpack-plugin: 3.2.0lodash: ^4.17.13mixin-deep: ^2.0.1set-value: ^2.0.1vue-loader: ^15.0.0vue-style-loader: ^4.1.2vue-template-compiler: ^2.5.7webpack: 4.28.4webpack-cli: ^3.2.1webpack-dev-server: >=3.1.11webpack-merge: ^0.14.1