From 3d94446ff0c90275e896baa53526ecd87f3952d3 Mon Sep 17 00:00:00 2001 From: Ricardo Gobbo de Souza Date: Tue, 1 Oct 2019 09:37:28 -0300 Subject: [PATCH 1/3] style: formatting --- .babelrc | 18 +++++------ .eslintrc.json | 87 ++++++++++++++++++++++++++------------------------ .gitignore | 2 +- README.md | 66 +++++++++++++++++++------------------- index.html | 50 +++++++++++++++++++---------- package.json | 16 +++++----- src/webcam.vue | 62 ++++++++++++++++++++++++++++------- 7 files changed, 179 insertions(+), 122 deletions(-) diff --git a/.babelrc b/.babelrc index a842e5e..1e52c6e 100644 --- a/.babelrc +++ b/.babelrc @@ -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" - ] -} \ No newline at end of file + "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" + ] +} diff --git a/.eslintrc.json b/.eslintrc.json index 8dfc842..98833bf 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -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 - } - }] - } - } \ No newline at end of file + "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 + } + } + ] + } +} diff --git a/.gitignore b/.gitignore index 29db22e..24e6a61 100644 --- a/.gitignore +++ b/.gitignore @@ -3,4 +3,4 @@ demo/ node_modules/ npm-debug.log yarn-error.log -package-lock.json \ No newline at end of file +package-lock.json diff --git a/README.md b/README.md index b3a9224..af15001 100644 --- a/README.md +++ b/README.md @@ -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); @@ -49,55 +48,56 @@ components: { } - ``` ## 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 diff --git a/index.html b/index.html index 31c6cbc..3023554 100644 --- a/index.html +++ b/index.html @@ -1,26 +1,44 @@ - + Vue Web Cam - + - - -
-
-
+ +
+
+
+ + - + src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" + integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" + crossorigin="anonymous" + /> diff --git a/package.json b/package.json index 375b00f..08c9fb7 100644 --- a/package.json +++ b/package.json @@ -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": "smronju@gmail.com", @@ -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", diff --git a/src/webcam.vue b/src/webcam.vue index 7fe3a24..735b1ae 100644 --- a/src/webcam.vue +++ b/src/webcam.vue @@ -1,15 +1,18 @@