Fixed issue with missing labels on cameras emit event due to not yet …

…allow/denying access to media
VinceG · Jul 3, 2018 · 9c019d4 · 9c019d4
1 parent b3589e1
commit 9c019d4
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 8 deletions.
diff --git a/dist/index.js b/dist/index.js
@@ -111,6 +111,7 @@ exports.default = {
       stream: '',
       source: '',
       canvas: null,
+      camerasListEmitted: false,
       cameras: []
     };
   },
@@ -164,11 +165,12 @@ exports.default = {
       if (navigator.mediaDevices === undefined) {
         navigator.mediaDevices = {};
       }
+
       if (navigator.mediaDevices.getUserMedia === undefined) {
         navigator.mediaDevices.getUserMedia = this.legacyGetUserMediaSupport();
       }
 
-      this.loadCameras();
+      this.testMediaAccess();
     },
     loadCameras: function loadCameras() {
       var _this = this;
@@ -181,7 +183,10 @@ exports.default = {
           }
         }
       }).then(function () {
-        return _this.$emit('cameras', _this.cameras);
+        if (!_this.camerasListEmitted) {
+          _this.$emit('cameras', _this.cameras);
+          _this.camerasListEmitted = true;
+        }
       }).catch(function (error) {
         return _this.$emit('notsupported', error);
       });
@@ -215,15 +220,24 @@ exports.default = {
       });
       videoElem.srcObject = null;
     },
-    loadCamera: function loadCamera(device) {
+    testMediaAccess: function testMediaAccess() {
       var _this3 = this;
 
+      navigator.mediaDevices.getUserMedia({ video: true }).then(function (stream) {
+        return _this3.loadCameras();
+      }).catch(function (error) {
+        return _this3.$emit('error', error);
+      });
+    },
+    loadCamera: function loadCamera(device) {
+      var _this4 = this;
+
       navigator.mediaDevices.getUserMedia({
         video: { deviceId: { exact: device } }
       }).then(function (stream) {
-        return _this3.loadSrcStream(stream);
+        return _this4.loadSrcStream(stream);
       }).catch(function (error) {
-        return _this3.$emit('error', error);
+        return _this4.$emit('error', error);
       });
     },
     capture: function capture() {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-web-cam",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "Webcam component for Vuejs applications",
   "main": "dist/index.js",
   "author": {

diff --git a/src/webcam.vue b/src/webcam.vue
@@ -14,6 +14,7 @@ export default {
       stream: '',
       source: '',
       canvas: null,
+      camerasListEmitted: false,
       cameras: []
     };
   },
@@ -76,11 +77,12 @@ export default {
       if (navigator.mediaDevices === undefined) {
         navigator.mediaDevices = {};
       }
+
       if (navigator.mediaDevices.getUserMedia === undefined) {
         navigator.mediaDevices.getUserMedia = this.legacyGetUserMediaSupport();
       }
 
-      this.loadCameras();
+      this.testMediaAccess();
     },
     loadCameras() {
       navigator.mediaDevices
@@ -95,7 +97,12 @@ export default {
           }
         }
       )
-      .then(() => this.$emit('cameras', this.cameras))
+      .then(() => {
+        if(!this.camerasListEmitted) {
+          this.$emit('cameras', this.cameras);
+          this.camerasListEmitted = true;
+        }
+      })
       .catch(error => this.$emit('notsupported', error));
     },
     /**
@@ -137,6 +144,15 @@ export default {
       });
       videoElem.srcObject = null;
     },
+    /**
+     * test access
+     */
+    testMediaAccess() {
+      navigator.mediaDevices
+        .getUserMedia({video: true})
+        .then(stream => this.loadCameras())
+        .catch(error => this.$emit('error', error));
+    },
     /**
      * load the Camera passed as index!
      */