use-device-camera 1.0.1

package/LICENSE

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

package/README.md

@@ -0,0 +1,153 @@
+# use-device-camera
+
+A React hook for easy camera device integration, providing access to media streams, device enumeration, track capabilities, and image capture.
+
+## Installation
+
+```bash
+npm install use-device-camera
+```
+
+## Usage
+
+### 1. Wrap your app with `CameraProvider`
+
+First, wrap your component tree with `CameraProvider`. This manages the media stream and permissions.
+
+```tsx
+import { CameraProvider } from 'use-device-camera';
+
+function App() {
+  return (
+    <CameraProvider
+      initOnMount={true}
+      defaultConstraints={{ video: true, audio: false }}
+      onPermissionError={(err) => console.error('Permission failed:', err)}
+    >
+      <MyCameraComponent />
+    </CameraProvider>
+  );
+}
+```
+
+### 2. Access the Camera Stream
+
+Use the `useCamera` hook to access the current `MediaStream`, list of devices, and permission states.
+
+```tsx
+import { useEffect, useRef } from 'react';
+import { useCamera } from 'use-device-camera';
+
+function MyCameraComponent() {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const { stream, devices, loadDevices } = useCamera();
+
+  useEffect(() => {
+    if (videoRef.current && stream) {
+      videoRef.current.srcObject = stream;
+    }
+  }, [stream]);
+
+  return (
+    <div>
+      <video ref={videoRef} autoPlay playsInline muted />
+      <button onClick={loadDevices}>Refresh Devices</button>
+      <ul>
+        {devices.map((device) => (
+          <li key={device.deviceId}>{device.label}</li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+```
+
+### 3. Control Media Track (Zoom, Focus, etc.)
+
+Use `useMediaTrack` to access the underlying video track and apply constraints.
+
+```tsx
+import { useMediaTrack } from 'use-device-camera';
+
+function Controls() {
+  const { applyConstraints, capabilities, settings } = useMediaTrack();
+
+  const handleZoom = (event) => {
+    applyConstraints({ advanced: [{ zoom: Number(event.target.value) }] });
+  };
+
+  if (!capabilities?.zoom) return null;
+
+  return (
+    <input
+      type="range"
+      min={capabilities.zoom.min}
+      max={capabilities.zoom.max}
+      step={capabilities.zoom.step}
+      onChange={handleZoom}
+    />
+  );
+}
+```
+
+### 4. Capture Images
+
+Use `useImageCapture` to take high-resolution photos.
+
+```tsx
+import { useImageCapture } from 'use-device-camera';
+
+function Snapshot() {
+  const { takePhoto } = useImageCapture();
+
+  const handleCapture = async () => {
+    const blob = await takePhoto();
+    if (blob) {
+      const url = URL.createObjectURL(blob);
+      window.open(url);
+    }
+  };
+
+  return <button onClick={handleCapture}>Take Photo</button>;
+}
+```
+
+## API
+
+### `<CameraProvider />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `initOnMount` | `boolean` | `true` | Request camera access automatically on mount. |
+| `defaultConstraints` | `MediaStreamConstraints` | `{ video: true, audio: true }` | Initial constraints for `getUserMedia`. |
+| `onPermissionError` | `(err: unknown) => void` | `undefined` | Callback for permission errors. |
+
+### `useCamera()`
+
+Returns:
+- `stream`: `MediaStream | null`
+- `devices`: `MediaDeviceInfo[]`
+- `requestPermission(constraints?)`: `Promise<MediaStream | null>`
+- `loadDevices()`: `Promise<MediaDeviceInfo[]>`
+- `cameraPermissionState`: `PermissionState`
+- `audioPermissionState`: `PermissionState`
+
+### `useMediaTrack()`
+
+Returns:
+- `trackManager`: `MediaStreamTrack | undefined`
+- `applyConstraints(constraints)`: `Promise<void>`
+- `settings`: `MediaTrackSettings`
+- `capabilities`: `MediaTrackCapabilities`
+
+### `useImageCapture()`
+
+Returns:
+- `imageCaptureManager`: `ImageCapture | undefined`
+- `takePhoto(settings?)`: `Promise<Blob | null>`
+- `photoSettings`: `PhotoSettings`
+- `photoCapabilities`: `PhotoCapabilities`
+
+## License
+
+MIT

package/dist/CameraProvider.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+interface CameraProviderProps {
+    children: ReactNode;
+    initOnMount?: boolean;
+    defaultConstraints?: MediaStreamConstraints;
+    onPermissionError?: (err: unknown) => void;
+}
+export default function CameraProvider({ children, initOnMount, defaultConstraints, onPermissionError, }: CameraProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useCamera(): {
+    stream: MediaStream | null;
+    devices: MediaDeviceInfo[];
+    requestPermission: (constraints?: MediaStreamConstraints) => Promise<MediaStream | null>;
+    loadDevices: () => Promise<MediaDeviceInfo[]>;
+    cameraPermissionState: PermissionState;
+    audioPermissionState: PermissionState;
+};
+export {};

package/dist/ImageCaptureManager.d.ts

@@ -0,0 +1,8 @@
+declare class ImageCaptureManager {
+    imageCapture: ImageCapture | null;
+    constructor(mediaStreamTrack?: MediaStreamTrack);
+    takePhoto(photoSettings: PhotoSettings, onError?: (err: unknown) => void): Promise<Blob | null>;
+    getPhotoSettings(): Promise<PhotoSettings | undefined>;
+    getPhotoCapabilities(): Promise<PhotoCapabilities | undefined>;
+}
+export default ImageCaptureManager;

package/dist/MediaTrackManager.d.ts

@@ -0,0 +1,9 @@
+declare class MediaTrackManager {
+    mediaStreamTrack: MediaStreamTrack | null;
+    constructor(mediaStreamTrack?: MediaStreamTrack);
+    applyConstraints(constraints: MediaTrackConstraints, onError?: (err: unknown) => void): Promise<void | null>;
+    getConstraints(): MediaTrackConstraints | undefined;
+    getSettings(): MediaTrackSettings | undefined;
+    getCapabilities(): MediaTrackCapabilities | undefined;
+}
+export default MediaTrackManager;

package/dist/hooks/index.d.ts

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

package/dist/hooks/useImageCapture.d.ts

@@ -0,0 +1,7 @@
+declare function useImageCapture(): {
+    imageCaptureManager: ImageCapture | undefined;
+    takePhoto: (photoSettings: PhotoSettings, onError?: (err: unknown) => void) => Promise<Blob | null>;
+    photoSettings: PhotoSettings | undefined;
+    photoCapabilities: PhotoCapabilities | undefined;
+};
+export default useImageCapture;

package/dist/hooks/useMediaTrack.d.ts

@@ -0,0 +1,8 @@
+declare function useMediaTrack(): {
+    trackManager: MediaStreamTrack | undefined;
+    applyConstraints: (constraints: MediaTrackConstraints, onError?: (err: unknown) => void) => Promise<null | undefined>;
+    constraints: MediaTrackConstraints | undefined;
+    settings: MediaTrackSettings | undefined;
+    capabilities: MediaTrackCapabilities | undefined;
+};
+export default useMediaTrack;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { default as CameraProvider, useCamera } from './CameraProvider';
+export { useImageCapture, useMediaTrack } from './hooks';

package/dist/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const k=require("react/jsx-runtime"),e=require("react"),h=e.createContext({stream:null,devices:[],requestPermission:()=>Promise.resolve(null),loadDevices:()=>Promise.resolve([]),cameraPermissionState:"denied",audioPermissionState:"denied"});function b({children:a,initOnMount:t=!0,defaultConstraints:l={video:!0,audio:!0},onPermissionError:o}){const[g,u]=e.useState(null),[c,m]=e.useState([]),[r,n]=e.useState("denied"),[s,p]=e.useState("denied"),C=e.useCallback(async i=>{let v=null;try{v=await navigator.mediaDevices.getUserMedia(i||l),u(v)}catch(d){o?.(d)}return v},[l]),S=e.useCallback(()=>navigator.mediaDevices?.enumerateDevices?new Promise((i,v)=>navigator.mediaDevices.enumerateDevices().then(d=>{m(d),i(d)}).catch(d=>{v(d)})):(console.warn("enumerateDevices() not supported."),Promise.resolve([])),[]);e.useEffect(()=>{S()},[]),e.useEffect(()=>{t&&C()},[t]),e.useEffect(()=>{navigator.permissions.query({name:"camera"}).then(i=>{i.onchange=()=>{n(i.state)}}),navigator.permissions.query({name:"microphone"}).then(i=>{i.onchange=()=>{p(i.state)}})},[]);const f=e.useMemo(()=>({stream:g,devices:c,requestPermission:C,loadDevices:S,cameraPermissionState:r,audioPermissionState:s}),[g,c,C,S,r,s]);return k.jsx(h.Provider,{value:f,children:a})}function P(){const a=e.useContext(h);if(!a)throw new Error("Must wrapped with CameraProvider");return a}function y(){const{stream:a}=P(),[t,l]=e.useState(),[o,g]=e.useState(),[u,c]=e.useState(),m=e.useCallback(async(r,n)=>{if(!t)return null;try{return await t.takePhoto(r)}catch(s){n?.(s)}return null},[t]);return e.useEffect(()=>{if(!a)return;const r=new ImageCapture(a.getVideoTracks()?.[0]);l(r),r.getPhotoCapabilities().then(n=>c(n)),r.getPhotoSettings().then(n=>g(n))},[a]),e.useMemo(()=>({imageCaptureManager:t,takePhoto:m,photoSettings:o,photoCapabilities:u}),[t,m,o,u])}function M(){const{stream:a}=P(),[t,l]=e.useState(),[o,g]=e.useState(),[u,c]=e.useState(),[m,r]=e.useState(),n=e.useCallback(async(s,p)=>{if(t){try{await t?.applyConstraints(s),c(t?.getSettings());return}catch(C){p?.(C)}return null}},[t]);return e.useEffect(()=>{if(!a)return;const s=a.getVideoTracks()?.[0];l(s),r(s?.getCapabilities()),c(s?.getSettings()),g(s?.getConstraints())},[a]),e.useMemo(()=>({trackManager:t,applyConstraints:n,constraints:o,settings:u,capabilities:m}),[t,n,o,u,m])}exports.CameraProvider=b;exports.useCamera=P;exports.useImageCapture=y;exports.useMediaTrack=M;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/CameraProvider.tsx","../src/hooks/useImageCapture.ts","../src/hooks/useMediaTrack.ts"],"sourcesContent":["import type { ReactNode } from 'react'\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react'\n\nconst CameraContext = createContext<{\n  stream: MediaStream | null\n  devices: MediaDeviceInfo[]\n  requestPermission: (constraints?: MediaStreamConstraints) => Promise<MediaStream | null>\n  loadDevices: () => Promise<MediaDeviceInfo[]>\n  cameraPermissionState: PermissionState\n  audioPermissionState: PermissionState\n}>({\n  stream: null,\n  devices: [],\n  requestPermission: () => Promise.resolve(null),\n  loadDevices: () => Promise.resolve([]),\n  cameraPermissionState: 'denied',\n  audioPermissionState: 'denied',\n})\n\ninterface CameraProviderProps {\n  children: ReactNode\n  initOnMount?: boolean\n  defaultConstraints?: MediaStreamConstraints\n  onPermissionError?: (err: unknown) => void\n}\n\nexport default function CameraProvider({\n  children,\n  initOnMount = true,\n  defaultConstraints = { video: true, audio: true },\n  onPermissionError,\n}: CameraProviderProps) {\n  const [stream, setStream] = useState<MediaStream | null>(null)\n  const [devices, setDevices] = useState<MediaDeviceInfo[]>([])\n  const [cameraPermissionState, setCameraPermissionState]\n    = useState<PermissionState>('denied')\n  const [audioPermissionState, setAudioPermissionState]\n    = useState<PermissionState>('denied')\n\n  const requestPermission = useCallback(async (constraints?: MediaStreamConstraints) => {\n    let stream = null\n    try {\n      stream = await navigator.mediaDevices.getUserMedia(constraints || defaultConstraints)\n      setStream(stream)\n    }\n    catch (err) {\n      onPermissionError?.(err)\n    }\n    return stream\n  }, [defaultConstraints])\n\n  const loadDevices = useCallback(() => {\n    if (!navigator.mediaDevices?.enumerateDevices) {\n      console.warn('enumerateDevices() not supported.')\n      return Promise.resolve([])\n    }\n    return new Promise<MediaDeviceInfo[]>((resolve, reject) => navigator.mediaDevices\n      .enumerateDevices()\n      .then((devices) => {\n        setDevices(devices)\n        resolve(devices)\n      })\n      .catch((err) => {\n        reject(err)\n      }),\n    )\n  }, [])\n\n  useEffect(() => {\n    loadDevices()\n  }, [])\n\n  useEffect(() => {\n    if (!initOnMount)\n      return\n    requestPermission()\n  }, [initOnMount])\n\n  useEffect(() => {\n    navigator.permissions.query({ name: 'camera' }).then((permissionStatus) => {\n      permissionStatus.onchange = () => {\n        setCameraPermissionState(permissionStatus.state)\n      }\n    })\n    navigator.permissions\n      .query({ name: 'microphone' })\n      .then((permissionStatus) => {\n        permissionStatus.onchange = () => {\n          setAudioPermissionState(permissionStatus.state)\n        }\n      })\n  }, [])\n\n  const memoedValue = useMemo(\n    () => ({\n      stream,\n      devices,\n      requestPermission,\n      loadDevices,\n      cameraPermissionState,\n      audioPermissionState,\n    }),\n    [stream, devices, requestPermission, loadDevices, cameraPermissionState, audioPermissionState],\n  )\n\n  return (\n    <CameraContext.Provider value={memoedValue}>\n      {children}\n    </CameraContext.Provider>\n  )\n}\n\nexport function useCamera() {\n  const context = useContext(CameraContext)\n  if (!context) {\n    throw new Error('Must wrapped with CameraProvider')\n  }\n  return context\n}\n","import { useCallback, useEffect, useMemo, useState } from 'react'\nimport { useCamera } from '../CameraProvider'\n\nfunction useImageCapture() {\n  const { stream } = useCamera()\n  const [imageCaptureManager, setImageCaptureManager] = useState<ImageCapture>()\n  const [photoSettings, setPhotoSettings] = useState<PhotoSettings>()\n  const [photoCapabilities, setPhotoCapabilities] = useState<PhotoCapabilities>()\n\n  const takePhoto = useCallback(async (\n    photoSettings: PhotoSettings,\n    onError?: (err: unknown) => void,\n  ) => {\n    if (!imageCaptureManager)\n      return null\n    try {\n      return await imageCaptureManager.takePhoto(photoSettings)\n    }\n    catch (err) {\n      onError?.(err)\n    }\n    return null\n  }, [imageCaptureManager])\n\n  useEffect(() => {\n    if (!stream)\n      return\n\n    const imageCapture = new ImageCapture(stream.getVideoTracks()?.[0])\n    setImageCaptureManager(imageCapture)\n    imageCapture.getPhotoCapabilities().then(capabilities => setPhotoCapabilities(capabilities))\n    imageCapture.getPhotoSettings().then(settings => setPhotoSettings(settings))\n  }, [stream])\n\n  return useMemo(() => ({\n    imageCaptureManager,\n    takePhoto,\n    photoSettings,\n    photoCapabilities,\n  }), [imageCaptureManager, takePhoto, photoSettings, photoCapabilities])\n}\n\nexport default useImageCapture\n","import { useCallback, useEffect, useMemo, useState } from 'react'\nimport { useCamera } from '../CameraProvider'\n\nfunction useMediaTrack() {\n  const { stream } = useCamera()\n  const [trackManager, setTrackManager] = useState<MediaStreamTrack>()\n  const [constraints, setConstraints] = useState<MediaTrackConstraints>()\n  const [settings, setSettings] = useState<MediaTrackSettings>()\n  const [capabilities, setCapabilities] = useState<MediaTrackCapabilities>()\n\n  const applyConstraints = useCallback(async (\n    constraints: MediaTrackConstraints,\n    onError?: (err: unknown) => void,\n  ) => {\n    if (!trackManager)\n      return\n    try {\n      await trackManager?.applyConstraints(constraints)\n      setSettings(trackManager?.getSettings())\n      return\n    }\n    catch (err) {\n      onError?.(err)\n    }\n    return null\n  }, [trackManager])\n\n  useEffect(() => {\n    if (!stream)\n      return\n\n    const track = stream.getVideoTracks()?.[0]\n    setTrackManager(track)\n    setCapabilities(track?.getCapabilities())\n    setSettings(track?.getSettings())\n    setConstraints(track?.getConstraints())\n  }, [stream])\n\n  return useMemo(() => ({\n    trackManager,\n    applyConstraints,\n    constraints,\n    settings,\n    capabilities,\n  }), [trackManager, applyConstraints, constraints, settings, capabilities])\n}\n\nexport default useMediaTrack\n"],"names":["CameraContext","createContext","CameraProvider","children","initOnMount","defaultConstraints","onPermissionError","stream","setStream","useState","devices","setDevices","cameraPermissionState","setCameraPermissionState","audioPermissionState","setAudioPermissionState","requestPermission","useCallback","constraints","err","loadDevices","resolve","reject","useEffect","permissionStatus","memoedValue","useMemo","useCamera","context","useContext","useImageCapture","imageCaptureManager","setImageCaptureManager","photoSettings","setPhotoSettings","photoCapabilities","setPhotoCapabilities","takePhoto","onError","imageCapture","capabilities","settings","useMediaTrack","trackManager","setTrackManager","setConstraints","setSettings","setCapabilities","applyConstraints","track"],"mappings":"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"}

package/dist/index.mjs

@@ -0,0 +1,120 @@
+import { jsx as D } from "react/jsx-runtime";
+import { createContext as b, useState as a, useCallback as C, useEffect as h, useMemo as S, useContext as M } from "react";
+const w = b({
+  stream: null,
+  devices: [],
+  requestPermission: () => Promise.resolve(null),
+  loadDevices: () => Promise.resolve([]),
+  cameraPermissionState: "denied",
+  audioPermissionState: "denied"
+});
+function T({
+  children: t,
+  initOnMount: e = !0,
+  defaultConstraints: g = { video: !0, audio: !0 },
+  onPermissionError: o
+}) {
+  const [l, c] = a(null), [u, m] = a([]), [s, n] = a("denied"), [r, P] = a("denied"), p = C(async (i) => {
+    let v = null;
+    try {
+      v = await navigator.mediaDevices.getUserMedia(i || g), c(v);
+    } catch (d) {
+      o?.(d);
+    }
+    return v;
+  }, [g]), f = C(() => navigator.mediaDevices?.enumerateDevices ? new Promise(
+    (i, v) => navigator.mediaDevices.enumerateDevices().then((d) => {
+      m(d), i(d);
+    }).catch((d) => {
+      v(d);
+    })
+  ) : (console.warn("enumerateDevices() not supported."), Promise.resolve([])), []);
+  h(() => {
+    f();
+  }, []), h(() => {
+    e && p();
+  }, [e]), h(() => {
+    navigator.permissions.query({ name: "camera" }).then((i) => {
+      i.onchange = () => {
+        n(i.state);
+      };
+    }), navigator.permissions.query({ name: "microphone" }).then((i) => {
+      i.onchange = () => {
+        P(i.state);
+      };
+    });
+  }, []);
+  const k = S(
+    () => ({
+      stream: l,
+      devices: u,
+      requestPermission: p,
+      loadDevices: f,
+      cameraPermissionState: s,
+      audioPermissionState: r
+    }),
+    [l, u, p, f, s, r]
+  );
+  return /* @__PURE__ */ D(w.Provider, { value: k, children: t });
+}
+function y() {
+  const t = M(w);
+  if (!t)
+    throw new Error("Must wrapped with CameraProvider");
+  return t;
+}
+function I() {
+  const { stream: t } = y(), [e, g] = a(), [o, l] = a(), [c, u] = a(), m = C(async (s, n) => {
+    if (!e)
+      return null;
+    try {
+      return await e.takePhoto(s);
+    } catch (r) {
+      n?.(r);
+    }
+    return null;
+  }, [e]);
+  return h(() => {
+    if (!t)
+      return;
+    const s = new ImageCapture(t.getVideoTracks()?.[0]);
+    g(s), s.getPhotoCapabilities().then((n) => u(n)), s.getPhotoSettings().then((n) => l(n));
+  }, [t]), S(() => ({
+    imageCaptureManager: e,
+    takePhoto: m,
+    photoSettings: o,
+    photoCapabilities: c
+  }), [e, m, o, c]);
+}
+function V() {
+  const { stream: t } = y(), [e, g] = a(), [o, l] = a(), [c, u] = a(), [m, s] = a(), n = C(async (r, P) => {
+    if (e) {
+      try {
+        await e?.applyConstraints(r), u(e?.getSettings());
+        return;
+      } catch (p) {
+        P?.(p);
+      }
+      return null;
+    }
+  }, [e]);
+  return h(() => {
+    if (!t)
+      return;
+    const r = t.getVideoTracks()?.[0];
+    g(r), s(r?.getCapabilities()), u(r?.getSettings()), l(r?.getConstraints());
+  }, [t]), S(() => ({
+    trackManager: e,
+    applyConstraints: n,
+    constraints: o,
+    settings: c,
+    capabilities: m
+  }), [e, n, o, c, m]);
+}
+export {
+  T as CameraProvider,
+  y as useCamera,
+  I as useImageCapture,
+  V as useMediaTrack
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../src/CameraProvider.tsx","../src/hooks/useImageCapture.ts","../src/hooks/useMediaTrack.ts"],"sourcesContent":["import type { ReactNode } from 'react'\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react'\n\nconst CameraContext = createContext<{\n  stream: MediaStream | null\n  devices: MediaDeviceInfo[]\n  requestPermission: (constraints?: MediaStreamConstraints) => Promise<MediaStream | null>\n  loadDevices: () => Promise<MediaDeviceInfo[]>\n  cameraPermissionState: PermissionState\n  audioPermissionState: PermissionState\n}>({\n  stream: null,\n  devices: [],\n  requestPermission: () => Promise.resolve(null),\n  loadDevices: () => Promise.resolve([]),\n  cameraPermissionState: 'denied',\n  audioPermissionState: 'denied',\n})\n\ninterface CameraProviderProps {\n  children: ReactNode\n  initOnMount?: boolean\n  defaultConstraints?: MediaStreamConstraints\n  onPermissionError?: (err: unknown) => void\n}\n\nexport default function CameraProvider({\n  children,\n  initOnMount = true,\n  defaultConstraints = { video: true, audio: true },\n  onPermissionError,\n}: CameraProviderProps) {\n  const [stream, setStream] = useState<MediaStream | null>(null)\n  const [devices, setDevices] = useState<MediaDeviceInfo[]>([])\n  const [cameraPermissionState, setCameraPermissionState]\n    = useState<PermissionState>('denied')\n  const [audioPermissionState, setAudioPermissionState]\n    = useState<PermissionState>('denied')\n\n  const requestPermission = useCallback(async (constraints?: MediaStreamConstraints) => {\n    let stream = null\n    try {\n      stream = await navigator.mediaDevices.getUserMedia(constraints || defaultConstraints)\n      setStream(stream)\n    }\n    catch (err) {\n      onPermissionError?.(err)\n    }\n    return stream\n  }, [defaultConstraints])\n\n  const loadDevices = useCallback(() => {\n    if (!navigator.mediaDevices?.enumerateDevices) {\n      console.warn('enumerateDevices() not supported.')\n      return Promise.resolve([])\n    }\n    return new Promise<MediaDeviceInfo[]>((resolve, reject) => navigator.mediaDevices\n      .enumerateDevices()\n      .then((devices) => {\n        setDevices(devices)\n        resolve(devices)\n      })\n      .catch((err) => {\n        reject(err)\n      }),\n    )\n  }, [])\n\n  useEffect(() => {\n    loadDevices()\n  }, [])\n\n  useEffect(() => {\n    if (!initOnMount)\n      return\n    requestPermission()\n  }, [initOnMount])\n\n  useEffect(() => {\n    navigator.permissions.query({ name: 'camera' }).then((permissionStatus) => {\n      permissionStatus.onchange = () => {\n        setCameraPermissionState(permissionStatus.state)\n      }\n    })\n    navigator.permissions\n      .query({ name: 'microphone' })\n      .then((permissionStatus) => {\n        permissionStatus.onchange = () => {\n          setAudioPermissionState(permissionStatus.state)\n        }\n      })\n  }, [])\n\n  const memoedValue = useMemo(\n    () => ({\n      stream,\n      devices,\n      requestPermission,\n      loadDevices,\n      cameraPermissionState,\n      audioPermissionState,\n    }),\n    [stream, devices, requestPermission, loadDevices, cameraPermissionState, audioPermissionState],\n  )\n\n  return (\n    <CameraContext.Provider value={memoedValue}>\n      {children}\n    </CameraContext.Provider>\n  )\n}\n\nexport function useCamera() {\n  const context = useContext(CameraContext)\n  if (!context) {\n    throw new Error('Must wrapped with CameraProvider')\n  }\n  return context\n}\n","import { useCallback, useEffect, useMemo, useState } from 'react'\nimport { useCamera } from '../CameraProvider'\n\nfunction useImageCapture() {\n  const { stream } = useCamera()\n  const [imageCaptureManager, setImageCaptureManager] = useState<ImageCapture>()\n  const [photoSettings, setPhotoSettings] = useState<PhotoSettings>()\n  const [photoCapabilities, setPhotoCapabilities] = useState<PhotoCapabilities>()\n\n  const takePhoto = useCallback(async (\n    photoSettings: PhotoSettings,\n    onError?: (err: unknown) => void,\n  ) => {\n    if (!imageCaptureManager)\n      return null\n    try {\n      return await imageCaptureManager.takePhoto(photoSettings)\n    }\n    catch (err) {\n      onError?.(err)\n    }\n    return null\n  }, [imageCaptureManager])\n\n  useEffect(() => {\n    if (!stream)\n      return\n\n    const imageCapture = new ImageCapture(stream.getVideoTracks()?.[0])\n    setImageCaptureManager(imageCapture)\n    imageCapture.getPhotoCapabilities().then(capabilities => setPhotoCapabilities(capabilities))\n    imageCapture.getPhotoSettings().then(settings => setPhotoSettings(settings))\n  }, [stream])\n\n  return useMemo(() => ({\n    imageCaptureManager,\n    takePhoto,\n    photoSettings,\n    photoCapabilities,\n  }), [imageCaptureManager, takePhoto, photoSettings, photoCapabilities])\n}\n\nexport default useImageCapture\n","import { useCallback, useEffect, useMemo, useState } from 'react'\nimport { useCamera } from '../CameraProvider'\n\nfunction useMediaTrack() {\n  const { stream } = useCamera()\n  const [trackManager, setTrackManager] = useState<MediaStreamTrack>()\n  const [constraints, setConstraints] = useState<MediaTrackConstraints>()\n  const [settings, setSettings] = useState<MediaTrackSettings>()\n  const [capabilities, setCapabilities] = useState<MediaTrackCapabilities>()\n\n  const applyConstraints = useCallback(async (\n    constraints: MediaTrackConstraints,\n    onError?: (err: unknown) => void,\n  ) => {\n    if (!trackManager)\n      return\n    try {\n      await trackManager?.applyConstraints(constraints)\n      setSettings(trackManager?.getSettings())\n      return\n    }\n    catch (err) {\n      onError?.(err)\n    }\n    return null\n  }, [trackManager])\n\n  useEffect(() => {\n    if (!stream)\n      return\n\n    const track = stream.getVideoTracks()?.[0]\n    setTrackManager(track)\n    setCapabilities(track?.getCapabilities())\n    setSettings(track?.getSettings())\n    setConstraints(track?.getConstraints())\n  }, [stream])\n\n  return useMemo(() => ({\n    trackManager,\n    applyConstraints,\n    constraints,\n    settings,\n    capabilities,\n  }), [trackManager, applyConstraints, constraints, settings, capabilities])\n}\n\nexport default useMediaTrack\n"],"names":["CameraContext","createContext","CameraProvider","children","initOnMount","defaultConstraints","onPermissionError","stream","setStream","useState","devices","setDevices","cameraPermissionState","setCameraPermissionState","audioPermissionState","setAudioPermissionState","requestPermission","useCallback","constraints","err","loadDevices","resolve","reject","useEffect","permissionStatus","memoedValue","useMemo","useCamera","context","useContext","useImageCapture","imageCaptureManager","setImageCaptureManager","photoSettings","setPhotoSettings","photoCapabilities","setPhotoCapabilities","takePhoto","onError","imageCapture","capabilities","settings","useMediaTrack","trackManager","setTrackManager","setConstraints","setSettings","setCapabilities","applyConstraints","track"],"mappings":"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"}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "use-device-camera",
+  "version": "1.0.1",
+  "description": "A React hook for easy camera device integration",
+  "author": "JosephMG",
+  "license": "MIT",
+  "homepage": "https://github.com/josephMG/use-device-camera#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/josephMG/use-device-camera.git"
+  },
+  "bugs": {
+    "url": "https://github.com/josephMG/use-device-camera/issues"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "react",
+    "hook",
+    "camera",
+    "webcam",
+    "media-stream",
+    "use-camera"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "peerDependencies": {
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^6.4.1",
+    "@babel/preset-react": "^7.28.5",
+    "@babel/preset-typescript": "^7.28.5",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.6",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-lib-inject-css": "^2.2.2"
+  }
+}