frontend/src/components/CombinedFileField.vue

@@ -37,6 +37,11 @@
                         <b-icon-camera-video></b-icon-camera-video>
                     </div>
                 </webcam-file-source>
+                <webcam-file-source-legacy @input="addFiles">
+                    <div class="img-thumbnail btn btn-outline-primary">
+                        <b-icon-camera-video></b-icon-camera-video>
+                    </div>
+                </webcam-file-source-legacy>
                 <label class="img-thumbnail btn btn-outline-primary" for="file-dropdown">
                     <b-icon-plus></b-icon-plus>
                 </label>
@@ -106,11 +111,13 @@ import CameraFileSource from "@/components/CameraFileSource.vue";
 import AuthenticatedImage from "@/components/AuthenticatedImage.vue";
 import DeletableWrapper from "@/components/DeletableWrapper.vue";
 import WebcamFileSource from "@/components/WebcamFileSource.vue";
+import WebcamFileSourceLegacy from "@/components/WebcamFileSourceLegacy.vue";
 
 export default {
     name: "CombinedFileField",
     components: {
         WebcamFileSource,
+        WebcamFileSourceLegacy,
         ...BIcons,
         AuthenticatedImage,
         DeletableWrapper,

frontend/src/components/WebcamFileSource.vue

@@ -1,71 +1,29 @@
 <template>
-  <div class="d-inline-block">
+    <div class="d-inline-block">
-    <label @click="open">
+        <label @click="show_modal = true">
-      <slot></slot>
+            <slot></slot>
-    </label>
+        </label>
-    <div class="modal" :class="{'d-block': show_modal}" tabindex="-1">
+        <div class="modal">
-      <div class="modal-dialog modal-fullscreen">
+            <div class="modal-dialog modal-fullscreen">
-        <div class="modal-content p-2">
+                <div class="modal-content">
-          <button type="button" class="btn-close position-absolute fixed-top m-2" style="right: 1rem; left: auto;"
+                    <select v-model="selectedCamera" v-on:change="openStream" class="form-select position-relative w-75 mx-auto mt-4" aria-label="Select Camera Source">
-                  @click="close"></button>
+                        <option disabled value="">Select Camera Source</option>
-          <div v-if="error" class="alert alert-danger" role="alert">
+                        <option v-for="camera in availableCameras" :key="camera.deviceId" :value="camera">
-            {{ lastError }}
+                            {{ camera.label }}
-          </div>
+                        </option>
-          <div class="row" v-if="capturing && !streaming">
+                    </select>
-            <div class="spinner-grow text-danger mx-auto" role="status">
+                    <video
-              <span class="sr-only">Loading...</span>
+                        v-if="capturing"
+                        ref="video"
+                        class="img-fluid rounded mx-auto d-block mb-3 img-preview w-100"
+                    >
+                        Video stream not available.
+                    </video>
+                    <canvas ref="canvas" class="img-fluid d-none img-preview"/>
+                </div>
             </div>
-          </div>
-          <img
-              v-if="!capturing && dataImage"
-              class="img-fluid rounded mx-auto d-block w-75"
-              :src="dataImage"
-              alt="Image not available."
-          />
-          <video
-              ref="video"
-              class="img-fluid rounded d-block img-preview w-75 mx-auto"
-              :class="{'d-none': !capturing}"
-          >
-            Video stream not available.
-          </video>
-          <canvas ref="canvas" class="img-fluid d-none img-preview"/>
-          <div class="position-absolute fixed-bottom text-center">
-            <div class="btn-group shadow">
-              <button
-                  class="btn btn-success"
-                  :class="{'disabled': dataImage}"
-                  @click="(!dataImage) && captureVideoImage()">
-                <b-icon-camera></b-icon-camera>&nbsp;Capture
-              </button>
-              <button
-                  class="btn btn-danger"
-                  :class="{'disabled': !dataImage}"
-                  @click="(dataImage) && retake()"
-              >
-                <b-icon-trash></b-icon-trash>&nbsp;Retake
-              </button>
-              <button
-                  class="btn btn-primary"
-                  :class="{'disabled': !dataImage}"
-                  @click="(dataImage) && save()"
-              >
-                <b-icon-save></b-icon-save>&nbsp;Save
-              </button>
-            </div>
-            <select v-model="selectedCamera" v-on:change="onUserSelect"
-                    class="form-select position-relative w-50 mx-auto mb-5 mt-2 shadow"
-                    aria-label="Select Camera Source">
-              <option disabled value="">Select Camera Source</option>
-              <option v-for="camera in availableCameras" :key="camera.deviceId" :value="camera">
-                {{ camera.label }}
-              </option>
-            </select>
-          </div>
         </div>
-      </div>
     </div>
-  </div>
 </template>
 
 <style scoped>
@@ -74,117 +32,43 @@
 
 <script>
 export default {
-  name: "WebcamFileSource",
+    name: "WebcamFileSource",
-  data: () => ({
+    data: () => ({
-    lastError: undefined,
+        show_modal: false,
-    error: false,
+        availableCameras: [],
-    show_modal: false,
+        selectedCamera: undefined,
-    availableCameras: [],
+        capturing: false,
-    selectedCamera: undefined,
+        streaming: false,
-    capturing: false,
+        stream: undefined,
-    streaming: false,
+        dataImage: undefined
-    stream: undefined,
+    }),
-    dataImage: undefined
+    methods: {
-  }),
+        async openStream() {
-  methods: {
+            if (!this.capturing) {
-    async attemptGetUserMedia(constraints) {
+                this.capturing = true;
-      this.stream = await navigator.mediaDevices.getUserMedia({
+                this.streaming = false;
-        audio: false,
+                this.stream = await navigator.mediaDevices.getUserMedia({video: {deviceId: this.selectedCamera.deviceId}, audio: false});
-        video: constraints
+                const {video} = this.$refs;
-      }).catch((error) => {
+                video.srcObject = this.stream;
-        console.error(error);
+                video.play();
-        if (error.name === "NotAllowedError") this.lastError = "Camera Permission Not Granted";
+                video.addEventListener('canplay', () => {
-        if (error.name === "NotReadableError") this.lastError = "Camera Hardware Error";
+                    this.streaming = true;
-        this.lastError = "Unknown Error"
+                }, false);
-      });
+            }
-      if (this.stream) this.allowed = true;
+        },
+        async open() {
+            await navigator.mediaDevices.getUserMedia({video: true});
+            const devices = await navigator.mediaDevices.enumerateDevices();
+            this.availableCameras = devices.filter(device => device.kind === "videoinput");
+            if (this.availableCameras.length === 0) return;
+            if (this.availableCameras.length === 1) {
+                this.selectedCamera = this.availableCameras[0];
+                await this.openStream();
+            }
+        }
     },
-    async assignStream() {
+    mounted() {
-      this.capturing = true;
-      this.streaming = false;
-      const {video} = this.$refs;
-      video.srcObject = this.stream;
-      video.addEventListener('canplay', () => {
-        this.streaming = true;
-        localStorage.setItem("WebcamFileSource#previousDevice", this.selectedCamera.deviceId);
-      }, false);
-      await video.play();
-    },
-    closeStream() {
-      if (this.capturing) {
-        this.stream.getTracks().forEach(s => s.stop());
-        this.streaming = false;
-        this.stream = undefined;
-      }
-    },
-    async enumerateCameras() {
-      const devices = await navigator.mediaDevices.enumerateDevices();
-      this.availableCameras = devices.filter(device => device.kind === "videoinput");
-    },
-    async open() {
-      this.show_modal = true;
-      const previousDevice = localStorage.getItem("WebcamFileSource#previousDevice");
-      if (previousDevice) await this.attemptGetUserMedia({deviceId: previousDevice});
-      if (!this.stream) await this.attemptGetUserMedia({facingMode: "environment"});
-      if (!this.stream) await this.attemptGetUserMedia(true);
-      if (!this.stream) this.error = true;
-      await this.enumerateCameras();
-      this.selectedCamera = this.availableCameras.find(({deviceId}) => deviceId === this.stream.getTracks()[0].getSettings().deviceId);
-      await this.assignStream();
-    },
-    async onUserSelect() {
-      this.closeStream();
-      if (!this.dataImage) {
-        await this.attemptGetUserMedia({deviceId: this.selectedCamera.deviceId})
-        await this.assignStream();
-      }
-    },
-    async close() {
-      this.closeStream();
-      this.capturing = false;
-      this.show_modal = false;
-      this.dataImage = undefined;
-    },
-    captureVideoImage() {
-      const {video, canvas} = this.$refs;
-      const context = canvas.getContext('2d');
-      const {videoWidth, videoHeight} = video;
-      canvas.width = videoWidth;
-      canvas.height = videoHeight;
-      context.drawImage(video, 0, 0, videoWidth, videoHeight);
-      this.dataImage = canvas.toDataURL('image/jpeg', 0.5);
-      this.closeStream();
-      this.capturing = false;
-    },
-    retake() {
-      this.dataImage = undefined;
-      this.open();
-    },
-    save() {
-      const mimeType = this.dataImage.split(';')[0].split(':')[1];
-      const data = this.dataImage.split(',')[1];
-      const raw_data = atob(data);
-      const hash = nacl.crypto_hash(raw_data).reduce((a, b) => a + b.toString(16).padStart(2, "0"), "");
-      const image = {
-        name: hash.slice(0, 12) + ".jpg",
-        size: raw_data.length,
-        mime_type: mimeType,
-        data: data,
-        hash: hash,
-      };
-      this.$emit('input', [image]);
-      this.close();
-    }
-  },
-  mounted() {
-    navigator.mediaDevices.addEventListener("devicechange", (event) => {
-      console.log("devicechange");
-      this.enumerateCameras();
-      if (this.availableCameras.findIndex(({deviceId}) => deviceId === this.selectedCamera.deviceId) === -1) {
-        this.closeStream();
         this.open();
-      }
+    }
-    });
-  }
 }
 </script>

frontend/src/components/WebcamFileSourceLegacy.vue

@@ -0,0 +1,163 @@
+<template>
+    <div class="d-inline-block">
+        <label @click="show_modal = true">
+            <slot></slot>
+        </label>
+        <div class="modal" :class="{'d-block': show_modal}" tabindex="-1">
+            <div class="modal-dialog modal-fullscreen">
+                <div class="modal-content">
+            <img
+                v-if="!capturing"
+                class="img-fluid rounded mx-auto d-block mb-3"
+                :src="dataImage"
+                alt="Image not available."
+            />
+            <video
+                v-if="capturing"
+                ref="video"
+                class="img-fluid rounded mx-auto d-block mb-3"
+            >
+                Video stream not available.
+            </video>
+            <canvas ref="canvas" class="img-fluid d-none img-preview"/>
+            <div class="row" v-if="capturing && !streaming">
+                <div class="spinner-grow text-danger mx-auto" role="status">
+                    <span class="sr-only">Loading...</span>
+                </div>
+            </div>
+            <div class="row m-auto">
+                <button v-if="!capturing" class="btn my-2 ml-auto btn-secondary" @click="openStream()">
+                    <b-icon-camera></b-icon-camera>
+                </button>
+                <div v-if="capturing" class="btn-group my-2 ml-auto">
+                    <button class="btn btn-success" @click="captureVideoImage()">
+                        <b-icon-camera></b-icon-camera>&nbsp;Capture
+                    </button>
+                    <button
+                        class="btn"
+                        :class="(dataImage) ? 'btn-danger' : 'btn-secondary disabled'"
+                        @click="(dataImage) && closeStream()"
+                    >
+                        <b-icon-stop-fill></b-icon-stop-fill>&nbsp;Abort
+                    </button>
+                </div>
+                <select v-model="selectedCamera" class="form-select" aria-label="Select Camera Source"
+                        @change="chooseDevice(selectedCamera)">
+                    <option disabled value="">Select Camera Source</option>
+                    <option v-for="camera in availableCameras" :key="camera.deviceId" :value="camera">
+                        {{ camera.label }}
+                    </option>
+                </select>
+            </div>
+                    </div> </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import {mapMutations} from 'vuex';
+import * as BIcons from "bootstrap-icons-vue";
+
+export default {
+    name: 'WebcamFileSourceLegacy',
+    components: {
+        ...BIcons
+    },
+    emits: ["input"],
+    data: () => ({
+        capturing: false,
+        streaming: false,
+        stream: undefined,
+        dataImage: undefined,
+        show_modal: false,
+        availableCameras: [],
+        selectedCamera: undefined,
+    }),
+    methods: {
+        async openStream() {
+            if (!this.capturing) {
+                //await navigator.mediaDevices.getUserMedia({video: true});
+                this.capturing = true;
+                this.streaming = false;
+                if (this.selectedCamera)
+                    this.stream = await navigator.mediaDevices.getUserMedia({
+                        video: {deviceId: this.selectedCamera.deviceId},
+                        audio: false
+                    });
+                else
+                    this.stream = await navigator.mediaDevices.getUserMedia({
+                        video: {facingMode: "environment"},
+                        audio: false
+                    })
+                const {video} = this.$refs;
+                video.srcObject = this.stream;
+                video.addEventListener('canplay', () => {
+                    this.streaming = true;
+                }, false);
+                await video.play();
+                const devices = await navigator.mediaDevices.enumerateDevices();
+                this.availableCameras = devices.filter(device => device.kind === "videoinput");
+            }
+        },
+        captureVideoImage() {
+            const {video, canvas} = this.$refs;
+            const context = canvas.getContext('2d');
+            const {videoWidth, videoHeight} = video;
+            canvas.width = videoWidth;
+            canvas.height = videoHeight;
+            context.drawImage(video, 0, 0, videoWidth, videoHeight);
+            this.dataImage = canvas.toDataURL('image/jpeg', 0.5);
+            const mimeType = this.dataImage.split(';')[0].split(':')[1];
+            const data = this.dataImage.split(',')[1];
+            const raw_data = atob(data);
+            const hash = nacl.crypto_hash(raw_data).reduce((a, b) => a + b.toString(16).padStart(2, "0"), "");
+            const image = {
+                name: hash.slice(0, 12) + ".jpg",
+                size: raw_data.length,
+                mime_type: mimeType,
+                data: data,
+                hash: hash,
+            };
+            this.show_modal = false;
+            this.$emit('input', [image]);
+            this.closeStream();
+        },
+        chooseDevice(device) {
+            this.closeStream();
+            this.selectedCamera = device;
+            this.openStream();
+        },
+        closeStream() {
+            if (this.capturing) {
+                this.stream.getTracks().forEach(s => s.stop());
+                this.capturing = false;
+                this.streaming = false;
+            }
+        },
+    },
+    mounted() {
+
+        this.openStream();
+    },
+    beforeDestroy() {
+        this.closeStream();
+    }
+};
+</script>
+
+<style>
+
+.camera-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, .5);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+</style>

frontend/vite.config.js

@@ -36,7 +36,6 @@ export default defineConfig({
             },
             '^/auth/': {
                 target: "https://toolshed.j3d1.de:8000/",
-                secure: false,
             },
             '^/docs/': {
                 target: "https://toolshed.j3d1.de:8000/",