{"id":23338738,"url":"https://github.com/appfeel/camera-component","last_synced_at":"2025-04-07T13:44:39.957Z","repository":{"id":57193316,"uuid":"370989895","full_name":"appfeel/camera-component","owner":"appfeel","description":null,"archived":false,"fork":false,"pushed_at":"2022-12-20T21:22:13.000Z","size":1583,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-28T04:36:22.045Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/appfeel.png","metadata":{"files":{"readme":"readme-template.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}},"created_at":"2021-05-26T10:12:38.000Z","updated_at":"2022-12-20T21:22:17.000Z","dependencies_parsed_at":"2023-01-30T01:50:14.158Z","dependency_job_id":null,"html_url":"https://github.com/appfeel/camera-component","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appfeel%2Fcamera-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appfeel%2Fcamera-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appfeel%2Fcamera-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appfeel%2Fcamera-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/appfeel","download_url":"https://codeload.github.com/appfeel/camera-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247666005,"owners_count":20975785,"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-12-21T03:16:17.096Z","updated_at":"2025-04-07T13:44:39.919Z","avatar_url":"https://github.com/appfeel.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# JavaScript Camera Component\n\nA Javascript camera component, made with Stencil.js. This is a web component and as such, it does not depend on any framework.\n\nAnyhow it works well with Angular, React, Vue, Stencil, JQuery, any other unimaginable framework or none at all.\n\n# Quick example\n\nSee [example in examples folder](https://github.com/appfeel/camera-component/blob/master/examples/camera-component.html)\n\n```html\n\u003cscript type=\"module\" src=\"https://unpkg.com/camera-component/dist/camera-component/camera-component.esm.js\"\u003e\u003c/script\u003e\n\u003cscript nomodule src=\"https://unpkg.com/camera-component/dist/camera-component/camera-component.js\"\u003e\u003c/script\u003e\n\n\u003ccamera-component id=\"cam\" show-preview=\"true\"\u003e\u003c/camera-component\u003e\n\u003cbutton onclick=\"cam.start()\"\u003eOpen the camera in embedded mode\u003c/button\u003e\n\u003cbutton onclick=\"cam.start(1)\"\u003eOpen the camera in a modal\u003c/button\u003e\n\u003cscript\u003e\n    const cam = document.getElementById('cam');\n    cam.addEventListener('picture', (e) =\u003e console.log('Picture in base 64:', e.detail));\n    cam.addEventListener('backButton', () =\u003e console.log('backButton'));\n    cam.addEventListener('webcamStop', () =\u003e console.log('webcamStop'));\n\u003c/script\u003e\n```\n\n# Install\n## JS without any framework\n\nInclude the following scripts on the html page:\n\n```html\n\u003cscript type=\"module\" src=\"https://unpkg.com/camera-component/dist/camera-component/camera-component.esm.js\"\u003e\u003c/script\u003e\n\u003cscript nomodule src=\"https://unpkg.com/camera-component/dist/camera-component/camera-component.js\"\u003e\u003c/script\u003e\n```\n\n## Frameworks\n\nInstall using npm\n```sh\nnpm install camera-component --save\n```\n\nor yarn\n```sh\nyarn add camera-component\n```\n\n## React\n\n```js\n// index.js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport registerServiceWorker from './registerServiceWorker';\n\nimport { applyPolyfills, defineCustomElements } from 'camera-component/loader';\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById('root'));\nregisterServiceWorker();\n\napplyPolyfills().then(() =\u003e {\n  defineCustomElements(window);\n});\n```\n\n```jsx\n// App.jsx\nimport React from 'react';\nimport 'camera-component';\n\nconst App = () =\u003e {\n    return \u003ccamera-component /\u003e\n}\n\nexport default App;\n```\n\n\n## Angular\n\n```ts\n// app.module.ts\nimport { BrowserModule } from '@angular/platform-browser';\nimport { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\n\nimport { AppComponent } from './app.component';\n\n@NgModule({\n  declarations: [AppComponent],\n  imports: [\n    BrowserModule,\n    FormsModule,\n  ],\n  bootstrap: [AppComponent],\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\n})\nexport class AppModule {}\n```\n\n```ts\n// main.ts\nimport { enableProdMode } from '@angular/core';\nimport { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\n\nimport { AppModule } from './app/app.module';\nimport { environment } from './environments/environment';\n\nimport { applyPolyfills, defineCustomElements } from 'camera-component/loader';\n\nif (environment.production) {\n  enableProdMode();\n}\n\nplatformBrowserDynamic().bootstrapModule(AppModule)\n  .catch(err =\u003e console.log(err));\napplyPolyfills().then(() =\u003e {\n  defineCustomElements()\n})\n```\n\n```ts\n// app.component.ts\nimport {Component, ElementRef, ViewChild} from '@angular/core';\n\nimport 'camera-component';\n\n@Component({\n    selector: 'app-home',\n    template: `\u003ccamera-component #cam\u003e\u003c/camera-component\u003e`,\n    styleUrls: ['./home.component.scss'],\n})\nexport class AppComponent {\n\n    @ViewChild('cam') camComponent: ElementRef\u003cHTMLCamComponentElement\u003e;\n\n    async onAction() {\n        await this.camComponent.nativeElement.camComponentMethod();\n    }\n}\n```\n\n```html\n// app.component.html\n\u003ccamera-component /\u003e\n```\n\n## Stencil\n\n```tsx\nimport { Component } from '@stencil/core';\nimport 'camera-component';\n\n@Component({\n  tag: 'camera',\n  styleUrl: 'camera.scss'\n})\nexport class Camera {\n\nrender() {\n    return (\n      \u003ccamera-component /\u003e\n    );\n  }\n}\n```\n\n\n# Quick start: Camera component\n\nThis is the camera component, ready to start the cam. It works in two different modes: embedded or in a modal.\n\n```html\n\u003ccamera-component id=\"cam\" show-preview=\"true\"\u003e\u003c/camera-component\u003e\n\u003cbutton onclick=\"cam.start()\"\u003eOpen the camera in embedded mode\u003c/button\u003e\n\u003cbutton onclick=\"cam.start(1)\"\u003eOpen the camera in a modal\u003c/button\u003e\n\u003cscript\u003e\n    const cam = document.getElementById('cam');\n    cam.addEventListener('picture', (e) =\u003e console.log('Picture in base 64:', e.detail));\n    cam.addEventListener('backButton', () =\u003e console.log('backButton'));\n    cam.addEventListener('webcamStop', () =\u003e console.log('webcamStop'));\n\u003c/script\u003e\n```\n\nSee [documentation on Github](https://github.com/appfeel/camera-component/blob/master/src/components/camera-component/readme.md) or [complete example](https://github.com/appfeel/camera-component/blob/master/examples/camera-component.html)\n\n# Quick start: Camera controller\n\nThis is the low level camera controller.\n\n```html\n\u003ccamera-controller id=\"cam\"\u003e\u003c/camera-controller\u003e\n\u003cbutton onclick=\"cam.flipCam()\"\u003eFlip\u003c/button\u003e\n\u003cbutton onclick=\"cam.takePicture()\"\u003eTake picture\u003c/button\u003e\n\u003cbutton onclick=\"cam.stopWebcam()\"\u003eStop cam\u003c/button\u003e\n\u003cscript\u003e\n    const cam = document.getElementById('cam');\n    cam.addEventListener('picture', (e) =\u003e console.log('Picture in base 64:', e.detail.snapshot));\n    cam.addEventListener('backButton', () =\u003e console.log('backButton'));\n    cam.addEventListener('webcamStop', () =\u003e console.log('webcamStop'));\n\u003c/script\u003e\n```\n\nSee [documentation on Github](https://github.com/appfeel/camera-component/blob/master/src/components/camera-controller/readme.md) or [complete example](https://github.com/appfeel/camera-component/blob/master/examples/camera-controller.html)\n\n# API\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fappfeel%2Fcamera-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fappfeel%2Fcamera-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fappfeel%2Fcamera-component/lists"}