{"id":19359663,"url":"https://github.com/camerakit/camerakit-js","last_synced_at":"2025-04-23T11:32:46.890Z","repository":{"id":37912822,"uuid":"158761153","full_name":"CameraKit/camerakit-js","owner":"CameraKit","description":"Library for Web Camera API. Increase ease of use and compatibility in your next project","archived":false,"fork":false,"pushed_at":"2023-03-03T00:55:34.000Z","size":1064,"stargazers_count":46,"open_issues_count":13,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-02T14:53:55.684Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://camerakit.io","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CameraKit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-11-23T00:09:04.000Z","updated_at":"2024-12-27T02:25:49.000Z","dependencies_parsed_at":"2024-01-23T21:35:32.925Z","dependency_job_id":null,"html_url":"https://github.com/CameraKit/camerakit-js","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CameraKit%2Fcamerakit-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CameraKit%2Fcamerakit-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CameraKit%2Fcamerakit-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CameraKit%2Fcamerakit-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CameraKit","download_url":"https://codeload.github.com/CameraKit/camerakit-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250425519,"owners_count":21428576,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-10T07:15:42.304Z","updated_at":"2025-04-23T11:32:46.488Z","avatar_url":"https://github.com/CameraKit.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://camerakit.io\" target=\"_blank\"\u003e\n        \u003cimg alt='CameraKit Header' src='.repo/gh-readme-header.svg' /\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://spectrum.chat/camerakit/\"\u003e\n        \u003cimg alt=\"Join Spectrum\" height=\"42px\" src=\".repo/gh-readme-spectrum-button.svg\" \u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://buddy.works/\" target=\"_blank\"\u003e\n        \u003cimg alt='Buddy.Works' height=\"41px\" src='https://assets.buddy.works/automated-dark.svg'/\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\nCameraKit helps you add reliable camera to your app quickly. Our open source camera platform provides consistent capture results, service that scales, and endless camera possibilities.\n\nWith CameraKit Web you are able to effortlessly do the following:\n\n- ✅ Create custom capture streams\n- ✅ Capture image and video from the same stream\n- ✅ Handle permissions automatically\n- ✅ Set custom media sources\n- ✅ Change stream resolution\n- 📷 Capture images\n- 📹 Record video\n- 📹 Start, stop and pause video recording\n- 🧲 Download images and videos\n\n## Other Camera Implementations\n\nCameraKit Web as the name suggests, is our camera platform for websites. In addition to Web, we provide our camera interface on the following platforms:\n\n- [CameraKit Android](https://github.com/CameraKit/camerakit-android)\n- [CameraKit iOS](https://github.com/CameraKit/camerakit-ios)\n\n## Browser support\n\n| Browser        | Preview | Pictures | Recording |\n| -------------- | ------- | -------- | --------- |\n| Desktop Chrome | ✅      | ✅       | ✅        |\n| Android Chrome | ✅      | ✅       | ✅        |\n| Firefox        | ✅      | ✅       | ✅        |\n| Edge           | ✅      | ✅       | ✅        |\n| Desktop Safari | ✅      | ✅       | ✅        |\n| Mobile Safari  | ✅      | ✅       | ✅        |\n\n## Sponsored By\n\n\u003ca href=\"https://www.expensify.com/\"\u003e\u003cimg alt=\"Expensify\" src=\".repo/gh-readme-expensify-logo.svg\" height=\"45px\" width=\"375px\" align=\"center\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.buddy.works/\"\u003e\u003cimg alt=\"Buddy.Works\" src=\".repo/gh-readme-buddyworks-logo.png\" height=\"100px\"  width=\"250px\" align=\"center\"\u003e\u003c/a\u003e\n\n# Getting Started\n\n## Setup\n\nInstall the `camerakit` package.\n\n```\n$ npm install camerakit\n```\n\n## Usage\n\nImport and use `camerakit` in your project.\n\n```js\nimport camerakit from \"camerakit\";\n```\n\nOr, alternatively, you can import via a script tag:\n\n```html\n\u003cscript src=\"path/to/camerakit.min.js\"\u003e\u003c/script\u003e\n\u003c!-- You can now access `camerakit` from the global scope --\u003e\n```\n\nFor additional Safari requirements, see [Safari support details](#safari).\n\n### Example usage:\n\n```js\nasync function () {\n  const devices = await camerakit.getDevices();\n\n  const preview = await camerakit.createCaptureStream({\n    audio: devices.audio[0],\n    video: devices.video[0]\n  });\n\n  preview.setResolution({width: 1920, height: 1080});\n  const myPicture = preview.shutter.capture();\n\n  preview.recorder.start();\n\n  // Wait...\n\n  // Pause the recording \u0026 resume\n  await preview.recorder.pause();\n  await preview.recorder.start();\n\n  // Wait some more...\n\n  const recordedVideo = await preview.recorder.stop(); // Use the video yourself\n\n  preview.recorder.downloadLatestRecording(); // Download the video direct from browser\n\n  // Stop using camera\n  preview.destroy();\n\n  // Play video via camerakit player\n  const player = new camerakit.Player();\n  player.src = window.URL.createObjectURL(recordedVideo);\n\n  // Use the video player wherever you want!\n  document.getElementById(\"your-player-container\").appendChild(player);\n  player.play();\n}\n```\n\n## Safari support details\u003ca id=\"safari\"\u003e\u003c/a\u003e\n\nCurrently, the WebAssembly and JS worker files used for video recording and playback on Safari must be hosted seperately on a webserver. The compiled files can be found in `dist/browser/`, ensure they're accessible via a public URL (e.g `https://myurl.com/myWorkerFile.js`).\n\nIf you'd like to host the wasm/worker files in a custom path, you'll need to update the `base` param on `camerakit.Loader` and as well as to `fallbackConfig` when calling `createCaptureStream`:\n\n```js\nimport camerakit from \"camerakit\";\n\nasync function () {\n  // Point fallback video player to correct directory\n  camerakit.Loader.base = \"/webm\";\n\n  const myStream = await camerakit.createCaptureStream({\n    video: ...,\n    audio: ...,\n    fallbackConfig: {\n      base: \"/webm\" // Point fallback recorder\n    }\n  });\n}\n\n```\n\n## API documentation\n\n### `camerakit`\n\n#### Methods\n\n| Name                            | Parameters                                                                             | Return                                                            | Description                                                     |\n| ------------------------------- | -------------------------------------------------------------------------------------- | ----------------------------------------------------------------- | --------------------------------------------------------------- |\n| `camerakit.getDevices`          | none                                                                                   | `Promise\u003c{audio: Array\u003cMediaSource\u003e, video: Array\u003cMediaSource\u003e}\u003e` | Returns available media devices for streaming                   |\n| `camerakit.createCaptureStream` | `{audio?: MediaSource, video?: MediaSource, fallbackConfig?: Partial\u003cFallbackConfig\u003e}` | `Promise\u003cCaptureStream\u003e`                                          | Creates new `CaptureStream` instance with provided media inputs |\n| `camerakit.enableStorage`       | `{method?: \"localStorage\" \\| \"sessionStorage\" \\| null}`                                | `void`                                                            | Enables photo storage as a default                              |\n| `camerakit.disableStorage`      | none                                                                                   | `void`                                                            | Disables photo storage as a default                             |\n| `camerakit.enableDebug`         | none                                                                                   | `void`                                                            | Enables debug mode for logging output                           |\n| `camerakit.disableDebug`        | none                                                                                   | `void`                                                            | Disables debug mode                                             |\n\n#### Properties\n\n| Name               | Type     |\n| ------------------ | -------- |\n| `camerakit.Player` | `Player` |\n| `camerakit.Loader` | `Loader` |\n\n### `CaptureStream`\n\n#### Instance methods\n\n| Name                    | Parameters                                                                             | Return                 | Description                                                           |\n| ----------------------- | -------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------- |\n| `stream.init`           | none                                                                                   | `Promise\u003cvoid\u003e`        | Initializes stream and requests permissions from browser              |\n| `stream.setResolution`  | `{width?: number, height?: number, aspect?: number, source?: \"original\" \\| \"preview\"}` | `Promise\u003cvoid\u003e`        | Sets the video resolution of the specified source                     |\n| `stream.setSource`      | `{audio?: MediaSource, video?: MediaSource, source?: \"original\" \\| \"preview\"}`         | `Promise\u003cvoid\u003e`        | Overrides original media inputs for specified source                  |\n| `stream.getPreview`     | `{source?: \"original\" \\| \"preview\"}`                                                   | `HTMLVideoElement`     | Returns an video element with the appropriate internal event handlers |\n| `stream.getMediaStream` | `{source?: \"original\" \\| \"preview\"}`                                                   | `Promise\u003cMediaStream\u003e` | Returns raw `MediaStream` for use in video display                    |\n| `stream.destroy`        | none                                                                                   | `void`                 | Closes all open streams and cancels capture                           |\n\n#### Properties\n\n| Name              | Type       |\n| ----------------- | ---------- |\n| `stream.shutter`  | `Shutter`  |\n| `stream.recorder` | `Recorder` |\n\n### `Shutter`\n\nUsed for taking photos of the `CaptureStream`.\n\n### Instance methods\n\n| name                            | Parameters                                                                              | Return    | Description                                           |\n| ------------------------------- | --------------------------------------------------------------------------------------- | --------- | ----------------------------------------------------- |\n| `shutter.capture`               | `{source?: \"original\" \\| \"preview\", save?: \"localStorage\" \\| \"sessionStorage\" \\| null}` | `string`  | Takes and returns picture from specified source       |\n| `shutter.captureAndDownload`    | `{source?: \"original\" \\| \"preview\", filename?: string}`                                 | `boolean` | Calls `capture` and creates file download from result |\n| `shutter.downloadLatestCapture` | `filename?: string`                                                                     | `boolean` | Downloads the last picture taken                      |\n\n### `Recorder`\n\nUsed for recording video of the the `CaptureStream`.\n\n### Instance methods\n\n| name                               | Parameters                           | Return           | Description                                                |\n| ---------------------------------- | ------------------------------------ | ---------------- | ---------------------------------------------------------- |\n| `recorder.start`                   | `{source?: \"original\" \\| \"preview\"}` | `Promise\u003cvoid\u003e`  | Starts the recording from the specified source             |\n| `recorder.stop`                    | none                                 | `Promise\u003c?Blob\u003e` | Stops the recording and returns a completed video file     |\n| `recorder.pause`                   | none                                 | `Promise\u003cvoid\u003e`  | Pauses the recording until resumed with `recorder.start()` |\n| `recorder.getLatestRecording`      | none                                 | `?Blob`          | Returns last recorded video file                           |\n| `recorder.downloadLatestRecording` | `filename?: string`                  | `boolean`        | Creates file download from last video recording            |\n| `recorder.setMimeType`             | `mimeType: string`                   | `boolean`        | Sets the video recording mime type for all sources         |\n\n### `Player`\n\nA player following the `HTMLVideoElement` spec. Reccomended for playback as it can serve as a fallback for browsers that don't natively support `webm`.\n\nExample:\n\n```js\nconst player = new camerakit.Player();\n\nplayer.src = window.URL.createObjectURL(/* Your video Blob */);\n\nplayer.play();\nplayer.pause();\nplayer.muted = true;\nplayer.width = 1920;\nplayer.height = 1080;\n\n// Restart video playback\nplayer.stop();\nplayer.currentTime = 0;\nplayer.play();\n```\n\n**NOTE:** If your browser supports the exported video, creating a `Player` instance will return a vanilla `HTMLVideoElement`.\n\n### `Loader`\n\nExposed `OGVLoader`.\n\n### `FallbackConfig`\n\n**NOTE:** All fields are optional:\n\n```js\n{\n  base: string; // Base directory for wasm/worker files\n\n  width: number;\n  height: number;\n  bitrate: number;\n  framerate: number;\n}\n```\n\n## License\n\nCameraKit Web is [MIT License](https://github.com/CameraKit/camerakit-web/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcamerakit%2Fcamerakit-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcamerakit%2Fcamerakit-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcamerakit%2Fcamerakit-js/lists"}