|
|
|
@ -43,7 +43,7 @@ |
|
|
|
<img :src="URL.createObjectURL(blob)" class="mt-2 rounded" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div v-else> |
|
|
|
<div v-else ref="cameraContainer"> |
|
|
|
<!-- |
|
|
|
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 }" |
|
|
|
@ -52,21 +52,31 @@ |
|
|
|
facingMode="environment" |
|
|
|
autoplay |
|
|
|
ref="camera" |
|
|
|
@started="cameraStarted" |
|
|
|
@started="cameraStarted()" |
|
|
|
> |
|
|
|
<div |
|
|
|
class="absolute portrait:bottom-0 portrait:left-0 portrait:right-0 landscape:right-0 landscape:top-0 landscape:bottom-0 flex landscape:flex-row justify-center items-center portrait:pb-2 landscape:pr-4" |
|
|
|
class="absolute portrait:bottom-0 portrait:left-0 portrait:right-0 portrait:pb-2 landscape:right-0 landscape:top-0 landscape:bottom-0 landscape:pr-4 flex landscape:flex-row justify-center items-center" |
|
|
|
> |
|
|
|
<button |
|
|
|
@click="takeImage" |
|
|
|
@click="takeImage()" |
|
|
|
class="bg-blue-500 hover:bg-blue-700 text-white font-bold p-3 rounded-full text-2xl leading-none" |
|
|
|
> |
|
|
|
<fa icon="camera" class="w-[1em]"></fa> |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
<div v-if="numDevices > 1" class="absolute bottom-2 right-4"> |
|
|
|
<div |
|
|
|
class="absolute portrait:bottom-2 portrait:right-16 landscape:right-0 landscape:bottom-16 landscape:pr-4 flex justify-center items-center" |
|
|
|
> |
|
|
|
<button |
|
|
|
@click="swapMirrorClass()" |
|
|
|
class="bg-blue-500 hover:bg-blue-700 text-white font-bold p-3 rounded-full text-2xl leading-none" |
|
|
|
> |
|
|
|
<fa icon="left-right" class="w-[1em]"></fa> |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
<div v-if="numDevices > -1" class="absolute bottom-2 right-4"> |
|
|
|
<button |
|
|
|
@click="switchCamera" |
|
|
|
@click="switchCamera()" |
|
|
|
class="bg-blue-500 hover:bg-blue-700 text-white font-bold p-3 rounded-full text-2xl leading-none" |
|
|
|
> |
|
|
|
<fa icon="rotate" class="w-[1em]"></fa> |
|
|
|
@ -96,6 +106,7 @@ export default class GiftedPhotoDialog extends Vue { |
|
|
|
activeDeviceNumber = 0; |
|
|
|
activeDid = ""; |
|
|
|
blob: Blob | null = null; |
|
|
|
mirror = false; |
|
|
|
numDevices = 0; |
|
|
|
setImage: (arg: string) => void = () => {}; |
|
|
|
uploading = false; |
|
|
|
@ -145,6 +156,7 @@ export default class GiftedPhotoDialog extends Vue { |
|
|
|
const cameraComponent = this.$refs.camera as InstanceType<typeof Camera>; |
|
|
|
if (cameraComponent) { |
|
|
|
this.numDevices = (await cameraComponent.devices(["videoinput"])).length; |
|
|
|
this.mirror = cameraComponent.facingMode === "user"; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@ -310,6 +322,17 @@ export default class GiftedPhotoDialog extends Vue { |
|
|
|
this.blob = null; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
swapMirrorClass() { |
|
|
|
this.mirror = !this.mirror; |
|
|
|
if (this.mirror) { |
|
|
|
(this.$refs.cameraContainer as HTMLElement).classList.add("mirror-video"); |
|
|
|
} else { |
|
|
|
(this.$refs.cameraContainer as HTMLElement).classList.remove( |
|
|
|
"mirror-video", |
|
|
|
); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
@ -334,4 +357,12 @@ export default class GiftedPhotoDialog extends Vue { |
|
|
|
width: 100%; |
|
|
|
max-width: 700px; |
|
|
|
} |
|
|
|
|
|
|
|
.mirror-video { |
|
|
|
transform: scaleX(-1); |
|
|
|
-webkit-transform: scaleX(-1); /* For Safari */ |
|
|
|
-moz-transform: scaleX(-1); /* For Firefox */ |
|
|
|
-ms-transform: scaleX(-1); /* For IE */ |
|
|
|
-o-transform: scaleX(-1); /* For Opera */ |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
