https://github.com/appfeel/camera-component
https://github.com/appfeel/camera-component
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/appfeel/camera-component
- Owner: appfeel
- License: mit
- Created: 2021-05-26T10:12:38.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2022-12-20T21:22:13.000Z (over 2 years ago)
- Last Synced: 2025-03-28T04:36:22.045Z (about 2 months ago)
- Language: TypeScript
- Size: 1.51 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme-template.md
- License: LICENSE
Awesome Lists containing this project
README
# JavaScript Camera Component
A Javascript camera component, made with Stencil.js. This is a web component and as such, it does not depend on any framework.
Anyhow it works well with Angular, React, Vue, Stencil, JQuery, any other unimaginable framework or none at all.
# Quick example
See [example in examples folder](https://github.com/appfeel/camera-component/blob/master/examples/camera-component.html)
```html
Open the camera in embedded mode
Open the camera in a modal
const cam = document.getElementById('cam');
cam.addEventListener('picture', (e) => console.log('Picture in base 64:', e.detail));
cam.addEventListener('backButton', () => console.log('backButton'));
cam.addEventListener('webcamStop', () => console.log('webcamStop'));
```
# Install
## JS without any framework
Include the following scripts on the html page:
```html
```
## Frameworks
Install using npm
```sh
npm install camera-component --save
```
or yarn
```sh
yarn add camera-component
```
## React
```js
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { applyPolyfills, defineCustomElements } from 'camera-component/loader';
ReactDOM.render(, document.getElementById('root'));
registerServiceWorker();
applyPolyfills().then(() => {
defineCustomElements(window);
});
```
```jsx
// App.jsx
import React from 'react';
import 'camera-component';
const App = () => {
return
}
export default App;
```
## Angular
```ts
// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
FormsModule,
],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}
```
```ts
// main.ts
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { applyPolyfills, defineCustomElements } from 'camera-component/loader';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));
applyPolyfills().then(() => {
defineCustomElements()
})
```
```ts
// app.component.ts
import {Component, ElementRef, ViewChild} from '@angular/core';
import 'camera-component';
@Component({
selector: 'app-home',
template: ``,
styleUrls: ['./home.component.scss'],
})
export class AppComponent {
@ViewChild('cam') camComponent: ElementRef;
async onAction() {
await this.camComponent.nativeElement.camComponentMethod();
}
}
```
```html
// app.component.html
```
## Stencil
```tsx
import { Component } from '@stencil/core';
import 'camera-component';
@Component({
tag: 'camera',
styleUrl: 'camera.scss'
})
export class Camera {
render() {
return (
);
}
}
```
# Quick start: Camera component
This is the camera component, ready to start the cam. It works in two different modes: embedded or in a modal.
```html
Open the camera in embedded mode
Open the camera in a modal
const cam = document.getElementById('cam');
cam.addEventListener('picture', (e) => console.log('Picture in base 64:', e.detail));
cam.addEventListener('backButton', () => console.log('backButton'));
cam.addEventListener('webcamStop', () => console.log('webcamStop'));
```
See [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)
# Quick start: Camera controller
This is the low level camera controller.
```html
Flip
Take picture
Stop cam
const cam = document.getElementById('cam');
cam.addEventListener('picture', (e) => console.log('Picture in base 64:', e.detail.snapshot));
cam.addEventListener('backButton', () => console.log('backButton'));
cam.addEventListener('webcamStop', () => console.log('webcamStop'));
```
See [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)
# API