changes

app/components/media/Camera.vue

@@ -1,33 +1,59 @@
 <template>
   <div>
-    <div>
+    <div class="block rounded-md is-clipped">
       <video
         ref="video"
-        id="video"
-        width="640"
         height="480"
         autoplay
+        class="w-full is-block"
       ></video>
     </div>
-    <div class="mt-2">
-      <button
-        class="button is-primary"
-        id="snap"
-        v-on:click="capture()"
-      >
-        Chụp ảnh
-      </button>
-      <a
-        class="ml-6"
-        @click="switchView()"
-      >
-        <SvgIcon v-bind="{ name: 'camera_switch.svg', type: 'black', size: 40 }"></SvgIcon>
-      </a>
+    <div class="fixed-grid has-12-cols mb-0">
+      <div class="grid">
+        <div class="cell is-flex is-justify-content-center is-align-items-center">
+          <button
+            @click="$emit('close')"
+            class="button is-light rounded-full"
+          >
+            <span class="icon">
+              <Icon
+                name="material-symbols:close-rounded"
+                :size="20"
+              />
+            </span>
+          </button>
+        </div>
+        <div class="cell is-col-span-10 has-text-centered">
+          <button
+            @click="capture"
+            class="button is-primary is-medium rounded-full"
+          >
+            <span class="icon">
+              <Icon
+                name="material-symbols:photo-camera-outline-rounded"
+                :size="24"
+              />
+            </span>
+          </button>
+        </div>
+        <div class="cell is-flex is-justify-content-center is-align-items-center">
+          <button
+            @click="flip"
+            class="button is-light is-primary rounded-full"
+          >
+            <span class="icon">
+              <Icon
+                name="material-symbols:flip-camera-ios-outline-rounded"
+                :size="20"
+              />
+            </span>
+          </button>
+        </div>
+      </div>
     </div>
     <canvas
       v-show="false"
       ref="canvas"
-      id="canvas"
       width="640"
       height="480"
     ></canvas>
@@ -35,14 +61,14 @@
 </template>
 <script>
 export default {
-  data: function () {
+  data() {
     return {
       video: {},
       canvas: {},
       current: "front",
     };
   },
-  mounted: function () {
+  mounted() {
     this.openCamera();
   },
   beforeDestroy() {
@@ -54,46 +80,61 @@ export default {
   },
   methods: {
     openCamera() {
-      let f = this.current === "front" ? { facingMode: "user" } : { facingMode: { exact: "environment" } };
       this.video = this.$refs.video;
+      const facingConstraint = {
+        facingMode: this.current === "front" ? "user" : { exact: "environment" },
+      };
+
       if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
-        navigator.mediaDevices.getUserMedia({ video: f, audio: false }).then((stream) => {
-          video.srcObject = stream;
-          this.video.play();
-        });
+        navigator.mediaDevices
+          .getUserMedia({ video: facingConstraint, audio: false })
+          .then((stream) => {
+            this.video.srcObject = stream;
+            this.video.play();
+          })
+          .catch((err) => {
+            if (this.current === "back" && (err.name === "OverconstrainedError" || err.name === "NotFoundError")) {
+              this.current = "front";
+              this.$snackbar("Không tìm thấy camera sau", "Error");
+              this.openCamera(); // retry front cam
+            }
+          });
       }
     },
     capture() {
       this.canvas = this.$refs.canvas;
-      let scale = 600 / this.video.videoWidth;
-      let w = this.video.videoWidth * scale;
-      let h = this.video.videoHeight * scale;
+      const scale = 600 / this.video.videoWidth;
+      const w = this.video.videoWidth * scale;
+      const h = this.video.videoHeight * scale;
       this.canvas.width = w;
       this.canvas.height = h;
-      var context = this.canvas.getContext("2d").drawImage(this.video, 0, 0, w, h);
-      this.canvas.toBlob((blod) => this.saveAs(blod));
+      this.canvas.getContext("2d").drawImage(this.video, 0, 0, w, h);
+      this.canvas.toBlob((blob) => this.saveAs(blob));
     },
-    async saveAs(blod) {
-      var form = new FormData();
-      let name = `${this.$id()}.png`;
+    async saveAs(blob) {
+      const form = new FormData();
+      const name = `${this.$id()}.png`;
       this.fileName = `${this.$dayjs(new Date()).format("YYYYMMDDhhmmss")}-${name}`;
+
       form.append("filename", this.fileName);
       form.append("name", name);
-      form.append("file", blod);
+      form.append("file", blob);
       form.append("type", "image");
       form.append("size", 100);
-      form.append("user", this.$store.state.login.id);
-      let result = await this.$insertapi("upload", { data: form });
+      form.append("user", this.$store.login.id || 1);
+
+      const result = await this.$insertapi("upload", { data: form });
       if (result === "error") return;
-      let row = result.rows[0];
-      const file = new File([blod], name, { type: "image/png" });
-      row.source = { file: file };
+
+      const row = result.rows[0];
+      const file = new File([blob], name, { type: "image/png" });
+      row.source = { file };
       this.$emit("modalevent", { name: "selectimage", data: row });
       this.$emit("close");
     },
-    switchView() {
+    flip() {
       this.current = this.current === "front" ? "back" : "front";
-      var vidTrack = this.video.srcObject.getVideoTracks();
+      const vidTrack = this.video.srcObject.getVideoTracks();
       vidTrack.forEach((track) => {
         track.stop();
         track.enabled = false;