# camera-component

> Vainilla JavaScript Camera Component

Latest version **1.3.0** (published 2022-12-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install camera-component
pnpm add camera-component
yarn add camera-component
bun add camera-component
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.0 |
| Published | 2022-12-20 |
| First published | 2021-05-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 9.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | AppFeel |
| Maintainers | appfeel |
| Keywords | webcam, camera, snapshot, picture, take picture, js snapshot, js picture, js camera, javascript snapshot, javascript picture, javascript camera, html5 snapshot, html5 picture, html5 camera |

## Links

- npm: https://www.npmjs.com/package/camera-component
- Repository: https://github.com/appfeel/camera-component
- Homepage: https://github.com/appfeel/camera-component#readme
- Issues: https://github.com/appfeel/camera-component/issues
- npm.io page: https://npm.io/package/camera-component

## Dependencies (2)

- [@ionic/core](https://npm.io/package/@ionic/core.md) ^5.9.4
- [@stencil/core](https://npm.io/package/@stencil/core.md) ^2.20.0

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 1.3.0 (latest) — 2022-12-20
- 1.2.0 — 2021-07-27
- 1.1.0 — 2021-06-09
- 1.0.3 — 2021-06-08
- 1.0.2 — 2021-06-08
- 1.0.1 — 2021-06-08
- 1.0.0 — 2021-06-08
- 0.0.8 — 2021-05-25
- 0.0.7 — 2021-05-25
- 0.0.6 — 2021-05-25
- 0.0.5 — 2021-05-25
- 0.0.4 — 2021-05-25
- 0.0.3 — 2021-05-25
- 0.0.2 — 2021-05-25
- 0.0.1 — 2021-05-25

## README

<!-- AUTO GENERATED: Do not edit this file, edit readme-template.md instead -->

# 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
<script type="module" src="https://unpkg.com/camera-component/dist/camera-component/camera-component.esm.js"></script>
<script nomodule src="https://unpkg.com/camera-component/dist/camera-component/camera-component.js"></script>

<camera-component id="cam" show-preview="true"></camera-component>
<button onclick="cam.start()">Open the camera in embedded mode</button>
<button onclick="cam.start(1)">Open the camera in a modal</button>
<script>
    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'));
</script>
```

# Install
## JS without any framework

Include the following scripts on the html page:

```html
<script type="module" src="https://unpkg.com/camera-component/dist/camera-component/camera-component.esm.js"></script>
<script nomodule src="https://unpkg.com/camera-component/dist/camera-component/camera-component.js"></script>
```

## 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(<App />, document.getElementById('root'));
registerServiceWorker();

applyPolyfills().then(() => {
  defineCustomElements(window);
});
```

```jsx
// App.jsx
import React from 'react';
import 'camera-component';

const App = () => {
    return <camera-component />
}

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: `<camera-component #cam></camera-component>`,
    styleUrls: ['./home.component.scss'],
})
export class AppComponent {

    @ViewChild('cam') camComponent: ElementRef<HTMLCamComponentElement>;

    async onAction() {
        await this.camComponent.nativeElement.camComponentMethod();
    }
}
```

```html
// app.component.html
<camera-component />
```

## Stencil

```tsx
import { Component } from '@stencil/core';
import 'camera-component';

@Component({
  tag: 'camera',
  styleUrl: 'camera.scss'
})
export class Camera {

render() {
    return (
      <camera-component />
    );
  }
}
```


# 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
<camera-component id="cam" show-preview="true"></camera-component>
<button onclick="cam.start()">Open the camera in embedded mode</button>
<button onclick="cam.start(1)">Open the camera in a modal</button>
<script>
    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'));
</script>
```

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
<camera-controller id="cam"></camera-controller>
<button onclick="cam.flipCam()">Flip</button>
<button onclick="cam.takePicture()">Take picture</button>
<button onclick="cam.stopWebcam()">Stop cam</button>
<script>
    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'));
</script>
```

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

# API camera-component



<!-- Auto Generated Below -->


## Overview

Camera component, this is the main component.

## Properties

| Property            | Attribute              | Description                                                      | Type                                                | Default                      |
| ------------------- | ---------------------- | ---------------------------------------------------------------- | --------------------------------------------------- | ---------------------------- |
| `allowGallery`      | `allow-gallery`        | If true, allows taking picture from gallery                      | `boolean`                                           | `true`                       |
| `backButtonStopCam` | `back-button-stop-cam` | If true, stops cam when back button is pushed                    | `boolean`                                           | `true`                       |
| `orientation`       | `orientation`          | Camera selected - user: front camera - environtment: back camera | `CamOrientation.environment \| CamOrientation.user` | `CamOrientation.environment` |
| `showPreview`       | `show-preview`         | If true, shows image preview when snap                           | `boolean`                                           | `true`                       |


## Events

| Event        | Description                              | Type                |
| ------------ | ---------------------------------------- | ------------------- |
| `backButton` | Event emitted when back button is pushed | `CustomEvent<void>` |
| `picture`    | Event emitted when snap                  | `CustomEvent<any>`  |
| `webcamStop` | Event emitted when cam stop              | `CustomEvent<any>`  |


## Methods

### `start(camMode?: CamMode) => Promise<void>`

Method to open the camera

#### Returns

Type: `Promise<void>`

void

### `stop() => Promise<void>`

Method to stop the camera

#### Returns

Type: `Promise<void>`

void


## Dependencies

### Depends on

- [camera-controller](../camera-controller)

### Graph
```mermaid
graph TD;
  camera-component --> camera-controller
  camera-controller --> ion-footer
  camera-controller --> ion-button
  camera-controller --> ion-icon
  ion-button --> ion-ripple-effect
  style camera-component fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------

*Built with [StencilJS](https://stenciljs.com/)*


# API camera-controller



<!-- Auto Generated Below -->


## Overview

Camera controller component

## Properties

| Property            | Attribute              | Description                                                      | Type                                                | Default                      |
| ------------------- | ---------------------- | ---------------------------------------------------------------- | --------------------------------------------------- | ---------------------------- |
| `allowGallery`      | `allow-gallery`        | If true, allows taking picture from gallery                      | `boolean`                                           | `true`                       |
| `backButtonStopCam` | `back-button-stop-cam` | If true, stops cam when back button is pushed                    | `boolean`                                           | `true`                       |
| `camMode`           | `cam-mode`             | Camera mode                                                      | `CamMode.embedded \| CamMode.modal`                 | `undefined`                  |
| `height`            | `height`               | Video element height                                             | `number`                                            | `undefined`                  |
| `orientation`       | `orientation`          | Selected camera - user: front camera - environtment: back camera | `CamOrientation.environment \| CamOrientation.user` | `CamOrientation.environment` |
| `showPreview`       | `show-preview`         | If true, shows image preview when snap                           | `boolean`                                           | `true`                       |
| `width`             | `width`                | Video element width                                              | `number`                                            | `undefined`                  |


## Events

| Event        | Description                              | Type                |
| ------------ | ---------------------------------------- | ------------------- |
| `backButton` | Event emitted when back button is pushed | `CustomEvent<void>` |
| `picture`    | Event emitted when snap                  | `CustomEvent<any>`  |
| `webcamStop` | Event emitted when cam is stoped         | `CustomEvent<any>`  |


## Methods

### `flipCam() => Promise<void>`

Switch between front and back cam

#### Returns

Type: `Promise<void>`

void

### `resize(width: number, height: number) => Promise<void>`

Change the video element size

#### Returns

Type: `Promise<void>`

void

### `stopWebcam() => Promise<void>`

Stop the webcam
Emits webcamStop event

#### Returns

Type: `Promise<void>`

void

### `takePicture() => Promise<void>`

Captures the picture
Emits picture event

#### Returns

Type: `Promise<void>`

void


## Dependencies

### Used by

 - [camera-component](../camera-component)

### Depends on

- ion-footer
- ion-button
- ion-icon

### Graph
```mermaid
graph TD;
  camera-controller --> ion-footer
  camera-controller --> ion-button
  camera-controller --> ion-icon
  ion-button --> ion-ripple-effect
  camera-component --> camera-controller
  style camera-controller fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------

*Built with [StencilJS](https://stenciljs.com/)*


# Roadmap

- [ ] Share image: Twitter, Facebook, Instagram, Email, Linkedin
- [ ] Rotate image
- [ ] Scale image
- [ ] Button effects
- [ ] Image effects (sepia, black/white, ...)
- [ ] Video recorder
- [ ] Allow multiple image formats (png, jpeg, quality, base64, blob, ...)

---
_Source: https://npm.io/package/camera-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._