@webcam/react 1.1.0 → 1.1.1

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

@@ -1,2 +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,applyConstraints:d,frontCamera:f,mainCamera:p,mirrored:m=!0,muted:h=!0,style:g={},children:_,onLoadedMetadata:v,onRequest:y,onError:b,onStart:x,onStop:S,...C})=>{let w=(0,r.useRef)(null),T=e??w;return t.useWebcam(T,{stream:a,applyConstraints:d,requestTimeLimit:u,onRequest:y,onError:b,onStart:x,onStop:S,videoConstraints:c,audioConstraints:l,cameraResolutionMode:o,cameraResolutionType:s,frontCamera:f,mainCamera:p,muted:h}),(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(`video`,{autoPlay:!0,playsInline:!0,ref:T,style:{...g,...m&&{transform:`${g.transform?`${g.transform} `:``}scaleX(-1)`}},controls:!1,muted:h,onLoadedMetadata:e=>{v?.(e),e.currentTarget.play()},...C}),typeof _==`function`?_({element:T.current,getCanvas:e=>T.current?(0,n.getVideoFrameCanvas)(T.current,{...e,mirrored:m}):void 0,getSnapshot:e=>T.current?(0,n.getWebcamSnapshot)(T.current,{...e,mirrored:m}):void 0}):_]})};exports.Webcam=a;
+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

@@ -1 +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  applyConstraints?: boolean;\n  audioConstraints?: MediaTrackConstraints;\n  children?: ReactNode | WebcamRenderProps;\n  innerRef?: RefObject<HTMLVideoElement>;\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: externalVideoRef,\n  stream: externalStream,\n  cameraResolutionMode,\n  cameraResolutionType,\n  videoConstraints,\n  audioConstraints,\n  requestTimeLimit,\n  applyConstraints,\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 = externalVideoRef ?? internalVideoRef;\n\n  useWebcam(videoRef, {\n    stream: externalStream,\n    // STREAM PARAMS:\n    applyConstraints,\n    requestTimeLimit,\n    // STREAM HANDLERS:\n    onRequest,\n    onError,\n    onStart,\n    onStop,\n    // DEFAULT CONSTRAINTS:\n    videoConstraints,\n    audioConstraints,\n    // CUSTOM CONSTRAINTS:\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":"gMAkDA,IAAa,GAAU,CACrB,IAAK,EACL,OAAQ,EACR,uBACA,uBACA,mBACA,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,GAAoB,EAuBrC,OArBA,EAAA,UAAU,EAAU,CAClB,OAAQ,EAER,mBACA,mBAEA,YACA,UACA,UACA,SAEA,mBACA,mBAEA,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"}
+{"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

@@ -1,2 +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,applyConstraints:o,videoConstraints:s,audioConstraints:c,cameraResolutionMode:l,cameraResolutionType:u,frontCamera:d,mainCamera:f,muted:p,onRequest:m,onError:h,onStart:g,onStop:_}=(i?r[1]:r[0])??{},v=(0,e.useRefState)(),y=i??v,b=(0,e.useMediaStream)(y,{immediately:!1,onStart:g,onStop:_,onError:h}),x=()=>(0,t.getMediaStreamConstraints)({constraints:{video:s,audio:c},options:{cameraResolutionMode:l,cameraResolutionType:u,frontCamera:d,mainCamera:f,muted:p}});return(0,e.useMount)(()=>{a||(async()=>{m?.();let e=await x();b.start(e)})()}),(0,e.useDidUpdate)(()=>{a||(async()=>{m?.();let e=await x();if(o&&b.stream){await b.apply(e)||b.start(e);return}b.start(e)})()},[o,s,c,l,u,d,f,p]),(0,n.useEffect)(()=>{if(!a)return;let t=e.isTarget.getElement(y);if(t)return t.srcObject=a,g?.(a),()=>{_?.(a)}},[a,i&&e.isTarget.getRawElement(i),v.state]),(0,e.useUnmount)(()=>{a||b.stop()}),i?{stream:a??b.stream,start:b.start,apply:b.apply,stop:b.stop}:{stream:a??b.stream,start:b.start,apply:b.apply,stop:b.stop,ref:v}});exports.useWebcam=r;
+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

@@ -1 +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  applyConstraints?: boolean;\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    applyConstraints,\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 resolvedTarget = (target ?? internalRef) as HookTarget;\n\n  const mediaStream = useMediaStream(resolvedTarget, {\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\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 (applyConstraints && 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    applyConstraints,\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(resolvedTarget) 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":"uFAsDA,IAAa,IAAc,GAAG,IAAkB,CAC9C,IAAM,GAAA,EAAA,EAAA,SAAA,CAAmB,EAAO,EAAE,EAAI,EAAO,GAAK,IAAA,GAG5C,CACJ,OAAQ,EACR,mBACA,mBACA,mBACA,uBACA,uBACA,cACA,aACA,QACA,YACA,UACA,UACA,WAfgB,EAAS,EAAO,GAAK,EAAO,KAA2B,CAAC,EAkBpE,GAAA,EAAA,EAAA,YAAA,CAA4C,EAC5C,EAAkB,GAAU,EAE5B,GAAA,EAAA,EAAA,eAAA,CAA6B,EAAgB,CACjD,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,EAoEH,OAlEA,EAAA,EAAA,SAAA,KAAe,CACT,IAQJ,SAPwB,CACtB,IAAY,EACZ,IAAM,EAAc,MAAM,EAAkB,EAE5C,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,GAAoB,EAAY,OAAQ,CAErC,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,EACA,CACF,CAAC,GAED,EAAA,EAAA,UAAA,KAAgB,CACd,GAAI,CAAC,EAAgB,OAErB,IAAM,EAAU,EAAA,SAAS,WAAW,CAAc,EAC7C,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"}
+{"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/components/Webcam/Webcam.d.ts

@@ -6,10 +6,8 @@ export type WebcamRenderProps = (options: {
     element: HTMLVideoElement | null;
 }) => ReactNode;
 interface BaseWebcamProps extends Omit<ComponentProps<'video'>, 'children' | 'onError'>, MediaTrackConstraintsOptions {
-    applyConstraints?: boolean;
     audioConstraints?: MediaTrackConstraints;
     children?: ReactNode | WebcamRenderProps;
-    innerRef?: RefObject<HTMLVideoElement>;
     mirrored?: boolean;
     ref?: RefObject<HTMLVideoElement>;
     requestTimeLimit?: number;
@@ -32,5 +30,5 @@ export type WebcamProps = WebcamPropsWithExternalStream | WebcamPropsWithInterna
  * @param {WebcamProps} props - The props for the Webcam component
  * @return {ReactElement} The rendered Webcam component
  */
-export declare const Webcam: ({ ref: externalVideoRef, stream: externalStream, cameraResolutionMode, cameraResolutionType, videoConstraints, audioConstraints, requestTimeLimit, applyConstraints, frontCamera, mainCamera, mirrored, muted, style, children, onLoadedMetadata, onRequest, onError, onStart, onStop, ...props }: WebcamProps) => React.JSX.Element;
+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/useWebcam.d.ts

@@ -1,7 +1,6 @@
 import { HookTarget, StateRef } from '@siberiacancode/reactuse';
 import { MediaTrackConstraintsOptions } from '@webcam/core';
 export interface UseWebcamParams extends MediaTrackConstraintsOptions {
-    applyConstraints?: boolean;
     audioConstraints?: MediaTrackConstraints;
     requestTimeLimit?: number;
     stream?: MediaStream;

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

@@ -3,48 +3,47 @@ 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, applyConstraints: m, frontCamera: h, mainCamera: g, mirrored: _ = !0, muted: v = !0, style: y = {}, children: b, onLoadedMetadata: x, onRequest: S, onError: C, onStart: w, onStop: T, ...E }) => {
-	let D = r(null), O = s ?? D;
-	return e(O, {
+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,
-		applyConstraints: m,
 		requestTimeLimit: p,
-		onRequest: S,
-		onError: C,
-		onStart: w,
-		onStop: T,
+		onRequest: x,
+		onError: S,
+		onStart: C,
+		onStop: w,
 		videoConstraints: d,
 		audioConstraints: f,
 		cameraResolutionMode: l,
 		cameraResolutionType: u,
-		frontCamera: h,
-		mainCamera: g,
-		muted: v
+		frontCamera: m,
+		mainCamera: h,
+		muted: _
 	}), /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a("video", {
 		autoPlay: !0,
 		playsInline: !0,
-		ref: O,
+		ref: D,
 		style: {
-			...y,
-			..._ && { transform: `${y.transform ? `${y.transform} ` : ""}scaleX(-1)` }
+			...v,
+			...g && { transform: `${v.transform ? `${v.transform} ` : ""}scaleX(-1)` }
 		},
 		controls: !1,
-		muted: v,
+		muted: _,
 		onLoadedMetadata: (e) => {
-			x?.(e), e.currentTarget.play();
+			b?.(e), e.currentTarget.play();
 		},
-		...E
-	}), typeof b == "function" ? b({
-		element: O.current,
-		getCanvas: (e) => O.current ? t(O.current, {
+		...T
+	}), typeof y == "function" ? y({
+		element: D.current,
+		getCanvas: (e) => D.current ? t(D.current, {
 			...e,
-			mirrored: _
+			mirrored: g
 		}) : void 0,
-		getSnapshot: (e) => O.current ? n(O.current, {
+		getSnapshot: (e) => D.current ? n(D.current, {
 			...e,
-			mirrored: _
+			mirrored: g
 		}) : void 0
-	}) : b] });
+	}) : y] });
 };
 //#endregion
 export { s as Webcam };

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

@@ -1 +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  applyConstraints?: boolean;\n  audioConstraints?: MediaTrackConstraints;\n  children?: ReactNode | WebcamRenderProps;\n  innerRef?: RefObject<HTMLVideoElement>;\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: externalVideoRef,\n  stream: externalStream,\n  cameraResolutionMode,\n  cameraResolutionType,\n  videoConstraints,\n  audioConstraints,\n  requestTimeLimit,\n  applyConstraints,\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 = externalVideoRef ?? internalVideoRef;\n\n  useWebcam(videoRef, {\n    stream: externalStream,\n    // STREAM PARAMS:\n    applyConstraints,\n    requestTimeLimit,\n    // STREAM HANDLERS:\n    onRequest,\n    onError,\n    onStart,\n    onStop,\n    // DEFAULT CONSTRAINTS:\n    videoConstraints,\n    audioConstraints,\n    // CUSTOM CONSTRAINTS:\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":";;;;;AAkDA,IAAa,KAAU,EACrB,KAAK,GACL,QAAQ,GACR,yBACA,yBACA,qBACA,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,KAAoB;CAuBrC,OArBA,EAAU,GAAU;EAClB,QAAQ;EAER;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EAEA;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"}
+{"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

@@ -3,39 +3,39 @@ 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, applyConstraints: d, videoConstraints: f, audioConstraints: p, cameraResolutionMode: m, cameraResolutionType: h, frontCamera: g, mainCamera: _, muted: v, onRequest: y, onError: b, onStart: x, onStop: S } = (l ? c[1] : c[0]) ?? {}, C = i(), w = l ?? C, T = n(w, {
+	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: x,
-		onStop: S,
-		onError: b
-	}), E = () => o({
+		onStart: b,
+		onStop: x,
+		onError: y
+	}), T = () => o({
 		constraints: {
-			video: f,
-			audio: p
+			video: d,
+			audio: f
 		},
 		options: {
-			cameraResolutionMode: m,
-			cameraResolutionType: h,
-			frontCamera: g,
-			mainCamera: _,
-			muted: v
+			cameraResolutionMode: p,
+			cameraResolutionType: m,
+			frontCamera: h,
+			mainCamera: g,
+			muted: _
 		}
 	});
 	return r(() => {
 		u || (async () => {
-			y?.();
-			let e = await E();
-			T.start(e);
+			v?.();
+			let e = await T();
+			w.start(e);
 		})();
 	}), t(() => {
 		u || (async () => {
-			y?.();
-			let e = await E();
-			if (d && T.stream) {
-				await T.apply(e) || T.start(e);
+			v?.();
+			let e = await T();
+			if (w.stream) {
+				await w.apply(e) || w.start(e);
 				return;
 			}
-			T.start(e);
+			w.start(e);
 		})();
 	}, [
 		d,
@@ -44,31 +44,30 @@ var c = ((...c) => {
 		m,
 		h,
 		g,
-		_,
-		v
+		_
 	]), s(() => {
 		if (!u) return;
-		let t = e.getElement(w);
-		if (t) return t.srcObject = u, x?.(u), () => {
-			S?.(u);
+		let t = e.getElement(C);
+		if (t) return t.srcObject = u, b?.(u), () => {
+			x?.(u);
 		};
 	}, [
 		u,
 		l && e.getRawElement(l),
-		C.state
+		S.state
 	]), a(() => {
-		u || T.stop();
+		u || w.stop();
 	}), l ? {
-		stream: u ?? T.stream,
-		start: T.start,
-		apply: T.apply,
-		stop: T.stop
+		stream: u ?? w.stream,
+		start: w.start,
+		apply: w.apply,
+		stop: w.stop
 	} : {
-		stream: u ?? T.stream,
-		start: T.start,
-		apply: T.apply,
-		stop: T.stop,
-		ref: C
+		stream: u ?? w.stream,
+		start: w.start,
+		apply: w.apply,
+		stop: w.stop,
+		ref: S
 	};
 });
 //#endregion

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

@@ -1 +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  applyConstraints?: boolean;\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    applyConstraints,\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 resolvedTarget = (target ?? internalRef) as HookTarget;\n\n  const mediaStream = useMediaStream(resolvedTarget, {\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\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 (applyConstraints && 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    applyConstraints,\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(resolvedTarget) 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":";;;;AAsDA,IAAa,MAAc,GAAG,MAAkB;CAC9C,IAAM,IAAU,EAAS,EAAO,EAAE,IAAI,EAAO,KAAK,KAAA,GAG5C,EACJ,QAAQ,GACR,qBACA,qBACA,qBACA,yBACA,yBACA,gBACA,eACA,UACA,cACA,YACA,YACA,eAfgB,IAAS,EAAO,KAAK,EAAO,OAA2B,CAAC,GAkBpE,IAAc,EAA8B,GAC5C,IAAkB,KAAU,GAE5B,IAAc,EAAe,GAAgB;EACjD,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;CAoEH,OAlEA,QAAe;EACT,MAQJ,YAPwB;GACtB,IAAY;GACZ,IAAM,IAAc,MAAM,EAAkB;GAE5C,EAAY,MAAM,CAAW;EAC/B,EAEA,CAAI;CACN,CAAC,GAED,QAAmB;EACb,MAeJ,YAbwB;GACtB,IAAY;GACZ,IAAM,IAAc,MAAM,EAAkB;GAE5C,IAAI,KAAoB,EAAY,QAAQ;IAE1C,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;EACA;CACF,CAAC,GAED,QAAgB;EACd,IAAI,CAAC,GAAgB;EAErB,IAAM,IAAU,EAAS,WAAW,CAAc;EAC7C,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"}
+{"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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@webcam/react",
   "type": "module",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Ultimate tool for working with media stream and displaying it in your React application",
   "author": {
     "name": "SIBERIA CAN CODE 🧊",