{"_id":"@webcam/core","_rev":"1-65b1b2c9f9e0c1ffa27bcfd44f0922a2","name":"@webcam/core","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@webcam/core","version":"1.0.0","description":"Ultimate tool for working with media stream","license":"MIT","author":{"name":"SIBERIA CAN CODE 🧊","url":"https://github.com/siberiacancode"},"contributors":[{"name":"Mironychev Michael","url":"https://github.com/michael-mir"},{"name":"Dmitry Babin","url":"https://github.com/debabin"},{"name":"Sergey Kryavkin","url":"https://github.com/RiceWithMeat"}],"engines":{"node":">=14"},"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/siberiacancode/webcam.git"},"homepage":"https://github.com/siberiacancode/webcam","bugs":{"url":"https://github.com/siberiacancode/webcam/issues"},"main":"dist/cjs/index.js","module":"dist/esm/index.js","types":"dist/index.d.ts","scripts":{"build":"shx rm -rf dist && rollup -c --bundleConfigAsCjs","lint":"eslint . --ext ts --no-error-on-unmatched-pattern --fix","format":"prettier --write **/*.{js,ts}","type":"tsc --noEmit","pretty":"yarn type && yarn format && yarn lint"},"lint-staged":{"*.js":"prettier --write","*.ts":["prettier --write","eslint --no-error-on-unmatched-pattern --fix"]},"devDependencies":{"@siberiacancode/builder":"^1.3.0","@siberiacancode/eslint":"^1.1.0","@siberiacancode/prettier":"^1.1.0","@types/node":"^20.11.19","eslint":"^8.56.0","shx":"^0.3.4","typescript":"^5.3.3"},"keywords":["media","video","canvas","camera","webcam","stream","userMedia","navigator","screenshot","constraints","getUserMedia","webcam-canvas"],"_id":"@webcam/core@1.0.0","gitHead":"e0a0a4212ebd922852d06dc3d9b1e76ba63592e0","_nodeVersion":"18.19.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-rQsuxnCvAwOaLoiWR+pD0GO/sGaSIJ6KVk6siYQSnAAZsdq21qnVs/aFtRqdL39a69XIdvlQlIaVqYfgGVYJVA==","shasum":"eac00c9f5d2c19d542df17830392dc5dd92670e7","tarball":"https://registry.npmjs.org/@webcam/core/-/core-1.0.0.tgz","fileCount":83,"unpackedSize":123429,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDk7MfJw3cObUgauu88mHDVSPJ4Fg4A9qK2ts+6NJoUHwIhAO+fGmtBaO6ZxL3gegKC5ZA4iJut93xdpiZYacPjwnep"}]},"_npmUser":{"name":"hwapedro","email":"dmitriybabinup@gmail.com"},"directories":{},"maintainers":[{"name":"hwapedro","email":"dmitriybabinup@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/core_1.0.0_1712342713838_0.45129666979335004"},"_hasShrinkwrap":false},"1.0.1":{"name":"@webcam/core","version":"1.0.1","description":"Ultimate tool for working with media stream","license":"MIT","author":{"name":"SIBERIA CAN CODE 🧊","url":"https://github.com/siberiacancode"},"contributors":[{"name":"Mironychev Michael","url":"https://github.com/michael-mir"},{"name":"Dmitry Babin","url":"https://github.com/debabin"},{"name":"Sergey Kryavkin","url":"https://github.com/RiceWithMeat"}],"engines":{"node":">=14"},"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/siberiacancode/webcam.git"},"homepage":"https://github.com/siberiacancode/webcam","bugs":{"url":"https://github.com/siberiacancode/webcam/issues"},"main":"dist/cjs/index.js","module":"dist/esm/index.js","types":"dist/index.d.ts","scripts":{"build":"shx rm -rf dist && rollup -c --bundleConfigAsCjs","lint":"eslint . --ext ts --no-error-on-unmatched-pattern --fix","format":"prettier --write **/*.{js,ts}","type":"tsc --noEmit","pretty":"yarn type && yarn format && yarn lint"},"lint-staged":{"*.js":"prettier --write","*.ts":["prettier --write","eslint --no-error-on-unmatched-pattern --fix"]},"devDependencies":{"@siberiacancode/builder":"^1.3.0","@siberiacancode/eslint":"^1.1.0","@siberiacancode/prettier":"^1.1.0","@types/node":"^20.11.19","eslint":"^8.56.0","shx":"^0.3.4","typescript":"^5.3.3"},"keywords":["media","video","canvas","camera","webcam","stream","userMedia","navigator","screenshot","constraints","getUserMedia","webcam-canvas"],"_id":"@webcam/core@1.0.1","gitHead":"521368c0982d559940a2d67b6a264980c4ff8442","_nodeVersion":"18.19.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-N422fDE1iJ5pc5IiLh2NhvxQPFYTMLDbw+x0YtREGMDg4S05qvRgD8Au0N0/JoQUVvS7Vw+ns16/jYPUDgljtQ==","shasum":"89394d0faaf97ea842952735d7fbfe0aaf45abd6","tarball":"https://registry.npmjs.org/@webcam/core/-/core-1.0.1.tgz","fileCount":83,"unpackedSize":124646,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBim9XpQwRZ64obMjr9g/da3JLRIwspfLoSegpVytaNtAiEA9Ibew8Kk87y1VFCyobgyhxM0dPJmgoyf2Yry0FYeP3o="}]},"_npmUser":{"name":"hwapedro","email":"dmitriybabinup@gmail.com"},"directories":{},"maintainers":[{"name":"hwapedro","email":"dmitriybabinup@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/core_1.0.1_1712422956556_0.3130065410257066"},"_hasShrinkwrap":false}},"time":{"created":"2024-04-05T18:45:13.751Z","1.0.0":"2024-04-05T18:45:14.002Z","modified":"2024-04-06T17:02:36.915Z","1.0.1":"2024-04-06T17:02:36.710Z"},"maintainers":[{"name":"hwapedro","email":"dmitriybabinup@gmail.com"}],"description":"Ultimate tool for working with media stream","homepage":"https://github.com/siberiacancode/webcam","keywords":["media","video","canvas","camera","webcam","stream","userMedia","navigator","screenshot","constraints","getUserMedia","webcam-canvas"],"repository":{"type":"git","url":"git+https://github.com/siberiacancode/webcam.git"},"contributors":[{"name":"Mironychev Michael","url":"https://github.com/michael-mir"},{"name":"Dmitry Babin","url":"https://github.com/debabin"},{"name":"Sergey Kryavkin","url":"https://github.com/RiceWithMeat"}],"author":{"name":"SIBERIA CAN CODE 🧊","url":"https://github.com/siberiacancode"},"bugs":{"url":"https://github.com/siberiacancode/webcam/issues"},"license":"MIT","readme":"# 📸 Webcam Core\r\n\r\nUltimate tool for working with media stream\r\n\r\n## References\r\n\r\n- [**Demo**](https://react-webcam-ultimate.vercel.app/en/javascript)\r\n- [**Web API**](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia)\r\n- [**Browser Сompatibility**](https://caniuse.com/stream)\r\n\r\n## Installation\r\n\r\nInstall with [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/)\r\n\r\n```shell\r\nnpm i @webcam/core\r\n# or\r\nyarn add @webcam/core\r\n```\r\n\r\n## 🦉 Philosophy\r\n\r\n📸 **Webcam Core** 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.\r\n\r\n## Features\r\n\r\n- TypeScript support out of the box - full typed package\r\n- Webcam Snapshots - creating an image from a video stream\r\n- Media Stream Handling - request, errors, update, stop, etc\r\n- Advanced Video Settings - selecting camera type and resolution\r\n- Legacy API Support - outdated implementations for each browser\r\n\r\n## Usage\r\n\r\n```javascript\r\nimport {\r\n  applyMediaStreamConstraints,\r\n  getMediaStream,\r\n  getMediaStreamConstraints,\r\n  stopMediaStream\r\n} from '@webcam/core';\r\n\r\nlet runningStream: MediaStream | undefined;\r\n\r\nconst requestStream = async (params: GetMediaStreamConstraintsParams) => {\r\n  try {\r\n    runningStream = await getMediaStream(params, 5000);\r\n  } catch (error) {\r\n    console.error(error);\r\n  }\r\n};\r\n\r\nconst updateConstraints = async (params: GetMediaStreamConstraintsParams) => {\r\n  try {\r\n    const constraints = await getMediaStreamConstraints(params);\r\n\r\n    applyMediaStreamConstraints(runningStream, constraints)\r\n  } catch {\r\n    requestMediaStream(params);\r\n  }\r\n};\r\n\r\nconst stopStream = () => stopMediaStream(runningStream);\r\n\r\nrequestStream({ mainCamera: true }, { width: 1920, height: 1080 });\r\n```\r\n\r\n## API\r\n\r\n### getUserMedia\r\n\r\nAdds extra error handling and support for legacy [getUserMedia](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) implementation.\r\n\r\n**NOTE:** The function can only be used in a [secure context](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts). For example, when a page is loaded using `HTTPS` or a page loaded from `localhost`. Otherwise the function will throw an error.\r\n\r\n### getMediaStream\r\n\r\nAccepts custom parameters and uses getUserMedia to get an instance of the [MediaStream](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream).\r\n\r\n- `params?`: {GetMediaStreamConstraintsParams} - Parameters passed to `getMediaStreamConstraints` function\r\n- `timeLimitMs?`: {number} - Time limit for MediaStream request execution\r\n\r\n### getMediaStreamConstraints\r\n\r\nGenerates and returns media stream constraints by passed options.\r\n\r\n- `constraints?`: {MediaStreamConstraints} - External primary constraints (override output)\r\n- `options?`: {MediaTrackConstraintsOptions} - Options for constraints generating\r\n  - `muted?`: {boolean} - Excludes audio constraints from the MediaStream request\r\n  - ... {VideoTrackConstraintsOptions} - Options passed to `getVideoTrackConstraints` function\r\n\r\n### getVideoTrackConstraints\r\n\r\nGenerates and returns video track constraints by passed options.\r\n\r\n- `frontCamera?` {boolean} - Should use a front camera (MediaTrackConstraints['facingFront'] === 'user')\r\n- `mainCamera?` {boolean | GetMainCameraParams} - Should find and use the main camera by default/passed label patterns\r\n- `cameraResolutionType?` {CameraResolutionType} - Video track resolution size (width x height)\r\n  - `HD` - 1280 x 720\r\n  - `FHD` - 1920 x 1080\r\n  - `QHD` - 2560 x 1440\r\n  - `UHD` - 3840 x 2160\r\n- `cameraResolutionMode?` {keyof ConstrainULongRange} - Video track resolution mode\r\n  - `min` - Value is the smallest permissible. If the value cannot remain equal to or greater than this value, matching will fail.\r\n  - `max` - Value is the largest permissible. If the value cannot remain equal to or less than this value, matching will fail.\r\n  - `exact` - Value is specific and required. If the value cannot be considered acceptable, the match will fail.\r\n  - `ideal` - If possible, a value will be used, but if it's not possible, the user agent will use the closest possible match.\r\n\r\n### getMainCamera\r\n\r\nReturns main camera [info](https://developer.mozilla.org/en-US/docs/Web/API/MediaDeviceInfo) in accordance with the default or passed parameters.\r\n\r\n**NOTE:** Requires [browser support](https://caniuse.com/mdn-api_mediadevices_enumeratedevices) for Navigator.MediaDevices.[enumerateDevices](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices) to work.\r\n\r\n- `params?` {GetMainCameraParams} - Pattern for searching the main camera device info by its label\r\n  - {RegExp} - General default pattern\r\n  - {Object} - Patterns for front and main cameras\r\n    - `back?` {RegExp} - Value `(?=.*\\bback\\b)(?=.*\\b0\\b)` is using as default\r\n    - `front?` {RegExp} - Value `\\bfront\\b` is using as default\r\n- `isFrontCamera?` {boolean} - Should the front camera be searched (back camera as default)\r\n\r\n### applyMediaStreamConstraints\r\n\r\nApplies a set of audio and video constraints to the corresponding media stream tracks.\r\n\r\n**NOTE:** New constraints apply only within the previously used source.\r\n\r\n- `stream` {MediaStream} - Media stream instance\r\n- `constraints` {MediaStreamConstraints} - Constraints to be applied\r\n\r\n### stopMediaStream\r\n\r\nStops and removes audio and video tracks from the stream.\r\n\r\n- `stream?` {MediaStream | MediaStreamTrack} - Media stream or its track instance\r\n\r\n### hasGetUserMedia\r\n\r\nChecks for the presence of getUserMedia in mediaDevices.\r\n\r\n### canGetUserMedia\r\n\r\nChecks the possibility of using any implementation of getUserMedia.\r\n\r\n### getWebcamSnapshot\r\n\r\nReturns a base64 encoded string of the current video stream frame in the specified format and quality.\r\n\r\n- `source` {HTMLVideoElement} - Video element instance with provided media stream\r\n- `options?` {GetWebcamSnapshotOptions} - Options for getting webcam snapshot\r\n  - `format?` - {image/webp | image/png | image/jpeg} - A string indicating the image format (default === image/jpeg)\r\n  - `quality?` - {number} - A number between 0 and 1 indicating the image quality (only for image/jpeg or image/webp)\r\n  - ... {GetVideoFrameCanvasOptions} - Options passed to `getVideoFrameCanvas` function\r\n\r\n### getVideoFrameCanvas\r\n\r\nReturns a canvas with a drawn image of the current video stream frame in accordance with the passed options.\r\n\r\n- `source` {HTMLVideoElement} - Video element instance with provided media stream\r\n- `options?` {GetVideoFrameCanvasOptions} - Options for getting video frame canvas\r\n  - `width?` {number} - Width of the canvas on which the image will be drawn\r\n  - `height?` {number} - Height of the canvas on which the image will be drawn\r\n  - `mirrored?` {boolean} - Should the drawing image be mirrored horizontally\r\n  - `imageSmoothingEnabled?` {boolean} - Should smooth scaled image or not (default === true)\r\n\r\n## ✨ Contributors\r\n\r\n<table>\r\n  <tr>\r\n    <td align=\"center\" style=\"word-wrap: break-word; width: 100; height: 100\">\r\n        <a href=\"https://github.com/michael-mir\">\r\n            <img src=\"https://avatars.githubusercontent.com/u/88126915?v=4\"\r\n            width=\"100;\"  \r\n            alt=\"michael-mir\" />\r\n            <br />\r\n            <sub style=\"font-size:13px\"><b>🌶️ michael-mir</b></sub>\r\n        </a>\r\n    </td>\r\n    <td align=\"center\" style=\"word-wrap: break-word; width: 100; height: 100\">\r\n        <a href=\"https://github.com/debabin\">\r\n            <img src=\"https://avatars.githubusercontent.com/u/45297354?v=4\"\r\n            width=\"100;\"  \r\n            alt=\"debabin\" />\r\n            <br />\r\n            <sub style=\"font-size:13px\"><b>🧊 debabin</b></sub>\r\n        </a>\r\n    </td>\r\n    <td align=\"center\" style=\"word-wrap: break-word; width: 100.0; height: 100.0\">\r\n        <a href=\"https://github.com/RiceWithMeat\">\r\n            <img src=\"https://avatars.githubusercontent.com/u/47690223?v=4\"\r\n            width=\"100;\"  \r\n            alt=\"RiceWithMeat\" />\r\n            <br />\r\n            <sub style=\"font-size:13px\"><b>🐘 RiceWithMeat</b></sub>\r\n        </a>\r\n    </td>\r\n  </tr>\r\n</table>\r\n","readmeFilename":"README.md"}