|
|
@ -48,7 +48,12 @@ |
|
|
|
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 }" |
|
|
|
--> |
|
|
|
<camera facingMode="environment" autoplay ref="camera"> |
|
|
|
<camera |
|
|
|
facingMode="environment" |
|
|
|
autoplay |
|
|
|
ref="camera" |
|
|
|
@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" |
|
|
|
> |
|
|
@ -59,6 +64,14 @@ |
|
|
|
<fa icon="camera" class="w-[1em]"></fa> |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
<div v-if="numDevices > 1" class="absolute bottom-2 right-4"> |
|
|
|
<button |
|
|
|
@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> |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
</camera> |
|
|
|
</div> |
|
|
|
</div> |
|
|
@ -80,12 +93,11 @@ import { accessToken } from "@/libs/crypto"; |
|
|
|
export default class GiftedPhotoDialog extends Vue { |
|
|
|
$notify!: (notification: NotificationIface, timeout?: number) => void; |
|
|
|
|
|
|
|
activeDeviceNumber = 0; |
|
|
|
activeDid = ""; |
|
|
|
blob: Blob | null = null; |
|
|
|
numDevices = 0; |
|
|
|
setImage: (arg: string) => void = () => {}; |
|
|
|
imageHeight?: number = window.innerHeight / 2; |
|
|
|
imageWidth?: number = window.innerWidth / 2; |
|
|
|
imageWarning = "."; |
|
|
|
uploading = false; |
|
|
|
visible = false; |
|
|
|
|
|
|
@ -129,6 +141,20 @@ export default class GiftedPhotoDialog extends Vue { |
|
|
|
this.blob = null; |
|
|
|
} |
|
|
|
|
|
|
|
async cameraStarted() { |
|
|
|
const cameraComponent = this.$refs.camera as InstanceType<typeof Camera>; |
|
|
|
if (cameraComponent) { |
|
|
|
this.numDevices = (await cameraComponent.devices(["videoinput"])).length; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
async switchCamera() { |
|
|
|
const cameraComponent = this.$refs.camera as InstanceType<typeof Camera>; |
|
|
|
this.activeDeviceNumber = (this.activeDeviceNumber + 1) % this.numDevices; |
|
|
|
const devices = await cameraComponent?.devices(["videoinput"]); |
|
|
|
cameraComponent?.changeCamera(devices[this.activeDeviceNumber].deviceId); |
|
|
|
} |
|
|
|
|
|
|
|
async takeImage(/* payload: MouseEvent */) { |
|
|
|
const cameraComponent = this.$refs.camera as InstanceType<typeof Camera>; |
|
|
|
|
|
|
@ -200,7 +226,6 @@ export default class GiftedPhotoDialog extends Vue { |
|
|
|
<canvas id="canvas" width="320" height="240"></canvas> |
|
|
|
|
|
|
|
async cameraClicked() { |
|
|
|
console.log("camera_button clicked"); |
|
|
|
const video = document.querySelector("#video"); |
|
|
|
const stream = await navigator.mediaDevices.getUserMedia({ |
|
|
|
video: true, |
|
|
@ -211,7 +236,6 @@ export default class GiftedPhotoDialog extends Vue { |
|
|
|
} |
|
|
|
} |
|
|
|
photoSnapped() { |
|
|
|
console.log("snap_photo clicked"); |
|
|
|
const video = document.querySelector("#video"); |
|
|
|
const canvas = document.querySelector("#canvas"); |
|
|
|
if ( |
|
|
@ -232,7 +256,6 @@ export default class GiftedPhotoDialog extends Vue { |
|
|
|
|
|
|
|
// data url of the image |
|
|
|
const image_data_url = canvas?.toDataURL("image/jpeg"); |
|
|
|
console.log(image_data_url); |
|
|
|
} |
|
|
|
} |
|
|
|
****/ |
|
|
|