camera-component

Vainilla JavaScript Camera Component

Usage no npm install needed!

<script type="module">
  import cameraComponent from 'https://cdn.skypack.dev/camera-component';
</script>

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

<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:

<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

npm install camera-component --save

or yarn

yarn add camera-component

React

// 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);
});

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

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

export default App;

Angular

// 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 {}

// 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()
})

// 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();
    }
}

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

Stencil

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.

<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 or complete example

Quick start: Camera controller

This is the low level camera controller.

<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 or complete example

API

API camera-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>

stop() => Promise<void>

Method to stop the camera

Returns

Type: Promise<void>

Dependencies

Depends on

Graph

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

API camera-controller

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>

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

Change the video element size

Returns

Type: Promise<void>

stopWebcam() => Promise<void>

Stop the webcam Emits webcamStop event

Returns

Type: Promise<void>

takePicture() => Promise<void>

Captures the picture Emits picture event

Returns

Type: Promise<void>

Dependencies

Used by

Depends on

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

Graph

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

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, ...)