change how camera photos are taken

src/views/CameraCapture.vue

@@ -14,23 +14,29 @@
 					<h1 class="text-3xl font-bold">Please select a photo group</h1>
 					<p class="text-xl font-bold">(or create a new one)</p>
 				</div>
-				<n-spin :show="isCameraLoading || isPhotoTaken" v-show="selected_group">
+				<h1 class="text-xl font-bold" style="margin-top: 40%; text-align: center" v-if="selected_group && !photo_src">Please take a new photo</h1>
-					<div id="camera_preview">
+				<n-spin :show="isUploading">
-						<video ref="camera" autoplay></video>
+					<n-image :src="photo_src" v-if="selected_group && photo_src" />
-						<canvas v-show="false" id="photoTaken" ref="canvas" width="100" height="100"></canvas>
-					</div>
 				</n-spin>
 			</div>
 
 			<div id="take_photo">
 				<n-space justify-content="center">
-					<n-button
+					<label for="camera_file_input">
-						type="primary" round size="large"
+						<span :class="{disabled: !selected_group, camera_btn: true}">Take new photo</span>
-						:disabled="!selected_group || isPhotoTaken || !isCameraCreated"
+						<input
-						@click="takePhoto"
+							type="file"
-					>
+							id="camera_file_input"
-						Take Photo
+							accept="image/*"
-					</n-button>
+							capture="environment"
+							@change="previewImage"
+							:disabled="!selected_group"
+						/>
+					</label>
+					<n-button v-if="selected_group && photo_src"
+						type="info" size="large" round
+						@click="uploadPhoto"
+					>Upload</n-button>
 				</n-space>
 			</div>
 		</div>
@@ -53,30 +59,6 @@
 				</n-space>
 			</template>
 		</n-modal>
-
-		<n-modal
-			v-model:show="showPhotoTakenModal"
-			:mask-closable="false"
-			transform-origin="center"
-			preset="card"
-			:title="'Upload Photo to '+selected_group_label"
-			:bordered="false"
-			size="huge">
-
-			<n-space justify-content="center">
-				<n-image
-					:src="photo.src"
-					:width="photo.width*0.75"
-				/>
-			</n-space>
-
-			<template #footer>
-				<n-space justify-content="end">
-					<n-button size="large" @click="showPhotoTakenModal = false; isPhotoTaken = false">Back</n-button>
-					<n-button type="primary" size="large" @click="uploadPhoto" :loading="isUploading">Upload</n-button>
-				</n-space>
-			</template>
-		</n-modal>
 	</n-config-provider>
 </template>
 
@@ -108,24 +90,14 @@ export default {
 
 			groups: [],
 			selected_group: null,
-
 			showAddGroupModal: false,
+
 			new_group_name: '',
 
-			isCameraCreated: false,
-			isCameraLoading: true,
 			isPhotoTaken: false,
-			photo: {
+			photo_src: '',
-				width: 0,
+			photo_file: null,
-				height: 0,
-				src: null
-			},
-			stream: {
-				width: 0,
-				height: 0,
-			},
 
-			showPhotoTakenModal: false,
 			isUploading: false,
 		}
 	},
@@ -135,13 +107,6 @@ export default {
 	mounted() {
 		window.scrollTo(0, 1)
 	},
-	watch: {
-		selected_group: function () {
-			if (this.isCameraCreated)
-				return
-			this.startCamera()
-		},
-	},
 	computed: {
 		selected_group_label() {
 			if (this.selected_group !== null && this.groups.length > 0) {
@@ -203,83 +168,20 @@ export default {
 				this.new_group_name = ''
 			})
 		},
-		startCamera() {			
+		previewImage(event) {
-			this.isCameraLoading = true
+			let files = event.target.files
-
+			this.photo_file = files[0]
-			const constraints = (window.constraints = {
+			this.photo_src = window.URL.createObjectURL(this.photo_file)
-				audio: false,
-				video: {
-					facingMode: 'environment',
-					width: { ideal: 4096 },
-					height: { ideal: 2160 },
-				}
-			})
-
-			navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
-				this.isCameraLoading = false
-				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.photo.height = document.getElementById('camera_preview').offsetHeight
-
-				if (this.stream.width > this.stream.height) {
-					this.$refs.camera.width = this.photo.width
-				} else {
-					let ratio = this.photo.height / this.stream.height
-					this.$refs.camera.width = this.stream.width * ratio
-				}
-			}).catch(error => {
-				this.message.error('Cannot load device camera! '+error)
-			})
-		},
-		takePhoto() {
-			this.isPhotoTaken = true
-			
-			setTimeout(() => {
-				this.photo.height = document.getElementById('camera_preview').offsetHeight
-
-				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.stream.width,
-					this.stream.height)
-
-				this.photo.src = this.$refs.canvas.toDataURL('image/png')//.replace('image/png', 'image/octet-stream')
-				
-				this.showPhotoTakenModal = true
-			}, 50)
 		},
 		uploadPhoto() {
 			this.isUploading = true
-			const dataURLtoFile = (dataurl, filename) => {
-				const arr = dataurl.split(',')
-				const mime = arr[0].match(/:(.*?);/)[1]
-				const bstr = atob(arr[1])
-				let n = bstr.length
-				const u8arr = new Uint8Array(n)
-				while (n) {
-					u8arr[n - 1] = bstr.charCodeAt(n - 1)
-					n -= 1 // to make eslint happy
-				}
-				return new File([u8arr], filename, { type: mime })
-			}
-
-			const file = dataURLtoFile(this.photo.src, 'upload.png')
 			
-			addNewPhoto(file, null, this.selected_group).then((response) => {
+			addNewPhoto(this.photo_file, null, this.selected_group).then((response) => {
 				this.message.success('Done!')
-				this.isPhotoTaken = false
+
-				this.showPhotoTakenModal = false
 				this.isUploading = false
+				this.photo_src = ''
+				this.photo_file = null
 
 				setTimeout(() => {
 					cropPhoto(response.data.id, 'auto').then(()=>{
@@ -304,10 +206,6 @@ html, body {
 	height: 100vh;
 }
 
-* {
-	overflow: hidden;
-}
-
 #all {
 	background-color: #111;
 	width: 100vw;
@@ -342,6 +240,10 @@ html, body {
 	margin: auto;
 }
 
+#camera_file_input {
+	display: none;
+}
+
 #take_photo {
 	height: 15vh;
 	background-color: #222;
@@ -352,7 +254,27 @@ html, body {
 	width: 100%;
 }
 
+#take_photo .camera_btn {
+	margin-top: 5vh;
+	display: inline-block;
+	background-color: #7ec090;
+	color: white;
+	padding: 0.5em 1em;
+	border-radius: 2em;
+	font-size: 16px;
+	cursor: pointer;
+}
+
 #take_photo .n-button {
 	margin-top: 5vh;
 }
+
+.camera_btn:hover {
+	filter: brightness(0.9);
+}
+
+.disabled {
+	filter: brightness(0.75) !important;
+	cursor: not-allowed !important;
+}
 </style>