django-camera-kit 0.1.0__py3-none-any.whl

django_camera_kit/static/django_camera_kit/js/camera_kit.js

@@ -0,0 +1,213 @@
+(function (window) {
+  "use strict";
+
+  function openStream(constraints) {
+    constraints = constraints || {
+      video: { facingMode: { ideal: "environment" } },
+      audio: false,
+    };
+    return navigator.mediaDevices.getUserMedia(constraints);
+  }
+
+  function stopStream(stream) {
+    if (!stream) return;
+    stream.getTracks().forEach(function (track) {
+      track.stop();
+    });
+  }
+
+  function captureFrame(video) {
+    var canvas = document.createElement("canvas");
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+    canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);
+    return canvas;
+  }
+
+  // opencv.js is an Emscripten module: window.cv is *not* guaranteed to be
+  // the ready module. Depending on load timing it's a Promise that resolves
+  // to the module, a not-yet-initialized module (no .Mat until the WASM
+  // runtime is up), or the ready module itself. ready() resolves once and
+  // caches the real module so detectDocumentCorners()/warpToDocument() never
+  // have to guess — see https://docs.opencv.org/5.x/utilities.html.
+  var resolvedCv = null;
+  var cvReadyPromise = null;
+
+  function ready() {
+    if (cvReadyPromise) return cvReadyPromise;
+
+    cvReadyPromise = new Promise(function (resolve) {
+      if (!window.cv) {
+        resolve(false); // vendor/opencv.js not loaded, see vendor/README.md
+        return;
+      }
+      if (typeof window.cv.then === "function") {
+        window.cv.then(function (mod) {
+          resolvedCv = mod;
+          resolve(true);
+        });
+      } else if (window.cv.Mat) {
+        resolvedCv = window.cv;
+        resolve(true);
+      } else {
+        window.cv["onRuntimeInitialized"] = function () {
+          resolvedCv = window.cv;
+          resolve(true);
+        };
+      }
+    });
+
+    return cvReadyPromise;
+  }
+
+  // Largest 4-point contour in the given canvas, in canvas pixel coordinates.
+  // Returns null if OpenCV isn't ready yet or nothing convincing was found,
+  // so callers always have a manual-adjustment fallback.
+  function detectDocumentCorners(canvas) {
+    var cv = resolvedCv;
+    if (!cv || !cv.Mat) return null;
+
+    var src = cv.imread(canvas);
+    var gray = new cv.Mat();
+    var blurred = new cv.Mat();
+    var edged = new cv.Mat();
+    var contours = new cv.MatVector();
+    var hierarchy = new cv.Mat();
+    var corners = null;
+
+    try {
+      cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY);
+      cv.GaussianBlur(gray, blurred, new cv.Size(5, 5), 0);
+      cv.Canny(blurred, edged, 75, 200);
+      cv.findContours(edged, contours, hierarchy, cv.RETR_LIST, cv.CHAIN_APPROX_SIMPLE);
+
+      var bestArea = 0;
+      var bestApprox = null;
+      var minArea = src.rows * src.cols * 0.2;
+
+      for (var i = 0; i < contours.size(); i++) {
+        var contour = contours.get(i);
+        var peri = cv.arcLength(contour, true);
+        var approx = new cv.Mat();
+        cv.approxPolyDP(contour, approx, 0.02 * peri, true);
+
+        if (approx.rows === 4) {
+          var area = cv.contourArea(approx);
+          if (area > bestArea && area > minArea) {
+            bestArea = area;
+            if (bestApprox) bestApprox.delete();
+            bestApprox = approx;
+          } else {
+            approx.delete();
+          }
+        } else {
+          approx.delete();
+        }
+        contour.delete();
+      }
+
+      if (bestApprox) {
+        corners = [];
+        for (var p = 0; p < 4; p++) {
+          corners.push({ x: bestApprox.intAt(p, 0), y: bestApprox.intAt(p, 1) });
+        }
+        bestApprox.delete();
+      }
+    } finally {
+      src.delete();
+      gray.delete();
+      blurred.delete();
+      edged.delete();
+      contours.delete();
+      hierarchy.delete();
+    }
+
+    return corners ? sortCornersClockwise(corners) : null;
+  }
+
+  function sortCornersClockwise(corners) {
+    var center = corners.reduce(
+      function (acc, c) {
+        return { x: acc.x + c.x / 4, y: acc.y + c.y / 4 };
+      },
+      { x: 0, y: 0 }
+    );
+    return corners.slice().sort(function (a, b) {
+      return (
+        Math.atan2(a.y - center.y, a.x - center.x) -
+        Math.atan2(b.y - center.y, b.x - center.x)
+      );
+    });
+  }
+
+  function distance(a, b) {
+    return Math.hypot(a.x - b.x, a.y - b.y);
+  }
+
+  // Crops and un-warps the quadrilateral defined by `corners` (clockwise,
+  // starting top-left) out of `canvas` into a flat rectangular document image.
+  function warpToDocument(canvas, corners) {
+    var cv = resolvedCv;
+    if (!cv || !cv.Mat) {
+      throw new Error("django-camera-kit: opencv.js is not ready, see vendor/README.md");
+    }
+    var src = cv.imread(canvas);
+
+    var widthTop = distance(corners[0], corners[1]);
+    var widthBottom = distance(corners[3], corners[2]);
+    var heightLeft = distance(corners[0], corners[3]);
+    var heightRight = distance(corners[1], corners[2]);
+
+    var outWidth = Math.round(Math.max(widthTop, widthBottom));
+    var outHeight = Math.round(Math.max(heightLeft, heightRight));
+
+    var srcTri = cv.matFromArray(4, 1, cv.CV_32FC2, [
+      corners[0].x, corners[0].y,
+      corners[1].x, corners[1].y,
+      corners[2].x, corners[2].y,
+      corners[3].x, corners[3].y,
+    ]);
+    var dstTri = cv.matFromArray(4, 1, cv.CV_32FC2, [
+      0, 0,
+      outWidth, 0,
+      outWidth, outHeight,
+      0, outHeight,
+    ]);
+
+    var transform = cv.getPerspectiveTransform(srcTri, dstTri);
+    var dst = new cv.Mat();
+    cv.warpPerspective(src, dst, transform, new cv.Size(outWidth, outHeight));
+
+    var outCanvas = document.createElement("canvas");
+    outCanvas.width = outWidth;
+    outCanvas.height = outHeight;
+    cv.imshow(outCanvas, dst);
+
+    src.delete();
+    dst.delete();
+    transform.delete();
+    srcTri.delete();
+    dstTri.delete();
+
+    return outCanvas;
+  }
+
+  function canvasToBlob(canvas, type, quality) {
+    return new Promise(function (resolve) {
+      canvas.toBlob(resolve, type || "image/jpeg", quality || 0.92);
+    });
+  }
+
+  window.CameraKit = {
+    openStream: openStream,
+    stopStream: stopStream,
+    captureFrame: captureFrame,
+    ready: ready,
+    getCv: function () {
+      return resolvedCv;
+    },
+    detectDocumentCorners: detectDocumentCorners,
+    warpToDocument: warpToDocument,
+    canvasToBlob: canvasToBlob,
+  };
+})(window);

django_camera_kit/static/django_camera_kit/js/doc_scan.js

@@ -0,0 +1,367 @@
+(function (window, document) {
+  "use strict";
+
+  function init() {
+    document.querySelectorAll(".camera-kit-scanner").forEach(function (container) {
+      if (container.dataset.camerakitBound) return;
+      container.dataset.camerakitBound = "true";
+      bindScanner(container);
+    });
+  }
+
+  function bindScanner(container) {
+    var input = container.querySelector("input[type=file]");
+    var trigger = container.querySelector(".camera-kit-trigger");
+    if (!input || !trigger) return;
+
+    // Only hide the native file picker once JS has actually taken over —
+    // if this script fails to load, the raw input stays as the fallback.
+    container.classList.add("camera-kit-js-ready");
+
+    trigger.addEventListener("click", function () {
+      openScanner(container, input);
+    });
+  }
+
+  function openScanner(container, input) {
+    var session = {
+      pages: [], // warped page canvases, in order
+      stream: null,
+      frame: null,
+      corners: null,
+      lastCorners: null,
+      mode: "live", // "live" | "adjust" | "pages" | "closed"
+    };
+
+    var overlay = buildOverlay();
+    document.body.appendChild(overlay.root);
+
+    CameraKit.ready().then(function (isReady) {
+      if (!isReady) {
+        overlay.status.textContent =
+          "opencv.js n'est pas chargé (voir vendor/README.md) : le scan ne fonctionnera pas.";
+      }
+    });
+
+    CameraKit.openStream()
+      .then(function (stream) {
+        session.stream = stream;
+        overlay.video.srcObject = stream;
+        return overlay.video.play();
+      })
+      .then(function () {
+        trackLiveContour(session, overlay);
+      })
+      .catch(function (err) {
+        overlay.status.textContent = "Impossible d'accéder à la caméra : " + err.message;
+      });
+
+    overlay.captureBtn.addEventListener("click", function () {
+      capturePage(session, overlay);
+    });
+
+    overlay.retakeBtn.addEventListener("click", function () {
+      enterLiveMode(session, overlay);
+    });
+
+    overlay.confirmPageBtn.addEventListener("click", function () {
+      confirmPage(session, overlay);
+    });
+
+    overlay.addPageBtn.addEventListener("click", function () {
+      enterLiveMode(session, overlay);
+    });
+
+    overlay.finishBtn.addEventListener("click", function () {
+      finishScan(session, input, container);
+      closeOverlay(session, overlay);
+    });
+
+    overlay.cancelBtn.addEventListener("click", function () {
+      closeOverlay(session, overlay);
+    });
+  }
+
+  function trackLiveContour(session, overlay) {
+    if (session.mode !== "live" || !session.stream) return;
+
+    var video = overlay.video;
+    if (video.readyState === video.HAVE_ENOUGH_DATA) {
+      var frame = CameraKit.captureFrame(video);
+      session.lastCorners = CameraKit.detectDocumentCorners(frame);
+      drawOverlayQuad(overlay, video, session.lastCorners);
+    }
+
+    window.requestAnimationFrame(function () {
+      trackLiveContour(session, overlay);
+    });
+  }
+
+  function drawOverlayQuad(overlay, video, corners) {
+    var canvas = overlay.liveCanvas;
+    canvas.width = video.clientWidth;
+    canvas.height = video.clientHeight;
+    var ctx = canvas.getContext("2d");
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    if (!corners || !video.videoWidth) return;
+
+    var scaleX = video.clientWidth / video.videoWidth;
+    var scaleY = video.clientHeight / video.videoHeight;
+
+    ctx.strokeStyle = "#00723d";
+    ctx.lineWidth = 3;
+    ctx.beginPath();
+    corners.forEach(function (c, i) {
+      var x = c.x * scaleX;
+      var y = c.y * scaleY;
+      if (i === 0) ctx.moveTo(x, y);
+      else ctx.lineTo(x, y);
+    });
+    ctx.closePath();
+    ctx.stroke();
+  }
+
+  function capturePage(session, overlay) {
+    session.frame = CameraKit.captureFrame(overlay.video);
+    session.corners = session.lastCorners || defaultCorners(session.frame.width, session.frame.height);
+    enterAdjustMode(session, overlay);
+  }
+
+  function defaultCorners(width, height) {
+    var marginX = width * 0.08;
+    var marginY = height * 0.08;
+    return [
+      { x: marginX, y: marginY },
+      { x: width - marginX, y: marginY },
+      { x: width - marginX, y: height - marginY },
+      { x: marginX, y: height - marginY },
+    ];
+  }
+
+  function enterAdjustMode(session, overlay) {
+    session.mode = "adjust";
+    showStep(overlay, "adjust");
+
+    var canvas = overlay.adjustCanvas;
+    canvas.width = session.frame.width;
+    canvas.height = session.frame.height;
+    canvas.getContext("2d").drawImage(session.frame, 0, 0);
+
+    mountCornerHandles(session, overlay);
+  }
+
+  function mountCornerHandles(session, overlay) {
+    var wrapper = overlay.adjustWrapper;
+    wrapper.querySelectorAll(".camera-kit-handle").forEach(function (h) {
+      h.remove();
+    });
+
+    session.corners.forEach(function (corner, index) {
+      var handle = document.createElement("div");
+      handle.className = "camera-kit-handle";
+      wrapper.appendChild(handle);
+      positionHandle(handle, corner, overlay.adjustCanvas);
+      makeDraggable(handle, overlay.adjustCanvas, function (point) {
+        session.corners[index] = point;
+        redrawAdjustQuad(session, overlay);
+      });
+    });
+
+    redrawAdjustQuad(session, overlay);
+  }
+
+  function positionHandle(handle, corner, canvas) {
+    var rect = canvas.getBoundingClientRect();
+    var scaleX = rect.width / canvas.width;
+    var scaleY = rect.height / canvas.height;
+    handle.style.left = corner.x * scaleX - 12 + "px";
+    handle.style.top = corner.y * scaleY - 12 + "px";
+  }
+
+  function makeDraggable(handle, canvas, onMove) {
+    function toCanvasPoint(clientX, clientY) {
+      var rect = canvas.getBoundingClientRect();
+      return {
+        x: ((clientX - rect.left) / rect.width) * canvas.width,
+        y: ((clientY - rect.top) / rect.height) * canvas.height,
+      };
+    }
+
+    function onPointerMove(evt) {
+      var rect = canvas.getBoundingClientRect();
+      handle.style.left = evt.clientX - rect.left - 12 + "px";
+      handle.style.top = evt.clientY - rect.top - 12 + "px";
+      onMove(toCanvasPoint(evt.clientX, evt.clientY));
+    }
+
+    function onPointerUp() {
+      document.removeEventListener("pointermove", onPointerMove);
+      document.removeEventListener("pointerup", onPointerUp);
+    }
+
+    handle.addEventListener("pointerdown", function (evt) {
+      evt.preventDefault();
+      document.addEventListener("pointermove", onPointerMove);
+      document.addEventListener("pointerup", onPointerUp);
+    });
+  }
+
+  function redrawAdjustQuad(session, overlay) {
+    var canvas = overlay.adjustCanvas;
+    var ctx = canvas.getContext("2d");
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.drawImage(session.frame, 0, 0);
+
+    ctx.strokeStyle = "#00723d";
+    ctx.lineWidth = 3;
+    ctx.beginPath();
+    session.corners.forEach(function (c, i) {
+      if (i === 0) ctx.moveTo(c.x, c.y);
+      else ctx.lineTo(c.x, c.y);
+    });
+    ctx.closePath();
+    ctx.stroke();
+  }
+
+  function confirmPage(session, overlay) {
+    var warped;
+    try {
+      warped = CameraKit.warpToDocument(session.frame, session.corners);
+    } catch (err) {
+      overlay.status.textContent = err.message;
+      return;
+    }
+    session.pages.push(warped);
+    renderPageStrip(session, overlay);
+    session.mode = "pages";
+    showStep(overlay, "pages");
+  }
+
+  function renderPageStrip(session, overlay) {
+    overlay.pageStrip.innerHTML = "";
+    session.pages.forEach(function (pageCanvas, index) {
+      var thumb = document.createElement("img");
+      thumb.src = pageCanvas.toDataURL("image/jpeg", 0.7);
+      thumb.className = "camera-kit-thumb";
+      thumb.alt = "Page " + (index + 1);
+      overlay.pageStrip.appendChild(thumb);
+    });
+  }
+
+  function enterLiveMode(session, overlay) {
+    session.mode = "live";
+    session.frame = null;
+    session.corners = null;
+    showStep(overlay, "live");
+    trackLiveContour(session, overlay);
+  }
+
+  function finishScan(session, input, container) {
+    if (session.pages.length === 0) return;
+
+    var jsPDF = window.jspdf && window.jspdf.jsPDF;
+    if (!jsPDF) {
+      throw new Error("django-camera-kit: jsPDF vendor file is missing, see vendor/README.md");
+    }
+
+    var pdf = new jsPDF({ unit: "pt" });
+
+    session.pages.forEach(function (pageCanvas, index) {
+      var imgData = pageCanvas.toDataURL("image/jpeg", 0.92);
+      var pageWidth = pdf.internal.pageSize.getWidth();
+      var pageHeight = (pageCanvas.height / pageCanvas.width) * pageWidth;
+
+      if (index > 0) pdf.addPage();
+      pdf.addImage(imgData, "JPEG", 0, 0, pageWidth, pageHeight);
+    });
+
+    var blob = pdf.output("blob");
+    var fileName = (input.name || "document") + ".pdf";
+    var file = new File([blob], fileName, { type: "application/pdf" });
+
+    var dataTransfer = new DataTransfer();
+    dataTransfer.items.add(file);
+    input.files = dataTransfer.files;
+    input.dispatchEvent(new Event("change", { bubbles: true }));
+
+    container.dispatchEvent(
+      new CustomEvent("camerakit:scan-complete", {
+        bubbles: true,
+        detail: { pageCount: session.pages.length, file: file },
+      })
+    );
+  }
+
+  function closeOverlay(session, overlay) {
+    CameraKit.stopStream(session.stream);
+    session.mode = "closed";
+    overlay.root.remove();
+  }
+
+  function showStep(overlay, step) {
+    overlay.root.querySelectorAll("[data-step]").forEach(function (el) {
+      el.hidden = el.dataset.step !== step;
+    });
+  }
+
+  function buildOverlay() {
+    var root = document.createElement("div");
+    root.className = "camera-kit-overlay";
+    root.innerHTML = [
+      '<div class="camera-kit-modal">',
+      '  <div class="camera-kit-status"></div>',
+
+      '  <div data-step="live" class="camera-kit-step">',
+      '    <div class="camera-kit-video-wrapper">',
+      "      <video autoplay playsinline muted></video>",
+      "      <canvas></canvas>",
+      "    </div>",
+      '    <div class="camera-kit-actions">',
+      '      <button type="button" class="btn btn-secondary camera-kit-cancel">Annuler</button>',
+      '      <button type="button" class="btn btn-primary camera-kit-capture">Capturer</button>',
+      "    </div>",
+      "  </div>",
+
+      '  <div data-step="adjust" class="camera-kit-step" hidden>',
+      '    <div class="camera-kit-adjust-wrapper">',
+      "      <canvas></canvas>",
+      "    </div>",
+      '    <div class="camera-kit-actions">',
+      '      <button type="button" class="btn btn-secondary camera-kit-retake">Reprendre</button>',
+      '      <button type="button" class="btn btn-primary camera-kit-confirm-page">Valider la page</button>',
+      "    </div>",
+      "  </div>",
+
+      '  <div data-step="pages" class="camera-kit-step" hidden>',
+      '    <div class="camera-kit-page-strip"></div>',
+      '    <div class="camera-kit-actions">',
+      '      <button type="button" class="btn btn-secondary camera-kit-add-page">Page suivante</button>',
+      '      <button type="button" class="btn btn-success camera-kit-finish">Terminer</button>',
+      "    </div>",
+      "  </div>",
+      "</div>",
+    ].join("\n");
+
+    return {
+      root: root,
+      status: root.querySelector(".camera-kit-status"),
+      video: root.querySelector("video"),
+      liveCanvas: root.querySelector('[data-step="live"] canvas'),
+      captureBtn: root.querySelector(".camera-kit-capture"),
+      cancelBtn: root.querySelector(".camera-kit-cancel"),
+      retakeBtn: root.querySelector(".camera-kit-retake"),
+      confirmPageBtn: root.querySelector(".camera-kit-confirm-page"),
+      adjustWrapper: root.querySelector(".camera-kit-adjust-wrapper"),
+      adjustCanvas: root.querySelector('[data-step="adjust"] canvas'),
+      addPageBtn: root.querySelector(".camera-kit-add-page"),
+      finishBtn: root.querySelector(".camera-kit-finish"),
+      pageStrip: root.querySelector(".camera-kit-page-strip"),
+    };
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", init);
+  } else {
+    init();
+  }
+})(window, document);

django_camera_kit/static/django_camera_kit/vendor/README.md

@@ -0,0 +1,6 @@
+These two files are required by `DocumentScannerWidget` and are intentionally not vendored into the repo (binary/generated build output). Download pinned versions before the widget will work:
+
+- `opencv.js` — OpenCV.js WASM build. https://docs.opencv.org/4.x/opencv.js (build with `--build_wasm` for a browser target, or take a release build from the opencv/opencv-python-headless-js mirror). Pin a specific 4.x version.
+- `jspdf.umd.min.js` — https://github.com/parallax/jsPDF releases, UMD build. Pin a specific version.
+
+Place both files in this directory (`django_camera_kit/static/django_camera_kit/vendor/`). `widgets.py` references them by these exact filenames.