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