fix photo resolution

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