feat(capture option): Switch camera

package-lock.json

@@ -3495,8 +3495,7 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -3539,8 +3538,7 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
@@ -3551,8 +3549,7 @@
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -3669,8 +3666,7 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "ini": {
           "version": "1.3.5",
@@ -3682,7 +3678,6 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -3712,7 +3707,6 @@
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -3731,7 +3725,6 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -3825,7 +3818,6 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -3911,8 +3903,7 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -3948,7 +3939,6 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -3968,7 +3958,6 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -4012,14 +4001,12 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         }
       }
     },

src/App.vue

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

src/store.js

@@ -9,6 +9,7 @@ Vue.use(Vuex)
 export default new Vuex.Store({
   strict: process.env.NODE_ENV !== 'production',
   state: {
+    welcomed: false,
     mediaStream: null,
     timer: {
       selected: 2,
@@ -16,6 +17,7 @@ export default new Vuex.Store({
     },
     capturing: {
       status: false,
+      shouldFaceUser: true,
       state: 0
     },
     encoding: {
@@ -28,12 +30,19 @@ export default new Vuex.Store({
     }
   },
   mutations: {
-    updateMediaStream (store, mediaStream) {
-      if (store.mediaStream) {
-        store.mediaStream.getTracks().forEach(track => track.stop())
+    welcome (state) {
+      state.welcomed = true;
+    },
+    startCamera (state, mediaStream) {
+      state.mediaStream = mediaStream
+    },
+    stopCamera (state) {
+      if (state.mediaStream) {
+        state.mediaStream.getTracks().forEach(track => track.stop())
       }
-
-      store.mediaStream = mediaStream
+    },
+    inverseFacingMode (store) {
+      store.capturing.shouldFaceUser = !store.capturing.shouldFaceUser
     },
     updateTimer (store, time) {
       store.timer.selected = time
@@ -69,17 +78,31 @@ export default new Vuex.Store({
     }
   },
   actions: {
-    requestCamera ({ commit }) {
-      const constaints = {
+    welcome ({ commit, dispatch }) {
+      commit('welcome')
+      dispatch('requestCamera', false)
+    },
+    requestCamera ({ state, commit }, inverseFacingMode) {
+      const shouldFaceUser = inverseFacingMode
+        ? !state.capturing.shouldFaceUser
+        : state.capturing.shouldFaceUser
+
+      const constraints = {
         video: {
-          facingMode: 'user'
+          facingMode: shouldFaceUser ? 'user' : 'environment'
         },
         audio: false
       }
 
-      navigator.mediaDevices.getUserMedia(constaints)
+      commit('stopCamera')
+
+      navigator.mediaDevices.getUserMedia(constraints)
         .then(mediaStream => {
-          commit('updateMediaStream', mediaStream)
+          commit('startCamera', mediaStream)
+
+          if (inverseFacingMode) {
+            commit('inverseFacingMode')
+          }
         })
         .catch(error => console.error(error))
     },

src/views/components/capture-options.vue

@@ -5,7 +5,7 @@
         {{ timeLabel(time) }}
       </option>
     </select>
-    <button class="options__btn" :disabled="encoding.status" @click="back"><icon-switch/>switch</button>
+    <button class="options__btn" :disabled="encoding.status" @click="switchCamera"><icon-switch/>switch</button>
   </div>
 </template>
 
@@ -26,8 +26,8 @@ export default {
     ])
   },
   methods: {
-    back () {
-      this.$store.commit('updateMediaStream', null)
+    switchCamera () {
+      this.$store.dispatch('requestCamera', true)
     },
     timeLabel (time) {
       return time + 's'

src/views/screens/welcome.vue

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