@shivantra/react-web-camera 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Shivantra Solutions Private Limited
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,270 @@
+# WebCamera React Component 📸
+
+A lightweight and flexible React component for capturing images from the user’s camera (front or back) with support for `jpeg`, `png`, and `webp` formats. Built with modern React (`hooks` + `forwardRef`) and works on both desktop and mobile browsers.
+
+## 📑 Table of Contents
+
+- [Why?](#why-)
+- [Our Solution](#our-solution-)
+- [Features](#features-)
+- [Installation](#installation-)
+- [Usage](#usage-)
+  - [Basic Example](#basic-example)
+  - [Vite.js Example](#vitejs-example)
+  - [Next.js Example (App Router)](#nextjs-example-app-router)
+  - [PWA Example](#pwa-example)
+- [Props](#props-%EF%B8%8F)
+- [Ref Methods](#ref-methods-)
+- [Notes](#notes-%EF%B8%8F)
+- [License](#license-)
+- [Contact](#contact-)
+
+---
+
+## Why? ❓
+
+Capturing multiple images from a webcam is a common need in modern web apps, especially Progressive Web Apps (PWAs).
+Existing solutions are often:
+
+- Single-shot only (cannot capture multiple images)
+- Bloated or heavy
+- Hard to customize UI or styling
+- Not fully compatible with PWAs or mobile browsers
+
+**Problem with `<input type="file" capture>` on mobile:**  
+When you use a file input like:
+
+```html
+<input type="file" accept="image/*" capture="environment" />
+```
+
+on phones, it only allows **a single photo capture**. After you take one photo, the camera closes, and to capture another, the user must reopen the camera again.  
+This creates a poor user experience for apps needing **multi-photo sessions** (for example: KYC verification, delivery apps, or documentation workflows).
+
+---
+
+## Our Solution 💡
+
+`react-web-camera` provides a headless, platform-independent React component that gives you full control over your UI. It handles the complex logic of accessing the webcam, capturing multiple images, and managing state, while you focus on styling and user experience.
+
+This makes it:
+
+- **Lightweight** – minimal overhead for fast, responsive apps
+- **Flexible** – integrate seamlessly with your design system
+- **Multi-Image Ready** – capture and manage multiple photos in a single session
+
+---
+
+## Features ✨
+
+- **📷 Front & Back Camera Support** – Easily capture images from both cameras.
+- **🖼 Multiple Image Formats** – Export images as jpeg, png, or webp.
+- **⚡ Adjustable Capture Quality** – Control image quality with a range of 0.1–1.0.
+- **🔄 Camera Switching** – Seamlessly switch between front (user) and back (environment) cameras.
+- **📸 Multi-Image Capture** – Click and manage multiple pictures within a session on both web and mobile.
+- **🎯 Camera Ready on Mount** – Access the camera instantly when the component loads.
+- **🛠 Full Programmatic Control** – Use ref methods like capture(), switch(), and getMode().
+- **🎨 Custom Styling** – Style the container and video element to match your design system.
+
+---
+
+## Installation 📦
+
+```bash
+# If using npm
+npm install @shivantra/react-web-camera
+
+# Or with yarn
+yarn add @shivantra/react-web-camera
+
+# Or with pnpm
+pnpm add @shivantra/react-web-camera
+```
+
+---
+
+## Usage 🛠
+
+- **Basic Example**
+
+```tsx
+import React, { useRef } from "react";
+import { WebCamera, WebCameraHandler } from "@shivantra/react-web-camera";
+
+function App() {
+  const cameraHandler = useRef<WebCameraHandler>(null);
+  const [images, setImages] = useState<string[]>([]);
+
+  async function handleCapture() {
+    const file = await cameraHandler.current?.capture();
+    if (file) {
+      const base64 = await fileToBase64(file);
+      setImages((_images) => [..._images, base64]);
+    }
+  }
+
+  function handleSwitch() {
+    cameraHandler.current?.switch();
+  }
+
+  return (
+    <div>
+      <div style={{ display: "flex", gap: 5 }}>
+        <button onClick={handleCapture}>Capture</button>
+        <button onClick={handleSwitch}>Switch</button>
+      </div>
+      <div>
+        <WebCamera
+          style={{ height: 500, width: 360, padding: 10 }}
+          videoStyle={{ borderRadius: 5 }}
+          captureMode="back"
+          ref={cameraHandler}
+        />
+      </div>
+      <div style={{ display: "flex", flexWrap: "wrap", gap: 5 }}>
+        {images.map((image, ind) => (
+          <img key={ind} src={image} style={{ height: 160, width: 200 }} />
+        ))}
+      </div>
+    </div>
+  );
+}
+```
+
+- **Vite.js Example**
+
+```tsx
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { WebCamera } from "@shivantra/react-web-camera";
+
+function App() {
+  return (
+    <div>
+      <h1>📸 Vite + Webcam</h1>
+      <WebCamera
+        style={{ width: 320, height: 480, padding: 10 }}
+        videoStyle={{ borderRadius: 5 }}
+        className="camera-container"
+        videoClassName="camera-video"
+        captureMode="front"
+        captureType="png"
+        getFileName={() => `vite-photo-${Date.now()}.jpeg`}
+      />
+    </div>
+  );
+}
+
+ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
+```
+
+- **Next.js Example (App Router)**
+
+```tsx
+"use client";
+
+import { WebCamera } from "@shivantra/react-web-camera";
+
+export default function CameraPage() {
+  return (
+    <main>
+      <h1>📸 Next.js Webcam Example</h1>
+      <WebCamera
+        style={{ width: 320, height: 480, padding: 10 }}
+        videoStyle={{ borderRadius: 5 }}
+        className="camera-container"
+        videoClassName="camera-video"
+        captureMode="front"
+        getFileName={() => `next-photo-${Date.now()}.jpeg`}
+        onError={(err) => console.error(err)}
+      />
+    </main>
+  );
+}
+```
+
+- **PWA Example**
+
+```tsx
+import { WebCamera } from "@shivantra/react-web-camera";
+
+export default function PWAApp() {
+  return (
+    <div>
+      <h2>📱 PWA Webcam Ready</h2>
+      <WebCamera
+        style={{ width: 320, height: 480, padding: 10 }}
+        videoStyle={{ borderRadius: 5 }}
+        className="camera-container"
+        videoClassName="camera-video"
+        captureMode="back"
+        captureType="jpeg"
+        captureQuality={0.8}
+        getFileName={() => `pwa-photo-${Date.now()}.jpeg`}
+        onError={(err) => console.error(err)}
+      />
+    </div>
+  );
+}
+```
+
+> ✅ Works on mobile browsers and when installed as a PWA (HTTPS required for camera access).
+
+---
+
+## Props ⚙️
+
+| Prop             | Type                            | Default  | Description                                      |
+| ---------------- | ------------------------------- | -------- | ------------------------------------------------ |
+| `className`      | `string`                        | —        | CSS class for the wrapper `<div>`                |
+| `style`          | `React.CSSProperties`           | —        | Inline styles for the wrapper `<div>`            |
+| `videoClassName` | `string`                        | —        | CSS class for the `<video>` element              |
+| `videoStyle`     | `React.CSSProperties`           | —        | Inline styles for the `<video>` element          |
+| `getFileName`    | `() => string`                  | —        | Optional function to generate captured file name |
+| `captureMode`    | `"front"` \| `"back"`           | `"back"` | Initial camera mode                              |
+| `captureType`    | `"jpeg"` \| `"png"` \| `"webp"` | `"jpeg"` | Image format for capture                         |
+| `captureQuality` | `0.1`–`1.0`                     | `0.8`    | Image quality for capture                        |
+| `onError`        | `(err: Error) => void`          | —        | Callback for camera errors                       |
+
+---
+
+## Ref Methods 🖐
+
+Access these methods via `ref`:
+
+| Method      | Description                                                    |
+| ----------- | -------------------------------------------------------------- |
+| `capture()` | Captures an image from the camera and returns a `File` object. |
+| `switch()`  | Switches between front and back cameras.                       |
+| `getMode()` | Returns current camera mode: `"front"` or `"back"`.            |
+
+---
+
+## Notes ⚠️
+
+- On mobile devices, some browsers may require HTTPS to access the camera.
+- Ensure the user grants camera permissions; otherwise, the component will throw an error.
+- `videoStyle` and `style` are independent — `videoStyle` only affects the video element, `style` affects the container.
+
+---
+
+## License 📄
+
+MIT License © 2025 Shivantra Solutions Private Limited
+
+---
+
+## Contact 📧
+
+For more details about our projects, services, or any general information regarding **react-web-camera**, feel free to reach out to us. We are here to provide support and answer any questions you may have. Below are the best ways to contact our team:
+
+**Email:** Send us your inquiries or support requests at [contact@shivantra.com](mailto:contact@shivantra.com).  
+**Website:** Visit our official website for more information: [Shivantra](https://shivantra.com).
+
+**Follow us on social media for updates:**
+
+- **LinkedIn:** [Shivantra](https://www.linkedin.com/company/shivantra)
+- **Instagram:** [@Shivantra](https://www.instagram.com/shivantra/)
+- **Github:** [Shivantra](https://www.github.com/shivantra/)
+
+We look forward to assisting you and ensuring your experience with **react-web-camera** is smooth and enjoyable!

package/dist/WebCamera.d.ts

@@ -0,0 +1,21 @@
+export type CaptureType = "jpeg" | "png" | "webp";
+export type CaptureQuality = 0.1 | 0.2 | 0.3 | 0.4 | 0.5 | 0.6 | 0.7 | 0.8 | 0.9 | 1;
+export type CaptureMode = "front" | "back";
+export type FacingMode = "user" | "environment";
+export interface WebCameraProps {
+    className?: string;
+    style?: React.CSSProperties;
+    videoClassName?: string;
+    videoStyle?: React.CSSProperties;
+    getFileName?: () => string;
+    captureMode?: CaptureMode;
+    captureType?: CaptureType;
+    captureQuality?: CaptureQuality;
+    onError?: (err: Error) => void;
+}
+export type WebCameraHandler = {
+    capture: () => Promise<File | null>;
+    switch: (facingMode?: FacingMode) => Promise<void>;
+    getMode: () => CaptureMode;
+};
+export declare const WebCamera: import('react').ForwardRefExoticComponent<WebCameraProps & import('react').RefAttributes<WebCameraHandler>>;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './WebCamera';
+export { WebCamera as default } from './WebCamera';

package/dist/react-web-camera.cjs

@@ -0,0 +1,22 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react");var z={exports:{}},x={};/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var Z;function te(){if(Z)return x;Z=1;var b=Symbol.for("react.transitional.element"),h=Symbol.for("react.fragment");function k(g,o,i){var _=null;if(i!==void 0&&(_=""+i),o.key!==void 0&&(_=""+o.key),"key"in o){i={};for(var R in o)R!=="key"&&(i[R]=o[R])}else i=o;return o=i.ref,{$$typeof:b,type:g,key:_,ref:o!==void 0?o:null,props:i}}return x.Fragment=h,x.jsx=k,x.jsxs=k,x}var C={};/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var Q;function ne(){return Q||(Q=1,process.env.NODE_ENV!=="production"&&function(){function b(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===I?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case P:return"Fragment";case W:return"Profiler";case A:return"StrictMode";case t:return"Suspense";case w:return"SuspenseList";case D:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case T:return"Portal";case M:return(e.displayName||"Context")+".Provider";case N:return(e._context.displayName||"Context")+".Consumer";case a:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case u:return r=e.displayName||null,r!==null?r:b(e.type)||"Memo";case m:r=e._payload,e=e._init;try{return b(e(r))}catch{}}return null}function h(e){return""+e}function k(e){try{h(e);var r=!1}catch{r=!0}if(r){r=console;var n=r.error,s=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",s),h(e)}}function g(e){if(e===P)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===m)return"<...>";try{var r=b(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function o(){var e=O.A;return e===null?null:e.getOwner()}function i(){return Error("react-stack-top-frame")}function _(e){if(Y.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function R(e,r){function n(){G||(G=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}n.isReactWarning=!0,Object.defineProperty(e,"key",{get:n,configurable:!0})}function f(){var e=b(this.type);return J[e]||(J[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function $(e,r,n,s,p,v,L,U){return n=v.ref,e={$$typeof:y,type:e,key:r,props:v,_owner:p},(n!==void 0?n:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:f}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:L}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:U}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function d(e,r,n,s,p,v,L,U){var c=r.children;if(c!==void 0)if(s)if(ee(c)){for(s=0;s<c.length;s++)j(c[s]);Object.freeze&&Object.freeze(c)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else j(c);if(Y.call(r,"key")){c=b(e);var S=Object.keys(r).filter(function(re){return re!=="key"});s=0<S.length?"{key: someKey, "+S.join(": ..., ")+": ...}":"{key: someKey}",B[c+s]||(S=0<S.length?"{"+S.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,s,c,S,c),B[c+s]=!0)}if(c=null,n!==void 0&&(k(n),c=""+n),_(r)&&(k(r.key),c=""+r.key),"key"in r){n={};for(var V in r)V!=="key"&&(n[V]=r[V])}else n=r;return c&&R(n,typeof e=="function"?e.displayName||e.name||"Unknown":e),$(e,c,v,p,o(),n,L,U)}function j(e){typeof e=="object"&&e!==null&&e.$$typeof===y&&e._store&&(e._store.validated=1)}var E=l,y=Symbol.for("react.transitional.element"),T=Symbol.for("react.portal"),P=Symbol.for("react.fragment"),A=Symbol.for("react.strict_mode"),W=Symbol.for("react.profiler"),N=Symbol.for("react.consumer"),M=Symbol.for("react.context"),a=Symbol.for("react.forward_ref"),t=Symbol.for("react.suspense"),w=Symbol.for("react.suspense_list"),u=Symbol.for("react.memo"),m=Symbol.for("react.lazy"),D=Symbol.for("react.activity"),I=Symbol.for("react.client.reference"),O=E.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,Y=Object.prototype.hasOwnProperty,ee=Array.isArray,F=console.createTask?console.createTask:function(){return null};E={react_stack_bottom_frame:function(e){return e()}};var G,J={},X=E.react_stack_bottom_frame.bind(E,i)(),H=F(g(i)),B={};C.Fragment=P,C.jsx=function(e,r,n,s,p){var v=1e4>O.recentlyCreatedOwnerStacks++;return d(e,r,n,!1,s,p,v?Error("react-stack-top-frame"):X,v?F(g(e)):H)},C.jsxs=function(e,r,n,s,p){var v=1e4>O.recentlyCreatedOwnerStacks++;return d(e,r,n,!0,s,p,v?Error("react-stack-top-frame"):X,v?F(g(e)):H)}}()),C}process.env.NODE_ENV==="production"?z.exports=te():z.exports=ne();var q=z.exports;const ae={back:"environment",front:"user"},K=l.forwardRef(({className:b,style:h,videoClassName:k,videoStyle:g,getFileName:o,captureMode:i="back",captureType:_="jpeg",captureQuality:R=.8,onError:f},$)=>{const d=l.useRef(null),j=l.useRef(null),[E,y]=l.useState(null),[T,P]=l.useState(ae[i]),[A,W]=l.useState([]),N=l.useCallback(async()=>{const a=d.current,t=j.current;return!a||!t||a.readyState<2?null:new Promise(w=>{const u=t.getContext("2d"),m=a.videoWidth||640,D=a.videoHeight||480;t.width=m,t.height=D,u.drawImage(a,0,0,m,D);const I=`image/${_}`;t.toBlob(async O=>{if(!O)return;const Y=new File([O],(o==null?void 0:o())??`capture-${Date.now()}.${_}`,{type:I,lastModified:Date.now()});w(Y)},I,R)})},[_,R,o]),M=l.useCallback(async()=>{E&&(E.getTracks().forEach(t=>t.stop()),d.current&&(d.current.srcObject=null));const a=T==="user"?"environment":"user";P(a);try{let t;if(A.length>=2){const u=A.find(m=>a==="user"?m.label.toLowerCase().includes("front"):m.label.toLowerCase().includes("back"));t=u?{video:{deviceId:{exact:u.deviceId}}}:{video:{facingMode:{ideal:a}}}}else t={video:{facingMode:{ideal:a}}};const w=await navigator.mediaDevices.getUserMedia(t);d.current&&(d.current.srcObject=w),y(w)}catch(t){f==null||f(t)}},[E,T,A,f]);return l.useImperativeHandle($,()=>({capture:N,switch:M,getMode:()=>T==="environment"?"back":"front"}),[T,N,M]),l.useEffect(()=>{let a;const t=d.current;return(async()=>{try{const u=await navigator.mediaDevices.enumerateDevices();W(u.filter(m=>m.kind==="videoinput")),a=await navigator.mediaDevices.getUserMedia({video:{facingMode:{ideal:T}}}),t&&(t.srcObject=a,t.onloadedmetadata=()=>t==null?void 0:t.play()),y(a)}catch(u){f==null||f(u)}})(),()=>{a==null||a.getTracks().forEach(u=>u.stop()),t&&(t.srcObject=null)}},[T,f]),q.jsxs("div",{className:b,style:h,children:[q.jsx("video",{ref:d,className:k,autoPlay:!0,playsInline:!0,muted:!0,style:{...g,display:"block",objectFit:"cover",height:"100%",width:"100%"},children:"Video stream not available."}),q.jsx("canvas",{ref:j,style:{display:"none"}})]})});exports.WebCamera=K;exports.default=K;

package/dist/react-web-camera.js

@@ -0,0 +1,387 @@
+import ne, { forwardRef as ae, useRef as Z, useState as V, useCallback as Q, useImperativeHandle as oe, useEffect as se } from "react";
+var q = { exports: {} }, P = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var K;
+function ce() {
+  if (K) return P;
+  K = 1;
+  var v = Symbol.for("react.transitional.element"), g = Symbol.for("react.fragment");
+  function T(k, o, i) {
+    var b = null;
+    if (i !== void 0 && (b = "" + i), o.key !== void 0 && (b = "" + o.key), "key" in o) {
+      i = {};
+      for (var R in o)
+        R !== "key" && (i[R] = o[R]);
+    } else i = o;
+    return o = i.ref, {
+      $$typeof: v,
+      type: k,
+      key: b,
+      ref: o !== void 0 ? o : null,
+      props: i
+    };
+  }
+  return P.Fragment = g, P.jsx = T, P.jsxs = T, P;
+}
+var x = {};
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var ee;
+function ie() {
+  return ee || (ee = 1, process.env.NODE_ENV !== "production" && function() {
+    function v(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === M ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case S:
+          return "Fragment";
+        case $:
+          return "Profiler";
+        case A:
+          return "StrictMode";
+        case t:
+          return "Suspense";
+        case w:
+          return "SuspenseList";
+        case D:
+          return "Activity";
+      }
+      if (typeof e == "object")
+        switch (typeof e.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), e.$$typeof) {
+          case E:
+            return "Portal";
+          case N:
+            return (e.displayName || "Context") + ".Provider";
+          case C:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case a:
+            var r = e.render;
+            return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case l:
+            return r = e.displayName || null, r !== null ? r : v(e.type) || "Memo";
+          case d:
+            r = e._payload, e = e._init;
+            try {
+              return v(e(r));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function g(e) {
+      return "" + e;
+    }
+    function T(e) {
+      try {
+        g(e);
+        var r = !1;
+      } catch {
+        r = !0;
+      }
+      if (r) {
+        r = console;
+        var n = r.error, s = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return n.call(
+          r,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          s
+        ), g(e);
+      }
+    }
+    function k(e) {
+      if (e === S) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === d)
+        return "<...>";
+      try {
+        var r = v(e);
+        return r ? "<" + r + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function o() {
+      var e = h.A;
+      return e === null ? null : e.getOwner();
+    }
+    function i() {
+      return Error("react-stack-top-frame");
+    }
+    function b(e) {
+      if (I.call(e, "key")) {
+        var r = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (r && r.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function R(e, r) {
+      function n() {
+        G || (G = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          r
+        ));
+      }
+      n.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: n,
+        configurable: !0
+      });
+    }
+    function u() {
+      var e = v(this.type);
+      return J[e] || (J[e] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), e = this.props.ref, e !== void 0 ? e : null;
+    }
+    function Y(e, r, n, s, p, m, L, U) {
+      return n = m.ref, e = {
+        $$typeof: y,
+        type: e,
+        key: r,
+        props: m,
+        _owner: p
+      }, (n !== void 0 ? n : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: u
+      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(e, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(e, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: L
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: U
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function f(e, r, n, s, p, m, L, U) {
+      var c = r.children;
+      if (c !== void 0)
+        if (s)
+          if (re(c)) {
+            for (s = 0; s < c.length; s++)
+              j(c[s]);
+            Object.freeze && Object.freeze(c);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else j(c);
+      if (I.call(r, "key")) {
+        c = v(e);
+        var O = Object.keys(r).filter(function(te) {
+          return te !== "key";
+        });
+        s = 0 < O.length ? "{key: someKey, " + O.join(": ..., ") + ": ...}" : "{key: someKey}", B[c + s] || (O = 0 < O.length ? "{" + O.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          s,
+          c,
+          O,
+          c
+        ), B[c + s] = !0);
+      }
+      if (c = null, n !== void 0 && (T(n), c = "" + n), b(r) && (T(r.key), c = "" + r.key), "key" in r) {
+        n = {};
+        for (var W in r)
+          W !== "key" && (n[W] = r[W]);
+      } else n = r;
+      return c && R(
+        n,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), Y(
+        e,
+        c,
+        m,
+        p,
+        o(),
+        n,
+        L,
+        U
+      );
+    }
+    function j(e) {
+      typeof e == "object" && e !== null && e.$$typeof === y && e._store && (e._store.validated = 1);
+    }
+    var _ = ne, y = Symbol.for("react.transitional.element"), E = Symbol.for("react.portal"), S = Symbol.for("react.fragment"), A = Symbol.for("react.strict_mode"), $ = Symbol.for("react.profiler"), C = Symbol.for("react.consumer"), N = Symbol.for("react.context"), a = Symbol.for("react.forward_ref"), t = Symbol.for("react.suspense"), w = Symbol.for("react.suspense_list"), l = Symbol.for("react.memo"), d = Symbol.for("react.lazy"), D = Symbol.for("react.activity"), M = Symbol.for("react.client.reference"), h = _.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, I = Object.prototype.hasOwnProperty, re = Array.isArray, F = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    _ = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var G, J = {}, X = _.react_stack_bottom_frame.bind(
+      _,
+      i
+    )(), H = F(k(i)), B = {};
+    x.Fragment = S, x.jsx = function(e, r, n, s, p) {
+      var m = 1e4 > h.recentlyCreatedOwnerStacks++;
+      return f(
+        e,
+        r,
+        n,
+        !1,
+        s,
+        p,
+        m ? Error("react-stack-top-frame") : X,
+        m ? F(k(e)) : H
+      );
+    }, x.jsxs = function(e, r, n, s, p) {
+      var m = 1e4 > h.recentlyCreatedOwnerStacks++;
+      return f(
+        e,
+        r,
+        n,
+        !0,
+        s,
+        p,
+        m ? Error("react-stack-top-frame") : X,
+        m ? F(k(e)) : H
+      );
+    };
+  }()), x;
+}
+process.env.NODE_ENV === "production" ? q.exports = ce() : q.exports = ie();
+var z = q.exports;
+const le = {
+  back: "environment",
+  front: "user"
+}, fe = ae(
+  ({
+    className: v,
+    style: g,
+    videoClassName: T,
+    videoStyle: k,
+    getFileName: o,
+    captureMode: i = "back",
+    captureType: b = "jpeg",
+    captureQuality: R = 0.8,
+    onError: u
+  }, Y) => {
+    const f = Z(null), j = Z(null), [_, y] = V(null), [E, S] = V(
+      le[i]
+    ), [A, $] = V([]), C = Q(async () => {
+      const a = f.current, t = j.current;
+      return !a || !t || a.readyState < 2 ? null : new Promise((w) => {
+        const l = t.getContext("2d"), d = a.videoWidth || 640, D = a.videoHeight || 480;
+        t.width = d, t.height = D, l.drawImage(a, 0, 0, d, D);
+        const M = `image/${b}`;
+        t.toBlob(
+          async (h) => {
+            if (!h) return;
+            const I = new File(
+              [h],
+              (o == null ? void 0 : o()) ?? `capture-${Date.now()}.${b}`,
+              {
+                type: M,
+                lastModified: Date.now()
+              }
+            );
+            w(I);
+          },
+          M,
+          R
+        );
+      });
+    }, [b, R, o]), N = Q(async () => {
+      _ && (_.getTracks().forEach((t) => t.stop()), f.current && (f.current.srcObject = null));
+      const a = E === "user" ? "environment" : "user";
+      S(a);
+      try {
+        let t;
+        if (A.length >= 2) {
+          const l = A.find(
+            (d) => a === "user" ? d.label.toLowerCase().includes("front") : d.label.toLowerCase().includes("back")
+          );
+          t = l ? { video: { deviceId: { exact: l.deviceId } } } : { video: { facingMode: { ideal: a } } };
+        } else
+          t = { video: { facingMode: { ideal: a } } };
+        const w = await navigator.mediaDevices.getUserMedia(t);
+        f.current && (f.current.srcObject = w), y(w);
+      } catch (t) {
+        u == null || u(t);
+      }
+    }, [_, E, A, u]);
+    return oe(
+      Y,
+      () => ({
+        capture: C,
+        switch: N,
+        getMode: () => E === "environment" ? "back" : "front"
+      }),
+      [E, C, N]
+    ), se(() => {
+      let a;
+      const t = f.current;
+      return (async () => {
+        try {
+          const l = await navigator.mediaDevices.enumerateDevices();
+          $(l.filter((d) => d.kind === "videoinput")), a = await navigator.mediaDevices.getUserMedia({
+            video: { facingMode: { ideal: E } }
+          }), t && (t.srcObject = a, t.onloadedmetadata = () => t == null ? void 0 : t.play()), y(a);
+        } catch (l) {
+          u == null || u(l);
+        }
+      })(), () => {
+        a == null || a.getTracks().forEach((l) => l.stop()), t && (t.srcObject = null);
+      };
+    }, [E, u]), /* @__PURE__ */ z.jsxs("div", { className: v, style: g, children: [
+      /* @__PURE__ */ z.jsx(
+        "video",
+        {
+          ref: f,
+          className: T,
+          autoPlay: !0,
+          playsInline: !0,
+          muted: !0,
+          style: {
+            ...k,
+            display: "block",
+            objectFit: "cover",
+            height: "100%",
+            width: "100%"
+          },
+          children: "Video stream not available."
+        }
+      ),
+      /* @__PURE__ */ z.jsx("canvas", { ref: j, style: { display: "none" } })
+    ] });
+  }
+);
+export {
+  fe as WebCamera,
+  fe as default
+};

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@shivantra/react-web-camera",
+  "version": "1.0.0",
+  "description": "Web camera component for React (by Shivantra)",
+  "license": "MIT",
+  "sideEffects": false,
+  "type": "module",
+  "main": "./dist/react-web-camera.cjs",
+  "module": "./dist/react-web-camera.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/react-web-camera.js",
+      "require": "./dist/react-web-camera.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "keywords": [
+    "react",
+    "camera",
+    "webcam",
+    "media-devices",
+    "components",
+    "shivantra"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "typecheck": "tsc --noEmit",
+    "clean": "rimraf dist",
+    "prepublishOnly": "npm run clean && npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=17 || >=18",
+    "react-dom": ">=17 || >=18"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "rimraf": "^6.0.0",
+    "typescript": "^5.4.0",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^3.7.0"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/shivantra/react-web-camera.git"
+  },
+  "bugs": {
+    "url": "https://github.com/shivantra/react-web-camera/issues"
+  },
+  "author": {
+    "name": "Shivantra",
+    "email": "contact@shivantra.com",
+    "url": "https://shivantra.com"
+  }
+}