mirror of
https://github.com/GuerillaStudio/souvenir.git
synced 2025-01-20 22:30:20 +00:00
refactor(navigation): better camera usage
This commit is contained in:
parent
0ab48094fc
commit
061b739ad2
4 changed files with 18 additions and 14 deletions
|
@ -31,10 +31,6 @@ export default {
|
||||||
handleVisibilityChange (event) {
|
handleVisibilityChange (event) {
|
||||||
if (document.hidden) {
|
if (document.hidden) {
|
||||||
this.$store.commit('stopCamera')
|
this.$store.commit('stopCamera')
|
||||||
} else {
|
|
||||||
if (this.welcomed) {
|
|
||||||
this.$store.dispatch('requestCamera', false)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
@ -84,10 +84,6 @@ export default new Vuex.Store({
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
actions: {
|
actions: {
|
||||||
welcome ({ commit, dispatch }) {
|
|
||||||
commit('updateWelcomed', true)
|
|
||||||
dispatch('requestCamera', false)
|
|
||||||
},
|
|
||||||
requestCamera ({ state, commit }, inverseFacingMode) {
|
requestCamera ({ state, commit }, inverseFacingMode) {
|
||||||
const shouldFaceUser = inverseFacingMode
|
const shouldFaceUser = inverseFacingMode
|
||||||
? !state.capturing.shouldFaceUser
|
? !state.capturing.shouldFaceUser
|
||||||
|
@ -136,10 +132,7 @@ export default new Vuex.Store({
|
||||||
|
|
||||||
encoding.once('error', error => console.error(error))
|
encoding.once('error', error => console.error(error))
|
||||||
|
|
||||||
encoding.on('progress', value => {
|
encoding.on('progress', value => commit('updateEncodingState', Math.round(value * 100)))
|
||||||
console.log(`Encoding progress ${Math.round(value * 100)}% (${value})`)
|
|
||||||
commit('updateEncodingState', Math.round(value * 100))
|
|
||||||
})
|
|
||||||
|
|
||||||
encoding.once('done', objectUrl => {
|
encoding.once('done', objectUrl => {
|
||||||
commit('stopEncoding')
|
commit('stopEncoding')
|
||||||
|
|
|
@ -43,6 +43,16 @@ export default {
|
||||||
startCapture () {
|
startCapture () {
|
||||||
this.$store.dispatch('capture')
|
this.$store.dispatch('capture')
|
||||||
},
|
},
|
||||||
|
ensureCameraStarted () {
|
||||||
|
if (!this.mediaStream) {
|
||||||
|
this.$store.dispatch('requestCamera', false)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleVisibilityChange (event) {
|
||||||
|
if (!document.hidden) {
|
||||||
|
this.ensureCameraStarted()
|
||||||
|
}
|
||||||
|
},
|
||||||
updatePreviewMediaStream() {
|
updatePreviewMediaStream() {
|
||||||
this.$refs.preview.srcObject = this.mediaStream
|
this.$refs.preview.srcObject = this.mediaStream
|
||||||
}
|
}
|
||||||
|
@ -54,14 +64,19 @@ export default {
|
||||||
},
|
},
|
||||||
mounted: function () {
|
mounted: function () {
|
||||||
this.updatePreviewMediaStream()
|
this.updatePreviewMediaStream()
|
||||||
window.objectFitPolyfill(this.$refs.preview)
|
document.addEventListener('visibilitychange', this.handleVisibilityChange)
|
||||||
document.body.classList.add('capture-body')
|
document.body.classList.add('capture-body')
|
||||||
|
window.objectFitPolyfill(this.$refs.preview)
|
||||||
|
|
||||||
|
this.ensureCameraStarted()
|
||||||
|
|
||||||
},
|
},
|
||||||
updated: function () {
|
updated: function () {
|
||||||
this.updatePreviewMediaStream()
|
this.updatePreviewMediaStream()
|
||||||
},
|
},
|
||||||
destroyed: function () {
|
destroyed: function () {
|
||||||
document.body.classList.remove('capture-body')
|
document.body.classList.remove('capture-body')
|
||||||
|
document.removeEventListener('visibilitychange', this.handleVisibilityChange)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -23,7 +23,7 @@ export default {
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
welcome () {
|
welcome () {
|
||||||
this.$store.dispatch('welcome')
|
this.$store.commit('updateWelcomed', true)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue