@ibanzajoe/uploader 1.5.0 → 1.6.0

package/README.md

@@ -281,6 +281,11 @@ flows through the exact same pipeline as a dropped or browsed file — it lands
 the queue with a preview, can be cropped/rotated in the in-picker editor, and is
 then uploaded normally.
 
+**Front or rear camera.** On phones and tablets the picker opens the **rear**
+camera; on desktops it opens the front one. Where the device exposes more than
+one camera, a flip control in the corner of the viewfinder switches between them,
+so the default is only the starting side. Set `cameraFacingMode` to pin it.
+
 ```tsx
 <PickerOverlay
   apikey="pk_…"
@@ -290,7 +295,8 @@ then uploaded normally.
     accept: ['image/*'],
     // Sources offered to the user. Omit to offer everything supported.
     fromSources: ['local_file_system', 'camera'],
-    // 'user' = front/selfie (mirrored, default) · 'environment' = rear camera
+    // Omit for the per-device default (rear on mobile, front on desktop).
+    // 'user' = front/selfie (mirrored) · 'environment' = rear camera
     cameraFacingMode: 'environment',
   }}
 />
@@ -301,8 +307,13 @@ Notes:
   permission. Permission/no-camera errors are surfaced inline with a retry.
 - Pass `fromSources: ['local_file_system']` to hide the camera even where it is
   supported; omit `fromSources` to offer it by default.
+- The flip control appears only when `enumerateDevices()` reports two or more
+  video inputs (checked after permission is granted, when the list is accurate).
+- The front camera is mirrored in both the preview and the captured still; the
+  rear camera is not.
 - The `<CameraCapture>` component and the `isCameraSupported()` /
-  `shouldOfferCamera()` helpers are exported for fully custom pickers.
+  `shouldOfferCamera()` / `isMobileDevice()` / `defaultCameraFacingMode()`
+  helpers are exported for fully custom pickers.
 
 ## Signed policies
 

package/dist/index.cjs

@@ -26,10 +26,12 @@ __export(src_exports, {
   PickerOverlay: () => PickerOverlay,
   UploaderClient: () => UploaderClient,
   crop: () => crop,
+  defaultCameraFacingMode: () => defaultCameraFacingMode,
   editImage: () => editImage,
   flip: () => flip,
   flop: () => flop,
   isCameraSupported: () => isCameraSupported,
+  isMobileDevice: () => isMobileDevice,
   output: () => output,
   quality: () => quality,
   resize: () => resize,
@@ -1275,6 +1277,19 @@ var import_jsx_runtime3 = require("react/jsx-runtime");
 function isCameraSupported() {
   return typeof navigator !== "undefined" && !!navigator.mediaDevices && typeof navigator.mediaDevices.getUserMedia === "function" && typeof document !== "undefined" && typeof HTMLCanvasElement !== "undefined";
 }
+function isMobileDevice() {
+  if (typeof navigator === "undefined") return false;
+  const uaData = navigator.userAgentData;
+  if (typeof uaData?.mobile === "boolean") return uaData.mobile;
+  const ua = navigator.userAgent ?? "";
+  if (/Android|iPhone|iPad|iPod|Windows Phone|webOS|BlackBerry|Opera Mini|Mobile/i.test(ua)) {
+    return true;
+  }
+  return /Macintosh/.test(ua) && (navigator.maxTouchPoints ?? 0) > 1;
+}
+function defaultCameraFacingMode() {
+  return isMobileDevice() ? "environment" : "user";
+}
 var IMAGE_EXT = /\.(png|jpe?g|gif|webp|bmp|svg|avif|heic|heif)$/i;
 function acceptsImages(accept) {
   if (!accept || accept.length === 0) return true;
@@ -1315,7 +1330,7 @@ function describeCameraError(err) {
 function CameraCapture({
   onCapture,
   onCancel,
-  facingMode = "user",
+  facingMode,
   outputType = "image/jpeg",
   quality: quality2 = 0.92,
   fileNamePrefix = "camera-photo",
@@ -1328,12 +1343,32 @@ function CameraCapture({
   const [status, setStatus] = (0, import_react4.useState)("initializing");
   const [error, setError] = (0, import_react4.useState)(null);
   const [stillUrl, setStillUrl] = (0, import_react4.useState)("");
-  const mirror = facingMode === "user";
+  const [facing, setFacing] = (0, import_react4.useState)(
+    () => facingMode ?? defaultCameraFacingMode()
+  );
+  const [canFlip, setCanFlip] = (0, import_react4.useState)(false);
+  const mirror = facing === "user";
+  (0, import_react4.useEffect)(() => {
+    if (facingMode) setFacing(facingMode);
+  }, [facingMode]);
   const stopStream = (0, import_react4.useCallback)(() => {
     streamRef.current?.getTracks().forEach((t) => t.stop());
     streamRef.current = null;
     if (videoRef.current) videoRef.current.srcObject = null;
   }, []);
+  const probeCameraCount = (0, import_react4.useCallback)(async () => {
+    const media = typeof navigator !== "undefined" ? navigator.mediaDevices : void 0;
+    if (!media || typeof media.enumerateDevices !== "function") {
+      setCanFlip(isMobileDevice());
+      return;
+    }
+    try {
+      const devices = await media.enumerateDevices();
+      setCanFlip(devices.filter((d) => d.kind === "videoinput").length > 1);
+    } catch {
+      setCanFlip(isMobileDevice());
+    }
+  }, []);
   const startStream = (0, import_react4.useCallback)(async () => {
     setError(null);
     setStatus("initializing");
@@ -1342,9 +1377,12 @@ function CameraCapture({
       setStatus("error");
       return;
     }
+    stopStream();
     try {
       const stream = await navigator.mediaDevices.getUserMedia({
-        video: { facingMode },
+        // Non-exact: a device with no camera on the requested side falls back to
+        // the one it has rather than throwing OverconstrainedError.
+        video: { facingMode: facing },
         audio: false
       });
       if (videoRef.current == null) {
@@ -1354,11 +1392,12 @@ function CameraCapture({
       streamRef.current = stream;
       videoRef.current.srcObject = stream;
       setStatus("live");
+      void probeCameraCount();
     } catch (err) {
       setError(describeCameraError(err));
       setStatus("error");
     }
-  }, [facingMode]);
+  }, [facing, probeCameraCount, stopStream]);
   (0, import_react4.useEffect)(() => {
     void startStream();
     return () => {
@@ -1406,6 +1445,9 @@ function CameraCapture({
       quality2
     );
   }, [mirror, outputType, quality2, stopStream]);
+  const flipCamera = (0, import_react4.useCallback)(() => {
+    setFacing((current) => current === "user" ? "environment" : "user");
+  }, []);
   const retake = (0, import_react4.useCallback)(() => {
     blobRef.current = null;
     setStillUrl("");
@@ -1424,6 +1466,7 @@ function CameraCapture({
       className: ["uploader-camera", className ?? ""].filter(Boolean).join(" "),
       style,
       "data-testid": "camera-capture",
+      "data-facing": facing,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "uploader-camera-stage", children: [
           status === "error" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "uploader-camera-error", role: "alert", children: error }) : status === "captured" ? (
@@ -1440,7 +1483,50 @@ function CameraCapture({
               "data-mirror": mirror ? "true" : void 0
             }
           ),
-          status === "initializing" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "uploader-camera-status", "aria-live": "polite", children: "Starting camera\u2026" })
+          status === "initializing" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "uploader-camera-status", "aria-live": "polite", children: "Starting camera\u2026" }),
+          canFlip && (status === "live" || status === "initializing") && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "uploader-camera-flip",
+              "aria-label": facing === "user" ? "Switch to rear camera" : "Switch to front camera",
+              disabled: status !== "live",
+              onClick: flipCamera,
+              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { viewBox: "0 0 24 24", width: "20", height: "20", "aria-hidden": "true", focusable: "false", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "path",
+                  {
+                    d: "M4 8.5A2.5 2.5 0 0 1 6.5 6h1.2l1-1.7a1 1 0 0 1 .87-.5h4.86a1 1 0 0 1 .86.5l1 1.7h1.21A2.5 2.5 0 0 1 20 8.5v8A2.5 2.5 0 0 1 17.5 19h-11A2.5 2.5 0 0 1 4 16.5v-8Z",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "1.6",
+                    strokeLinejoin: "round"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "path",
+                  {
+                    d: "M9.4 12.6a2.6 2.6 0 0 0 4.45 1.6M14.6 11.4a2.6 2.6 0 0 0-4.45-1.6",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "1.6",
+                    strokeLinecap: "round"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "path",
+                  {
+                    d: "m9.4 10.2-.1 2.1 2.1-.6M14.6 13.8l.1-2.1-2.1.6",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "1.6",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round"
+                  }
+                )
+              ] })
+            }
+          )
         ] }),
         status === "live" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "uploader-camera-hint", children: "Frame your shot, then tap the shutter to capture." }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "uploader-camera-actions", children: status === "captured" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
@@ -2132,10 +2218,12 @@ function DropPane({
   PickerOverlay,
   UploaderClient,
   crop,
+  defaultCameraFacingMode,
   editImage,
   flip,
   flop,
   isCameraSupported,
+  isMobileDevice,
   output,
   quality,
   resize,