add camera preview

package-lock.json

@@ -2826,8 +2826,7 @@
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
       "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
-      "dev": true,
+      "dev": true
-      "optional": true
     },
     "coa": {
       "version": "2.0.2",
@@ -9536,8 +9535,7 @@
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/rx-lite/-/rx-lite-4.0.8.tgz",
       "integrity": "sha1-Cx4Rr4vESDbwSmQH6S2kJGe3lEQ=",
-      "dev": true,
+      "dev": true
-      "optional": true
     },
     "rx-lite-aggregates": {
       "version": "4.0.8",

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="layout">
-    <welcome-screen v-if="!welcomed && !downloading.status"/>
+    <welcome-screen v-if="!mediaStream && !downloading.status"/>
-    <capture-screen v-if="welcomed && !downloading.status"/>
+    <capture-screen v-if="mediaStream && !downloading.status"/>
     <download-screen v-if="downloading.status"/>
   </div>
 </template>
@@ -23,7 +23,7 @@ export default {
   },
   computed: {
     ...mapState([
-      'welcomed',
+      'mediaStream',
       'downloading'
     ])
   }

src/components/capture-options.vue

@@ -27,7 +27,7 @@ export default {
   },
   methods: {
     back () {
-      this.$store.commit('welcome', false)
+      this.$store.commit('updateMediaStream', null)
     },
     timeLabel (time) {
       return time + 's'

src/store.js

@@ -5,7 +5,7 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
-    welcomed: false,
+    mediaStream: null,
     timer: {
       selected: 2,
       list: [2, 3, 5]
@@ -22,8 +22,12 @@ export default new Vuex.Store({
     }
   },
   mutations: {
-    welcome (store, value) {
+    updateMediaStream(store, mediaStream) {
-      store.welcomed = value
+      if (store.mediaStream) {
+        store.mediaStream.getTracks().forEach(track => track.stop())
+      }
+
+      store.mediaStream = mediaStream
     },
     updateTimer (store, time) {
       store.timer.selected = time
@@ -51,6 +55,12 @@ export default new Vuex.Store({
     }
   },
   actions: {
-
+    requestCamera ({ commit }) {
+      navigator.mediaDevices.getUserMedia({ video: true, audio: false })
+        .then(mediaStream => {
+          commit('updateMediaStream', mediaStream)
+        })
+        .catch(error => console.error(error))
+    }
   }
 })

src/views/capture.vue

@@ -6,7 +6,7 @@
     <capture-options v-else/>
 
     <div class="preview">
-      <video class="preview-visual" height="200px"></video>
+      <video ref="preview" class="preview-visual" height="200px" autoplay></video>
     </div>
 
     <button class="capture-btn" :class="{ 'capture-btn--capturing': capturing.status }" @click="startCapture">Capture</button>
@@ -31,6 +31,7 @@ export default {
   },
   computed: {
     ...mapState([
+      'mediaStream',
       'capturing',
       'timer',
       'encoding'
@@ -54,6 +55,9 @@ export default {
         }
       }, interval)
     }
-  }
+  },
+  mounted: function () {
+    this.$refs.preview.srcObject = this.mediaStream
+  },
 }
 </script>

src/views/welcome.vue

@@ -17,7 +17,7 @@ export default {
   name: 'welcome',
   methods: {
     welcome () {
-      this.$store.commit('welcome', true)
+      this.$store.dispatch('requestCamera')
     }
   }
 }