{"id":13810562,"url":"https://github.com/BastiaanJansen/simple-vue-camera","last_synced_at":"2025-05-14T10:34:01.360Z","repository":{"id":39861778,"uuid":"395407024","full_name":"BastiaanJansen/simple-vue-camera","owner":"BastiaanJansen","description":"A simple to use, but extensive, camera component for Vue 3 with Typescript support to create great camera experiences.","archived":false,"fork":false,"pushed_at":"2022-12-08T17:32:20.000Z","size":2797,"stargazers_count":76,"open_issues_count":11,"forks_count":18,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-25T01:04:13.410Z","etag":null,"topics":["camera","simple-vue-camera","snapshot","vue","vue3","vue3-typescript","vuejs","vuejs3","webcam"],"latest_commit_sha":null,"homepage":"","language":"Vue","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/BastiaanJansen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-08-12T18:13:23.000Z","updated_at":"2025-03-27T15:43:47.000Z","dependencies_parsed_at":"2023-01-25T15:01:08.167Z","dependency_job_id":null,"html_url":"https://github.com/BastiaanJansen/simple-vue-camera","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/BastiaanJansen%2Fsimple-vue-camera","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BastiaanJansen%2Fsimple-vue-camera/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BastiaanJansen%2Fsimple-vue-camera/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BastiaanJansen%2Fsimple-vue-camera/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BastiaanJansen","download_url":"https://codeload.github.com/BastiaanJansen/simple-vue-camera/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254121218,"owners_count":22018124,"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":["camera","simple-vue-camera","snapshot","vue","vue3","vue3-typescript","vuejs","vuejs3","webcam"],"created_at":"2024-08-04T02:01:00.547Z","updated_at":"2025-05-14T10:33:56.337Z","avatar_url":"https://github.com/BastiaanJansen.png","language":"Vue","funding_links":[],"categories":["Vue","Components \u0026 Libraries"],"sub_categories":["UI Components"],"readme":"# Simple Vue Camera\n\n[![Codacy Badge](https://app.codacy.com/project/badge/Grade/7d9578d39b5e4736be10095914541a07)](https://www.codacy.com/gh/BastiaanJansen/simple-vue-camera/dashboard?utm_source=github.com\u0026utm_medium=referral\u0026utm_content=BastiaanJansen/simple-vue-camera\u0026utm_campaign=Badge_Grade)\n![](https://img.shields.io/github/license/BastiaanJansen/simple-vue-camera)\n![](https://img.shields.io/github/issues/BastiaanJansen/simple-vue-camera)\n\nA simple to use, but extensive, camera component for Vue 3 with Typescript support to create great camera experiences like this:\n\n[![Phone camera](https://media.giphy.com/media/UuAkrsLaxI5AXDwJuQ/giphy.gif)](https://media.giphy.com/media/UuAkrsLaxI5AXDwJuQ/giphy.gif)\n\nBy default, this component does not render any UI elements on top of the video feed, so you can style it and make it your own.\n\n## Table of Contents\n\n-   [Installation](#installation)\n-   [Usage](#usage)\n    -   [Basics](#basics)\n    -   [Snapshots](#snapshots)\n    -   [Camera](#camera)\n    -   [Component information](#component-information)\n\n## Installation\n\nInstall Simple Vue Camera with NPM:\n\n```\nnpm install simple-vue-camera\n```\n\nor, with Yarn:\n\n```\nyarn install simple-vue-camera\n```\n\nAfter installation, you can register the `Camera` component globally in `main.ts`:\n\n```ts\nimport { createApp } from \"vue\";\nimport App from \"./App.vue\";\nimport Camera from \"simple-vue-camera\";\n\ncreateApp(App).component(\"camera\", Camera).mount(\"#app\");\n```\n\nor, register it to a specific component:\n\n```vue\n\u003cscript lang=\"ts\"\u003e\nimport { defineComponent } from \"vue\";\nimport Camera from \"simple-vue-camera\";\n\nexport default defineComponent({\n    components: {\n        Camera,\n    },\n});\n```\n\n## Usage\n\n### Basics\n\nAfter registering the `Camera` component, you can use it as follows:\n\n```vue\n\u003ctemplate\u003e\n    \u003ccamera :resolution=\"{ width: 375, height: 812 }\" autoplay\u003e\u003c/camera\u003e\n\u003c/template\u003e\n```\n\nUse the available slot to overlay UI on top of the video feed:\n\n```vue\n\u003ctemplate\u003e\n    \u003ccamera :resolution=\"{ width: 375, height: 812 }\" autoplay\u003e\n        \u003cbutton\u003eI'm on top of the video\u003c/button\u003e\n    \u003c/camera\u003e\n\u003c/template\u003e\n```\n\n### Snapshots\n\nTo create screenshots of the video feed, use the `snapshot` function on the component reference:\n\n```vue\n\u003ctemplate\u003e\n    \u003ccamera :resolution=\"{ width: 375, height: 812 }\" ref=\"camera\" autoplay\u003e\u003c/camera\u003e\n    \u003cbutton @click=\"snapshot\"\u003eCreate snapshot\u003c/button\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\"\u003e\nimport Camera from \"simple-vue-camera\";\n\nexport default defineComponent({\n    setup() {\n        // Get a reference of the component\n        const camera = ref\u003cInstanceType\u003ctypeof Camera\u003e\u003e();\n\n        // Use camera reference to call functions\n        const snapshot = async () =\u003e {\n            const blob = await camera.value?.snapshot();\n\n            // To show the screenshot with an image tag, create a url\n            const url = URL.createObjectURL(blob);\n        }\n\n        return {\n            camera,\n            snapshot\n        }\n    }\n});\n```\n\nBy default, when creating a snapshot, the resolution of the snapshot will be the same as the resolution of the camera feed. To change that, pass a `Resolution` with the function call:\n\n```ts\nconst blob = await camera.value?.snapshot({ width: 1920, height: 1080 });\n```\n\nOr change the image type and quality:\n\n```ts\nconst blob = await camera.value?.snapshot(\n    { width: 1920, height: 1080 },\n    \"image/png\",\n    0.5\n);\n```\n\n### Camera\n\nIt is possible to change the camera. First request all `videoinput` devices:\n\n```ts\nconst devices = camera.value?.devices([\"videoinput\"]);\n```\n\nPick a device, e.g. with a dropdown, and pass the device ID to the `changeCamera` function:\n\n```ts\nconst device = devices[0];\ncamera.value?.changeCamera(device.deviceId);\n```\n\n**Note:** When switching cameras, the camera component will restart and emit the `loading` and `started` events again.\n\n### Component information\n\n#### Properties\n\n|    Name     |           Type           | Default     | Description                                                                                                                           |\n| :---------: | :----------------------: | ----------- | ------------------------------------------------------------------------------------------------------------------------------------- |\n| resolution  |       `Resolution`       | 1920 x 1080 | The resolution of the camera view                                                                                                     |\n| facingMode  |         `string`         | environment |                                                                                                                                       |\n|  autoplay   |        `boolean`         | `true`      | Determines if the camera is automatically started when mounted, when set to false, you must start the camera programmatically         |\n| playsinline |        `boolean`         | `true`      | Determines if the camera plays inline instead of starting full screen, when set to false some browsers open a fullscreen video player |\n| constraints | `MediaStreamConstraints` |             | Change the default constraints                                                                                                        |\n\n#### Functions\n\n| Name            | Parameters                                                  | Description                                                          |\n| :-------------- | :---------------------------------------------------------- | -------------------------------------------------------------------- |\n| devices         | `kinds: MediaDeviceKind[]`                                  | Returns a list of compatible devices which matches the allowed kinds |\n| start           |                                                             | Starts the camera                                                    |\n| stop            |                                                             | Stops the camera                                                     |\n| pause           |                                                             | Pauses the video stream                                              |\n| resume          |                                                             | Resumes the video stream                                             |\n| changeCamera    | `deviceID: string`                                          | Changes the selected camera                                          |\n| snapshot        | `resolution: Resolution`, `type: string`, `quality: number` | Creates a snapshot of the current video image                        |\n| currentDeviceID |                                                             | Returns the currently used device id of the mediastream              |\n\n#### Events\n\nThe `Camera` component emits 7 different events.\n\n```vue\n\u003ctemplate\u003e\n    \u003ccamera\n        @loading=\"loading\"\n        @started=\"started\"\n        @stopped=\"stopped\"\n        @paused=\"paused\"\n        @resumed=\"resumed\"\n        @camera-change=\"cameraChange\"\n        @snapshot=\"snapshot\"\n        @error=\"error\"\n    \u003e\u003c/camera\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\"\u003e\nimport Camera from \"simple-vue-camera\";\n\nexport default defineComponent({\n    setup() {\n        const loading = () =\u003e console.log(\"Camera is loading and will start any second\");\n        const started = () =\u003e console.log(\"Camera has started\");\n        const stopped = () =\u003e console.log(\"Camera has stopped\");\n        const paused = () =\u003e console.log(\"Video feed has paused\");\n        const resumed = () =\u003e console.log(\"Video feed has resumed\");\n        const cameraChange = (deviceID: string) =\u003e console.log(`Camera has been changed to ${deviceID}`);\n        const snapshot = (blob: Blob) =\u003e console.log(\"A snapshot has been taken\");\n        const error = (error: Error) =\u003e console.log(\"error\");\n\n        return {\n            loading,\n            started,\n            stopped,\n            paused,\n            resumed,\n            cameraChange,\n            snapshot,\n            error\n        }\n    }\n});\n```\n\n|     Name      |     Parameters     | Description                                      |\n| :-----------: | :----------------: | ------------------------------------------------ |\n|    loading    |                    | Emitted when the camera is loading               |\n|    started    |                    | Emitted when the camera is loaded and is visible |\n|    stopped    |                    | Emitted when the camera has stopped              |\n|    paused     |                    | Emitted when the video has paused                |\n|    resumed    |                    | Emitted when the video has resumed               |\n| camera-change | `deviceID: string` | Emitted when a camera change occurs              |\n|   snapshot    |    `blob: Blob`    | Emitted when a snapshot is taken                 |\n|     error     |   `error: Error`   | Emitted when an error occurs                     |\n\n## Licence\n\nsimple-vue-camera is available under the MIT licence. See the LICENCE for more info.\n\n[![Stargazers repo roster for @BastiaanJansen/simple-vue-camera](https://reporoster.com/stars/BastiaanJansen/simple-vue-camera)](https://github.com/BastiaanJansen/simple-vue-camera/stargazers)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBastiaanJansen%2Fsimple-vue-camera","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FBastiaanJansen%2Fsimple-vue-camera","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBastiaanJansen%2Fsimple-vue-camera/lists"}