| 
						
						
							
								
							
						
						
					 | 
					@ -22,12 +22,11 @@ | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					      Dude, you got an image! Dude, you got an image! | 
					 | 
					 | 
					      Dude, you got an image! Dude, you got an image! | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					    </div> | 
					 | 
					 | 
					    </div> | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					    <div v-else> | 
					 | 
					 | 
					    <div v-else> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					      <camera | 
					 | 
					 | 
					      <!-- | 
				
			
			
				
				
			
		
	
		
		
	
		
		
			
				
					 | 
					 | 
					 | 
					 | 
					 | 
					        Camera "resolution" doesn't change how it shows on screen but rather stretches the result, eg the following which just stretches it vertically: | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					        :resolution="{ width: 375, height: 812 }" | 
					 | 
					 | 
					        :resolution="{ width: 375, height: 812 }" | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					        facingMode="user" | 
					 | 
					 | 
					      --> | 
				
			
			
				
				
			
		
	
		
		
			
				
					
					 | 
					 | 
					        autoplay | 
					 | 
					 | 
					      <camera facingMode="user" autoplay ref="camera"> | 
				
			
			
				
				
			
		
	
		
		
			
				
					 | 
					 | 
					        ref="camera" | 
					 | 
					 | 
					 | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					      > | 
					 | 
					 | 
					 | 
				
			
			
		
	
		
		
	
		
		
	
		
		
			
				
					 | 
					 | 
					        <button @click="storeImage">I'm on top of the video</button> | 
					 | 
					 | 
					        <button @click="storeImage">I'm on top of the video</button> | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					      </camera> | 
					 | 
					 | 
					      </camera> | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					    </div> | 
					 | 
					 | 
					    </div> | 
				
			
			
		
	
	
		
		
			
				
					| 
						
						
						
							
								
							
						
					 | 
					@ -39,6 +38,8 @@ import axios from "axios"; | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					import Camera from "simple-vue-camera"; | 
					 | 
					 | 
					import Camera from "simple-vue-camera"; | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					import { Component, Vue } from "vue-facing-decorator"; | 
					 | 
					 | 
					import { Component, Vue } from "vue-facing-decorator"; | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					
 | 
					 | 
					 | 
					
 | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					 | 
					 | 
					 | 
					import { DEFAULT_IMAGE_API_SERVER } from "@/constants/app"; | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					 | 
					 | 
					 | 
					
 | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					interface Notification { | 
					 | 
					 | 
					interface Notification { | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					  group: string; | 
					 | 
					 | 
					  group: string; | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					  type: string; | 
					 | 
					 | 
					  type: string; | 
				
			
			
		
	
	
		
		
			
				
					| 
						
							
								
							
						
						
							
								
							
						
						
					 | 
					@ -68,19 +69,15 @@ export default class GiftedPhoto extends Vue { | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					      return; | 
					 | 
					 | 
					      return; | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					    } | 
					 | 
					 | 
					    } | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					
 | 
					 | 
					 | 
					
 | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					    //this.localImageUrl = URL.createObjectURL(blob); | 
					 | 
					 | 
					 | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					
 | 
					 | 
					 | 
					 | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					    console.log("Got an image:", blob?.size); | 
					 | 
					 | 
					 | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					
 | 
					 | 
					 | 
					 | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					    const formData = new FormData(); | 
					 | 
					 | 
					    const formData = new FormData(); | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					    formData.append("image", blob, "snapshot.jpg"); | 
					 | 
					 | 
					    formData.append("image", blob, "snapshot.jpg"); | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					    try { | 
					 | 
					 | 
					    try { | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					      const response = await axios.post( | 
					 | 
					 | 
					      const response = await axios.post( | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					        "http://localhost:3000/image", | 
					 | 
					 | 
					        DEFAULT_IMAGE_API_SERVER + "/image", | 
				
			
			
				
				
			
		
	
		
		
	
		
		
			
				
					 | 
					 | 
					        formData, | 
					 | 
					 | 
					        formData, | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					      ); | 
					 | 
					 | 
					      ); | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					
 | 
					 | 
					 | 
					
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					      console.log("Upload successful", response.data); | 
					 | 
					 | 
					      console.log("Sent. Response:", response.data); | 
				
			
			
				
				
			
		
	
		
		
	
		
		
			
				
					 | 
					 | 
					    } catch (error) { | 
					 | 
					 | 
					    } catch (error) { | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					      console.error("Error uploading the image", error); | 
					 | 
					 | 
					      console.error("Error uploading the image", error); | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					    } | 
					 | 
					 | 
					    } | 
				
			
			
		
	
	
		
		
			
				
					| 
						
							
								
							
						
						
						
					 | 
					
  |