fix camera canvas size

This commit is contained in:
MarcZierle 2022-01-21 13:32:02 +01:00
parent e01c961dc3
commit 29c6777a03

View File

@ -142,7 +142,7 @@ export default {
},
computed: {
selected_group_label() {
if (this.selected_group !== null) {
if (this.selected_group !== null && this.groups.length > 0) {
return this.groups.filter(group => group.value === this.selected_group)[0].label
}
return ''
@ -201,9 +201,10 @@ export default {
this.stream.height = stream_settings.height
this.photo.width = document.getElementById('camera_preview').offsetWidth
this.$refs.camera.width = this.photo.width
this.photo.height = document.getElementById('camera_preview').offsetHeight
this.$refs.camera.width = this.photo.width
this.$refs.camera.height = this.photo.height
}).catch(error => {
this.message.error('Cannot load device camera! '+error)
})
@ -259,6 +260,12 @@ export default {
html, body {
margin: 0;
padding: 0;
overflow: hidden;
height: 100vh;
}
* {
overflow: hidden;
}
#all {
@ -268,19 +275,26 @@ html, body {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-between;
overflow: hidden;
color: white;
margin: 0;
padding: 0;
}
#camera_preview {
height: 75vh;
}
#group_select {
display: flex;
height: 7.5vh;
}
#prompt_select {
display: flex;
flex-direction: column;
text-align: center;
margin-top: 30%;
}
#prompt_select .n-icon {
@ -288,10 +302,13 @@ html, body {
}
#take_photo {
height: 15%;
height: 15vh;
background-color: #222;
display: flex;
justify-content: center;
bottom: 0;
position: absolute;
width: 100%;
}
#take_photo .n-button {