added ability to programatically start/stop webcam

README.md

@@ -69,7 +69,9 @@ npm run dev
 | 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        |
+| changeCamera   | deviceId | change the currently selected camera. Must pass in the device ID        |
+| start          | void     | Programatically Start the camera after stopping it (relies on deviceId prop passed to the component)                     |
+| stop           | void     | Programatically stop the camera      |
 
 ## License
 

demo/src/main.vue

@@ -24,6 +24,8 @@
           </div>
           <div class="col-md-12">
             <button type="button" class="btn btn-primary" @click="onCapture">Capture Photo</button>
+            <button type="button" class="btn btn-danger" @click="onStop">Stop Camera</button>
+            <button type="button" class="btn btn-success" @click="onStart">Start Camera</button>
           </div>
         </div>
       </div>
@@ -81,6 +83,12 @@ export default {
     onStopped(stream) {
       console.log('On Stopped Event', stream);
     },
+    onStop() {
+      this.$refs.webcam.stop();
+    },
+    onStart() {
+      this.$refs.webcam.start();
+    },
     onError(error, stream) {
       console.log('On Error Event', error, stream);
     },

dist/index.js

@@ -192,10 +192,7 @@ exports.default = {
       });
     },
     changeCamera: function changeCamera(deviceId) {
-      if (this.$refs.video !== null && this.$refs.video.srcObject) {
-        this.stopStreamedVideo(this.$refs.video);
-      }
-
+      this.stop();
       this.$emit('camera-change', deviceId);
       this.loadCamera(deviceId);
     },
@@ -220,6 +217,16 @@ exports.default = {
       });
       videoElem.srcObject = null;
     },
+    stop: function stop() {
+      if (this.$refs.video !== null && this.$refs.video.srcObject) {
+        this.stopStreamedVideo(this.$refs.video);
+      }
+    },
+    start: function start() {
+      if (this.deviceId) {
+        this.loadCamera(this.deviceId);
+      }
+    },
     testMediaAccess: function testMediaAccess() {
       var _this3 = this;
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-web-cam",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "Webcam component for Vuejs applications",
   "main": "dist/index.js",
   "author": {

src/webcam.vue

@@ -109,10 +109,7 @@ export default {
      * change to a different camera stream, like front and back camera on phones
      */
     changeCamera(deviceId) {
-      if(this.$refs.video !== null && this.$refs.video.srcObject) {
-        this.stopStreamedVideo(this.$refs.video);
-      }
-
+      this.stop();
       this.$emit('camera-change', deviceId);
       this.loadCamera(deviceId);
     },
@@ -144,6 +141,18 @@ export default {
       });
       videoElem.srcObject = null;
     },
+    // Stop the video
+    stop() {
+      if(this.$refs.video !== null && this.$refs.video.srcObject) {
+        this.stopStreamedVideo(this.$refs.video); 
+      }
+    },
+    // Start the video
+    start() {
+      if(this.deviceId) {
+        this.loadCamera(this.deviceId);
+      }
+    },
     /**
      * test access
      */