@shivantra/react-web-camera 1.0.0 → 1.1.0

package/README.md

@@ -1,8 +1,8 @@
-# WebCamera React Component 📸
+# React Web Camera
 
 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
+## Table of Contents
 
 - [Why?](#why-)
 - [Our Solution](#our-solution-)
@@ -21,7 +21,7 @@ A lightweight and flexible React component for capturing images from the user’
 
 ---
 
-## Why? ❓
+## Why?
 
 Capturing multiple images from a webcam is a common need in modern web apps, especially Progressive Web Apps (PWAs).
 Existing solutions are often:
@@ -43,7 +43,7 @@ This creates a poor user experience for apps needing **multi-photo sessions** (f
 
 ---
 
-## Our Solution 💡
+## 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.
 
@@ -55,7 +55,7 @@ This makes it:
 
 ---
 
-## Features ✨
+## Features
 
 - **📷 Front & Back Camera Support** – Easily capture images from both cameras.
 - **🖼 Multiple Image Formats** – Export images as jpeg, png, or webp.
@@ -68,22 +68,26 @@ This makes it:
 
 ---
 
-## Installation 📦
+## Installation
 
 ```bash
 # If using npm
 npm install @shivantra/react-web-camera
+```
 
+```bash
 # Or with yarn
 yarn add @shivantra/react-web-camera
+```
 
+```bash
 # Or with pnpm
 pnpm add @shivantra/react-web-camera
 ```
 
 ---
 
-## Usage 🛠
+## Usage
 
 - **Basic Example**
 
@@ -228,7 +232,7 @@ export default function PWAApp() {
 
 ---
 
-## Ref Methods 🖐
+## Ref Methods
 
 Access these methods via `ref`:
 
@@ -240,7 +244,7 @@ Access these methods via `ref`:
 
 ---
 
-## Notes ⚠️
+## 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.
@@ -248,13 +252,13 @@ Access these methods via `ref`:
 
 ---
 
-## License 📄
+## License
 
 MIT License © 2025 Shivantra Solutions Private Limited
 
 ---
 
-## Contact 📧
+## 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:
 

package/dist/WebCamera.d.ts

@@ -17,5 +17,6 @@ export type WebCameraHandler = {
     capture: () => Promise<File | null>;
     switch: (facingMode?: FacingMode) => Promise<void>;
     getMode: () => CaptureMode;
+    stop: () => void;
 };
 export declare const WebCamera: import('react').ForwardRefExoticComponent<WebCameraProps & import('react').RefAttributes<WebCameraHandler>>;

package/dist/react-web-camera.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react");var z={exports:{}},x={};/**
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react");var G={exports:{}},N={};/**
  * @license React
  * react-jsx-runtime.production.js
  *
@@ -6,7 +6,7 @@
  *
  * 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={};/**
+ */var Q;function te(){if(Q)return N;Q=1;var v=Symbol.for("react.transitional.element"),h=Symbol.for("react.fragment");function k(g,o,l){var b=null;if(l!==void 0&&(b=""+l),o.key!==void 0&&(b=""+o.key),"key"in o){l={};for(var R in o)R!=="key"&&(l[R]=o[R])}else l=o;return o=l.ref,{$$typeof:v,type:g,key:b,ref:o!==void 0?o:null,props:l}}return N.Fragment=h,N.jsx=k,N.jsxs=k,N}var M={};/**
  * @license React
  * react-jsx-runtime.development.js
  *
@@ -14,9 +14,9 @@
  *
  * 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:
+ */var K;function ne(){return K||(K=1,process.env.NODE_ENV!=="production"&&function(){function v(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===Y?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case A:return"Fragment";case W:return"Profiler";case x:return"StrictMode";case a:return"Suspense";case n:return"SuspenseList";case _: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 p:return"Portal";case O:return(e.displayName||"Context")+".Provider";case D:return(e._context.displayName||"Context")+".Consumer";case I:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case w:return r=e.displayName||null,r!==null?r:v(e.type)||"Memo";case i:r=e._payload,e=e._init;try{return v(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 t=r.error,s=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t.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===A)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===i)return"<...>";try{var r=v(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function o(){var e=S.A;return e===null?null:e.getOwner()}function l(){return Error("react-stack-top-frame")}function b(e){if(C.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 t(){J||(J=!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))}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}function f(){var e=v(this.type);return X[e]||(X[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,t,s,T,m,U,V){return t=m.ref,e={$$typeof:P,type:e,key:r,props:m,_owner:T},(t!==void 0?t: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:U}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:V}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function d(e,r,t,s,T,m,U,V){var c=r.children;if(c!==void 0)if(s)if(F(c)){for(s=0;s<c.length;s++)y(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 y(c);if(C.call(r,"key")){c=v(e);var j=Object.keys(r).filter(function(re){return re!=="key"});s=0<j.length?"{key: someKey, "+j.join(": ..., ")+": ...}":"{key: someKey}",Z[c+s]||(j=0<j.length?"{"+j.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;
+  <%s key={someKey} {...props} />`,s,c,j,c),Z[c+s]=!0)}if(c=null,t!==void 0&&(k(t),c=""+t),b(r)&&(k(r.key),c=""+r.key),"key"in r){t={};for(var q in r)q!=="key"&&(t[q]=r[q])}else t=r;return c&&R(t,typeof e=="function"?e.displayName||e.name||"Unknown":e),$(e,c,m,T,o(),t,U,V)}function y(e){typeof e=="object"&&e!==null&&e.$$typeof===P&&e._store&&(e._store.validated=1)}var E=u,P=Symbol.for("react.transitional.element"),p=Symbol.for("react.portal"),A=Symbol.for("react.fragment"),x=Symbol.for("react.strict_mode"),W=Symbol.for("react.profiler"),D=Symbol.for("react.consumer"),O=Symbol.for("react.context"),I=Symbol.for("react.forward_ref"),a=Symbol.for("react.suspense"),n=Symbol.for("react.suspense_list"),w=Symbol.for("react.memo"),i=Symbol.for("react.lazy"),_=Symbol.for("react.activity"),Y=Symbol.for("react.client.reference"),S=E.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,C=Object.prototype.hasOwnProperty,F=Array.isArray,L=console.createTask?console.createTask:function(){return null};E={react_stack_bottom_frame:function(e){return e()}};var J,X={},H=E.react_stack_bottom_frame.bind(E,l)(),B=L(g(l)),Z={};M.Fragment=A,M.jsx=function(e,r,t,s,T){var m=1e4>S.recentlyCreatedOwnerStacks++;return d(e,r,t,!1,s,T,m?Error("react-stack-top-frame"):H,m?L(g(e)):B)},M.jsxs=function(e,r,t,s,T){var m=1e4>S.recentlyCreatedOwnerStacks++;return d(e,r,t,!0,s,T,m?Error("react-stack-top-frame"):H,m?L(g(e)):B)}}()),M}process.env.NODE_ENV==="production"?G.exports=te():G.exports=ne();var z=G.exports;const ae={back:"environment",front:"user"},ee=u.forwardRef(({className:v,style:h,videoClassName:k,videoStyle:g,getFileName:o,captureMode:l="back",captureType:b="jpeg",captureQuality:R=.8,onError:f},$)=>{const d=u.useRef(null),y=u.useRef(null),[E,P]=u.useState(null),[p,A]=u.useState(ae[l]),[x,W]=u.useState([]),D=u.useCallback(async()=>{const a=d.current,n=y.current;return!a||!n||a.readyState<2?null:new Promise(w=>{const i=n.getContext("2d"),_=a.videoWidth||640,Y=a.videoHeight||480;n.width=_,n.height=Y,i.drawImage(a,0,0,_,Y);const S=`image/${b}`;n.toBlob(async C=>{if(!C)return;const F=new File([C],(o==null?void 0:o())??`capture-${Date.now()}.${b}`,{type:S,lastModified:Date.now()});w(F)},S,R)})},[b,R,o]),O=u.useCallback(()=>{E&&(E.getTracks().forEach(a=>a.stop()),d.current&&(d.current.srcObject=null))},[E]),I=u.useCallback(async()=>{O();const a=p==="user"?"environment":"user";A(a);try{let n;if(x.length>=2){const i=x.find(_=>a==="user"?_.label.toLowerCase().includes("front"):_.label.toLowerCase().includes("back"));n=i?{video:{deviceId:{exact:i.deviceId}}}:{video:{facingMode:{ideal:a}}}}else n={video:{facingMode:{ideal:a}}};const w=await navigator.mediaDevices.getUserMedia(n);d.current&&(d.current.srcObject=w),P(w)}catch(n){f==null||f(n)}},[O,p,x,f]);return u.useImperativeHandle($,()=>({capture:D,stop:O,switch:I,getMode:()=>p==="environment"?"back":"front"}),[p,D,O,I]),u.useEffect(()=>{let a;const n=d.current;return(async()=>{try{const i=await navigator.mediaDevices.enumerateDevices();W(i.filter(_=>_.kind==="videoinput")),a=await navigator.mediaDevices.getUserMedia({video:{facingMode:{ideal:p}}}),n&&(n.srcObject=a,n.onloadedmetadata=()=>n==null?void 0:n.play()),P(a)}catch(i){f==null||f(i)}})(),()=>{a==null||a.getTracks().forEach(i=>i.stop()),n&&(n.srcObject=null)}},[p,f]),z.jsxs("div",{className:v,style:h,children:[z.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."}),z.jsx("canvas",{ref:y,style:{display:"none"}})]})});exports.WebCamera=ee;exports.default=ee;

package/dist/react-web-camera.js

@@ -1,5 +1,5 @@
-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 = {};
+import ne, { forwardRef as ae, useRef as K, useState as z, useCallback as q, useImperativeHandle as oe, useEffect as se } from "react";
+var J = { exports: {} }, C = {};
 /**
  * @license React
  * react-jsx-runtime.production.js
@@ -9,29 +9,29 @@ var q = { exports: {} }, P = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var K;
+var ee;
 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 = {};
+  if (ee) return C;
+  ee = 1;
+  var m = Symbol.for("react.transitional.element"), g = Symbol.for("react.fragment");
+  function T(k, o, l) {
+    var v = null;
+    if (l !== void 0 && (v = "" + l), o.key !== void 0 && (v = "" + o.key), "key" in o) {
+      l = {};
       for (var R in o)
-        R !== "key" && (i[R] = o[R]);
-    } else i = o;
-    return o = i.ref, {
-      $$typeof: v,
+        R !== "key" && (l[R] = o[R]);
+    } else l = o;
+    return o = l.ref, {
+      $$typeof: m,
       type: k,
-      key: b,
+      key: v,
       ref: o !== void 0 ? o : null,
-      props: i
+      props: l
     };
   }
-  return P.Fragment = g, P.jsx = T, P.jsxs = T, P;
+  return C.Fragment = g, C.jsx = T, C.jsxs = T, C;
 }
-var x = {};
+var N = {};
 /**
  * @license React
  * react-jsx-runtime.development.js
@@ -41,26 +41,26 @@ var x = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var ee;
+var re;
 function ie() {
-  return ee || (ee = 1, process.env.NODE_ENV !== "production" && function() {
-    function v(e) {
+  return re || (re = 1, process.env.NODE_ENV !== "production" && function() {
+    function m(e) {
       if (e == null) return null;
       if (typeof e == "function")
-        return e.$$typeof === M ? null : e.displayName || e.name || null;
+        return e.$$typeof === I ? null : e.displayName || e.name || null;
       if (typeof e == "string") return e;
       switch (e) {
-        case S:
+        case A:
           return "Fragment";
         case $:
           return "Profiler";
-        case A:
+        case P:
           return "StrictMode";
-        case t:
+        case a:
           return "Suspense";
-        case w:
+        case n:
           return "SuspenseList";
-        case D:
+        case b:
           return "Activity";
       }
       if (typeof e == "object")
@@ -69,19 +69,19 @@ function ie() {
         ), e.$$typeof) {
           case E:
             return "Portal";
-          case N:
+          case h:
             return (e.displayName || "Context") + ".Provider";
-          case C:
+          case D:
             return (e._context.displayName || "Context") + ".Consumer";
-          case a:
+          case M:
             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:
+          case w:
+            return r = e.displayName || null, r !== null ? r : m(e.type) || "Memo";
+          case i:
             r = e._payload, e = e._init;
             try {
-              return v(e(r));
+              return m(e(r));
             } catch {
             }
         }
@@ -99,8 +99,8 @@ function ie() {
       }
       if (r) {
         r = console;
-        var n = r.error, s = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
-        return n.call(
+        var t = r.error, s = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return t.call(
           r,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
           s
@@ -108,56 +108,56 @@ function ie() {
       }
     }
     function k(e) {
-      if (e === S) return "<>";
-      if (typeof e == "object" && e !== null && e.$$typeof === d)
+      if (e === A) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === i)
         return "<...>";
       try {
-        var r = v(e);
+        var r = m(e);
         return r ? "<" + r + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
     function o() {
-      var e = h.A;
+      var e = O.A;
       return e === null ? null : e.getOwner();
     }
-    function i() {
+    function l() {
       return Error("react-stack-top-frame");
     }
-    function b(e) {
-      if (I.call(e, "key")) {
+    function v(e) {
+      if (x.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(
+      function t() {
+        X || (X = !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,
+      t.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: t,
         configurable: !0
       });
     }
     function u() {
-      var e = v(this.type);
-      return J[e] || (J[e] = !0, console.error(
+      var e = m(this.type);
+      return H[e] || (H[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,
+    function Y(e, r, t, s, p, d, U, W) {
+      return t = d.ref, e = {
+        $$typeof: S,
         type: e,
         key: r,
-        props: m,
+        props: d,
         _owner: p
-      }, (n !== void 0 ? n : null) !== null ? Object.defineProperty(e, "ref", {
+      }, (t !== void 0 ? t : 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", {
@@ -174,33 +174,33 @@ function ie() {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: L
+        value: U
       }), Object.defineProperty(e, "_debugTask", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: U
+        value: W
       }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
     }
-    function f(e, r, n, s, p, m, L, U) {
+    function f(e, r, t, s, p, d, U, W) {
       var c = r.children;
       if (c !== void 0)
         if (s)
-          if (re(c)) {
+          if (F(c)) {
             for (s = 0; s < c.length; s++)
-              j(c[s]);
+              y(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) {
+        else y(c);
+      if (x.call(r, "key")) {
+        c = m(e);
+        var j = 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(
+        s = 0 < j.length ? "{key: someKey, " + j.join(": ..., ") + ": ...}" : "{key: someKey}", Q[c + s] || (j = 0 < j.length ? "{" + j.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
@@ -209,33 +209,33 @@ React keys must be passed directly to JSX without using spread:
   <%s key={someKey} {...props} />`,
           s,
           c,
-          O,
+          j,
           c
-        ), B[c + s] = !0);
+        ), Q[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;
+      if (c = null, t !== void 0 && (T(t), c = "" + t), v(r) && (T(r.key), c = "" + r.key), "key" in r) {
+        t = {};
+        for (var V in r)
+          V !== "key" && (t[V] = r[V]);
+      } else t = r;
       return c && R(
-        n,
+        t,
         typeof e == "function" ? e.displayName || e.name || "Unknown" : e
       ), Y(
         e,
         c,
-        m,
+        d,
         p,
         o(),
-        n,
-        L,
-        U
+        t,
+        U,
+        W
       );
     }
-    function j(e) {
-      typeof e == "object" && e !== null && e.$$typeof === y && e._store && (e._store.validated = 1);
+    function y(e) {
+      typeof e == "object" && e !== null && e.$$typeof === S && 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() {
+    var _ = ne, S = Symbol.for("react.transitional.element"), E = Symbol.for("react.portal"), A = Symbol.for("react.fragment"), P = Symbol.for("react.strict_mode"), $ = Symbol.for("react.profiler"), D = Symbol.for("react.consumer"), h = Symbol.for("react.context"), M = Symbol.for("react.forward_ref"), a = Symbol.for("react.suspense"), n = Symbol.for("react.suspense_list"), w = Symbol.for("react.memo"), i = Symbol.for("react.lazy"), b = Symbol.for("react.activity"), I = Symbol.for("react.client.reference"), O = _.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, x = Object.prototype.hasOwnProperty, F = Array.isArray, L = console.createTask ? console.createTask : function() {
       return null;
     };
     _ = {
@@ -243,123 +243,126 @@ React keys must be passed directly to JSX without using spread:
         return e();
       }
     };
-    var G, J = {}, X = _.react_stack_bottom_frame.bind(
+    var X, H = {}, B = _.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++;
+      l
+    )(), Z = L(k(l)), Q = {};
+    N.Fragment = A, N.jsx = function(e, r, t, s, p) {
+      var d = 1e4 > O.recentlyCreatedOwnerStacks++;
       return f(
         e,
         r,
-        n,
+        t,
         !1,
         s,
         p,
-        m ? Error("react-stack-top-frame") : X,
-        m ? F(k(e)) : H
+        d ? Error("react-stack-top-frame") : B,
+        d ? L(k(e)) : Z
       );
-    }, x.jsxs = function(e, r, n, s, p) {
-      var m = 1e4 > h.recentlyCreatedOwnerStacks++;
+    }, N.jsxs = function(e, r, t, s, p) {
+      var d = 1e4 > O.recentlyCreatedOwnerStacks++;
       return f(
         e,
         r,
-        n,
+        t,
         !0,
         s,
         p,
-        m ? Error("react-stack-top-frame") : X,
-        m ? F(k(e)) : H
+        d ? Error("react-stack-top-frame") : B,
+        d ? L(k(e)) : Z
       );
     };
-  }()), x;
+  }()), N;
 }
-process.env.NODE_ENV === "production" ? q.exports = ce() : q.exports = ie();
-var z = q.exports;
+process.env.NODE_ENV === "production" ? J.exports = ce() : J.exports = ie();
+var G = J.exports;
 const le = {
   back: "environment",
   front: "user"
 }, fe = ae(
   ({
-    className: v,
+    className: m,
     style: g,
     videoClassName: T,
     videoStyle: k,
     getFileName: o,
-    captureMode: i = "back",
-    captureType: b = "jpeg",
+    captureMode: l = "back",
+    captureType: v = "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}`,
+    const f = K(null), y = K(null), [_, S] = z(null), [E, A] = z(
+      le[l]
+    ), [P, $] = z([]), D = q(async () => {
+      const a = f.current, n = y.current;
+      return !a || !n || a.readyState < 2 ? null : new Promise((w) => {
+        const i = n.getContext("2d"), b = a.videoWidth || 640, I = a.videoHeight || 480;
+        n.width = b, n.height = I, i.drawImage(a, 0, 0, b, I);
+        const O = `image/${v}`;
+        n.toBlob(
+          async (x) => {
+            if (!x) return;
+            const F = new File(
+              [x],
+              (o == null ? void 0 : o()) ?? `capture-${Date.now()}.${v}`,
               {
-                type: M,
+                type: O,
                 lastModified: Date.now()
               }
             );
-            w(I);
+            w(F);
           },
-          M,
+          O,
           R
         );
       });
-    }, [b, R, o]), N = Q(async () => {
-      _ && (_.getTracks().forEach((t) => t.stop()), f.current && (f.current.srcObject = null));
+    }, [v, R, o]), h = q(() => {
+      _ && (_.getTracks().forEach((a) => a.stop()), f.current && (f.current.srcObject = null));
+    }, [_]), M = q(async () => {
+      h();
       const a = E === "user" ? "environment" : "user";
-      S(a);
+      A(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")
+        let n;
+        if (P.length >= 2) {
+          const i = P.find(
+            (b) => a === "user" ? b.label.toLowerCase().includes("front") : b.label.toLowerCase().includes("back")
           );
-          t = l ? { video: { deviceId: { exact: l.deviceId } } } : { video: { facingMode: { ideal: a } } };
+          n = i ? { video: { deviceId: { exact: i.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);
+          n = { video: { facingMode: { ideal: a } } };
+        const w = await navigator.mediaDevices.getUserMedia(n);
+        f.current && (f.current.srcObject = w), S(w);
+      } catch (n) {
+        u == null || u(n);
       }
-    }, [_, E, A, u]);
+    }, [h, E, P, u]);
     return oe(
       Y,
       () => ({
-        capture: C,
-        switch: N,
+        capture: D,
+        stop: h,
+        switch: M,
         getMode: () => E === "environment" ? "back" : "front"
       }),
-      [E, C, N]
+      [E, D, h, M]
     ), se(() => {
       let a;
-      const t = f.current;
+      const n = f.current;
       return (async () => {
         try {
-          const l = await navigator.mediaDevices.enumerateDevices();
-          $(l.filter((d) => d.kind === "videoinput")), a = await navigator.mediaDevices.getUserMedia({
+          const i = await navigator.mediaDevices.enumerateDevices();
+          $(i.filter((b) => b.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);
+          }), n && (n.srcObject = a, n.onloadedmetadata = () => n == null ? void 0 : n.play()), S(a);
+        } catch (i) {
+          u == null || u(i);
         }
       })(), () => {
-        a == null || a.getTracks().forEach((l) => l.stop()), t && (t.srcObject = null);
+        a == null || a.getTracks().forEach((i) => i.stop()), n && (n.srcObject = null);
       };
-    }, [E, u]), /* @__PURE__ */ z.jsxs("div", { className: v, style: g, children: [
-      /* @__PURE__ */ z.jsx(
+    }, [E, u]), /* @__PURE__ */ G.jsxs("div", { className: m, style: g, children: [
+      /* @__PURE__ */ G.jsx(
         "video",
         {
           ref: f,
@@ -377,7 +380,7 @@ const le = {
           children: "Video stream not available."
         }
       ),
-      /* @__PURE__ */ z.jsx("canvas", { ref: j, style: { display: "none" } })
+      /* @__PURE__ */ G.jsx("canvas", { ref: y, style: { display: "none" } })
     ] });
   }
 );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shivantra/react-web-camera",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Web camera component for React (by Shivantra)",
   "license": "MIT",
   "sideEffects": false,