Sith/core/static/user/js/user_edit.js

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;
    },
  });
}