diff --git a/src/components/GiftedDialog.vue b/src/components/GiftedDialog.vue index cfb7f50..386f762 100644 --- a/src/components/GiftedDialog.vue +++ b/src/components/GiftedDialog.vue @@ -53,7 +53,7 @@ }" class="text-blue-500" > - More Options + Photo, ... diff --git a/src/components/GiftedPhotoDialog.vue b/src/components/GiftedPhotoDialog.vue index 43d4cd4..93dcb89 100644 --- a/src/components/GiftedPhotoDialog.vue +++ b/src/components/GiftedPhotoDialog.vue @@ -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 }" --> - +
@@ -59,6 +64,14 @@
+
+ +
@@ -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; + if (cameraComponent) { + this.numDevices = (await cameraComponent.devices(["videoinput"])).length; + } + } + + async switchCamera() { + const cameraComponent = this.$refs.camera as InstanceType; + 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; @@ -200,7 +226,6 @@ export default class GiftedPhotoDialog extends Vue { 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); } } ****/ diff --git a/src/views/HelpView.vue b/src/views/HelpView.vue index 8e47b7c..0db68e2 100644 --- a/src/views/HelpView.vue +++ b/src/views/HelpView.vue @@ -198,9 +198,7 @@
  • Chrome: - clear here + Clear at chrome://settings/content/all and also clear under dev tools Application