├── .babelrc
├── .editorconfig
├── .eslintrc.json
├── .gitignore
├── LICENSE
├── README.md
├── assets
    ├── logo.png
    └── splash.png
├── build
    └── webpack.config.js
├── demo
    ├── src
    │   ├── main.js
    │   └── main.vue
    └── webpack.config.js
├── dist
    └── index.js
├── index.html
├── nuxt
    ├── index.js
    └── plugin.js
├── package.json
├── src
    ├── index.js
    └── webcam.vue
└── yarn.lock


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [["@babel/preset-env", { "modules": false }]],
 3 |   "plugins": [
 4 |     "@babel/plugin-syntax-dynamic-import",
 5 |     "@babel/plugin-transform-runtime",
 6 |     "@babel/plugin-transform-object-assign",
 7 |     "@babel/plugin-proposal-object-rest-spread"
 8 |   ]
 9 | }
10 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "env": {
 3 |     "browser": true,
 4 |     "commonjs": true,
 5 |     "es6": true,
 6 |     "node": true
 7 |   },
 8 |   "extends": [
 9 |     "eslint:recommended",
10 |     "plugin:vue/recommended",
11 |     "plugin:import/errors",
12 |     "plugin:import/warnings"
13 |   ],
14 |   "parserOptions": {
15 |     "parser": "babel-eslint",
16 |     "ecmaFeatures": {
17 |       "jsx": true
18 |     },
19 |     "ecmaVersion": 2017,
20 |     "sourceType": "module"
21 |   },
22 |   "plugins": ["vue", "prettier"],
23 |   "rules": {
24 |     "no-const-assign": "warn",
25 |     "no-this-before-super": "warn",
26 |     "no-undef": "warn",
27 |     "no-unreachable": "warn",
28 |     "no-unused-vars": "off",
29 |     "constructor-super": "warn",
30 |     "valid-typeof": "warn",
31 |     "import/no-unresolved": "off",
32 |     "import/no-unassigned-import": "warn",
33 |     "semi": 0,
34 |     "no-console": "off",
35 |     "prettier/prettier": "error",
36 |     "vue/max-attributes-per-line": [
37 |       2,
38 |       {
39 |         "singleline": 2,
40 |         "multiline": {
41 |           "max": 1,
42 |           "allowFirstLine": true
43 |         }
44 |       }
45 |     ]
46 |   }
47 | }
48 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | demo/
2 | .DS_Store
3 | node_modules/
4 | npm-debug.log
5 | yarn-error.log
6 | package-lock.json
7 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Vincent Gabriel
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <p align="center">
  2 |     <img width="150" src="assets/logo.png">
  3 | </p>
  4 | 
  5 | <p align="center">
  6 |     <img src="assets/splash.png">
  7 | </p>
  8 | 
  9 | # vue-web-cam
 10 | 
 11 | [![npm](https://img.shields.io/npm/v/vue-web-cam.svg)](https://www.npmjs.com/package/vue-web-cam)
 12 | [![npm](https://img.shields.io/npm/dm/vue-web-cam.svg)](https://www.npmjs.com/package/vue-web-cam)
 13 | ![Contributions welcome](https://img.shields.io/badge/contributions-welcome-orange.svg)
 14 | [![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)
 15 | 
 16 | Webcam component for VueJs. See [this](http://caniuse.com/#feat=stream)
 17 | for browser compatibility.
 18 | 
 19 | ## Installation
 20 | 
 21 | ```bash
 22 | npm install vue-web-cam --save
 23 | // or
 24 | yarn add vue-web-cam
 25 | ```
 26 | 
 27 | ## Usage
 28 | 
 29 | ```js
 30 | import Vue from 'vue'
 31 | import WebCam from "../../src";
 32 | Vue.use(WebCam);
 33 | 
 34 | 
 35 | <vue-web-cam ... />
 36 | 
 37 | // or
 38 | import { WebCam } from "vue-web-cam";
 39 | 
 40 | components: {
 41 |     WebCam
 42 | }
 43 | 
 44 | <web-cam ... />
 45 | 
 46 | components: {
 47 |     'vue-web-cam': WebCam
 48 | }
 49 | 
 50 | <vue-web-cam ... />
 51 | ```
 52 | 
 53 | ## Nuxt.js
 54 | 
 55 | Add `vue-web-cam/nuxt` to modules section of `nuxt.config.js`
 56 | 
 57 | ```javascript
 58 | {
 59 |   modules: ['vue-web-cam/nuxt']
 60 | }
 61 | ```
 62 | 
 63 | ## Testing & Dev
 64 | 
 65 | ```bash
 66 | npm run dev
 67 | ```
 68 | 
 69 | ### Props
 70 | 
 71 | | prop              | type    | default      | notes                                              |
 72 | | ----------------- | ------- | ------------ | -------------------------------------------------- |
 73 | | height            | number  | 500          | height of video element                            |
 74 | | width             | number  | 500          | width of video element                             |
 75 | | autoplay          | boolean | true         | autoplay attribute                                 |
 76 | | screenshotFormat  | string  | 'image/jpeg' | format of screenshot                               |
 77 | | selectFirstDevice | boolean | false        | select first device when avaialble                 |
 78 | | deviceId          | string  | null         | currently selected camera                          |
 79 | | playsinline       | boolean | true         | playsinline of video element                       |
 80 | | resolution        | object  | null         | object with width and height for camera resolution |
 81 | 
 82 | ### Events
 83 | 
 84 | | name          | param    | notes                                                         |
 85 | | ------------- | -------- | ------------------------------------------------------------- |
 86 | | started       | stream   | emitted once the stream has started                           |
 87 | | stopped       | stream   | emitted once the stream has stopped                           |
 88 | | error         | error    | emitted if the stream failed to start with the error returned |
 89 | | notsupported  | error    | emitted when the browser does not support this feature        |
 90 | | cameras       | cameras  | emitted when a list of all cameras available is loaded        |
 91 | | camera-change | deviceId | emitted when camera change occurs                             |
 92 | | video-live    | stream   | emitted when video is started                                 |
 93 | 
 94 | ### Methods
 95 | 
 96 | | name         | param    | notes                                                                                                 |
 97 | | ------------ | -------- | ----------------------------------------------------------------------------------------------------- |
 98 | | capture      | void     | Capture the current image through the webcam as a base64 encoded dataUri                                 |
 99 | | changeCamera | deviceId | change the currently selected camera. Must pass in the device ID                                      |
100 | | start        | void     | Programmatically Start the camera after stopping it (relies on deviceId prop passed to the component) |
101 | | stop         | void     | Programmatically stop the camera                                                                      |
102 | | pause        | void     | Programmatically pause the camera                                                                     |
103 | | resume       | void     | Programmatically resume the camera after it was paused                                                |
104 | 
105 | ## Contributing
106 | 
107 | If you'd like to help make this project better you can help with the following tasks:
108 | 
109 | - Tests - This project needs a way to test the functionality using a javascript testing solution (Jest as an example)
110 | - Examples - Additional Examples of usage might be helpful to others.
111 | - Project Website - Perhaps launch a project website (on Github Pages) that'll showcase the plugin, Demo, Usage instructions, configuration etc..
112 | 
113 | ## License
114 | 
115 | MIT
116 | 
117 | ## Credits
118 | 
119 | This is based off [@smronju vue-webcam](https://github.com/smronju/vue-webcam) and [react-webcam](https://github.com/mozmorris/react-webcam)
120 | 


--------------------------------------------------------------------------------
/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/VinceG/vue-web-cam/74475f65741b9ced2479a75a0bf9bc35adb01743/assets/logo.png


--------------------------------------------------------------------------------
/assets/splash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/VinceG/vue-web-cam/74475f65741b9ced2479a75a0bf9bc35adb01743/assets/splash.png


--------------------------------------------------------------------------------
/build/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require("path");
 2 | var webpack = require("webpack");
 3 | const VueLoaderPlugin = require("vue-loader/lib/plugin");
 4 | const { version } = require("../package.json");
 5 | 
 6 | module.exports = {
 7 |   mode: "production",
 8 |   entry: "./src/index.js",
 9 |   output: {
10 |     path: path.resolve(__dirname, "../dist"),
11 |     publicPath: "/dist/",
12 |     filename: "index.js",
13 |     library: "vue-web-cam",
14 |     libraryTarget: "umd"
15 |   },
16 |   module: {
17 |     rules: [
18 |       {
19 |         test: /\.vue$/,
20 |         loader: "vue-loader",
21 |         options: {
22 |           loaders: {
23 |             scss: "vue-style-loader!css-loader!sass-loader",
24 |             sass: "vue-style-loader!css-loader!sass-loader?indentedSyntax"
25 |           }
26 |         }
27 |       },
28 |       {
29 |         test: /\.js$/,
30 |         loader: "babel-loader",
31 |         exclude: /node_modules/
32 |       }
33 |     ]
34 |   },
35 |   externals: {
36 |     vue: "vue"
37 |   },
38 |   resolve: {
39 |     extensions: [".js", ".vue"],
40 |     alias: {
41 |       vue: "vue/dist/vue.esm.js"
42 |     }
43 |   },
44 |   devServer: {
45 |     historyApiFallback: true,
46 |     noInfo: true
47 |   },
48 |   performance: {
49 |     hints: false
50 |   },
51 |   plugins: [
52 |     new VueLoaderPlugin(),
53 |     new webpack.DefinePlugin({
54 |       __VERSION__: JSON.stringify(version),
55 |       "process.env": {
56 |         NODE_ENV: '"production"'
57 |       }
58 |     }),
59 |     new webpack.LoaderOptionsPlugin({
60 |       minimize: true
61 |     })
62 |   ]
63 | };
64 | 


--------------------------------------------------------------------------------
/demo/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import App from "./main.vue";
 3 | 
 4 | // import WebCam from "../../src";
 5 | // Vue.use(WebCam);
 6 | 
 7 | new Vue({
 8 |   el: "#app",
 9 |   render: h => h(App)
10 | });
11 | 


--------------------------------------------------------------------------------
/demo/src/main.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="container">
  3 |         <div class="row">
  4 |             <div class="col-md-6">
  5 |                 <h2>Current Camera</h2>
  6 |                 <code v-if="device">{{ device.label }}</code>
  7 |                 <div class="border">
  8 |                     <vue-web-cam
  9 |                         ref="webcam"
 10 |                         :device-id="deviceId"
 11 |                         width="100%"
 12 |                         @started="onStarted"
 13 |                         @stopped="onStopped"
 14 |                         @error="onError"
 15 |                         @cameras="onCameras"
 16 |                         @camera-change="onCameraChange"
 17 |                     />
 18 |                 </div>
 19 | 
 20 |                 <div class="row">
 21 |                     <div class="col-md-12">
 22 |                         <select v-model="camera">
 23 |                             <option>-- Select Device --</option>
 24 |                             <option
 25 |                                 v-for="device in devices"
 26 |                                 :key="device.deviceId"
 27 |                                 :value="device.deviceId"
 28 |                             >{{ device.label }}</option>
 29 |                         </select>
 30 |                     </div>
 31 |                     <div class="col-md-12">
 32 |                         <button type="button" class="btn btn-primary" @click="onCapture">Capture Photo</button>
 33 |                         <button type="button" class="btn btn-danger" @click="onStop">Stop Camera</button>
 34 |                         <button type="button" class="btn btn-success" @click="onStart">Start Camera</button>
 35 |                     </div>
 36 |                 </div>
 37 |             </div>
 38 |             <div class="col-md-6">
 39 |                 <h2>Captured Image</h2>
 40 |                 <figure class="figure">
 41 |                     <img :src="img" class="img-responsive" />
 42 |                 </figure>
 43 |             </div>
 44 |         </div>
 45 |     </div>
 46 | </template>
 47 | 
 48 | <script>
 49 | import { WebCam } from "../../src";
 50 | 
 51 | export default {
 52 |     name: "App",
 53 |     components: {
 54 |         "vue-web-cam": WebCam
 55 |     },
 56 |     data() {
 57 |         return {
 58 |             img: null,
 59 |             camera: null,
 60 |             deviceId: null,
 61 |             devices: []
 62 |         };
 63 |     },
 64 |     computed: {
 65 |         device: function() {
 66 |             return this.devices.find(n => n.deviceId === this.deviceId);
 67 |         }
 68 |     },
 69 |     watch: {
 70 |         camera: function(id) {
 71 |             this.deviceId = id;
 72 |         },
 73 |         devices: function() {
 74 |             // Once we have a list select the first one
 75 |             const [first, ...tail] = this.devices;
 76 |             if (first) {
 77 |                 this.camera = first.deviceId;
 78 |                 this.deviceId = first.deviceId;
 79 |             }
 80 |         }
 81 |     },
 82 |     methods: {
 83 |         onCapture() {
 84 |             this.img = this.$refs.webcam.capture();
 85 |         },
 86 |         onStarted(stream) {
 87 |             console.log("On Started Event", stream);
 88 |         },
 89 |         onStopped(stream) {
 90 |             console.log("On Stopped Event", stream);
 91 |         },
 92 |         onStop() {
 93 |             this.$refs.webcam.stop();
 94 |         },
 95 |         onStart() {
 96 |             this.$refs.webcam.start();
 97 |         },
 98 |         onError(error) {
 99 |             console.log("On Error Event", error);
100 |         },
101 |         onCameras(cameras) {
102 |             this.devices = cameras;
103 |             console.log("On Cameras Event", cameras);
104 |         },
105 |         onCameraChange(deviceId) {
106 |             this.deviceId = deviceId;
107 |             this.camera = deviceId;
108 |             console.log("On Camera Change Event", deviceId);
109 |         }
110 |     }
111 | };
112 | </script>
113 | 


--------------------------------------------------------------------------------
/demo/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require("path");
 2 | var webpack = require("webpack");
 3 | var HtmlWebpackPlugin = require("html-webpack-plugin");
 4 | const VueLoaderPlugin = require("vue-loader/lib/plugin");
 5 | const { version } = require("../package.json");
 6 | 
 7 | module.exports = {
 8 |   mode: "development",
 9 |   entry: "./demo/src/main.js",
10 |   output: {
11 |     path: path.resolve(__dirname, "./dist"),
12 |     publicPath: "/",
13 |     filename: "build.js"
14 |   },
15 |   module: {
16 |     rules: [
17 |       {
18 |         test: /\.vue$/,
19 |         loader: "vue-loader",
20 |         options: {
21 |           loaders: {
22 |             // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
23 |             // the "scss" and "sass" values for the lang attribute to the right configs here.
24 |             // other preprocessors should work out of the box, no loader config like this necessary.
25 |             scss: "vue-style-loader!css-loader!sass-loader",
26 |             sass: "vue-style-loader!css-loader!sass-loader?indentedSyntax"
27 |           }
28 |           // other vue-loader options go here
29 |         }
30 |       },
31 |       {
32 |         test: /\.js$/,
33 |         loader: "babel-loader",
34 |         exclude: /node_modules/
35 |       },
36 |       {
37 |         test: /\.(png|jpg|gif|svg)$/,
38 |         loader: "file-loader",
39 |         options: {
40 |           name: "[name].[ext]?[hash]"
41 |         }
42 |       }
43 |     ]
44 |   },
45 |   resolve: {
46 |     extensions: [".js", ".vue"],
47 |     alias: {
48 |       vue: "vue/dist/vue.esm.js",
49 |       plugin: path.resolve(__dirname, "../dist/build.js")
50 |     }
51 |   },
52 |   devServer: {
53 |     historyApiFallback: true
54 |   },
55 |   performance: {
56 |     hints: false
57 |   },
58 |   devtool: "#eval-source-map",
59 |   plugins: [
60 |     new VueLoaderPlugin(),
61 |     new webpack.DefinePlugin({
62 |       __VERSION__: JSON.stringify(version),
63 |       "process.env": "'development'"
64 |     }),
65 |     new webpack.HotModuleReplacementPlugin(),
66 |     new webpack.NoEmitOnErrorsPlugin(),
67 |     new HtmlWebpackPlugin({
68 |       filename: "index.html",
69 |       template: "index.html",
70 |       inject: true
71 |     })
72 |   ]
73 | };
74 | 
75 | if (process.env.NODE_ENV === "production") {
76 |   // http://vue-loader.vuejs.org/en/workflow/production.html
77 |   module.exports.plugins = (module.exports.plugins || []).concat([
78 |     new webpack.DefinePlugin({
79 |       __VERSION__: JSON.stringify(version),
80 |       "process.env": {
81 |         NODE_ENV: '"production"'
82 |       }
83 |     }),
84 |     new webpack.LoaderOptionsPlugin({
85 |       minimize: true
86 |     })
87 |   ]);
88 | }
89 | 


--------------------------------------------------------------------------------
/dist/index.js:
--------------------------------------------------------------------------------
1 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports["vue-web-cam"]=t():e["vue-web-cam"]=t()}(window,function(){return function(e){var t={};function i(n){if(t[n])return t[n].exports;var r=t[n]={i:n,l:!1,exports:{}};return e[n].call(r.exports,r,r.exports,i),r.l=!0,r.exports}return i.m=e,i.c=t,i.d=function(e,t,n){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)i.d(n,r,function(t){return e[t]}.bind(null,r));return n},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="/dist/",i(i.s=0)}([function(e,t,i){"use strict";i.r(t);var n=function(e,t,i,n,r,o,a,s){var c,d="function"==typeof e?e.options:e;if(t&&(d.render=t,d.staticRenderFns=i,d._compiled=!0),n&&(d.functional=!0),o&&(d._scopeId="data-v-"+o),a?(c=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),r&&r.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(a)},d._ssrRegister=c):r&&(c=s?function(){r.call(this,this.$root.$options.shadowRoot)}:r),c)if(d.functional){d._injectStyles=c;var u=d.render;d.render=function(e,t){return c.call(t),u(e,t)}}else{var f=d.beforeCreate;d.beforeCreate=f?[].concat(f,c):[c]}return{exports:e,options:d}}({name:"VueWebCam",props:{width:{type:[Number,String],default:"100%"},height:{type:[Number,String],default:500},autoplay:{type:Boolean,default:!0},screenshotFormat:{type:String,default:"image/jpeg"},selectFirstDevice:{type:Boolean,default:!1},deviceId:{type:String,default:null},playsinline:{type:Boolean,default:!0},resolution:{type:Object,default:null,validator:function(e){return e.height&&e.width}}},data:function(){return{source:null,canvas:null,camerasListEmitted:!1,cameras:[]}},watch:{deviceId:function(e){this.changeCamera(e)}},mounted:function(){this.setupMedia()},beforeDestroy:function(){this.stop()},methods:{legacyGetUserMediaSupport:function(){return function(e){var t=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia||navigator.oGetUserMedia;return t?new Promise(function(i,n){t.call(navigator,e,i,n)}):Promise.reject(new Error("getUserMedia is not implemented in this browser"))}},setupMedia:function(){void 0===navigator.mediaDevices&&(navigator.mediaDevices={}),void 0===navigator.mediaDevices.getUserMedia&&(navigator.mediaDevices.getUserMedia=this.legacyGetUserMediaSupport()),this.testMediaAccess()},loadCameras:function(){var e=this;navigator.mediaDevices.enumerateDevices().then(function(t){for(var i=0;i!==t.length;++i){var n=t[i];"videoinput"===n.kind&&e.cameras.push(n)}}).then(function(){e.camerasListEmitted||(e.selectFirstDevice&&e.cameras.length>0&&(e.deviceId=e.cameras[0].deviceId),e.$emit("cameras",e.cameras),e.camerasListEmitted=!0)}).catch(function(t){return e.$emit("notsupported",t)})},changeCamera:function(e){this.stop(),this.$emit("camera-change",e),this.loadCamera(e)},loadSrcStream:function(e){var t=this;"srcObject"in this.$refs.video?this.$refs.video.srcObject=e:this.source=window.HTMLMediaElement.srcObject(e),this.$refs.video.onloadedmetadata=function(){t.$emit("video-live",e)},this.$emit("started",e)},stopStreamedVideo:function(e){var t=this,i=e.srcObject;i.getTracks().forEach(function(e){e.stop(),t.$emit("stopped",i),t.$refs.video.srcObject=null,t.source=null})},stop:function(){null!==this.$refs.video&&this.$refs.video.srcObject&&this.stopStreamedVideo(this.$refs.video)},start:function(){this.deviceId&&this.loadCamera(this.deviceId)},pause:function(){null!==this.$refs.video&&this.$refs.video.srcObject&&this.$refs.video.pause()},resume:function(){null!==this.$refs.video&&this.$refs.video.srcObject&&this.$refs.video.play()},testMediaAccess:function(){var e=this,t={video:!0};this.resolution&&(t.video={},t.video.height=this.resolution.height,t.video.width=this.resolution.width),navigator.mediaDevices.getUserMedia(t).then(function(t){t.getTracks().forEach(function(e){e.stop()}),e.loadCameras()}).catch(function(t){return e.$emit("error",t)})},loadCamera:function(e){var t=this,i={video:{deviceId:{exact:e}}};this.resolution&&(i.video.height=this.resolution.height,i.video.width=this.resolution.width),navigator.mediaDevices.getUserMedia(i).then(function(e){return t.loadSrcStream(e)}).catch(function(e){return t.$emit("error",e)})},capture:function(){return this.getCanvas().toDataURL(this.screenshotFormat)},getCanvas:function(){var e=this.$refs.video;if(!this.ctx){var t=document.createElement("canvas");t.height=e.videoHeight,t.width=e.videoWidth,this.canvas=t,this.ctx=t.getContext("2d")}var i=this.ctx,n=this.canvas;return i.drawImage(e,0,0,n.width,n.height),n}}},function(){var e=this.$createElement;return(this._self._c||e)("video",{ref:"video",attrs:{width:this.width,height:this.height,src:this.source,autoplay:this.autoplay,playsinline:this.playsinline}})},[],!1,null,null,null).exports;function r(e){e.component("vue-web-cam",n)}i.d(t,"version",function(){return o}),i.d(t,"WebCam",function(){return n}),"undefined"!=typeof window&&window.Vue&&window.Vue.use(r);t.default=r;var o="__VERSION__"}])});


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>Vue Web Cam</title>
 6 |     <link
 7 |       href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
 8 |       rel="stylesheet"
 9 |       integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
10 |       crossorigin="anonymous"
11 |     />
12 |   </head>
13 |   <body>
14 |     <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
15 |       <a class="navbar-brand" href="">Vue Webcam</a>
16 |       <button
17 |         class="navbar-toggler"
18 |         type="button"
19 |         data-toggle="collapse"
20 |         data-target="#navbarCollapse"
21 |         aria-controls="navbarCollapse"
22 |         aria-expanded="false"
23 |         aria-label="Toggle navigation"
24 |       >
25 |         <span class="navbar-toggler-icon"></span>
26 |       </button>
27 |     </nav>
28 | 
29 |     <main role="main" class="container">
30 |       <div id="app"></div>
31 |     </main>
32 | 
33 |     <script
34 |       src="https://code.jquery.com/jquery-3.3.1.min.js"
35 |       integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
36 |       crossorigin="anonymous"
37 |     ></script>
38 |     <script
39 |       src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"
40 |       integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"
41 |       crossorigin="anonymous"
42 |     ></script>
43 |   </body>
44 | </html>
45 | 


--------------------------------------------------------------------------------
/nuxt/index.js:
--------------------------------------------------------------------------------
 1 | const { resolve } = require('path')
 2 | 
 3 | module.exports = function nuxtVueWebCam() {
 4 |   this.addPlugin({
 5 |     ssr: false,
 6 |     src: resolve(__dirname, 'plugin.js'),
 7 |     fileName: 'vue-web-cam.js'
 8 |   })
 9 | }
10 | 
11 | module.exports.meta = require('../package.json')
12 | 


--------------------------------------------------------------------------------
/nuxt/plugin.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import VueWebCam from "vue-web-cam";
3 | 
4 | Vue.use(VueWebCam)
5 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-web-cam",
 3 |   "version": "1.9.0",
 4 |   "description": "Webcam component for Vuejs applications",
 5 |   "repository": {
 6 |     "type": "git",
 7 |     "url": "https://github.com/vinceg/vue-web-cam"
 8 |   },
 9 |   "license": "MIT",
10 |   "author": {
11 |     "name": "Vincent Gabriel",
12 |     "email": "vadimg88@gmail.com",
13 |     "url": "https://github.com/vinceg"
14 |   },
15 |   "files": [
16 |     "dist",
17 |     "nuxt"
18 |   ],
19 |   "main": "dist/index.js",
20 |   "scripts": {
21 |     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules --config build/webpack.config.js",
22 |     "demo": "cross-env NODE_ENV=production webpack --progress --hide-modules --config demo/webpack.config.js",
23 |     "dev": "cross-env NODE_ENV=development webpack-dev-server --hot --config demo/webpack.config.js"
24 |   },
25 |   "dependencies": {
26 |     "vue": "^2.6.10"
27 |   },
28 |   "devDependencies": {
29 |     "@babel/cli": "^7.2.3",
30 |     "@babel/core": "^7.2.2",
31 |     "@babel/plugin-proposal-class-properties": "^7.0.0",
32 |     "@babel/plugin-proposal-decorators": "^7.0.0",
33 |     "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
34 |     "@babel/plugin-proposal-function-sent": "^7.0.0",
35 |     "@babel/plugin-proposal-json-strings": "^7.0.0",
36 |     "@babel/plugin-proposal-numeric-separator": "^7.0.0",
37 |     "@babel/plugin-proposal-object-rest-spread": "^7.2.0",
38 |     "@babel/plugin-proposal-throw-expressions": "^7.0.0",
39 |     "@babel/plugin-syntax-dynamic-import": "^7.0.0",
40 |     "@babel/plugin-syntax-import-meta": "^7.0.0",
41 |     "@babel/plugin-transform-object-assign": "^7.2.0",
42 |     "@babel/plugin-transform-runtime": "^7.2.0",
43 |     "@babel/polyfill": "^7.2.5",
44 |     "@babel/preset-env": "^7.2.3",
45 |     "@babel/runtime": "^7.2.0",
46 |     "babel-eslint": "^10.0.1",
47 |     "babel-loader": "^8.0.5",
48 |     "cross-env": "^5.1",
49 |     "css-loader": "^0.25.0",
50 |     "eslint": "^5.8.0",
51 |     "eslint-plugin-import": "^2.14.0",
52 |     "eslint-plugin-prettier": "^3.0.0",
53 |     "eslint-plugin-vue": "^4.7.1",
54 |     "extract-text-webpack-plugin": "^3.0",
55 |     "file-loader": "^0.9.0",
56 |     "function-bind": "^1.0.2",
57 |     "html-webpack-plugin": "3.2.0",
58 |     "lodash": "^4.17.13",
59 |     "mixin-deep": "^2.0.1",
60 |     "set-value": "^2.0.1",
61 |     "vue-loader": "^15.0.0",
62 |     "vue-style-loader": "^4.1.2",
63 |     "vue-template-compiler": "^2.5.7",
64 |     "webpack": "4.28.4",
65 |     "webpack-cli": "^3.2.1",
66 |     "webpack-dev-server": ">=3.1.11",
67 |     "webpack-merge": "^0.14.1"
68 |   },
69 |   "engines": {
70 |     "node": ">= 8.10.0"
71 |   }
72 | }
73 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import WebCam from "./webcam";
 2 | 
 3 | function plugin(Vue) {
 4 |   Vue.component("vue-web-cam", WebCam);
 5 | }
 6 | 
 7 | // Install by default if using the script tag
 8 | if (typeof window !== "undefined" && window.Vue) {
 9 |   window.Vue.use(plugin);
10 | }
11 | 
12 | export default plugin;
13 | const version = "__VERSION__";
14 | // Export all components too
15 | export { WebCam, version };
16 | 


--------------------------------------------------------------------------------
/src/webcam.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <video
  3 |     ref="video"
  4 |     :width="width"
  5 |     :height="height"
  6 |     :src="source"
  7 |     :autoplay="autoplay"
  8 |     :playsinline="playsinline"
  9 |   />
 10 | </template>
 11 | 
 12 | <script>
 13 | export default {
 14 |   name: "VueWebCam",
 15 | 
 16 |   props: {
 17 |     width: {
 18 |       type: [Number, String],
 19 |       default: "100%"
 20 |     },
 21 |     height: {
 22 |       type: [Number, String],
 23 |       default: 500
 24 |     },
 25 |     autoplay: {
 26 |       type: Boolean,
 27 |       default: true
 28 |     },
 29 |     screenshotFormat: {
 30 |       type: String,
 31 |       default: "image/jpeg"
 32 |     },
 33 |     selectFirstDevice: {
 34 |       type: Boolean,
 35 |       default: false
 36 |     },
 37 |     deviceId: {
 38 |       type: String,
 39 |       default: null
 40 |     },
 41 |     playsinline: {
 42 |       type: Boolean,
 43 |       default: true
 44 |     },
 45 |     resolution: {
 46 |       type: Object,
 47 |       default: null,
 48 |       validator: value => {
 49 |         return value.height && value.width;
 50 |       }
 51 |     }
 52 |   },
 53 | 
 54 |   data() {
 55 |     return {
 56 |       source: null,
 57 |       canvas: null,
 58 |       camerasListEmitted: false,
 59 |       cameras: []
 60 |     };
 61 |   },
 62 | 
 63 |   watch: {
 64 |     deviceId: function(id) {
 65 |       this.changeCamera(id);
 66 |     }
 67 |   },
 68 | 
 69 |   mounted() {
 70 |     this.setupMedia();
 71 |   },
 72 | 
 73 |   beforeDestroy() {
 74 |     this.stop();
 75 |   },
 76 | 
 77 |   methods: {
 78 |     /**
 79 |      * get user media
 80 |      */
 81 |     legacyGetUserMediaSupport() {
 82 |       return constraints => {
 83 |         // First get ahold of the legacy getUserMedia, if present
 84 |         let getUserMedia =
 85 |           navigator.getUserMedia ||
 86 |           navigator.webkitGetUserMedia ||
 87 |           navigator.mozGetUserMedia ||
 88 |           navigator.msGetUserMedia ||
 89 |           navigator.oGetUserMedia;
 90 | 
 91 |         // Some browsers just don't implement it - return a rejected promise with an error
 92 |         // to keep a consistent interface
 93 |         if (!getUserMedia) {
 94 |           return Promise.reject(
 95 |             new Error("getUserMedia is not implemented in this browser")
 96 |           );
 97 |         }
 98 | 
 99 |         // Otherwise, wrap the call to the old navigator.getUserMedia with a Promise
100 |         return new Promise(function(resolve, reject) {
101 |           getUserMedia.call(navigator, constraints, resolve, reject);
102 |         });
103 |       };
104 |     },
105 | 
106 |     /**
107 |      * setup media
108 |      */
109 |     setupMedia() {
110 |       if (navigator.mediaDevices === undefined) {
111 |         navigator.mediaDevices = {};
112 |       }
113 | 
114 |       if (navigator.mediaDevices.getUserMedia === undefined) {
115 |         navigator.mediaDevices.getUserMedia = this.legacyGetUserMediaSupport();
116 |       }
117 | 
118 |       this.testMediaAccess();
119 |     },
120 | 
121 |     /**
122 |      * load available cameras
123 |      */
124 |     loadCameras() {
125 |       navigator.mediaDevices
126 |         .enumerateDevices()
127 |         .then(deviceInfos => {
128 |           for (let i = 0; i !== deviceInfos.length; ++i) {
129 |             let deviceInfo = deviceInfos[i];
130 |             if (deviceInfo.kind === "videoinput") {
131 |               this.cameras.push(deviceInfo);
132 |             }
133 |           }
134 |         })
135 |         .then(() => {
136 |           if (!this.camerasListEmitted) {
137 |             if (this.selectFirstDevice && this.cameras.length > 0) {
138 |               this.deviceId = this.cameras[0].deviceId;
139 |             }
140 | 
141 |             this.$emit("cameras", this.cameras);
142 |             this.camerasListEmitted = true;
143 |           }
144 |         })
145 |         .catch(error => this.$emit("notsupported", error));
146 |     },
147 | 
148 |     /**
149 |      * change to a different camera stream, like front and back camera on phones
150 |      */
151 |     changeCamera(deviceId) {
152 |       this.stop();
153 |       this.$emit("camera-change", deviceId);
154 |       this.loadCamera(deviceId);
155 |     },
156 | 
157 |     /**
158 |      * load the stream to the
159 |      */
160 |     loadSrcStream(stream) {
161 |       if ("srcObject" in this.$refs.video) {
162 |         // new browsers api
163 |         this.$refs.video.srcObject = stream;
164 |       } else {
165 |         // old broswers
166 |         this.source = window.HTMLMediaElement.srcObject(stream);
167 |       }
168 |       // Emit video start/live event
169 |       this.$refs.video.onloadedmetadata = () => {
170 |         this.$emit("video-live", stream);
171 |       };
172 | 
173 |       this.$emit("started", stream);
174 |     },
175 | 
176 |     /**
177 |      * stop the selected streamed video to change camera
178 |      */
179 |     stopStreamedVideo(videoElem) {
180 |       let stream = videoElem.srcObject;
181 |       let tracks = stream.getTracks();
182 | 
183 |       tracks.forEach(track => {
184 |         // stops the video track
185 |         track.stop();
186 |         this.$emit("stopped", stream);
187 | 
188 |         this.$refs.video.srcObject = null;
189 |         this.source = null;
190 |       });
191 |     },
192 | 
193 |     // stop the video
194 |     stop() {
195 |       if (this.$refs.video !== null && this.$refs.video.srcObject) {
196 |         this.stopStreamedVideo(this.$refs.video);
197 |       }
198 |     },
199 | 
200 |     // start the video
201 |     start() {
202 |       if (this.deviceId) {
203 |         this.loadCamera(this.deviceId);
204 |       }
205 |     },
206 | 
207 |     // pause the video
208 |     pause() {
209 |       if (this.$refs.video !== null && this.$refs.video.srcObject) {
210 |         this.$refs.video.pause();
211 |       }
212 |     },
213 | 
214 |     // resume the video
215 |     resume() {
216 |       if (this.$refs.video !== null && this.$refs.video.srcObject) {
217 |         this.$refs.video.play();
218 |       }
219 |     },
220 | 
221 |     /**
222 |      * test access
223 |      */
224 |     testMediaAccess() {
225 |       let constraints = { video: true };
226 | 
227 |       if (this.resolution) {
228 |         constraints.video = {};
229 |         constraints.video.height = this.resolution.height;
230 |         constraints.video.width = this.resolution.width;
231 |       }
232 | 
233 |       navigator.mediaDevices
234 |         .getUserMedia(constraints)
235 |         .then(stream => {
236 |           //Make sure to stop this MediaStream
237 |           let tracks = stream.getTracks();
238 |           tracks.forEach(track => {
239 |             track.stop();
240 |           });
241 |           this.loadCameras();
242 |         })
243 |         .catch(error => this.$emit("error", error));
244 |     },
245 | 
246 |     /**
247 |      * load the camera passed as index!
248 |      */
249 |     loadCamera(device) {
250 |       let constraints = { video: { deviceId: { exact: device } } };
251 | 
252 |       if (this.resolution) {
253 |         constraints.video.height = this.resolution.height;
254 |         constraints.video.width = this.resolution.width;
255 |       }
256 | 
257 |       navigator.mediaDevices
258 |         .getUserMedia(constraints)
259 |         .then(stream => this.loadSrcStream(stream))
260 |         .catch(error => this.$emit("error", error));
261 |     },
262 | 
263 |     /**
264 |      * capture screenshot
265 |      */
266 |     capture() {
267 |       return this.getCanvas().toDataURL(this.screenshotFormat);
268 |     },
269 | 
270 |     /**
271 |      * get canvas
272 |      */
273 |     getCanvas() {
274 |       let video = this.$refs.video;
275 |       if (!this.ctx) {
276 |         let canvas = document.createElement("canvas");
277 |         canvas.height = video.videoHeight;
278 |         canvas.width = video.videoWidth;
279 |         this.canvas = canvas;
280 | 
281 |         this.ctx = canvas.getContext("2d");
282 |       }
283 | 
284 |       const { ctx, canvas } = this;
285 |       ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
286 | 
287 |       return canvas;
288 |     }
289 |   }
290 | };
291 | </script>
292 | 


--------------------------------------------------------------------------------