move webcam JS to its own file

core/static/user/js/user_edit.js

@@ -0,0 +1,110 @@
+function alpine_webcam_builder(
+  default_picture,
+  delete_url,
+  can_delete_picture,
+) {
+  return () => ({
+    can_edit_picture: false,
+
+    loading: false,
+    is_camera_enabled: false,
+    is_camera_error: false,
+    picture: null,
+    video: null,
+    picture_form: null,
+
+    init() {
+      this.video = this.$refs.video;
+      this.picture_form = this.$refs.form.getElementsByTagName("input");
+      if (this.picture_form.length > 0) {
+        this.picture_form = this.picture_form[0];
+        this.can_edit_picture = true;
+
+        // Link the displayed element to the form input
+        this.picture_form.onchange = (event) => {
+          let files = event.srcElement.files;
+          if (files.length > 0) {
+            this.picture = (window.URL || window.webkitURL).createObjectURL(
+              event.srcElement.files[0],
+            );
+          } else {
+            this.picture = null;
+          }
+        };
+      }
+    },
+
+    get_picture() {
+      return this.picture || default_picture;
+    },
+
+    delete_picture() {
+      // Only remove currently displayed picture
+      if (!!this.picture) {
+        let list = new DataTransfer();
+        this.picture_form.files = list.files;
+        this.picture_form.dispatchEvent(new Event("change"));
+        return;
+      }
+      if (!can_delete_picture) {
+        return;
+      }
+      // Remove user picture if correct rights are available
+      window.open(delete_url, "_self");
+    },
+
+    enable_camera() {
+      this.picture = null;
+      this.loading = true;
+      this.is_camera_error = false;
+      navigator.mediaDevices
+        .getUserMedia({ video: true, audio: false })
+        .then((stream) => {
+          this.loading = false;
+          this.is_camera_enabled = true;
+          this.video.srcObject = stream;
+          this.video.play();
+        })
+        .catch((err) => {
+          this.is_camera_error = true;
+          this.loading = false;
+        });
+    },
+
+    take_picture() {
+      let canvas = document.createElement("canvas");
+      const context = canvas.getContext("2d");
+
+      /* Create the image */
+      let settings = this.video.srcObject.getTracks()[0].getSettings();
+      canvas.width = settings.width;
+      canvas.height = settings.height;
+      context.drawImage(this.video, 0, 0, canvas.width, canvas.height);
+
+      /* Stop camera */
+      this.video.pause();
+      this.video.srcObject.getTracks().forEach((track) => {
+        if (track.readyState === "live") {
+          track.stop();
+        }
+      });
+
+      canvas.toBlob((blob) => {
+        const filename = interpolate(gettext("captured.%s"), ["webp"]);
+        let file = new File([blob], filename, {
+          type: "image/webp",
+        });
+
+        let list = new DataTransfer();
+        list.items.add(file);
+        this.picture_form.files = list.files;
+
+        // No change event is triggered, we trigger it manually #}
+        this.picture_form.dispatchEvent(new Event("change"));
+      }, "image/webp");
+
+      canvas.remove();
+      this.is_camera_enabled = false;
+    },
+  });
+}