Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/VinceG/vue-web-cam
Webcam component for VueJs.
https://github.com/VinceG/vue-web-cam
vue vuejs webcam webpack
Last synced: 3 months ago
JSON representation
Webcam component for VueJs.
- Host: GitHub
- URL: https://github.com/VinceG/vue-web-cam
- Owner: VinceG
- License: mit
- Archived: true
- Created: 2017-06-26T18:17:33.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T19:03:52.000Z (almost 2 years ago)
- Last Synced: 2024-04-24T10:18:15.542Z (7 months ago)
- Topics: vue, vuejs, webcam, webpack
- Language: Vue
- Homepage:
- Size: 816 KB
- Stars: 257
- Watchers: 7
- Forks: 116
- Open Issues: 34
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-web-cam
[](https://www.npmjs.com/package/vue-web-cam)
[](https://www.npmjs.com/package/vue-web-cam)
[](https://opensource.org/licenses/MIT)
Webcam component for VueJs. See [this](http://caniuse.com/#feat=stream)
for browser compatibility.
## Installation
```bash
npm install vue-web-cam --save
// or
yarn add vue-web-cam
```
## Usage
```js
import Vue from 'vue'
import WebCam from "../../src";
Vue.use(WebCam);
// or
import { WebCam } from "vue-web-cam";
components: {
WebCam
}
components: {
'vue-web-cam': WebCam
}
```
## Nuxt.js
Add `vue-web-cam/nuxt` to modules section of `nuxt.config.js`
```javascript
{
modules: ['vue-web-cam/nuxt']
}
```
## Testing & Dev
```bash
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](https://github.com/smronju/vue-webcam) and [react-webcam](https://github.com/mozmorris/react-webcam)