{"_id":"@alzera/vue-use-camera","_rev":"4-57036e0af3b0b54463cac144b1449a67","name":"@alzera/vue-use-camera","description":"Camera composable for Vue apps","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.2":{"name":"@alzera/vue-use-camera","version":"1.0.2","keywords":["vue","camera","take photo","take picture","photo","picture","composable","vue-use-camera","take video","record video","video"],"author":{"name":"Alzera Cita","email":"alzeracita23@gmail.com"},"license":"MIT","_id":"@alzera/vue-use-camera@1.0.2","homepage":"https://github.com/Alzera/vue-use-camera#readme","bugs":{"url":"https://github.com/Alzera/vue-use-camera/issues"},"dist":{"shasum":"cfd8b02f951631ec79927d676ad4e827da6640b3","tarball":"https://registry.npmjs.org/@alzera/vue-use-camera/-/vue-use-camera-1.0.2.tgz","fileCount":17,"integrity":"sha512-RPXwnZSVLywjnpr0N2Ite7MPkB5ArEM20/0jDjMfidbKKw61Yx3nWW/9tXgO+yLhxh1NBIF53T74XiSrHv1eiQ==","signatures":[{"sig":"MEQCIC6p1RoVijxx9G0veAh5umjrzgOonpWgoPL6E0/eOJJLAiBnOQYKVWjB+tNUKct8ddC7IS0VMXe6qs5QIFyrhujbsA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33714},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","gitHead":"4549b3b63931cc75eb51925e42a131b179382354","private":false,"scripts":{"dev":"vite","build":"vue-tsc && vite build","preview":"vite preview"},"_npmUser":{"name":"alzera","email":"alzeracita23@gmail.com"},"repository":{"url":"git+https://github.com/Alzera/vue-use-camera.git","type":"git"},"_npmVersion":"10.2.3","description":"Camera composable for Vue apps","directories":{},"_nodeVersion":"20.10.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^5.2.0","vue-tsc":"^2.0.6","typescript":"^5.2.2","@types/node":"^20.12.7","@vueuse/core":"^10.11.0","vite-plugin-dts":"^3.8.3","@vitejs/plugin-vue":"^5.0.4"},"peerDependencies":{"vue":"^3.4.21"},"_npmOperationalInternal":{"tmp":"tmp/vue-use-camera_1.0.2_1719925754044_0.3221700236425784","host":"s3://npm-registry-packages"}},"1.0.3":{"name":"@alzera/vue-use-camera","private":false,"version":"1.0.3","description":"Camera composable for Vue apps","license":"MIT","author":{"name":"Alzera Cita","email":"alzeracita23@gmail.com"},"keywords":["vue","camera","take photo","take picture","photo","picture","composable","vue-use-camera","take video","record video","video"],"repository":{"type":"git","url":"git+https://github.com/Alzera/vue-use-camera.git"},"bugs":{"url":"https://github.com/Alzera/vue-use-camera/issues"},"homepage":"https://github.com/Alzera/vue-use-camera#readme","type":"module","main":"dist/index.js","types":"dist/index.d.ts","scripts":{"dev":"vite","build":"vue-tsc && vite build","preview":"vite preview"},"devDependencies":{"@types/node":"^20.12.7","@vitejs/plugin-vue":"^5.0.4","@vueuse/core":"^10.11.0","typescript":"^5.2.2","vite":"^5.2.0","vite-plugin-dts":"^3.8.3","vue-tsc":"^2.0.6"},"peerDependencies":{"vue":"^3.4.21"},"_id":"@alzera/vue-use-camera@1.0.3","gitHead":"4549b3b63931cc75eb51925e42a131b179382354","_nodeVersion":"20.10.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-kiW2Q5Jy4VpeJ8juJHRgeaUSapA7AGVp621tocgr5XMGjOV+sgDlTPZanaXZGO2r5dI/fNHPInZuXuCTnuXCmQ==","shasum":"42642b9f75c2e1c3bec94c1b664767a49fc46901","tarball":"https://registry.npmjs.org/@alzera/vue-use-camera/-/vue-use-camera-1.0.3.tgz","fileCount":17,"unpackedSize":33806,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/mMOeAj68jE6DPmTsW3p0mGWd6y+5jqafLaHxPDzZoQIgRxJ/I0z+0IltwTyiUQuq7p8jJLaiLqDUyXz8eEs99TQ="}]},"_npmUser":{"name":"alzera","email":"alzeracita23@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-use-camera_1.0.3_1719928295063_0.39081752100874456"},"_hasShrinkwrap":false}},"time":{"created":"2024-07-02T13:09:13.972Z","modified":"2024-07-02T13:51:35.376Z","1.0.0":"2024-06-27T07:18:41.661Z","1.0.1":"2024-07-02T13:06:29.274Z","1.0.2":"2024-07-02T13:09:14.218Z","1.0.3":"2024-07-02T13:51:35.232Z"},"maintainers":[{"name":"alzera","email":"alzeracita23@gmail.com"}],"author":{"name":"Alzera Cita","email":"alzeracita23@gmail.com"},"repository":{"type":"git","url":"git+https://github.com/Alzera/vue-use-camera.git"},"keywords":["vue","camera","take photo","take picture","photo","picture","composable","vue-use-camera","take video","record video","video"],"license":"MIT","homepage":"https://github.com/Alzera/vue-use-camera#readme","bugs":{"url":"https://github.com/Alzera/vue-use-camera/issues"},"readme":"# Vue Use Camera\n\nA Vue composable for handling Camera API also utilities for taking photos and videos.\n\n## Installation\n\n```bash\nnpm install @alzera/vue-use-camera\n```\n\n## Usage\n\n```vue\n<script setup lang=\"ts\">\nimport { useCamera, useTakePhoto, useTakeVideo } from '@alzera/vue-use-camera'\nconst controller = useCamera({\n  autoPause: true,\n})\nconst photoController = useTakePhoto(controller)\nconst videoController = useTakeVideo(controller)\n\nconst resultPhoto = ref<string>()\nconst resultVideo = ref<Blob>()\n\nconst selectedChange = (e: Event) => {\n  if (!e.target) return;\n  const target = e.target as HTMLInputElement\n  controller.device.selected = controller.device.list.find((d) => d.deviceId === target.value)\n}\n\nconst createUrl = (blob: Blob) => {\n  return URL.createObjectURL(blob)\n}\n\nconst takePhoto = async () => {\n  resultPhoto.value = await photoController.takeAsDataURL()\n  if(resultPhoto.value) resultVideo.value = undefined\n}\n\nconst takeVideo = async () => {\n  resultVideo.value = await videoController.stop()\n  if(resultVideo.value) resultPhoto.value = undefined\n}\n</script>\n\n<template>\n  <div id=\"camera-preview\">\n    <video :ref=\"controller.video\" preload=\"none\" playsInline muted style=\"max-width: 500px;\"></video><br/>\n    <select :value=\"controller.device.selected?.deviceId\" @change=\"selectedChange\">\n      <option v-for=\"(d, i) in controller.device.list\" :key=\"i\" :value=\"d.deviceId\">{{ d.label }}</option>\n    </select>\n    <button @click=\"takePhoto\">Take Photo</button>\n    <button v-if=\"videoController.state === 'inactive'\" @click=\"videoController.start\">Start Video</button>\n    <button v-if=\"videoController.state === 'recording'\" @click=\"videoController.pause\">Pause Video</button>\n    <button v-if=\"videoController.state === 'paused'\" @click=\"videoController.resume\">Resume Video</button>\n    <button v-if=\"videoController.state === 'recording'\" @click=\"takeVideo\">Stop Video</button><br/>\n    <img v-if=\"resultPhoto\" :src=\"resultPhoto\" />\n    <video v-if=\"resultVideo\" :src=\"createUrl(resultVideo)\" controls />\n  </div>\n</template>\n```\n\n## API\n\n### useCamera\n\n```ts\nuseCamera({\n  onError?: (error: any) => void;\n  useLastDeviceId?: boolean;\n  autoStart?: boolean;\n  autoPause?: boolean;\n  constraints?: MediaStreamConstraints;\n}): CameraController\n```\n\n### useTakePhoto\n\n```ts\nuseTakePhoto(controller: CameraController, mime?: string): UseTakePhoto\n```\n\n### useTakeVideo\n\n```ts\nuseTakeVideo(controller: CameraController, mime?: string): UseTakeVideo\n```\n\n### CameraController\n\n```ts\nreadonly video: Ref<HTMLVideoElement | undefined>;\nreadonly camera: {\n  readonly capabilities: MediaTrackCapabilities | undefined;\n  readonly state: CameraState;\n  stream: MediaStream | null;\n  torch: boolean;\n};\nreadonly device: {\n  list: MediaDeviceInfo[];\n  selected: MediaDeviceInfo | undefined;\n  lastSelected: string | undefined;\n};\n```\n\n### UseTakePhoto\n\n```ts\ntakeAsBlob(): Promise<Blob | undefined>;\ntakeAsDataURL(): Promise<string | undefined>;\n```\n\n### UseTakeVideo\n\n```ts\nreadonly state: RecordingState;\nstart(): void;\npause(): void;\nresume(): void;\nstop(): Promise<Blob | undefined>;\n```\n\n## License\n\nMIT","readmeFilename":"README.md"}