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

django_camera_kit/kyc/static/django_camera_kit/kyc/js/kyc_capture.js

@@ -0,0 +1,347 @@
+(function (window, document) {
+  "use strict";
+
+  var ALIGN_STREAK = 8; // consecutive frames with a detected face before we start the liveness challenge
+  var MOVE_THRESHOLD_RATIO = 0.12; // horizontal head movement required, as a fraction of frame width
+
+  function getCookie(name) {
+    var match = document.cookie.match("(^|;)\\s*" + name + "\\s*=\\s*([^;]+)");
+    return match ? decodeURIComponent(match[2]) : null;
+  }
+
+  function init() {
+    document.querySelectorAll(".camera-kit-kyc").forEach(function (container) {
+      if (container.dataset.camerakitBound) return;
+      container.dataset.camerakitBound = "true";
+      bindWidget(container);
+    });
+  }
+
+  function bindWidget(container) {
+    var input = container.querySelector("input[type=hidden]");
+    var trigger = container.querySelector(".camera-kit-kyc-trigger");
+    var statusEl = container.querySelector(".camera-kit-kyc-status");
+    if (!input || !trigger) return;
+
+    trigger.addEventListener("click", function () {
+      openFlow(container, input, statusEl);
+    });
+  }
+
+  function openFlow(container, input, statusEl) {
+    var verifyUrl = container.dataset.verifyUrl;
+    if (!verifyUrl) {
+      statusEl.textContent = "django-camera-kit: aucun verify_url configuré sur ce widget.";
+      return;
+    }
+
+    var session = {
+      stream: null,
+      phase: "align",
+      alignStreak: 0,
+      challengeStartX: null,
+      challengeMaxDelta: 0,
+      idBlob: null,
+      selfieBlob: null,
+      livenessPassed: false,
+      running: true,
+    };
+
+    var overlay = buildOverlay();
+    document.body.appendChild(overlay.root);
+
+    FaceKit.ready(); // kick off model loading in the background, in parallel with camera permission
+
+    enterIdStep(session, overlay);
+
+    overlay.captureIdBtn.addEventListener("click", function () {
+      captureId(session, overlay);
+    });
+
+    overlay.restartBtn.addEventListener("click", function () {
+      enterIdStep(session, overlay);
+    });
+
+    overlay.manualSelfieBtn.addEventListener("click", function () {
+      captureSelfie(session, overlay, false);
+    });
+
+    overlay.retakeSelfieBtn.addEventListener("click", function () {
+      enterSelfieStep(session, overlay);
+    });
+
+    overlay.sendBtn.addEventListener("click", function () {
+      submit(session, overlay, input, verifyUrl, statusEl);
+    });
+
+    overlay.closeBtn.addEventListener("click", function () {
+      closeOverlay(session, overlay);
+    });
+
+    overlay.cancelBtns.forEach(function (btn) {
+      btn.addEventListener("click", function () {
+        closeOverlay(session, overlay);
+      });
+    });
+  }
+
+  function enterIdStep(session, overlay) {
+    overlay.idVideoWrapper.appendChild(overlay.video);
+    showStep(overlay, "id");
+    switchCamera(session, overlay, "environment");
+  }
+
+  function enterSelfieStep(session, overlay) {
+    overlay.selfieVideoWrapper.appendChild(overlay.video);
+    session.phase = "align";
+    session.alignStreak = 0;
+    session.challengeStartX = null;
+    session.challengeMaxDelta = 0;
+    showStep(overlay, "selfie");
+    switchCamera(session, overlay, "user").then(function () {
+      trackSelfie(session, overlay);
+    });
+  }
+
+  function switchCamera(session, overlay, facingMode) {
+    CameraKit.stopStream(session.stream);
+    return CameraKit.openStream({ video: { facingMode: { ideal: facingMode } }, audio: false })
+      .then(function (stream) {
+        session.stream = stream;
+        overlay.video.srcObject = stream;
+        return overlay.video.play();
+      })
+      .catch(function (err) {
+        overlay.status.textContent = "Impossible d'accéder à la caméra : " + err.message;
+      });
+  }
+
+  function captureId(session, overlay) {
+    var frame = CameraKit.captureFrame(overlay.video);
+    CameraKit.canvasToBlob(frame).then(function (blob) {
+      session.idBlob = blob;
+      overlay.idPreview.src = URL.createObjectURL(blob);
+      enterSelfieStep(session, overlay);
+    });
+  }
+
+  function trackSelfie(session, overlay) {
+    if (!session.running || session.phase === "done") return;
+
+    if (overlay.video.readyState === overlay.video.HAVE_ENOUGH_DATA) {
+      var frame = CameraKit.captureFrame(overlay.video);
+      var detection = FaceKit.detectFace(frame);
+      updateMotionState(session, overlay, frame, detection);
+    }
+
+    window.requestAnimationFrame(function () {
+      trackSelfie(session, overlay);
+    });
+  }
+
+  // Liveness challenge: track how far the detected face's horizontal
+  // center moves once the user is asked to turn their head, instead of a
+  // blink. YuNet only returns 5 point landmarks (eye/nose/mouth centers),
+  // not full eyelid contours, so a real eye-aspect-ratio blink signal
+  // isn't available — head movement is a robust substitute that doesn't
+  // depend on eye-region precision at all.
+  function updateMotionState(session, overlay, frame, detection) {
+    if (!detection) {
+      overlay.hint.textContent = "Aucun visage détecté — centrez votre visage dans le cadre.";
+      session.alignStreak = 0;
+      return;
+    }
+
+    if (session.phase === "align") {
+      overlay.hint.textContent = "Restez immobile, centrez votre visage…";
+      session.alignStreak++;
+      if (session.alignStreak >= ALIGN_STREAK) {
+        session.phase = "challenge";
+        session.challengeStartX = detection.centerX;
+        session.challengeMaxDelta = 0;
+        overlay.hint.textContent = "Tournez légèrement la tête, à gauche ou à droite.";
+      }
+      return;
+    }
+
+    if (session.phase === "challenge") {
+      var delta = Math.abs(detection.centerX - session.challengeStartX);
+      session.challengeMaxDelta = Math.max(session.challengeMaxDelta, delta);
+
+      if (session.challengeMaxDelta >= frame.width * MOVE_THRESHOLD_RATIO) {
+        session.phase = "done";
+        finishChallenge(session, overlay, frame, true);
+      }
+    }
+  }
+
+  function finishChallenge(session, overlay, frame, livenessPassed) {
+    session.livenessPassed = livenessPassed;
+    CameraKit.canvasToBlob(frame).then(function (blob) {
+      session.selfieBlob = blob;
+      overlay.selfiePreview.src = URL.createObjectURL(blob);
+      showStep(overlay, "review");
+    });
+  }
+
+  function captureSelfie(session, overlay, livenessPassed) {
+    session.phase = "done";
+    var frame = CameraKit.captureFrame(overlay.video);
+    finishChallenge(session, overlay, frame, livenessPassed);
+  }
+
+  function submit(session, overlay, input, verifyUrl, statusEl) {
+    if (!session.idBlob || !session.selfieBlob) return;
+
+    overlay.sendBtn.disabled = true;
+    overlay.reviewStatus.textContent = "Vérification en cours…";
+
+    var formData = new FormData();
+    formData.append("id_document", session.idBlob, "id_document.jpg");
+    formData.append("selfie", session.selfieBlob, "selfie.jpg");
+    formData.append("liveness_passed", session.livenessPassed ? "true" : "false");
+
+    var csrfToken = getCookie("csrftoken");
+
+    fetch(verifyUrl, {
+      method: "POST",
+      headers: csrfToken ? { "X-CSRFToken": csrfToken } : {},
+      credentials: "same-origin",
+      body: formData,
+    })
+      .then(function (response) {
+        return response.json().then(function (data) {
+          return { ok: response.ok, data: data };
+        });
+      })
+      .then(function (result) {
+        overlay.sendBtn.disabled = false;
+        showResult(session, overlay, input, statusEl, result);
+      })
+      .catch(function (err) {
+        overlay.sendBtn.disabled = false;
+        overlay.reviewStatus.textContent = "Erreur réseau : " + err.message;
+      });
+  }
+
+  function showResult(session, overlay, input, statusEl, result) {
+    if (!result.ok) {
+      overlay.resultText.textContent = "Erreur : impossible de traiter la vérification.";
+      showStep(overlay, "result");
+      return;
+    }
+
+    var data = result.data;
+    if (data.status === "verified") {
+      overlay.resultText.textContent = "Identité vérifiée.";
+      input.value = data.id;
+      statusEl.textContent = "Vérifié";
+      input.dispatchEvent(new Event("change", { bubbles: true }));
+    } else {
+      overlay.resultText.textContent = "Vérification refusée — réessayez.";
+      statusEl.textContent = "Non vérifié";
+    }
+
+    showStep(overlay, "result");
+  }
+
+  function closeOverlay(session, overlay) {
+    session.running = false;
+    CameraKit.stopStream(session.stream);
+    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="id" class="camera-kit-step">',
+      '    <div class="camera-kit-video-wrapper camera-kit-kyc-id-wrapper">',
+      '      <div class="camera-kit-kyc-id-guide"></div>',
+      "    </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-id">Capturer la pièce d’identité</button>',
+      "    </div>",
+      "  </div>",
+
+      '  <div data-step="selfie" class="camera-kit-step" hidden>',
+      '    <div class="camera-kit-video-wrapper camera-kit-kyc-selfie-wrapper">',
+      '      <div class="camera-kit-kyc-face-guide"></div>',
+      "    </div>",
+      '    <p class="camera-kit-kyc-hint"></p>',
+      '    <div class="camera-kit-actions">',
+      '      <button type="button" class="btn btn-secondary camera-kit-cancel">Annuler</button>',
+      '      <button type="button" class="btn btn-link camera-kit-kyc-manual-selfie">Ça ne marche pas, capturer manuellement</button>',
+      "    </div>",
+      "  </div>",
+
+      '  <div data-step="review" class="camera-kit-step" hidden>',
+      '    <div class="camera-kit-kyc-review">',
+      '      <img class="camera-kit-kyc-id-preview" alt="Pièce d’identité capturée">',
+      '      <img class="camera-kit-kyc-selfie-preview" alt="Selfie capturé">',
+      "    </div>",
+      '    <p class="camera-kit-kyc-review-status"></p>',
+      '    <div class="camera-kit-actions">',
+      '      <button type="button" class="btn btn-link camera-kit-kyc-restart">Recommencer tout</button>',
+      '      <button type="button" class="btn btn-secondary camera-kit-kyc-retake-selfie">Recommencer le selfie</button>',
+      '      <button type="button" class="btn btn-success camera-kit-kyc-send">Envoyer</button>',
+      "    </div>",
+      "  </div>",
+
+      '  <div data-step="result" class="camera-kit-step" hidden>',
+      '    <p class="camera-kit-kyc-result"></p>',
+      '    <div class="camera-kit-actions">',
+      '      <button type="button" class="btn btn-primary camera-kit-kyc-close">Fermer</button>',
+      "    </div>",
+      "  </div>",
+      "</div>",
+    ].join("\n");
+
+    // A single <video> element, moved between the id/selfie step wrappers
+    // by enterIdStep()/enterSelfieStep() — not two separate elements, so
+    // the live stream is always attached to whichever one is visible.
+    var video = document.createElement("video");
+    video.autoplay = true;
+    video.playsInline = true;
+    video.muted = true;
+
+    var idVideoWrapper = root.querySelector(".camera-kit-kyc-id-wrapper");
+    idVideoWrapper.appendChild(video);
+
+    return {
+      root: root,
+      status: root.querySelector(".camera-kit-status"),
+      video: video,
+      idVideoWrapper: idVideoWrapper,
+      selfieVideoWrapper: root.querySelector(".camera-kit-kyc-selfie-wrapper"),
+      hint: root.querySelector(".camera-kit-kyc-hint"),
+      captureIdBtn: root.querySelector(".camera-kit-capture-id"),
+      restartBtn: root.querySelector(".camera-kit-kyc-restart"),
+      manualSelfieBtn: root.querySelector(".camera-kit-kyc-manual-selfie"),
+      retakeSelfieBtn: root.querySelector(".camera-kit-kyc-retake-selfie"),
+      idPreview: root.querySelector(".camera-kit-kyc-id-preview"),
+      selfiePreview: root.querySelector(".camera-kit-kyc-selfie-preview"),
+      reviewStatus: root.querySelector(".camera-kit-kyc-review-status"),
+      sendBtn: root.querySelector(".camera-kit-kyc-send"),
+      resultText: root.querySelector(".camera-kit-kyc-result"),
+      closeBtn: root.querySelector(".camera-kit-kyc-close"),
+      cancelBtns: Array.prototype.slice.call(root.querySelectorAll(".camera-kit-cancel")),
+    };
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", init);
+  } else {
+    init();
+  }
+})(window, document);

django_camera_kit/kyc/templates/django_camera_kit/kyc/widgets/kyc_verification.html

@@ -0,0 +1,7 @@
+<div class="camera-kit-kyc" data-verify-url="{{ widget.verify_url|default:'' }}">
+  <input type="{{ widget.type }}" name="{{ widget.name }}"{% if widget.value != None %} value="{{ widget.value }}"{% endif %}{% include "django/forms/widgets/attrs.html" %}>
+  <button type="button" class="btn btn-outline-primary camera-kit-kyc-trigger">
+    Vérifier mon identité
+  </button>
+  <span class="camera-kit-kyc-status"></span>
+</div>

django_camera_kit/kyc/throttling.py

@@ -0,0 +1,20 @@
+from rest_framework.throttling import UserRateThrottle
+
+from . import conf
+
+
+class KYCVerifyThrottle(UserRateThrottle):
+    """Rate-limits KYCVerifyView per authenticated user.
+
+    Each request runs a full face-embedding inference pass — without a
+    limit, the endpoint is a cheap resource-exhaustion and brute-force
+    probing vector. Reads from DJANGO_CAMERA_KIT_KYC.THROTTLE_RATE
+    (see conf.py) instead of DRF's global DEFAULT_THROTTLE_RATES, so this
+    reusable app doesn't require the consuming project to configure DRF
+    throttle scopes globally.
+    """
+
+    scope = "camera_kit_kyc_verify"
+
+    def get_rate(self):
+        return conf.get_setting("THROTTLE_RATE")

django_camera_kit/kyc/urls.py

@@ -0,0 +1,9 @@
+from django.urls import path
+
+from .views import KYCVerifyView
+
+app_name = "camera_kit_kyc"
+
+urlpatterns = [
+    path("verify/", KYCVerifyView.as_view(), name="verify"),
+]

django_camera_kit/kyc/views.py

@@ -0,0 +1,65 @@
+import cv2
+import numpy as np
+from rest_framework.permissions import IsAuthenticated
+from rest_framework.response import Response
+from rest_framework.views import APIView
+
+from . import conf
+from .embeddings import compare_embeddings, extract_face_embedding
+from .models import KYCVerification
+from .serializers import KYCSubmissionSerializer, KYCVerificationSerializer
+from .throttling import KYCVerifyThrottle
+
+
+def _read_image_bgr(django_file):
+    data = np.frombuffer(django_file.read(), dtype=np.uint8)
+    django_file.seek(0)
+    return cv2.imdecode(data, cv2.IMREAD_COLOR)
+
+
+class KYCVerifyView(APIView):
+    """Accepts a selfie and an ID document photo, extracts a face embedding
+    from each server-side, and compares them. Matching only ever happens
+    here — no client-supplied embedding or score is ever trusted.
+
+    Requires authentication: a verification is meaningless without knowing
+    whose identity it claims to confirm, and the endpoint runs a full face-
+    embedding inference pass per request, so it also needs to be rate
+    limited (KYCVerifyThrottle) rather than open to anonymous callers.
+    """
+
+    permission_classes = [IsAuthenticated]
+    throttle_classes = [KYCVerifyThrottle]
+
+    def post(self, request):
+        submission = KYCSubmissionSerializer(data=request.data)
+        submission.is_valid(raise_exception=True)
+
+        verification = KYCVerification.objects.create(
+            user=request.user,
+            selfie=submission.validated_data["selfie"],
+            id_document=submission.validated_data["id_document"],
+            liveness_passed=submission.validated_data["liveness_passed"],
+        )
+
+        selfie_embedding = extract_face_embedding(_read_image_bgr(verification.selfie))
+        id_embedding = extract_face_embedding(_read_image_bgr(verification.id_document))
+
+        if selfie_embedding is None or id_embedding is None:
+            verification.status = KYCVerification.Status.REJECTED
+            verification.save(update_fields=["status"])
+            return Response(KYCVerificationSerializer(verification).data)
+
+        score = compare_embeddings(selfie_embedding, id_embedding)
+        verification.selfie_embedding = selfie_embedding
+        verification.id_face_embedding = id_embedding
+        verification.match_score = score
+        verification.status = (
+            KYCVerification.Status.VERIFIED
+            if score >= conf.get_setting("MATCH_THRESHOLD")
+            and verification.liveness_passed
+            else KYCVerification.Status.REJECTED
+        )
+        verification.save()
+
+        return Response(KYCVerificationSerializer(verification).data)

django_camera_kit/kyc/widgets.py

@@ -0,0 +1,39 @@
+from django import forms
+from django.urls import NoReverseMatch, reverse
+
+
+class KYCVerificationWidget(forms.HiddenInput):
+    """Hidden field populated with a KYCVerification id once the user
+    completes the live capture + server-side verification flow.
+
+    Renders a "Vérifier mon identité" button next to the hidden input —
+    unlike DocumentScannerWidget, there is deliberately no file-upload
+    fallback: allowing a raw upload here would defeat the whole point of
+    the liveness challenge (anyone could submit a stolen photo).
+    """
+
+    template_name = "django_camera_kit/kyc/widgets/kyc_verification.html"
+
+    class Media:
+        css = {"all": ("django_camera_kit/kyc/css/kyc_capture.css",)}
+        js = (
+            "django_camera_kit/vendor/opencv.js",
+            "django_camera_kit/js/camera_kit.js",
+            "django_camera_kit/kyc/js/face_kit.js",
+            "django_camera_kit/kyc/js/kyc_capture.js",
+        )
+
+    def __init__(self, attrs=None, verify_url=None):
+        super().__init__(attrs)
+        self.verify_url = verify_url
+
+    def get_context(self, name, value, attrs):
+        context = super().get_context(name, value, attrs)
+        context["widget"]["verify_url"] = self.verify_url or self._default_verify_url()
+        return context
+
+    def _default_verify_url(self):
+        try:
+            return reverse("camera_kit_kyc:verify")
+        except NoReverseMatch:
+            return None

django_camera_kit/static/django_camera_kit/css/camera_kit.css

@@ -0,0 +1,97 @@
+.camera-kit-scanner {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+/* Once doc_scan.js has bound the widget, the button is the only way in —
+   the native file input stays in the DOM (still submits the scanned file)
+   but is hidden. If JS never runs, this class is never added and the
+   native picker remains visible as the fallback. */
+.camera-kit-scanner.camera-kit-js-ready input[type="file"] {
+  display: none;
+}
+
+.camera-kit-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.85);
+  z-index: 1050;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+}
+
+.camera-kit-modal {
+  background: #fff;
+  border-radius: 0.5rem;
+  max-width: 640px;
+  width: 100%;
+  max-height: 90vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.camera-kit-status {
+  padding: 0.5rem 1rem;
+  color: #b02a37;
+  font-size: 0.875rem;
+  min-height: 1.5rem;
+}
+
+.camera-kit-video-wrapper,
+.camera-kit-adjust-wrapper {
+  position: relative;
+  background: #000;
+  line-height: 0;
+}
+
+.camera-kit-video-wrapper video,
+.camera-kit-video-wrapper canvas,
+.camera-kit-adjust-wrapper canvas {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+.camera-kit-video-wrapper canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+}
+
+.camera-kit-handle {
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: #00723d;
+  border: 2px solid #fff;
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
+  touch-action: none;
+  cursor: grab;
+}
+
+.camera-kit-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+}
+
+.camera-kit-page-strip {
+  display: flex;
+  gap: 0.5rem;
+  padding: 1rem;
+  overflow-x: auto;
+}
+
+.camera-kit-thumb {
+  height: 96px;
+  border-radius: 0.25rem;
+  border: 1px solid #dee2e6;
+}