Skip to content

Commit

Permalink
style: formatting
Browse files Browse the repository at this point in the history
  • Loading branch information
ricardogobbosouza committed Oct 1, 2019
1 parent ff23fd5 commit 3d94446
Show file tree
Hide file tree
Showing 7 changed files with 179 additions and 122 deletions.
18 changes: 8 additions & 10 deletions .babelrc
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
{
"presets": [
["@babel/preset-env", { "modules": false } ]
],
"plugins": [
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-transform-runtime",
"@babel/plugin-transform-object-assign",
"@babel/plugin-proposal-object-rest-spread"
]
}
"presets": [["@babel/preset-env", { "modules": false }]],
"plugins": [
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-transform-runtime",
"@babel/plugin-transform-object-assign",
"@babel/plugin-proposal-object-rest-spread"
]
}
87 changes: 45 additions & 42 deletions .eslintrc.json
Original file line number Diff line number Diff line change
@@ -1,44 +1,47 @@
{
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"node": true
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"node": true
},
"extends": [
"eslint:recommended",
"plugin:vue/recommended",
"plugin:import/errors",
"plugin:import/warnings"
],
"parserOptions": {
"parser": "babel-eslint",
"ecmaFeatures": {
"jsx": true
},
"extends": [
"eslint:recommended",
"plugin:vue/recommended",
"plugin:import/errors",
"plugin:import/warnings"
],
"parserOptions": {
"parser": "babel-eslint",
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2017,
"sourceType": "module"
},
"plugins": ["vue", "prettier"],
"rules": {
"no-const-assign": "warn",
"no-this-before-super": "warn",
"no-undef": "warn",
"no-unreachable": "warn",
"no-unused-vars": "off",
"constructor-super": "warn",
"valid-typeof": "warn",
"import/no-unresolved": "off",
"import/no-unassigned-import": "warn",
"semi": 0,
"no-console": "off",
"prettier/prettier": "error",
"vue/max-attributes-per-line": [2, {
"singleline": 2,
"multiline": {
"max": 1,
"allowFirstLine": true
}
}]
}
}
"ecmaVersion": 2017,
"sourceType": "module"
},
"plugins": ["vue", "prettier"],
"rules": {
"no-const-assign": "warn",
"no-this-before-super": "warn",
"no-undef": "warn",
"no-unreachable": "warn",
"no-unused-vars": "off",
"constructor-super": "warn",
"valid-typeof": "warn",
"import/no-unresolved": "off",
"import/no-unassigned-import": "warn",
"semi": 0,
"no-console": "off",
"prettier/prettier": "error",
"vue/max-attributes-per-line": [
2,
{
"singleline": 2,
"multiline": {
"max": 1,
"allowFirstLine": true
}
}
]
}
}
2 changes: 1 addition & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,4 @@ demo/
node_modules/
npm-debug.log
yarn-error.log
package-lock.json
package-lock.json
66 changes: 33 additions & 33 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,18 +16,17 @@
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

```javascript
```js
import Vue from 'vue'
import WebCam from "../../src";
Vue.use(WebCam);
Expand All @@ -49,55 +48,56 @@ components: {
}

<vue-web-cam ... />

```

## 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 |
| deviceId | string | null | currently selected camera |
| 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 |
| 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 |
| 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 |
| 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..
- 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

Expand Down
50 changes: 34 additions & 16 deletions index.html
Original file line number Diff line number Diff line change
@@ -1,26 +1,44 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta charset="utf-8" />
<title>Vue Web Cam</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
crossorigin="anonymous"
/>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
<a class="navbar-brand" href="">Vue Webcam</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>

<main role="main" class="container">
<div id="app"></div>
</main>
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
<a class="navbar-brand" href="">Vue Webcam</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarCollapse"
aria-controls="navbarCollapse"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
</nav>

<main role="main" class="container">
<div id="app"></div>
</main>

<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"
/>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"
integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"
crossorigin="anonymous"
/>
</body>
</html>
16 changes: 8 additions & 8 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,11 @@
"name": "vue-web-cam",
"version": "1.7.1",
"description": "Webcam component for Vuejs applications",
"main": "dist/index.js",
"repository": {
"type": "git",
"url": "https://github.com/vinceg/vue-web-cam"
},
"license": "MIT",
"author": {
"name": "Mohammad Shoriful Islam Ronju",
"email": "[email protected]",
Expand All @@ -15,19 +19,15 @@
"url": "https://github.com/vinceg"
}
],
"main": "dist/index.js",
"scripts": {
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules --config build/webpack.config.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --hot --config demo/webpack.config.js",
"demo": "cross-env NODE_ENV=production webpack --progress --hide-modules --config demo/webpack.config.js"
"demo": "cross-env NODE_ENV=production webpack --progress --hide-modules --config demo/webpack.config.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --hot --config demo/webpack.config.js"
},
"dependencies": {
"vue": "^2.5.17"
},
"repository": {
"type": "git",
"url": "https://github.com/vinceg/vue-web-cam"
},
"license": "MIT",
"devDependencies": {
"@babel/cli": "^7.2.3",
"@babel/core": "^7.2.2",
Expand Down
Loading

0 comments on commit 3d94446

Please sign in to comment.