feat(capture): Setup object-fit polyfill

This commit is contained in:
Tixie 2019-03-12 23:48:00 +01:00
parent eaba57ec57
commit 889494f569
3 changed files with 32 additions and 8 deletions

32
package-lock.json generated
View file

@ -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",

View file

@ -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"

View file

@ -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>