From e01c961dc3f3891bcd39e4d68134cf7587bf88c8 Mon Sep 17 00:00:00 2001
From: MarcZierle <online@marczierle.com>
Date: Fri, 21 Jan 2022 13:03:38 +0100
Subject: [PATCH] fix photo resolution

---
 src/views/CameraCapture.vue | 26 ++++++++++++++++++--------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/views/CameraCapture.vue b/src/views/CameraCapture.vue
index 8bcfa65..d8c506c 100644
--- a/src/views/CameraCapture.vue
+++ b/src/views/CameraCapture.vue
@@ -15,8 +15,8 @@
 				</div>
 				<n-spin :show="isCameraLoading || isPhotoTaken" v-show="selected_group">
 					<div id="camera_preview">
-						<video v-show="!isPhotoTaken" ref="camera" autoplay></video>
-						<canvas v-show="isPhotoTaken" id="photoTaken" ref="canvas" width="100" height="100"></canvas>
+						<video ref="camera" autoplay></video>
+						<canvas v-show="false" id="photoTaken" ref="canvas" width="100" height="100"></canvas>
 					</div>
 				</n-spin>
 			</div>
@@ -119,6 +119,10 @@ export default {
 				height: 0,
 				src: null
 			},
+			stream: {
+				width: 0,
+				height: 0,
+			},
 
 			showPhotoTakenModal: false,
 		}
@@ -181,7 +185,9 @@ export default {
 			const constraints = (window.constraints = {
 				audio: false,
 				video: {
-					facingMode: 'environment'
+					facingMode: 'environment',
+					width: { ideal: 4096 },
+					height: { ideal: 2160 },
 				}
 			})
 
@@ -190,6 +196,10 @@ export default {
 				this.$refs.camera.srcObject = stream
 				this.isCameraCreated = true
 
+				let stream_settings = stream.getVideoTracks()[0].getSettings()
+				this.stream.width = stream_settings.width
+				this.stream.height = stream_settings.height
+
 				this.photo.width = document.getElementById('camera_preview').offsetWidth
 				this.$refs.camera.width = this.photo.width
 
@@ -203,15 +213,15 @@ export default {
 
 			this.photo.height = document.getElementById('camera_preview').offsetHeight
 
-			this.$refs.canvas.width = this.photo.width
-			this.$refs.canvas.height = this.photo.height
+			this.$refs.canvas.width = this.stream.width
+			this.$refs.canvas.height = this.stream.height
 
 			const context = this.$refs.canvas.getContext('2d')
 			context.drawImage(
 				this.$refs.camera,
 				0, 0,
-				this.photo.width,
-				this.photo.height)
+				this.stream.width,
+				this.stream.height)
 
 			this.photo.src = this.$refs.canvas.toDataURL('image/png')//.replace('image/png', 'image/octet-stream')
 			
@@ -232,7 +242,7 @@ export default {
 			}
 
 			const file = dataURLtoFile(this.photo.src, 'upload.png')
-
+			
 			addNewPhoto(file, null, this.selected_group).then(() => {
 				this.message.success('Done!')
 				this.isPhotoTaken = false