feat(capture): Setup object-fit polyfill

package-lock.json

@@ -3494,7 +3494,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -3535,7 +3536,8 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
@@ -3545,7 +3547,8 @@
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -3662,7 +3665,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -3674,6 +3678,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -3701,6 +3706,7 @@
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -3719,6 +3725,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -3811,6 +3818,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -3896,7 +3904,8 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -3932,6 +3941,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -3951,6 +3961,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -3994,12 +4005,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -5486,6 +5499,11 @@
         "has": "^1.0.3"
       }
     },
+    "objectFitPolyfill": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/objectFitPolyfill/-/objectFitPolyfill-2.1.1.tgz",
+      "integrity": "sha512-+GQQw+yzk4L7Xl6d4auU6Cbz3HEuN5SKoPEoqjTw+X9uuev1KkiNq9k8hCXQbycZ6ZmM79RXOcSs37XXbVN2Rw=="
+    },
     "on-finished": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "eventemitter3": "^3.1.0",
     "gif-writer": "^0.9.3",
+    "objectFitPolyfill": "^2.1.1",
     "postcss-modules": "^1.4.1",
     "vue": "^2.6.6",
     "vuex": "^3.0.1"

src/views/screens/capture.vue

@@ -6,7 +6,7 @@
     <capture-options v-else></capture-options>
 
     <div class="preview">
-      <video class="preview-visual" preload="yes" :srcObject.prop="mediaStream" autoplay muted playsinline webkit-playsinline></video>
+      <video ref="preview" class="preview-visual" preload="yes" :srcObject.prop="mediaStream" autoplay muted playsinline webkit-playsinline></video>
     </div>
 
     <button class="capture-btn" :class="{ 'capture-btn--capturing': capturing.status }" @click.prevent="startCapture">Capture</button>
@@ -20,6 +20,8 @@ import captureOptions from '/views/components/capture-options'
 import captureProgress from '/views/components/capture-progress'
 import encodingOverlay from '/views/components/encoding'
 
+import objectFitPolyfill from 'objectFitPolyfill'
+
 import { mapState } from 'vuex'
 
 export default {
@@ -41,6 +43,9 @@ export default {
     startCapture () {
       this.$store.dispatch('capture')
     }
+  },
+  mounted: function () {
+    window.objectFitPolyfill(this.$refs.preview)
   }
 }
 </script>