@webcam/react 1.0.1 → 1.1.1

package/README.md

@@ -1,130 +1,81 @@
-# 📸 Webcam React
-
-Ultimate tool for working with media stream in your React application
-
-## References
-
-- [**Demo**](https://react-webcam-ultimate.vercel.app/en/react)
-- [**Web API**](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia)
-- [**Browser Сompatibility**](https://caniuse.com/stream)
-
-## Installation
-
-Install with [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/)
-
-```shell
-npm i @webcam/react
-# or
-yarn add @webcam/react
-```
-
-## 🦉 Philosophy
-
-📸 **Webcam React** is a package that includes ready-made solutions for common cases of setting up and using a media stream from your webcam using Web API. Our goal is to create simple and flexible tools that allow users to create, test and maintain their products.
-
-## Features
-
-- TypeScript support out of the box - full typed package
-- Webcam Snapshots - creating an image from a video stream
-- Media Stream Handling - request, errors, update, stop, etc
-- Advanced Video Settings - selecting camera type and resolution
-- Legacy API Support - outdated implementations for each browser
-- React Apps Support - component and hooks for working with playing a media stream
-
-## Usage
-
-```jsx
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { Webcam } from '@webcam/react';
-
-const App = () => (
-  <Webcam />
-);
-
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(<App/>);
-```
-
-### How to get webcam snapshot
-
-Returns a base64 encoded string of the current video stream frame in the specified format and quality.
-
-```jsx
-import { Webcam } from '@webcam/react';
-
-const YourComponent = () => (
-  <Webcam mirrored>
-    {({ getSnapshot }) => (
-      <button onClick={() => getSnapshot({ quality: 0.8 })}>
-        Make photo
-      </button>
-    )}
-  </Webcam>
-);
-```
-
-## API
-
-You can pass any supported [properties](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video) to the underlying video tag (eg `autoPlay`, `className`, etc). However, for convenience, the component uses its own values for these properties, but you can reassign them without any problems:
-| **Prop**                  | **Type** | **Default**  | **Note**                                                                                |
-| ------------------------- | -------- | ------------ | --------------------------------------------------------------------------------------- |
-| muted                     | boolean  | true         | excludes audio constraints from the MediaStream request                                 |
-| autoPlay                  | boolean  | true         |                                                                                         |
-| playsInline               | boolean  | true         |                                                                                         |
-| controls                  | boolean  | false        |                                                                                         |
-
-The component also supports many properties for more specific work:
-| **Prop**                  | **Type** | **Default**  | **Note**                                                                                |
-| ------------------------- | -------- | ------------ | --------------------------------------------------------------------------------------- |
-| mirrored                  | boolean  | false        | show camera preview and get the screenshot mirrored                                     |
-| mainCamera       | boolean \| object | false        | should use a main camera (requires Navigator.mediaDevices.enumerateDevices)             |
-| frontCamera               | boolean  | false        | should use a front camera (MediaTrackConstraints['facingFront'] === 'user')             |
-| applyConstraints          | boolean  | false        | should new constraints be applied to the media stream                                   |
-| cameraResolutionMode      | string   | 'ideal'      | video track resolution mode - `('min' \| 'max' \| 'ideal' \| 'exact')`                  |
-| cameraResolutionType      | string   |              | video track resolution size - `('UHD' \| 'QHD' \| 'FHD' \| 'HD')`                       |
-| requestTimeLimit          | number   |              | limiting the media stream request by time                                               |
-| onStreamRequest           | function |              | callback for when component requests a media stream                                     |
-| onStreamStart             | function |              | callback for when component starts a media stream                                       |
-| onStreamStop              | function |              | callback for when component stops a media stream                                        |
-| onStreamError             | function |              | callback for when component can't receive a media stream                                |
-| audioConstraints          | object   ||[MediaStreamConstraints['audio']](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints)|
-| videoConstraints          | object   ||[MediaStreamConstraints['video']](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints)|
-| stream                    | object   ||external [MediaStream](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream) (turns off internal media stream handling logic)|
-
-## ✨ Contributors
-
-<table>
-  <tr>
-    <td align="center" style="word-wrap: break-word; width: 100; height: 100">
-        <a href="https://github.com/michael-mir">
-            <img src="https://avatars.githubusercontent.com/u/88126915?v=4"
-            width="100;"  
-            alt="michael-mir" />
-            <br />
-            <sub style="font-size:13px"><b>🌶️ michael-mir</b></sub>
-        </a>
-    </td>
-    <td align="center" style="word-wrap: break-word; width: 100; height: 100">
-        <a href="https://github.com/debabin">
-            <img src="https://avatars.githubusercontent.com/u/45297354?v=4"
-            width="100;"  
-            alt="debabin" />
-            <br />
-            <sub style="font-size:13px"><b>🧊 debabin</b></sub>
-        </a>
-    </td>
-    <td align="center" style="word-wrap: break-word; width: 100.0; height: 100.0">
-        <a href="https://github.com/RiceWithMeat">
-            <img src="https://avatars.githubusercontent.com/u/47690223?v=4"
-            width="100;"  
-            alt="RiceWithMeat" />
-            <br />
-            <sub style="font-size:13px"><b>🐘 RiceWithMeat</b></sub>
-        </a>
-    </td>
-  </tr>
-</table>
-
-
-
+<div align="center">
+  <h1>Webcam React</h1>
+
+<a href="https://www.npmjs.com/package/@webcam/react"><img alt="NPM version" src="https://img.shields.io/npm/v/@webcam/react.svg?style=for-the-badge&labelColor=000000"></a>
+<a href="https://github.com/siberiacancode/webcam/blob/main/LICENSE"><img alt="License" src="https://img.shields.io/npm/l/@webcam/react.svg?style=for-the-badge&labelColor=000000"></a>
+<a href="https://siberiacancode.github.io/reactuse/"><img alt="reactuse" src="https://img.shields.io/badge/reactuse-blueviolet.svg?style=for-the-badge&logo=npm&labelColor=000000&logoWidth=20"></a>
+<a href="https://github.com/siberiacancode/webcam/discussions"><img alt="Join the community on GitHub" src="https://img.shields.io/badge/Join%20the%20community-blueviolet.svg?style=for-the-badge&logo=React&labelColor=000000&logoWidth=20"></a>
+
+</div>
+
+Webcam React is a powerful library that provides easy integration of webcam and media stream features into your React applications. Built with **TypeScript-first** approach, **SSR compatibility**, and **tree-shaking optimization** - everything you need to request, display, and manage camera streams in a modern React app.
+
+## Supported Features
+
+- **Live webcam preview** - render media streams with a simple React component
+- **Snapshots** - capture the current frame as base64 image data
+- **Constraint controls** - configure camera source, resolution, facing mode, and more
+- **Stream lifecycle hooks** - react to request, start, stop, and error events
+- **External stream support** - attach an existing `MediaStream` when needed
+
+## Documentation
+
+Visit https://react-webcam-ultimate.vercel.app/en/react to view the full documentation.
+
+## Getting Started
+
+```bash
+npm install @webcam/react
+```
+
+```tsx
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { Webcam } from '@webcam/react';
+
+const App = () => (
+  <Webcam
+    mirrored
+    cameraResolutionType='FHD'
+    onStreamError={(error) => console.error(error)}
+  />
+);
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+```
+
+Create a component to use webcam snapshots:
+
+```tsx
+import { Webcam } from '@webcam/react';
+
+export const Camera = () => {
+  return (
+    <Webcam mirrored>
+      {({ getSnapshot }) => (
+        <button type="button" onClick={() => getSnapshot({ quality: 0.8 })}>
+          Make photo
+        </button>
+      )}
+    </Webcam>
+  );
+};
+```
+
+## Reactuse
+
+Reactuse delivers **production-ready hooks** that solve real-world problems. Built with **TypeScript-first** approach, **SSR compatibility**, and **tree-shaking optimization** - everything you need to build modern React applications. Improve your react applications with our library 📦 designed for comfort and speed.
+
+## Documentation
+
+Visit https://reactuse.org to view the full documentation.
+
+## Getting Started
+
+```bash
+npm install @siberiacancode/reactuse
+```

package/dist/cjs/_virtual/_rolldown/runtime.cjs

@@ -0,0 +1 @@
+var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));exports.__toESM=s;

package/dist/cjs/components/Webcam/Webcam.cjs

@@ -0,0 +1,2 @@
+const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("./hooks/useWebcam.cjs");let n=require("@webcam/core"),r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a=({ref:e,stream:a,cameraResolutionMode:o,cameraResolutionType:s,videoConstraints:c,audioConstraints:l,requestTimeLimit:u,frontCamera:d,mainCamera:f,mirrored:p=!0,muted:m=!0,style:h={},children:g,onLoadedMetadata:_,onRequest:v,onError:y,onStart:b,onStop:x,...S})=>{let C=(0,r.useRef)(null),w=e??C;return t.useWebcam(w,{stream:a,requestTimeLimit:u,onRequest:v,onError:y,onStart:b,onStop:x,videoConstraints:c,audioConstraints:l,cameraResolutionMode:o,cameraResolutionType:s,frontCamera:d,mainCamera:f,muted:m}),(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(`video`,{autoPlay:!0,playsInline:!0,ref:w,style:{...h,...p&&{transform:`${h.transform?`${h.transform} `:``}scaleX(-1)`}},controls:!1,muted:m,onLoadedMetadata:e=>{_?.(e),e.currentTarget.play()},...S}),typeof g==`function`?g({element:w.current,getCanvas:e=>w.current?(0,n.getVideoFrameCanvas)(w.current,{...e,mirrored:p}):void 0,getSnapshot:e=>w.current?(0,n.getWebcamSnapshot)(w.current,{...e,mirrored:p}):void 0}):g]})};exports.Webcam=a;
+//# sourceMappingURL=Webcam.cjs.map

package/dist/cjs/components/Webcam/Webcam.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Webcam.cjs","names":[],"sources":["../../../../src/components/Webcam/Webcam.tsx"],"sourcesContent":["import type {\n  GetVideoFrameCanvasOptions,\n  GetWebcamSnapshotOptions,\n  MediaTrackConstraintsOptions\n} from '@webcam/core';\nimport type { ComponentProps, ReactNode, RefObject } from 'react';\n\nimport { getVideoFrameCanvas, getWebcamSnapshot } from '@webcam/core';\nimport React, { useRef } from 'react';\n\nimport { useWebcam } from './hooks';\n\nexport type WebcamRenderProps = (options: {\n  getCanvas: (options?: GetVideoFrameCanvasOptions) => HTMLCanvasElement | undefined;\n  getSnapshot: (options?: GetWebcamSnapshotOptions) => string | undefined;\n  element: HTMLVideoElement | null;\n}) => ReactNode;\n\ninterface BaseWebcamProps\n  extends Omit<ComponentProps<'video'>, 'children' | 'onError'>, MediaTrackConstraintsOptions {\n  audioConstraints?: MediaTrackConstraints;\n  children?: ReactNode | WebcamRenderProps;\n  mirrored?: boolean;\n  ref?: RefObject<HTMLVideoElement>;\n  requestTimeLimit?: number;\n  videoConstraints?: MediaTrackConstraints;\n  onError?: (error: Error) => void;\n  onRequest?: () => void;\n  onStart?: (stream: MediaStream) => void;\n  onStop?: (stream?: MediaStream) => void;\n}\n\ninterface WebcamPropsWithInternalStream extends BaseWebcamProps {\n  stream?: undefined;\n}\n\ninterface WebcamPropsWithExternalStream extends BaseWebcamProps {\n  stream?: MediaStream;\n}\n\nexport type WebcamProps = WebcamPropsWithExternalStream | WebcamPropsWithInternalStream;\n\n/**\n * Renders the Webcam component and handles the requesting and displaying of the media stream\n *\n * @param {WebcamProps} props - The props for the Webcam component\n * @return {ReactElement} The rendered Webcam component\n */\nexport const Webcam = ({\n  ref,\n  stream,\n  cameraResolutionMode,\n  cameraResolutionType,\n  videoConstraints,\n  audioConstraints,\n  requestTimeLimit,\n  frontCamera,\n  mainCamera,\n  mirrored = true,\n  muted = true,\n  style = {},\n  children,\n  onLoadedMetadata,\n  onRequest,\n  onError,\n  onStart,\n  onStop,\n  ...props\n}: WebcamProps) => {\n  const internalVideoRef = useRef<HTMLVideoElement | null>(null);\n  const videoRef = ref ?? internalVideoRef;\n\n  useWebcam(videoRef, {\n    stream,\n    requestTimeLimit,\n    onRequest,\n    onError,\n    onStart,\n    onStop,\n    videoConstraints,\n    audioConstraints,\n    cameraResolutionMode,\n    cameraResolutionType,\n    frontCamera,\n    mainCamera,\n    muted\n  });\n\n  return (\n    <>\n      <video\n        autoPlay\n        playsInline\n        ref={videoRef}\n        style={{\n          ...style,\n          ...(mirrored && {\n            transform: `${style.transform ? `${style.transform} ` : ''}scaleX(-1)`\n          })\n        }}\n        controls={false}\n        muted={muted}\n        onLoadedMetadata={(event) => {\n          onLoadedMetadata?.(event);\n          event.currentTarget.play();\n        }}\n        {...props}\n      />\n      {typeof children === 'function'\n        ? children({\n            element: videoRef.current,\n            getCanvas: (options?: GetVideoFrameCanvasOptions) =>\n              videoRef.current\n                ? getVideoFrameCanvas(videoRef.current, { ...options, mirrored })\n                : undefined,\n            getSnapshot: (options?: GetWebcamSnapshotOptions) =>\n              videoRef.current\n                ? getWebcamSnapshot(videoRef.current, { ...options, mirrored })\n                : undefined\n          })\n        : children}\n    </>\n  );\n};\n"],"mappings":"gMAgDA,IAAa,GAAU,CACrB,MACA,SACA,uBACA,uBACA,mBACA,mBACA,mBACA,cACA,aACA,WAAW,GACX,QAAQ,GACR,QAAQ,CAAC,EACT,WACA,mBACA,YACA,UACA,UACA,SACA,GAAG,KACc,CACjB,IAAM,GAAA,EAAA,EAAA,OAAA,CAAmD,IAAI,EACvD,EAAW,GAAO,EAkBxB,OAhBA,EAAA,UAAU,EAAU,CAClB,SACA,mBACA,YACA,UACA,UACA,SACA,mBACA,mBACA,uBACA,uBACA,cACA,aACA,OACF,CAAC,GAGC,EAAA,EAAA,KAAA,CAAA,EAAA,SAAA,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,QAAD,CACE,SAAA,GACA,YAAA,GACA,IAAK,EACL,MAAO,CACL,GAAG,EACH,GAAI,GAAY,CACd,UAAW,GAAG,EAAM,UAAY,GAAG,EAAM,UAAU,GAAK,GAAG,WAC7D,CACF,EACA,SAAU,GACH,QACP,iBAAmB,GAAU,CAC3B,IAAmB,CAAK,EACxB,EAAM,cAAc,KAAK,CAC3B,EACA,GAAI,CACL,CAAA,EACA,OAAO,GAAa,WACjB,EAAS,CACP,QAAS,EAAS,QAClB,UAAY,GACV,EAAS,SAAA,EAAA,EAAA,oBAAA,CACe,EAAS,QAAS,CAAE,GAAG,EAAS,UAAS,CAAC,EAC9D,IAAA,GACN,YAAc,GACZ,EAAS,SAAA,EAAA,EAAA,kBAAA,CACa,EAAS,QAAS,CAAE,GAAG,EAAS,UAAS,CAAC,EAC5D,IAAA,EACR,CAAC,EACD,CACJ,CAAA,CAAA,CAEN"}

package/dist/cjs/components/Webcam/hooks/useWebcam.cjs

@@ -0,0 +1,2 @@
+let e=require("@siberiacancode/reactuse"),t=require("@webcam/core"),n=require("react");var r=((...r)=>{let i=(0,e.isTarget)(r[0])?r[0]:void 0,{stream:a,videoConstraints:o,audioConstraints:s,cameraResolutionMode:c,cameraResolutionType:l,frontCamera:u,mainCamera:d,muted:f,onRequest:p,onError:m,onStart:h,onStop:g}=(i?r[1]:r[0])??{},_=(0,e.useRefState)(),v=i??_,y=(0,e.useMediaStream)(v,{immediately:!1,onStart:h,onStop:g,onError:m}),b=()=>(0,t.getMediaStreamConstraints)({constraints:{video:o,audio:s},options:{cameraResolutionMode:c,cameraResolutionType:l,frontCamera:u,mainCamera:d,muted:f}});return(0,e.useMount)(()=>{a||(async()=>{p?.();let e=await b();y.start(e)})()}),(0,e.useDidUpdate)(()=>{a||(async()=>{p?.();let e=await b();if(y.stream){await y.apply(e)||y.start(e);return}y.start(e)})()},[o,s,c,l,u,d,f]),(0,n.useEffect)(()=>{if(!a)return;let t=e.isTarget.getElement(v);if(t)return t.srcObject=a,h?.(a),()=>{g?.(a)}},[a,i&&e.isTarget.getRawElement(i),_.state]),(0,e.useUnmount)(()=>{a||y.stop()}),i?{stream:a??y.stream,start:y.start,apply:y.apply,stop:y.stop}:{stream:a??y.stream,start:y.start,apply:y.apply,stop:y.stop,ref:_}});exports.useWebcam=r;
+//# sourceMappingURL=useWebcam.cjs.map

package/dist/cjs/components/Webcam/hooks/useWebcam.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWebcam.cjs","names":[],"sources":["../../../../../src/components/Webcam/hooks/useWebcam.ts"],"sourcesContent":["import type { HookTarget, StateRef, UseMediaStreamOptions } from '@siberiacancode/reactuse';\nimport type { MediaTrackConstraintsOptions } from '@webcam/core';\n\nimport {\n  isTarget,\n  useDidUpdate,\n  useMediaStream,\n  useMount,\n  useRefState,\n  useUnmount\n} from '@siberiacancode/reactuse';\nimport { getMediaStreamConstraints } from '@webcam/core';\nimport { useEffect } from 'react';\n\nexport interface UseWebcamParams extends MediaTrackConstraintsOptions {\n  audioConstraints?: MediaTrackConstraints;\n  requestTimeLimit?: number;\n  stream?: MediaStream;\n  videoConstraints?: MediaTrackConstraints;\n  onError?: (error: Error) => void;\n  onRequest?: () => void;\n  onStart?: (stream: MediaStream) => void;\n  onStop?: (stream?: MediaStream) => void;\n}\n\nexport interface UseWebcamReturn {\n  stream?: MediaStream;\n  apply: (constraints: MediaStreamConstraints) => Promise<boolean>;\n  start: (constraints?: MediaStreamConstraints) => Promise<MediaStream | undefined>;\n  stop: () => void;\n}\n\nexport interface UseWebcam {\n  (target: HookTarget, params?: UseWebcamParams): UseWebcamReturn;\n\n  (params?: UseWebcamParams): UseWebcamReturn & {\n    ref: StateRef<HTMLVideoElement>;\n  };\n}\n\n/**\n * @name useWebcam\n * @description - Hook that manages a webcam media stream for a video element\n *\n * @overload\n * @param {HookTarget} target The target video element the stream will be attached to\n * @param {UseWebcamParams} [params] The webcam parameters\n * @returns {UseWebcamReturn} An object containing the stream and controls\n *\n * @overload\n * @param {UseWebcamParams} [params] The webcam parameters\n * @returns {UseWebcamReturn & { ref: StateRef<HTMLVideoElement> }} An object containing the stream, controls and ref\n */\nexport const useWebcam = ((...params: any[]) => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const options = ((target ? params[1] : params[0]) as UseWebcamParams) ?? {};\n\n  const {\n    stream: externalStream,\n    videoConstraints,\n    audioConstraints,\n    cameraResolutionMode,\n    cameraResolutionType,\n    frontCamera,\n    mainCamera,\n    muted,\n    onRequest,\n    onError,\n    onStart,\n    onStop\n  } = options;\n\n  const internalRef = useRefState<HTMLVideoElement>();\n  const resolvedRef = (target ?? internalRef) as HookTarget;\n\n  const mediaStream = useMediaStream(resolvedRef, {\n    immediately: false,\n    onStart,\n    onStop,\n    onError\n  } satisfies UseMediaStreamOptions);\n\n  const createConstraints = () =>\n    getMediaStreamConstraints({\n      constraints: {\n        video: videoConstraints,\n        audio: audioConstraints\n      },\n      options: {\n        cameraResolutionMode,\n        cameraResolutionType,\n        frontCamera,\n        mainCamera,\n        muted\n      }\n    });\n\n  useMount(() => {\n    if (externalStream) return;\n    const run = async () => {\n      onRequest?.();\n      const constraints = await createConstraints();\n      mediaStream.start(constraints);\n    };\n\n    run();\n  });\n\n  useDidUpdate(() => {\n    if (externalStream) return;\n\n    const run = async () => {\n      onRequest?.();\n      const constraints = await createConstraints();\n\n      if (mediaStream.stream) {\n        const ok = await mediaStream.apply(constraints);\n        if (!ok) mediaStream.start(constraints);\n        return;\n      }\n\n      mediaStream.start(constraints);\n    };\n\n    run();\n  }, [\n    videoConstraints,\n    audioConstraints,\n    cameraResolutionMode,\n    cameraResolutionType,\n    frontCamera,\n    mainCamera,\n    muted\n  ]);\n\n  useEffect(() => {\n    if (!externalStream) return;\n\n    const element = isTarget.getElement(resolvedRef) as HTMLVideoElement | null;\n    if (!element) return;\n\n    element.srcObject = externalStream;\n    onStart?.(externalStream);\n\n    return () => {\n      onStop?.(externalStream);\n    };\n  }, [externalStream, target && isTarget.getRawElement(target), internalRef.state]);\n\n  useUnmount(() => {\n    if (externalStream) return;\n    mediaStream.stop();\n  });\n\n  if (target)\n    return {\n      stream: externalStream ?? mediaStream.stream,\n      start: mediaStream.start,\n      apply: mediaStream.apply,\n      stop: mediaStream.stop\n    };\n  return {\n    stream: externalStream ?? mediaStream.stream,\n    start: mediaStream.start,\n    apply: mediaStream.apply,\n    stop: mediaStream.stop,\n    ref: internalRef\n  };\n}) as UseWebcam;\n"],"mappings":"uFAqDA,IAAa,IAAc,GAAG,IAAkB,CAC9C,IAAM,GAAA,EAAA,EAAA,SAAA,CAAmB,EAAO,EAAE,EAAI,EAAO,GAAK,IAAA,GAG5C,CACJ,OAAQ,EACR,mBACA,mBACA,uBACA,uBACA,cACA,aACA,QACA,YACA,UACA,UACA,WAdgB,EAAS,EAAO,GAAK,EAAO,KAA2B,CAAC,EAiBpE,GAAA,EAAA,EAAA,YAAA,CAA4C,EAC5C,EAAe,GAAU,EAEzB,GAAA,EAAA,EAAA,eAAA,CAA6B,EAAa,CAC9C,YAAa,GACb,UACA,SACA,SACF,CAAiC,EAE3B,OAAA,EAAA,EAAA,0BAAA,CACsB,CACxB,YAAa,CACX,MAAO,EACP,MAAO,CACT,EACA,QAAS,CACP,uBACA,uBACA,cACA,aACA,OACF,CACF,CAAC,EAkEH,OAhEA,EAAA,EAAA,SAAA,KAAe,CACT,IAOJ,SANwB,CACtB,IAAY,EACZ,IAAM,EAAc,MAAM,EAAkB,EAC5C,EAAY,MAAM,CAAW,CAC/B,EAEA,CAAI,CACN,CAAC,GAED,EAAA,EAAA,aAAA,KAAmB,CACb,IAeJ,SAbwB,CACtB,IAAY,EACZ,IAAM,EAAc,MAAM,EAAkB,EAE5C,GAAI,EAAY,OAAQ,CAEjB,MADY,EAAY,MAAM,CAAW,GACrC,EAAY,MAAM,CAAW,EACtC,MACF,CAEA,EAAY,MAAM,CAAW,CAC/B,EAEA,CAAI,CACN,EAAG,CACD,EACA,EACA,EACA,EACA,EACA,EACA,CACF,CAAC,GAED,EAAA,EAAA,UAAA,KAAgB,CACd,GAAI,CAAC,EAAgB,OAErB,IAAM,EAAU,EAAA,SAAS,WAAW,CAAW,EAC1C,KAKL,MAHA,GAAQ,UAAY,EACpB,IAAU,CAAc,MAEX,CACX,IAAS,CAAc,CACzB,CACF,EAAG,CAAC,EAAgB,GAAU,EAAA,SAAS,cAAc,CAAM,EAAG,EAAY,KAAK,CAAC,GAEhF,EAAA,EAAA,WAAA,KAAiB,CACX,GACJ,EAAY,KAAK,CACnB,CAAC,EAEG,EACK,CACL,OAAQ,GAAkB,EAAY,OACtC,MAAO,EAAY,MACnB,MAAO,EAAY,MACnB,KAAM,EAAY,IACpB,EACK,CACL,OAAQ,GAAkB,EAAY,OACtC,MAAO,EAAY,MACnB,MAAO,EAAY,MACnB,KAAM,EAAY,KAClB,IAAK,CACP,CACF"}

package/dist/cjs/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./components/Webcam/hooks/useWebcam.cjs"),t=require("./components/Webcam/Webcam.cjs"),n=require("./utils/hooks/useAnimationFrame.cjs");let r=require("@webcam/core");exports.Webcam=t.Webcam,Object.defineProperty(exports,"applyMediaStreamConstraints",{enumerable:!0,get:function(){return r.applyMediaStreamConstraints}}),Object.defineProperty(exports,"canGetUserMedia",{enumerable:!0,get:function(){return r.canGetUserMedia}}),Object.defineProperty(exports,"getDevices",{enumerable:!0,get:function(){return r.getDevices}}),Object.defineProperty(exports,"getMediaStream",{enumerable:!0,get:function(){return r.getMediaStream}}),Object.defineProperty(exports,"getMediaStreamConstraints",{enumerable:!0,get:function(){return r.getMediaStreamConstraints}}),Object.defineProperty(exports,"getVideoFrameCanvas",{enumerable:!0,get:function(){return r.getVideoFrameCanvas}}),Object.defineProperty(exports,"getWebcamSnapshot",{enumerable:!0,get:function(){return r.getWebcamSnapshot}}),Object.defineProperty(exports,"stopMediaStream",{enumerable:!0,get:function(){return r.stopMediaStream}}),exports.useAnimationFrame=n.useAnimationFrame,exports.useWebcam=e.useWebcam;

package/dist/cjs/utils/helpers/animationFrame.cjs

@@ -0,0 +1,2 @@
+var e=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame,t=window.cancelAnimationFrame||window.mozCancelAnimationFrame||window.webkitCancelAnimationFrame||window.msCancelAnimationFrame;exports.cancelAnimationFrame=t,exports.requestAnimationFrame=e;
+//# sourceMappingURL=animationFrame.cjs.map

package/dist/cjs/utils/helpers/animationFrame.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"animationFrame.cjs","names":[],"sources":["../../../../src/utils/helpers/animationFrame.ts"],"sourcesContent":["// ✅ important\n// Implementations for each browser need to be supported\nexport const requestAnimationFrame =\n  window.requestAnimationFrame ||\n  window.mozRequestAnimationFrame ||\n  window.webkitRequestAnimationFrame ||\n  window.msRequestAnimationFrame;\n\nexport const cancelAnimationFrame =\n  window.cancelAnimationFrame ||\n  window.mozCancelAnimationFrame ||\n  window.webkitCancelAnimationFrame ||\n  window.msCancelAnimationFrame;\n"],"mappings":"AAEA,IAAa,EACX,OAAO,uBACP,OAAO,0BACP,OAAO,6BACP,OAAO,wBAEI,EACX,OAAO,sBACP,OAAO,yBACP,OAAO,4BACP,OAAO"}

package/dist/cjs/utils/hooks/useAnimationFrame.cjs

@@ -0,0 +1,2 @@
+const e=require("../helpers/animationFrame.cjs");let t=require("@siberiacancode/reactuse"),n=require("react");var r=(r,i)=>{let a=(0,n.useRef)(void 0),o=(0,n.useRef)(void 0),s=(0,n.useRef)(r);(0,t.useIsomorphicLayoutEffect)(()=>{s.current=r},[r]);let c=t=>{if(t){if(o.current=t,o.current===void 0)return;s.current(t-o.current)}a.current=e.requestAnimationFrame(c)},l=()=>{a.current&&e.cancelAnimationFrame(a.current)};return(0,n.useEffect)(()=>{if(i){a.current=e.requestAnimationFrame(c);return}return l(),()=>l()},[i]),{request:c,cancel:l}};exports.useAnimationFrame=r;
+//# sourceMappingURL=useAnimationFrame.cjs.map

package/dist/cjs/utils/hooks/useAnimationFrame.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAnimationFrame.cjs","names":[],"sources":["../../../../src/utils/hooks/useAnimationFrame.ts"],"sourcesContent":["import { useIsomorphicLayoutEffect } from '@siberiacancode/reactuse';\nimport { useEffect, useRef } from 'react';\n\nimport { cancelAnimationFrame, requestAnimationFrame } from '../helpers';\n\n/**\n * Helps request and cancel animation frame\n *\n * @param {Function} callback - frame request callback\n * @param {boolean} active - should animation frame be requested\n * @return {object} request/cancel animation frame handlers\n */\nexport const useAnimationFrame = (callback: (time: number) => void, active?: boolean) => {\n  const animationFrameRequestRef = useRef<number>(undefined);\n  const previousTimestampRef = useRef<number>(undefined);\n  const savedHandlerRef = useRef(callback);\n\n  useIsomorphicLayoutEffect(() => {\n    savedHandlerRef.current = callback;\n  }, [callback]);\n\n  const onFrameRequest = (timestamp?: DOMHighResTimeStamp) => {\n    if (timestamp) {\n      previousTimestampRef.current = timestamp;\n      if (previousTimestampRef.current === undefined) return;\n      savedHandlerRef.current(timestamp - previousTimestampRef.current);\n    }\n\n    animationFrameRequestRef.current = requestAnimationFrame(onFrameRequest);\n  };\n\n  const onFrameCancel = () => {\n    if (!animationFrameRequestRef.current) return;\n    cancelAnimationFrame(animationFrameRequestRef.current);\n  };\n\n  useEffect(() => {\n    if (active) {\n      animationFrameRequestRef.current = requestAnimationFrame(onFrameRequest);\n      return;\n    }\n\n    onFrameCancel();\n    return () => onFrameCancel();\n  }, [active]);\n\n  return {\n    request: onFrameRequest,\n    cancel: onFrameCancel\n  };\n};\n"],"mappings":"8GAYA,IAAa,GAAqB,EAAkC,IAAqB,CACvF,IAAM,GAAA,EAAA,EAAA,OAAA,CAA0C,IAAA,EAAS,EACnD,GAAA,EAAA,EAAA,OAAA,CAAsC,IAAA,EAAS,EAC/C,GAAA,EAAA,EAAA,OAAA,CAAyB,CAAQ,GAEvC,EAAA,EAAA,0BAAA,KAAgC,CAC9B,EAAgB,QAAU,CAC5B,EAAG,CAAC,CAAQ,CAAC,EAEb,IAAM,EAAkB,GAAoC,CAC1D,GAAI,EAAW,CAEb,GADA,EAAqB,QAAU,EAC3B,EAAqB,UAAY,IAAA,GAAW,OAChD,EAAgB,QAAQ,EAAY,EAAqB,OAAO,CAClE,CAEA,EAAyB,QAAU,EAAA,sBAAsB,CAAc,CACzE,EAEM,MAAsB,CACrB,EAAyB,SAC9B,EAAA,qBAAqB,EAAyB,OAAO,CACvD,EAYA,OAVA,EAAA,EAAA,UAAA,KAAgB,CACd,GAAI,EAAQ,CACV,EAAyB,QAAU,EAAA,sBAAsB,CAAc,EACvE,MACF,CAGA,OADA,EAAc,MACD,EAAc,CAC7B,EAAG,CAAC,CAAM,CAAC,EAEJ,CACL,QAAS,EACT,OAAQ,CACV,CACF"}

package/dist/components/Webcam/Webcam.d.ts

@@ -0,0 +1,34 @@
+import { GetVideoFrameCanvasOptions, GetWebcamSnapshotOptions, MediaTrackConstraintsOptions } from '@webcam/core';
+import { ComponentProps, ReactNode, RefObject, default as React } from 'react';
+export type WebcamRenderProps = (options: {
+    getCanvas: (options?: GetVideoFrameCanvasOptions) => HTMLCanvasElement | undefined;
+    getSnapshot: (options?: GetWebcamSnapshotOptions) => string | undefined;
+    element: HTMLVideoElement | null;
+}) => ReactNode;
+interface BaseWebcamProps extends Omit<ComponentProps<'video'>, 'children' | 'onError'>, MediaTrackConstraintsOptions {
+    audioConstraints?: MediaTrackConstraints;
+    children?: ReactNode | WebcamRenderProps;
+    mirrored?: boolean;
+    ref?: RefObject<HTMLVideoElement>;
+    requestTimeLimit?: number;
+    videoConstraints?: MediaTrackConstraints;
+    onError?: (error: Error) => void;
+    onRequest?: () => void;
+    onStart?: (stream: MediaStream) => void;
+    onStop?: (stream?: MediaStream) => void;
+}
+interface WebcamPropsWithInternalStream extends BaseWebcamProps {
+    stream?: undefined;
+}
+interface WebcamPropsWithExternalStream extends BaseWebcamProps {
+    stream?: MediaStream;
+}
+export type WebcamProps = WebcamPropsWithExternalStream | WebcamPropsWithInternalStream;
+/**
+ * Renders the Webcam component and handles the requesting and displaying of the media stream
+ *
+ * @param {WebcamProps} props - The props for the Webcam component
+ * @return {ReactElement} The rendered Webcam component
+ */
+export declare const Webcam: ({ ref, stream, cameraResolutionMode, cameraResolutionType, videoConstraints, audioConstraints, requestTimeLimit, frontCamera, mainCamera, mirrored, muted, style, children, onLoadedMetadata, onRequest, onError, onStart, onStop, ...props }: WebcamProps) => React.JSX.Element;
+export {};

package/dist/components/Webcam/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useWebcam';

package/dist/components/Webcam/hooks/useWebcam.d.ts

@@ -0,0 +1,38 @@
+import { HookTarget, StateRef } from '@siberiacancode/reactuse';
+import { MediaTrackConstraintsOptions } from '@webcam/core';
+export interface UseWebcamParams extends MediaTrackConstraintsOptions {
+    audioConstraints?: MediaTrackConstraints;
+    requestTimeLimit?: number;
+    stream?: MediaStream;
+    videoConstraints?: MediaTrackConstraints;
+    onError?: (error: Error) => void;
+    onRequest?: () => void;
+    onStart?: (stream: MediaStream) => void;
+    onStop?: (stream?: MediaStream) => void;
+}
+export interface UseWebcamReturn {
+    stream?: MediaStream;
+    apply: (constraints: MediaStreamConstraints) => Promise<boolean>;
+    start: (constraints?: MediaStreamConstraints) => Promise<MediaStream | undefined>;
+    stop: () => void;
+}
+export interface UseWebcam {
+    (target: HookTarget, params?: UseWebcamParams): UseWebcamReturn;
+    (params?: UseWebcamParams): UseWebcamReturn & {
+        ref: StateRef<HTMLVideoElement>;
+    };
+}
+/**
+ * @name useWebcam
+ * @description - Hook that manages a webcam media stream for a video element
+ *
+ * @overload
+ * @param {HookTarget} target The target video element the stream will be attached to
+ * @param {UseWebcamParams} [params] The webcam parameters
+ * @returns {UseWebcamReturn} An object containing the stream and controls
+ *
+ * @overload
+ * @param {UseWebcamParams} [params] The webcam parameters
+ * @returns {UseWebcamReturn & { ref: StateRef<HTMLVideoElement> }} An object containing the stream, controls and ref
+ */
+export declare const useWebcam: UseWebcam;

package/dist/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Webcam/hooks';
+export * from './Webcam/Webcam';

package/dist/esm/components/Webcam/Webcam.mjs

@@ -0,0 +1,51 @@
+import { useWebcam as e } from "./hooks/useWebcam.mjs";
+import { getVideoFrameCanvas as t, getWebcamSnapshot as n } from "@webcam/core";
+import { useRef as r } from "react";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/Webcam/Webcam.tsx
+var s = ({ ref: s, stream: c, cameraResolutionMode: l, cameraResolutionType: u, videoConstraints: d, audioConstraints: f, requestTimeLimit: p, frontCamera: m, mainCamera: h, mirrored: g = !0, muted: _ = !0, style: v = {}, children: y, onLoadedMetadata: b, onRequest: x, onError: S, onStart: C, onStop: w, ...T }) => {
+	let E = r(null), D = s ?? E;
+	return e(D, {
+		stream: c,
+		requestTimeLimit: p,
+		onRequest: x,
+		onError: S,
+		onStart: C,
+		onStop: w,
+		videoConstraints: d,
+		audioConstraints: f,
+		cameraResolutionMode: l,
+		cameraResolutionType: u,
+		frontCamera: m,
+		mainCamera: h,
+		muted: _
+	}), /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a("video", {
+		autoPlay: !0,
+		playsInline: !0,
+		ref: D,
+		style: {
+			...v,
+			...g && { transform: `${v.transform ? `${v.transform} ` : ""}scaleX(-1)` }
+		},
+		controls: !1,
+		muted: _,
+		onLoadedMetadata: (e) => {
+			b?.(e), e.currentTarget.play();
+		},
+		...T
+	}), typeof y == "function" ? y({
+		element: D.current,
+		getCanvas: (e) => D.current ? t(D.current, {
+			...e,
+			mirrored: g
+		}) : void 0,
+		getSnapshot: (e) => D.current ? n(D.current, {
+			...e,
+			mirrored: g
+		}) : void 0
+	}) : y] });
+};
+//#endregion
+export { s as Webcam };
+
+//# sourceMappingURL=Webcam.mjs.map

package/dist/esm/components/Webcam/Webcam.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Webcam.mjs","names":[],"sources":["../../../../src/components/Webcam/Webcam.tsx"],"sourcesContent":["import type {\n  GetVideoFrameCanvasOptions,\n  GetWebcamSnapshotOptions,\n  MediaTrackConstraintsOptions\n} from '@webcam/core';\nimport type { ComponentProps, ReactNode, RefObject } from 'react';\n\nimport { getVideoFrameCanvas, getWebcamSnapshot } from '@webcam/core';\nimport React, { useRef } from 'react';\n\nimport { useWebcam } from './hooks';\n\nexport type WebcamRenderProps = (options: {\n  getCanvas: (options?: GetVideoFrameCanvasOptions) => HTMLCanvasElement | undefined;\n  getSnapshot: (options?: GetWebcamSnapshotOptions) => string | undefined;\n  element: HTMLVideoElement | null;\n}) => ReactNode;\n\ninterface BaseWebcamProps\n  extends Omit<ComponentProps<'video'>, 'children' | 'onError'>, MediaTrackConstraintsOptions {\n  audioConstraints?: MediaTrackConstraints;\n  children?: ReactNode | WebcamRenderProps;\n  mirrored?: boolean;\n  ref?: RefObject<HTMLVideoElement>;\n  requestTimeLimit?: number;\n  videoConstraints?: MediaTrackConstraints;\n  onError?: (error: Error) => void;\n  onRequest?: () => void;\n  onStart?: (stream: MediaStream) => void;\n  onStop?: (stream?: MediaStream) => void;\n}\n\ninterface WebcamPropsWithInternalStream extends BaseWebcamProps {\n  stream?: undefined;\n}\n\ninterface WebcamPropsWithExternalStream extends BaseWebcamProps {\n  stream?: MediaStream;\n}\n\nexport type WebcamProps = WebcamPropsWithExternalStream | WebcamPropsWithInternalStream;\n\n/**\n * Renders the Webcam component and handles the requesting and displaying of the media stream\n *\n * @param {WebcamProps} props - The props for the Webcam component\n * @return {ReactElement} The rendered Webcam component\n */\nexport const Webcam = ({\n  ref,\n  stream,\n  cameraResolutionMode,\n  cameraResolutionType,\n  videoConstraints,\n  audioConstraints,\n  requestTimeLimit,\n  frontCamera,\n  mainCamera,\n  mirrored = true,\n  muted = true,\n  style = {},\n  children,\n  onLoadedMetadata,\n  onRequest,\n  onError,\n  onStart,\n  onStop,\n  ...props\n}: WebcamProps) => {\n  const internalVideoRef = useRef<HTMLVideoElement | null>(null);\n  const videoRef = ref ?? internalVideoRef;\n\n  useWebcam(videoRef, {\n    stream,\n    requestTimeLimit,\n    onRequest,\n    onError,\n    onStart,\n    onStop,\n    videoConstraints,\n    audioConstraints,\n    cameraResolutionMode,\n    cameraResolutionType,\n    frontCamera,\n    mainCamera,\n    muted\n  });\n\n  return (\n    <>\n      <video\n        autoPlay\n        playsInline\n        ref={videoRef}\n        style={{\n          ...style,\n          ...(mirrored && {\n            transform: `${style.transform ? `${style.transform} ` : ''}scaleX(-1)`\n          })\n        }}\n        controls={false}\n        muted={muted}\n        onLoadedMetadata={(event) => {\n          onLoadedMetadata?.(event);\n          event.currentTarget.play();\n        }}\n        {...props}\n      />\n      {typeof children === 'function'\n        ? children({\n            element: videoRef.current,\n            getCanvas: (options?: GetVideoFrameCanvasOptions) =>\n              videoRef.current\n                ? getVideoFrameCanvas(videoRef.current, { ...options, mirrored })\n                : undefined,\n            getSnapshot: (options?: GetWebcamSnapshotOptions) =>\n              videoRef.current\n                ? getWebcamSnapshot(videoRef.current, { ...options, mirrored })\n                : undefined\n          })\n        : children}\n    </>\n  );\n};\n"],"mappings":";;;;;AAgDA,IAAa,KAAU,EACrB,QACA,WACA,yBACA,yBACA,qBACA,qBACA,qBACA,gBACA,eACA,cAAW,IACX,WAAQ,IACR,WAAQ,CAAC,GACT,aACA,qBACA,cACA,YACA,YACA,WACA,GAAG,QACc;CACjB,IAAM,IAAmB,EAAgC,IAAI,GACvD,IAAW,KAAO;CAkBxB,OAhBA,EAAU,GAAU;EAClB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,GAGC,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,SAAD;EACE,UAAA;EACA,aAAA;EACA,KAAK;EACL,OAAO;GACL,GAAG;GACH,GAAI,KAAY,EACd,WAAW,GAAG,EAAM,YAAY,GAAG,EAAM,UAAU,KAAK,GAAG,YAC7D;EACF;EACA,UAAU;EACH;EACP,mBAAmB,MAAU;GAE3B,AADA,IAAmB,CAAK,GACxB,EAAM,cAAc,KAAK;EAC3B;EACA,GAAI;CACL,CAAA,GACA,OAAO,KAAa,aACjB,EAAS;EACP,SAAS,EAAS;EAClB,YAAY,MACV,EAAS,UACL,EAAoB,EAAS,SAAS;GAAE,GAAG;GAAS;EAAS,CAAC,IAC9D,KAAA;EACN,cAAc,MACZ,EAAS,UACL,EAAkB,EAAS,SAAS;GAAE,GAAG;GAAS;EAAS,CAAC,IAC5D,KAAA;CACR,CAAC,IACD,CACJ,EAAA,CAAA;AAEN"}

package/dist/esm/components/Webcam/hooks/useWebcam.mjs

@@ -0,0 +1,76 @@
+import { isTarget as e, useDidUpdate as t, useMediaStream as n, useMount as r, useRefState as i, useUnmount as a } from "@siberiacancode/reactuse";
+import { getMediaStreamConstraints as o } from "@webcam/core";
+import { useEffect as s } from "react";
+//#region src/components/Webcam/hooks/useWebcam.ts
+var c = ((...c) => {
+	let l = e(c[0]) ? c[0] : void 0, { stream: u, videoConstraints: d, audioConstraints: f, cameraResolutionMode: p, cameraResolutionType: m, frontCamera: h, mainCamera: g, muted: _, onRequest: v, onError: y, onStart: b, onStop: x } = (l ? c[1] : c[0]) ?? {}, S = i(), C = l ?? S, w = n(C, {
+		immediately: !1,
+		onStart: b,
+		onStop: x,
+		onError: y
+	}), T = () => o({
+		constraints: {
+			video: d,
+			audio: f
+		},
+		options: {
+			cameraResolutionMode: p,
+			cameraResolutionType: m,
+			frontCamera: h,
+			mainCamera: g,
+			muted: _
+		}
+	});
+	return r(() => {
+		u || (async () => {
+			v?.();
+			let e = await T();
+			w.start(e);
+		})();
+	}), t(() => {
+		u || (async () => {
+			v?.();
+			let e = await T();
+			if (w.stream) {
+				await w.apply(e) || w.start(e);
+				return;
+			}
+			w.start(e);
+		})();
+	}, [
+		d,
+		f,
+		p,
+		m,
+		h,
+		g,
+		_
+	]), s(() => {
+		if (!u) return;
+		let t = e.getElement(C);
+		if (t) return t.srcObject = u, b?.(u), () => {
+			x?.(u);
+		};
+	}, [
+		u,
+		l && e.getRawElement(l),
+		S.state
+	]), a(() => {
+		u || w.stop();
+	}), l ? {
+		stream: u ?? w.stream,
+		start: w.start,
+		apply: w.apply,
+		stop: w.stop
+	} : {
+		stream: u ?? w.stream,
+		start: w.start,
+		apply: w.apply,
+		stop: w.stop,
+		ref: S
+	};
+});
+//#endregion
+export { c as useWebcam };
+
+//# sourceMappingURL=useWebcam.mjs.map

package/dist/esm/components/Webcam/hooks/useWebcam.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWebcam.mjs","names":[],"sources":["../../../../../src/components/Webcam/hooks/useWebcam.ts"],"sourcesContent":["import type { HookTarget, StateRef, UseMediaStreamOptions } from '@siberiacancode/reactuse';\nimport type { MediaTrackConstraintsOptions } from '@webcam/core';\n\nimport {\n  isTarget,\n  useDidUpdate,\n  useMediaStream,\n  useMount,\n  useRefState,\n  useUnmount\n} from '@siberiacancode/reactuse';\nimport { getMediaStreamConstraints } from '@webcam/core';\nimport { useEffect } from 'react';\n\nexport interface UseWebcamParams extends MediaTrackConstraintsOptions {\n  audioConstraints?: MediaTrackConstraints;\n  requestTimeLimit?: number;\n  stream?: MediaStream;\n  videoConstraints?: MediaTrackConstraints;\n  onError?: (error: Error) => void;\n  onRequest?: () => void;\n  onStart?: (stream: MediaStream) => void;\n  onStop?: (stream?: MediaStream) => void;\n}\n\nexport interface UseWebcamReturn {\n  stream?: MediaStream;\n  apply: (constraints: MediaStreamConstraints) => Promise<boolean>;\n  start: (constraints?: MediaStreamConstraints) => Promise<MediaStream | undefined>;\n  stop: () => void;\n}\n\nexport interface UseWebcam {\n  (target: HookTarget, params?: UseWebcamParams): UseWebcamReturn;\n\n  (params?: UseWebcamParams): UseWebcamReturn & {\n    ref: StateRef<HTMLVideoElement>;\n  };\n}\n\n/**\n * @name useWebcam\n * @description - Hook that manages a webcam media stream for a video element\n *\n * @overload\n * @param {HookTarget} target The target video element the stream will be attached to\n * @param {UseWebcamParams} [params] The webcam parameters\n * @returns {UseWebcamReturn} An object containing the stream and controls\n *\n * @overload\n * @param {UseWebcamParams} [params] The webcam parameters\n * @returns {UseWebcamReturn & { ref: StateRef<HTMLVideoElement> }} An object containing the stream, controls and ref\n */\nexport const useWebcam = ((...params: any[]) => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const options = ((target ? params[1] : params[0]) as UseWebcamParams) ?? {};\n\n  const {\n    stream: externalStream,\n    videoConstraints,\n    audioConstraints,\n    cameraResolutionMode,\n    cameraResolutionType,\n    frontCamera,\n    mainCamera,\n    muted,\n    onRequest,\n    onError,\n    onStart,\n    onStop\n  } = options;\n\n  const internalRef = useRefState<HTMLVideoElement>();\n  const resolvedRef = (target ?? internalRef) as HookTarget;\n\n  const mediaStream = useMediaStream(resolvedRef, {\n    immediately: false,\n    onStart,\n    onStop,\n    onError\n  } satisfies UseMediaStreamOptions);\n\n  const createConstraints = () =>\n    getMediaStreamConstraints({\n      constraints: {\n        video: videoConstraints,\n        audio: audioConstraints\n      },\n      options: {\n        cameraResolutionMode,\n        cameraResolutionType,\n        frontCamera,\n        mainCamera,\n        muted\n      }\n    });\n\n  useMount(() => {\n    if (externalStream) return;\n    const run = async () => {\n      onRequest?.();\n      const constraints = await createConstraints();\n      mediaStream.start(constraints);\n    };\n\n    run();\n  });\n\n  useDidUpdate(() => {\n    if (externalStream) return;\n\n    const run = async () => {\n      onRequest?.();\n      const constraints = await createConstraints();\n\n      if (mediaStream.stream) {\n        const ok = await mediaStream.apply(constraints);\n        if (!ok) mediaStream.start(constraints);\n        return;\n      }\n\n      mediaStream.start(constraints);\n    };\n\n    run();\n  }, [\n    videoConstraints,\n    audioConstraints,\n    cameraResolutionMode,\n    cameraResolutionType,\n    frontCamera,\n    mainCamera,\n    muted\n  ]);\n\n  useEffect(() => {\n    if (!externalStream) return;\n\n    const element = isTarget.getElement(resolvedRef) as HTMLVideoElement | null;\n    if (!element) return;\n\n    element.srcObject = externalStream;\n    onStart?.(externalStream);\n\n    return () => {\n      onStop?.(externalStream);\n    };\n  }, [externalStream, target && isTarget.getRawElement(target), internalRef.state]);\n\n  useUnmount(() => {\n    if (externalStream) return;\n    mediaStream.stop();\n  });\n\n  if (target)\n    return {\n      stream: externalStream ?? mediaStream.stream,\n      start: mediaStream.start,\n      apply: mediaStream.apply,\n      stop: mediaStream.stop\n    };\n  return {\n    stream: externalStream ?? mediaStream.stream,\n    start: mediaStream.start,\n    apply: mediaStream.apply,\n    stop: mediaStream.stop,\n    ref: internalRef\n  };\n}) as UseWebcam;\n"],"mappings":";;;;AAqDA,IAAa,MAAc,GAAG,MAAkB;CAC9C,IAAM,IAAU,EAAS,EAAO,EAAE,IAAI,EAAO,KAAK,KAAA,GAG5C,EACJ,QAAQ,GACR,qBACA,qBACA,yBACA,yBACA,gBACA,eACA,UACA,cACA,YACA,YACA,eAdgB,IAAS,EAAO,KAAK,EAAO,OAA2B,CAAC,GAiBpE,IAAc,EAA8B,GAC5C,IAAe,KAAU,GAEzB,IAAc,EAAe,GAAa;EAC9C,aAAa;EACb;EACA;EACA;CACF,CAAiC,GAE3B,UACJ,EAA0B;EACxB,aAAa;GACX,OAAO;GACP,OAAO;EACT;EACA,SAAS;GACP;GACA;GACA;GACA;GACA;EACF;CACF,CAAC;CAkEH,OAhEA,QAAe;EACT,MAOJ,YANwB;GACtB,IAAY;GACZ,IAAM,IAAc,MAAM,EAAkB;GAC5C,EAAY,MAAM,CAAW;EAC/B,EAEA,CAAI;CACN,CAAC,GAED,QAAmB;EACb,MAeJ,YAbwB;GACtB,IAAY;GACZ,IAAM,IAAc,MAAM,EAAkB;GAE5C,IAAI,EAAY,QAAQ;IAEtB,AAAK,MADY,EAAY,MAAM,CAAW,KACrC,EAAY,MAAM,CAAW;IACtC;GACF;GAEA,EAAY,MAAM,CAAW;EAC/B,EAEA,CAAI;CACN,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,GAED,QAAgB;EACd,IAAI,CAAC,GAAgB;EAErB,IAAM,IAAU,EAAS,WAAW,CAAW;EAC1C,OAKL,OAHA,EAAQ,YAAY,GACpB,IAAU,CAAc,SAEX;GACX,IAAS,CAAc;EACzB;CACF,GAAG;EAAC;EAAgB,KAAU,EAAS,cAAc,CAAM;EAAG,EAAY;CAAK,CAAC,GAEhF,QAAiB;EACX,KACJ,EAAY,KAAK;CACnB,CAAC,GAEG,IACK;EACL,QAAQ,KAAkB,EAAY;EACtC,OAAO,EAAY;EACnB,OAAO,EAAY;EACnB,MAAM,EAAY;CACpB,IACK;EACL,QAAQ,KAAkB,EAAY;EACtC,OAAO,EAAY;EACnB,OAAO,EAAY;EACnB,MAAM,EAAY;EAClB,KAAK;CACP;AACF"}

package/dist/esm/index.mjs

@@ -0,0 +1,5 @@
+import { useWebcam as e } from "./components/Webcam/hooks/useWebcam.mjs";
+import { Webcam as t } from "./components/Webcam/Webcam.mjs";
+import { useAnimationFrame as n } from "./utils/hooks/useAnimationFrame.mjs";
+import { applyMediaStreamConstraints as r, canGetUserMedia as i, getDevices as a, getMediaStream as o, getMediaStreamConstraints as s, getVideoFrameCanvas as c, getWebcamSnapshot as l, stopMediaStream as u } from "@webcam/core";
+export { t as Webcam, r as applyMediaStreamConstraints, i as canGetUserMedia, a as getDevices, o as getMediaStream, s as getMediaStreamConstraints, c as getVideoFrameCanvas, l as getWebcamSnapshot, u as stopMediaStream, n as useAnimationFrame, e as useWebcam };

package/dist/esm/utils/helpers/animationFrame.mjs

@@ -0,0 +1,6 @@
+//#region src/utils/helpers/animationFrame.ts
+var e = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame, t = window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame || window.msCancelAnimationFrame;
+//#endregion
+export { t as cancelAnimationFrame, e as requestAnimationFrame };
+
+//# sourceMappingURL=animationFrame.mjs.map

package/dist/esm/utils/helpers/animationFrame.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"animationFrame.mjs","names":[],"sources":["../../../../src/utils/helpers/animationFrame.ts"],"sourcesContent":["// ✅ important\n// Implementations for each browser need to be supported\nexport const requestAnimationFrame =\n  window.requestAnimationFrame ||\n  window.mozRequestAnimationFrame ||\n  window.webkitRequestAnimationFrame ||\n  window.msRequestAnimationFrame;\n\nexport const cancelAnimationFrame =\n  window.cancelAnimationFrame ||\n  window.mozCancelAnimationFrame ||\n  window.webkitCancelAnimationFrame ||\n  window.msCancelAnimationFrame;\n"],"mappings":";AAEA,IAAa,IACX,OAAO,yBACP,OAAO,4BACP,OAAO,+BACP,OAAO,yBAEI,IACX,OAAO,wBACP,OAAO,2BACP,OAAO,8BACP,OAAO"}

package/dist/esm/utils/hooks/useAnimationFrame.mjs

@@ -0,0 +1,33 @@
+import { cancelAnimationFrame as e, requestAnimationFrame as t } from "../helpers/animationFrame.mjs";
+import { useIsomorphicLayoutEffect as n } from "@siberiacancode/reactuse";
+import { useEffect as r, useRef as i } from "react";
+//#region src/utils/hooks/useAnimationFrame.ts
+var a = (a, o) => {
+	let s = i(void 0), c = i(void 0), l = i(a);
+	n(() => {
+		l.current = a;
+	}, [a]);
+	let u = (e) => {
+		if (e) {
+			if (c.current = e, c.current === void 0) return;
+			l.current(e - c.current);
+		}
+		s.current = t(u);
+	}, d = () => {
+		s.current && e(s.current);
+	};
+	return r(() => {
+		if (o) {
+			s.current = t(u);
+			return;
+		}
+		return d(), () => d();
+	}, [o]), {
+		request: u,
+		cancel: d
+	};
+};
+//#endregion
+export { a as useAnimationFrame };
+
+//# sourceMappingURL=useAnimationFrame.mjs.map

package/dist/esm/utils/hooks/useAnimationFrame.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAnimationFrame.mjs","names":[],"sources":["../../../../src/utils/hooks/useAnimationFrame.ts"],"sourcesContent":["import { useIsomorphicLayoutEffect } from '@siberiacancode/reactuse';\nimport { useEffect, useRef } from 'react';\n\nimport { cancelAnimationFrame, requestAnimationFrame } from '../helpers';\n\n/**\n * Helps request and cancel animation frame\n *\n * @param {Function} callback - frame request callback\n * @param {boolean} active - should animation frame be requested\n * @return {object} request/cancel animation frame handlers\n */\nexport const useAnimationFrame = (callback: (time: number) => void, active?: boolean) => {\n  const animationFrameRequestRef = useRef<number>(undefined);\n  const previousTimestampRef = useRef<number>(undefined);\n  const savedHandlerRef = useRef(callback);\n\n  useIsomorphicLayoutEffect(() => {\n    savedHandlerRef.current = callback;\n  }, [callback]);\n\n  const onFrameRequest = (timestamp?: DOMHighResTimeStamp) => {\n    if (timestamp) {\n      previousTimestampRef.current = timestamp;\n      if (previousTimestampRef.current === undefined) return;\n      savedHandlerRef.current(timestamp - previousTimestampRef.current);\n    }\n\n    animationFrameRequestRef.current = requestAnimationFrame(onFrameRequest);\n  };\n\n  const onFrameCancel = () => {\n    if (!animationFrameRequestRef.current) return;\n    cancelAnimationFrame(animationFrameRequestRef.current);\n  };\n\n  useEffect(() => {\n    if (active) {\n      animationFrameRequestRef.current = requestAnimationFrame(onFrameRequest);\n      return;\n    }\n\n    onFrameCancel();\n    return () => onFrameCancel();\n  }, [active]);\n\n  return {\n    request: onFrameRequest,\n    cancel: onFrameCancel\n  };\n};\n"],"mappings":";;;;AAYA,IAAa,KAAqB,GAAkC,MAAqB;CACvF,IAAM,IAA2B,EAAe,KAAA,CAAS,GACnD,IAAuB,EAAe,KAAA,CAAS,GAC/C,IAAkB,EAAO,CAAQ;CAEvC,QAAgC;EAC9B,EAAgB,UAAU;CAC5B,GAAG,CAAC,CAAQ,CAAC;CAEb,IAAM,KAAkB,MAAoC;EAC1D,IAAI,GAAW;GAEb,IADA,EAAqB,UAAU,GAC3B,EAAqB,YAAY,KAAA,GAAW;GAChD,EAAgB,QAAQ,IAAY,EAAqB,OAAO;EAClE;EAEA,EAAyB,UAAU,EAAsB,CAAc;CACzE,GAEM,UAAsB;EACrB,EAAyB,WAC9B,EAAqB,EAAyB,OAAO;CACvD;CAYA,OAVA,QAAgB;EACd,IAAI,GAAQ;GACV,EAAyB,UAAU,EAAsB,CAAc;GACvE;EACF;EAGA,OADA,EAAc,SACD,EAAc;CAC7B,GAAG,CAAC,CAAM,CAAC,GAEJ;EACL,SAAS;EACT,QAAQ;CACV;AACF"}

package/dist/index.d.mts

@@ -0,0 +1,4 @@
+export { useWebcam } from './components/Webcam/hooks';
+export { Webcam } from './components/Webcam/Webcam';
+export { useAnimationFrame } from './utils/hooks';
+export { applyMediaStreamConstraints, canGetUserMedia, getDevices, getMediaStream, getMediaStreamConstraints, getVideoFrameCanvas, getWebcamSnapshot, stopMediaStream } from '@webcam/core';